/* ==========================================================================
   Quarterdeck — Colors & Type
   Deep navy + warm off-white, grounded accents. Work Sans (≈ Scandia Web).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&display=swap');

/* Local Work Sans — brand-uploaded TTF files in fonts/ */
@font-face { font-family: 'Work Sans'; font-weight: 100; font-style: normal; src: url('fonts/WorkSans-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 100; font-style: italic; src: url('fonts/WorkSans-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 200; font-style: normal; src: url('fonts/WorkSans-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 200; font-style: italic; src: url('fonts/WorkSans-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 300; font-style: normal; src: url('fonts/WorkSans-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 300; font-style: italic; src: url('fonts/WorkSans-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 400; font-style: normal; src: url('fonts/WorkSans-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 400; font-style: italic; src: url('fonts/WorkSans-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 500; font-style: normal; src: url('fonts/WorkSans-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 500; font-style: italic; src: url('fonts/WorkSans-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 600; font-style: normal; src: url('fonts/WorkSans-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 600; font-style: italic; src: url('fonts/WorkSans-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 700; font-style: normal; src: url('fonts/WorkSans-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 700; font-style: italic; src: url('fonts/WorkSans-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 800; font-style: normal; src: url('fonts/WorkSans-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 800; font-style: italic; src: url('fonts/WorkSans-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 900; font-style: normal; src: url('fonts/WorkSans-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Work Sans'; font-weight: 900; font-style: italic; src: url('fonts/WorkSans-BlackItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---- Core palette -------------------------------------------------- */
  /* Navy — primary brand color. Hero bg, primary text, primary actions. */
  --qd-navy-900: #0B1F33;
  --qd-navy-800: #122A42;
  --qd-navy-700: #1C3A56;
  --qd-navy-600: #2A4D6E;
  --qd-navy-500: #3E6689;

  /* Paper — warm off-white, never pure white. Primary light surface. */
  --qd-paper-50:  #FAF7F1;
  --qd-paper-100: #F3EEE3;
  --qd-paper-200: #E8E1D2;
  --qd-paper-300: #D8CFBB;

  /* Slate — warm gray neutrals. Body text workhorse. */
  --qd-slate-900: #1A1F26;
  --qd-slate-700: #3E4652;
  --qd-slate-500: #6A7280;
  --qd-slate-300: #A8ADB6;
  --qd-slate-200: #C9CDD4;
  --qd-slate-100: #E4E6EA;

  /* Brass — restrained warm accent. Rules, marks, small emphasis,
     pull-quote borders. Never a CTA. Never a background. */
  --qd-brass-700: #8C6A2B;
  --qd-brass-500: #B8913F;
  --qd-brass-300: #D9B776;
  --qd-brass-100: #F0E3C4;

  /* Signal blue — from the Q mark. Logo only + rare interaction moments. */
  --qd-signal-500: #30A3D9;
  --qd-signal-700: #1E7AA8;

  /* Seafoam and Sand Gold (legacy) are retired. Brass and paper tones
     replace them. Aliases below keep any earlier component code working
     without reintroducing the retired hues. */
  --qd-gold-700: var(--qd-brass-700);
  --qd-gold-500: var(--qd-brass-500);
  --qd-gold-300: var(--qd-brass-300);
  --qd-gold-100: var(--qd-brass-100);
  --qd-azure-500: var(--qd-signal-500);
  --qd-azure-700: var(--qd-signal-700);
  --qd-azure-300: #8BC9E5;
  --qd-azure-100: #D7ECF6;
  --qd-seafoam-700: var(--qd-brass-700);
  --qd-seafoam-500: var(--qd-brass-500);
  --qd-seafoam-300: var(--qd-brass-300);
  --qd-seafoam-100: var(--qd-brass-100);

  /* ---- Semantic foreground / background ----------------------------- */
  --fg-1: var(--qd-navy-900);     /* primary text on paper */
  --fg-2: var(--qd-slate-700);    /* body text */
  --fg-3: var(--qd-slate-500);    /* tertiary / captions */
  --fg-inverse: var(--qd-paper-50); /* text on navy */
  --fg-muted-inverse: rgba(250, 247, 241, 0.72);

  --bg-1: var(--qd-paper-50);     /* page */
  --bg-2: var(--qd-paper-100);    /* card / raised surface */
  --bg-3: var(--qd-paper-200);    /* quiet surface */
  --bg-dark: var(--qd-navy-900);  /* inverse page */
  --bg-dark-2: var(--qd-navy-800);

  --border-1: var(--qd-paper-300);
  --border-2: var(--qd-slate-200);
  --border-dark: rgba(250, 247, 241, 0.14);

  --accent: var(--qd-brass-500);
  --accent-strong: var(--qd-brass-700);

  /* ---- Type families ------------------------------------------------- */
  /* Primary: Work Sans as a Scandia Web substitute. Geometric sans,
     wide weight range, reads clean without feeling cold. */
  --font-sans: 'Work Sans', 'Scandia Web', -apple-system, BlinkMacSystemFont,
               'Helvetica Neue', Arial, sans-serif;
  /* Editorial accent: Fraunces for the occasional display moment —
     a pull quote, a numeral. Use sparingly. */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type scale ---------------------------------------------------- */
  /* Weight contrast is the signature: hairline/regular headers against
     semibold accents, or semibold heads against regular body. */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --size-display: clamp(3.25rem, 6vw, 5.5rem);    /* hero */
  --size-h1:      clamp(2.25rem, 4vw, 3.5rem);
  --size-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --size-h3:      1.5rem;
  --size-h4:      1.25rem;
  --size-body-lg: 1.125rem;
  --size-body:    1rem;
  --size-small:   0.875rem;
  --size-micro:   0.75rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;  /* for eyebrow / section labels */

  /* ---- Spacing / radius / elevation --------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11, 31, 51, 0.06);
  --shadow-2: 0 2px 8px rgba(11, 31, 51, 0.08), 0 1px 2px rgba(11, 31, 51, 0.04);
  --shadow-3: 0 12px 32px rgba(11, 31, 51, 0.12), 0 2px 6px rgba(11, 31, 51, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0.0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */

.qd-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--size-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.qd-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);            /* hairline heroes */
  font-size: var(--size-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.qd-display em {
  font-style: normal;
  font-weight: var(--fw-semibold);         /* weight-contrast accent */
}

.qd-h1 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--size-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.qd-h2 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--size-h2); line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--fg-1); }
.qd-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--size-h3); line-height: var(--lh-snug); color: var(--fg-1); }
.qd-h4 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--size-h4); line-height: var(--lh-snug); color: var(--fg-1); }

.qd-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--size-micro);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.qd-lede   { font-size: var(--size-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); font-weight: var(--fw-regular); text-wrap: pretty; }
.qd-p      { font-size: var(--size-body); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; }
.qd-small  { font-size: var(--size-small); line-height: var(--lh-normal); color: var(--fg-3); }

.qd-pullquote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.35;
  color: var(--fg-1);
  text-wrap: balance;
}

.qd-divider {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--sp-6) 0;
}
.qd-divider--brass {
  border-top: 1px solid var(--accent);
  width: 48px;
  margin: 0 0 var(--sp-4);
}