/* Bright City Labs — shared styles (BC-18)
   Night City palette. Tokens, reset, base type, and shared atoms
   used by index.html and daily-brief.html. Page-specific layout lives
   in each page's own <style> block. No build step. */

:root{
  /* Surfaces */
  --ink:#0e2038;            /* dominant dark surface, body text on light, buttons */
  --navy-deepest:#081321;   /* top of hero sky gradient */
  --navy-mid:#0b1a2d;       /* hero gradient midpoint */
  --navy-raised:#1e3f6b;    /* dark-button hover */
  --tower:#244d79;          /* skyline foreground towers */
  --cream:#f3ede3;          /* light surface, text on navy */
  --warm-white:#fffdf8;     /* alternate light surface, cards, inputs */
  --cream-border:#e3dbcc;   /* borders on light surfaces */

  /* Accent */
  --yellow:#ffc72c;
  --yellow-light:#ffd769;
  --gold:#8a6d1f;           /* links/eyebrows on light (contrast-safe) */

  /* Text */
  --slate-light:#b8c0cf;    /* body text on navy */
  --slate-footer:#99a1b2;   /* footer fine print (BC-12 fix) */
  --warm-gray:#4a4842;      /* body text on cream */
  --warm-gray-light:#5f5a52;/* secondary text on light */
  --hairline:rgba(243,237,227,.12);
  --focus-ring:0 0 0 3px rgba(255,199,44,.35);

  --maxw:1140px;
  --font:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-head:var(--font);
  --t:.18s ease;

  /* Type scale — one system, 7 steps (BC: consolidated from 24) */
  --fs-xs:.85rem;   /* eyebrows, kickers, tags, fine print, nav, footer, small buttons */
  --fs-sm:1rem;     /* body copy, buttons, inputs, card text */
  --fs-md:1.15rem;  /* lead & intro paragraphs, larger body, brand word */
  --fs-lg:1.3rem;   /* small headings: product titles, service names */
  --fs-xl:clamp(1.4rem,3vw,2rem);        /* hero sub-line */
  --fs-2xl:clamp(1.9rem,4.2vw,2.7rem);   /* section & manifesto headings */
  --fs-3xl:clamp(2.9rem,7.6vw,5rem);     /* hero headline */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  font-size:18px;
  line-height:1.65;
  background:var(--ink);
  color:var(--slate-light);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--font-head);}
.brand-word{font-family:var(--font-head);}
p{margin:0;}
a{color:var(--gold);text-decoration:none;transition:color var(--t),border-color var(--t);}
::selection{background:var(--yellow);color:var(--ink);}

/* Anchor jumps clear the sticky header (BC-09) */
section[id],main[id]{scroll-margin-top:96px;}

/* Focus + skip link (BC-13) */
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:2px;}
input:focus-visible,textarea:focus-visible{outline:none;}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:var(--yellow);color:var(--ink);font-weight:800;
  padding:10px 18px;border-radius:0 0 12px 12px;
  transition:top var(--t);
}
.skip-link:focus{top:0;color:var(--ink);}

/* Visually hidden but available to screen readers */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Container */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* Logo lockup ------------------------------------------------------- */
.logo{display:flex;align-items:center;gap:11px;}
.logo-mark{height:36px;width:auto;flex:0 0 auto;display:block;position:relative;top:2px;}
.brand-word{color:var(--cream);font-weight:700;font-size:var(--fs-md);letter-spacing:-.01em;}
/* Footer variant */
.logo-mark--sm{height:33px;}

/* Sticky header ----------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(14,32,56,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;
}
.nav-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
/* :not(.btn) so the yellow CTA keeps its own navy text, not the slate link color */
.nav-links a:not(.btn){color:var(--slate-light);font-weight:700;font-size:var(--fs-xs);}
.nav-links a:not(.btn):hover{color:var(--cream);}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  background:transparent;color:var(--cream);cursor:pointer;
  border:1px solid var(--hairline);border-radius:10px;
}
.nav-toggle svg{display:block;width:22px;height:22px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

/* Mobile: collapse links into an expandable panel behind the hamburger */
@media (max-width:720px){
  .nav-toggle{display:inline-flex;}
  .nav-links{
    display:none;flex-basis:100%;flex-direction:column;
    align-items:stretch;gap:2px;
    margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);
  }
  .nav-links.is-open{display:flex;}
  .nav-links a:not(.btn){padding:12px 2px;font-size:var(--fs-sm);}
  .nav-links .btn--nav{margin-top:8px;text-align:center;}
}

/* Buttons ----------------------------------------------------------- */
.btn{
  display:inline-block;border:0;cursor:pointer;font-family:inherit;
  border-radius:999px;font-weight:800;line-height:1.2;
  transition:transform var(--t),background var(--t),border-color var(--t),color var(--t);
}
.btn-yellow{background:var(--yellow);color:var(--ink);}
.btn-yellow:hover{background:var(--yellow-light);color:var(--ink);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:var(--navy-raised);color:#fff;}
/* Sizes */
.btn--nav{padding:10px 20px;font-size:var(--fs-xs);}
.btn--lg{padding:15px 30px;font-size:var(--fs-sm);}
.btn--form{padding:15px 32px;font-size:var(--fs-sm);}
/* Underlined secondary link */
.link-underline{
  color:var(--cream);font-weight:800;
  border-bottom:2px solid rgba(255,199,44,.55);padding-bottom:3px;
}
.link-underline:hover{color:var(--cream);border-bottom-color:var(--yellow);}

/* Eyebrow ----------------------------------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.eyebrow::before{
  content:"";width:24px;height:2px;border-radius:2px;
  background:var(--ink);flex:0 0 auto;
}
.eyebrow--navy{color:var(--yellow);}
.eyebrow--navy::before{background:var(--yellow);}

/* Section header block (light sections) */
.section-head{max-width:56ch;margin-bottom:44px;}
.section-head h2{
  color:var(--ink);font-weight:600;
  font-size:var(--fs-2xl);letter-spacing:-.025em;
  line-height:1.12;margin:0 0 16px;
}
.section-head--navy h2{color:var(--cream);}
.section-head .lede{margin:0;color:var(--warm-gray-light);font-size:var(--fs-md);}

/* Footer ------------------------------------------------------------ */
.site-footer{background:var(--ink);}
.footer-top{
  display:flex;justify-content:space-between;gap:32px;
  flex-wrap:wrap;align-items:flex-start;padding:60px 32px 44px;
}
.footer-brand{max-width:36ch;}
.footer-brand .logo{margin-bottom:12px;}
.footer-mission{margin:0;color:var(--slate-light);font-size:var(--fs-sm);}
.footer-mission b{color:var(--yellow);font-weight:800;}
.footer-verse{
  margin:14px 0 0;color:#8e97a8;font-size:var(--fs-xs);font-style:italic;
  display:none; /* verse kept hidden per brand direction */
}
.foot-links{display:flex;flex-direction:column;gap:10px;text-align:right;}
.foot-links a{color:var(--slate-light);font-weight:700;font-size:var(--fs-xs);}
.foot-links a:hover{color:var(--yellow);}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:0 32px 44px;}
.footer-copy{margin:0;color:var(--slate-footer);font-size:var(--fs-xs);}
@media(max-width:560px){
  .footer-top{flex-direction:column;}
  .foot-links{text-align:left;}
}