/* ==========================================================================
   MILI METHOD, site.css
   One stylesheet, no build step, no framework. Edit directly.

   Contents
     1  Tokens
     2  Reset & base
     3  Typography
     4  Layout
     5  Header & navigation
     6  Buttons & forms
     7  Components
     8  Sections
     9  Cart & drawer
    10  Footer
    11  Motion
    12  Responsive
    13  Print
   ========================================================================== */

/* ------------------------------------------------------------- 1  Tokens */

:root {
  /* core */
  --ink: #1B2422;
  --ink-70: #565E5C;
  --ink-45: #686E6C;
  --paper: #F7F2E9;
  --warm-white: #FCFAF6;
  --rule: #DDD6C9;

  /* the six colour worlds */
  --calm: #7FA69B;
  --calm-deep: #3E5C55;
  --calm-light: #C3D6D0;
  --sleep: #4A4468;
  --sleep-deep: #2A2740;
  --sleep-light: #C9C2DC;
  --peace: #8A8478;
  --peace-deep: #4A4A46;
  --peace-light: #C4C0B2;
  --joy: #E08A5B;
  --joy-deep: #AF522E;
  --joy-light: #F2CBA9;
  --ember: #C4552E;
  --ember-deep: #5A3428;
  --ember-light: #E3B8A2;
  --rose: #C08A7D;
  --rose-deep: #6B4A46;
  --rose-light: #EBD3CB;

  /* the current page's accent. Overridden per template */
  --accent: var(--calm);
  --accent-deep: var(--calm-deep);
  --accent-light: var(--calm-light);

  /* type */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
             Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;

  /* space */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(5rem, 11vw, 10rem);
  --max: 1240px;
  --measure: 33rem;

  --radius: 4px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------- 2  Reset & base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* [hidden] must beat any display rule set on the element itself */
[hidden] { display: none !important; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent-light); color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.85rem 1.35rem; font-size: 0.9rem;
}
.skip:focus { left: 0.6rem; top: 0.6rem; }

.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;
}

/* -------------------------------------------------------- 3  Typography */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.25rem); line-height: 1.03; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.625rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.625rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; line-height: 1.35; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.1vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 38rem;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 1.1rem;
}
.eyebrow--accent { color: var(--accent-deep); }

.hand {
  font-family: var(--hand);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--accent-deep);
}

.small { font-size: 0.875rem; line-height: 1.55; color: var(--ink-70); }
.tiny  { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-70); }

.rule-short {
  width: 56px; height: 2px; background: var(--accent);
  border: 0; margin: 0 0 1.6rem;
}

/* ------------------------------------------------------------ 4  Layout */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 760px; }
.wrap--wide { max-width: 1440px; }

.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--tint { background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }
.section--fill { background: var(--accent); color: var(--paper); }
.section--fill .lede,
.section--fill .small { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.section--fill .eyebrow { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.section--deep { background: var(--accent-deep); color: var(--paper); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

/* --------------------------------------------------- 5  Header & nav */

.header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 74px;
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; flex-shrink: 0;
}
.brand__mark { width: 30px; height: 30px; }
.brand__name {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-size: 0.9375rem; text-decoration: none; padding: 0.35rem 0;
  border-bottom: 1.5px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }

.cart-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.5rem 0.85rem; font: inherit; font-size: 0.875rem;
  cursor: pointer; color: inherit;
}
.cart-btn:hover { border-color: var(--ink); }
.cart-btn__count {
  min-width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: var(--accent-deep); color: var(--paper);
  font-size: 0.75rem; font-weight: 600;
  display: grid; place-items: center;
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 0.5rem 0.7rem; cursor: pointer;
  color: inherit; font: inherit; font-size: 0.875rem;
}

/* ------------------------------------------------- 6  Buttons & forms */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  padding: 0.95rem 1.75rem;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease);
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--on-fill { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--on-fill:hover { background: transparent; color: var(--paper); }
.btn--wide { width: 100%; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.field { display: block; margin-bottom: 1.1rem; }
.field > span {
  display: block; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.05em; margin-bottom: 0.4rem;
}
input[type="text"], input[type="email"], input[type="search"], textarea, select {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.8rem 0.95rem;
  background: var(--warm-white);
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--accent-deep); }
textarea { min-height: 9rem; resize: vertical; }

.inline-form { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 30rem; }
.inline-form input { flex: 1 1 14rem; }

/* --------------------------------------------------- 7  Components */

.card {
  background: var(--warm-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
}

/* feeling chooser. The site's centre of gravity */
.feelings {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.feeling {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(230px, 26vw, 330px);
  padding: 1.6rem;
  background: var(--f); color: var(--paper);
  text-decoration: none; overflow: hidden;
  transition: filter 0.3s var(--ease);
}
.feeling:hover { filter: brightness(1.06); }
.feeling__no {
  position: absolute; top: 1.2rem; left: 1.6rem;
  font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 500;
  opacity: 0.75;
}
.feeling__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 0.35rem;
}
.feeling__when { font-size: 0.9375rem; opacity: 0.88; margin: 0; max-width: 22ch; }
/* The rings are a light wash over the deep ground. They must stay light:
   a strongly coloured arc drifts behind the title and destroys the contrast
   guarantee that putting the text on the deep tone was supposed to give. */
.feeling__arc {
  position: absolute; right: -20%; bottom: -46%;
  width: 82%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--paper) 30%, transparent);
  box-shadow: 0 0 0 24px color-mix(in srgb, var(--paper) 9%, transparent),
              0 0 0 50px color-mix(in srgb, var(--paper) 6%, transparent),
              0 0 0 78px color-mix(in srgb, var(--paper) 4%, transparent);
  pointer-events: none;
}
/* a second, offset ring system in the identity colour, kept well clear of
   the text block in the lower left */
.feeling::after {
  content: ""; position: absolute; right: -6%; top: -34%;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fa) 42%, transparent);
  box-shadow: 0 0 0 20px color-mix(in srgb, var(--fa) 16%, transparent);
  pointer-events: none;
}
.feeling--soon { pointer-events: none; }
.feeling__badge {
  position: absolute; top: 1.1rem; right: 1.2rem;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--paper) 55%, transparent);
  padding: 0.2rem 0.5rem; border-radius: 2px;
}

/* product cards */
.products { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, 1fr); }
.product { display: flex; flex-direction: column; text-decoration: none; }
.product__img {
  aspect-ratio: 170 / 240; background: var(--paper);
  border: 1px solid var(--rule); overflow: hidden;
  transition: transform 0.35s var(--ease);
}
.product:hover.product__img { transform: translateY(-5px); }
.product__img img { width: 100%; height: 100%; object-fit: cover; }
.product__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.product__name { font-family: var(--display); font-weight: 600; font-size: 1.125rem; }
.product__price { font-size: 0.9375rem; color: var(--ink-70); white-space: nowrap; }
.product__sub { font-size: 0.875rem; color: var(--ink-70); margin: 0.15rem 0 0; }

/* steps / numbered list */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--accent); line-height: 1;
}
.steps h3 { margin-bottom: 0.25rem; }
.steps p { margin: 0; font-size: 0.9375rem; color: var(--ink-70); }

/* stage list */
.stages { display: grid; gap: 2px; }
.stage {
  display: grid; grid-template-columns: 4.5rem 11rem 1fr; gap: 1.5rem;
  align-items: baseline; padding: 1.5rem clamp(1rem, 2.4vw, 2rem);
}
.stage__no { font-size: 0.75rem; letter-spacing: 0.2em; font-weight: 500; opacity: 0.7; }
.stage__name { font-family: var(--display); font-size: 1.375rem; font-weight: 600; }
.stage p { margin: 0; font-size: 0.9375rem; }

/* facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.fact { background: var(--paper); padding: 1.6rem clamp(0.75rem, 2vw, 1.5rem); text-align: center; }
.fact__n { font-family: var(--display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1; }
.fact__l { font-size: 0.8125rem; color: var(--ink-70); margin: 0.4rem 0 0; }

/* pull quote */
.pull {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.35;
  max-width: 24ch; margin: 0;
}

/* accordion */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative; font-family: var(--display); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.75rem;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--accent-deep);
  border-bottom: 1.5px solid var(--accent-deep);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.95rem; }
.faq .faq__body { padding: 0 0 1.5rem; }
.faq .faq__body p { font-size: 0.9375rem; color: var(--ink-70); }

/* notice / disclaimer */
.notice {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  padding: 1.3rem 1.5rem; background: var(--warm-white);
  border-radius: var(--radius);
}
.notice h2,.notice h3 {
  font-size: 1rem; line-height: 1.35; margin-bottom: 0.4rem;
  letter-spacing: 0;
}
.notice p { font-size: 0.875rem; color: var(--ink-70); }

/* review placeholders */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 1.5rem; }
.review__stars { color: var(--accent-deep); letter-spacing: 0.2em; font-size: 0.9rem; }
.review p { font-family: var(--display); font-size: 1.0625rem; line-height: 1.45; color: var(--ink-45); }
.review__ph { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); }

/* page-preview strip */
.strip { overflow-x: auto; padding-bottom: 0.75rem; -webkit-overflow-scrolling: touch; }
.strip__inner { display: flex; gap: 1rem; min-width: min-content; }
.strip figure { margin: 0; flex: 0 0 clamp(180px, 22vw, 260px); }
.strip img { border: 1px solid var(--rule); background: var(--warm-white); }
.strip figcaption { font-size: 0.8125rem; color: var(--ink-70); margin-top: 0.6rem; }

/* journal */
.posts { display: grid; gap: 2.5rem; }
.post-link { display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; text-decoration: none; padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); }
.post-link:last-child { border-bottom: 0; }
.post-link time { font-size: 0.8125rem; color: var(--ink-45); letter-spacing: 0.06em; }
.post-link h3,.post-link__title { margin-bottom: 0.35rem; }
.post-link__title { font-size: clamp(1.2rem, 1.9vw, 1.625rem); line-height: 1.25; }
.post-link p { font-size: 0.9375rem; color: var(--ink-70); margin: 0; }

.prose { max-width: 38rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul,.prose ol { padding-left: 1.2rem; max-width: var(--measure); }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote {
  margin: 1.8rem 0; padding-left: 1.4rem;
  border-left: 2px solid var(--accent);
  font-family: var(--display); font-weight: 300; font-size: 1.15rem;
  color: var(--ink-70);
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; }
.prose th,.prose td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70); }

/* buy box */
.buybox { position: sticky; top: 100px; }
.variants { display: grid; gap: 0.6rem; margin: 1.5rem 0; }
.variant {
  display: grid; grid-template-columns: 1.15rem 1fr auto; gap: 0.85rem;
  align-items: start;
  border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 0.95rem 1.1rem; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.variant:hover { border-color: var(--ink-45); }
.variant input { margin: 0.28rem 0 0; accent-color: var(--accent-deep); }
.variant:has(input:checked) {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.variant__name { font-weight: 500; font-size: 0.9375rem; }
.variant__desc { font-size: 0.8125rem; color: var(--ink-70); margin: 0.15rem 0 0; }
.variant__price { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; }
.variant__was { font-size: 0.75rem; color: var(--ink-45); text-decoration: line-through; display: block; text-align: right; }

.addon {
  display: flex; gap: 0.75rem; align-items: flex-start;
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 0.9rem 1.05rem; margin-bottom: 1.2rem;
  font-size: 0.875rem;
}
.addon input { margin-top: 0.25rem; accent-color: var(--accent-deep); }

.tick-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.55rem; }
.tick-list li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.6rem; font-size: 0.9375rem; }
.tick-list li::before {
  content: ""; width: 12px; height: 7px; margin-top: 0.5rem;
  border-left: 1.5px solid var(--accent-deep);
  border-bottom: 1.5px solid var(--accent-deep);
  transform: rotate(-45deg);
}

/* --- the founder letter -------------------------------------------------
   The most important section on the site. Everything here is in service of
   two things: a comfortable reading measure, and enough air around it that
   the page feels unhurried before a single word is read. */

.letter { padding-block: clamp(5rem, 12vw, 10rem); }

.letter__head {
  /* NB: not `ch` on this container the unit resolves against 17px body
     text, not the 72px headline, and crushes the measure to ~160px. */
  max-width: 46rem;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.letter__headline {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

.letter__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.letter__body--flip >.letter__col { order: 2; }
.letter__body--flip >.letter__aside { order: 1; position: sticky; top: 110px; }

.letter__col { max-width: 33rem; }
.letter__col p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.75;
  margin: 0 0 1.5em;
  max-width: none;
}
.letter__col em { font-style: italic; }

/* the opening line carries the weight of the whole section */
.letter__open {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem) !important;
  line-height: 1.4 !important;
  color: var(--ink);
  margin-bottom: 1.4em !important;
}

.letter__close { margin-bottom: 0.9em !important; }
.letter__close +.letter__close { margin-bottom: 0.9em !important; }

/* `.letter__col p` is (0,1,1) and would otherwise win over a bare
   `.signature` (0,1,0), silently rendering the signature in Fraunces. */
.letter__col .signature {
  font-family: var(--hand);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent-deep);
  margin: 2.25rem 0 0 !important;
}

.letter__aside { margin: 0; }
.letter__aside img {
  width: 100%;
  border-radius: 2px;
}

.pull-quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 26ch;
  margin: clamp(4rem, 9vw, 7rem) auto;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--accent);
  color: var(--ink);
}

/* --- what you'll find here ---------------------------------------------- */

.pillars__head {
  max-width: 34rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.pillar {
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.2vw, 1.85rem)
           clamp(2.25rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
}
.pillar__icon {
  display: block;
  color: var(--accent-deep);
  margin-bottom: 1.5rem;
}
.pillar h3 {
  font-size: 1.375rem;
  letter-spacing: -0.005em;
  margin-bottom: 0.55rem;
}
.pillar p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
  max-width: none;
}

/* --- the big idea, in the hero -----------------------------------------
   This couplet is the brand's whole argument. It is set larger than the
   supporting line deliberately: it should be the second thing read, after
   the headline, and before anything about price or format. */

.hero__idea {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.05vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 32rem;
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0.35em;
}
.hero__idea span { display: block; }
.hero__idea span:first-child { color: var(--ink-70); }
.hero__idea span:last-child {
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
}

.hero__sub {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 27rem;
  margin: 1.75rem 0 0;
}

/* --- no app, no subscription, no streak --------------------------------- */

.offline {
  padding-block: clamp(4.5rem, 10vw, 9rem);
  border-block: 1px solid var(--rule);
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}
.offline__lines {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: none;
  display: grid;
  gap: 0.06em;
}
.offline__lines span { display: block; }
.offline__lines span:nth-child(2) { color: var(--ink-70); }
.offline__lines span:nth-child(3) { color: var(--accent-deep); }
.offline__foot {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-70);
}

/* --- the collection as a library ---------------------------------------- */

.library__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.library__shelf { margin: 0; }
.library__shelf img { width: 100%; }

.spines {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  counter-reset: none;
}
.spines li {
  background: var(--paper);
  padding: 1.35rem 0.5rem;
  text-align: center;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.spines span {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-45);
  margin-bottom: 0.5rem;
}
.library__note {
  margin: 1.75rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-70);
}

/* --- short, stacked lines inside the letter ----------------------------- */

.letter__col .letter__beat {
  padding-left: 1.15rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  line-height: 1.55 !important;
}

/* ------------------------------------------------------- 8  Sections */

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__art {
  position: relative; aspect-ratio: 4 / 3.4;
  background: var(--accent); border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden;
}
.hero__art img { width: 54%; box-shadow: 0 18px 46px rgba(0,0,0,0.20); border-radius: 2px; }
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.hero__note { margin-top: 1.5rem; }

.spotlight__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.spotlight__img { background: color-mix(in srgb, var(--accent) 16%, var(--paper)); padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius); }
.spotlight__img img { margin-inline: auto; box-shadow: 0 14px 34px rgba(0,0,0,0.16); }

.signup__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* --------------------------------------------------- 9  Cart & drawer */

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100%);
  background: var(--paper); border-left: 1px solid var(--rule);
  z-index: 120; transform: translateX(100%);
  transition: transform 0.34s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px rgba(0,0,0,0.10);
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem var(--gut); border-bottom: 1px solid var(--rule); }
.drawer__head h2 { margin: 0; font-size: 1.25rem; }
.drawer__close { background: none; border: 0; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-70); padding: 0.25rem 0.5rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.4rem var(--gut); }
.drawer__foot { border-top: 1px solid var(--rule); padding: 1.4rem var(--gut); }
.scrim {
  position: fixed; inset: 0; background: rgba(27,36,34,0.35);
  z-index: 110; opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.line-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 0.9rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.line-item img { border: 1px solid var(--rule); }
.line-item__name { font-size: 0.9375rem; font-weight: 500; }
.line-item__var { font-size: 0.8125rem; color: var(--ink-70); }
.line-item__rm { background: none; border: 0; padding: 0; font: inherit; font-size: 0.75rem; color: var(--ink-45); cursor: pointer; text-decoration: underline; }
.line-item__price { font-family: var(--display); font-weight: 600; }

.totals { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin-bottom: 1rem; }

/* ------------------------------------------------------- 10  Footer */

.footer { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer a { color: color-mix(in srgb, var(--paper) 80%, transparent); text-decoration: none; font-size: 0.9375rem; }
.footer a:hover { color: var(--paper); text-decoration: underline; }
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.footer h3,.footer__label {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-family: var(--sans); font-weight: 500;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  margin: 0 0 1.1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.footer__brand { font-family: var(--display); font-size: 1.125rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; }
.footer__note { font-size: 0.875rem; color: color-mix(in srgb, var(--paper) 62%, transparent); max-width: 30rem; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); font-size: 0.8125rem; color: color-mix(in srgb, var(--paper) 55%, transparent); }

.footer .notice { background: transparent; border-color: color-mix(in srgb, var(--paper) 22%, transparent); border-left-color: var(--calm); }
.footer .notice p { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.footer .notice h2, .footer .notice h3 { color: var(--paper); letter-spacing: 0; text-transform: none; font-family: var(--display); font-size: 1rem; }

/* ------------------------------------------------------- 11  Motion */

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
.reveal { opacity: 1; transform: none; }
.drawer { transition: none; }
}

/* --------------------------------------------------- 12  Responsive */

@media (max-width: 1000px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.pillars { grid-template-columns: repeat(2, 1fr); }
.spines { grid-template-columns: repeat(3, 1fr); }
.products { grid-template-columns: repeat(2, 1fr); }
.feelings { grid-template-columns: repeat(2, 1fr); }
.footer__cols { grid-template-columns: 1fr 1fr; }
.stage { grid-template-columns: 3.5rem 1fr; }
.stage p { grid-column: 2; }
}

@media (max-width: 860px) {
.nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gut) 1.25rem;
    display: none;
  }
.nav[data-open="true"] { display: flex; }
.nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.nav a:last-child { border-bottom: 0; }
.nav-toggle { display: inline-flex; }
.hero__inner,.spotlight__inner,.grid--split,.grid--aside,.signup__inner { grid-template-columns: 1fr; }
.hero__art { order: -1; aspect-ratio: 5 / 3; }
.buybox { position: static; }
.letter__body { grid-template-columns: 1fr; }
.letter__body--flip >.letter__col { order: 1; }
.letter__body--flip >.letter__aside { order: 2; position: static; }
.letter__aside { max-width: 30rem; }
.pull-quote { margin-inline: 0; }
.reviews { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.post-link { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
.facts { grid-template-columns: repeat(2, 1fr); }
.pillars { grid-template-columns: 1fr; }
.spines { grid-template-columns: repeat(2, 1fr); }
.hero__idea span:last-child { padding-left: 0.85rem; }
.products { grid-template-columns: 1fr; }
.feelings { grid-template-columns: 1fr; }
.footer__cols { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }
.stage { grid-template-columns: 1fr; gap: 0.4rem; }
.stage p { grid-column: 1; }
}

/* ---------------------------------------------------------- 13  Print */

@media print {
.header,.footer,.drawer,.scrim,.hero__art,.btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
.section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}