@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Medium.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Marlide Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  size-adjust: 86.56%;
  ascent-override: 104.194%;
  descent-override: 26.571%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Minion Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  font-weight: 400;
  size-adjust: 98%;
  ascent-override: 74.184%;
  descent-override: 27.857%;
  line-gap-override: 20.408%;
}
@font-face {
  font-family: "Minion Fallback";

  src: local("Times New Roman Bold"), local("Liberation Serif Bold"), local("Times New Roman");
  font-weight: 700;
  size-adjust: 97.84%;
  ascent-override: 74.305%;
  descent-override: 27.903%;
  line-gap-override: 20.442%;
}
@font-face {
  font-family: "NHaas Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400;
  size-adjust: 103.63%;
  ascent-override: 78.935%;
  descent-override: 17.562%;
  line-gap-override: 19.299%;
}
@font-face {
  font-family: "NHaas Fallback";

  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Helvetica Bold"), local("Arial");
  font-weight: 700;
  size-adjust: 102.29%;
  ascent-override: 79.969%;
  descent-override: 17.793%;
  line-gap-override: 19.552%;
}

@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-Roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-RomanItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {

  --coastal-900: #252f4a;
  --coastal-800: #3c506f;
  --coastal-700: #5d7fa0;
  --coastal-600: #6b95ba;
  --coastal-500: #6b95ba;
  --coastal-400: #89adc8;
  --coastal-300: #a7c4d8;
  --coastal-200: #c9dce8;
  --coastal-100: #e8f0f5;
  --coastal-50:  #f4f8fb;

  --sand-50:  #fdfcfa;
  --sand-100: #faf7f2;
  --sand-200: #f3ede4;
  --sand-300: #e5ddd0;
  --sand-400: #d1c5b4;
  --sand-500: #b5a895;

  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8e8;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --white:    #ffffff;

  --stage-alpha: #EDB4CB;

  --ink-faded: #7e95ae;

  --success: #22c55e;
  --warning: #f59e0b;
  --error:   #ef4444;
  --info:    var(--coastal-600);

  --success-tint: color-mix(in srgb, var(--success) 15%, #fff);
  --success-ink:  color-mix(in srgb, var(--success) 55%, #14161b);
  --warning-tint: color-mix(in srgb, var(--warning) 16%, #fff);
  --warning-ink:  color-mix(in srgb, var(--warning) 50%, #14161b);
  --danger-tint:  color-mix(in srgb, var(--error) 14%, #fff);
  --danger-ink:   color-mix(in srgb, var(--error) 55%, #14161b);
  --info-tint:    color-mix(in srgb, var(--info) 15%, #fff);
  --info-ink:     color-mix(in srgb, var(--info) 55%, #14161b);

  --success-ink-dark: #a9d6b8;
  --danger-ink-dark:  #f2b8b5;

  --cw-blue:           var(--coastal-600);
  --cw-blue-ink:       var(--coastal-700);

  --cw-link:           var(--coastal-700) ;
  --cw-blue-soft:      var(--coastal-400);
  --cw-blue-air:       var(--coastal-300);
  --cw-blue-mist:      var(--coastal-200);
  --cw-blue-paper:     var(--coastal-100);

  --cw-navy:           var(--coastal-900);
  --cw-navy-deep:      #1b2336;

  --cw-masthead-grad-a: var(--cw-navy);
  --cw-masthead-grad-b: var(--cw-navy);
  --cw-masthead-grad:   linear-gradient(135deg, var(--cw-masthead-grad-a) 0%, var(--cw-masthead-grad-b) 100%);

  --cw-chrome-glass:        rgb(37, 47, 74);
  --cw-chrome-glass-filter: none ;
  --cw-navy-ink:       var(--coastal-900);
  --cw-navy-soft:      #9AA8BE;

  --cw-cream:          var(--sand-100);
  --cw-cream-soft:     var(--sand-50);
  --cw-fog:            var(--coastal-50);
  --cw-fog-soft:       var(--coastal-50);
  --cw-desk:           #DDE0E3;
  --cw-sand:           var(--sand-300);
  --cw-stone:          var(--sand-500);

  --cw-ink:            #14161B;
  --cw-graphite:       var(--gray-600);
  --cw-mute:           var(--gray-400);
  --cw-line:           var(--gray-200);
  --cw-line-soft:      var(--gray-100);
  --cw-white:          var(--white);

  --cw-success:        var(--success);
  --cw-warning:        var(--warning);
  --cw-danger:         var(--error);
  --cw-info:           var(--coastal-600);

  --bg:                var(--cw-white);

  --fg1:               var(--cw-navy-ink);
  --fg2:               var(--cw-graphite);
  --fg3:               #646A70;

  --line:              var(--cw-line);
  --line-soft:         var(--cw-line-soft);

  --surface-cream:     var(--sand-100);
  --surface-fog:       var(--coastal-50);
  --surface-white:     var(--white);
  --surface-paper:     var(--coastal-100);
  --surface-paper-line:var(--coastal-200);
  --surface-navy:      var(--coastal-900);
  --surface-ink:       #1b2336;

  --font-display:      "Marlide Display", "Marlide Fallback", serif;
  --font-body-serif:   "Minion Pro", "Minion Fallback", serif;
  --font-ui:           "NHaasGroteskDSPro", "NHaas Fallback", sans-serif;

  --font-serif:        var(--font-body-serif);
  --font-body:         var(--font-body-serif);
  --font-sans:         var(--font-ui);
  --font-mono:         ui-monospace, monospace;

  --size-xs:           0.8125rem;
  --size-sm:           0.9375rem;
  --size-base:         1.0625rem;
  --size-md:           1.25rem;
  --size-lg:           1.5rem;
  --size-xl:           1.875rem;
  --size-2xl:          2.5rem;
  --size-3xl:          3.5rem;
  --size-4xl:          4.75rem;
  --size-5xl:          6.75rem;

  --text-hero:         clamp(52px, 6vw, 84px);

  --text-slide-headline: 56px;
  --text-display:      48px;
  --text-heading:      28px;
  --text-subheading:   20px;
  --text-body-lg:      18px;
  --text-body:         16px;
  --text-body-sm:      14px;
  --text-caption:      12px;
  --text-overline:     11px;
  --text-micro:        10px;

  --leading-tight:     1.05;
  --leading-snug:      1.2;
  --leading-normal:    1.5;
  --leading-loose:     1.65;
  --leading-hero:      0.94;
  --leading-slide-headline: 1.08;
  --leading-display:   1.05;
  --leading-heading:   1.25;
  --leading-subhead:   1.4;
  --leading-body:      1.65;
  --leading-body-serif:1.75;
  --leading-relaxed:   1.8;

  --tracking-tight:    -0.02em;
  --tracking-display:  -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.5px;
  --tracking-wider:    2px;
  --tracking-widest:   3px;
  --tracking-eyebrow:  0.28em;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  --photo-duotone:        grayscale(1) contrast(1.08) brightness(0.72) ;
  --photo-duotone-light:  grayscale(1) contrast(1.04) brightness(1.02) ;
  --photo-scrim:          grayscale(1) contrast(1.05) brightness(0.7) ;
  --photo-duotone-banner: grayscale(1) contrast(1.1) brightness(1.04) ;

  --photo-scrim-color:    contrast(1.05) brightness(0.7) ;

  --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;
  --space-11:          192px;

  --radius-none:       0px;
  --radius-sm:         2px;
  --radius-md:         4px;
  --radius-lg:         8px;
  --radius-full:       9999px;

  --shadow-sm:         0 1px 3px rgba(37, 47, 74, 0.04);
  --shadow-md:         0 4px 16px rgba(37, 47, 74, 0.06);
  --shadow-lg:         0 12px 40px rgba(37, 47, 74, 0.08);
  --shadow-xl:         0 24px 64px rgba(37, 47, 74, 0.18);
  --shadow-1:          var(--shadow-sm);
  --shadow-2:          var(--shadow-md);
  --shadow-3:          var(--shadow-xl);

  --shadow-ring:       0 0 0 1px rgba(37, 47, 74, 0.08);
  --shadow-ring-sm:    var(--shadow-ring), var(--shadow-sm);
  --shadow-ring-md:    var(--shadow-ring), var(--shadow-md);
  --shadow-ring-lg:    var(--shadow-ring), var(--shadow-lg);
  --shadow-ring-xl:    var(--shadow-ring), var(--shadow-xl);

  --max-width-content: 1200px;
  --max-width-text:    680px;
  --max-width-narrow:  480px;

  --z-base:            1;
  --z-card:            2;
  --z-nav:             10;
  --z-overlay:         100;
  --z-modal:           200;

  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:     200ms;
  --duration-normal:   400ms;
  --ease-coastal:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover:         180ms;

}

html { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-loose);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea,
.chip, .badge, .tag, .pill, .syschip,
.toc, .toc a, .qa-floatcat, .qa-floatcat a,
.rcp-card, .hsw-modal-x, .rcp-lb-close {
  font-family: var(--font-ui);
}

h1, .h1, .display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--cw-navy);
  text-wrap: balance;
}

.display-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 9vw, var(--size-5xl));
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--cw-navy);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--cw-navy);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-xl);
  line-height: var(--leading-snug);
  color: var(--cw-navy);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--cw-navy);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-loose);
  color: var(--fg1);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--size-md);
  line-height: 1.55;
  color: var(--fg1);
  font-style: italic;
}

.eyebrow {
  font-family: var(--font-serif);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
  font-feature-settings: "smcp" on;
}

.num { font-variant-numeric: tabular-nums; }

.caption {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-style: italic;
  color: var(--fg3);
  line-height: 1.45;
}

.pull-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-2xl);
  line-height: 1.15;
  font-style: italic;
  color: var(--cw-navy);
}

a {
  color: var(--cw-navy);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--cw-blue);
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
a:hover {
  color: var(--coastal-700);
  text-decoration-color: var(--cw-navy);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-7) 0;
}

:root {
  --selection-bg: var(--cw-navy);
  --selection-ink: var(--cw-cream);
}
::selection {
  background: var(--selection-bg);
  color: var(--selection-ink);
}
.surface-navy, .surface-ink,
.mast, .qa-banner,
[data-ground="Navy"] {
  --selection-bg: var(--cw-blue-soft);
  --selection-ink: var(--cw-navy);
}

.surface-cream { background: var(--surface-cream); color: var(--cw-navy-ink); }
.surface-fog   { background: var(--surface-fog);   color: var(--cw-navy-ink); }
.surface-white { background: var(--surface-white); color: var(--cw-navy-ink); }
.surface-paper { background: var(--surface-paper); color: var(--cw-navy-ink); }
.surface-paper .hairline,
.surface-paper hr { border-color: var(--surface-paper-line); }
.surface-navy  { background: var(--surface-navy);  color: #FFFFFF; }
.surface-ink   { background: var(--surface-ink);   color: #FFFFFF; }

.surface-navy h1, .surface-navy h2, .surface-navy h3, .surface-navy .display, .surface-navy .display-hero,.surface-ink  h1, .surface-ink  h2, .surface-ink  h3, .surface-ink  .display, .surface-ink  .display-hero { color: #FFFFFF; }
.surface-navy p, .surface-navy .body, .surface-navy .lead,
.surface-ink  p, .surface-ink  .body, .surface-ink  .lead { color: rgba(255, 255, 255, 0.88); }
.surface-navy .eyebrow, .surface-ink .eyebrow { color: var(--cw-blue-air); opacity: 1; }
.surface-navy a, .surface-ink a { color: #FFFFFF; text-decoration-color: var(--cw-blue-soft); }

.surface-navy.warm p, .surface-navy.warm .body, .surface-navy.warm .lead,
.surface-ink.warm  p, .surface-ink.warm  .body, .surface-ink.warm  .lead { color: rgba(245, 239, 230, 0.86); }

.eyebrow-compass { display: inline-flex; align-items: center; gap: 0.7em; }
.eyebrow-compass::before {
  content: "";
  width: 1.25em; height: 1.25em;
  background: url("./assets/compass-star-navy.png") center/contain no-repeat;
  flex: 0 0 auto;
}
.surface-navy .eyebrow-compass::before,
.surface-ink .eyebrow-compass::before { display: none; }

.display-pair .display,
.display-pair .display-hero { margin-bottom: 0.28em; }
.cardo-sub {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--size-lg);
  line-height: 1.4;
  color: var(--fg1);
}
.surface-navy .cardo-sub, .surface-ink .cardo-sub { color: rgba(245, 239, 230, 0.9); }

.display .accent-blue, .display-hero .accent-blue, h1 .accent-blue, h2 .accent-blue {
  font-style: italic;
  color: var(--cw-blue-ink);
}
.surface-navy .accent-blue, .surface-ink .accent-blue { color: var(--cw-blue-air); }

.title-blur { position: relative; overflow: hidden; }
.title-blur-bg {
  position: absolute; inset: -60px;
  background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.15) brightness(0.96);
  transform: scale(1.14);
}
.title-blur-wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(37,47,74,0.92) 0%, rgba(37,47,74,0.74) 30%,
    rgba(37,47,74,0.34) 54%, rgba(37,47,74,0.06) 76%, rgba(37,47,74,0) 100%);
}
.title-blur > :not(.title-blur-bg):not(.title-blur-wash) { position: relative; z-index: 2; }

.num-badge {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--cw-navy); color: var(--cw-cream);
  font-family: var(--font-display); font-size: var(--size-xl);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

.rag { padding: 8px 0; text-align: center; font-family: var(--font-serif);
  font-size: var(--size-xs); letter-spacing: 0.22em; text-transform: uppercase; }
.rag-ahead   { background: var(--success-tint); color: var(--success-ink); }
.rag-onpace  { background: var(--warning-tint); color: var(--warning-ink); }
.rag-behind  { background: var(--danger-tint);  color: var(--danger-ink); }
.rag-climb   { background: var(--info-tint);    color: var(--info-ink); }