/* ============================================================================
   Westover Labs — SHARED FRAMEWORK SKIN for the Forest / Ocean / Spark brand.

   This is the START of a small, reusable design framework, not a per-page
   stylesheet. It is the ONE place for layout + components + responsive
   utilities; page files stay THIN and only link this skin plus the token SoT.
   Consumed today by westoverlabs.eu (umbrella home /, the three pillar worlds
   /forest/ /ocean/ /spark/, every WL business sub-page, and the presentation
   landing pages) and DESIGNED to be adopted next by westover.dev — same tokens,
   same components, one responsive source of truth. Keep new shared pieces HERE,
   never as per-page hacks.

   Palette tokens are the single source of truth in
   ./westover-labs-brand.css (vendored here from the repo SoT
   design-systems/tokens/westover-labs-brand.css — regenerate from there when
   the design-systems pipeline is wired into static-sites; do NOT fork the hexes).
   This file only defines LAYOUT + COMPONENTS + RESPONSIVE behaviour on top of
   those tokens.

   Responsive contract (see the "responsive framework" section at the foot of
   this file): fluid type via clamp(), mobile-first stacking, ≥44px tap targets,
   and NO horizontal overflow at any width down to 320px. Verify changes on a
   ~390px viewport.

   Brand rules honoured (docs/design/brand-system.md §6):
   - No pure-white grounds. Light ground is parchment (#F3EFE3).
   - Marks are single-colour line art: black-on-white masters ride parchment via
     mix-blend-mode:multiply; the white-on-black wave rides dark grounds via
     mix-blend-mode:screen.
   - One accent, with intent: fire (#FF7A1A) is the comms / call-to-action spark.
   - Forest green = wisdom, never eco.
   ============================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Site-derived surfaces layered on the brand palette (no new hues). */
  --wl-forest-2:      #245f4c;                 /* lighter forest for hover/edges */
  --wl-parchment-2:   #ECE6D5;                 /* slightly deeper paper for cards */
  --wl-parchment-3:   #E2DAC5;                 /* rule / border on parchment */
  --wl-ink-soft:      #35463f;                 /* secondary ink on parchment */
  --wl-ink-faint:     #5c6b64;                 /* tertiary ink on parchment */
  --wl-on-dark-2:     #C4D3CC;                 /* secondary text on dark grounds */
  --wl-on-dark-3:     #8fa39b;                 /* tertiary text on dark grounds */
  --wl-hair-dark:     rgba(243,239,227,0.14);  /* hairline on dark grounds */
  --wl-hair-dark-2:   rgba(243,239,227,0.09);
  --wl-shadow:        0 24px 60px rgba(14,36,28,0.16);
  --wl-shadow-dark:   0 30px 80px rgba(0,0,0,0.45);
  --wl-maxw: 1120px;
  --wl-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --wl-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

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

body {
  font-family: var(--wl-font);
  background: var(--wl-parchment);
  color: var(--wl-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--wl-link); }

/* ---- layout helpers ---- */
.wl-wrap { max-width: var(--wl-maxw); margin: 0 auto; padding: 0 1.5rem; }
.wl-wrap--narrow { max-width: 780px; }
.wl-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.wl-section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.wl-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.wl-eyebrow::before {
  content: ""; width: 22px; height: 2px; background: currentColor; opacity: 0.6;
}
.wl-h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
.wl-h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.wl-h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.wl-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; max-width: 42ch; }
.wl-prose { font-size: 1.02rem; line-height: 1.75; max-width: 62ch; }
.wl-prose p + p { margin-top: 1rem; }

/* ---- top nav: consistent dark frame across every ground ---- */
.wl-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,36,28,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wl-hair-dark);
}
.wl-nav-inner {
  max-width: var(--wl-maxw); margin: 0 auto; padding: 0 1.5rem;
  height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wl-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.wl-brand-badge {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--wl-parchment); display: grid; place-items: center; overflow: hidden;
}
.wl-brand-badge img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.wl-brand-name { color: var(--wl-parchment); font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; }
.wl-nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.wl-nav-links a {
  font-size: 0.86rem; font-weight: 500; color: var(--wl-on-dark-2);
  text-decoration: none; transition: color 0.15s; white-space: nowrap;
}
.wl-nav-links a:hover { color: var(--wl-parchment); }
.wl-nav-links a.is-forest:hover { color: var(--wl-ocean-foam); }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 0.34rem; vertical-align: middle; }
.wl-dot--forest { background: var(--wl-forest-2); }
.wl-dot--ocean  { background: var(--wl-ocean); }
.wl-dot--spark  { background: var(--wl-spark-fire); }
.wl-nav-lang { color: var(--wl-on-dark-3) !important; font-size: 0.8rem !important; }
.wl-nav-cta {
  color: var(--wl-forest-ink) !important; background: var(--wl-spark-fire);
  padding: 0.42rem 0.95rem; border-radius: 7px; font-weight: 700 !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.wl-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,26,0.35); color: var(--wl-forest-ink) !important; }

/* ---- buttons ---- */
.wl-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.82rem 1.5rem; border-radius: 8px; font-size: 0.95rem; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.wl-btn--spark { background: var(--wl-spark-fire); color: var(--wl-forest-ink); }
.wl-btn--spark:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,122,26,0.34); }
.wl-btn--forest { background: var(--wl-forest); color: var(--wl-parchment); }
.wl-btn--forest:hover { transform: translateY(-1px); background: var(--wl-forest-2); }
.wl-btn--ghost-dark { background: transparent; color: var(--wl-parchment); border-color: var(--wl-hair-dark); }
.wl-btn--ghost-dark:hover { border-color: var(--wl-on-dark-2); }
.wl-btn--ghost-light { background: transparent; color: var(--wl-ink); border-color: var(--wl-parchment-3); }
.wl-btn--ghost-light:hover { border-color: var(--wl-ink-faint); }

/* ---- ground modifiers: a section can flip to a world's dark ground ---- */
.wl-ground-forest { background: var(--wl-forest-ink); color: var(--wl-parchment); }
.wl-ground-ocean  { background: var(--wl-ocean-abyss); color: var(--wl-parchment); }
.wl-ground-spark  { background: linear-gradient(160deg, #12100c 0%, var(--wl-forest-ink) 55%, #06121c 100%); color: var(--wl-parchment); }
.wl-ground-forest .wl-h1, .wl-ground-forest .wl-h2, .wl-ground-forest .wl-h3,
.wl-ground-ocean  .wl-h1, .wl-ground-ocean  .wl-h2, .wl-ground-ocean  .wl-h3,
.wl-ground-spark  .wl-h1, .wl-ground-spark  .wl-h2, .wl-ground-spark  .wl-h3 { color: var(--wl-parchment); }
.wl-ground-forest .wl-lead, .wl-ground-ocean .wl-lead, .wl-ground-spark .wl-lead,
.wl-ground-forest .wl-prose, .wl-ground-ocean .wl-prose, .wl-ground-spark .wl-prose { color: var(--wl-on-dark-2); }

/* ---- the three-world chooser (cards) ---- */
.wl-worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.wl-world {
  position: relative; display: flex; flex-direction: column; text-decoration: none;
  border-radius: 16px; padding: 1.9rem 1.7rem 1.7rem; overflow: hidden; isolation: isolate;
  min-height: 300px; color: var(--wl-parchment);
  transition: transform 0.18s, box-shadow 0.18s;
}
.wl-world:hover { transform: translateY(-4px); box-shadow: var(--wl-shadow-dark); }
.wl-world--forest { background: linear-gradient(165deg, var(--wl-forest) 0%, var(--wl-forest-ink) 100%); }
.wl-world--ocean  { background: linear-gradient(165deg, var(--wl-ocean) 0%, var(--wl-ocean-abyss) 100%); }
.wl-world--spark  { background: linear-gradient(165deg, #b8500f 0%, #1a130b 100%); }
.wl-world-el { font-size: 1.9rem; line-height: 1; }
.wl-world-kicker { margin-top: 1.1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.wl-world h3 { margin-top: 0.4rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--wl-parchment); }
.wl-world p { margin-top: 0.7rem; font-size: 0.94rem; line-height: 1.6; color: rgba(243,239,227,0.86); }
.wl-world-go { margin-top: auto; padding-top: 1.2rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.4rem; }
.wl-world--forest .wl-world-go { color: var(--wl-ocean-foam); }
.wl-world--ocean  .wl-world-go { color: var(--wl-ocean-foam); }
.wl-world--spark  .wl-world-go { color: var(--wl-spark-edge); }

/* ---- generic card grids ---- */
.wl-grid { display: grid; gap: 1.1rem; margin-top: 2.5rem; }
.wl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wl-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wl-card {
  background: var(--wl-parchment-2); border: 1px solid var(--wl-parchment-3);
  border-radius: 14px; padding: 1.7rem 1.6rem; transition: transform 0.15s, box-shadow 0.15s;
}
.wl-card:hover { transform: translateY(-3px); box-shadow: var(--wl-shadow); }
.wl-card h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.55rem; }
.wl-card p { font-size: 0.95rem; color: var(--wl-ink-soft); line-height: 1.62; }
.wl-card-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.7rem; display: block; }
.wl-tag-forest { color: var(--wl-forest); }
.wl-tag-ocean  { color: var(--wl-ocean); }
.wl-tag-spark  { color: var(--wl-spark-fire); }

/* dark-ground card variant */
.wl-ground-forest .wl-card, .wl-ground-ocean .wl-card, .wl-ground-spark .wl-card {
  background: rgba(243,239,227,0.05); border-color: var(--wl-hair-dark);
}
.wl-ground-forest .wl-card h3, .wl-ground-ocean .wl-card h3, .wl-ground-spark .wl-card h3 { color: var(--wl-parchment); }
.wl-ground-forest .wl-card p, .wl-ground-ocean .wl-card p, .wl-ground-spark .wl-card p { color: var(--wl-on-dark-2); }

/* pills / chips */
.wl-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.wl-pill {
  font-size: 0.74rem; font-weight: 600; padding: 0.24rem 0.62rem; border-radius: 6px;
  background: rgba(14,36,28,0.06); border: 1px solid var(--wl-parchment-3); color: var(--wl-ink-soft);
}
.wl-ground-forest .wl-pill, .wl-ground-ocean .wl-pill, .wl-ground-spark .wl-pill {
  background: rgba(243,239,227,0.06); border-color: var(--wl-hair-dark); color: var(--wl-on-dark-2);
}

/* stat row */
.wl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wl-hair-dark); border: 1px solid var(--wl-hair-dark); border-radius: 14px; overflow: hidden; }
.wl-stat { padding: 1.7rem 1.3rem; text-align: center; background: rgba(243,239,227,0.03); }
.wl-stat-n { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--wl-spark-fire); }
.wl-stat-l { font-size: 0.8rem; color: var(--wl-on-dark-3); margin-top: 0.4rem; }

/* mark placement */
.wl-mark-multiply { mix-blend-mode: multiply; }   /* black-on-white mark on parchment */
.wl-mark-screen   { mix-blend-mode: screen; }      /* white-on-black wave on dark ground */

/* hairline rule */
.wl-rule { border: none; border-top: 1px solid var(--wl-parchment-3); }
.wl-ground-forest .wl-rule, .wl-ground-ocean .wl-rule, .wl-ground-spark .wl-rule { border-top-color: var(--wl-hair-dark); }

/* the spark star motif (drawn, no asset) */
.wl-star { display: inline-block; color: var(--wl-spark-fire); }

/* ---- footer (dark frame, on every page) ---- */
.wl-footer { background: var(--wl-forest-ink); color: var(--wl-on-dark-3); padding: 3rem 0 2.2rem; border-top: 1px solid var(--wl-hair-dark); }
.wl-footer a { color: var(--wl-on-dark-3); text-decoration: none; transition: color 0.15s; }
.wl-footer a:hover { color: var(--wl-parchment); }
.wl-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.wl-footer-brand { display: flex; align-items: center; gap: 0.7rem; }
.wl-footer-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--wl-parchment); display: grid; place-items: center; overflow: hidden; flex: none; }
.wl-footer-badge img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.wl-footer-brand strong { color: var(--wl-parchment); font-weight: 800; display: block; }
.wl-footer-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.wl-footer-worlds { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.wl-footer-meta { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--wl-hair-dark-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; font-size: 0.82rem; }
.wl-footer-credit { text-align: center; margin-top: 1.4rem; font-size: 0.8rem; color: var(--wl-on-dark-3); }
.wl-footer-credit a { color: var(--wl-on-dark-2); text-decoration: underline; text-underline-offset: 2px; }
.wl-footer-love { text-align: center; margin-top: 0.5rem; font-size: 0.8rem; color: rgba(243,239,227,0.28); }

/* ---- reveal-on-scroll ---- */
.wl-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.wl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wl-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   RESPONSIVE FRAMEWORK  (shared, systematic — no per-page hacks)
   ----------------------------------------------------------------------------
   Goals: readable at any width 320–420px on a phone, ≥44px tap targets, and
   ZERO horizontal overflow. Type is already fluid via clamp() on .wl-h1/h2/h3
   and .wl-lead; the rules below handle layout collapse, the nav, tap sizing,
   and overflow containment. Verify on a ~390px viewport.
   ============================================================================ */

/* ---- overflow containment: nothing pushes the page wider than the phone ---- */
.wl-wrap, .wl-nav-inner { width: 100%; }
.wl-h1, .wl-h2, .wl-h3, .wl-lead, .wl-prose { overflow-wrap: break-word; }
/* long unbroken tokens (URLs, code) wrap instead of forcing a scrollbar */
.wl-prose a, .wl-card p, .wl-prose code { overflow-wrap: anywhere; }
/* wide blocks scroll inside themselves, never the page body */
.wl-prose pre, .wl-prose table { max-width: 100%; overflow-x: auto; }

/* ---- tap targets: interactive brand components clear the ~44px minimum ---- */
.wl-btn { min-height: 44px; }
.wl-nav-cta { display: inline-flex; align-items: center; min-height: 38px; }
.wl-nav-links a { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.wl-footer-nav a, .wl-footer-worlds a { padding: 0.2rem 0; display: inline-block; }

/* ---- breakpoints ---- */
@media (max-width: 940px) {
  .wl-worlds { grid-template-columns: 1fr; }
  .wl-grid--3, .wl-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .wl-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .wl-nav-links { gap: 1.1rem; }
  .wl-nav-links .wl-hide-sm { display: none; }
}

@media (max-width: 600px) {
  /* Phone nav: keep it to brand + one CTA so the bar never overflows or wraps.
     The three world links live in the footer and in-page, so hiding them here
     loses no navigation. (:has targets the world links by their colour dot.) */
  .wl-nav-links { gap: 0.75rem; }
  .wl-nav-links li:has(.wl-dot) { display: none; }
  .wl-nav-lang { display: none; }
  .wl-nav-inner { height: 60px; }
  .wl-brand-name { font-size: 0.92rem; }
}

@media (max-width: 560px) {
  .wl-grid--2, .wl-grid--3, .wl-grid--4 { grid-template-columns: 1fr; }
  .wl-stats { grid-template-columns: repeat(2, 1fr); }
  .wl-section { padding: clamp(2.75rem, 9vw, 4rem) 0; }
  .wl-footer-top { flex-direction: column; }
  .wl-footer-nav, .wl-footer-worlds { gap: 1rem; }
}

@media (max-width: 380px) {
  /* smallest common phones: single-column stats, tighter gutter */
  .wl-stats { grid-template-columns: 1fr; }
  .wl-wrap { padding: 0 1.15rem; }
}