/* ==========================================================================
   THE NEEDLE ACADEMY
   Editorial design system: warm neutrals, blush, burgundy, signature red.
   Mobile-first. Written by hand; edit freely.
   --------------------------------------------------------------------------
   0. Tokens          5. Buttons & links      10. Cards / shop
   1. Reset           6. Header & nav         11. Video & Instagram
   2. Typography      7. Hero                 12. Testimonials & FAQ
   3. Layout          8. Marquee              13. Contact & footer
   4. Decoration      9. About / workshops    14. Motion & a11y
   ========================================================================== */

/* 0. TOKENS ---------------------------------------------------------------- */
:root {
  /* Brand, sampled from the logo */
  --red:        #CE3F39;
  --red-deep:   #B3312C;
  --red-ink:    #A82F2A;   /* text-safe red: 4.5:1 on every warm background */
  --burgundy:   #6B2A33;
  --burgundy-d: #4A202A;
  --plum:       #4F313D;

  /* Warm neutrals */
  --cream:      #FBF6EF;
  --cream-2:    #FDFAF6;
  --sand:       #F4EADF;
  --sand-2:     #EFE2D4;
  --blush:      #F2DEDA;
  --blush-2:    #EACFCA;
  --rose:       #D9ADA7;

  /* Ink */
  --ink:        #2B1F23;
  --ink-70:     #58474C;
  --ink-50:     #6F5D62;
  --line:       rgba(43, 31, 35, .14);
  --line-soft:  rgba(43, 31, 35, .08);

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

  /* Scale (fluid) */
  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + .8vw, 2rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.6vw, 2.9rem);
  --step-4:  clamp(2.5rem, 1.9rem + 2.9vw, 4.4rem);
  --step-5:  clamp(3rem, 2rem + 4.6vw, 6rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --radius: 4px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(74, 32, 42, .06);
  --shadow: 0 18px 44px -22px rgba(74, 32, 42, .35);
  --shadow-lg: 0 36px 80px -40px rgba(74, 32, 42, .45);

  --ease: cubic-bezier(.22, .68, 0, 1);
}

/* 1. RESET ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;   /* clears the sticky header on anchor jumps */
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;            /* keeps the sticky header working */
  /* barely-there paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* 2. TYPOGRAPHY ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--burgundy-d);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.24; letter-spacing: -.01em; }
h4 { font-size: var(--step-0); }

p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--burgundy-d); }
em { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--red-ink);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 26px; height: 1px; background: var(--red-ink);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-70);
  font-weight: 300;
}
.muted { color: var(--ink-70); }
.serif-accent { font-family: var(--display); font-style: italic; color: var(--red-ink); }
.small { font-size: var(--step--1); color: var(--ink-50); }

/* Big editorial numeral */
.numeral {
  font-family: var(--display);
  font-size: var(--step-2);
  color: var(--rose);
  line-height: 1;
  display: block;
  margin-bottom: .9rem;
}

/* 3. LAYOUT ---------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), 1200px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 780px); }
.wrap--wide   { width: min(100% - (var(--gutter) * 2), 1400px); }

section { position: relative; scroll-margin-top: 86px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1.1rem; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--offset { grid-template-columns: 1.05fr .95fr; }
  .split__media--first { order: -1; }
}

.stack > * + * { margin-top: 1.15rem; }
.cta-row {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: 2rem;
}

/* Section colour fields */
.field-sand   { background: var(--sand); }
.field-blush  { background: linear-gradient(170deg, var(--blush) 0%, var(--sand) 100%); }
.field-cream  { background: var(--cream-2); }
.field-burg   { background: var(--burgundy-d); color: var(--sand); }
.field-burg h2, .field-burg h3 { color: var(--cream); }
.field-burg .lede, .field-burg .muted { color: rgba(251, 246, 239, .74); }
.field-burg .eyebrow { color: var(--rose); }
.field-burg .eyebrow::before, .field-burg .eyebrow--center::after { background: var(--rose); }

/* 4. DECORATION ------------------------------------------------------------ */
.rule {
  height: 1px; border: 0; background: var(--line-soft);
}

/* soft blurred colour wash */
.wash {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55; pointer-events: none; z-index: 0;
}
.wash--rose  { background: var(--blush-2); }
.wash--sand  { background: var(--sand-2); }
.wash--red   { background: rgba(206, 63, 57, .18); }

.above { position: relative; z-index: 1; }

/* deckled edge between fields */
.edge { display: block; width: 100%; height: clamp(28px, 5vw, 60px); }

/* 5. BUTTONS & LINKS ------------------------------------------------------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-pill);
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .35s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--red-deep); border-color: var(--red-deep); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--burgundy-d);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--burgundy-d); border-color: var(--burgundy-d); color: var(--cream); }

.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--burgundy-d); }
.btn--cream:hover { background: #fff; border-color: #fff; color: var(--burgundy-d); }

.btn--outline-cream {
  --btn-bg: transparent; --btn-fg: var(--cream);
  border-color: rgba(251, 246, 239, .38);
}
.btn--outline-cream:hover { background: var(--cream); color: var(--burgundy-d); border-color: var(--cream); }

.btn--sm { padding: .7rem 1.25rem; font-size: .85rem; }
.btn--block { width: 100%; justify-content: center; }

/* Understated text link with drawn underline */
.link {
  color: var(--burgundy-d);
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease), color .3s;
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; color: var(--red); }
.link--red { color: var(--red-ink); font-weight: 500; }

a { color: var(--red-ink); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  background: var(--burgundy-d); color: var(--cream);
  padding: .8rem 1.4rem; border-radius: 0 0 12px 12px;
  z-index: 999; text-decoration: none; font-size: .9rem;
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* 6. HEADER & NAV ---------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 246, 239, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background-color .4s, box-shadow .4s;
}
.header.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 6px 24px -20px rgba(74, 32, 42, .5);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: .75rem;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--burgundy-d);
  flex: 0 1 auto; min-width: 0;
}
.brand img { width: 40px; height: auto; }
.brand__name {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.brand__name span {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.5rem, 1.5vw, .58rem);
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: .24rem;
  white-space: nowrap;      /* always one line under the name */
}
/* on the narrowest phones there simply isn't room for it beside the menu button */
@media (max-width: 380px) {
  .brand__name span { display: none; }
}

.nav { display: none; position: relative; }
.nav ul {
  display: flex; align-items: center; gap: .1rem;
  position: relative; z-index: 1;
}
.nav a {
  /* same face, size and tracking as the strapline under the logo */
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-70); text-decoration: none;
  position: relative;
  padding: .5rem .58rem;
  border-radius: var(--radius-pill);
  transition: color .3s;
  white-space: nowrap;
}
.nav a:hover,
.nav a:focus-visible { color: var(--burgundy-d); }
.nav a[aria-current="true"],
.nav a[aria-current="page"] { color: var(--burgundy-d); font-weight: 500; }

/* The glider: a soft pill that follows the cursor from tab to tab and settles
   back on the current page. Created by JS, so the no-JS fallback below still
   gives hover feedback. */
.nav__glider {
  position: absolute; top: 50%; left: 0;
  height: 2rem; width: 0;
  background: var(--blush);
  border-radius: var(--radius-pill);
  transform: translate(0, -50%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform .5s var(--ease), width .5s var(--ease),
              opacity .3s var(--ease), background-color .3s;
}
.nav__glider::after {
  content: "";
  position: absolute; left: 50%; bottom: -7px;
  width: 16px; height: 2px; margin-left: -8px;
  background: var(--red);
  border-radius: 2px;
  opacity: .75;
}
.nav__glider.is-instant { transition: none; }
.nav__glider.is-roaming { background: var(--sand-2); }

/* No JavaScript? Fall back to the drawn underline. */
.nav:not(.has-glider) a::after {
  content: ""; position: absolute; left: .58rem; right: .58rem; bottom: .1rem;
  height: 1px; width: auto; transform: scaleX(0); transform-origin: left;
  background: var(--red); transition: transform .35s var(--ease);
}
.nav:not(.has-glider) a:hover::after,
.nav:not(.has-glider) a[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { display: none; }
.header__cta.btn {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .72rem 1.15rem;
}

@media (min-width: 1160px) {
  .nav { display: block; }
  .burger { display: none; }
}
@media (min-width: 1300px) {
  .header__cta { display: block; }
}

/* The menu button is the Needle Academy drop. It's red while the menu is shut
   and turns near-black once it's open. */
.burger {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--red);
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s;
}
.burger:hover { border-color: var(--rose); }
.burger__drop {
  transition: transform .45s var(--ease);
  transform-origin: 50% 60%;
}
.burger[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--ink);
}
.burger[aria-expanded="true"] .burger__drop {
  transform: rotate(180deg) scale(.94);
}

.drawer {
  position: fixed; inset: 0;
  background: var(--cream);
  z-index: 99;
  padding: 7rem var(--gutter) 4rem;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer.is-open { transform: translateY(0); }
.drawer ul { display: flex; flex-direction: column; gap: .1rem; }
.drawer a {
  display: block; padding: .85rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--burgundy-d); text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.drawer a:hover { color: var(--red-ink); }
.drawer a[aria-current="page"] { color: var(--red-ink); }
/* The menu's call to action: a soft blush pill, left-aligned with the links
   above it rather than a heavy full-width red bar. */
.drawer .btn {
  margin-top: 2.4rem;
  align-self: flex-start;
  width: auto;
  justify-content: flex-start;
  background: var(--blush);
  border-color: var(--blush);
  color: var(--red-ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .95rem 1.5rem;
}
.drawer .btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
@media (min-width: 1160px) { .drawer { display: none; } }

body.no-scroll { overflow: hidden; }

/* 7. HERO ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 950px) { .hero__grid { grid-template-columns: 1.02fr .98fr; } }

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .em {
  font-style: italic;
  color: var(--red-ink);
}
.hero__text .lede { max-width: 46ch; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem;
  margin-top: 2.75rem; padding-top: 1.8rem;
  border-top: 1px solid var(--line-soft);
}
.hero__meta div { min-width: 108px; }
.hero__meta dt { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); }
.hero__meta dd { font-family: var(--display); font-size: var(--step-1); color: var(--burgundy-d); margin-top: .2rem; }

/* Hero image composition */
.hero__media { position: relative; }
.hero__frame {
  position: relative;
  border-radius: 300px 300px var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--sand);
}
.hero__frame img { width: 100%; }
.hero__badge {
  position: absolute; z-index: 2;
  right: -6px; bottom: 8%;
  background: var(--cream-2);
  border-radius: 50%;
  width: clamp(104px, 15vw, 140px); height: clamp(104px, 15vw, 140px);
  display: grid; place-items: center; text-align: center;
  box-shadow: var(--shadow);
  padding: 1rem;
}
.hero__badge span {
  font-family: var(--display); font-size: .82rem; line-height: 1.3; color: var(--burgundy-d);
}
.hero__badge b { display: block; font-size: 1.5rem; color: var(--red); font-weight: 400; }

.hero__tube {
  position: absolute; left: -34px; top: 6%;
  width: clamp(64px, 9vw, 96px);
  z-index: 2;
  filter: drop-shadow(0 18px 26px rgba(74, 32, 42, .22));
}
@media (max-width: 520px) { .hero__tube { left: -14px; width: 58px; } }

.hero__wash-1 { width: 46vw; height: 46vw; left: -16vw; top: -10vw; }
.hero__wash-2 { width: 34vw; height: 34vw; right: -10vw; bottom: -12vw; }

/* trust strip */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 1.6rem;
  border-block: 1px solid var(--line-soft);
}
.trust li {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50);
  display: flex; align-items: center; gap: .55rem;
}
.trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }

/* 8. MARQUEE --------------------------------------------------------------- */
.marquee {
  overflow: hidden; padding-block: 1.1rem;
  background: var(--burgundy-d);
  --speed: 52s;
  border-top: 1px solid rgba(251, 246, 239, .1);
}
.marquee__track {
  display: flex; width: max-content;
  animation: slide var(--speed) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__unit {
  display: inline-flex; align-items: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  padding-inline: clamp(.5rem, 1.4vw, 1rem);
  white-space: nowrap;
}
.marquee__name {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.32rem);
  letter-spacing: -.012em;
  color: var(--cream);
}
.marquee__tag {
  font-family: var(--display); font-style: italic;
  font-size: clamp(.95rem, 1.9vw, 1.24rem);
  color: var(--rose);
}
.marquee__handle {
  font-size: clamp(.72rem, 1.4vw, .84rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251, 246, 239, .82);
}
/* the red dots that separate each part */
.marquee__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); flex: none;
}
.marquee__icons {
  display: inline-flex; align-items: center;
  gap: clamp(.55rem, 1.2vw, .8rem);
  color: var(--cream);
}
.marquee__icons svg { opacity: .92; }
/* smaller dots between the three icons, so they read as separate marks */
.marquee__pip {
  width: 3.5px; height: 3.5px; border-radius: 50%;
  background: rgba(251, 246, 239, .45); flex: none;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 9. ABOUT / WORKSHOPS ----------------------------------------------------- */
.portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.portrait--arch { border-radius: 240px 240px var(--radius-lg) var(--radius-lg); }
.portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(74, 32, 42, .18));
  pointer-events: none;
}

.quote-card {
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.quote-card p { font-family: var(--display); font-size: var(--step-1); line-height: 1.4; color: var(--burgundy-d); }
.quote-card footer { margin-top: 1rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }

/* value list */
.values { counter-reset: v; }
.values li {
  counter-increment: v;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem;
  align-items: start;
}
.values li::before {
  content: "0" counter(v);
  font-family: var(--display); color: var(--rose); font-size: 1.05rem; line-height: 1.5;
}
.values h3 { margin-bottom: .3rem; }

/* --- The founder's journey: a scrapbook timeline ------------------------- */
.journey {
  scroll-margin-top: 100px;
  --jgap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.journey__head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 56ch; }

.journey__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76vw, 300px);
  gap: var(--jgap);
  /* horizontal scroll on small screens, it reads like flicking through an album */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.4rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--rose) transparent;
}
.journey__list::-webkit-scrollbar { height: 5px; }
.journey__list::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 99px; }
.journey__list::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 99px; }

@media (min-width: 880px) {
  .journey__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
}

.journey__item { scroll-snap-align: start; }

/* the photo, mounted slightly askew like something stuck in an album */
.journey__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 150px 150px 16px 16px;
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.journey__item:nth-child(odd)  .journey__photo { --tilt: -1.4deg; }
.journey__item:nth-child(even) .journey__photo { --tilt: 1.2deg; }
.journey__item:hover .journey__photo,
.journey__item:focus-within .journey__photo { --tilt: 0deg; transform: translateY(-4px); }
.journey__photo img { width: 100%; height: 100%; object-fit: cover; }

/* the rail: a hairline running through every dot */
.journey__rail {
  position: relative;
  height: 26px;
  display: grid;
  place-items: center;
  margin: 1.3rem 0 1rem;
}
.journey__rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--jgap) * -.5 - 1px);
  right: calc(var(--jgap) * -.5 - 1px);
  height: 1px;
  background: var(--rose);
}
.journey__item:first-child .journey__rail::before { left: 50%; }
.journey__item:last-child  .journey__rail::before { right: 50%; }
.journey__dot {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px var(--cream);
}
.field-sand .journey__dot, .field-blush .journey__dot { box-shadow: 0 0 0 5px var(--sand); }

.journey__year {
  display: block;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin-bottom: .45rem;
}
.journey__item h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.journey__item p { font-size: .93rem; color: var(--ink-70); }

.journey__hint {
  display: flex; align-items: center; gap: .55rem;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50); margin-top: 1.2rem;
}
@media (min-width: 880px) { .journey__hint { display: none; } }

/* workshop cards */
.card {
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card__media { position: relative; aspect-ratio: 10 / 7; overflow: hidden; background: var(--sand); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; gap: .8rem; }
.card__body .btn { margin-top: auto; align-self: flex-start; }

.tag {
  display: inline-block;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-ink);
  background: var(--blush);
  border-radius: var(--radius-pill);
  padding: .35rem .8rem;
}
.tag--dark { background: rgba(251,246,239,.12); color: var(--rose); }

.meta-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; }
.meta-list li { display: flex; gap: .6rem; font-size: .9rem; color: var(--ink-70); align-items: baseline; }
.meta-list li::before { content: "—"; color: var(--rose); flex: none; }

/* resource / guide feature */
.feature {
  background: var(--cream-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
.checks { display: grid; gap: .7rem; margin-top: 1.4rem; }
@media (min-width: 620px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--ink-70); }
.checks svg { flex: none; margin-top: .35rem; color: var(--red); }

/* 10. BOTTLES (flip cards) + SHOP ------------------------------------------ */
.bottles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 1.8vw, 1.3rem);
}
@media (min-width: 640px)  { .bottles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .bottles { grid-template-columns: repeat(6, 1fr); } }

.bottle { position: relative; }

.bottle__flip {
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  border-radius: 18px;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.bottle__inner {
  position: relative; display: block;
  aspect-ratio: 3 / 4.7;
  perspective: 1400px;
}

/* Each face is rotated on its own rather than relying on transform-style:
   preserve-3d through the button wrapper, which browsers handle inconsistently.
   Opacity backs up backface-visibility, so only one face is ever readable. */
.bottle__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .7s var(--ease), opacity .35s linear .18s, box-shadow .4s var(--ease);
}
.bottle__flip:hover .bottle__face { box-shadow: var(--shadow); }

/* front: the painting and its name, nothing else */
.bottle__face--front {
  background: var(--cream-2);
  justify-content: center;
  gap: .7rem;
  padding: 1rem .5rem 1.1rem;
  transform: rotateY(0deg);
  opacity: 1;
}
.bottle.is-flipped .bottle__face--front {
  transform: rotateY(180deg);
  opacity: 0;
}
.bottle__face--front img {
  width: auto; height: 62%; max-width: 60%;
  object-fit: contain;
}
.bottle__name {
  font-family: var(--display);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--burgundy-d);
  line-height: 1;
}
.bottle__face--front::after {
  content: "";
  position: absolute; left: 50%; bottom: .62rem;
  width: 15px; height: 15px; margin-left: -7.5px;
  opacity: .4;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE3F39' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
}

/* back: what's actually in it */
.bottle.is-flipped .bottle__face--back { transform: rotateY(0deg); opacity: 1; }
.bottle__face--back {
  transform: rotateY(-180deg);
  opacity: 0;
  background: var(--burgundy-d);
  border-color: var(--burgundy-d);
  color: rgba(251, 246, 239, .82);
  justify-content: flex-start;
  text-align: center;
  padding: 1rem .6rem;
  gap: .55rem;
}
.bottle__back-head {
  font-family: var(--display);
  font-size: 1.05rem; line-height: 1.15;
  color: var(--cream);
}
.bottle__back-head em {
  display: block; font-style: normal;
  font-family: var(--sans);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose); margin-top: .3rem;
}
.bottle__tests { font-size: .74rem; line-height: 1.5; }
.bottle__tests li + li { margin-top: .1rem; }
.bottle__order {
  margin-top: auto;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose);
  border-top: 1px solid rgba(251, 246, 239, .18);
  padding-top: .5rem; width: 100%;
}

.shop-card {
  background: linear-gradient(160deg, var(--blush) 0%, var(--sand) 90%);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 860px) { .shop-card { grid-template-columns: .9fr 1.1fr; } }
.price {
  font-family: var(--display); font-size: var(--step-2); color: var(--red-ink);
  display: flex; align-items: baseline; gap: .6rem;
}
.price s { font-size: 1rem; color: var(--ink-50); }

/* 11. VIDEO & INSTAGRAM ---------------------------------------------------- */
.video-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.video-card video, .video-card .video-card__poster {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  background: var(--sand);
}
.video-card__btn {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(74,32,42,.02) 40%, rgba(74,32,42,.42));
  border: 0; cursor: pointer; width: 100%; padding: 0;
  transition: background .4s;
}
.video-card__btn:hover { background: linear-gradient(180deg, rgba(74,32,42,.08) 30%, rgba(74,32,42,.52)); }
.video-card__play {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(251, 246, 239, .92);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  transition: transform .4s var(--ease);
}
.video-card__btn:hover .video-card__play { transform: scale(1.08); }
.video-card__play svg { color: var(--red); margin-left: 3px; }
.video-card.is-playing .video-card__btn { display: none; }
.video-card__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.2rem;
  color: var(--cream);
  pointer-events: none;
}
.video-card__cap h3 { color: var(--cream); font-size: 1.05rem; }
.video-card__cap span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.video-card.is-playing .video-card__cap { opacity: 0; transition: opacity .3s; }

.ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.6rem, 1.6vw, 1rem); }
@media (min-width: 700px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }
.ig-item {
  position: relative; display: block; overflow: hidden;
  border-radius: 14px; aspect-ratio: 4 / 5; background: var(--sand);
}
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ig-item:hover img { transform: scale(1.07); }
.ig-item__overlay {
  position: absolute; inset: 0;
  background: rgba(74, 32, 42, .68);
  color: var(--cream);
  display: grid; place-items: center; gap: .4rem;
  opacity: 0; transition: opacity .35s;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: .8rem;
}
.ig-item:hover .ig-item__overlay, .ig-item:focus-visible .ig-item__overlay { opacity: 1; }

.ig-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem; margin-bottom: 2rem;
}
.ig-handle {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--burgundy-d);
  font-family: var(--display); font-size: var(--step-1);
}
.ig-handle svg { color: var(--red); flex: none; }

/* 12. TESTIMONIALS & FAQ --------------------------------------------------- */
.testimonial {
  background: var(--cream-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 1.2rem;
  height: 100%;
}
.field-burg .testimonial {
  background: rgba(251, 246, 239, .06);
  border-color: rgba(251, 246, 239, .14);
}
.field-burg .testimonial blockquote { color: var(--cream); }
.field-burg .testimonial cite { color: var(--rose); }
.testimonial blockquote {
  font-family: var(--display); font-size: var(--step-1); line-height: 1.42;
  color: var(--burgundy-d); flex: 1;
}
.stars { display: flex; gap: .18rem; color: var(--red); }
.field-burg .stars { color: var(--rose); }
.testimonial cite {
  font-style: normal; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-50); line-height: 1.6;
}
.testimonial cite b { display: block; font-weight: 500; letter-spacing: .06em; }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; gap: 1.2rem; align-items: flex-start; justify-content: space-between;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--display); font-size: var(--step-1); color: var(--burgundy-d);
  line-height: 1.3;
}
.faq__q:hover { color: var(--red-ink); }
.faq__icon { flex: none; width: 22px; height: 22px; position: relative; margin-top: .35rem; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 1.5px; background: var(--red);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease), opacity .3s;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.6rem; max-width: 68ch; color: var(--ink-70); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* 13. CONTACT & FOOTER ----------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.field select option { font-family: var(--sans); color: var(--ink); }

.field label {
  display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: .45rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1rem;
  color: var(--ink);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--rose); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206, 63, 57, .13);
  background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-50); opacity: .85; }
.field select {
  appearance: none; -webkit-appearance: none;
  /* the dropdown marker is a blood drop, and it darkens once you open it */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 19' width='14' height='19'%3E%3Cpath d='M7 0 C10.6 5.2 14 8.2 14 11.4 A7 7 0 0 1 0 11.4 C0 8.2 3.4 5.2 7 0 Z' fill='%23CE3F39'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 12px 16px;
  padding-right: 2.8rem;
  transition: background-image .2s, border-color .3s, box-shadow .3s, background-color .3s;
  cursor: pointer;
}
.field select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 19' width='14' height='19'%3E%3Cpath d='M7 0 C10.6 5.2 14 8.2 14 11.4 A7 7 0 0 1 0 11.4 C0 8.2 3.4 5.2 7 0 Z' fill='%23A82F2A'/%3E%3C/svg%3E"); }
.field select:focus,
.field select:active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 19' width='14' height='19'%3E%3Cpath d='M7 0 C10.6 5.2 14 8.2 14 11.4 A7 7 0 0 1 0 11.4 C0 8.2 3.4 5.2 7 0 Z' fill='%232B1F23'/%3E%3C/svg%3E"); }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--ink-70); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: .25rem; accent-color: var(--red); }
.form__note { font-size: .8rem; color: var(--ink-50); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  border-radius: 12px; padding: .9rem 1.1rem; font-size: .9rem;
  background: var(--blush); color: var(--burgundy-d);
}
.form-status[hidden] { display: none; }

.contact-aside { display: grid; gap: 1.6rem; align-content: start; }
.contact-aside a { color: var(--burgundy-d); }

.footer { background: var(--burgundy-d); color: rgba(251, 246, 239, .74); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4, .footer__h { color: var(--cream); font-family: var(--sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 500; }
.footer a { color: rgba(251, 246, 239, .74); text-decoration: none; transition: color .3s; }
.footer a:hover { color: var(--cream); }
.footer li + li { margin-top: .55rem; }
.footer__brand img { width: 58px; margin-bottom: 1.1rem; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(251, 246, 239, .16);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8rem;
}
.socials { display: flex; gap: .7rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(251, 246, 239, .24);
  display: grid; place-items: center;
  transition: background-color .3s, border-color .3s, transform .3s;
}
.socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

/* newsletter */
.newsletter { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.newsletter input {
  flex: 1 1 200px;
  background: rgba(251, 246, 239, .08);
  border: 1px solid rgba(251, 246, 239, .22);
  border-radius: var(--radius-pill);
  padding: .8rem 1.1rem; color: var(--cream);
}
.newsletter input::placeholder { color: rgba(251, 246, 239, .68); }
.newsletter input:focus { outline: none; border-color: var(--rose); background: rgba(251,246,239,.14); }

/* --- Inner-page masthead -------------------------------------------------- */
.pagehead {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
}
.pagehead h1 { font-size: var(--step-3); max-width: 22ch; }
.pagehead__wash { width: 46vw; height: 46vw; right: -14vw; top: -18vw; }

/* --- Coming soon ---------------------------------------------------------- */
.pill-soon {
  display: inline-block;
  background: var(--blush);
  color: var(--red-ink);
  border-radius: var(--radius-pill);
  padding: .25rem .75rem;
  font-size: .62rem; letter-spacing: .16em;
  margin-right: .1rem;
}
.tag--soon { background: var(--sand-2); color: var(--ink-70); }
.card.is-soon .card__media { filter: saturate(.72); }
.card.is-soon:hover { transform: none; box-shadow: var(--shadow-sm); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* --- Credentials ---------------------------------------------------------- */
.creds {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--red);
  border-radius: 4px 16px 16px 4px;
}
.creds__name {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--burgundy-d);
  line-height: 1.2;
}
.creds__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .9rem;
  margin-top: .7rem;
}
.creds__list li {
  display: flex; align-items: center; gap: .9rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50);
}
.creds__list li:not(:last-child)::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--rose);
}

/* --- Why we exist ---------------------------------------------------------- */
.manifesto p {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  line-height: 1.35;
  color: var(--burgundy-d);
  text-wrap: balance;
}
.manifesto p + p { margin-top: 1.3rem; }
.manifesto p:last-child { color: var(--red-ink); font-style: italic; }
.manifesto__drop {
  display: block; width: 20px; height: 27px;
  margin: 0 auto 2rem;
  color: var(--red);
}

/* --- The guide, shown on a tablet with the pages fanned behind ----------- */
.showcase {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 980px) { .showcase { grid-template-columns: .92fr 1.08fr; } }

.device-scene {
  position: relative;
  padding: clamp(1rem, 3vw, 2.5rem) 0;
  margin-inline: clamp(-2.5rem, -4vw, -1rem);
  perspective: 1600px;
}

/* One page peeking out either side of the tablet. The --l2 / --r2 rules are
   spare, in case you ever want four. */
.fan {
  position: absolute;
  top: 50%; left: 50%;
  width: 46%;
  border-radius: 10px;
  box-shadow: 0 24px 50px -26px rgba(74, 32, 42, .55);
  transform-origin: 50% 100%;
  transition: transform .8s var(--ease);
  border: 1px solid rgba(43, 31, 35, .07);
}
.fan--l2 { transform: translate(-104%, -55%) rotate(-15deg) scale(.9); }
.fan--l1 { transform: translate(-116%, -50%) rotate(-6deg) scale(.97); }
.fan--r1 { transform: translate(16%, -50%) rotate(6deg) scale(.97); }
.fan--r2 { transform: translate(4%, -55%) rotate(15deg) scale(.9); }

.device-scene:hover .fan--l2 { transform: translate(-112%, -56%) rotate(-18deg) scale(.9); }
.device-scene:hover .fan--l1 { transform: translate(-124%, -50%) rotate(-7deg) scale(.97); }
.device-scene:hover .fan--r1 { transform: translate(24%, -50%) rotate(7deg) scale(.97); }
.device-scene:hover .fan--r2 { transform: translate(12%, -56%) rotate(18deg) scale(.9); }

@media (max-width: 620px) {
  .fan--l2, .fan--r2 { display: none; }
  .fan--l1 { transform: translate(-104%, -51%) rotate(-7deg) scale(.8); }
  .fan--r1 { transform: translate(4%, -51%) rotate(7deg) scale(.8); }
}

/* the tablet itself */
.device {
  position: relative;
  z-index: 2;
  width: min(100%, 420px);
  margin-inline: auto;
  background: linear-gradient(150deg, #3a3033 0%, #241d1f 45%, #3a3033 100%);
  border-radius: 30px;
  padding: 12px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .12) inset,
    0 46px 90px -36px rgba(74, 32, 42, .62);
}
.device__screen {
  position: relative;
  border-radius: 19px;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 88 / 110;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a soft glare across the glass */
.device__screen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 26%, transparent 46%);
  pointer-events: none;
}
.device__cam {
  position: absolute; top: 5px; left: 50%;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%;
  background: #6d5f62;
  z-index: 3;
}
.device__note {
  margin-top: clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-50);
}

/* the buy panel */
.buybar {
  display: flex; align-items: center; gap: .9rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.buybar .price { margin: 0; }
.rating { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.rating .stars svg { width: 17px; height: 17px; }
.rating span {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50);
}

.btn--burgundy {
  --btn-bg: var(--burgundy-d);
  --btn-fg: var(--cream);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 1.15rem 2.4rem;
}
.btn--burgundy:hover {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}
.btn--lg { padding: 1.15rem 2.4rem; font-size: 1rem; }

.badge-row {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin-top: 1.5rem;
}
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  padding: .45rem .9rem;
  font-size: .74rem;
  color: var(--ink-70);
}
.badge svg { color: var(--red); flex: none; }


/* --- Reading progress, back to top, and the scroll cue -------------------- */

/* A slim rail down the right edge that fills as you read. Decorative, it
   repeats what the scrollbar already says, so screen readers skip it. */
.progress-rail {
  position: fixed;
  right: clamp(10px, 1.3vw, 20px);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: min(40vh, 340px);
  background: rgba(43, 31, 35, .09);
  border-radius: var(--radius-pill);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.progress-rail.is-visible { opacity: 1; }
.progress-rail__fill {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 0;
  background: linear-gradient(180deg, var(--red) 0%, var(--burgundy-d) 100%);
  border-radius: var(--radius-pill);
}
/* a drop riding the end of the fill */
.progress-rail__drop {
  position: absolute; left: 50%; top: 0;
  width: 9px; height: 12px;
  margin-left: -4.5px;
  transform: translateY(-50%);
  color: var(--red);
}
@media (max-width: 900px) { .progress-rail { display: none; } }

/* Back to the top */
.to-top {
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 30px);
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--burgundy-d);
  color: var(--cream);
  border: 0; border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease),
              visibility .4s, background-color .3s;
  z-index: 70;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--red); }
.to-top svg { transition: transform .35s var(--ease); }
.to-top:hover svg { transform: translateY(-2px); }

/* The nudge at the bottom of the hero */
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  text-decoration: none;
  color: var(--ink-50);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  transition: opacity .5s var(--ease), color .3s;
}
.scroll-cue:hover { color: var(--red-ink); }
.scroll-cue__drop { color: var(--red); animation: dropfall 2.4s ease-in-out infinite; }
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }
@keyframes dropfall {
  0%, 100% { transform: translateY(0); opacity: .95; }
  50%      { transform: translateY(7px); opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__drop { animation: none; }
}


/* --- Email capture (Kit) --------------------------------------------------
   Our own markup posting straight to Kit, so the form inherits the site's
   type, colour and spacing. Nothing about it reads as a third-party widget. */
.signup { max-width: 36rem; }
.signup__head { margin-bottom: 1.4rem; }
.signup__head h2, .signup__head h3 { margin-bottom: .7rem; }

.signup__form {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.5rem;
}
.signup__field { flex: 1 1 15rem; min-width: 0; }
.signup__field label { display: block; }
.signup input[type="email"],
.signup input[type="text"] {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .95rem 1.35rem;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.signup input::placeholder { color: var(--ink-50); opacity: .85; }
.signup input:hover { border-color: var(--rose); }
.signup input:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(206, 63, 57, .13);
}
.signup__form .btn { flex: 0 0 auto; }

.signup__note {
  margin-top: .95rem;
  font-size: .78rem;
  color: var(--ink-50);
  max-width: 46ch;
}
.signup__status {
  margin-top: 1.1rem;
  border-radius: 14px;
  padding: .9rem 1.15rem;
  font-size: .9rem;
  background: var(--blush);
  color: var(--burgundy-d);
}
.signup__status[hidden] { display: none; }
.signup__status.is-error { background: #F6DEDB; color: var(--burgundy-d); }

/* on the burgundy footer and the dark waitlist band */
.signup--dark input[type="email"],
.signup--dark input[type="text"] {
  color: var(--cream);
  background: rgba(251, 246, 239, .08);
  border-color: rgba(251, 246, 239, .24);
}
.signup--dark input::placeholder { color: rgba(251, 246, 239, .62); }
.signup--dark input:hover { border-color: rgba(251, 246, 239, .45); }
.signup--dark input:focus {
  background: rgba(251, 246, 239, .15);
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(217, 173, 167, .22);
}
.signup--dark .signup__note { color: rgba(251, 246, 239, .62); }
.signup--dark .signup__status { background: rgba(251, 246, 239, .13); color: var(--cream); }
.signup--dark .signup__status.is-error { background: rgba(206, 63, 57, .28); color: var(--cream); }

/* --- Kit's embedded form, wearing our clothes -----------------------------
   Kit's script injects its own markup and its own inline styles into the
   page. Rather than accept its look, we strip it back and re-dress it with
   exactly the input and button used everywhere else on the site, so the
   signup is indistinguishable from the rest of the page.

   The !important flags are not laziness: Kit sets colours and spacing as
   inline style attributes, which nothing else can outrank. */
.kitform { max-width: 36rem; margin-top: 1.5rem; }

.kitform .formkit-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  font-family: var(--sans) !important;
}
/* The chosen Kit template is the full-bleed one: a 680px-tall panel with a
   background photograph and a dark gradient over it. All of that has to be
   flattened or it punches a huge dark block into the middle of the page. */
.kitform .formkit-form > div,
.kitform .formkit-form > [data-style],
.kitform .formkit-form [data-style="full"],
.kitform .formkit-container {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  min-height: 0 !important;
  display: block !important;
  border-radius: 0 !important;
  overflow: visible !important;
  color: inherit !important;
}

/* Kit's own heading, blurb, background image and badge: our section already
   says all of this, so none of it should appear twice. */
.kitform .formkit-background,
.kitform .formkit-header,
.kitform .formkit-subheader,
.kitform .formkit-content,
.kitform .formkit-image,
.kitform .formkit-guarantee,
.kitform .formkit-disclaimer,
.kitform .formkit-powered-by-convertkit,
.kitform .formkit-powered-by-convertkit-container,
.kitform [data-element="powered-by"] { display: none !important; }

.kitform .formkit-fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .6rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kitform .formkit-field {
  flex: 1 1 15rem;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.kitform .formkit-input {
  width: 100% !important;
  font-family: var(--sans) !important;
  font-size: var(--step-0) !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  background: var(--cream-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
  padding: .95rem 1.35rem !important;
  margin: 0 !important;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.kitform .formkit-input::placeholder { color: var(--ink-50) !important; opacity: .85; }
.kitform .formkit-input:hover { border-color: var(--rose) !important; }
.kitform .formkit-input:focus {
  outline: none;
  border-color: var(--red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(206, 63, 57, .13) !important;
}

.kitform .formkit-submit {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: auto !important;
  padding: .95rem 1.7rem !important;
  margin: 0 !important;
  background: var(--red) !important;
  color: #fff !important;
  border: 1px solid var(--red) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--sans) !important;
  font-size: .93rem !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .3s, border-color .3s, box-shadow .35s;
}
.kitform .formkit-submit > span { color: inherit !important; }
.kitform .formkit-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  background: var(--red-deep) !important;
  border-color: var(--red-deep) !important;
}
.kitform .formkit-submit .formkit-spinner { display: none; }
.kitform .formkit-submit[data-active] .formkit-spinner { display: block; }

/* the message shown after subscribing, and any validation error */
.kitform .formkit-alert,
.kitform .seva-custom-content,
.kitform .formkit-form [data-element="success"] {
  margin-top: 1.1rem !important;
  border-radius: 14px !important;
  padding: .9rem 1.15rem !important;
  font-size: .9rem !important;
  background: var(--blush) !important;
  color: var(--burgundy-d) !important;
  border: 0 !important;
  list-style: none;
}
.kitform .formkit-alert-error { background: #F6DEDB !important; }

@media (max-width: 480px) {
  .kitform .formkit-field,
  .kitform .formkit-submit { flex: 1 1 100%; }
  .kitform .formkit-submit { width: 100% !important; }
}

/* --- The free download offer ---------------------------------------------- */
.magnet {
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .magnet { grid-template-columns: .95fr 1.05fr; } }
.magnet__media { position: relative; }
.magnet__media img {
  border-radius: 14px;
  box-shadow: var(--shadow);
  transform: rotate(-1.6deg);
  transition: transform .5s var(--ease);
}
.magnet:hover .magnet__media img { transform: rotate(0deg); }
.magnet__tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blush);
  color: var(--red-ink);
  border-radius: var(--radius-pill);
  padding: .35rem .9rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}


/* --- Pocket card showcase -------------------------------------------------
   One card that turns over on click. Each face rotates on its own rather than
   relying on transform-style: preserve-3d through the button wrapper, which
   browsers handle inconsistently. Opacity backs up backface-visibility. */
.flipcard {
  max-width: 640px;
  margin-inline: auto;
}
.flipcard__caption {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 1.1rem;
  min-height: 1.2em;
}
.flipcard__caption b { font-weight: 500; color: var(--red-ink); letter-spacing: .18em; }

.flipcard__btn {
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
.flipcard__inner {
  position: relative; display: block;
  aspect-ratio: 1011 / 627;
  perspective: 1800px;
}
.flipcard__face {
  position: absolute; inset: 0;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: clamp(.6rem, 1.4vw, 1rem);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .85s var(--ease), opacity .4s linear .2s, box-shadow .5s var(--ease);
}
.flipcard__btn:hover .flipcard__face { box-shadow: var(--shadow-lg); }
.flipcard__face img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.flipcard__face--front { transform: rotateY(0deg); opacity: 1; }
.flipcard.is-flipped .flipcard__face--front { transform: rotateY(180deg); opacity: 0; }
.flipcard__face--back { transform: rotateY(-180deg); opacity: 0; }
.flipcard.is-flipped .flipcard__face--back { transform: rotateY(0deg); opacity: 1; }

/* the nudge underneath */
.flipcard__prompt {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 1.4rem auto 0;
  padding: .6rem 1.2rem;
  background: var(--blush);
  color: var(--red-ink);
  border-radius: var(--radius-pill);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .3s, color .3s;
}
.flipcard__btn:hover .flipcard__prompt { background: var(--red); color: #fff; }
.flipcard__prompt svg { transition: transform .6s var(--ease); }
.flipcard__btn:hover .flipcard__prompt svg { transform: rotate(180deg); }
.flipcard__promptwrap { text-align: center; }

/* the three highlights under the card */
.pocket__points { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .pocket__points { grid-template-columns: repeat(3, 1fr); } }
.pocket__point h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.pocket__point p { font-size: .92rem; color: var(--ink-70); }
.pocket__point__mark {
  display: block; width: 26px; height: 1px;
  background: var(--red); margin-bottom: 1rem;
}


/* --- Home hero without a picture ------------------------------------------ */
.hero__solo { max-width: 46rem; margin-inline: auto; }
.hero__solo .lede { margin-inline: auto; max-width: 44ch; }
.hero__meta--center { justify-content: center; }
.hero__socials { display: inline-flex; align-items: center; gap: .55rem; margin-top: .35rem; }
.hero__socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--burgundy-d);
  transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.hero__socials a:hover {
  background: var(--red); border-color: var(--red); color: #fff;
  transform: translateY(-2px);
}

/* --- The two products, side by side --------------------------------------- */
.shop-duo { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 860px) { .shop-duo { grid-template-columns: 1fr 1fr; } }
.shop-duo__item { display: flex; flex-direction: column; }
.shop-duo__item .device-scene { padding: 0; margin-inline: 0; }
.shop-duo__item .device { width: min(100%, 300px); }
.shop-duo__frame {
  width: min(100%, 440px);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: clamp(.6rem, 1.4vw, .9rem);
  box-shadow: var(--shadow);
  margin-inline: auto;
}
.shop-duo__frame img { width: 100%; height: auto; border-radius: 7px; display: block; }
.shop-duo__body { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.shop-duo__body h3 { margin: .7rem 0 .6rem; }
.shop-duo__body .muted { margin-bottom: 1rem; }
.shop-duo__body .price { margin-bottom: 1.2rem; }


/* --- Feedback, before there is any to show -------------------------------- */
.quotes__empty {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  background: var(--cream-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.quotes__empty > p { color: var(--ink-70); max-width: 42ch; margin-inline: auto; }


/* --- Rotating feedback ---------------------------------------------------
   One quote at a time. It holds, drifts up and fades out, and the next one
   rises into its place. Every quote is absolutely positioned in the stage so
   they overlap cleanly; the stage is given a fixed min-height in JS, measured
   from the tallest quote, so nothing below it jumps as they change. */
.quoterot { max-width: 60rem; margin-inline: auto; text-align: center; }

.quoterot__stage { position: relative; }

/* Swipeable: let a horizontal drag be ours, and leave vertical scrolling
   to the page. The grab cursor is the only hint that dragging is possible. */
.quoterot__stage { touch-action: pan-y; }
.quoterot.is-swipeable .quoterot__stage { cursor: grab; }
.quoterot.is-swipeable .quoterot__stage:active { cursor: grabbing; }
.quoterot__item.is-dragging { transition: none; }

.quoterot__item {
  position: absolute;
  left: 0; right: 0; top: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  pointer-events: none;
}
.quoterot__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quoterot__item.is-out    { opacity: 0; transform: translateY(-16px); }

.quoterot__item blockquote {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.95rem);
  line-height: 1.42;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* A longer answer steps down a size so it still reads as one held thought
   rather than a paragraph. */
.quoterot__item--long blockquote {
  font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem);
  line-height: 1.55;
  max-width: 44rem;
  margin-inline: auto;
}

.quoterot__item figcaption {
  margin-top: 1.4rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.quoterot__mark {
  display: block;
  margin: 0 auto 1.2rem;
  color: var(--rose);
}

.quoterot__dots {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 2.4rem;
}
.quoterot__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rose);
  opacity: .5;
  cursor: pointer;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease);
}
.quoterot__dot:hover { opacity: .8; }
.quoterot__dot[aria-current="true"] {
  opacity: 1;
  background: var(--red-ink);
  transform: scale(1.55);
}

/* No auto-rotation for anyone who has asked for less motion: the quotes
   simply stack down the page instead. */
.quoterot.is-static .quoterot__stage { min-height: 0 !important; }
.quoterot.is-static .quoterot__item {
  position: relative;
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: auto;
}
.quoterot.is-static .quoterot__item + .quoterot__item { margin-top: 3rem; }
.quoterot.is-static .quoterot__dots { display: none; }

/* 14. MOTION & A11Y -------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

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

@media print {
  .header, .drawer, .marquee, .video-card__btn, .footer .newsletter { display: none !important; }
  body { background: #fff; }
}