@font-face { font-family: "Averta"; src: url("fonts/averta-pe-thin.otf")       format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-extrathin.otf")  format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-light.otf")      format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-regular.otf")    format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-medium.otf")     format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-semibold.otf")   format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-bold.otf")       format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-extrabold.otf")  format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("fonts/averta-pe-black.otf")      format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  
  --ink-900: #001624;         
  --ink-800: #002A42;         
  --ink-700: #0A3A55;         
  --ink-600: #12465F;         

  --moss-700: #2A4744;        
  --moss-600: #3D5B58;        
  --moss-500: #547370;

  --bone-100: #FAFAFA;        
  --bone-200: #F1F1EE;        
  --bone-300: #DFE5E5;        

  --steel-500: #A4AEBE;       
  --steel-400: #BEC5C4;       
  --steel-600: #8C9998;       
  --steel-700: #66778D;       

  --signal:     #FA404F;      
  --signal-dim: #C12B38;

  --black:  #000000;
  --white:  #FFFFFF;

  --bg:            var(--ink-800);
  --bg-alt:        var(--ink-900);
  --bg-inverse:    var(--bone-100);
  --surface-raised:#0E3550;

  --fg:            var(--bone-100);
  --fg-muted:      #7E95A5;           
  --fg-faint:      #4F6A7C;
  --fg-inverse:    var(--ink-800);

  --rule:          rgba(250, 250, 250, 0.10);
  --rule-strong:   rgba(250, 250, 250, 0.22);
  --rule-dark:     rgba(0, 22, 36, 0.12);

  --accent:        var(--signal);

  --ff-sans: "Averta", "Averta PE", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display-xl: clamp(3.5rem, 10.5vw, 11.5rem);  
  --fs-display-l:  clamp(3rem, 7vw, 7rem);
  --fs-display-m:  clamp(2.25rem, 4.6vw, 4.25rem);
  --fs-h1:         clamp(2rem, 3.4vw, 3rem);
  --fs-h2:         clamp(1.5rem, 2.2vw, 2rem);
  --fs-h3:         1.25rem;
  --fs-body-l:     1.0625rem;   
  --fs-body:       0.9375rem;   
  --fs-body-s:     0.8125rem;   
  --fs-micro:      0.6875rem;   
  --fs-nano:       0.625rem;    

  --lh-tight:  0.92;
  --lh-snug:   1.08;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-body:    -0.005em;
  --ls-label:   0.14em;         
  --ls-tele:    0.22em;

  --s-0:   0;
  --s-1:   0.25rem;    
  --s-2:   0.5rem;     
  --s-3:   0.75rem;    
  --s-4:   1rem;       
  --s-5:   1.5rem;     
  --s-6:   2rem;       
  --s-7:   3rem;       
  --s-8:   4rem;       
  --s-9:   6rem;       
  --s-10:  8rem;       
  --s-11: 12rem;       

  --container:   96rem;        
  --gutter:      clamp(1.25rem, 3.2vw, 3rem);
  --col-gap:     clamp(0.75rem, 1.2vw, 1.5rem);
  --header-h:    72px;
  --header-h-scrolled: 56px;

  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;
  --bw: 1px;

  --sh-1: 0 1px 0 rgba(0,0,0,0.04);
  --sh-2: 0 12px 40px -12px rgba(0, 22, 36, 0.45);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;
  --dur-vslow:   1200ms;
  --dur-reveal:  900ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "kern" 1;
}

::selection { background: rgba(0, 22, 36, 0.18); color: inherit; }

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

a { color: inherit; text-decoration: none; }

.t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 900; }
.t-display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 900; }
.t-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-snug);  letter-spacing: var(--ls-heading); font-weight: 800; }

.t-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}

.t-tele {
  font-family: var(--ff-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-tele);
  text-transform: uppercase;
  color: var(--fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
  opacity: 0.6;
}