/* ============================================================
   MUCH MORE — Design System
   Cream paper, butter foil, olive ink. The website is the box.
   ============================================================ */

:root {
  /* Color — sampled from the daily-pack packaging */
  --cream:       #EEE3C9;   /* page ground: the box face */
  --cream-lift:  #F7F0DF;   /* raised paper: cards, inputs */
  --cream-sink:  #E3D5B2;   /* recessed bands */
  --butter:      #E3BF68;   /* the daily pack */
  --butter-deep: #D3AC4F;   /* pack in shadow */
  --mustard:     #B5852F;   /* the foil end-panel */
  --olive:       #3E3918;   /* the ink */
  --olive-soft:  #5C5633;   /* secondary text */
  --olive-mute:  #66603F;   /* captions, hints */
  --sage:        #A9AC97;   /* the sage box */
  --sage-deep:   #7C8264;
  --rule:        rgba(62, 57, 24, 0.18);
  --rule-strong: rgba(62, 57, 24, 0.6);
  --rule-cream:  rgba(238, 227, 201, 0.22);

  /* Capsule tones — AM cream, AM sage, PM saffron */
  --cap-cream:   #E9DCC4;
  --cap-sage:    #9FA47E;
  --cap-saffron: #D9A440;
  --cap-olive:   #6B6B45;

  /* Type */
  --f-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-sans:    'Jost', 'Avenir Next', 'Futura', 'Helvetica Neue', sans-serif;

  /* Scale */
  --w-content: 1200px;
  --w-narrow: 760px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 14px;   /* the sachet's corner */

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--olive);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, canvas, svg { max-width: 100%; display: block; }
img { height: auto; }   /* width/height attributes reserve space but must never fix the height */

h1, h2, h3, h4 {
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
  color: var(--olive);
}

a { color: inherit; }
p { margin: 0 0 1em; }

::selection { background: var(--butter); color: var(--olive); }

:focus-visible {
  outline: 2px solid var(--mustard);
  outline-offset: 3px;
}

/* ---------- The wordmark ----------
   "+MUCH MORE" set in Anton, as printed on the pack. The plus hangs
   in the left padding so the two lines of the stacked lockup align
   on the M, exactly like the sachet. */

.wm {
  position: relative;
  display: inline-block;
  padding-left: 0.54em;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.86;
  white-space: nowrap;
  text-decoration: none;
  color: var(--olive);
}
.wm__plus {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 0.46em;
  height: 0.46em;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 0.17em no-repeat,
    linear-gradient(currentColor, currentColor) center / 0.17em 100% no-repeat;
}

/* The plus, drawn: a heavy cross, as printed on the pack */
.plus {
  display: inline-block;
  width: 1em;
  height: 1em;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 0.36em no-repeat,
    linear-gradient(currentColor, currentColor) center / 0.36em 100% no-repeat;
}
.wm__l1 { display: inline; }
.wm__l2 { display: inline; margin-left: 0.24em; }
.wm--stack .wm__l1, .wm--stack .wm__l2 { display: block; margin-left: 0; }

/* ---------- Utility type roles ---------- */

/* Tracked-out caps, the pack's secondary voice */
.label {
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--olive-soft);
}
.label--mustard { color: var(--mustard); }
.label--mute { color: var(--olive-mute); }
.label--cream { color: var(--cream); }
.label--butter { color: var(--butter); }
.kicker { display: block; margin: 0 0 20px; }

/* The stacked statement with a vertical rule, as on the pack */
.stack {
  display: block;
  padding-left: 20px;
  border-left: 1.5px solid currentColor;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--olive);
}
.stack span { display: block; white-space: nowrap; }

/* Giant brand statements — Anton, used sparingly */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
}

/* Numbers and dosage */
.data {
  font-family: var(--f-sans);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ---------- Capsules ----------
   Two-tone, lightly speckled, as pressed into the pack. */

.pill {
  display: inline-block;
  width: 18px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(62, 57, 24, 0.22);
  flex-shrink: 0;
  background:
    radial-gradient(circle, rgba(62, 57, 24, 0.2) 0.6px, transparent 1px) 0 0 / 4px 4px,
    linear-gradient(to bottom, var(--pill-top) 50%, var(--pill-bot) 50%);
  --pill-top: #F2E9D6;
  --pill-bot: var(--cap-cream);
}
.pill--cream   { --pill-top: #F2E9D6; --pill-bot: var(--cap-cream); }
.pill--sage    { --pill-top: #B8BC9A; --pill-bot: var(--cap-sage); }
.pill--saffron { --pill-top: #E8BE62; --pill-bot: var(--cap-saffron); }
.pill--olive   { --pill-top: #8A8A62; --pill-bot: var(--cap-olive); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid var(--olive);
  background: transparent;
  color: var(--olive);
  padding: 16px 34px;
  min-height: 48px;
  border-radius: 3px;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.btn:active { transform: scale(0.97); }
.btn::before {
  content: "";
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
}

.btn--solid { background: var(--olive); color: var(--cream); }
.btn--butter { background: var(--butter); border-color: var(--butter); color: var(--olive); }
.btn--cream { background: var(--cream); border-color: var(--cream); color: var(--olive); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--olive); color: var(--cream); }
  .btn--solid:hover { background: var(--mustard); border-color: var(--mustard); color: var(--cream); }
  .btn--butter:hover { background: var(--olive); border-color: var(--olive); color: var(--butter); }
  .btn--cream:hover { background: var(--butter); border-color: var(--butter); color: var(--olive); }
}

/* ---------- Layout helpers ---------- */

.shell {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--w-narrow); }

/* ---------- Reveal on scroll (marketing reveal, sanctioned) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 0.4s ease; }
}

/* ---------- Brand lockups ---------- */

.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.brand .wm { font-size: 26px; }