/* Base: reset, type, layout, sheets, section heads. Load after tokens.css.
   The grammar is The Bloom's: rounded colour sheets on a white (or black)
   page, giant tight lowercase heads that end in a full stop, quiet pills,
   thin rules with tiny mono labels. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  letter-spacing: var(--tracking-ui);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: var(--w-bold); letter-spacing: var(--tracking-head); line-height: var(--lh-head); text-wrap: balance; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: #111411; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .sheet--deep :focus-visible, .sheet--burgundy :focus-visible, .sheet--green :focus-visible { outline-color: var(--yellow); }

/* numbers line up: money, PV, dates, tables */
.num, .price, .pv, table, .figure { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------- type */
.giant {
  font-family: var(--font-display);
  font-size: var(--fs-giant);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-giant);
  font-weight: var(--w-bold);
  font-variation-settings: "wdth" var(--wdth-tight);
  text-wrap: balance;
  margin: 0;
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-weight: var(--w-bold);
  font-variation-settings: "wdth" var(--wdth-tight);
  margin: 0;
}
.h1 { font-size: var(--fs-h1); line-height: 0.96; letter-spacing: -0.05em; }
.h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.045em; }
.h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.035em; }
.h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--w-semi); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-muted); max-width: 38ch; }
.small { font-size: var(--fs-small); }
.tiny { font-size: var(--fs-tiny); }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.strong { font-weight: var(--w-semi); }
.dot-end::after { content: "."; color: var(--spark); }   /* the yellow full stop */

/* the mono label: PV, references, captions. Never prices. */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1.3;
}
.mono--plain { text-transform: none; letter-spacing: 0.02em; font-size: 12px; white-space: nowrap; }   /* refs, usernames */

.prose { max-width: var(--wrap-text); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-h3); margin-top: 1.8em; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.5em; }
.prose p, .prose li { color: var(--fg-muted); font-size: 17px; line-height: 1.6; }
.prose a { color: var(--accent); }
.prose ul { padding-left: 1.2em; }
.prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--spark); font-size: var(--fs-h4); font-weight: var(--w-semi); color: var(--fg); }

/* placeholders EPS must fill: visible on purpose */
.ph { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0; background: var(--spark-tint); color: var(--warning-ink); padding: 0.05em 0.4em; border-radius: 6px; white-space: nowrap; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wrap--text { max-width: calc(var(--wrap-text) + 2 * var(--gutter)); }
.stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-4)); }
.row { display: flex; align-items: center; gap: var(--row, var(--s-3)); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grid { display: grid; gap: var(--grid-gap, var(--s-4)); grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 260px), 1fr)); }
.split { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 12px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); text-decoration: none; font-weight: var(--w-semi); }
.skip-link:focus { top: 12px; }

/* page frame: public pages sit below the floating nav */
.page { padding-top: calc(var(--nav-h) + 28px); }
.band { padding-block: var(--band); }

/* ---------------------------------------------------------------- sheets
   A sheet is a rounded field of one colour, inset from the window edge.
   Pages move through the palette one sheet at a time. Each tone sets the
   local ink, muted ink, rule and field colours, so components inside just
   work. Stack them with .sheets (gap of --inset). */
.sheets { display: grid; gap: var(--inset); padding: 0 var(--inset) var(--inset); }
.sheet {
  --sheet-bg: var(--surface);
  position: relative;
  border-radius: var(--r-sheet);
  background: var(--sheet-bg);
  color: var(--fg);
  isolation: isolate;
  overflow: clip;
}
.sheet > .wrap { padding-block: var(--band); }
.sheet--white { --sheet-bg: var(--bg); }
.sheet--surface { --sheet-bg: var(--surface); }
.sheet--studio { --sheet-bg: var(--studio); }
.sheet--mint { --sheet-bg: var(--green-tint); --fg-muted: var(--mint-muted); --fg-faint: var(--mint-faint); --rule: color-mix(in srgb, var(--green-deep) 16%, transparent); --chip-bg: var(--bg); }
.sheet--cream { --sheet-bg: var(--yellow-tint); --fg-muted: var(--cream-muted); --fg-faint: var(--cream-faint); --rule: color-mix(in srgb, var(--warning-ink) 18%, transparent); --chip-bg: var(--bg); }
.sheet--blush { --sheet-bg: var(--burgundy-tint); --fg-muted: var(--blush-muted); --fg-faint: var(--blush-faint); --rule: color-mix(in srgb, var(--burgundy) 18%, transparent); --chip-bg: var(--bg); }
.sheet--lime { --on-fg: #ffffff; --sheet-bg: var(--lime); --fg: #111411; --fg-muted: #2c3a1c; --fg-faint: #566836; --rule: rgba(17, 20, 17, 0.16); --chip-bg: rgba(255, 255, 255, 0.6); --field-bg: #fff; color-scheme: light; }
.sheet--green { --on-fg: #111411; --sheet-bg: var(--paint-green); --fg: #ffffff; --fg-muted: rgba(255, 255, 255, 0.92); --fg-faint: rgba(255, 255, 255, 0.92); --rule: rgba(255, 255, 255, 0.2); --chip-bg: rgba(0, 0, 0, 0.14); --field-bg: rgba(0, 0, 0, 0.16); --accent: #ffffff; color-scheme: dark; }
.sheet--burgundy { --on-fg: #111411; --sheet-bg: var(--paint-burgundy); --fg: #ffffff; --fg-muted: rgba(255, 245, 246, 0.84); --fg-faint: rgba(255, 245, 246, 0.84); --rule: rgba(255, 255, 255, 0.18); --chip-bg: rgba(255, 255, 255, 0.12); --field-bg: rgba(255, 255, 255, 0.1); --accent: var(--yellow); color-scheme: dark; }
.sheet--deep { --on-fg: #111411; --sheet-bg: var(--paint-deep); --fg: #eef2ea; --fg-muted: rgba(238, 242, 234, 0.68); --fg-faint: rgba(238, 242, 234, 0.58); --rule: rgba(238, 242, 234, 0.14); --chip-bg: rgba(255, 255, 255, 0.08); --field-bg: rgba(255, 255, 255, 0.06); --accent: #4caf50; color-scheme: dark; }
.sheet--ink { --on-fg: #111411; --sheet-bg: #111411; --fg: #ffffff; --fg-muted: rgba(255, 255, 255, 0.66); --fg-faint: rgba(255, 255, 255, 0.5); --rule: rgba(255, 255, 255, 0.14); --chip-bg: rgba(255, 255, 255, 0.08); --field-bg: rgba(255, 255, 255, 0.06); --accent: var(--lime); color-scheme: dark; }
.sheet--leaf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--leaf, url("../assets/light/moringa.webp")) center / cover; mix-blend-mode: var(--leaf-blend); opacity: calc(var(--leaf-opacity) * 1.1); pointer-events: none; }


/* ---------------------------------------------------------------- section heads
   eyebrow (mono) / giant lowercase title ending in a full stop / aside copy
   and one quiet action. */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6) var(--s-8); }
.section-head .eyebrow { grid-column: 1 / -1; margin: 0; color: var(--fg-muted); }
.section-head .title { margin: 0; }
.section-head .aside { display: grid; gap: var(--s-4); justify-items: start; max-width: 34ch; padding-bottom: 10px; color: var(--fg-muted); font-size: var(--fs-body); }
@media (max-width: 760px) { .section-head { grid-template-columns: minmax(0, 1fr); } .section-head .aside { padding-bottom: 0; } }

/* thin rule with tiny labels: "01 / 03 · THE RANGE ······ PRODUCTS SHOWN ARE SAMPLES" */
.rule-labels { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--fg-muted); flex-wrap: wrap; }
.rule-labels > * { margin: 0; }
.ruled { border-top: 1px solid var(--rule); }
.ruled-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ruled-list > li { border-bottom: 1px solid var(--rule); padding-block: var(--s-4); }

/* key facts in ruled columns, like The Bloom's "easy" band */
.facts { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.facts > * { padding: var(--s-5) var(--s-6) var(--s-2) 0; display: grid; gap: var(--s-2); align-content: start; }
.facts > * + * { border-left: 1px solid var(--rule); padding-left: var(--s-6); }
.facts .mono { color: var(--pv-ink); }   /* deep green that lifts in dark */
.sheet--deep .facts .mono, .sheet--burgundy .facts .mono, .sheet--green .facts .mono, .sheet--ink .facts .mono { color: var(--fg-muted); }
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > * { padding: var(--s-4) var(--s-3) var(--s-4) 0; }
  .facts > * + * { padding-left: var(--s-3); }
  .facts > :nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .facts > :nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

/* sample note, inline where samples appear */
.sample-note { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); }
.sample-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); flex: none; }

/* reveal on scroll (site.js adds .is-in); motion that means something:
   content rises a little as it arrives, nothing else moves on its own */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }