/**
 * ============================================================================
 * LANTHIREY 2.0 - GLOBAL DESIGN SYSTEM (public/css/global.css)
 * ============================================================================
 * 
 * Architecture & Student Teaching Note:
 * This stylesheet establishes the central Design Tokens, Custom Properties,
 * Font Faces, Metallic Gradient Generators, and Base Layout Elements.
 */

/* ----------------------------------------------------------------------------
 * 1. FONT FACE DECLARATIONS
 * ------------------------------------------------------------------------- */

@font-face {
    font-family: 'BlackwoodCastle';
    src: url('../fonts/blackwood_castle/BLACC___.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri-Font/Amiri-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri-Font/Amiri-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri-Font/Amiri-Slanted.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri-Font/Amiri-BoldSlanted.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: 'Perandory';
    src: url('../fonts/Perandory-Font/Perandory_Serif_Font/PERANDORY/Perandory-Condensed.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Perandory';
    src: url('../fonts/Perandory-Font/Perandory_Serif_Font/PERANDORY/Perandory-Semi-Condensed.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

/* ----------------------------------------------------------------------------
 * 2. ROOT DESIGN TOKENS & CSS VARIABLES
 * ------------------------------------------------------------------------- */
:root {
    /* Color Palette */
    --bg-black: #000000;
    --bg-dark-surface: #0a0a10;
    --bg-navy-debut: #002454;
    --bg-navy-toc: #0e0d40;
    --bg-navy-bio: #002a57;
    --bg-navy-deep: #001a37;
    
    --red-gothic: #ba1a2b;
    --red-vivid: #c5211e;
    --red-pure: #ff0000;
    --red-dark: #711918;
    
    --gold-accent: #d4aa52;
    --gold-bright: #e7aa51;
    --gold-cream: #ffe499;
    --gold-dark: #8d5a1b;
    --gold-text: #ffde9e;
    
    --copper-primary: #cb470b;
    --copper-light: #f9bba3;
    --copper-dark: #873f1e;
    
    --silver-primary: #8b806f;
    --silver-light: #e8decc;
    --silver-mid: #b3ae9a;
    
    --parchment-bg: #fff2d4;
    --parchment-spine: #e4d0a6;
    
    --text-white: #ffffff;
    --text-cream: #f4ede4;
    --text-muted: #a6a6a6;
    --text-dim: #9b99a2;
    --text-blue-link: #5170ff;
    
    /* Font Family Tokens */
    --font-gothic-title: 'BlackwoodCastle', Georgia, serif;
    --font-gothic-script: 'OldEnglandGothic', cursive, serif;
    --font-serif: 'Amiri', 'Times New Roman', serif;
    --font-display: 'Perandory', Georgia, serif;
    --font-pixel: 'NineByFiveNBP', monospace;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------------------
 * 3. RESET & BASE ELEMENTS
 * ------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-black);
    color: var(--text-white);
    font-family: var(--font-serif);
}

body {
    background-color: var(--bg-black);
    color: var(--text-white);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------------------------------------------
 * 4. METALLIC GRADIENT TEXT HELPERS
 * ------------------------------------------------------------------------- */

.gold-gradient-text {
    background: linear-gradient(135deg, #e7aa51 0%, #ffe499 40%, #8d5a1b 70%, #ac7031 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.copper-gradient-text {
    background: linear-gradient(135deg, #cb470b 0%, #f9bba3 30%, #873f1e 60%, #dd7b65 80%, #9e6449 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.silver-gradient-text {
    background: linear-gradient(135deg, #8b806f 0%, #e8decc 50%, #b3ae9a 80%, #8d8c88 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ----------------------------------------------------------------------------
 * 5. REUSABLE BUTTONS & ACCENTS
 * ------------------------------------------------------------------------- */

.fleur-icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: auto;
}

.fleur-icon-lg {
    width: 24px;
    height: auto;
    vertical-align: middle;
}

.btn-gothic-link {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gold-accent);
    border-bottom: 1px solid var(--red-pure);
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-gothic-link:hover {
    color: #fff;
    filter: brightness(1.2);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
 * 6. REUSABLE HEADER & FOOTER
 * ------------------------------------------------------------------------- */

.site-header {
    width: 100%;
    padding: 45px 20px 35px;
    text-align: center;
    background: transparent;
    position: relative;
    z-index: 10;
}

.header-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-decoration: none;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.header-brand-link:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.25));
}

.header-logo-img {
    height: 20rem;
    width: auto;
    display: block;
}

.header-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 0;
}

.header-name-img {
    height: 15rem;
    width: auto;
    display: block;
    margin-top: 0rem;
}

.header-subtitle-img {
    height: 15rem;
    width: auto;
    display: block;
    margin-top: -8rem;
    margin-bottom: -4rem;
}

.site-footer {
    width: 100%;
    padding: 30px 20px;
    text-align: center;
    background: var(--bg-black);
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: auto;
}

.site-footer .copyright-red {
    color: var(--red-gothic);
    font-weight: bold;
}

.site-footer a {
    color: var(--gold-accent);
    margin: 0 8px;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
 * 7. GLOBAL RESPONSIVE HEADER SCALING
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .site-header {
        padding: 20px 15px 15px;
    }

    .header-brand-link {
        gap: 10px;
        max-width: 100%;
    }

    .header-logo-img {
        height: 4.5rem;
        width: auto;
        flex-shrink: 0;
    }

    .header-text-group {
        margin-left: 0.4rem;
    }

    .header-name-img {
        height: 5.5rem;
        width: auto;
    }

    .header-subtitle-img {
        height: 5.5rem;
        width: auto;
        margin-top: -3rem;
        margin-bottom: -1.5rem;
    }
}