/* studio/_assets/brand.css: Libella Studio's chrome and material, portable to any page that loads tokens.css first.
   Contract: CONTRACT.md. Everything here is prefixed lb- (classes and custom properties).
   Register: bone ground (light) or the token night (dark); one light, from the top left, static; surfaces that read as
   made (plates with a lit edge and a soft cast); engraved hairlines (a dark line with a lit lip under it); ink only.
   Type: Bricolage Grotesque display, Instrument Sans text, JetBrains Mono figures; an 8 px unit, 24 px text leading.
   Three rule weights: 1 px ink (horizons, lockups), 1 px ink at 20 % (section rules), 1 px ink at 10 % (row rules). */

/* ── type: self-hosted (copied from guides/fonts by vendor.mjs; SIL OFL 1.1, fonts/OFL.txt) ─────────────────────── */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(fonts/bricolage-grotesque-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); }
/* metric-matched local fallbacks (clinamen.dev's measured overrides), so a late face never reflows a line off its rule */
@font-face { font-family: "Bricolage Fallback"; font-weight: 400 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold");
  size-adjust: 100%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; font-weight: 400 900;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 104%; ascent-override: 93.3%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Fallback"; font-weight: 400 700;
  src: local("Courier New"), local("Liberation Mono"), local("Menlo"), local("Consolas");
  size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --lb-u: 8px;
  --lb-ground: #f3efe6;                                   /* bone; ink 16.0:1, muted 5.7:1 (measured) */
  --lb-ink: var(--mc-fg);
  --lb-muted: var(--mc-muted);
  --lb-rule: color-mix(in srgb, var(--lb-ink) 20%, transparent);
  --lb-hair: color-mix(in srgb, var(--lb-ink) 10%, transparent);
  --lb-lip: rgb(255 255 255 / .72);                       /* the lit lower wall of an engraved line */
  --lb-light: rgb(255 253 247 / .9);                      /* the one light, top left */
  --lb-plate-a: #fbf9f4; --lb-plate-b: #f4f0e7; --lb-plate-c: #ece6d9;
  --lb-plate-hi: #ffffff; --lb-plate-lo: rgb(70 56 30 / .10); --lb-plate-cast: rgb(70 56 30 / .16);
  --lb-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --lb-text: "Instrument Sans", "Instrument Fallback", system-ui, sans-serif;
  --lb-mono: "JetBrains Mono", "JetBrains Fallback", ui-monospace, monospace;
  --lb-m: clamp(24px, 5vw, 128px);                        /* outer margin */
  --lb-gap: clamp(28px, 3.6vw, 112px);                    /* half the gutter either side of the centre */
  --lb-measure: min(100% - 2 * var(--lb-m), 1440px);      /* the content column */
  --mc-font: var(--lb-text);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --lb-ground: var(--mc-bg);
  --lb-lip: rgb(0 0 0 / .7); --lb-light: rgb(255 248 235 / .055);   /* dark first: the same light, a lit lip and a deep cast on near-black */
  --lb-plate-a: #222227; --lb-plate-b: #19191d; --lb-plate-c: #121215;
  --lb-plate-hi: rgb(255 250 240 / .16); --lb-plate-lo: rgb(0 0 0 / .6); --lb-plate-cast: rgb(0 0 0 / .85);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lb-ground: var(--mc-bg);
    --lb-lip: rgb(0 0 0 / .7); --lb-light: rgb(255 248 235 / .055);   /* dark first: the same light, a lit lip and a deep cast on near-black */
    --lb-plate-a: #222227; --lb-plate-b: #19191d; --lb-plate-c: #121215;
    --lb-plate-hi: rgb(255 250 240 / .16); --lb-plate-lo: rgb(0 0 0 / .6); --lb-plate-cast: rgb(0 0 0 / .85);
    color-scheme: dark;
  }
}

/* ── ground ─────────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--lb-ground); color: var(--lb-ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* the one light: a broad, static wash from the top left of the first screen (never fixed, so it never moves on scroll) */
body { margin: 0; font: 400 16px/24px var(--lb-text); font-kerning: normal; overflow-x: clip; min-height: 100vh;
  background: radial-gradient(120vmax 90vmax at 0 0, var(--lb-light), transparent 62%) no-repeat; }
p, h1, h2, h3, h4, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 1px; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
.lb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lb-skip { position: absolute; left: var(--lb-m); top: -64px; z-index: 10; padding: 8px 16px; background: var(--lb-ink); color: var(--lb-ground); font: 500 13px/24px var(--lb-mono); }
.lb-skip:focus { top: 16px; }
.lb-fig, .lb-mono { font-family: var(--lb-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ── the mark (C2): ticks and bubble, one ink ───────────────────────────────────────────────────────────────── */
.lb-mark { display: block; overflow: visible; fill: currentColor; }
.lb-mark__b { transform-box: view-box; }
.lb-mark-arrive .lb-head .lb-mark__b { translate: 3px 0; opacity: 0; }   /* pending pose: one gap (t) to the right */

/* ── buttons ────────────────────────────────────────────────────────────────────────────────────────────────── */
.lb-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; font: 600 16px/1 var(--lb-text);
  text-decoration: none; color: var(--lb-ground); background: var(--lb-ink); border: 1px solid var(--lb-ink); border-radius: 2px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 6px 14px -10px var(--lb-plate-cast);
  transition: background-color var(--dur-150) var(--ease-out), color var(--dur-150) var(--ease-out); }
.lb-btn:hover { background: transparent; color: var(--lb-ink); text-decoration: none; }
.lb-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; box-shadow: none; }
.lb-btn--ghost { background: transparent; color: var(--lb-ink); box-shadow: none; }
.lb-btn--ghost:hover { background: var(--lb-ink); color: var(--lb-ground); }
.lb-link { font: 500 14px/24px var(--lb-text); }

/* ── the header: the lockup stands on a full-measure 1 px rule ──────────────────────────────────────────────── */
.lb-head { position: relative; z-index: 3; }
.lb-head__in { width: var(--lb-measure); margin: 0 auto; padding-top: 40px; display: grid; align-items: end;   /* 40 + 31 + the 1 px rule = 72: on the unit */
  grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "lock line nav cta tools" "rule rule rule rule rule"; column-gap: 32px; }
.lb-head__rule { grid-area: rule; height: 1px; background: var(--lb-ink); box-shadow: 0 1px 0 var(--lb-lip); }
/* one baseline (2026-10-20, N2 #10): the lockup word, the tagline and the nav all stand on the rule's top edge with the
   mark's tick feet (each face's margin is its own measured descent at its size; ≤ .5 px apart in Chromium and Firefox) */
/* lockup, MARK.md: caps height = tick height = 12 px (mark frame 32 px → ink box 28 × 12), word 17.86 px Bricolage 600,
   baseline = tick foot = the rule's top edge; gap 2t (8 px) less the L's side bearing. The word box is line-height 1, so
   its baseline sits .17em above the box bottom: the negative margin puts the baseline on the grid line, i.e. the rule. */
.lb-lockup { grid-area: lock; display: flex; align-items: flex-end; color: var(--lb-ink); text-decoration: none; white-space: nowrap; }
.lb-lockup__mark { width: 28px; height: 12px; flex: none; }
.lb-lockup__word { margin-left: 7.4px; margin-bottom: -.19em; font: 600 17.86px/1 var(--lb-display); letter-spacing: -.012em; text-transform: uppercase; }
.lb-lockup:hover .lb-lockup__word { text-decoration: none; }
.lb-head__line { grid-area: line; margin-bottom: -.144em; font: 400 14px/1 var(--lb-text); color: var(--lb-muted); white-space: nowrap; }
.lb-nav { grid-area: nav; justify-self: end; display: flex; gap: 24px; margin-bottom: -.1675em; font: 500 12px/1 var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; }
.lb-nav a { text-decoration: none; padding: 8px 0 0; }
/* the nav stands on the rule, so its underline is the rule taking weight under the word: from the baseline down, 3 px */
.lb-nav a:hover, .lb-nav a[aria-current="page"] { text-decoration: underline 3px; text-underline-offset: 0; text-decoration-skip-ink: none; }
/* the CTA and the two instruments are ruled boxes whose bottom edge IS the header rule: every item stands on the line */
.lb-head__cta { grid-area: cta; margin-bottom: -1px; border-radius: 2px 2px 0 0; box-shadow: none; }
.lb-head__cta[aria-current="page"] { background: transparent; color: var(--lb-ink); }
.lb-tools { grid-area: tools; display: flex; gap: 8px; margin-bottom: -1px; }
.lb-tool { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; font: 500 12px/1 var(--lb-mono); letter-spacing: .04em;
  text-transform: uppercase; color: inherit; background: none; border: 1px solid var(--lb-rule); border-radius: 2px; cursor: pointer; }
.lb-tool svg { width: 14px; height: 14px; }
.lb-tool:hover { border-color: var(--lb-ink); }
.lb-motion { display: contents; }
/* the catalog's motion control, dressed as the header's second instrument */
.lb-head .mc-amc__trigger { min-height: 32px; height: 32px; padding: 0 10px; gap: 8px; background: none; border: 1px solid var(--lb-rule); border-radius: 2px;
  box-shadow: none; color: var(--lb-ink); font: 500 12px/1 var(--lb-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.lb-head .mc-amc__trigger:hover { background: none; border-color: var(--lb-ink); }
.lb-head .mc-amc__badge { font: 500 11px/1 var(--lb-mono); letter-spacing: .04em; background: none; border: 0; padding: 0; color: var(--lb-muted); }

/* ── rules ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.lb-rule { height: 1px; background: var(--lb-rule); box-shadow: 0 1px 0 var(--lb-lip); transform-origin: 50% 50%; }
.lb-rule--ink { background: var(--lb-ink); }
.lb-js-rules .lb-rule[data-lb-draw]:not(.is-drawn) { transform: scaleX(0); }

/* ── plates: a surface lit from the top left, its edge catching the light, a soft cast down and right ───────── */
.lb-plate { position: relative; border-radius: 4px;
  background: linear-gradient(152deg, var(--lb-plate-a) 0%, var(--lb-plate-b) 58%, var(--lb-plate-c) 100%);
  box-shadow: inset 1px 1px 0 var(--lb-plate-hi), inset -1px -1px 0 var(--lb-plate-lo), 0 0 0 1px var(--lb-hair),
              6px 9px 22px -14px var(--lb-plate-cast), 2px 2px 3px -2px var(--lb-plate-lo); }
/* dark: the lit lip is a line of light along the top edge, brightest at the top left where the light comes from */
:root[data-theme="dark"] .lb-plate::before { content: ""; position: absolute; left: 1px; right: 1px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 250 240 / .34), rgb(255 250 240 / .06) 70%, transparent); border-radius: 4px 4px 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lb-plate::before { content: ""; position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  pointer-events: none; background: linear-gradient(90deg, rgb(255 250 240 / .34), rgb(255 250 240 / .06) 70%, transparent); border-radius: 4px 4px 0 0; } }
@media (forced-colors: active) { .lb-plate::before { display: none; } }
.lb-engrave { border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }

/* ── the footer ─────────────────────────────────────────────────────────────────────────────────────────────── */
.lb-foot { padding: 64px 0 48px; }
.lb-foot__in { width: var(--lb-measure); margin: 0 auto; }
/* the footer lockup: caps 24 px → mark frame 64 px (ink box 56 × 24), word 35.72 px, gap 2t (16 px) less the bearing */
.lb-lockup--foot { padding-top: 16px; border-bottom: 1px solid var(--lb-ink); box-shadow: 0 1px 0 var(--lb-lip); }
.lb-lockup--foot .lb-lockup__mark { width: 56px; height: 24px; }
.lb-lockup--foot .lb-lockup__word { margin-left: 14.9px; font-size: 35.72px; letter-spacing: -.02em; }
.lb-foot__grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 32px calc(2 * var(--lb-gap)); padding: 32px 0 40px; }
.lb-foot__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 32px; align-content: start; font: 500 12px/32px var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; }
.lb-foot__nav a { text-decoration: none; } .lb-foot__nav a:hover { text-decoration: underline; }
.lb-foot__mail { font-size: 14px; line-height: 24px; color: var(--lb-muted); display: grid; gap: 8px; align-content: start; }
.lb-foot__mail a { color: var(--lb-ink); font: 500 16px/32px var(--lb-text); }
.lb-foot__small { display: flex; flex-wrap: wrap; gap: 0 24px; padding-top: 8px; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip);
  font: 400 12px/32px var(--lb-text); color: var(--lb-muted); }
/* the page check: a reading taken in the visitor's browser; the small mark sits true only when every check passed */
.lb-check { align-self: start; }
.lb-check__head { display: flex; align-items: center; gap: 12px; font: 500 12px/24px var(--lb-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lb-muted); }
.lb-check__mark { width: 21px; height: 9px; color: var(--lb-ink); }
.lb-check__gauge[data-off] .lb-mark__b { translate: -3px 0; }
.lb-check__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); margin-top: 8px; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.lb-check__list div { padding: 8px 16px 7px 0; border-bottom: 1px solid var(--lb-hair); }
.lb-check__list dt { font: 400 12px/16px var(--lb-text); color: var(--lb-muted); }
.lb-check__list dd { font: 500 15px/24px var(--lb-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ── widths ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1240px) { .lb-head__line { display: none; } .lb-head__in { grid-template-columns: auto 0 1fr auto auto; column-gap: 24px; } .lb-nav { gap: 20px; } }
@media (max-width: 1000px) { .lb-tool span { display: none; } .lb-head .mc-amc__badge { display: none; } }
@media (max-width: 860px) {
  /* the lockup keeps its rule; the nav and the tools take a row of their own under it */
  /* 390: three rows on the unit: 24 + 39 (lockup, CTA) + the rule + 48 (nav, tools) = 112 */
  .lb-head__in { padding-top: 24px; grid-template-columns: 1fr auto; grid-template-rows: 39px 1px 48px; grid-template-areas: "lock cta" "rule rule" "nav tools"; row-gap: 0; column-gap: 16px; }
  .lb-head__cta { margin-bottom: -1px; }
  .lb-head__line { display: none; }
  .lb-nav { justify-self: start; gap: 16px; margin: 0; padding: 4px 0 0; align-self: center; }
  .lb-nav a { padding: 12px 0; display: inline-block; }
  .lb-nav a:hover, .lb-nav a[aria-current="page"] { text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .lb-tools { margin: 0; align-self: center; }
  .lb-tool { padding: 0 8px; }
  .lb-head .mc-amc__trigger { padding: 0 8px; }
  .lb-head .mc-amc__trigger [data-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lb-foot__grid { grid-template-columns: 1fr; }
  .lb-lockup--foot .lb-lockup__mark { width: 42px; height: 18px; }
  .lb-lockup--foot .lb-lockup__word { margin-left: 11.2px; font-size: 26.79px; }
}
@media (max-width: 400px) { .lb-nav { gap: 12px; font-size: 11px; } .lb-head__cta { padding: 0 10px; } }

/* ── motion settings: reduced and none show end states only ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { :root:not([data-mc-motion="full"]) .lb-rule { transform: none !important; } }
:root[data-mc-motion="reduce"] .lb-rule, :root[data-mc-motion="none"] .lb-rule { transform: none !important; }

/* ── forced colours: system colours; every rule and the mark stay solid and visible ─────────────────────────── */
@media (forced-colors: active) {
  html, body { background: Canvas; color: CanvasText; }
  .lb-mark { fill: CanvasText; }
  .lb-head__rule, .lb-rule { forced-color-adjust: none; background: CanvasText; box-shadow: none; transform: none !important; }
  .lb-plate { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
  .lb-engrave, .lb-lockup--foot, .lb-foot__small, .lb-check__list, .lb-check__list div { border-color: CanvasText; box-shadow: none; }
  .lb-btn { forced-color-adjust: none; background: ButtonText; color: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .lb-btn:hover, .lb-btn--ghost { background: ButtonFace; color: ButtonText; }
}

/* ── the motion control's panel, in Libella's own material (the catalog's a11y-motion-controls, re-themed through its
   tokens only): ink and bone, hairlines, square corners, mono labels; no dot ground, no colour. The preview is the
   mark's bubble settling onto a rule (the same motion the site makes), not a card rising on dots. ───────────────── */
.lb-head .mc-amc, .lb-head .mc-amc__panel {
  --mc-accent: var(--lb-ink); --mc-accent-fg: var(--lb-ground); --mc-success: var(--lb-ink);
  --mc-surface: var(--lb-plate-a); --mc-surface-2: transparent; --mc-border: var(--lb-rule);
  --mc-radius: 2px; --mc-radius-lg: 2px; --mc-font: var(--lb-text);
}
.lb-head .mc-amc__panel { background: linear-gradient(152deg, var(--lb-plate-a), var(--lb-plate-b) 58%, var(--lb-plate-c)); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--lb-plate-hi), 0 0 0 1px var(--lb-hair), 6px 9px 22px -14px var(--lb-plate-cast); }
.lb-head :is(.mc-amc__title, .mc-amc__legend, .mc-amc__lbl, .mc-amc__caption, .mc-amc__sub) { font-family: var(--lb-mono); letter-spacing: .04em; }
.lb-head :is(.mc-amc__title, .mc-amc__legend) { text-transform: uppercase; font-size: 12px; }
.lb-head :is(.mc-amc__segs, .mc-amc__seg, .mc-amc__btn, .mc-amc__reset, .mc-amc__pause, .mc-amc__track, .mc-amc__flash) { border-radius: 2px; }
.lb-head .mc-amc__track span { border-radius: 1px; }
.lb-head .mc-amc__seg:has(input:checked) { background: var(--lb-ink); color: var(--lb-ground); }
.lb-head .mc-amc__preview { background: linear-gradient(var(--lb-ink), var(--lb-ink)) 0 calc(50% + 7px) / 100% 1px no-repeat, transparent; border-color: var(--lb-hair); }
.lb-head .mc-amc__card { width: 36px; height: 12px; padding: 0; border-radius: 6px; background: var(--lb-ink); box-shadow: none; border: 0; display: block; }
.lb-head .mc-amc__card > * { display: none; }
.lb-head .mc-amc svg [fill]:not([fill="none"]) { fill: currentColor; }
.lb-head .mc-amc svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
@media (forced-colors: active) {
  .lb-head .mc-amc__panel { box-shadow: none; border: 1px solid CanvasText; background: Canvas; }
  .lb-head .mc-amc__card { forced-color-adjust: none; background: CanvasText; }
  .lb-head .mc-amc__preview { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) 0 calc(50% + 7px) / 100% 1px no-repeat, Canvas; }
  /* the lockup is one logo: word and mark both CanvasText, never a split LinkText word */
  .lb-lockup { forced-color-adjust: none; color: CanvasText; }
  .lb-lockup .lb-mark { fill: CanvasText; }
}
/* home: the page has one CTA, the hero's "Start a build" (BRIEF §4); the header is not sticky, so its own steps aside
   there, statically (no layout shift, and the same with no JS) */
body:has([data-lb-hero-cta]) .lb-head__cta { display: none; }