/* KainFit design system, direction 6: "Ube at Latik"
 *
 * Chosen by John on 2026-08-25 from a nine-option field: "I dig the purple +
 * mango color scheme. Very unique." Reference: kakanin on a banana leaf. Deep
 * ube halaya, the gold of toasted latik spooned over it, kakanin cream as the
 * ground. Warm, generous, unmistakably Filipino, and no calorie tracker on the
 * market is purple.
 *
 * Translated structurally, never as costume:
 *   - The page keeps its BEAT: cream ground, whole sections inverting to deep
 *     ube, back to cream. The alternation is what direction 5 got right and it
 *     survives the repaint untouched.
 *   - Gold means ACTION and nothing else. Not a chip, not a tab, not a data
 *     color, not the brand mark. If it is gold it can be pressed. That rule
 *     is what keeps the palette from reading as decoration.
 *   - Surfaces are CUT, not moulded and not floating: small radii, no drop
 *     shadow anywhere, and edges doing the work a shadow used to fake.
 *   - Figures are Familjen Grotesk, whose 1 cannot read as I. Checked against
 *     the literal string 1126 by _check_digits.py at every data size.
 *
 * Type ships as two LOCAL variable-font files in fonts/. Nothing is fetched
 * from any other origin, so airplane mode still renders the real design. The
 * audit fails if the files do not actually load: a silent fallback would ship
 * the wrong design while passing every other check.
 *
 * TOKEN COMPATIBILITY: the HTML pages still reference the direction-5 names
 * inline (--teal, --teal-deep, --sun, --steel...). Those names survive below as
 * aliases of the new tokens, so every page repaints without an edit. When a
 * page gets its phase pass, its inline names migrate to the new ones; when the
 * last page is clean the aliases come out.
 *
 * Hard floors, enforced by _audit.py, not preferences:
 *   - No rendered text below 12px. Body copy 16px.
 *   - 4.5:1 for every text pairing including placeholders. 3:1 for meaningful
 *     non-text indicators, measured against fill or border.
 *   - 44x44 minimum touch target. 16px minimum input text.
 *   - Nothing fixed or floating over content.
 *   - No network dependency of any kind. Fonts are local files and must load.
 */

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground. Kakanin cream, never paper white: a near-white page with white
     panels has no rhythm, which is what "too bright" meant last time. */
  --ground: #f6f1ea;
  --surface: #fffcf7;

  /* Recessed wells: where direction 5 had stainless, this has rice-cake
     surfaces a shade deeper than the ground. */
  --well: #eee6da;
  --well-deep: #e2d8c9;
  --edge: #cfc3b1;
  --edge-soft: #e2d8c9;

  /* Control boundaries carry meaning, so they are measured against 3:1 rather
     than left as decoration. 3.56:1 on surface, 3.25:1 on the ground. */
  --control-edge: #8e819a;

  /* Ube blocks. Whole sections invert; the beat of the page. */
  --block: #2d1b4e;
  --block-2: #3b2766;
  --bone: #f6f1ea;

  /* Ink */
  --ink: #1a1023;
  --slate: #5f5470;

  /* Brand. Ube purple holds and groups; the deep step carries small text. */
  --brand: #6a3b8e;
  --brand-deep: #4a2683;
  --brand-wash: #f0e8f2;

  /* Latik. Gold is FILL ONLY on light grounds: 1.36:1 against cream means it
     can never carry text or stand alone as an indicator there. It appears as
     a filled block with ink on it (9.86:1) or beside a written label. On ube
     it is free: 8.17:1. */
  --latik: #f0b429;
  --latik-deep: #dfa51e;
  --latik-wash: #fbf2d9;
  --t-latik: #8a6206;

  /* Macro fills, per the approved mock: protein ube-light, carbs latik,
     fat terracotta. Saturated value for bars, darkened companion for text.
     On light wells the gold bar leans on the well border for its 3:1. */
  --c-kcal: #6a3b8e;
  --c-protein: #7b4fb5;
  --c-carbs: #8a5b91;
  --c-fat: #d9694a;

  --t-kcal: #4a2683;
  --t-protein: #4a2683;
  --t-carbs: #694475;
  --t-fat: #b34a2e;

  --warn: #a3341a;

  /* ---- direction-5 compatibility aliases, see header ---- */
  --steel: var(--well);
  --steel-deep: var(--well-deep);
  --teal: var(--brand);
  --teal-deep: var(--brand-deep);
  --teal-wash: var(--brand-wash);
  --sun: var(--latik);
  --sun-wash: var(--latik-wash);
  --t-sun: var(--t-latik);

  /* Type. Two local files; the fallback stacks exist for the milliseconds
     before the woff2 arrives from disk, and the audit proves arrival. */
  --display: 'Familjen Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  --micro: 0.75rem;   /* 12px, the floor */
  --small: 0.875rem;  /* 14px */
  --base: 1rem;       /* 16px, body */
  --step-1: 1.125rem;
  --step-2: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-4: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --step-5: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);

  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --section: clamp(3rem, 2.2rem + 4vw, 5.5rem);
  --shell: 71rem;

  /* Cut, not moulded. Two small radii; the pill survives only where a shape
     is genuinely capsular, which is gauges and short functional tags. */
  --r: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* No floating. Surfaces are distinguished by their own color and their
     edges, not by a drop shadow under everything. --raise is kept as a token
     so the rules that reference it resolve to nothing rather than needing to
     be hunted down one by one. */
  --raise: none;
  --sink: inset 0 1px 2px rgba(45, 27, 78, 0.08);

  --out: cubic-bezier(0.2, 0.8, 0.3, 1);
}

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
  scroll-behavior: smooth;

  /* Clears the sticky bar when a link jumps to a section. scroll-padding and
     scroll-margin ADD UP if both are set, so only this one exists. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* One weight for display, not 700 on everything. 650 reads as deliberate at
   size; 700 at every level flattens the hierarchy it is supposed to create. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
}

h3, h4 { font-weight: 620; letter-spacing: -0.022em; line-height: 1.14; }

p { margin: 0; }
a { color: var(--brand-deep); }

/* The UA gives <b> and <strong> `font-weight: bolder`, which is RELATIVE: inside
   a 650 parent it resolves to 900, heavier than any weight this design declares.
   Pinning it is what keeps the figures in the wall and the ledger on scale. */
b, strong { font-weight: 650; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: #fff; }
::placeholder { color: var(--slate); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.section { padding-block: var(--section); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.85rem 1.2rem;
  font-weight: 600;
  border-radius: 0 0 var(--r) 0;
}

.skip:focus { left: 0; }

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

/* ---------- Labels ---------- */

/* Functional labels, one step up from the 12px floor and tracked far less
   tightly than before. The old 0.09em micro-caps were everywhere and read as
   a component library's default rather than a decision. */
.label {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ---------- Surfaces ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
}

/* Set into the surface: the readout well, quick-add wells, history wells. */
.recess {
  background: var(--well);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  box-shadow: var(--sink);
}

/* ---------- The readout ----------
   The one place the eye is meant to land. Figures in the display face; on
   light ground they are deep ube, which is the approved mock's hero move. */

.readout { padding: 0.85rem 0.95rem 0.9rem; }

.readout__label { margin-bottom: 0.45rem; }

.readout__row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }

.readout__num {
  font-family: var(--display);
  font-size: var(--step-5);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--t-kcal);
}

.readout__unit {
  font-size: var(--small);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.readout__of {
  margin-left: auto;
  font-size: var(--small);
  font-weight: 600;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

/* ---------- The gauge ----------
   Flat fill, pill ends. The inset ink line is what keeps a gold fill legal on
   a light well: the indicator's 3:1 is measured against fill OR border. */

.gauge {
  height: 0.75rem;
  background: var(--well-deep);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--sink);
}

.gauge__fill {
  height: 100%;
  width: 0;
  background: var(--c-kcal);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  transition: width 620ms var(--out);
}

.gauge--over .gauge__fill { background: var(--warn); }

/* ---------- Example card ----------
   The clip tab is gone. It was gold, it was decorative, and gold now means
   one thing only: this can be pressed. */

.clipcard {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  padding: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform 140ms var(--out), border-color 140ms var(--out);
}

.clipcard:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .clipcard:hover { border-color: var(--brand); }
}

.clipcard__name {
  display: block;
  font-size: var(--small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.clipcard__num {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--micro);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--t-kcal);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tray ---------- */

.tray {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tray__rail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--brand-wash);
  border-bottom: 1px solid var(--edge-soft);
}

.tray__rail .label { color: var(--brand-deep); }

.tray__rail b {
  margin-left: auto;
  font-size: var(--micro);
  font-weight: 650;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}

.tray__body > * + * { border-top: 1px solid var(--edge-soft); }

/* ---------- Buttons ----------
   Gold, cut square-ish, and reserved for the one primary action on a screen.
   The only depth is a single inner highlight along the top edge, which is a
   material fact about a raised key rather than a shadow pretending to float. */

.btn {
  --bg: var(--latik);
  --fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-size: var(--base);
  font-weight: 650;
  letter-spacing: -0.004em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transition: background-color 150ms var(--out), transform 120ms var(--out);
}

.btn:active { transform: scale(0.98); }
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }

.btn--secondary {
  --bg: var(--surface);
  --fg: var(--ink);
  border-color: var(--control-edge);
  box-shadow: none;
}

.btn--sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: var(--small); }

/* Ghost: the navigation's action. Gold is reserved for the ONE primary action
   on a screen, and on the landing page that is the demo's Compute button, so
   the nav cannot also be gold. Ube outline, deep ube text at 9.86:1 on cream. */
.btn--ghost {
  --bg: transparent;
  --fg: var(--brand-deep);
  border-color: var(--brand);
  border-radius: var(--r-pill);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--latik-deep); }
  .btn--secondary:hover { background: var(--well); border-color: var(--slate); }
  .btn--ghost:hover { background: var(--brand-wash); border-color: var(--brand-deep); }
}

/* ---------- Fields ---------- */

.field label { display: block; margin-bottom: 0.4rem; }

/* Controls are outlined, not sunken. --control-edge is measured against 3:1
   so the boundary is a real affordance rather than a decorative hairline. */
.input,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--control-edge);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--base);
}

.field select { appearance: none; }

/* ---------- Nav ----------
   Sticky, not fixed. Sticky participates in the flow, so it cannot sit on top
   of content the way the audit forbids, and `scroll-padding-top` on <html>
   keeps an anchor jump from landing behind it. At rest the bar is invisible
   against the ground; once the page moves it takes a solid ground and one
   restrained rule. No shadow, no blur, no glass. */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--edge-soft);
  transition: background-color 220ms var(--out), border-color 220ms var(--out);
}

.nav__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.022em;
  flex: none;
}

/* John's own mark, supplied 14 September 2026. It is a purple tile carrying
   a white fork and a gold leaf that together read as a K, so it needs no
   background of ours on any ground: the artwork brings its own, the corners
   are transparent in the file, and the white and gold inside it hold up on
   cream and on ube alike. Everything that used to draw a letter is gone. */
.brand__mark {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  display: block;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.brand__mark img { width: 100%; height: 100%; display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: var(--small);
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--r-pill);
  color: var(--slate);
  text-decoration: none;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--ink); background: var(--well); }
}

.nav__links a { border-radius: var(--r-pill); }

@media (max-width: 40rem) {
  .nav__links { display: none; }
}

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

.foot { background: var(--ground); border-top: 2px solid var(--ink); padding-block: 2.4rem 2rem; }

.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 46rem) { .foot__grid { grid-template-columns: 1fr; gap: 1rem; } .foot ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; } }

.foot h2 { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.045em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.6rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }

.foot li a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--slate);
  text-decoration: none;
  font-size: var(--small);
}

@media (hover: hover) and (pointer: fine) { .foot li a:hover { color: var(--ink); } }

.foot__bar {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--micro);
  color: var(--slate);
}

.samplecredit {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  gap: 0.4rem;
  font-size: var(--micro);
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
}

.samplecredit::before { content: ''; width: 8px; height: 8px; background: var(--brand); border-radius: var(--r-pill); flex: none; }

@media (hover: hover) and (pointer: fine) { .samplecredit:hover { color: var(--ink); } }

/* ---------- Macro dials ----------
   Three rings in a row, chosen 14 September 2026 over three stacked bars. The
   bars filled with their own color when the target landed, which turned the
   trio into one slab of near-identical purple sitting directly above the gold
   meal row. A ring shares its shape with nothing else on the screen.

   Every macro still carries a written label, and the reached state is a tick,
   not a hue. Color is never the only signal.

   --c is the macro's color and --p its percentage, both set per dial by the
   render. --dial-track and --dial-hole are the surface it is drawn on, so the
   same markup works on the cream pages and on the app's ube ground. */

.macros {
  --dial-track: var(--well-deep);
  --dial-hole: var(--surface);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.macro { text-align: center; }

.macro__ring {
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto 0.45rem;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--dial-track) 0);
  display: grid;
  place-items: center;
  position: relative;
}

/* The hole is painted rather than cut, because a real hole would show the
   page behind it and this sits on more than one ground. */
.macro__ring::after {
  content: '';
  position: absolute;
  inset: 0.56rem;
  border-radius: 50%;
  background: var(--dial-hole);
}

.macro__in {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}

.macro.is-hit .macro__in { font-size: var(--step-2); }

.macro__name {
  display: block;
  font-size: var(--micro);
  font-weight: 650;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--slate);
}

.macro__goal {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--micro);
  font-weight: 400;
  color: var(--slate);
  font-variant-numeric: tabular-nums lining-nums;
}

.m-protein { color: var(--t-protein); }
.m-carbs { color: var(--t-carbs); }
.m-fat { color: var(--t-fat); }
.m-kcal { color: var(--t-kcal); }

/* ---------- Ube block ----------
   A whole section inverted to deep ube. The beat of the page, and the app's
   shell color: this is the surface John approved the design on. */

/* A dark section is a solid block with a precise edge top and bottom. The
   fractal-noise overlay that used to sit here was invisible at a glance and
   read as smeared grain when it was noticed, which is worse than nothing. */
.sec--ink {
  position: relative;
  background: var(--block);
  color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(246, 241, 234, 0.12),
              inset 0 -1px 0 rgba(26, 16, 35, 0.5);

  /* Redefine the tokens rather than chase specificity. Any rule that says
     var(--slate) or var(--ink) resolves light inside the block. Prose is
     brighter than it was (9.83:1); only metadata stays quiet. */
  --ink: #f6f1ea;
  --slate: #d7cbe4;
  --meta: #bcaed0;
}

.sec--ink .label { color: var(--meta); }

.sec--ink :focus-visible { outline-color: var(--latik); }

.sec--ink .panel {
  background: var(--block-2);
  border-color: rgba(246, 241, 234, 0.18);
  box-shadow: none;
}

.sec--ink .btn {
  --bg: var(--latik);
  --fg: #1a1023;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

@media (hover: hover) and (pointer: fine) {
  .sec--ink .btn:hover { background: var(--latik-deep); }
}

/* ---------- Brand field ----------
   A full-bleed mid-purple band between cream sections. The class name is
   direction-5 legacy; the HTML still says field-teal, and renaming it happens
   with each page's phase pass. */

.field-teal {
  background: var(--brand);
  color: #fff;
  border-block: 1px solid var(--brand-deep);
}

.field-teal h2, .field-teal h3 { color: #fff; }
.field-teal p { color: rgba(255, 255, 255, 0.9); }

.field-teal .btn {
  --bg: var(--latik);
  --fg: #1a1023;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 18px -12px rgba(0, 0, 0, 0.55);
}

@media (hover: hover) and (pointer: fine) {
  .field-teal .btn:hover { background: var(--latik-deep); }
}

/* ---------- Prose ---------- */

.prose { max-width: 40rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.4rem; margin-bottom: 0.6rem; }
.prose h3 { font-size: var(--base); margin-top: 1.6rem; margin-bottom: 0.35rem; }
.prose p, .prose li { color: var(--slate); font-size: var(--base); line-height: 1.7; }
.prose p + p { margin-top: 0.85rem; }
.prose ul { margin: 0.8rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.prose strong { color: var(--ink); font-weight: 600; }


/* ---------- Handaan shell (2026-09-05) ----------
 * The landing page is deep ube with a gold mark. Every inner page carries the
 * same bar and a deep ube page head, so the first click off the landing lands
 * on the same site. Body content below the head stays light for reading. */
.nav {
  background: var(--block);
  border-bottom-color: rgba(246, 241, 234, 0.14);
}
.nav .brand { color: var(--bone); }
/* The mark is an image now and carries its own tile, so the dark grounds
   have nothing left to override. */
.nav__links a { color: #c8bad8; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--bone); background: rgba(246, 241, 234, 0.1); }
}
.nav__links a[aria-current='true'] { color: var(--bone); background: rgba(246, 241, 234, 0.1); }
.nav .btn--ghost { --fg: var(--bone); border-color: rgba(246, 241, 234, 0.45); }
@media (hover: hover) and (pointer: fine) {
  .nav .btn--ghost:hover { background: rgba(246, 241, 234, 0.1); border-color: var(--bone); }
}
.nav :focus-visible { outline-color: var(--latik); }

main > .pagehead {
  --ink: #f6f1ea;
  --slate: #c8bad8;
  color: var(--bone);
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(123, 79, 181, 0.7), transparent 62%),
    radial-gradient(40% 70% at 5% 100%, rgba(240, 180, 41, 0.18), transparent 60%),
    var(--block);
  padding-block: clamp(2.4rem, 1.8rem + 2.6vw, 4.2rem) clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  margin-bottom: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  border-radius: 0 0 clamp(1.4rem, 1rem + 2vw, 2.6rem) clamp(1.4rem, 1rem + 2vw, 2.6rem);
}
main > .pagehead h1 { color: var(--bone); }
main > .pagehead .label { color: var(--latik); }
main > .pagehead a:not(.btn) { color: var(--bone); }
main > .pagehead .btn { --fg: #1a1023; }
main > .pagehead .btn--secondary { --bg: transparent; --fg: var(--bone); border-color: rgba(246, 241, 234, 0.45); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  main > .pagehead .btn--secondary:hover { background: rgba(246, 241, 234, 0.1); border-color: var(--bone); }
}
main > .pagehead :focus-visible { outline-color: var(--latik); }

/* ---------- One shell for every page (26 Sep 2026) ----------
 * The landing page and the inner pages used to carry three different headers
 * and three different footers, and the logo jumped sideways between them.
 * The bar and the footer now match the landing page exactly: same width, same
 * pill button with its arrow, same deep ube footer. */
.nav .shell, .foot .shell { --shell: 88rem; }
.btn__arrow {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(26, 16, 35, 0.12);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn__arrow svg { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__arrow { transform: translate(2px, -2px) scale(1.06); } }
.nav__cta { margin-left: auto; padding: 0.3rem 0.3rem 0.3rem 1.1rem; }
.nav__links + .nav__cta { margin-left: 0.5rem; }
@media (max-width: 40rem) { .nav__links + .nav__cta { margin-left: auto; } }

.foot { background: #1f1236; color: var(--bone); border-top: 1px solid rgba(246, 241, 234, 0.14); padding-block: 2.6rem 2rem; }
.foot .brand { color: var(--bone); }
.foot__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 46rem) { .foot__grid { grid-template-columns: 1fr; } }
.foot__promise { margin-top: 0.6rem; font-size: var(--base); color: #d7cbe4; max-width: 44ch; text-wrap: balance; }
.foot__fine { margin-top: 0.7rem; font-size: var(--base); color: #c8bad8; max-width: 46ch; text-wrap: pretty; }
.foot li a { color: #c8bad8; }
@media (hover: hover) and (pointer: fine) { .foot li a:hover { color: var(--bone); } }
.foot__bar { border-top-color: rgba(246, 241, 234, 0.14); color: #c8bad8; }
.foot :focus-visible { outline-color: var(--latik); }
h1, h2, h3 { text-wrap: balance; }