/* ============================================================================
   World's Fair Business — shared design system (master prompt: Parts 2,3,4,8,10)
   Linked on every page. Centralizes the global navigation, reading/wide widths,
   type scale, status badges, cards, and accessibility rules so every page reads
   as one premium product. Page-specific :root tokens (--gold, --line, …) are
   reused here; this file only standardizes shared components.
   ========================================================================== */

/* ---- Part 2: global navigation — premium, prominent, NEVER wraps a label ---- */
nav .navlinks{
  gap:clamp(18px,2.3vw,40px) !important;
  font-size:14px !important;
  letter-spacing:.14em !important;
  white-space:nowrap;                 /* row never wraps to a second line */
}
nav .navlinks a{
  white-space:nowrap !important;      /* "Operating System" stays on ONE line */
  flex:0 0 auto;                      /* labels don't shrink into wrapping */
  padding:6px 2px !important;
  opacity:.9;
}
nav .navlinks a:hover{opacity:1;color:#fff}
nav .navlinks a.active{
  color:var(--gold) !important;
  opacity:1 !important;
  border-bottom:2px solid var(--gold);
}
/* keep desktop links visible & readable up to the real mobile breakpoint */
@media(min-width:961px){ nav .navlinks a{display:inline-block !important} }

/* ---- Unified site background (match the home page's blue on every page) ---- */
/* Loaded after each page's inline <style>, so these win — one canonical background. */
:root{
  --space:#0B1524; --space2:#0E1E33;      /* was near-black on newer pages; now the home blue */
  --wfb-read:1180px; --wfb-wide:1440px; --wfb-gut:clamp(20px,4vw,56px);
}
/* One ambient background on every page — the SAME gradient as the home hero (#12263f→#0E1E33→#0B1524).
   Uses the home page's exact blue so How It Thinks / Case Study match it. */
body{background:#0B1524 radial-gradient(120% 90% at 50% 15%, #12263f 0%, #0E1E33 45%, #0B1524 100%) fixed !important}

/* MOBILE TAP FIX — purely-decorative hero layers must never intercept taps or scroll.
   On phones the `.planet` is ~200vw and `.glow` is 900px; without this they blanket the
   hero and swallow every tap on the CTAs/links (and feel like "the page is frozen"). */
#stars, canvas#stars, .glow, .hero .glow, .planet, .planet *, .orbit, .uni .orbit{
  pointer-events:none !important;
}

/* ============================================================================
   SHARED NAVIGATION — one nav, injected by wfb-nav.js as <nav id="wfb-nav">.
   Id-scoped so it overrides every page's older bespoke nav. Identical everywhere.
   ========================================================================== */
#wfb-nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,21,36,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#wfb-nav .wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;height:96px;position:relative}
#wfb-nav .brand img{height:68px;width:auto;display:block}
#wfb-nav .navlinks{display:flex;gap:clamp(14px,1.7vw,30px);align-items:center;
  font-family:var(--deco);text-transform:uppercase;letter-spacing:.13em;font-size:13.5px;color:var(--lblue)}
/* desktop: the hamburger must never show (defeats any stray rule) */
@media(min-width:821px){#wfb-nav .navtoggle{display:none !important}}
#wfb-nav .navlinks a{white-space:nowrap;opacity:.9;padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
#wfb-nav .navlinks a:hover{opacity:1;color:#fff}
#wfb-nav .navlinks a.active{color:var(--gold);opacity:1;border-bottom-color:var(--gold)}
#wfb-nav .navlinks a.btn{border:1px solid var(--brass);border-radius:8px;padding:9px 18px;color:var(--cream);border-bottom:1px solid var(--brass)}
#wfb-nav .navlinks a.btn:hover{background:var(--brass);color:#0b1524}
#wfb-nav .navtoggle{display:none;background:transparent;border:1px solid var(--line);color:var(--lblue);
  width:46px;height:40px;border-radius:8px;font-size:20px;cursor:pointer}
@media(max-width:820px){
  #wfb-nav .wrap{height:76px}
  #wfb-nav .brand img{height:52px}
  #wfb-nav .navtoggle{display:block}
  #wfb-nav .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:rgba(11,21,36,.98);border-bottom:1px solid var(--line);padding:10px 24px 16px;display:none}
  #wfb-nav.open .navlinks{display:flex}
  /* override each page's leftover pre-hamburger rule `.navlinks a:not(.btn){display:none}` —
     id-specificity + !important so ALL links (not just START) show in the open mobile menu */
  #wfb-nav .navlinks a{display:block !important;padding:13px 0;width:100%;border-bottom:1px solid var(--line);border-top:none}
  #wfb-nav .navlinks a.btn{margin-top:10px;text-align:center}
}

/* ---- Unify former cream 'light' sections into the blue design system ----
   (methodology/capabilities/industries were cream by the old alternating design; the site
   direction is one continuous blue. Flip bg + restyle children for contrast on dark.) */
section.light{background:transparent !important;color:var(--cream) !important}
section.light .kicker{color:var(--gold) !important}
section.light h2,section.light .sechead h2{color:#fff !important}
section.light .sechead p{color:var(--lblue) !important}
section.light .card{background:rgba(143,197,234,.05) !important;border-color:var(--line) !important}
section.light .card h3{color:#fff !important}
section.light .card p,section.light .card .desc{color:var(--lblue) !important}
section.light .card .num{color:var(--gold) !important}
section.light .step{border-color:var(--line) !important}
section.light .step p,section.light .light .step p{color:var(--lblue) !important}
section.light .ind div{background:rgba(143,197,234,.05) !important;border-color:var(--line) !important;color:var(--cream) !important}

/* ---- Founders cards → dark glass (unify with the blue system) ---- */
.fcard{background:rgba(143,197,234,.05) !important;border-color:var(--line) !important}
.fcard h2{color:#fff !important}
.fcard .bio{color:var(--lblue) !important}
.fcard .bio b{color:#fff !important}
.fcard .sig{color:var(--cream) !important;border-top-color:var(--line) !important}
.fcard .chips span{color:var(--gold) !important;border-color:var(--line) !important;background:rgba(201,162,75,.08) !important}

/* ---- Part 3: shared widths for pages that opt in (.wfb-*) ---- */
.wfb-wrap{max-width:var(--wfb-read);margin:0 auto;padding:0 var(--wfb-gut);width:100%}
.wfb-wide{max-width:var(--wfb-wide);margin:0 auto;padding:0 var(--wfb-gut);width:100%}

/* ---- Part 4: readable type scale (fluid; comfortable without zoom) ---- */
.wfb-h1{font-family:var(--serif);font-weight:600;color:#fff;line-height:1.03;font-size:clamp(38px,5.4vw,66px)}
.wfb-h2{font-family:var(--serif);font-weight:600;color:#fff;line-height:1.06;font-size:clamp(28px,3.6vw,46px)}
.wfb-h3{font-family:var(--serif);font-weight:600;color:#fff;font-size:clamp(21px,2vw,27px)}
.wfb-kicker{font-family:var(--deco);text-transform:uppercase;letter-spacing:.28em;font-size:12px;color:var(--gold)}
.wfb-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--lblue);font-weight:300;max-width:66ch}
.wfb-body{font-size:16px;line-height:1.62;color:var(--txt)}
.wfb-body p{max-width:70ch}                     /* Part 3: wide layouts, but never over-long lines */
.wfb-small{font-size:13.5px;line-height:1.5;color:var(--mute)}

/* ---- Part 8/11: status badges (honesty labels, shared everywhere) ---- */
.wfb-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--deco);text-transform:uppercase;
  letter-spacing:.12em;font-size:10px;padding:4px 11px;border-radius:100px;border:1px solid var(--line);color:var(--mute)}
.wfb-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.wfb-badge.is-demo,.wfb-badge.is-demonstration{color:var(--amber);border-color:rgba(233,199,123,.4)}
.wfb-badge.is-prototype{color:var(--ice);border-color:rgba(127,200,227,.4)}
.wfb-badge.is-in-development{color:var(--amber);border-color:rgba(233,199,123,.4)}
.wfb-badge.is-design,.wfb-badge.is-concept{color:var(--mute)}
.wfb-badge.is-pilot{color:var(--violet);border-color:rgba(157,140,240,.4)}
.wfb-badge.is-production,.wfb-badge.is-verified{color:var(--green);border-color:rgba(95,214,160,.4)}

/* provenance chips — icon+text+color, never color alone (Part 10) */
.wfb-prov{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--lblue);border:1px solid var(--line);border-radius:100px;padding:2px 9px}
.wfb-prov b{color:#fff;font-weight:600}

/* ---- shared cards & footer ---- */
.wfb-card{background:rgba(13,26,44,.6);border:1px solid var(--line);border-radius:16px;padding:22px 22px}
.wfb-footer{border-top:1px solid var(--line);padding:34px 0;margin-top:40px}
.wfb-footer .row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--deco);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--mute)}

/* ---- Part 10: accessibility — focus + reduced motion ---- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}