/* =============================================================================
   Parallel World — Foundations
   Colors, type, spacing, radii, shadows, motion
   ============================================================================= */

/* ---------- Fonts (Google Fonts) -------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700&family=Funnel+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Brand colors (from the brand cheatsheet) -------------------- */
  --pw-off-black:   #1a1a1a; /* RGB 26/26/26 — primary surface, type */
  --pw-white:       #ffffff; /* RGB 255/255/255 */
  --pw-violet:      #9fbaff; /* RGB 159/186/255 — the "violet" accent (a periwinkle blue) */

  /* ---------- Tonal extensions (derived for UI need) ---------------------- */
  --pw-ink-900:     #0e0e0e; /* deeper black for hero / quote / footer panels */
  --pw-ink-800:     #1a1a1a; /* same as off-black, semantic alias            */
  --pw-ink-700:     #2a2a2a; /* card surfaces on dark mode                   */
  --pw-ink-600:     #3a3a3a; /* hairline borders on dark                     */
  --pw-ink-500:     #6b6b6b; /* mid-grey type, muted labels                  */
  --pw-ink-400:     #9a9a9a; /* tertiary type                                */
  --pw-ink-300:     #c9c9c9; /* divider on light                             */
  --pw-ink-200:     #e6e6e6; /* divider on light, soft fill                  */
  --pw-ink-100:     #f3f3f3; /* page-tint surface                            */
  --pw-paper:       #fafafa; /* default light page background                */

  --pw-violet-700:  #5f7fdc; /* hover / pressed state of violet              */
  --pw-violet-600:  #7a98ed; /* active violet                                */
  --pw-violet-500:  #9fbaff; /* base violet                                  */
  --pw-violet-300:  #c8d6ff; /* hover wash, soft fill                        */
  --pw-violet-100:  #eef2ff; /* lightest tint, used for highlight backgrounds */

  /* ---------- Semantic foreground / background --------------------------- */
  --pw-bg:          var(--pw-paper);
  --pw-bg-elevated: var(--pw-white);
  --pw-bg-inverse:  var(--pw-ink-900);
  --pw-bg-accent:   var(--pw-violet);

  --pw-fg:          var(--pw-off-black);
  --pw-fg-muted:    var(--pw-ink-500);
  --pw-fg-subtle:   var(--pw-ink-400);
  --pw-fg-inverse:  var(--pw-white);
  --pw-fg-accent:   var(--pw-violet);
  --pw-fg-accent-on-dark: var(--pw-violet);

  --pw-border:      var(--pw-ink-200);
  --pw-border-strong: var(--pw-ink-300);
  --pw-border-inverse: var(--pw-ink-600);

  /* ---------- Type families ---------------------------------------------- */
  --pw-font-display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --pw-font-sans:    "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --pw-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type weights ----------------------------------------------- */
  --pw-fw-light:    300;
  --pw-fw-regular:  400;
  --pw-fw-medium:   500;
  --pw-fw-semibold: 600;
  --pw-fw-bold:     700;
  --pw-fw-xbold:    800;

  /* ---------- Type scale (16px base, modular ~1.25) ----------------------- */
  --pw-fs-12: 0.75rem;
  --pw-fs-13: 0.8125rem;
  --pw-fs-14: 0.875rem;
  --pw-fs-15: 0.9375rem;
  --pw-fs-16: 1rem;
  --pw-fs-18: 1.125rem;
  --pw-fs-20: 1.25rem;
  --pw-fs-24: 1.5rem;
  --pw-fs-28: 1.75rem;
  --pw-fs-32: 2rem;
  --pw-fs-40: 2.5rem;
  --pw-fs-48: 3rem;
  --pw-fs-56: 3.5rem;
  --pw-fs-72: 4.5rem;
  --pw-fs-96: 6rem;
  --pw-fs-128: 8rem;

  /* ---------- Tracking (letter-spacing) ----------------------------------- */
  --pw-tracking-display: -0.02em;   /* tight display headlines                */
  --pw-tracking-tight:   -0.01em;
  --pw-tracking-normal:   0em;
  --pw-tracking-wide:     0.08em;
  --pw-tracking-eyebrow:  0.22em;   /* canonical "T H E P R O B L E M" eyebrow */
  --pw-tracking-section-num: 0.32em;

  /* ---------- Line heights ----------------------------------------------- */
  --pw-lh-tight:   1.04;  /* display                                          */
  --pw-lh-snug:    1.18;  /* large headers                                    */
  --pw-lh-normal:  1.45;  /* body                                             */
  --pw-lh-loose:   1.6;   /* long-form                                        */

  /* ---------- Spacing (4-step base) -------------------------------------- */
  --pw-space-0:  0;
  --pw-space-1:  4px;
  --pw-space-2:  8px;
  --pw-space-3:  12px;
  --pw-space-4:  16px;
  --pw-space-5:  20px;
  --pw-space-6:  24px;
  --pw-space-8:  32px;
  --pw-space-10: 40px;
  --pw-space-12: 48px;
  --pw-space-16: 64px;
  --pw-space-20: 80px;
  --pw-space-24: 96px;
  --pw-space-32: 128px;

  /* ---------- Radii (small, geometric — almost no roundness) -------------- */
  --pw-radius-0:    0;
  --pw-radius-xs:   2px;
  --pw-radius-sm:   4px;
  --pw-radius-md:   8px;
  --pw-radius-lg:   12px;
  --pw-radius-pill: 999px;

  /* ---------- Borders ---------------------------------------------------- */
  --pw-border-w-hair: 1px;
  --pw-border-w-thick: 2px;

  /* ---------- Shadows (used sparingly — brand is mostly flat) ------------ */
  --pw-shadow-none:  none;
  --pw-shadow-1: 0 1px 0 rgba(26,26,26,0.04);
  --pw-shadow-2: 0 4px 12px rgba(26,26,26,0.06);
  --pw-shadow-3: 0 12px 40px rgba(26,26,26,0.08);
  --pw-shadow-pop: 0 30px 80px rgba(26,26,26,0.18);

  /* ---------- Motion ----------------------------------------------------- */
  --pw-ease:        cubic-bezier(0.22, 1, 0.36, 1);  /* gentle out            */
  --pw-ease-in:     cubic-bezier(0.32, 0, 0.67, 0);
  --pw-dur-fast:    160ms;
  --pw-dur-base:    240ms;
  --pw-dur-slow:    420ms;

  /* ---------- Layout ----------------------------------------------------- */
  --pw-container:   1280px;
  --pw-container-narrow: 920px;
  --pw-gutter:      clamp(20px, 4vw, 64px);
}

/* ===========================================================================
   Semantic type styles
   --------------------------------------------------------------------------- */

/* Display — Funnel Display, big editorial headlines.
   "Big Headlines" on the cheatsheet. */
.pw-display-1, h1.pw-display { 
  font-family: var(--pw-font-display);
  font-weight: var(--pw-fw-regular);
  font-size: clamp(48px, 8vw, var(--pw-fs-128));
  line-height: var(--pw-lh-tight);
  letter-spacing: var(--pw-tracking-display);
}
.pw-display-2 { 
  font-family: var(--pw-font-display);
  font-weight: var(--pw-fw-regular);
  font-size: clamp(40px, 6vw, var(--pw-fs-96));
  line-height: var(--pw-lh-tight);
  letter-spacing: var(--pw-tracking-display);
}

/* H1–H4 — semantic page-level. */
.pw-h1 {
  font-family: var(--pw-font-display);
  font-weight: var(--pw-fw-regular);
  font-size: clamp(36px, 5vw, var(--pw-fs-72));
  line-height: var(--pw-lh-snug);
  letter-spacing: var(--pw-tracking-display);
}
.pw-h2 {
  font-family: var(--pw-font-display);
  font-weight: var(--pw-fw-regular);
  font-size: clamp(28px, 3.5vw, var(--pw-fs-48));
  line-height: var(--pw-lh-snug);
  letter-spacing: var(--pw-tracking-tight);
}
.pw-h3 {
  /* "Subheaders" on the cheatsheet — Funnel Display Light */
  font-family: var(--pw-font-display);
  font-weight: var(--pw-fw-light);
  font-size: clamp(24px, 2.5vw, var(--pw-fs-32));
  line-height: var(--pw-lh-snug);
  letter-spacing: var(--pw-tracking-tight);
}
.pw-h4 {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-xbold);
  font-size: var(--pw-fs-20);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Body */
.pw-body-lg, .pw-lede {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-regular);
  font-size: var(--pw-fs-20);
  line-height: var(--pw-lh-normal);
}
.pw-body {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-regular);
  font-size: var(--pw-fs-16);
  line-height: var(--pw-lh-normal);
}
.pw-body-sm {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-regular);
  font-size: var(--pw-fs-14);
  line-height: var(--pw-lh-normal);
}

/* "Body Headers" — Funnel Sans ExtraBold */
.pw-body-header {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-xbold);
  font-size: var(--pw-fs-16);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Eyebrow — canonical "T H E P R O B L E M" letter-spaced eyebrow.
   The signature brand motif. */
.pw-eyebrow {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-semibold);
  font-size: var(--pw-fs-12);
  line-height: 1;
  letter-spacing: var(--pw-tracking-eyebrow);
  text-transform: uppercase;
}
.pw-eyebrow--lg {
  font-size: var(--pw-fs-14);
  letter-spacing: var(--pw-tracking-eyebrow);
}

/* Section number — "0 1", "0 2" with extra-wide tracking */
.pw-section-num {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-semibold);
  font-size: var(--pw-fs-12);
  letter-spacing: var(--pw-tracking-section-num);
  text-transform: uppercase;
}

/* Stat (big number) */
.pw-stat {
  font-family: var(--pw-font-display);
  font-weight: var(--pw-fw-regular);
  font-size: clamp(48px, 7vw, var(--pw-fs-128));
  line-height: 0.95;
  letter-spacing: var(--pw-tracking-display);
}

/* Caption / meta */
.pw-caption {
  font-family: var(--pw-font-sans);
  font-weight: var(--pw-fw-regular);
  font-size: var(--pw-fs-12);
  line-height: 1.4;
  color: var(--pw-fg-muted);
}

/* Code / mono / data labels */
.pw-mono {
  font-family: var(--pw-font-mono);
  font-size: var(--pw-fs-13);
  letter-spacing: 0.01em;
}

/* ===========================================================================
   Element defaults — opt-in via .pw-prose container
   --------------------------------------------------------------------------- */
.pw-prose {
  font-family: var(--pw-font-sans);
  color: var(--pw-fg);
  font-size: var(--pw-fs-16);
  line-height: var(--pw-lh-normal);
}
.pw-prose h1 { font: var(--pw-fw-regular) clamp(36px, 5vw, var(--pw-fs-72))/1.05 var(--pw-font-display); letter-spacing: -0.02em; margin: 0 0 0.5em; }
.pw-prose h2 { font: var(--pw-fw-regular) clamp(28px, 3.5vw, var(--pw-fs-48))/1.1 var(--pw-font-display); letter-spacing: -0.015em; margin: 1.5em 0 0.4em; }
.pw-prose h3 { font: var(--pw-fw-light) var(--pw-fs-28)/1.2 var(--pw-font-display); letter-spacing: -0.01em; margin: 1.2em 0 0.4em; }
.pw-prose h4 { font: var(--pw-fw-xbold) var(--pw-fs-18)/1.3 var(--pw-font-sans); margin: 1em 0 0.3em; }
.pw-prose p  { margin: 0 0 1em; max-width: 65ch; text-wrap: pretty; }
.pw-prose a  { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pw-prose a:hover { color: var(--pw-violet-700); }
.pw-prose hr { border: none; border-top: 1px solid var(--pw-border); margin: 2em 0; }
.pw-prose strong { font-weight: var(--pw-fw-xbold); }