/* Self-hosted fonts (Montserrat + Lora, latin + latin-ext) */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Lora-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Lora-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Lora-500i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Lora-500i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Lora-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Lora-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Lora-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Lora-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Lora-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Lora-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Montserrat-500i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Montserrat-500i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Montserrat-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Montserrat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Montserrat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Montserrat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Austrian Defence Lab (ADL) — Colors & Type
   Foundation tokens for all ADL surfaces.
   Headings & UI: Montserrat   ·   Body copy: Lora
   Base color: a strong, professional blue used in tonal shades.
   ===================================================================== */

/* Fonts (Montserrat + Lora) are loaded via <link rel="preconnect"> + stylesheet
   in index.html <head> for faster first paint. If self-hosting, drop .woff2 files
   into fonts/ and add @font-face blocks pointing at them. */

:root {
  /* ---------- Brand blue scale (vibrant, tonal) ---------- */
  --blue-50:  #F1F7FC;
  --blue-100: #DCEBF8;
  --blue-200: #B7D7F0;
  --blue-300: #8BBEE6;
  --blue-400: #5BAAE0;   /* emblem light arc */
  --blue-500: #2486CE;   /* bright / interactive */
  --blue-600: #1565A8;   /* PRIMARY brand blue */
  --blue-700: #0E3D66;   /* deep navy — emblem outer arc, headings */
  --blue-800: #0B2C4D;
  --blue-900: #071E36;   /* near-black ink-blue */

  /* ---------- Supporting accent (sparse — data viz / categories only) ---------- */
  --teal-500: #1AA295;   /* echoes the SDSN-family motif; use sparingly */
  --teal-100: #DCF1EE;

  /* ---------- Categorical topic accents (soft tint + saturated text) ----------
     Restrained, professional hues for distinguishing topic tags. Each pairs a
     light background (-bg) with a legible label colour (-fg). On-brand blue stays
     the lead; the others read as clearly different categories. */
  --cat-security-bg:  #E6F1FA;  --cat-security-fg:  #0E3D66;  /* Sicherheitspolitik — blue   */
  --cat-economy-bg:   #DCF1EE;  --cat-economy-fg:   #0C6256;  /* Verteidigungsökonomie — teal */
  --cat-geo-bg:       #E8E9F8;  --cat-geo-fg:       #383F9B;  /* Geopolitik — indigo          */
  --cat-europe-bg:    #F7EBD8;  --cat-europe-fg:    #8A5408;  /* Europ. Verteidigung — ochre  */
  --cat-society-bg:   #E2F0E5;  --cat-society-fg:   #2C6A43;  /* Gesellschaft & Resilienz — green */

  /* ---------- Neutrals (cool, light, professional) ---------- */
  --ink:       #0F2233;
  --slate-700: #2F4250;
  --slate-600: #465866;
  --slate-500: #6B7C89;
  --slate-400: #93A2AD;
  --slate-300: #C4D0D8;
  --slate-200: #DEE6EB;
  --slate-100: #EEF3F6;
  --white:     #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --bg:          #FFFFFF;
  --bg-soft:     #F5F9FC;   /* faint blue-tinted section bg */
  --bg-tint:     #F1F7FC;   /* blue-50 wash */
  --surface:     #FFFFFF;
  --surface-2:   #F5F9FC;
  --overlay-ink: rgba(7,30,54,0.55);

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--ink);        /* primary text */
  --fg-2: var(--slate-600);  /* secondary text */
  --fg-3: var(--slate-500);  /* muted / captions */
  --fg-on-brand: #FFFFFF;
  --fg-heading: var(--blue-700);

  /* ---------- Semantic brand roles ---------- */
  --primary:        var(--blue-600);
  --primary-hover:  var(--blue-700);
  --primary-active: var(--blue-800);
  --primary-bright: var(--blue-500);
  --link:           var(--blue-600);
  --link-hover:     var(--blue-700);

  /* ---------- Borders & lines ---------- */
  --border:        #E5ECF1;
  --border-strong: #D2DCE3;
  --divider:       #EEF3F6;

  /* ---------- Status (muted, professional) ---------- */
  --success: #2E7D57;
  --warning: #B97A12;
  --danger:  #B23B33;
  --info:    var(--blue-600);

  /* ---------- Typography families ---------- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  --font-logo:    'Lora', Georgia, 'Times New Roman', serif; /* logo wordmark — serif, lowercase */

  /* ---------- Type scale (fluid) ---------- */
  --text-display: clamp(44px, 6vw, 72px);
  --text-h1:      clamp(34px, 4.4vw, 52px);
  --text-h2:      clamp(27px, 3.1vw, 38px);
  --text-h3:      clamp(21px, 2.1vw, 27px);
  --text-h4:      20px;
  --text-lead:    clamp(18px, 1.5vw, 21px);
  --text-body:    17px;
  --text-small:   14.5px;
  --text-eyebrow: 12.5px;
  --text-caption: 12.5px;

  /* ---------- Weights ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;   /* heaviest weight in use across the brand */
  --w-bold:    600;   /* capped at 600 — ADL headings never exceed SemiBold */
  --w-black:   600;   /* capped at 600 */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii (crisp, moderate) ---------- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ---------- Elevation (soft, light) ---------- */
  --shadow-sm: 0 1px 2px rgba(15,34,51,0.06);
  --shadow:    0 2px 8px rgba(15,34,51,0.07), 0 1px 2px rgba(15,34,51,0.05);
  --shadow-md: 0 8px 24px rgba(15,34,51,0.09);
  --shadow-lg: 0 18px 48px rgba(11,44,77,0.13);
  --ring:      0 0 0 3px rgba(36,134,206,0.32);

  /* ---------- Motion ---------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  320ms;

  /* ---------- Layout ---------- */
  --container: 1180px;
  --container-narrow: 760px;
}

/* =====================================================================
   Semantic element styles — opt in with class="adl-type" on a wrapper,
   or copy these rules into your own stylesheet.
   ===================================================================== */
.adl-type {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.72;
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.adl-type h1, .adl-h1,
.adl-type h2, .adl-h2,
.adl-type h3, .adl-h3,
.adl-type h4, .adl-h4 {
  font-family: var(--font-display);
  color: var(--fg-heading);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.adl-type h1, .adl-h1 { font-size: var(--text-h1); font-weight: var(--w-bold); }
.adl-type h2, .adl-h2 { font-size: var(--text-h2); font-weight: var(--w-bold); }
.adl-type h3, .adl-h3 { font-size: var(--text-h3); font-weight: var(--w-bold); letter-spacing: -0.015em; }
.adl-type h4, .adl-h4 { font-size: var(--text-h4); font-weight: var(--w-semi); letter-spacing: -0.01em; }

.adl-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-display);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--fg-heading);
}

.adl-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--w-semi);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}

.adl-lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--fg-2);
}

.adl-type p, .adl-body { margin: 0 0 1em; font-family: var(--font-body); }
.adl-type a, .adl-link { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--blue-200); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.adl-type a:hover, .adl-link:hover { color: var(--link-hover); border-color: var(--blue-400); }

.adl-small   { font-family: var(--font-ui); font-size: var(--text-small); color: var(--fg-2); }
.adl-caption { font-family: var(--font-ui); font-size: var(--text-caption); color: var(--fg-3); letter-spacing: 0.01em; }
.adl-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

blockquote.adl-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--fg-heading);
  border-left: 3px solid var(--primary);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
}