/* ==========================================================================
   SCHERRE TYPOGRAPHY SYSTEM (css/typography.css)
   Single Source of Truth for Design Tokens & Utility Classes
   
   Core Families:
   - AT Aero (Sans): Variable weights 100-900 (--font-aero)
   - F3 Mono (Monospace): Fixed uppercase data display (--font-mono)
   
   Preset Scale:
   - .type-aero-a : 38px / 40px / -1.6px (Display Hero Headlines)
   - .type-aero-b : 28px / 32px / -1.4px (Section Subheadlines & Bio)
   - .type-aero-c : 20px / 23.6px / -1.2px (Project Card Titles)
   - .type-aero-d : 24px / 28px / -1.0px (Signature & Accents)
   - .type-aero-e : 14px / 20px / -0.6px (Body Text, Metadata, Deliverables)
   - .type-aero-f : 16px / 16px / -0.3px (Pill Buttons & Floating CTA)
   - .type-mono-a : 11px / 11px / 0.5px (Status Lines, Live Clocks, Badges)
   - .type-mono-b : 10px / 10px / 0.4px (Micro Indices & Footnotes)
   
   RULE 6: All new text elements MUST be linked to these classes.
   Do not introduce divergent inline or standalone typography rules without approval.
   ========================================================================== */

/* ==========================================================================
   AT Aero — Exact Local OTF Webfonts
   ========================================================================== */
@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Air.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-AirItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-ThinItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: local("At Aero Retina"), local("AtAero-Retina"), url("../assets/fonts/AtAero-Retina.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: local("At Aero Retina Italic"), local("AtAero-RetinaItalic"), url("../assets/fonts/AtAero-RetinaItalic.otf") format("opentype");
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero Retina";
  src: local("At Aero Retina"), local("AtAero-Retina"), url("../assets/fonts/AtAero-Retina.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero Retina";
  src: local("At Aero Retina Italic"), local("AtAero-RetinaItalic"), url("../assets/fonts/AtAero-RetinaItalic.otf") format("opentype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "At Aero Retina";
  src: local("At Aero Retina"), local("AtAero-Retina"), url("../assets/fonts/AtAero-Retina.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Super.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Aero";
  src: url("../assets/fonts/AtAero-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Aliases: Also map "Neue Haas Grotesk Display Pro" and "Neue Haas Grotesk Display" to AT Aero */
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/AtAero-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/AtAero-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/AtAero-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/AtAero-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../assets/fonts/AtAero-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../assets/fonts/AtAero-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../assets/fonts/AtAero-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../assets/fonts/AtAero-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Inter Display Webfonts Fallback */
@font-face {
  font-family: "Inter Display";
  src: url("https://framerusercontent.com/assets/gazZKZuUEtvr9ULhdA4SprP0AZ0.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("https://framerusercontent.com/assets/ePuN3mCjzajIHnyCdvKBFiZkyY0.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("https://framerusercontent.com/assets/I11LrmuBDQZweplJ62KkVsklU5Y.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Authentic Neue Haas Display for Geometric Symbols & Underscores */
@font-face {
  font-family: "Neue Haas Real";
  src: url("../assets/fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Real";
  src: url("../assets/fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Real";
  src: url("../assets/fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* PP Supply Mono — Local OTF Webfonts & OS Local Lookups */
@font-face {
  font-family: "PP Supply Mono";
  src: local("PP Supply Mono"),
    local("PP Supply Mono Regular"),
    local("PPSupplyMono-Regular"),
    url("../assets/fonts/PPSupplyMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Supply Mono";
  src: local("PP Supply Mono Italic"),
    local("PPSupplyMono-RegularItalic"),
    local("PPSupplyMono-Italic"),
    url("../assets/fonts/PPSupplyMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Supply Mono";
  src: local("PP Supply Mono Medium"),
    local("PPSupplyMono-Medium"),
    url("../assets/fonts/PPSupplyMono-Regular.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Supply Mono";
  src: local("PP Supply Mono Bold"),
    local("PPSupplyMono-Bold"),
    url("../assets/fonts/PPSupplyMono-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PPSupplyMono-Regular";
  src: local("PP Supply Mono"),
    local("PP Supply Mono Regular"),
    local("PPSupplyMono-Regular"),
    url("../assets/fonts/PPSupplyMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Supply Mono";
  src: local("Supply-Light"),
    local("PP Supply Mono Light"),
    url("../assets/fonts/Supply-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Supply-Light";
  src: local("Supply-Light"),
    local("PP Supply Mono Light"),
    url("../assets/fonts/Supply-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     MANUAL FOOTER GAP CONTROLS: Adjust distance between socials and @_phnm._
     Edit the values below to change the spacing directly in code:
     ========================================================================== */
  --f3-footer-signature-margin-top: 105px;
  /* <-- TWEAK THIS: Distance/padding between socials and giant @_phnm._ (e.g. 50px, 80px, 130px, 180px) */
  --f3-footer-signature-margin-bottom: clamp(24px, 4vh, 48px);
  /* Gap below @_phnm._ before bottom colophon line */
  --f3-footer-signature-offset-y: -4px;
  /* Micro vertical alignment offset */

  /* ==========================================================================
     MANUAL PROJECT MODAL CONTROLS: Context box width & sizing
     Edit the value below to change the box width directly in code:
     ========================================================================== */
  --pm-context-box-width: 360px;
  /* <-- TWEAK THIS: Width of project metadata/context box (e.g. 300px, 340px, 360px, 400px, 440px) */
  --project-box-width: var(--pm-context-box-width);
  --pm-indicator-right: 25px;
  /* <-- TWEAK THIS: Right margin of modal scroller indicator (e.g. 25px) */

  /* Standard Easing Curves & Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.15, 1);
  --transition-cover-speed: 0.48s;
  --transition-reveal-speed: 0.52s;
  --transition-cover-ease: cubic-bezier(0.65, 0, 0.15, 1);
  --transition-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'AT Aero', 'At Aero', 'AtAero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-nav: 'AT Aero', 'At Aero', 'AtAero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-sans: 'AT Aero', 'At Aero', 'AtAero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-retina: 'AT Aero Retina', 'At Aero Retina', 'AtAero-Retina', 'AT Aero', 'At Aero', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-serif-italic: 'Playfair Display', Georgia, serif;
  --font-mono: 'PP Supply Mono', 'PPSupplyMono-Regular', 'Sometype Mono', 'Share Tech Mono', Menlo, Monaco, Consolas, monospace;
  --mono-font-size: 11px;
  --mono-font-weight: 400;
  --mono-letter-spacing: 0.5px;

  /* Global Hero Layout Margins */
  --hero-margin: 25px;

  /* Navigation Typography, Boldness & Gaps */
  --nav-font-size: 14px;
  --nav-font-weight: 500;
  --nav-line-height: 16px;
  --nav-letter-spacing: -0.8px;
  --nav-item-gap: 56px;
  --nav-padding-y: 13px;
  --nav-padding-x: 25px;

  /* Live Clock Typography & Green Dot */
  --clock-font-size: 12.5px;
  --clock-font-weight: 400;
  --clock-letter-spacing: -0.035em;
  --clock-dot-size: 5.5px;
  --clock-dot-color: #00ff66;

  /* Custom Circle Cursor Settings */
  --cursor-size: 16px;

  /* ==========================================================================
     STANDARDIZED TYPOGRAPHY PRESETS (DESKTOP & MOBILE CONTROLS)
     Edit desktop or mobile values directly here to update the live site!
     ========================================================================== */
  /* At Aero Type A (Manifesto / Hero Statements) */
  --type-aero-a-font: var(--font-retina, 'AT Aero Retina', 'AT Aero', sans-serif);
  --type-aero-a-weight: 350;
  --type-aero-a-size: 43px;
  --type-aero-a-line: 49px;
  --type-aero-a-spacing: -2px;
  /* Mobile (< 1024px) */
  --type-aero-a-mobile-size: 30px;
  --type-aero-a-mobile-line: 36px;
  --type-aero-a-mobile-spacing: -1px;

  /* At Aero Type B (Section Titles / Headlines / Editorial Subtitles) */
  --type-aero-b-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-b-weight: 400;
  --type-aero-b-size: 30px;
  --type-aero-b-line: 38px;
  --type-aero-b-spacing: -1px;
  /* Mobile (< 1024px) */
  --type-aero-b-mobile-size: 24px;
  --type-aero-b-mobile-line: 28px;
  --type-aero-b-mobile-spacing: -0.8px;

  /* At Aero Type C (Card Titles / Subheaders / Body Emphases) */
  --type-aero-c-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-c-weight: 400;
  --type-aero-c-size: 20px;
  --type-aero-c-line: 30px;
  --type-aero-c-spacing: -0.8px;
  /* Mobile (< 1024px) */
  --type-aero-c-mobile-size: 16px;
  --type-aero-c-mobile-line: 22px;
  --type-aero-c-mobile-spacing: -0.55px;

  /* At Aero Type D (Giant Display Signatures / Billboard Headlines) */
  --type-aero-d-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-d-weight: 500;
  --type-aero-d-size: 230px;
  --type-aero-d-line: 230px;
  --type-aero-d-spacing: -17px;
  /* Mobile (< 1024px) */
  --type-aero-d-mobile-size: 184px;
  --type-aero-d-mobile-line: 184px;
  --type-aero-d-mobile-spacing: -13.6px;

  /* At Aero Type E (Metadata / Action Links / Navigation Subtext) */
  --type-aero-e-font: var(--font-retina, 'AT Aero Retina', 'AT Aero', sans-serif);
  --type-aero-e-weight: 350;
  --type-aero-e-size: 14.5px;
  --type-aero-e-line: 20px;
  --type-aero-e-spacing: -0.3px;
  /* Mobile (< 1024px) */
  --type-aero-e-mobile-size: 11.6px;
  --type-aero-e-mobile-line: 16px;
  --type-aero-e-spacing: -0.1px;

  /* At Aero Type F (Body / Form Labels & Inputs / General Interface) */
  --type-aero-f-font: var(--font-primary, 'AT Aero', sans-serif);
  --type-aero-f-weight: 400;
  --type-aero-f-size: 16px;
  --type-aero-f-line: 22px;
  --type-aero-f-spacing: -0.3px;
  /* Mobile (< 1024px) */
  --type-aero-f-mobile-size: 12.8px;
  --type-aero-f-mobile-line: 17.6px;
  --type-aero-f-spacing: -0.15px;

  /* PP Supply Mono Type A (Colophon / Live Clocks / Badges / Status Tags) */
  --type-mono-a-font: var(--font-mono, 'PP Supply Mono', monospace);
  --type-mono-a-weight: 400;
  --type-mono-a-size: 11px;
  --type-mono-a-line: 13px;
  --type-mono-a-spacing: 0.5px;
  /* Mobile (< 1024px) */
  --type-mono-a-mobile-size: 9.35px;
  --type-mono-a-mobile-line: 11.05px;
  --type-mono-a-mobile-spacing: 0.425px;

  /* PP Supply Mono Light (For Buttons, Badges, and Tags) */
  --font-mono-light: 'Supply-Light', 'PP Supply Mono', 'PPSupplyMono-Regular', monospace;
  --type-mono-light-font: var(--font-mono-light);
  --type-mono-light-weight: 300;

  /* ==========================================================================
     UNIVERSAL RECTANGLE BUTTON & TAG DIMENSION CONTROLS
     Change height, side padding, or min-width here to update the entire site
     ========================================================================== */
  --rect-btn-height: 22px;
  --rect-btn-padx: 8px;
  --rect-btn-min-width: auto;
  --rect-btn-gap: 11px;

  /* Standardized Monospace Tag & Button Dimension Tokens (Linked to Master) */
  --mono-tag-height: var(--rect-btn-height, 22px);
  --mono-pill-height: var(--rect-btn-height, 22px);
  --mono-cap-offset: 0px;
  --mono-cap-padding-top: 0px;
  --mono-cap-padding-bottom: 0px;

  /* ==========================================================================
     MOBILE NAVIGATION BAR CONTROLS (< 1024px)
     Adjust navbar logo size/height and width directly here
     ========================================================================== */
  --nav-logo-mobile-size: 30px;
  /* <-- TWEAK THIS: Height/size of logo in mobile nav bar (e.g. 24px, 28px, 32px) */
  --nav-logo-mobile-width: auto;
  /* <-- TWEAK THIS: Width of logo (keep auto for proportional scaling, or set px) */

  /* ==========================================================================
     MOBILE DROPDOWN MENU NAVIGATION LINKS (< 1024px)
     Adjust font size, link gap/spacing, line height, and letter spacing directly here
     ========================================================================== */
  --mobile-nav-link-font-size: 30px;
  /* <-- TWEAK THIS: Text size of dropdown navigation links (e.g. 30px, 34px, 38px, 42px) */
  --mobile-nav-link-gap: 5px;
  /* <-- TWEAK THIS: Spacing/gap between each navigation link (e.g. 5px, 8px, 12px) */
  --mobile-nav-link-line-height: 1.1;
  /* <-- TWEAK THIS: Line height of navigation links (e.g. 1.0, 1.1, 1.2) */
  --mobile-nav-link-letter-spacing: -0.02em;
  /* <-- TWEAK THIS: Letter spacing of navigation links (e.g. -0.02em, 0em) */
  --mobile-nav-ongoing-font-size: 14.5px;
  /* <-- TWEAK THIS: Text size of 'Ongoing projects' in mobile menu (e.g. 13px, 14px, 14.5px, 15px) */
  --mobile-nav-clock-font-size: 12px;
  /* <-- TWEAK THIS: Text size of live studio clock in mobile menu (e.g. 11px, 12px, 13px) */
}

/* ==========================================================================
   TYPOGRAPHY PRESET UTILITY CLASSES
   ========================================================================== */
.type-aero-a {
  font-family: var(--type-aero-a-font);
  font-weight: var(--type-aero-a-weight);
  font-size: var(--type-aero-a-size);
  line-height: var(--type-aero-a-line);
  letter-spacing: var(--type-aero-a-spacing);
}

.type-aero-b {
  font-family: var(--type-aero-b-font);
  font-weight: var(--type-aero-b-weight);
  font-size: var(--type-aero-b-size);
  line-height: var(--type-aero-b-line);
  letter-spacing: var(--type-aero-b-spacing);
}

.type-aero-c {
  font-family: var(--type-aero-c-font);
  font-weight: var(--type-aero-c-weight);
  font-size: var(--type-aero-c-size);
  line-height: var(--type-aero-c-line);
  letter-spacing: var(--type-aero-c-spacing);
}

.type-aero-d {
  font-family: var(--type-aero-d-font);
  font-weight: var(--type-aero-d-weight);
  font-size: var(--type-aero-d-size);
  line-height: var(--type-aero-d-line);
  letter-spacing: var(--type-aero-d-spacing);
}

.type-aero-d .neue-haas-underscore {
  margin-left: var(--f3-footer-underscore-margin-left, 0px);
  margin-right: var(--f3-footer-underscore-margin-right, 0px);
}

.type-aero-d .neue-haas-underscore.underscore-1 {
  margin-left: var(--f3-footer-underscore-1-margin-left, var(--f3-footer-underscore-margin-left, 0px));
  margin-right: var(--f3-footer-underscore-1-margin-right, var(--f3-footer-underscore-margin-right, 0px));
}

.type-aero-d .neue-haas-underscore.underscore-2 {
  margin-left: var(--f3-footer-underscore-2-margin-left, var(--f3-footer-underscore-margin-left, 0px));
  margin-right: var(--f3-footer-underscore-2-margin-right, var(--f3-footer-underscore-margin-right, 0px));
}

.type-aero-e {
  font-family: var(--type-aero-e-font);
  font-weight: var(--type-aero-e-weight);
  font-size: var(--type-aero-e-size);
  line-height: var(--type-aero-e-line);
  letter-spacing: var(--type-aero-e-spacing);
}

.type-aero-f {
  font-family: var(--type-aero-f-font);
  font-weight: var(--type-aero-f-weight);
  font-size: var(--type-aero-f-size);
  line-height: var(--type-aero-f-line);
  letter-spacing: var(--type-aero-f-spacing);
}

.type-mono-a {
  font-family: var(--type-mono-a-font);
  font-weight: var(--type-mono-a-weight);
  font-size: var(--type-mono-a-size);
  line-height: var(--type-mono-a-line);
  letter-spacing: var(--type-mono-a-spacing);
  text-transform: uppercase;
}

body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: calc(-0.015em - 0.7px);
  color: #faf9fc;
  background-color: #030303;
}


/* Nav Typography - Exact Inter Display */
.hero-top-nav,
.site-nav-top,
.hero-nav-brand,
.hero-nav-link,
.hero-nav-stack,
.nav-text {
  font-family: var(--font-nav);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  line-height: var(--nav-line-height);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: #faf9fc;
}