/* =============================================================================
   STILL POINT PAGES, Design System  ·  spp.css
   One canonical stylesheet: tokens + components, for web, carousels, decks,
   landing pages, video cards, PDFs. Reconciles the old site tokens.css and the
   carousel spp-components.css into a single source.

   Brand is LOCKED: charcoal ground, off-white ink, ONE muted teal accent,
   Archivo Expanded display + Archivo headings + Inter body.

   This file is engineered to fail the impeccable.style anti-slop catalog on
   ZERO rules. Every choice that brushes a slop tell is annotated (SLOP-GUARD)
   so it stays deliberate. Read "(C) SPP Design System.md" for the why.
   ============================================================================= */

:root {
  /* ---- Color: surface & ink --------------------------------------------- */
  --bg:           #1A1A1A;   /* primary ground, charcoal */
  --bg-elev-1:    #222221;   /* slight lift: card / callout fills */
  --bg-elev-2:    #2A2A28;   /* second lift: hover, selected */
  --bone:         #ECE8E1;   /* deliberate light surface, the dark's counterpoint */

  --ink:          #F5F5F0;   /* primary text on dark */
  --ink-soft:     #D9D6CE;   /* secondary text */
  --muted:        #A8A39B;   /* captions, disclaimers, page numbers */
  --ink-faint:    rgba(245, 245, 240, 0.45);  /* faintest legible mark */

  /* ---- Color: accent (the ONE, muted teal, never neon) ------------------ */
  --accent:       #2A6F6B;   /* deep teal, the only chromatic color in the system */
  --accent-soft:  #5C9A95;   /* soft teal, hovers / secondary fills only */
  --accent-fg:    #F5F5F0;   /* ink on top of an accent fill */
  /* SLOP-GUARD: teal stays muted (not cyan), and is NEVER used as a glowing
     box-shadow. No "dark mode with glowing accents". */

  /* ---- Rules & hairlines ------------------------------------------------ */
  --rule:         rgba(245, 245, 240, 0.08);
  --rule-strong:  rgba(245, 245, 240, 0.18);
  --rule-accent:  rgba(42, 111, 107, 0.55);

  /* ---- Typography ------------------------------------------------------- */
  --display:  "Archivo Expanded", "Archivo", system-ui, sans-serif;  /* personality lives here */
  --heading:  "Archivo", system-ui, sans-serif;
  --body:     "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale: major-third 1.25 between display steps, never flat. */
  --fs-eyebrow:   0.75rem;   /* 12px, eyebrows (USE SPARINGLY, see SLOP-GUARD below) */
  --fs-caption:   0.8125rem; /* 13px */
  --fs-body-sm:   0.9375rem; /* 15px */
  --fs-body:      1.0625rem; /* 17px, default body */
  --fs-body-lg:   1.1875rem; /* 19px, lead paragraph */
  --fs-h4:        1.25rem;   /* 20px */
  --fs-h3:        1.5rem;    /* 24px */
  --fs-h2:        2rem;      /* 32px */
  --fs-h1:        2.75rem;   /* 44px */
  --fs-display:   4rem;      /* 64px, hero only */

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-relaxed:   1.7;       /* body default, never below 1.3 */

  --ls-eyebrow:   0.18em;    /* tracking reserved for SHORT uppercase labels only */
  --ls-wordmark:  0.16em;
  --ls-tight:    -0.01em;    /* optical tightening on display, never destructive */
  --ls-snug:     -0.015em;

  /* ---- Spacing (8pt scale) ---------------------------------------------- */
  --space-1:  0.25rem;  --space-2:  0.5rem;   --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.5rem;   --space-6:  2rem;
  --space-7:  2.5rem;   --space-8:  3rem;     --space-9:  4rem;
  --space-10: 5rem;     --space-11: 6rem;     --space-12: 8rem;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;    /* SLOP-GUARD: cards top out at 14px, never the 44px blob */
  --radius-pill: 999px; /* reserved for tags + buttons ONLY */

  /* ---- Shadows (neutral elevation, never a colored glow) ---------------- */
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.35);
  /* SLOP-GUARD: a card gets a defined edge (border) OR soft elevation (shadow),
     never both, that hairline-border-plus-wide-shadow combo is a generated tell. */

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* entering */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;  --dur-2: 240ms;  --dur-3: 400ms;  --dur-4: 640ms;
  /* SLOP-GUARD: ease only. No bounce/elastic on UI. Animate transform+opacity. */

  /* ---- Layout ----------------------------------------------------------- */
  --content-narrow: 68ch;   /* SLOP-GUARD: body capped 65-75ch, never edge-to-edge */
  --content-mid:    80ch;
  --content-page:   1120px;
  --content-wide:   1280px;
  --header-h:       72px;

  --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 2000;
}

/* =============================================================================
   BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11"; /* Inter stylistic alternates, adds the small distinction */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Focus: calm teal ring, never the default browser blue. */
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--accent); color: var(--accent-fg); }

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

/* Atmosphere: 4% fractal grain, fixed, gives the flat charcoal printed warmth.
   This is a deliberate texture, NOT a repeating-gradient stripe. */
.spp-grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: var(--z-overlay);
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================================= */
.spp-display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  margin: 0;
}
.spp-h1 { font-family: var(--heading); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin: 0; }
.spp-h2 { font-family: var(--heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin: 0; }
.spp-h3 { font-family: var(--heading); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; }
.spp-h4 { font-family: var(--heading); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-normal); margin: 0; }

.spp-body   { font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: var(--content-narrow); margin: 0; }
.spp-lead   { font-family: var(--body); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-soft); max-width: var(--content-narrow); margin: 0; }
.spp-small  { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.spp-caption{ font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-normal); }
.spp-muted  { color: var(--muted); }

/* Eyebrow / kicker. SLOP-GUARD: tracked uppercase labels are an AI editorial
   tell when repeated. RULE: at most ONE per surface, and never one stacked
   above every section heading. Prefer folding the label into structure. */
.spp-eyebrow {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0;
}

/* Emphasis: italic with a teal underline (the SPP "highlight"). Use sparingly. */
.spp-em {
  font-style: italic;
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

/* =============================================================================
   MARKS, RULES, DIVIDERS  (the only sanctioned decoration)
   ============================================================================= */
.spp-rule { display: block; width: 60px; height: 1px; background: var(--accent); border: 0; margin: var(--space-5) 0; }
.spp-rule--full { width: 100%; background: var(--rule); }
.spp-hairline { height: 1px; background: var(--rule); border: 0; }

/* =============================================================================
   BUTTONS
   ============================================================================= */
.spp-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--body); font-weight: 600; font-size: var(--fs-body-sm);
  padding: 0.7em 1.4em; border-radius: var(--radius-pill);
  border: 1px solid transparent; transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.spp-btn:active { transform: translateY(1px); }
.spp-btn--primary { background: var(--accent); color: var(--accent-fg); }
.spp-btn--primary:hover { background: var(--accent-soft); }
.spp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.spp-btn--ghost:hover { border-color: var(--accent); }
.spp-btn--link { padding: 0; border-radius: 0; background: none; color: var(--accent-soft); border-bottom: 1px solid var(--rule-accent); }

/* =============================================================================
   CARD  (flat, one elevation, never nested, never over-rounded)
   ============================================================================= */
.spp-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);          /* defined edge ... */
  border-radius: var(--radius-lg);         /* ... capped at 14px ... */
  padding: var(--space-6);                 /* SLOP-GUARD: never < 16px interior padding */
  /* ... and NO shadow here. Edge OR elevation, not both. */
}
.spp-card--raised { border-color: transparent; box-shadow: var(--shadow-2); } /* the elevation variant drops the border */
.spp-card__title { font-family: var(--heading); font-weight: 600; font-size: var(--fs-h4); margin: 0 0 var(--space-2); }
.spp-card__body  { color: var(--ink-soft); margin: 0; }
/* SLOP-GUARD: no icon-tile-stacked-above-heading. If a card needs an icon, set
   it inline (.spp-card--inline puts mark + text side by side). */
.spp-card--inline { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }

/* =============================================================================
   CALLOUT  (REFINED, this is the big anti-slop fix)
   The old SPP callout used a 3px teal LEFT border, which is impeccable's
   "side-tab accent border, the most recognizable tell of AI-generated UIs."
   Refit: a SQUARE editorial block (no radius), a restrained 2px left rule,
   and a teal label doing the signalling, reads as a pull-quote, not a widget.
   ============================================================================= */
.spp-callout {
  background: var(--bg-elev-1);
  border-left: 2px solid var(--accent);   /* restrained, on a SQUARE block (no radius) */
  border-radius: 0;                         /* SLOP-GUARD: accent edge never on a rounded corner */
  padding: var(--space-5) var(--space-6);
}
.spp-callout__label {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-caption);
  letter-spacing: 0.04em; color: var(--accent-soft);
  margin: 0 0 var(--space-2);
}
.spp-callout__body { color: var(--ink-soft); margin: 0; }

/* =============================================================================
   QUOTE  (Archivo italic + hairline, NOT an italic-serif page hero)
   ============================================================================= */
.spp-quote {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: var(--lh-snug);
  margin: 0; padding-bottom: var(--space-5);
}
.spp-quote::after { content: ""; display: block; width: 60px; height: 1px; background: var(--accent); margin-top: var(--space-5); }
.spp-attribution { font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--muted); margin-top: var(--space-3); }

/* =============================================================================
   STAT  (custom, NOT the big-number-three-supporting-stats hero template)
   ============================================================================= */
.spp-stat__num { font-family: var(--display); font-weight: 800; font-size: var(--fs-h1); color: var(--ink); line-height: 1; }
.spp-stat__label { font-size: var(--fs-caption); color: var(--muted); margin-top: var(--space-2); }
.spp-stat__source { font-size: var(--fs-caption); color: var(--ink-faint); margin-top: var(--space-1); } /* honesty: cite stats */

/* =============================================================================
   CHECKLIST  (workbook + carousel)
   ============================================================================= */
.spp-check-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.spp-check-row:last-child { border-bottom: none; }
.spp-check { width: 14px; height: 14px; border: 1.5px solid var(--accent); background: transparent; flex: 0 0 auto; margin-top: 3px; }

/* =============================================================================
   STEPS  (numbered, ONLY for genuinely sequential content)
   SLOP-GUARD: numbered display markers as decorative section labels are a tell.
   Use this ONLY when order matters (ritual steps, workbook parts).
   ============================================================================= */
.spp-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.spp-step__num { font-family: var(--display); font-weight: 800; font-size: var(--fs-h2); color: var(--accent); line-height: 1; }
.spp-step__title { font-family: var(--heading); font-weight: 600; font-size: var(--fs-h4); margin: 0 0 var(--space-1); }
.spp-step__body { color: var(--ink-soft); margin: 0; }

/* =============================================================================
   LAYOUT HELPERS
   ============================================================================= */
.spp-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.spp-stack--sm { gap: var(--space-3); }
.spp-stack--lg { gap: var(--space-8); }
.spp-row { display: flex; align-items: center; gap: var(--space-4); }
.spp-row--between { justify-content: space-between; }
.spp-shell { width: 100%; max-width: var(--content-page); margin-inline: auto; padding-inline: var(--space-5); }
.spp-section { padding-block: var(--space-11); }      /* SLOP-GUARD: generous BETWEEN sections, */
.spp-section--tight { padding-block: var(--space-8); } /* tight WITHIN groups, never one value everywhere */

/* =============================================================================
   CAROUSEL / SOCIAL CANVAS  (9:16 default; never 16:9 for SPP)
   ============================================================================= */
.spp-canvas-9x16, .spp-canvas-4x5, .spp-canvas-1x1 {
  background: var(--bg); color: var(--ink); font-family: var(--body);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8% 9%;
}
.spp-canvas-9x16 { aspect-ratio: 9 / 16; width: 1080px; }
.spp-canvas-4x5  { aspect-ratio: 4 / 5;  width: 1080px; }
.spp-canvas-1x1  { aspect-ratio: 1 / 1;  width: 1080px; }
.spp-canvas--light { background: var(--bone); color: var(--bg); } /* deliberate light slide */

.spp-footmark { position: absolute; right: 6%; bottom: 4%; font-weight: 700; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }