/* Stria MEDia — combined design-system stylesheet (built 20261018a) */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-200-800-normal-latin-ext.woff2?v=20261018a") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-200-800-normal-latin.woff2?v=20261018a") 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}
@font-face{font-family:"Space Mono";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/space-mono-400-italic-latin.woff2?v=20261018a") 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}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-mono-400-normal-latin.woff2?v=20261018a") 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}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-mono-700-normal-latin.woff2?v=20261018a") 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}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:101.73%;ascent-override:105.18%;descent-override:29.49%;line-gap-override:0%}

/* fonts */
/* Stria MEDia type system.
   Two faces, tightly used — the system reads systematic, not decorative.
     Manrope      wordmark, display, headings AND body. Weight carries hierarchy (200–800).
     Space Mono   the data / index / credential voice. Caps, wide tracking. */
:root {
  --font-display: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --font-sans: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --font-subline: var(--font-mono);
  --font-body: var(--font-sans);
  --font-heading: var(--font-display);
  --font-wordmark: var(--font-display);
}

/* colors */
/* Stria MEDia palette — the Stria rebrand.
   One deep-red spectrum on a burgundy ground, with clean warm-white accents.
     #3D0812  burgundy — THE ground: header, hero, footer, the identity's home
     #8F1226  fiber    — striations behind type (red-700 neighbourhood)
     #FF3546  crimson  — glow, live states, fibers on paper
     #E01733  red      — CTAs, links
     #5A0D19  maroon   — the deep ground the hero lives on
     #14060A  ink      — the near-black red-black base
     #FBF7F7  paper    — the warm-white light ground
   Semantic aliases live in themes.css. */
:root {
  /* ---- the anchors ---- */
  --brand-crimson: #ff3546;
  --brand-red: #e01733;
  --brand-burgundy: #3d0812;
  --brand-maroon: #5a0d19;
  --brand-ink: #14060a;
  --brand-paper: #fbf7f7;

  /* ---- red ramp: crimson (400) through maroon (900), anchored on 500 = brand-red ---- */
  --red-50: #fff1f2;
  --red-100: #ffdfe2;
  --red-200: #ffc0c7;
  --red-300: #ff8f9c;
  --red-400: #ff3546;  /* crimson — the glow highlight */
  --red-500: #e01733;
  --red-600: #c00f2b;
  --red-700: #9a0c25;
  --red-800: #74101f;   /* raised maroon */
  --red-900: #5a0d19;   /* maroon — the deep ground */
  --red-950: #33060e;

  /* ---- neutrals: warm red-tinted, running from paper to near-black ---- */
  --neutral-0: #ffffff;
  --neutral-25: #fbf7f7;
  --neutral-50: #f7f0f1;
  --neutral-100: #efe5e6;
  --neutral-200: #e0d1d3;
  --neutral-300: #c8b3b6;
  --neutral-400: #a0868a;
  --neutral-500: #7a5d61;
  --neutral-600: #5a4245;
  --neutral-700: #422f32;
  --neutral-800: #2e2023;
  --neutral-900: #1f1417;
  --neutral-950: #140a0c;

  /* ---- ink surfaces: the burgundy ground the brand lives on ---- */
  --ink-base: #2a050d;    /* deepest — behind the page */
  --ink-page: #3d0812;    /* THE ground: deep burgundy */
  --ink-card: #4d0c18;    /* card fill */
  --ink-raised: #5d1121;  /* raised */
  --ink-line: #6b1828;    /* hairline on burgundy */
  --ink-black: #0b0406;   /* true near-black, for the on-black lockup ground */

  /* ---- status: derived, kept quiet so crimson stays the brand's only loud color ---- */
  --green-100: #dcefe5;
  --green-500: #2f9e6f;
  --green-600: #217a55;
  --amber-100: #f8ecd6;
  --amber-500: #c8891f;
  --amber-600: #a5701a;
}

/* typography */
/* Stria MEDia type scale — Manrope for everything, Space Mono for data.
   Hierarchy comes from size + weight: display runs 200 against an 800 emphasis line,
   headings are semibold, body is regular, labels are caps mono. */
:root {
  /* ---- sizes ---- */
  --text-wordmark: 3.5rem;   /* 56 — lockup reference size */
  --text-display: 4.25rem;   /* 68 */
  --text-h1: 3rem;           /* 48 */
  --text-h2: 2.25rem;        /* 36 */
  --text-h3: 1.625rem;       /* 26 */
  --text-h4: 1.25rem;        /* 20 */
  --text-body-lg: 1.125rem;  /* 18 */
  --text-body: 1rem;         /* 16 */
  --text-body-sm: 0.875rem;  /* 14 */
  --text-caption: 0.8125rem; /* 13 */
  --text-index: 0.75rem;     /* 12 — mono index labels */
  --text-subline: 0.6875rem; /* 11 — mono subline */

  /* ---- line heights ---- */
  --leading-display: 1.02;
  --leading-heading: 1.1;
  --leading-snug: 1.28;
  --leading-body: 1.6;
  --leading-tight: 1.35;

  /* ---- weights. Manrope carries the full 200–800 range. ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- tracking ---- */
  --tracking-wordmark: -0.02em;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body: 0em;
  --tracking-index: 0.12em;
  --tracking-subline: 0.24em;

  /* ---- composite roles ---- */
  --type-wordmark: var(--weight-semibold) var(--text-wordmark) / 1 var(--font-display);
  --type-subline: var(--weight-regular) var(--text-subline) / 1 var(--font-subline);
  --type-display: var(--weight-semibold) var(--text-display) / var(--leading-display) var(--font-display);
  --type-h1: var(--weight-semibold) var(--text-h1) / var(--leading-heading) var(--font-display);
  --type-h2: var(--weight-semibold) var(--text-h2) / var(--leading-heading) var(--font-display);
  --type-h3: var(--weight-medium) var(--text-h3) / var(--leading-snug) var(--font-display);
  --type-h4: var(--weight-semibold) var(--text-h4) / var(--leading-snug) var(--font-sans);
  --type-body-lg: var(--weight-regular) var(--text-body-lg) / var(--leading-body) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-body) / var(--leading-body) var(--font-sans);
  --type-body-sm: var(--weight-regular) var(--text-body-sm) / var(--leading-tight) var(--font-sans);
  --type-caption: var(--weight-regular) var(--text-caption) / var(--leading-tight) var(--font-sans);
  --type-index: var(--weight-regular) var(--text-index) / 1.2 var(--font-mono);
  --type-label: var(--weight-medium) var(--text-body-sm) / 1.3 var(--font-sans);
  --type-eyebrow: var(--weight-regular) var(--text-subline) / 1.2 var(--font-mono);
}

/* spacing */
:root {
  --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.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 1.75rem;  /* 28 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: var(--space-6);
  --section-y: var(--space-24);
  --section-y-sm: var(--space-16);
}

/* shape */
/* Shape + surface language — the Stria rebrand: soft radii, glass, inner glow.
   Never pill on buttons, never sharp. Glass and glow ARE the look now. */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* inputs, buttons */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 22px;   /* glass panels, media */
  --radius-2xl: 30px;  /* hero surfaces, big glass */
  --radius-full: 999px; /* badges, avatars, dots — never buttons */

  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- liquid glass: the core surface treatment. Heavy blur, lit edges, real depth. ---- */
  --glass-blur: saturate(180%) blur(28px); /* @kind other */
  --glass-blur-strong: saturate(200%) blur(48px); /* @kind other */
  /* the standard frosted panel: fill + hairline + lit top edge + lift */
  --glass-shadow: 0 28px 70px -24px rgba(20, 2, 8, 0.7); /* @kind other */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18); /* @kind other */
  --glass-edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.06); /* @kind other */
  /* the full liquid-glass panel, one token */
  --glass-panel: var(--glass-edge), var(--glass-shadow); /* @kind other */

  /* ---- glow: subtle inner glow, restrained and premium ---- */
  --glow-inner: inset 0 1px 24px -6px rgba(255, 53, 70, 0.35); /* @kind other */
  --glow-crimson: 0 0 24px -2px rgba(255, 53, 70, 0.45); /* @kind other */
  --glow-crimson-soft: 0 0 40px -8px rgba(255, 53, 70, 0.35); /* @kind other */
  --glow-text: 0 0 18px rgba(255, 53, 70, 0.5); /* @kind other */

  --shadow-inset-hairline: inset 0 0 0 1px rgba(255, 143, 156, 0.14);
  --shadow-red: 0 12px 36px -12px rgba(224, 23, 51, 0.45);

  --blur-panel: var(--glass-blur); /* @kind other */

  /* ---- striations: the signature motif. Smooth flowing fibers. ---- */
  --stria-stroke: 2px;
  --stria-gap: 14px;      /* rhythm between fibers */
  --stria-glow: var(--glow-crimson-soft); /* @kind other */
}

/* motion */
:root {
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */

  --duration-instant: 90ms; /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-reveal: 900ms; /* @kind other */
  --duration-cinematic: 1200ms; /* @kind other */
  --stagger-step: 110ms; /* @kind other */

  --transition-control: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard); /* @kind other */

  --reveal-rise: 34px; /* @kind other */
  --reveal-scale: 0.985; /* @kind other */
  --parallax-depth: 40px; /* @kind other */
  --press-scale: 0.985; /* @kind other */
  --lift-y: -2px; /* @kind other */

  /* the signature: one striation fiber breathes a slow crimson glow */
  --stria-pulse-duration: 3200ms; /* @kind other */
  --stria-drift-duration: 14s; /* @kind other */
}

@keyframes stria-pulse {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 4px rgba(255, 53, 70, 0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 53, 70, 0.7)); }
}

/* themes */
/* Semantic aliases — the Stria rebrand.
   The site runs a burgundy glass hero over a clean light body, so LIGHT IS THE DEFAULT theme
   (body sections, docs, cards). [data-theme="dark"] is the deep-red glass ground used by the
   header, hero and any cinematic dark section. */
:root,
[data-theme="light"] {
  --bg-page: var(--brand-paper);
  --bg-sunken: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-inverse: var(--ink-page);
  --surface-tint: var(--red-50);
  --surface-black: var(--ink-black);

  --text-primary: var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-25);
  --text-brand: var(--red-600);
  --text-accent: var(--red-500);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--red-300);

  --brand-primary: var(--brand-red);
  --brand-primary-hover: var(--red-600);
  --brand-primary-press: var(--red-700);
  --brand-soft: var(--red-50);
  --brand-soft-hover: var(--red-100);
  --on-brand: #ffffff;

  --accent: var(--brand-red);
  --accent-hover: var(--red-600);
  --accent-press: var(--red-700);
  --accent-soft: var(--red-50);
  --on-accent: #ffffff;

  --success: var(--green-600);
  --success-soft: var(--green-100);
  --warning: var(--amber-600);
  --warning-soft: var(--amber-100);
  --danger: var(--red-600);
  --danger-soft: var(--red-50);

  --link: var(--red-600);
  --link-hover: var(--red-700);

  /* liquid glass: on light, a warm-white frost with a lit top edge */
  --glass-fill: rgba(255, 255, 255, 0.6);
  --glass-fill-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-highlight: rgba(255, 255, 255, 0.85);

  --overlay: rgba(26, 6, 12, 0.4);
  --scrim: linear-gradient(to top, rgba(26, 6, 12, 0.72), rgba(26, 6, 12, 0)); /* @kind other */

  --shadow-xs: 0 1px 2px rgba(51, 6, 14, 0.06);
  --shadow-sm: 0 1px 3px rgba(51, 6, 14, 0.08), 0 1px 2px -1px rgba(51, 6, 14, 0.05);
  --shadow-md: 0 6px 16px -4px rgba(51, 6, 14, 0.1), 0 2px 5px -2px rgba(51, 6, 14, 0.06);
  --shadow-lg: 0 16px 40px -10px rgba(51, 6, 14, 0.14), 0 4px 10px -4px rgba(51, 6, 14, 0.07);
  --shadow-xl: 0 32px 70px -18px rgba(51, 6, 14, 0.18), 0 8px 18px -8px rgba(51, 6, 14, 0.08);
  --focus-ring: 0 0 0 3px rgba(224, 23, 51, 0.4);
}

[data-theme="dark"] {
  --bg-page: var(--ink-page);
  --bg-sunken: var(--ink-base);
  --surface-card: var(--ink-card);
  --surface-raised: var(--ink-raised);
  --surface-inverse: var(--neutral-25);
  --surface-tint: #2e0b14;
  --surface-black: var(--ink-black);

  --text-primary: #fdf2f3;
  --text-secondary: #e2b8bd;
  --text-muted: #b98a90;
  --text-inverse: var(--ink-page);
  --text-brand: var(--red-300);
  --text-accent: var(--brand-crimson);

  --border-subtle: var(--ink-line);
  --border-strong: #63202e;
  --border-brand: var(--red-700);

  --brand-primary: var(--brand-crimson);
  --brand-primary-hover: #ff5262;
  --brand-primary-press: var(--red-500);
  --brand-soft: #3a0f19;
  --brand-soft-hover: #4a141f;
  --on-brand: #1a060c;

  --accent: var(--brand-crimson);
  --accent-hover: #ff5262;
  --accent-press: var(--red-500);
  --accent-soft: #3a0f19;
  --on-accent: #1a060c;

  --success: var(--green-500);
  --success-soft: #113023;
  --warning: var(--amber-500);
  --warning-soft: #33260f;
  --danger: var(--brand-crimson);
  --danger-soft: #3a0f19;

  --link: var(--red-300);
  --link-hover: #ffc0c7;

  /* liquid glass: on burgundy, a deep-red frost with a lit top edge */
  --glass-fill: rgba(61, 8, 22, 0.55);
  --glass-fill-strong: rgba(77, 12, 24, 0.72);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-highlight: rgba(255, 255, 255, 0.18);

  --overlay: rgba(6, 2, 3, 0.68);
  --scrim: linear-gradient(to top, rgba(6, 2, 3, 0.85), rgba(6, 2, 3, 0)); /* @kind other */

  --shadow-xs: 0 1px 2px rgba(4, 1, 2, 0.55);
  --shadow-sm: 0 1px 3px rgba(4, 1, 2, 0.6);
  --shadow-md: 0 6px 18px -4px rgba(4, 1, 2, 0.65);
  --shadow-lg: 0 16px 40px -10px rgba(4, 1, 2, 0.7);
  --shadow-xl: 0 32px 70px -18px rgba(4, 1, 2, 0.75);
  --focus-ring: 0 0 0 3px rgba(255, 53, 70, 0.55);
}

/* base */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; color: var(--text-primary); text-wrap: balance; }
h1 { font: var(--type-h1); letter-spacing: var(--tracking-display); }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-heading); }
h3 { font: var(--type-h3); letter-spacing: var(--tracking-heading); }
h4 { font: var(--type-h4); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
small { font: var(--type-caption); color: var(--text-secondary); }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
a { color: var(--link); text-decoration-color: color-mix(in oklab, var(--link) 35%, transparent); text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
::selection { background: var(--red-600); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* The subline utility — Space Mono caps at wide tracking. Optical fix: trailing letter-space off. */
.stria-subline { font: var(--type-subline); letter-spacing: var(--tracking-subline); text-transform: uppercase; text-indent: var(--tracking-subline); }
.stria-index { font: var(--type-index); letter-spacing: var(--tracking-index); text-transform: uppercase; }