/* ═══════════════════════════════════════════════════════════════════════
   SORTIE HQ — BRAND TOKENS v1
   The HQ where strategy becomes coordinated waves of executable work.

   Aesthetic register: mid-century civilian aviation (Pan Am 1965, BOAC,
   TWA, Saarinen Flight Center). Warm cream cabin-interior background,
   warm charcoal ink, Atlantic Route blue as primary navigational accent,
   Sunset Approach orange as sparing highlight. Cockpit-instrument greens
   and ambers reserved for functional state.

   · Newsreader  — humanist serif with mid-century DNA (display, editorial)
   · Geist       — clean geometric/humanist sans (UI, body)
   · JetBrains Mono — instrument readout, flight-strip metadata

   The product is the HQ. The brand evokes the HQ.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ───── SURFACE · Cabin Interior ───── */
  --bg:         #F4EFE6;   /* cream — primary cabin-interior background */
  --bg-raised:  #FAF6EE;   /* lifted card surface */
  --bg-sunken:  #ECE5D6;   /* sunken panel — flight-strip well */
  --bg-deep:    #1C1F24;   /* dark inversion — for hero / closing slides */
  --bg-deep-raised: #262A30;
  --bg-glass:   rgba(244, 239, 230, 0.82);

  /* ───── INK ───── */
  --ink:        #1C1F24;   /* primary charcoal — never pure black */
  --ink-dim:    #5C5247;   /* warm secondary */
  --ink-faint:  #8E8576;   /* warm tertiary, dividers-as-text */
  --ink-mute:   #B8AE9C;   /* very faint, gridlines as type */
  --ink-on-deep:        #F4EFE6;
  --ink-on-deep-dim:    #B8AE9C;
  --ink-on-deep-faint:  #6F6759;

  /* ───── RULES ───── */
  --rule:        #D9CFB9;   /* standard cream-tinted divider */
  --rule-bright: #B8AE9C;   /* emphatic divider */
  --rule-on-deep:        #383C44;
  --rule-on-deep-bright: #4A4F58;

  /* ───── ACCENT · Atlantic Route ───── */
  --atlantic:        #0E416B;   /* Pan Am navigational blue */
  --atlantic-hover:  #155483;
  --atlantic-pressed:#0A3252;
  --atlantic-soft:   rgba(14, 65, 107, 0.10);
  --atlantic-softer: rgba(14, 65, 107, 0.05);
  --atlantic-glow:   rgba(14, 65, 107, 0.22);
  --atlantic-ink:    #FFFFFF;

  /* ───── ACCENT · Sunset Approach ───── */
  --sunset:        #C9602E;   /* rust / late-afternoon airfield */
  --sunset-hover:  #D87440;
  --sunset-soft:   rgba(201, 96, 46, 0.10);
  --sunset-softer: rgba(201, 96, 46, 0.05);

  /* ───── COCKPIT INSTRUMENT ───── */
  --cleared:    #3F6B4E;   /* cockpit-dial green — approved, cleared */
  --warning:    #B68A2E;   /* analog warning amber */
  --critical:   #8B3A2E;   /* muted oxblood, never bright safety-red */

  /* ───── CHART SERIES · Categorical only ─────
     Curated palette for swimlane / multi-series viz where hue separation
     matters more than semantics. Rooted in brand families, all pulled to
     mid-century aviation-chart saturation. Ordered for adjacent
     discriminability — odd indices cool, even indices warm. Do not use
     for status, identity, or any semantic surface — those have brand
     tokens. */
  --chart-1:  #0E416B;  /* atlantic */
  --chart-2:  #C9602E;  /* sunset */
  --chart-3:  #3F6B4E;  /* forest (cleared) */
  --chart-4:  #6B3A52;  /* plum */
  --chart-5:  #1F6B8A;  /* sea */
  --chart-6:  #B68A2E;  /* gold (warning) */
  --chart-7:  #6B8A6B;  /* sage */
  --chart-8:  #9C7B4E;  /* dune */
  --chart-9:  #465260;  /* slate */
  --chart-10: #8B3A2E;  /* oxblood (critical) */

  /* aliases for compatibility with semantic tokens */
  --accent:         var(--atlantic);
  --accent-hover:   var(--atlantic-hover);
  --accent-pressed: var(--atlantic-pressed);
  --accent-ink:     var(--atlantic-ink);
  --accent-soft:    var(--atlantic-soft);
  --accent-softer:  var(--atlantic-softer);
  --accent-glow:    var(--atlantic-glow);
  --good:  var(--cleared);
  --warn:  var(--warning);
  --bad:   var(--critical);

  /* ───── TYPE ───── */
  --font-display: 'Newsreader', 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-body:    'Geist', 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-serif:   'Newsreader', Georgia, serif;

  --display-weight: 500;          /* serif at 500/600 reads as mid-century editorial */
  --display-tracking: -0.022em;
  --body-tracking: -0.005em;
  --label-tracking: 0.22em;

  /* ───── RADII ───── */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ───── ELEVATION ───── */
  --shadow-card:   0 1px 0 rgba(255, 252, 245, 0.5) inset,
                   0 6px 18px rgba(28, 31, 36, 0.06),
                   0 1px 2px rgba(28, 31, 36, 0.04);
  --shadow-feature:0 1px 0 rgba(255, 252, 245, 0.5) inset,
                   0 24px 60px rgba(28, 31, 36, 0.10),
                   0 2px 6px rgba(28, 31, 36, 0.05);
  --shadow-accent: 0 0 0 1px var(--atlantic),
                   0 16px 40px rgba(14, 65, 107, 0.18);

  /* ───── MOTION ───── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--atlantic); text-decoration: none; }
a:hover { color: var(--atlantic-hover); }

::selection { background: var(--atlantic-soft); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   TYPE UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.0;
}
.mono     { font-family: var(--font-mono); font-feature-settings: "zero", "tnum"; }
.italic-em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }

.eyebrow,
.flight-strip {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--ink-dim);
}
.eyebrow.atlantic { color: var(--atlantic); }
.eyebrow.sunset { color: var(--sunset); }

/* Display scale */
.t-hero      { font: 500 110px/0.96 var(--font-display); letter-spacing: -0.028em; }
.t-display   { font: 500 80px/0.98  var(--font-display); letter-spacing: -0.024em; }
.t-h1        { font: 500 56px/1.05  var(--font-display); letter-spacing: -0.02em; }
.t-h2        { font: 500 40px/1.1   var(--font-display); letter-spacing: -0.018em; }
.t-h3        { font: 500 28px/1.2   var(--font-display); letter-spacing: -0.012em; }

/* Body scale (sans) */
.t-lead      { font: 400 20px/1.55 var(--font-body); letter-spacing: -0.005em; }
.t-body      { font: 400 16px/1.6  var(--font-body); }
.t-small     { font: 400 13px/1.55 var(--font-body); }
.t-label     { font: 500 11px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; }

/* Ink tier utilities */
.u-ink       { color: var(--ink); }
.u-dim       { color: var(--ink-dim); }
.u-faint     { color: var(--ink-faint); }
.u-atlantic  { color: var(--atlantic); }
.u-sunset    { color: var(--sunset); }
.u-cleared   { color: var(--cleared); }
.u-warning   { color: var(--warning); }
.u-critical  { color: var(--critical); }

/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Flight-strip — a chip styled like a flight progress strip */
.strip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--rule-bright);
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.strip.atlantic {
  color: var(--atlantic);
  border-color: var(--atlantic);
  background: var(--atlantic-soft);
}
.strip.sunset {
  color: var(--sunset);
  border-color: var(--sunset);
  background: var(--sunset-soft);
}
.strip .led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cleared);
  box-shadow: 0 0 6px rgba(63, 107, 78, 0.5);
}
.strip.atlantic .led { background: var(--atlantic); box-shadow: 0 0 6px rgba(14, 65, 107, 0.5); }

/* Card — like a flight document on a desk */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.card.sunken { background: var(--bg-sunken); }
.card.atlantic {
  border-color: var(--atlantic);
  box-shadow: var(--shadow-accent);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: var(--atlantic);
  color: var(--atlantic-ink);
  border: 1px solid var(--atlantic);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { background: var(--atlantic-hover); border-color: var(--atlantic-hover); transform: translateY(-1px); color: var(--atlantic-ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-bright);
}
.btn-ghost:hover { background: var(--bg-raised); border-color: var(--ink-dim); color: var(--ink); }
.btn-sunset { background: var(--sunset); border-color: var(--sunset); color: #fff; }
.btn-sunset:hover { background: var(--sunset-hover); border-color: var(--sunset-hover); color: #fff; }

/* Table — flight manifest */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tbl th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule-bright);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num { font-family: var(--font-mono); }

/* Rules */
.hr { height: 1px; background: var(--rule); border: 0; }
.hr-dotted {
  height: 1px; border: 0;
  background: repeating-linear-gradient(to right, var(--rule-bright) 0 3px, transparent 3px 8px);
}

/* Route-line — a horizontal divider styled like a flight-route line */
.route-line {
  height: 1px; border: 0; background: var(--rule);
  position: relative;
}
.route-line::before, .route-line::after {
  content: ""; position: absolute; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--atlantic); transform: translateY(-50%);
}
.route-line::before { left: 0; }
.route-line::after  { right: 0; }

/* Compass-rose backdrop helper (use as ::before on hero containers) */
.compass-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image:
    radial-gradient(circle, var(--ink) 1px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}

/* ═══════════════════════════════════════════════════════════════════════
   SORTIE HQ MARK — a "speedbird"-style restrained aviation gesture.
   A stylized chevron-arc that reads as a wing in flight or a compass
   needle. Geometric reduction, mid-century. Use via:
     <svg class="mark"><use href="#sortie-mark"/></svg>
   Symbol is defined inline in each HTML file.
   ═══════════════════════════════════════════════════════════════════════ */
.mark {
  display: inline-block;
  color: var(--atlantic);
}

/* Wordmark lockup */
.wordmark {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.024em;
  color: var(--ink);
  font-style: italic; /* Newsreader italic at 500 reads as restrained, mid-century */
}
.wordmark .mark { color: var(--atlantic); }
.wordmark .hq {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.5em;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  padding: 0.15em 0.45em;
  border: 1px solid var(--rule-bright);
  border-radius: 3px;
  align-self: center;
  text-transform: uppercase;
  margin-left: 0.15em;
}

/* Inverse — for dark backgrounds */
.on-deep {
  background: var(--bg-deep);
  color: var(--ink-on-deep);
}
.on-deep .wordmark { color: var(--ink-on-deep); }
.on-deep .wordmark .hq { color: var(--ink-on-deep-dim); border-color: var(--rule-on-deep-bright); }
.on-deep .strip { background: var(--bg-deep-raised); border-color: var(--rule-on-deep-bright); color: var(--ink-on-deep-dim); }
.on-deep .strip.atlantic { color: #6FA0CC; border-color: #6FA0CC; background: rgba(111,160,204,0.10); }
.on-deep .hr, .on-deep .route-line { background: var(--rule-on-deep); }
.on-deep .route-line::before, .on-deep .route-line::after { background: #6FA0CC; }