/* =========================================================
   SUVA Type Foundry — Production CSS
   Applied: frontend-design skill
   Aesthetic: Editorial / Swiss Brutalist
   ========================================================= */

/* ── Font Faces ─────────────────────────────────────────── */


@font-face {
    font-family: 'SuisseIntl';
    src: url('fonts/SuisseIntlTrial-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MunkenMono';
    src: url('fonts/MunkenMono4-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NectoMono';
    src: url('fonts/NectoMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apollo';
    src: url('fonts/fonts-for-display/Apollo-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akijo';
    src: url('fonts/fonts-for-display/Akijo_Regular_AAsztalos.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lambiseim';
    src: url('fonts/fonts-for-display/Lambiseim-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tiltortion';
    src: url('fonts/fonts-for-display/Tiltortion.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TirNotMono';
    src: url('fonts/fonts-for-display/tir-notmono.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'gary';
    src: url('fonts/Suva-Fontid/gary.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LEONERegularLMartens';
    src: url('fonts/Suva-Fontid/LEONE-Regular_LMartens.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'igorrounded';
    src: url('fonts/Suva-Fontid/igorrounded.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ApolloRegular';
    src: url('fonts/Suva-Fontid/Apollo-Regular.woff') format('woff'), url('fonts/Suva-Fontid/Apollo-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'dap';
    src: url('fonts/Suva-Fontid/dap.woff') format('woff'), url('fonts/Suva-Fontid/dap.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LambiseimRegular';
    src: url('fonts/Suva-Fontid/Lambiseim-Regular.woff2') format('woff2'), url('fonts/Suva-Fontid/Lambiseim-Regular.woff') format('woff'), url('fonts/Suva-Fontid/Lambiseim-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'susle';
    src: url('fonts/Suva-Fontid/susle.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'broadnibber';
    src: url('fonts/Suva-Fontid/broadnibber.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KetchupAddictRegularBSiim';
    src: url('fonts/Suva-Fontid/KetchupAddict-Regular_BSiim.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KollektiivCollective';
    src: url('fonts/Suva-Fontid/Kollektiiv-Collective.woff') format('woff'), url('fonts/Suva-Fontid/Kollektiiv-Collective.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VarenykyRegular';
    src: url('fonts/Suva-Fontid/Varenyky-Regular.woff2') format('woff2'), url('fonts/Suva-Fontid/Varenyky-Regular.woff') format('woff'), url('fonts/Suva-Fontid/Varenyky-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fiato';
    src: url('fonts/Suva-Fontid/Fiato.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nocturnal';
    src: url('fonts/Suva-Fontid/Nocturnal.woff2') format('woff2'), url('fonts/Suva-Fontid/Nocturnal.woff') format('woff'), url('fonts/Suva-Fontid/Nocturnal.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DoubleBubbleGXAVeiderpass';
    src: url('fonts/Suva-Fontid/DoubleBubbleGX_AVeiderpass.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kykeon';
    src: url('fonts/Suva-Fontid/kykeon.woff') format('woff'), url('fonts/Suva-Fontid/kykeon.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'helipleumon';
    src: url('fonts/Suva-Fontid/helipleumon.woff') format('woff'), url('fonts/Suva-Fontid/helipleumon.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'maurizio';
    src: url('fonts/Suva-Fontid/maurizio.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '2008';
    src: url('fonts/Suva-Fontid/2008.woff') format('woff'), url('fonts/Suva-Fontid/2008.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'vaksal';
    src: url('fonts/Suva-Fontid/vaksal.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YogaRegular';
    src: url('fonts/Suva-Fontid/Yoga-Regular.woff2') format('woff2'), url('fonts/Suva-Fontid/Yoga-Regular.woff') format('woff'), url('fonts/Suva-Fontid/Yoga-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ReinGroteskLight';
    src: url('fonts/Suva-Fontid/ReinGrotesk-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sirkelregular';
    src: url('fonts/Suva-Fontid/sirkel-regular.woff') format('woff'), url('fonts/Suva-Fontid/sirkel-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'newpoetic';
    src: url('fonts/Suva-Fontid/newpoetic.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'rammus';
    src: url('fonts/Suva-Fontid/rammus.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fairytype';
    src: url('fonts/Suva-Fontid/fairytype.woff') format('woff'), url('fonts/Suva-Fontid/fairytype.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JSansv16Regular';
    src: url('fonts/Suva-Fontid/J-Sansv1.6-Regular.woff') format('woff'), url('fonts/Suva-Fontid/J-Sansv1.6-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sigella';
    src: url('fonts/Suva-Fontid/sigella.woff') format('woff'), url('fonts/Suva-Fontid/sigella.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'owlcave';
    src: url('fonts/Suva-Fontid/owlcave.woff') format('woff'), url('fonts/Suva-Fontid/owlcave.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZakRegular';
    src: url('fonts/Suva-Fontid/Z%CC%8Cak_Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'floraandfauna';
    src: url('fonts/Suva-Fontid/floraandfauna.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ofortuna';
    src: url('fonts/Suva-Fontid/ofortuna.woff') format('woff'), url('fonts/Suva-Fontid/ofortuna.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fallengum';
    src: url('fonts/Suva-Fontid/fallengum.woff') format('woff'), url('fonts/Suva-Fontid/fallengum.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kiwi';
    src: url('fonts/Suva-Fontid/kiwi.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'villowplex';
    src: url('fonts/Suva-Fontid/villowplex.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BRNO2016VelloLutterMathiasV22rsi';
    src: url('fonts/Suva-Fontid/BRNO2016_Vello-Lutter%26Mathias-V22rsi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'toiletpapertype';
    src: url('fonts/Suva-Fontid/toiletpapertype.woff') format('woff'), url('fonts/Suva-Fontid/toiletpapertype.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'heavy';
    src: url('fonts/Suva-Fontid/heavy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sens';
    src: url('fonts/Suva-Fontid/sens.woff') format('woff'), url('fonts/Suva-Fontid/sens.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'skeleton';
    src: url('fonts/Suva-Fontid/skeleton.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'shattered';
    src: url('fonts/Suva-Fontid/shattered.woff') format('woff'), url('fonts/Suva-Fontid/shattered.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lazyglamour';
    src: url('fonts/Suva-Fontid/lazyglamour.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DEWYSVGMartinKipper';
    src: url('fonts/Suva-Fontid/DEWY-SVG_Martin%20Kipper.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LeimzyRegular';
    src: url('fonts/Suva-Fontid/Leimzy-Regular.woff2') format('woff2'), url('fonts/Suva-Fontid/Leimzy-Regular.woff') format('woff'), url('fonts/Suva-Fontid/Leimzy-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ornamental';
    src: url('fonts/Suva-Fontid/ornamental.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hypha';
    src: url('fonts/Suva-Fontid/hypha.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AkijoRegularAAsztalos';
    src: url('fonts/Suva-Fontid/Akijo_Regular_AAsztalos.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'franzRegularAVeevo';
    src: url('fonts/Suva-Fontid/franz-Regular_AVeevo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lopsakasregular';
    src: url('fonts/Suva-Fontid/lopsakas-regular.woff') format('woff'), url('fonts/Suva-Fontid/lopsakas-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dahliabold';
    src: url('fonts/Suva-Fontid/Dahlia-bold.woff') format('woff'), url('fonts/Suva-Fontid/Dahlia-bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'thetimesapex';
    src: url('fonts/Suva-Fontid/thetimesapex.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tiltortion';
    src: url('fonts/Suva-Fontid/Tiltortion.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SafariTravellerRegularMVarik';
    src: url('fonts/Suva-Fontid/SafariTraveller-Regular_MVarik.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NapuloRegular';
    src: url('fonts/Suva-Fontid/Napulo-Regular.woff2') format('woff2'), url('fonts/Suva-Fontid/Napulo-Regular.woff') format('woff'), url('fonts/Suva-Fontid/Napulo-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'naps';
    src: url('fonts/Suva-Fontid/naps.woff') format('woff'), url('fonts/Suva-Fontid/naps.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'molot';
    src: url('fonts/Suva-Fontid/molot.woff') format('woff'), url('fonts/Suva-Fontid/molot.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZakImposter';
    src: url('fonts/Suva-Fontid/Z%CC%8Cak_Imposter.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'idreamofletters';
    src: url('fonts/Suva-Fontid/idreamofletters.woff') format('woff'), url('fonts/Suva-Fontid/idreamofletters.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'faktory';
    src: url('fonts/Suva-Fontid/faktory.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'substanta';
    src: url('fonts/Suva-Fontid/substanta.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gogregular';
    src: url('fonts/Suva-Fontid/gog-regular.woff') format('woff'), url('fonts/Suva-Fontid/gog-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hellplague';
    src: url('fonts/Suva-Fontid/hellplague.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'dematerialized';
    src: url('fonts/Suva-Fontid/dematerialized.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dahliathin';
    src: url('fonts/Suva-Fontid/Dahlia-thin.woff') format('woff'), url('fonts/Suva-Fontid/Dahlia-thin.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'radio';
    src: url('fonts/Suva-Fontid/radio.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StereoSans';
    src: url('fonts/Suva-Fontid/StereoSans.woff') format('woff'), url('fonts/Suva-Fontid/StereoSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fontensteinregular';
    src: url('fonts/Suva-Fontid/fontenstein-regular.woff') format('woff'), url('fonts/Suva-Fontid/fontenstein-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CrystalregularIMoltsanov';
    src: url('fonts/Suva-Fontid/Crystal-regular_IMoltsanov.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'barbaraSoniaRuus';
    src: url('fonts/Suva-Fontid/barbara_Sonia%20Ruus.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'flowstate';
    src: url('fonts/Suva-Fontid/flowstate.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sato24PSalmin';
    src: url('fonts/Suva-Fontid/Sato_24_PSalmin.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZakHatless';
    src: url('fonts/Suva-Fontid/Z%CC%8Cak_Hatless.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'imogen';
    src: url('fonts/Suva-Fontid/imogen.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BomberFrakturMathiasV22rsi';
    src: url('fonts/Suva-Fontid/Bomber-Fraktur_Mathias-V22rsi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MadisIgor';
    src: url('fonts/Suva-Fontid/Madis-Igor.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'frisbee';
    src: url('fonts/Suva-Fontid/frisbee.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Volask';
    src: url('fonts/Suva-Fontid/Volask.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lumberjack';
    src: url('fonts/Suva-Fontid/lumberjack.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EscapistDiaries';
    src: url('fonts/Suva-Fontid/Escapist_Diaries.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kevad';
    src: url('fonts/Suva-Fontid/kevad.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'mscurvy';
    src: url('fonts/Suva-Fontid/mscurvy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ReinGroteskRegular';
    src: url('fonts/Suva-Fontid/ReinGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sensiblesenseless';
    src: url('fonts/Suva-Fontid/sensiblesenseless.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'torturastroke';
    src: url('fonts/Suva-Fontid/torturastroke.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PakkonenMathiasV22rsi';
    src: url('fonts/Suva-Fontid/Pakkonen_Mathias-V22rsi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TogiBetaTrialBold';
    src: url('fonts/Suva-Fontid/Togi_Beta_Trial-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Design Tokens ──────────────────────────────────────── */
:root {
    --green: transparent;
    --green-dim: transparent;
    --black: #0a0a09;
    --off-white: #f4f3ef;
    --white: #ffffff;
    --grain-opacity: 0.045;
    --type-section-color: #0a0a09;

    /* Difference mapping variables computed against background #f4f3ef */
    /* Formulas computed as | background - rendered | = target */
    --diff-map-black: #eae9e6;
    /* Outputs as #0a0a09 Black */
    --diff-map-green: #3f9508;
    /* Outputs as #57CD67 Green */
    --diff-map-white: #000000;
    /* Outputs as #f4f3ef White */

    /* Native SVG Custom Cursor */
    --cursor-dot: none;

    /* Hero logo aspect (contain math uses these) */
    --hero-logo-ar-w: 1697.03;
    --hero-logo-ar-h: 1014;
}

/* ── Custom Difference Cursor ───────────────────────────── */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483647;
    mix-blend-mode: difference;
    will-change: transform;
    display: none;
}

/* ── Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ── Selection ──────────────────────────────────────────── */
::selection {
    background-color: var(--green);
    color: var(--black);
}

/* ── Body & Grain ───────────────────────────────────────── */
body {
    background: transparent;
    color: var(--black);
    font-family: 'NectoMono', monospace;
    overflow-x: hidden;
    cursor: var(--cursor-dot);
    /* SVG-based grain noise */
    position: relative;
    /* Removing height bounds so page can scroll */
}

.parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--white);
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: center top;
    z-index: -1;
    pointer-events: none;
}

a,
button {
    cursor: var(--cursor-dot);
}

/* ── Layout Wrappers ─────────────────────────────────────── */
.landing-screen {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 1.5vw 2vw;
    position: relative;
}

/* Full-page grain overlay (Disabled for now) */
/* 
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
}
*/

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

/* ── Typography ─────────────────────────────────────────── */
.green-text {
    color: var(--green);
    font-family: 'SuisseIntl', sans-serif;
    font-weight: normal;
    letter-spacing: -0.01em;
    font-size: 0.6rem;
}

.black-text {
    color: var(--diff-map-black);
    font-family: 'SuisseIntl', sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 0.7rem;
}

.has-grotesk {
    font-family: 'SuisseIntl', sans-serif;
}

.small-body-text {
    font-family: 'NectoMono', monospace;
    font-size: 0.83rem;
    line-height: 1.45;
    letter-spacing: -0.03em;
    margin: 0;
    padding: 0;
}

.email-link {
    color: var(--diff-map-black) !important;
    font-family: 'SuisseIntl', sans-serif !important;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 0.7rem;
    position: fixed;
    bottom: 1.5vw;
    left: 2vw;
    z-index: 20000;
    mix-blend-mode: difference;
}

/* underline slide-in on email hover */
.email-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.email-link:hover::after {
    transform: scaleX(1);
}

/* ── Header / Nav ───────────────────────────────────────── */
.top-nav {
    position: fixed;
    top: 1.5vw;
    left: 2vw;
    right: 2vw;
    z-index: 20000;
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    pointer-events: none;
    mix-blend-mode: difference;
    /* Let clicks pass through empty space */
}

.top-nav>* {
    pointer-events: auto;
    /* Re-enable for links */
}

.nav-right {
    display: flex;
    gap: 3vw;
}

/* nav link hover — green background fill */
.top-nav a {
    position: relative;
    display: inline-block;
    padding: 1px 5px;
    border-radius: 2px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.top-nav a:hover {
    background-color: var(--diff-map-green);
    color: var(--diff-map-white);
}

/* ── Hero / SVG Composition ─────────────────────────────── */
.hero-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 1.25vh;
    min-height: 0;
    position: relative;
}

/* First screen: tall stage so the mark can scale top-to-bottom; intro footer is layered on top */
.hero-visual {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: calc(100svh - 5.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.hero-composition {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    z-index: 0;
    transform: translateY(-2vh);
}

/* Contain-fit the vector title to the viewport (large vertical cap; text sits in front, not reserved) */
.hero-logo-shell {
    --cap-h: min(96svh, calc(100svh - 2.75rem));
    --cap-w: calc(100vw - 4vw);
    height: min(
        var(--cap-h),
        calc(var(--cap-w) * var(--hero-logo-ar-h) / var(--hero-logo-ar-w))
    );
    width: min(
        var(--cap-w),
        calc(var(--cap-h) * var(--hero-logo-ar-w) / var(--hero-logo-ar-h))
    );
    margin: 0 auto;
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

@media (max-width: 640px) {
    .hero-logo-shell {
        --cap-h: min(92svh, calc(100svh - 2.5rem));
        --cap-w: calc(100vw - 4vw);
    }
}

.svg-logo-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    color: var(--green);
}

/* Intro copy on the overlap footer: Necto Mono + halo for contrast on magenta */
.hero-bottom-overlap .hero-intro-text {
    color: var(--black);
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.95),
        0 0 18px rgba(255, 255, 255, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Individual SVG letters (now scaled to the container) */
.logo-letter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform-origin: center center;
    pointer-events: none;
}

/* ── Mid Section ────────────────────────────────────────── */
.mid-section {
    position: fixed;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: max-content;
    left: 2vw;
    right: 2vw;
    z-index: 20000;
    display: flex;
    justify-content: space-between;
    font-size: clamp(0.55rem, 1.1vw, 1rem);
    align-items: flex-start;
    pointer-events: none;
    mix-blend-mode: difference;
}

@media (max-width: 768px) {
    .mid-section {
        flex-direction: column;
        gap: 1rem;
        font-size: clamp(0.5rem, 2.5vw, 0.85rem);
    }
}

.mid-section>* {
    pointer-events: auto;
}

.box-logo {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    vertical-align: middle;
}

.box-logo svg {
    height: 0.85em;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.search-text {
    display: flex;
    align-items: center;
    gap: 3px;
    transition: letter-spacing 0.3s ease;
}

.search-text:hover {
    letter-spacing: 0.03em;
    font-size: 0.83rem
}

.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--diff-map-black);
    width: 250px;
    padding: 0 8px;
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease;
    position: relative;
    z-index: 10000;
    cursor: text;
}

.search-container:hover,
.search-container:focus-within {
    background-color: var(--diff-map-green);
    border-bottom-color: var(--diff-map-white);
}

.search-container:focus-within {
    width: 320px;
}

.search-input {
    flex: 1;
    padding: 4px 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'SuisseIntl', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--diff-map-black);
    width: 100%;
    cursor: text;
    transition: color 0.15s ease;
}

.search-container:hover .search-input,
.search-container:focus-within .search-input {
    color: var(--diff-map-white);
}

.search-input::placeholder {
    color: var(--diff-map-black);
    opacity: 1;
    transition: color 0.15s ease, opacity 0.3s ease;
}

.search-container:hover .search-input::placeholder,
.search-container:focus-within .search-input::placeholder {
    color: var(--diff-map-white);
    opacity: 0.7;
}

.search-input:focus::placeholder {
    opacity: 0.3 !important;
}

.search-icon {
    font-size: 0.9rem;
    line-height: 1;
    color: var(--diff-map-black);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
    /* Prevent icon from shrinking or wrapping */
    flex-shrink: 0;
}

.search-container:hover .search-icon,
.search-container:focus-within .search-icon {
    color: var(--diff-map-white);
}

.search-container:focus-within .search-icon {
    transform: rotate(90deg);
}

/* ── Footer ─────────────────────────────────────────────── */
.bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: auto;
    width: 100%;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 10;
}

/* Intro strip pinned to the hero bottom, in front of the GSAP vector title */
.bottom-section.hero-bottom-overlap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 30;
    transform: translateZ(0);
    padding-bottom: clamp(2.75rem, 7vw, 4.25rem);
    pointer-events: auto;
}

.footer-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* staggered fade-in after title completes */
    opacity: 0;
    animation: footerFade 0.8s ease forwards;
}

.footer-col.left-col {
    animation-delay: 1.7s;
}

.footer-col.center-col {
    animation-delay: 1.85s;
}

.footer-col.right-col {
    animation-delay: 2.0s;
}

@keyframes footerFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.col-top {
    margin: 0;
    padding: 0;
    margin-top: 0 !important;
}

.col-bottom {
    margin: 0;
    padding: 0;
    margin-bottom: 0 !important;
}

/* Left Column */
.left-col {
    padding-right: 2vw;
}

/* Center Column */
.center-col {
    padding-left: 1vw;
    padding-right: 1vw;
}

@media (max-width: 900px) {
    .bottom-section {
        flex-direction: column;
        gap: 2rem;
    }
    .footer-col {
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100%;
    }
}

.credit-row {
    display: flex;
    margin-bottom: 1rem;
}

.credit-label {
    width: 130px;
    flex-shrink: 0;
}

/* Scroll down */
.scroll-down-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    animation: scrollSlide 1.8s ease-in-out infinite;
    color: var(--green);
}

.arrow-right {
    animation-delay: 0.25s;
}

@keyframes scrollSlide {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    40% {
        transform: translateY(-6px);
        opacity: 0.5;
    }

    60% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Right Column */
.right-col {
    align-items: flex-end;
}

/* Cookie banner — fixed float */
#cookie-notice {
    position: fixed;
    bottom: 2.5vh;
    right: -25px;
    z-index: 100;
    animation: cookieFloat 4s ease-in-out infinite;
}

@keyframes cookieFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

.cookie-banner {
    position: relative;
    width: 300px;
}

.guava-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
}

.cookie-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    width: 90%;
}

.cookie-text {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 1.15rem;
    font-weight: 500;
}

.cookie-btn {
    cursor: var(--cursor-dot);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cookie-btn:hover {
    opacity: 0.7;
    transform: scale(1.08);
}

/* Academy info */
.info-right {
    text-align: right;
    line-height: 1.4;
    position: fixed;
    bottom: 1.5vw;
    right: 2vw;
    z-index: 20000;
    mix-blend-mode: difference;
}

/* ── Type Display Section ───────────────────────────────── */
.type-display-section {
    padding: 6vw 2vw 8vw 2vw;
    display: flex;
    flex-direction: column;
    gap: 4vw;
    position: relative;
    z-index: 10000;
}

.type-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.type-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid var(--type-section-color);
    padding: 0.4rem 0;
    font-family: 'NectoMono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    color: var(--type-section-color);
}

.font-meta {
    flex: 0 0 auto;
    text-transform: uppercase;
    padding-right: 15px;
}

.font-slider {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

/* Brutalist wireframe range slider */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 180px;
    max-width: 100%;
    background: transparent;
    cursor: e-resize;
    z-index: 1;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    background: var(--type-section-color);
}

input[type=range]::-webkit-slider-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: 1px solid var(--type-section-color);
    background: var(--white);
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

input[type=range]:hover::-webkit-slider-thumb {
    background: var(--green);
    border-color: var(--green);
}

.font-download {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    text-transform: uppercase;
    padding-left: 10px;
}

.font-download a {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    font-weight: 500;
    color: var(--white) !important;
    background-color: var(--green);
    border-radius: 0;
    padding: 4px 8px;
    text-decoration: none;
    opacity: 1;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.font-download a:hover {
    transform: scale(1.05);
    opacity: 0.85;
}

/* Base style for editable sample text */
.type-sample {
    width: 100%;
    outline: none;
    min-height: 1em;
    word-wrap: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    white-space: pre-wrap;
    font-size: 8vw;
    line-height: 1.05;
    color: var(--type-section-color);
    padding: 0.35rem 0.6rem 0.5rem;
}

/* Specific font bindings for sample blocks */
.type-sample.font-apollo {
    font-family: 'Apollo', sans-serif;
}

.type-sample.font-tirnotmono {
    font-family: 'TirNotMono', monospace;
    font-size: 4vw;
    line-height: 1.1;
}

.type-sample.font-tiltortion {
    font-family: 'Tiltortion', serif;
    font-size: 5vw;
    line-height: 1.25;
}

.type-sample.font-akijo {
    font-family: 'Akijo', sans-serif;
    font-size: 6vw;
    letter-spacing: 0.05em;
}

.type-sample.font-lambiseim {
    font-family: 'Lambiseim', sans-serif;
}

.type-sample.font-gary {
    font-family: 'gary', sans-serif;
}

.type-sample.font-leoneregularlmartens {
    font-family: 'LEONERegularLMartens', sans-serif;
}

.type-sample.font-igorrounded {
    font-family: 'igorrounded', sans-serif;
}

.type-sample.font-apolloregular {
    font-family: 'ApolloRegular', sans-serif;
}

.type-sample.font-dap {
    font-family: 'dap', sans-serif;
}

.type-sample.font-lambiseimregular {
    font-family: 'LambiseimRegular', sans-serif;
}

.type-sample.font-susle {
    font-family: 'susle', sans-serif;
}

.type-sample.font-broadnibber {
    font-family: 'broadnibber', sans-serif;
}

.type-sample.font-ketchupaddictregularbsiim {
    font-family: 'KetchupAddictRegularBSiim', sans-serif;
}

.type-sample.font-kollektiivcollective {
    font-family: 'KollektiivCollective', sans-serif;
}

.type-sample.font-varenykyregular {
    font-family: 'VarenykyRegular', sans-serif;
}

.type-sample.font-fiato {
    font-family: 'Fiato', sans-serif;
}

.type-sample.font-nocturnal {
    font-family: 'Nocturnal', sans-serif;
}

.type-sample.font-doublebubblegxaveiderpass {
    font-family: 'DoubleBubbleGXAVeiderpass', sans-serif;
}

.type-sample.font-kykeon {
    font-family: 'kykeon', sans-serif;
}

.type-sample.font-helipleumon {
    font-family: 'helipleumon', sans-serif;
}

.type-sample.font-maurizio {
    font-family: 'maurizio', sans-serif;
}

.type-sample.font-2008 {
    font-family: '2008', sans-serif;
}

.type-sample.font-vaksal {
    font-family: 'vaksal', sans-serif;
}

.type-sample.font-yogaregular {
    font-family: 'YogaRegular', sans-serif;
}

.type-sample.font-reingrotesklight {
    font-family: 'ReinGroteskLight', sans-serif;
}

.type-sample.font-sirkelregular {
    font-family: 'sirkelregular', sans-serif;
}

.type-sample.font-newpoetic {
    font-family: 'newpoetic', sans-serif;
}

.type-sample.font-rammus {
    font-family: 'rammus', sans-serif;
}

.type-sample.font-fairytype {
    font-family: 'fairytype', sans-serif;
}

.type-sample.font-jsansv16regular {
    font-family: 'JSansv16Regular', sans-serif;
}

.type-sample.font-sigella {
    font-family: 'sigella', sans-serif;
}

.type-sample.font-owlcave {
    font-family: 'owlcave', sans-serif;
}

.type-sample.font-zakregular {
    font-family: 'ZakRegular', sans-serif;
}

.type-sample.font-floraandfauna {
    font-family: 'floraandfauna', sans-serif;
}

.type-sample.font-ofortuna {
    font-family: 'ofortuna', sans-serif;
}

.type-sample.font-fallengum {
    font-family: 'fallengum', sans-serif;
}

.type-sample.font-kiwi {
    font-family: 'kiwi', sans-serif;
}

.type-sample.font-villowplex {
    font-family: 'villowplex', sans-serif;
}

.type-sample.font-brno2016velloluttermathiasv22rsi {
    font-family: 'BRNO2016VelloLutterMathiasV22rsi', sans-serif;
}

.type-sample.font-toiletpapertype {
    font-family: 'toiletpapertype', sans-serif;
}

.type-sample.font-heavy {
    font-family: 'heavy', sans-serif;
}

.type-sample.font-sens {
    font-family: 'sens', sans-serif;
}

.type-sample.font-skeleton {
    font-family: 'skeleton', sans-serif;
}

.type-sample.font-shattered {
    font-family: 'shattered', sans-serif;
}

.type-sample.font-lazyglamour {
    font-family: 'lazyglamour', sans-serif;
}

.type-sample.font-dewysvgmartinkipper {
    font-family: 'DEWYSVGMartinKipper', sans-serif;
}

.type-sample.font-leimzyregular {
    font-family: 'LeimzyRegular', sans-serif;
}

.type-sample.font-ornamental {
    font-family: 'ornamental', sans-serif;
}

.type-sample.font-hypha {
    font-family: 'hypha', sans-serif;
}

.type-sample.font-akijoregularaasztalos {
    font-family: 'AkijoRegularAAsztalos', sans-serif;
}

.type-sample.font-franzregularaveevo {
    font-family: 'franzRegularAVeevo', sans-serif;
}

.type-sample.font-lopsakasregular {
    font-family: 'lopsakasregular', sans-serif;
}

.type-sample.font-dahliabold {
    font-family: 'Dahliabold', sans-serif;
}

.type-sample.font-thetimesapex {
    font-family: 'thetimesapex', sans-serif;
}

.type-sample.font-tiltortion {
    font-family: 'Tiltortion', sans-serif;
}

.type-sample.font-safaritravellerregularmvarik {
    font-family: 'SafariTravellerRegularMVarik', sans-serif;
}

.type-sample.font-napuloregular {
    font-family: 'NapuloRegular', sans-serif;
}

.type-sample.font-naps {
    font-family: 'naps', sans-serif;
}

.type-sample.font-molot {
    font-family: 'molot', sans-serif;
}

.type-sample.font-zakimposter {
    font-family: 'ZakImposter', sans-serif;
}

.type-sample.font-idreamofletters {
    font-family: 'idreamofletters', sans-serif;
}

.type-sample.font-faktory {
    font-family: 'faktory', sans-serif;
}

.type-sample.font-substanta {
    font-family: 'substanta', sans-serif;
}

.type-sample.font-gogregular {
    font-family: 'gogregular', sans-serif;
}

.type-sample.font-hellplague {
    font-family: 'hellplague', sans-serif;
}

.type-sample.font-dematerialized {
    font-family: 'dematerialized', sans-serif;
}

.type-sample.font-dahliathin {
    font-family: 'Dahliathin', sans-serif;
}

.type-sample.font-radio {
    font-family: 'radio', sans-serif;
}

.type-sample.font-stereosans {
    font-family: 'StereoSans', sans-serif;
}

.type-sample.font-fontensteinregular {
    font-family: 'fontensteinregular', sans-serif;
}

.type-sample.font-crystalregularimoltsanov {
    font-family: 'CrystalregularIMoltsanov', sans-serif;
}

.type-sample.font-barbarasoniaruus {
    font-family: 'barbaraSoniaRuus', sans-serif;
}

.type-sample.font-flowstate {
    font-family: 'flowstate', sans-serif;
}

.type-sample.font-sato24psalmin {
    font-family: 'Sato24PSalmin', sans-serif;
}

.type-sample.font-zakhatless {
    font-family: 'ZakHatless', sans-serif;
}

.type-sample.font-imogen {
    font-family: 'imogen', sans-serif;
}

.type-sample.font-bomberfrakturmathiasv22rsi {
    font-family: 'BomberFrakturMathiasV22rsi', sans-serif;
}

.type-sample.font-madisigor {
    font-family: 'MadisIgor', sans-serif;
}

.type-sample.font-frisbee {
    font-family: 'frisbee', sans-serif;
}

.type-sample.font-volask {
    font-family: 'Volask', sans-serif;
}

.type-sample.font-lumberjack {
    font-family: 'lumberjack', sans-serif;
}

.type-sample.font-escapistdiaries {
    font-family: 'EscapistDiaries', sans-serif;
}

.type-sample.font-kevad {
    font-family: 'kevad', sans-serif;
}

.type-sample.font-mscurvy {
    font-family: 'mscurvy', sans-serif;
}

.type-sample.font-reingroteskregular {
    font-family: 'ReinGroteskRegular', sans-serif;
}

.type-sample.font-sensiblesenseless {
    font-family: 'sensiblesenseless', sans-serif;
}

.type-sample.font-torturastroke {
    font-family: 'torturastroke', sans-serif;
}

.type-sample.font-pakkonenmathiasv22rsi {
    font-family: 'PakkonenMathiasV22rsi', sans-serif;
}

/* ── Display Balancing Fixes ── */
.font-lambiseim,
.font-lambiseimregular {
    line-height: 1.4 !important;
    letter-spacing: 0.05em;
    padding: 2vw 0;
}

.font-susle {
    line-height: 1.6 !important;
    letter-spacing: 0.08em;
    padding: 3vw 0;
}

.font-toiletpapertype {
    line-height: 1.8 !important;
    letter-spacing: 0.1em;
    padding: 4vw 0;
}

[class*="font-zak"] {
    line-height: 1.5 !important;
    letter-spacing: 0.06em;
    padding: 2vw 0;
}

.font-bomberfrakturmathiasv22rsi {
    line-height: 1.5 !important;
    letter-spacing: 0.04em;
    padding: 2vw 0;
}

/* ── Secondary Balancing Fixes ── */
[class*="font-doublebubblegx"],
[class*="font-dahlia"],
[class*="font-lopsakas"],
[class*="font-lazyglamour"] {
    line-height: 1.5 !important;
    letter-spacing: 0.05em;
    padding: 2.5vw 0;
}

/* ── Force Uppercase (No Lowercase Glyphs) ── */
[class*="font-ketchupaddict"],
[class*="font-villowplex"],
[class*="font-naps"],
[class*="font-fontenstein"],
[class*="font-barbara"] {
    text-transform: uppercase !important;
}

/* ── Reset Sticky Columns to Pink without Difference Blending ── */
.top-nav,
.mid-section,
.email-link,
.info-right {
    mix-blend-mode: normal !important;
}

.top-nav a,
.mid-section,
.mid-section .black-text,
.mid-section .search-input,
.mid-section .search-icon,
.email-link,
.info-right {
    color: var(--green) !important;
    /* Deep Pink */
}

/* Also reset the search bottom border */
.mid-section .search-container {
    border-bottom: 1px solid var(--green) !important;
}

/* Change the hover states for links inside the nav to invert cleanly with pink */
.top-nav a:hover {
    background-color: var(--green) !important;
    color: #ffffff !important;
}

.search-container:hover .search-input,
.search-container:focus-within .search-input,
.search-container:hover .search-icon,
.search-container:focus-within .search-icon {
    color: #ffffff !important;
}

.search-container:hover,
.search-container:focus-within {
    background-color: var(--green) !important;
    border-bottom-color: var(--green) !important;
}