/* ============================================================================
   BB2G STANDARD v1.0 — the Born Between 2 Generals house style.
   Red, white and blue with gold accents. Drawn from the BB2G business card.

   One file. Every BB2G app links it and inherits the same look.
       <link rel="stylesheet" href="https://standard.bornbetween2generals.com/assets/standard.css">

   Rules that are not negotiable, and why:
     - Gold is an ACCENT, never a body-text colour. --gold at 3.0:1 on white
       fails WCAG AA for text. Use --gold-ink (4.7:1) when gold must be read.
     - Red carries alarm and emphasis. It is never a page background.
     - Navy carries structure. White and parchment carry content.
     - Every motion honours prefers-reduced-motion by resolving to the
       finished state, never to a frozen mid-frame.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* -- the colours ------------------------------------------------------- */
  --white:        #FFFFFF;
  --parchment:    #FAF6EC;   /* the business-card stock */
  --parchment-2:  #F3EDDF;
  --ink:          #0C0E14;
  --ink-2:        #2A2F3C;
  --ink-3:        #5A6172;
  --ink-4:        #8B92A3;

  --navy:         #0A1E44;   /* flag blue — structure */
  --navy-2:       #14306B;
  --navy-3:       #2A4C9B;
  --navy-4:       #93A9D6;
  --navy-wash:    #EEF2FA;

  --red:          #C8102E;   /* flag red — emphasis */
  --red-deep:     #8E0B20;
  --red-soft:     #E05260;
  --red-wash:     #FDEEF0;

  --gold:         #C9A227;   /* accent: rules, marks, stars */
  --gold-bright:  #E3C567;
  --gold-pale:    #F4E8C4;
  --gold-deep:    #8A6A15;
  --gold-ink:     #7A5C12;   /* the only gold that may carry text on white */
  --gold-wash:    #FBF5E4;

  --gold-grad: linear-gradient(100deg, #8A6A15 0%, #C9A227 22%, #F0DC9A 48%, #C9A227 74%, #8A6A15 100%);
  --tricolor:  linear-gradient(90deg, var(--navy) 0 33.333%, var(--white) 33.333% 66.666%, var(--red) 66.666% 100%);

  /* -- semantic surfaces -------------------------------------------------- */
  --bg:           var(--white);
  --bg-alt:       var(--parchment);
  --surface:      var(--white);
  --surface-2:    #F7F8FB;
  --text:         var(--ink);
  --text-2:       var(--ink-3);
  --text-3:       var(--ink-4);
  --line:         #E3E7EF;
  --line-strong:  #C9D0DE;
  --hairline:     rgba(201,162,39,.42);   /* the gold hairline */

  /* -- status (used by the roster; deliberately not red/gold) ------------- */
  --ok:      #1B7F4B;
  --ok-wash: #EAF6EF;
  --warn:      #9A6B00;
  --warn-wash: #FDF3E0;
  --bad:      #A11326;
  --bad-wash: #FCEDEF;

  /* -- type -------------------------------------------------------------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(.95rem, .92rem + .15vw, 1.03rem);
  --step-1:  clamp(1.12rem, 1.06rem + .3vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.24rem + .55vw, 1.7rem);
  --step-3:  clamp(1.65rem, 1.44rem + 1.05vw, 2.3rem);
  --step-4:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-5:  clamp(2.4rem, 1.7rem + 3.5vw, 4.6rem);

  /* -- space / shape ------------------------------------------------------ */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem; --s9: 7rem;
  --r-sm: 3px; --r: 6px; --r-lg: 12px; --r-xl: 20px;
  --wrap: 1200px; --wrap-narrow: 760px;

  --shadow-1: 0 1px 2px rgba(10,30,68,.06), 0 2px 8px rgba(10,30,68,.05);
  --shadow-2: 0 2px 6px rgba(10,30,68,.07), 0 12px 32px rgba(10,30,68,.09);
  --shadow-gold: 0 0 0 1px rgba(201,162,39,.35), 0 6px 22px rgba(138,106,21,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;

  color-scheme: light dark;
}

/* ---------- 2. DARK ------------------------------------------------------ */
/* Navy becomes the field; gold and parchment carry the light. Same tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #070D1C;
    --bg-alt:      #0A1428;
    --surface:     #0C1730;
    --surface-2:   #101E3C;
    --text:        #EEF2FA;
    --text-2:      #B3C0DA;
    --text-3:      #7C8AA8;
    --line:        #1C2C4F;
    --line-strong: #2B3F6B;
    --hairline:    rgba(227,197,103,.42);
    --navy-wash:   #0E1B36;
    --red-wash:    #2A0E14;
    --gold-wash:   #241C08;
    --gold-ink:    #E3C567;
    --parchment:   #131F3C;
    --parchment-2: #182644;
    --ok:      #4FCB8A; --ok-wash:   #0C2A1B;
    --warn:    #E0AE4D; --warn-wash: #2A2008;
    --bad:     #F4808F; --bad-wash:  #2E0F16;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --bg:#070D1C; --bg-alt:#0A1428; --surface:#0C1730; --surface-2:#101E3C;
  --text:#EEF2FA; --text-2:#B3C0DA; --text-3:#7C8AA8;
  --line:#1C2C4F; --line-strong:#2B3F6B; --hairline:rgba(227,197,103,.42);
  --navy-wash:#0E1B36; --red-wash:#2A0E14; --gold-wash:#241C08; --gold-ink:#E3C567;
  --parchment:#131F3C; --parchment-2:#182644;
  --ok:#4FCB8A; --ok-wash:#0C2A1B; --warn:#E0AE4D; --warn-wash:#2A2008;
  --bad:#F4808F; --bad-wash:#2E0F16;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --shadow-2:0 2px 6px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4);
}
:root[data-theme="light"] {
  --bg:#FFFFFF; --bg-alt:#FAF6EC; --surface:#FFFFFF; --surface-2:#F7F8FB;
  --text:#0C0E14; --text-2:#5A6172; --text-3:#8B92A3;
  --line:#E3E7EF; --line-strong:#C9D0DE; --hairline:rgba(201,162,39,.42);
  --navy-wash:#EEF2FA; --red-wash:#FDEEF0; --gold-wash:#FBF5E4; --gold-ink:#7A5C12;
  --parchment:#FAF6EC; --parchment-2:#F3EDDF;
  --ok:#1B7F4B; --ok-wash:#EAF6EF; --warn:#9A6B00; --warn-wash:#FDF3E0;
  --bad:#A11326; --bad-wash:#FCEDEF;
}

/* ---------- 3. RESET & BASE --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-2); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { color: var(--navy-4); } }
:root[data-theme="dark"] a { color: var(--navy-4); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1,h2,h3,h4 { margin: 0 0 var(--s3); line-height: 1.14; letter-spacing: -.005em; font-weight: 700; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

hr { border: 0; height: 1px; background: var(--line); margin: var(--s6) 0; }

::selection { background: var(--gold-pale); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--gold-deep); color: #fff; }

/* ---------- 4. LAYOUT ---------------------------------------------------- */
.bb-wrap    { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.bb-narrow  { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.bb-section { padding-block: var(--s8); }
.bb-section--tight { padding-block: var(--s7); }
.bb-section--alt   { background: var(--bg-alt); }
.bb-section--navy  { background: var(--navy); color: #EEF2FA; }
.bb-section--navy h1, .bb-section--navy h2, .bb-section--navy h3 { color: #fff; }
.bb-section--navy .bb-eyebrow { color: var(--gold-bright); }
.bb-section--navy p { color: #C7D3EA; }

.bb-grid { display: grid; gap: var(--s5); }
@media (min-width: 620px)  { .bb-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px)  { .bb-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .bb-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.bb-stack > * + * { margin-top: var(--s4); }
.bb-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------- 5. THE MARKS OF THE HOUSE ------------------------------------ */

/* The tricolor bar — navy | white | red, hairlined in gold. */
.bb-tricolor {
  height: 5px;
  background: var(--tricolor);
  border-block: 1px solid var(--hairline);
}
.bb-tricolor--thin { height: 3px; }

/* The gold rule — a single hairline with a star at its centre. */
.bb-rule {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--gold); margin-block: var(--s5);
}
.bb-rule::before, .bb-rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.bb-rule svg, .bb-rule .bb-star { width: 13px; height: 13px; flex: none; }

/* Five stars, as on the card. */
.bb-stars { display: inline-flex; gap: .34em; color: var(--gold); }
.bb-stars svg { width: .78em; height: .78em; }

/* Eyebrow — letterspaced small caps. The house's label voice. */
.bb-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--s3);
  display: block;
}
.bb-eyebrow--red  { color: var(--red); }
.bb-eyebrow--navy { color: var(--navy-2); }

/* Display type — the monumental caps of the wordmark. */
.bb-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.06;
  text-transform: uppercase;
}
.bb-lede {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--text-2);
  font-weight: 400;
}
.bb-lede em { color: var(--gold-ink); font-style: italic; }

.bb-mono { font-family: var(--font-mono); font-size: .88em; font-variant-numeric: tabular-nums; }
.bb-num  { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Gold foil text — for the wordmark only, never for reading. */
.bb-foil {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .bb-foil { color: var(--gold-deep); -webkit-text-fill-color: var(--gold-deep); } }

/* ---------- 6. COMPONENTS ------------------------------------------------ */

/* Card — parchment stock, gold hairline, navy corner tick. */
.bb-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bb-card--parchment { background: var(--parchment); border-color: var(--hairline); }
.bb-card--gold { border-color: var(--hairline); box-shadow: var(--shadow-gold); }
a.bb-card, .bb-card--link { display: block; text-decoration: none; color: inherit; }
a.bb-card:hover, .bb-card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--gold);
}
@media (prefers-reduced-motion: reduce) { a.bb-card:hover, .bb-card--link:hover { transform: none; } }

/* The card's top gold seam. */
.bb-card--seam::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--gold-grad);
}

/* Buttons */
.bb-btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .78em 1.5em; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--navy); color: #fff;
}
.bb-btn:hover { background: var(--navy-2); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-1); }
.bb-btn--red   { background: var(--red); }
.bb-btn--red:hover { background: var(--red-deep); }
.bb-btn--gold  { background: var(--gold-grad); color: #21190A; border-color: var(--gold-deep); }
.bb-btn--gold:hover { color: #21190A; filter: brightness(1.06); }
.bb-btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.bb-btn--ghost:hover { background: var(--gold-wash); border-color: var(--gold); color: var(--text); }
.bb-btn--sm { padding: .55em 1.1em; font-size: .74rem; }
@media (prefers-reduced-motion: reduce) { .bb-btn:hover { transform: none; } }

/* Pills / badges */
.bb-pill {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .3em .72em; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.bb-pill--ok   { color: var(--ok);   background: var(--ok-wash); }
.bb-pill--warn { color: var(--warn); background: var(--warn-wash); }
.bb-pill--bad  { color: var(--bad);  background: var(--bad-wash); }
.bb-pill--navy { color: var(--navy-2); background: var(--navy-wash); }
.bb-pill--gold { color: var(--gold-ink); background: var(--gold-wash); }
.bb-pill--plain{ color: var(--text-3); background: var(--surface-2); border-color: var(--line); }
.bb-pill .bb-dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }

/* Stat — the card's "OVER 210 APPS DEVELOPED" voice. */
.bb-stat { text-align: center; padding: var(--s4) var(--s3); }
.bb-stat__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-4); line-height: 1; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .bb-stat__n { color: var(--gold-bright); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bb-stat__n { color: var(--gold-bright); } }
.bb-stat__l {
  display: block; margin-top: var(--s2);
  font-size: .72rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--text-3);
}

/* Table */
.bb-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.bb-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.bb-table th {
  text-align: left; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  font-size: .7rem; color: var(--text-3); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-strong); background: var(--surface-2);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.bb-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
.bb-table tbody tr:hover { background: var(--gold-wash); }
.bb-table tbody tr:last-child td { border-bottom: 0; }

/* Inputs */
.bb-input, .bb-select {
  font: inherit; font-size: var(--step--1);
  padding: .62em .9em; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bb-input:focus, .bb-select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.2);
}
.bb-input::placeholder { color: var(--text-3); }

/* Note / callout */
.bb-note {
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  padding: var(--s4) var(--s5);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--step--1);
}
.bb-note--red  { border-left-color: var(--red); background: var(--red-wash); }
.bb-note--navy { border-left-color: var(--navy-2); background: var(--navy-wash); }
.bb-note strong { color: var(--text); }

/* Header / footer */
.bb-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bb-header__in { display: flex; align-items: center; gap: var(--s5); padding-block: var(--s3); }
.bb-nav { display: flex; gap: var(--s4); margin-left: auto; flex-wrap: wrap; align-items: center; }
.bb-nav a {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; padding: .35em 0; position: relative;
}
.bb-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold-grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.bb-nav a:hover, .bb-nav a[aria-current="page"] { color: var(--text); }
.bb-nav a:hover::after, .bb-nav a[aria-current="page"]::after { transform: scaleX(1); }

.bb-footer { background: var(--navy); color: #B9C7E2; padding-block: var(--s7) var(--s6); font-size: var(--step--1); }
.bb-footer a { color: var(--gold-bright); }
.bb-footer a:hover { color: #fff; }
.bb-footer h4 { color: #fff; font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; font-family: var(--font-sans); }

/* Skip link */
.bb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .7em 1.2em; border-radius: 0 0 var(--r) 0;
}
.bb-skip:focus { left: 0; color: #fff; }

.bb-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 7. MOTION ---------------------------------------------------- */
/* Every animation below resolves to its FINISHED state under reduced motion. */

@keyframes bb-rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bb-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-sweep  { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@keyframes bb-spin   { to { transform: rotate(360deg); } }
@keyframes bb-twinkle{ 0%,100% { opacity:.35; transform:scale(.86);} 50% { opacity:1; transform:scale(1.12);} }
@keyframes bb-draw   { to { stroke-dashoffset: 0; } }
@keyframes bb-drift  { 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-9px,0)} 100%{transform:translate3d(0,0,0)} }

.bb-rise { animation: bb-rise .7s var(--ease) both; }
.bb-rise[data-d="1"] { animation-delay: .08s; }
.bb-rise[data-d="2"] { animation-delay: .16s; }
.bb-rise[data-d="3"] { animation-delay: .24s; }
.bb-rise[data-d="4"] { animation-delay: .32s; }
.bb-rise[data-d="5"] { animation-delay: .40s; }

/* Foil shimmer — the gold catching light, as on a foil-stamped card. */
.bb-shimmer {
  background: linear-gradient(100deg, #8A6A15 0%, #C9A227 20%, #FFF3CE 38%, #C9A227 56%, #8A6A15 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: bb-sweep 7s linear infinite;
}

/* Reveal-on-scroll, driven by standard.js */
.bb-reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.bb-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bb-rise, .bb-shimmer, .bb-spin, .bb-twinkle { animation: none !important; }
  .bb-shimmer { background: var(--gold-grad); background-size: 100% 100%; }
  .bb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- 8. PRINT ----------------------------------------------------- */
@media print {
  .bb-header, .bb-footer, .bb-btn, .bb-nofprint { display: none !important; }
  body { background: #fff; color: #000; }
  .bb-card { break-inside: avoid; box-shadow: none; border: 1px solid #bbb; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; color: #555; }
}