/* ======================================================================
   The live site's stylesheet. Two layers, concatenated, in this order:

     1. ops/design/tokens.css  — byte-identical to the approved token sheet
                                 (palette, type, base layer, components).
                                 Diff it against that file; it should be empty.
     2. the site layer         — page layout only: masthead, hero, prose
                                 column, panels, footer. Derived from
                                 ops/design/preview/site.css.

   Approved 2026-08-19. The mascot and the app icon are NOT approved and are
   deferred, so nothing here references ops/design/mascot/ or ops/design/icon/:
   the hero and the masthead are built from the language's own non-character
   motifs (card anatomy, the info rail, the foil edge, the display face).

   NAME-AGNOSTIC BY RULE: no product name is written in this file, and the one
   font is self-hosted in fonts/ next to it. There is not one external request
   on this site — no CDN, no webfont service, no remote image.
   ====================================================================== */

/* CardBard design tokens — the whole visual language, as custom properties.
   Drop-in for ops/launch/site/. No imports, no external requests: the one font
   is self-hosted next to this file (fonts/ is a sibling directory).

   NAME-AGNOSTIC BY RULE. Every token is --brand-*, never --cardbard-*. The
   brand name is not written anywhere in this file, in the font filenames, or in
   the artwork filenames, so a rename (D-008: the coined name can change until
   the bundle ID ships) is a find-replace in HTML only. Do not "helpfully"
   rename these to the product name.

   Contrast: every text/background pair below is computed, not eyeballed, by
   ops/design/contrast-check.py. Change a colour, re-run that script, and paste
   the new table into DESIGN.md. It exits non-zero on a failure.

   Order of the file:
     1. font face      2. light palette + scales     3. dark palette
     4. the base layer the site relies on (reset-ish, type, links, focus)
     5. the components: card panel, foil edge, info rail, chips, buttons, lists
*/

/* ------------------------------------------------------------------ 1. font */

/* Bricolage Grotesque, SIL Open Font License 1.1 (no Reserved Font Name).
   Variable: opsz 12..96, wght 400..800, latin subset, 76.9 KB.
   Source: github.com/ateliertriay/bricolage (OFL.txt vendored beside it). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------- 2. light palette + scales */

:root {
  /* --- surfaces and ink --- */
  --brand-bg: #f1f3ee;          /* page: cool paper, deliberately not cream */
  --brand-surface: #ffffff;     /* a panel, i.e. a "card" */
  --brand-sunk: #e4e8e0;        /* the info rail, insets, code */
  --brand-ink: #141c19;         /* body text */
  --brand-muted: #54615b;       /* secondary text, captions, timestamps */
  --brand-rule: #d3dad2;        /* decorative hairline — never load-bearing */
  --brand-rule-strong: #77857d; /* the visible edge of a control (3:1) */

  /* --- the three colours that mean something --- */
  --brand-primary: #0d5545;       /* spruce: the app, its links, its buttons */
  --brand-on-primary: #ffffff;
  --brand-primary-weak: #dcebe3;
  --brand-brass: #8a5510;         /* brass TEXT (price, source, timestamps) */
  --brand-brass-fill: #b07414;    /* brass GRAPHIC (mascot, rails, markers) */
  --brand-brass-weak: #f7ebd7;
  --brand-plum: #6a3c8c;          /* "we are not sure": candidate lists */
  --brand-plum-weak: #ede4f4;
  --brand-alert: #a32f1e;         /* destructive and error only */
  --brand-alert-weak: #f8e3df;

  /* --- the mascot's own five colours (fixed; see DESIGN.md § mascot) --- */
  --brand-mascot-face: #f2e3c8;
  --brand-mascot-cap: #6a3c8c;
  --brand-mascot-cloak: #0d5545;
  --brand-mascot-wood: #b07414;
  --brand-mascot-blush: #c9647f;

  /* --- type --- */
  --brand-font-display: "Bricolage Grotesque", "Segoe UI", system-ui,
    -apple-system, sans-serif;
  --brand-font-text: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --brand-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* fluid steps: min at 320px, max at 1200px */
  --brand-text-xs: 0.8125rem;
  --brand-text-sm: 0.9375rem;
  --brand-text-md: 1.0625rem;
  --brand-text-lg: clamp(1.1875rem, 1.09rem + 0.49vw, 1.375rem);
  --brand-text-xl: clamp(1.5rem, 1.3rem + 1vw, 1.9375rem);
  --brand-text-2xl: clamp(2rem, 1.6rem + 2vw, 2.875rem);
  --brand-text-3xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);

  /* optical size: the display face is cut for the size it is set at */
  --brand-opsz-micro: 12;
  --brand-opsz-text: 24;
  --brand-opsz-head: 48;
  --brand-opsz-display: 96;

  --brand-measure: 36rem;       /* body column */
  --brand-measure-wide: 52rem;  /* masthead, hero, section rules */

  /* --- space: 4px base, doubling where it matters --- */
  --brand-space-1: 0.25rem;
  --brand-space-2: 0.5rem;
  --brand-space-3: 0.75rem;
  --brand-space-4: 1rem;
  --brand-space-5: 1.5rem;
  --brand-space-6: 2rem;
  --brand-space-7: 3rem;
  --brand-space-8: 4.5rem;
  --brand-space-9: 6rem;

  /* --- radius: derived from a real card (63×88 mm, 3 mm corner ≈ 4.8% of the
         short edge). --brand-radius-card is that ratio at panel scale. --- */
  --brand-radius-xs: 4px;
  --brand-radius-sm: 8px;
  --brand-radius-card: 14px;
  --brand-radius-lg: 20px;
  --brand-radius-pill: 999px;

  /* --- elevation: tinted with the ink hue, never neutral black --- */
  --brand-shadow-1: 0 1px 2px rgba(20, 28, 25, 0.05),
    0 1px 3px rgba(20, 28, 25, 0.04);
  --brand-shadow-2: 0 2px 4px rgba(20, 28, 25, 0.05),
    0 10px 24px -8px rgba(20, 28, 25, 0.14);
  --brand-shadow-3: 0 4px 8px rgba(20, 28, 25, 0.06),
    0 24px 48px -12px rgba(20, 28, 25, 0.18);

  /* --- motion --- */
  --brand-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --brand-dur-1: 120ms;
  --brand-dur-2: 240ms;

  /* --- the foil sheen: the one decorative gradient in the system --- */
  --brand-foil: linear-gradient(
    100deg,
    rgba(13, 85, 69, 0) 0%,
    rgba(13, 85, 69, 0.55) 18%,
    rgba(106, 60, 140, 0.55) 38%,
    rgba(176, 116, 20, 0.65) 58%,
    rgba(13, 85, 69, 0.5) 78%,
    rgba(13, 85, 69, 0) 100%
  );
}

/* ------------------------------------------------------------ 3. dark palette */

@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg: #0e1512;
    --brand-surface: #161e1a;
    --brand-sunk: #0a100d;
    --brand-ink: #e6ede7;
    --brand-muted: #9aa9a1;
    --brand-rule: #27302b;
    --brand-rule-strong: #6d7c74;

    --brand-primary: #5fd3ae;
    --brand-on-primary: #052620;
    --brand-primary-weak: #14332b;
    --brand-brass: #e4b063;
    --brand-brass-fill: #e4b063;
    --brand-brass-weak: #2e2413;
    --brand-plum: #c69be8;
    --brand-plum-weak: #241a31;
    --brand-alert: #f0938a;
    --brand-alert-weak: #331a17;

    --brand-mascot-cap: #a374c6;
    --brand-mascot-cloak: #2c8c72;
    --brand-mascot-wood: #e4b063;

    --brand-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --brand-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
    --brand-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 48px -12px rgba(0, 0, 0, 0.7);

    --brand-foil: linear-gradient(
      100deg,
      rgba(95, 211, 174, 0) 0%,
      rgba(95, 211, 174, 0.5) 18%,
      rgba(198, 155, 232, 0.5) 38%,
      rgba(228, 176, 99, 0.6) 58%,
      rgba(95, 211, 174, 0.45) 78%,
      rgba(95, 211, 174, 0) 100%
    );
  }
}

/* ------------------------------------------------------------- 4. base layer */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0 var(--brand-space-5);
  background: var(--brand-bg);
  color: var(--brand-ink);
  font-family: var(--brand-font-text);
  font-size: var(--brand-text-md);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* the display face, always with its optical size set to the size it is used at */
.brand-display {
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-head);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0 0 var(--brand-space-4); }
strong { font-weight: 650; }

a {
  color: var(--brand-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  transition: color var(--brand-dur-1) var(--brand-ease),
    text-decoration-color var(--brand-dur-1) var(--brand-ease);
}
a:hover { text-decoration-color: currentColor; }

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

hr {
  border: 0;
  border-top: 1px solid var(--brand-rule);
  margin: var(--brand-space-7) 0;
}

/* section label: small, tracked, with a brass tick — the only "eyebrow" device */
.brand-label {
  display: flex;
  align-items: center;
  gap: var(--brand-space-3);
  margin: var(--brand-space-8) 0 var(--brand-space-4);
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-micro);
  font-size: var(--brand-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-muted);
}
.brand-label::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--brand-brass-fill);
  transform: rotate(45deg);
}
.brand-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--brand-rule);
}

/* micro data: set, collector number, source, timestamp. Never a claim, always
   a fact with a unit. Mono because it is data, not prose. */
.brand-micro {
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  letter-spacing: 0.01em;
  color: var(--brand-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- 5. the components */

/* the card panel: a panel is a card. Hairline edge, card radius, quiet lift. */
.brand-card {
  position: relative;
  background: var(--brand-surface);
  border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius-card);
  box-shadow: var(--brand-shadow-1);
  padding: var(--brand-space-5);
  overflow: hidden;
}

/* the foil edge: the single decorative flourish in the whole system. One per
   page, on the panel that carries the promise. Holo is the hobby's own
   material; using it anywhere else spends the effect. */
.brand-card--foil::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-image: var(--brand-foil);
  background-size: 260% 100%;
  background-position: 0% 0;
  animation: brand-foil-drift 14s linear infinite;
}
@keyframes brand-foil-drift {
  to { background-position: 260% 0; }
}

/* the info rail: a card carries its identity on a strip at its foot. Only ever
   holds facts (set · number · variant, source · timestamp). */
.brand-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--brand-space-2) var(--brand-space-4);
  margin: var(--brand-space-5) calc(var(--brand-space-5) * -1)
    calc(var(--brand-space-5) * -1);
  padding: var(--brand-space-3) var(--brand-space-5);
  background: var(--brand-sunk);
  border-top: 1px solid var(--brand-rule);
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-space-2);
  padding: 0.25rem 0.6rem;
  border-radius: var(--brand-radius-pill);
  background: var(--brand-primary-weak);
  color: var(--brand-ink);
  font-size: var(--brand-text-xs);
  font-weight: 600;
  line-height: 1.4;
}
.brand-chip--candidate { background: var(--brand-plum-weak); }
.brand-chip--price { background: var(--brand-brass-weak); }

.brand-button {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-space-2);
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--brand-radius-sm);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-text);
  font-size: var(--brand-text-sm);
  font-weight: 650;
  text-decoration: none;
  box-shadow: var(--brand-shadow-1);
  transition: transform var(--brand-dur-1) var(--brand-ease),
    box-shadow var(--brand-dur-1) var(--brand-ease);
}
.brand-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--brand-shadow-2);
}
.brand-button:active { transform: translateY(0); }

.brand-button--quiet {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-rule-strong);
  box-shadow: none;
}

/* lists: a filled pip is a thing we are building, an open pip is a thing we are
   not. The marker carries the meaning, so the two lists never look alike. */
.brand-list {
  list-style: none;
  margin: 0 0 var(--brand-space-4);
  padding: 0;
}
.brand-list li {
  position: relative;
  margin-bottom: var(--brand-space-3);
  padding-left: var(--brand-space-5);
}
.brand-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--brand-brass-fill);
}
.brand-list--not li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--brand-rule-strong);
}

/* ordered work: the number is real information (it is the shipping order) */
.brand-order { display: flex; gap: var(--brand-space-4); margin-bottom: var(--brand-space-4); }
.brand-order__n {
  flex: 0 0 auto;
  min-width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--brand-radius-sm);
  background: var(--brand-sunk);
  color: var(--brand-brass);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-sm);
  font-variant-numeric: tabular-nums;
}

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

.wrap {
  max-width: var(--brand-measure-wide);
  margin: 0 auto;
  padding: var(--brand-space-7) 0 var(--brand-space-8);
}

.prose { max-width: var(--brand-measure); }
.prose p:last-child { margin-bottom: 0; }
.brand-list { margin-top: var(--brand-space-4); max-width: var(--brand-measure); }
.brand-order { max-width: var(--brand-measure); }

/* --- masthead ---------------------------------------------------------- */

/* Typographic only. The distilled mark is deferred, so the masthead is the
   wordmark on its own — no artwork, and nothing here to redraw on a rename. */

.masthead {
  display: flex;
  align-items: center;
  gap: var(--brand-space-3);
  margin-bottom: var(--brand-space-7);
}
.masthead__link {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-space-3);
  color: inherit;
  text-decoration: none;
}

.wordmark {
  margin: 0;
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-head);
  font-size: 1.6875rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1;
}
.masthead--sub .wordmark { font-size: 1.25rem; }
.masthead__link:hover .wordmark { text-decoration: underline; }

/* --- hero -------------------------------------------------------------- */

.hero {
  display: grid;
  gap: var(--brand-space-5);
  align-items: center;
  margin-bottom: var(--brand-space-7);
}

.hero__lede {
  margin: 0;
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-display);
  font-size: var(--brand-text-2xl);
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
  max-width: 18ch;
}

/* The hero object: card anatomy on a lit stage. Three card shapes, and the
   front one is the language's own diagram of itself — hairline edge, card
   radius, and a recessed rail at the foot where the facts live. It is
   decoration, so it carries no words and no numbers: a rail with copy in it
   would be a claim, and a claim belongs in the copy. */

.hero__stage {
  position: relative;
  justify-self: start;
  width: 244px;
  height: 244px;
}
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 46%,
    var(--brand-primary-weak) 0%,
    color-mix(in srgb, var(--brand-primary-weak) 55%, transparent) 55%,
    transparent 72%
  );
}

.hero__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 128px;
  border-radius: var(--brand-radius-sm);
  background: var(--brand-sunk);
  border: 1px solid var(--brand-rule);
  box-shadow: var(--brand-shadow-1);
}
.hero__card--left  { translate: calc(-50% - 52px) -48%; rotate: -14deg; }
.hero__card--right { translate: calc(-50% + 52px) -48%; rotate: 11deg; }

.hero__card--front {
  width: 118px;
  height: 164px;
  translate: -50% -50%;
  rotate: -3deg;
  background: var(--brand-surface);
  box-shadow: var(--brand-shadow-2);
  overflow: hidden;
}
.hero__window {
  position: absolute;
  inset: 11px 11px auto;
  height: 92px;
  border-radius: var(--brand-radius-xs);
  background: var(--brand-sunk);
}
.hero__rail {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  background: var(--brand-sunk);
  border-top: 1px solid var(--brand-rule);
}
.hero__rail::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-brass-fill);
  transform: rotate(45deg);
}

@media (min-width: 52rem) {
  .wrap { padding-top: var(--brand-space-8); }
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--brand-space-7);
    margin-bottom: var(--brand-space-8);
  }
  .hero__stage { justify-self: end; }
}

/* --- panels ------------------------------------------------------------ */

.panel { max-width: var(--brand-measure); margin-bottom: var(--brand-space-5); }
.panel p:last-of-type { margin-bottom: 0; }

.price {
  margin: var(--brand-space-1) 0 var(--brand-space-4);
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-head);
  font-size: var(--brand-text-xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* --- sub-page headings ------------------------------------------------- */

.page-title {
  margin: 0 0 var(--brand-space-5);
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-display);
  font-size: var(--brand-text-2xl);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

/* a sub-page's opening sentence, one step down from the hero lede */
.lede {
  max-width: 28ch;
  margin: 0 0 var(--brand-space-6);
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-head);
  font-size: var(--brand-text-xl);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

h3 {
  font-family: var(--brand-font-display);
  font-variation-settings: "opsz" var(--brand-opsz-text);
  font-size: var(--brand-text-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: var(--brand-space-6) 0 var(--brand-space-2);
}

/* --- footer ------------------------------------------------------------ */

footer {
  max-width: var(--brand-measure);
  margin-top: var(--brand-space-8);
  padding-top: var(--brand-space-5);
  border-top: 1px solid var(--brand-rule);
  color: var(--brand-muted);
  font-size: var(--brand-text-sm);
  line-height: 1.6;
}
footer p { margin: 0 0 var(--brand-space-3); }
footer p:last-child { margin-bottom: 0; }
footer a { color: var(--brand-muted); }
footer a:hover { color: var(--brand-primary); }
footer nav { margin-bottom: var(--brand-space-4); }