/**
 * Reserved Page - Stylesheet
 *
 * Everything the single gold landing page needs, and nothing else.
 * Extracted from the Game Foundry site's base.css, components.css and
 * pages.css (only the rules the page's markup actually resolves).
 *
 * @author Game Foundry
 * @version 1.1.0
 */


/* =============================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       1.1 Colors — RGB format for alpha composability
       ------------------------------------------------------------------------- */

    /** Deep black like coal */
    --color-black: rgb(3, 3, 3);

    /** Warm off-white like heated metal glow */
    --color-white: rgb(250, 245, 245);

    /** Gold accent - polished */
    --color-gold: rgb(255, 170, 0);

    /** Darker gold - for depth */
    --color-gold-dark: rgb(180, 120, 0);

    /** Smoke - muted gray for secondary text */
    --color-smoke: rgba(123, 123, 123, 0.45);

    /* -------------------------------------------------------------------------
       1.2 Page vignette (gold page theme)
       Rectangular, follows the viewport edges. Drawn as two inset box-shadows
       on a fixed overlay (body.page-gold::before): a tight near-black rim plus
       a wide soft feather. Widths are in vmin (percent of the shorter viewport
       side), so the vignette scales with the screen; phones get a slimmer rim.
       ------------------------------------------------------------------------- */
    --vignette-edge: rgba(3, 3, 3, 0.5);
    --vignette-soft: rgba(3, 3, 3, 0.55);
    --vignette-rim: 15vmin;      /* ~135px on a 1280x900 desktop */
    --vignette-feather: 30vmin;  /* ~270px on a 1280x900 desktop */
    --vignette-spread: 20px;
    --vignette-shadow:
        inset 0 0 var(--vignette-rim) var(--vignette-spread) var(--vignette-edge),
        inset 0 0 var(--vignette-feather) 0 var(--vignette-soft);

    /* -------------------------------------------------------------------------
       1.3 Typography
       ------------------------------------------------------------------------- */

    /** Font families */
    --font-serif: "Cormorant Garamond", "Times New Roman", serif;
    --font-sans: "Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /** Small - footer text */
    --text-sm: 0.8rem;      /* 12.8px */

    /** Base - body text */
    --text-base: 1rem;      /* 16px */

    /** 3X large - h1. The heading is a domain: one unbreakable word, so the
        size is tuned to fit the narrowest column the hero uses (65vw on
        phones) rather than to the widest dramatic scale. */
    --text-3xl: clamp(1.6rem, 8vw, 5rem);     /* 25.6px → 80px */

    /** Line height - body text */
    --leading-tight: 1.4;

    /* -------------------------------------------------------------------------
       1.4 Spacing
       ------------------------------------------------------------------------- */

    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 72px;

    /* -------------------------------------------------------------------------
       1.5 Layout
       ------------------------------------------------------------------------- */

    /** Maximum container width */
    --container-max: 1440px;

    /** Hero subline width */
    --content-sub: 600px;

    /* -------------------------------------------------------------------------
       1.6 Animation
       ------------------------------------------------------------------------- */

    /** Page fade-in duration */
    --animation-fade-in: 1s ease-out;
}


/* Phones: keep the vignette off the text. Content on small screens runs close
   to the edges, so the rim and feather are slimmer relative to the viewport. */
@media (max-width: 480px) {
    :root {
        --vignette-rim: 8vmin;       /* ~31px on a 390px-wide phone */
        --vignette-feather: 18vmin;  /* ~70px */
        --vignette-spread: 6px;
    }
}


/* =============================================================================
   2. RESET & BASE STYLES
   ============================================================================= */

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

/** Global paragraph bottom margin */
p {
    margin-bottom: var(--space-md);
}

html, body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/**
 * GLOBAL TYPOGRAPHY DEFAULT
 * Sans (Work Sans) is the default for the entire document.
 * Serif is ONLY applied via explicit CSS rules (the h1).
 */
body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
}


/* =============================================================================
   3. LAYOUT UTILITIES
   ============================================================================= */

/**
 * Page wrapper - flex container for sticky footer pattern
 * Includes page fade-in animation on load
 */
.page-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: fade-in var(--animation-fade-in) forwards;
}

/**
 * Container - centered content with max-width
 */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}


/* =============================================================================
   4. TYPOGRAPHY
   ============================================================================= */

/* Display text — serif */
h1 {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: var(--text-3xl);
    margin: var(--space-lg) 0 var(--space-md) 0;
    color: var(--color-gold);
}

/* Remove top margin when heading is first child */
h1:first-child {
    margin-top: 0;
}

/* Body/interface text — sans */
p,
header,
footer {
    font-family: var(--font-sans);
}


/* =============================================================================
   5. SECTION DIVIDER
   ============================================================================= */

.section-divider {
    height: 2px;
    margin: var(--space-md) auto;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    opacity: 0.35;
}


/* =============================================================================
   6. GOLD PAGE THEME (body.page-gold)
   Full-viewport gold with dark text. Flat brand gold with a feathered
   rectangular vignette (inset box-shadow) along the viewport edges. Contrast
   of near-black text: ~10.8:1 at the centre and still above 4.5:1 at the
   darkest edge, so all text passes WCAG AA.
   ============================================================================= */

.page-gold {
    background: var(--color-gold);
    color: var(--color-black);
}

/* Fixed, click-through overlay that paints the edge vignette above the gold
   but below the positioned content (.hero-inner / .footer-minimal are z-index 1). */
.page-gold::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    box-shadow: var(--vignette-shadow);
}

.page-gold h1 {
    color: var(--color-black);
}

.page-gold .hero-divider {
    background: linear-gradient(90deg, transparent, rgba(3, 3, 3, 0.6), transparent);
    opacity: 1;
}

.page-gold .footer-minimal {
    color: rgba(3, 3, 3, 0.85);
}


/* =============================================================================
   7. HERO SECTION
   ============================================================================= */

.hero {
    position: relative;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-bottom: 15vh;
}

.hero-content {
    text-align: center;
    padding: var(--space-xl) 32px 32px;
}

.hero-divider {
    width: 384px;
    max-width: 100%;
    height: 2px;
    margin: var(--space-lg) auto;
    border: none;
    background: linear-gradient(90deg, transparent, var(--color-gold-dark), transparent);
    opacity: 0.5;
}

.hero-subline {
    font-size: 0.9rem;
    max-width: var(--content-sub);
    margin: var(--space-sm) auto 0;
}


/* =============================================================================
   8. MINIMAL FOOTER
   Transparent single line. The hero keeps a 15vh bottom padding; the negative
   margin pulls the footer up into that space so the page fits one viewport.
   ============================================================================= */

.footer-minimal {
    position: relative;
    z-index: 1;
    margin-top: -15vh;
    padding: var(--space-md) 0 var(--space-lg);
    background: transparent;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-smoke);
}

.footer-minimal p {
    margin-bottom: 0;
}


/* =============================================================================
   9. ANIMATIONS
   ============================================================================= */

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


/* =============================================================================
   10. MEDIA QUERIES
   Mobile-first: base styles above are mobile. Desktop enhancements below.
   ============================================================================= */

/* Desktop (≥769px) */
@media (min-width: 769px) {
    .hero-content {
        padding: var(--space-xl) 0 48px;
    }

    .hero-subline {
        font-size: var(--text-base);
    }
}

/* Small phones (≤480px): tighter container padding */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
}

/* Mobile (≤768px): keep the text block to ~65% of the viewport so it stays
   clear of the edge vignette and reads as a compact column on phones. */
@media (max-width: 768px) {
    .page-gold .hero-content,
    .page-gold .footer-minimal .container {
        max-width: 65vw;
        padding-left: 0;
        padding-right: 0;
    }
}


/* =============================================================================
   11. ACCESSIBILITY - REDUCED MOTION
   ============================================================================= */

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