/* fonts */
/* ============================================================
   Alibi Creativo — Webfonts
   Quicksand  : the brand face. Geometric rounded sans — the
                wordmark, headlines, UI. This is the studio's
                actual typeface (single-story a, round tittles,
                curved-foot t). Weights 300–700.
   Figtree    : readable geometric-humanist companion for long
                body copy & small UI text (rounds echo Quicksand,
                stays crisp at 14px).
   Space Mono : technical captions, indices, metadata accents.
   ============================================================ */

/* ---------- Quicksand (brand) ---------- */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Quicksand-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Quicksand-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Quicksand-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Quicksand-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Quicksand-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Quicksand-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Quicksand-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Quicksand-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Quicksand-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Quicksand-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Figtree (body companion) ---------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Figtree-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Figtree-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Figtree-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Figtree-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Figtree-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Figtree-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Figtree-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Figtree-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Anton (impact display — Druk-class substitute) ---------- */
/* ⚠ SUBSTITUTION: the studio's impact face looks like Druk (commercial).
   Anton is the closest free condensed-black grotesque. Archivo 800 is a
   wider squared alternative (below). Swap when the real font is licensed. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Anton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Anton-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Archivo (impact alt — wide squared black) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Archivo-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Archivo-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Archivo-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Archivo-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Space Mono ---------- */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SpaceMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SpaceMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SpaceMono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SpaceMono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* colors */
/* ============================================================
   Alibi Creativo — Color
   Monochrome, true black & white. The brand is stark: black mark
   on white paper, a clean neutral grey ramp between. No accent
   colour — energy comes from the shape-mark, scale, and the
   black/white inversion. (Greys are very lightly warm-neutral so
   large fields don't feel clinical, but read as B&W.)
   ============================================================ */
:root {
  /* --- Base scale: black → white ---------------------------- */
  --ink-900: #0a0a0a;   /* the studio black (logo black)         */
  --ink-800: #161616;
  --ink-700: #242424;
  --grey-600: #4d4d4d;  /* secondary text on white               */
  --grey-500: #6b6b6b;
  --grey-400: #969696;  /* muted captions, disabled              */
  --grey-300: #c2c2c2;  /* hairlines                             */
  --grey-200: #dcdcdc;  /* dividers, field borders               */
  --grey-100: #ededed;  /* sunken surface, hover wash            */
  --paper-50: #f7f7f5;  /* the page — a hair off pure white      */
  --paper-0:  #ffffff;  /* lifted card surface / true white      */
  --white:    #ffffff;

  /* --- Charcoal: feature/cover backgrounds (warmer than pure ink) -- */
  --charcoal: #383735;   /* the cover/feature dark — not pure black     */
  --charcoal-700: #2c2b29;

  /* --- Editorial accents ------------------------------------ */
  /* Used SPARINGLY: emphasis body text, category coding, founder bios,
     small marks. Never large fills. The brand reads black & white; these
     are the playful editorial spark. */
  --accent-orange: #d75f2b;  /* the warm rust — primary accent          */
  --accent-teal:   #2d8f93;  /* the cool counterpoint                   */
  --accent-blue:   #2f6fb0;
  --accent-violet: #6457b8;

  /* Inverse hairlines (for use on ink) */
  --ink-line-soft: rgba(255, 255, 255, 0.14);
  --ink-line:      rgba(255, 255, 255, 0.30);
  --paper-line-soft: rgba(10, 10, 10, 0.09);
  --paper-line:      rgba(10, 10, 10, 0.20);

  /* --- Semantic aliases — light (paper) context ------------- */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-0);
  --bg-sunken:      var(--grey-100);
  --bg-inverse:     var(--ink-900);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-800);
  --text-secondary: var(--grey-600);
  --text-muted:     var(--grey-400);
  --text-on-ink:    var(--paper-0);
  --text-on-ink-muted: rgba(255, 255, 255, 0.64);

  --line-hairline:  var(--paper-line-soft);
  --line-rule:      var(--paper-line);
  --line-strong:    var(--ink-900);

  --surface-card:        var(--paper-0);
  --surface-card-border: var(--paper-line-soft);

  /* Interaction — monochrome only: lift/sink, never recolor */
  --accent:         var(--ink-900);   /* the "accent" is black itself */
  --accent-contrast: var(--paper-0);
  --focus-ring:     rgba(10, 10, 10, 0.55);

  /* Status — desaturated, used only where truly needed */
  --status-positive: #2f5e3a;
  --status-warning:  #7a5d1f;
  --status-critical: #7a2f2f;
}

/* --- Charcoal feature context: cover, manifesto, contact --- */
.ac-on-charcoal,
[data-surface="charcoal"] {
  --bg-page:        var(--charcoal);
  --bg-surface:     var(--charcoal-700);
  --text-strong:    var(--paper-0);
  --text-body:      var(--paper-0);
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-muted:     rgba(255, 255, 255, 0.46);
  --line-hairline:  rgba(255, 255, 255, 0.14);
  --line-rule:      rgba(255, 255, 255, 0.28);
  --line-strong:    var(--paper-0);
  --accent:         var(--paper-0);
  --accent-contrast: var(--charcoal);
  color: var(--text-body);
  background: var(--bg-page);
}

/* --- Ink context: drop this on any dark section ------------- */
.ac-on-ink,
[data-surface="ink"] {
  --bg-page:        var(--ink-900);
  --bg-surface:     var(--ink-800);
  --bg-sunken:      var(--ink-700);
  --text-strong:    var(--paper-0);
  --text-body:      var(--paper-0);
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-muted:     rgba(255, 255, 255, 0.42);
  --line-hairline:  var(--ink-line-soft);
  --line-rule:      var(--ink-line);
  --line-strong:    var(--paper-0);
  --surface-card:        var(--ink-800);
  --surface-card-border: var(--ink-line-soft);
  --accent:         var(--paper-0);
  --accent-contrast: var(--ink-900);
  --focus-ring:     rgba(255, 255, 255, 0.6);
  color: var(--text-body);
  background: var(--bg-page);
}

/* typography */
/* ============================================================
   Alibi Creativo — Typography
   Quicksand is the brand face: a geometric rounded sans, worked
   across weight (300–700). Friendly, confident, bold — never
   austere. Figtree is the optional long-form body companion;
   Space Mono carries indices and technical metadata only.
   ============================================================ */
:root {
  /* --- Families --------------------------------------------- */
  /* Impact display — heavy condensed grotesque for big statements,
     section numbers, and uppercase section titles (Druk-class).
     SUBSTITUTION: Anton (condensed) by default; Archivo 800 is a wider
     squared alt — set --font-impact to swap. */
  --font-impact: "Anton", "Archivo", "Arial Narrow", sans-serif;
  --font-impact-alt: "Archivo", "Arial Narrow", sans-serif;
  --font-display: "Quicksand", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-sans: "Quicksand", "Trebuchet MS", "Segoe UI", sans-serif;
  /* Optional readability swap for dense/long body copy:
     set --font-sans: var(--font-text) on a scope. */
  --font-text: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Weights ---------------------------------------------- */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-semibold: 600;/* @kind font */
  --fw-bold: 700;    /* @kind font */

  /* --- Impact display (Anton / Druk-class) ------------------ */
  /* Always uppercase; very tight leading; near-zero or tight tracking. */
  --type-impact-xl: 400 clamp(3.5rem, 7vw, 6.5rem)/0.9 var(--font-impact);
  --type-impact-lg: 400 clamp(2.5rem, 4.5vw, 4rem)/0.92 var(--font-impact);
  --type-impact-md: 400 clamp(1.6rem, 2.4vw, 2.2rem)/0.95 var(--font-impact);
  --type-num: 400 clamp(2.5rem, 5vw, 4.5rem)/0.85 var(--font-impact);

  /* --- Display / headline scale (geometric, confident) ------ */
  /* Quicksand is wide & round — keep tracking near-zero, lean on weight. */
  --type-display-1: 700 clamp(3.25rem, 6.5vw, 6rem)/0.98 var(--font-display);
  --type-display-2: 700 clamp(2.5rem, 4.6vw, 4.25rem)/1.0 var(--font-display);
  --type-h1: 600 clamp(2.1rem, 3.4vw, 3.1rem)/1.06 var(--font-display);
  --type-h2: 600 clamp(1.6rem, 2.5vw, 2.3rem)/1.1 var(--font-display);
  --type-h3: 600 clamp(1.25rem, 1.7vw, 1.55rem)/1.18 var(--font-display);
  --type-h4: 600 1.125rem/1.3 var(--font-display);

  /* --- Body ------------------------------------------------- */
  --type-lead: 400 clamp(1.125rem, 1.5vw, 1.375rem)/1.55 var(--font-sans);
  --type-body: 400 1rem/1.65 var(--font-sans);
  --type-body-sm: 400 0.875rem/1.6 var(--font-sans);
  --type-caption: 400 0.8125rem/1.45 var(--font-sans);

  /* --- Eyebrow / label — small wide-tracked kicker ---------- */
  --type-eyebrow: 600 0.75rem/1 var(--font-sans);
  --type-eyebrow-sm: 600 0.6875rem/1 var(--font-sans);
  --type-mono-tag: 400 0.75rem/1.2 var(--font-mono);

  /* --- Tracking --------------------------------------------- */
  /* Geometric round → tighten only slightly at display; never crush. */
  --track-display: -0.01em;
  --track-tight: -0.005em;
  --track-normal: 0; /* @kind font */
  --track-label: 0.16em;       /* the wide-tracked eyebrow */
  --track-label-wide: 0.28em;  /* extreme spacing for covers */
  --track-mono: 0.02em;
}

/* --- Ready-to-use classes (handy in specimens & cards) ------ */
.ac-impact { font: var(--type-impact-lg); letter-spacing: 0.005em; text-transform: uppercase; color: var(--text-strong); }
.ac-impact--xl { font: var(--type-impact-xl); }
.ac-num { font: var(--type-num); letter-spacing: 0; color: var(--text-strong); }

/* Signature: section title with a short bold underline dash. */
.ac-section-title { font: var(--type-impact-md); letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-strong); }
.ac-dash::after { content: ""; display: block; width: 38px; height: 4px; background: var(--text-strong); margin-top: 14px; }

.ac-display-1 { font: var(--type-display-1); letter-spacing: var(--track-display); color: var(--text-strong); }
.ac-display-2 { font: var(--type-display-2); letter-spacing: var(--track-display); color: var(--text-strong); }
.ac-h1 { font: var(--type-h1); letter-spacing: var(--track-tight); color: var(--text-strong); }
.ac-h2 { font: var(--type-h2); letter-spacing: var(--track-tight); color: var(--text-strong); }
.ac-h3 { font: var(--type-h3); color: var(--text-strong); }
.ac-h4 { font: var(--type-h4); color: var(--text-strong); }
.ac-lead { font: var(--type-lead); color: var(--text-secondary); text-wrap: pretty; }
.ac-body { font: var(--type-body); color: var(--text-body); text-wrap: pretty; }
.ac-body-sm { font: var(--type-body-sm); color: var(--text-body); }
.ac-caption { font: var(--type-caption); color: var(--text-muted); }

.ac-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ac-eyebrow--wide { letter-spacing: var(--track-label-wide); }

.ac-mono {
  font: var(--type-mono-tag);
  letter-spacing: var(--track-mono);
  color: var(--text-muted);
}

/* The wordmark lockup in live text: light "alibi", bold "creativo". */
.ac-wordmark { font-family: var(--font-display); line-height: 0.92; letter-spacing: 0; }
.ac-wordmark .a { font-weight: 400; }
.ac-wordmark .c { font-weight: 700; }

/* spacing */
/* ============================================================
   Alibi Creativo — Spacing, layout, radius, motion
   A strict 8px grid. Architectural precision: square corners,
   hairline rules, generous editorial margins, almost no shadow.
   ============================================================ */
:root {
  /* --- Spacing scale (8px base) ----------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* --- Layout ----------------------------------------------- */
  --layout-max: 1320px;
  --layout-gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --layout-column-gap: 1.5rem;
  --slide-w: 1280px;
  --slide-h: 720px;

  /* --- Radius — architectural: square, with one soft step --- */
  --radius-0: 0px;       /* default. The brand is square.       */
  --radius-1: 2px;       /* the rare softened corner            */
  --radius-2: 4px;
  --radius-pill: 999px;  /* tags / status dots only             */

  /* --- Borders ---------------------------------------------- */
  --border-hairline: 1px solid var(--line-hairline);
  --border-rule: 1px solid var(--line-rule);
  --border-strong: 1.5px solid var(--line-strong);

  /* --- Elevation — used sparingly; paper does not float much - */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(17, 17, 16, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(17, 17, 16, 0.18);
  --shadow-lg: 0 24px 60px -28px rgba(17, 17, 16, 0.28);

  /* --- Motion — quiet, precise, no bounce ------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --hover-wash: rgba(17, 17, 16, 0.04);
}

/* base */
/* ============================================================
   Alibi Creativo — Base / reset
   Minimal, opinionated. Sets the paper, the grotesque, and the
   editorial defaults. Optional for consumers (scope-free).
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font: var(--type-body);
  letter-spacing: var(--track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection {
  background: var(--ink-900);
  color: var(--paper-50);
}

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

hr {
  border: none;
  border-top: var(--border-rule);
  margin: var(--space-6) 0;
}

img { display: block; max-width: 100%; }