/* ============================================================================
   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-privacy { text-align: center; margin-top: 1.6rem; font-size: 0.82rem; letter-spacing: 0.01em; color: var(--wl-on-dark-2); }
.wl-footer-privacy a { color: var(--wl-parchment); text-decoration: underline; text-underline-offset: 2px; }
.wl-footer-privacy a:hover { color: var(--wl-parchment); text-decoration-thickness: 2px; }
.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); }
}

/* Nav sizing: the full link set (primary world links + .wl-hide-sm secondary
   links + CTA) is wide, so it must not force the bar to overflow at tablet
   widths. Tighten the gap on mid widths so the full set still fits iPad
   landscape (1024), then drop the secondary links below the point where even
   the tightened set can't fit — so the bar never overflows at iPad portrait
   (768). The secondary links remain reachable in-page and in the footer. */
@media (max-width: 1200px) {
  .wl-nav-links { gap: 1.1rem; }
}

@media (max-width: 1000px) {
  .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; }
}