/*
===============================================================================
BIG TEXAN D2C - GLOBAL STYLES
===============================================================================
Design tokens, CSS reset, and base typography.
This file loads on EVERY page.

AGENT RULE: Do not add page-specific styles here. Use /css/pages/[page].css
===============================================================================
*/

/* --- DESIGN TOKENS --- */
:root {
    /* Brand Colors */
    --brand-cream: #f5efe3;
    --brand-warm: #ede3d8;
    --brand-tan: #ccb3ad;
    --brand-dust: #d4bfb8;
    --brand-maroon: #51000b;
    --brand-maroon-soft: #7a1a1a;
    --brand-ink: #3b2b2b;
    --brand-slate: #8c8c8f;

    /* Accent Colors */
    --texan-yellow: #FFD200;

    /* Semantic Colors */
    --bg-core: var(--brand-cream);
    --bg-surface: #ffffff;
    --bg-glass: rgba(245, 239, 227, 0.92);
    --text-primary: var(--brand-maroon);
    --text-secondary: #6b524d;
    --text-muted: var(--brand-slate);

    /* Status Colors */
    --color-success: #2d6a4f;
    --color-error: #9b2c2c;
    --color-warning: #b45309;

    /* Layout */
    --max-width: 1400px;
    --content-padding: 5%;
    --section-spacing: 4rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Typography */
    --font-heading: 'Bevan', serif;
    --font-body: 'Nunito', sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(81, 0, 11, 0.05);
    --shadow-md: 0 4px 6px rgba(81, 0, 11, 0.1);
    --shadow-lg: 0 10px 15px rgba(81, 0, 11, 0.1);
    --shadow-xl: 0 20px 25px rgba(81, 0, 11, 0.15);
    --shadow-glow: 0 0 20px rgba(81, 0, 11, 0.12);

    /* Borders */
    --border-light: 1px solid var(--brand-tan);
    --border-medium: 2px solid var(--brand-tan);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 2000;
    --z-modal: 3000;

    /* Header Height (for body padding) */
    --header-height: 150px;
}

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

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-core);
    overflow-x: hidden;
    padding-top: var(--header-height);
    min-height: 100vh;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.42;
    color: var(--text-primary);
    overflow: visible;
    overflow-wrap: break-word;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    margin-bottom: 1rem;
}

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

a:hover {
    color: var(--brand-maroon-soft);
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus {
    outline: 3px solid var(--texan-yellow);
    outline-offset: 3px;
    box-shadow:
        0 0 0 4px rgba(26, 0, 5, 0.65),
        0 0 0 7px rgba(255, 210, 0, 0.35);
}

strong, b {
    font-weight: 700;
}

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

/* --- BUTTONS --- */
button {
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    background: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-primary {
    background-color: var(--brand-maroon-soft);
    color: var(--brand-cream);
    border: none;
}

.btn-primary:hover {
    background-color: var(--brand-maroon);
}

.btn-secondary {
    background-color: transparent;
    color: var(--brand-maroon-soft);
    border: 2px solid var(--brand-maroon-soft);
}

.btn-secondary:hover {
    background-color: var(--brand-maroon-soft);
    color: var(--brand-cream);
}

.btn-yellow {
    background-color: var(--texan-yellow);
    color: var(--brand-maroon);
    border: none;
}

.btn-yellow:hover {
    filter: brightness(1.1);
}

/* Hero CTAs (originally inline on Neon_Roadside_V2.html) */
.btn-neon {
    display: inline-block; font-family: var(--font-heading); font-size: 1rem;
    padding: 16px 40px; border: 2px solid var(--texan-yellow);
    background: var(--texan-yellow); color: #1a0005;
    text-decoration: none; text-transform: uppercase; letter-spacing: 2px;
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 210, 0, 0.3), 0 0 30px rgba(255, 210, 0, 0.1);
}
.btn-neon:hover {
    background: transparent; color: var(--texan-yellow); transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(255, 210, 0, 0.5), 0 0 40px rgba(255, 210, 0, 0.2), inset 0 0 15px rgba(255, 210, 0, 0.1);
}
.btn-ghost {
    display: inline-block; font-family: var(--font-heading); font-size: 1rem;
    padding: 16px 40px; border: 2px solid rgba(245, 239, 227, 0.4);
    background: transparent; color: var(--brand-cream);
    text-decoration: none; text-transform: uppercase; letter-spacing: 2px;
    cursor: pointer; transition: all 0.3s ease;
}
.btn-ghost:hover {
    border-color: var(--brand-cream); background: rgba(245, 239, 227, 0.08); transform: translateY(-2px);
}

/* --- PAGE HERO (Pattern A: full-bleed photo + maroon overlay) ---
   Shared hero API. Pattern A is the secondary-page hero voice anchored on
   heritage.html. This block is ADDITIVE - heritage / 72oz-challenge /
   subscriptions keep their own hero classes; this is for pages that don't
   have an anchor-quality hero yet (gifting first, then corporate-gifts /
   product-detail per Step 2 dispatch).

   Markup:
       <section class="page-hero">
           <div class="page-hero__bg"><img src="..." alt="..."></div>   (optional)
           <div class="page-hero__overlay"></div>
           <div class="container">
               <div class="page-hero__inner">
                   <span class="page-hero__eyebrow">Optional eyebrow</span>
                   <h1 class="page-hero__title">Page Title</h1>
                   <p class="page-hero__lede">Optional lede paragraph.</p>
                   <div class="page-hero__actions">
                       <a class="btn btn-yellow" href="...">Primary CTA</a>
                       <a class="btn btn-secondary" href="...">Secondary CTA</a>
                   </div>
               </div>
           </div>
       </section>

   Bleeds under the fixed header via negative margin-top. Eyebrow / lede /
   actions are optional - omit the element to omit that line. CTA secondary
   gets cream-on-dark override automatically.
*/
.page-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: calc(-1 * var(--header-height));
    padding-top: var(--header-height);
}
.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.page-hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(81, 0, 11, 0.5) 0%,
        rgba(81, 0, 11, 0.7) 50%,
        rgba(81, 0, 11, 0.85) 100%
    );
}
.page-hero .container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
}

.page-header .container {
    width: 100%;
    max-width: 100%;
}
.page-hero__inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 0;
    width: 100%;
}
.page-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--texan-yellow);
    margin-bottom: 1rem;
}
.page-hero__title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--brand-cream);
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.42;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: break-word;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
.page-hero__lede {
    font-size: var(--text-xl);
    color: var(--brand-cream);
    opacity: 0.9;
    line-height: 1.5;
    margin-bottom: 0;
}
.page-hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.page-hero__actions .btn-secondary {
    border-color: var(--brand-cream);
    color: var(--brand-cream);
}
.page-hero__actions .btn-secondary:hover {
    background-color: var(--brand-cream);
    color: var(--brand-maroon);
}

/* .page-hero--zoom-safe - shared 125%-200% zoom/reflow guard.
   Pages with oversized campaign heroes should opt in here, then tune the
   variables in their page CSS instead of hard-coding fixed viewport layouts. */
.page-hero--zoom-safe {
    min-height: min(var(--zoom-safe-hero-min-height, 76vh), var(--zoom-safe-hero-max-height, 820px));
    align-items: center;
}

.page-hero--zoom-safe .page-hero__inner {
    padding-block: clamp(2rem, 5vh, 4.5rem);
}

.page-hero--zoom-safe .page-hero__title {
    font-size: clamp(
        var(--zoom-safe-title-min, 2.35rem),
        min(var(--zoom-safe-title-fluid, 5vw), var(--zoom-safe-title-vh, 10vh)),
        var(--zoom-safe-title-max, 4rem)
    );
}

@media (min-width: 769px) and (max-height: 760px) {
    .page-hero--zoom-safe {
        min-height: auto;
        padding-bottom: clamp(2rem, 4vh, 3rem);
    }

    .page-hero--zoom-safe .page-hero__inner {
        padding-block: clamp(1.25rem, 3vh, 2.5rem);
    }

    .page-hero--zoom-safe .page-hero__lede {
        font-size: clamp(1rem, 1.35vw, 1.2rem);
    }

    .page-hero--zoom-safe .page-hero__actions {
        margin-top: 1.25rem;
    }
}

/* --- FORM ELEMENTS --- */
input,
textarea,
select {
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 0.75rem 1rem;
    border: var(--border-light);
    border-radius: var(--radius-sm);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
    width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--brand-maroon-soft);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* --- UTILITY CLASSES --- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

.section {
    padding: var(--section-spacing) 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- RESPONSIVE BREAKPOINTS (Reference) ---
   Mobile: < 768px
   Tablet: 768px - 1024px
   Desktop: > 1024px
*/

@media (max-width: 768px) {
    :root {
        --header-height: 120px;
        --section-spacing: 2.5rem;
    }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    .page-hero { min-height: 50vh; }
    .page-hero__inner { padding: 2rem 0; }
}

/* ===========================================================================
   CANONICAL SHELL VOCABULARY (DIALECT-AGNOSTIC)
   ===========================================================================
   These classes form the shared shell that paint agents extend per-folder
   via modifier classes (e.g. .page-hero--neon, .page-hero--pattern-a) or by
   redefining CSS variables. Do NOT redefine these base classes per-folder.

   - .page-hero      shared shell vocabulary - paint agents extend via modifier classes, do not redefine.
   - .page-section   shared shell vocabulary - paint agents extend via modifier classes, do not redefine.
   - .page-eyebrow   shared shell vocabulary - paint agents extend via modifier classes, do not redefine.
   - .page-cta       shared shell vocabulary - paint agents extend via modifier classes, do not redefine.
   - .page-grid      shared shell vocabulary - paint agents extend via modifier classes, do not redefine.
   - .page-form-card shared shell vocabulary - paint agents extend via modifier classes, do not redefine.

   The .page-hero block above (lines ~236-345) is part of this vocabulary
   and stays canonical. The block below adds the remaining five.
   =========================================================================== */

/* .page-section - canonical section wrapper using --section-spacing token. */
.page-section {
    padding: var(--section-spacing) 0;
}

/* .page-eyebrow - shared kicker treatment (promoted from heritage.css
   .section-eyebrow + .heritage-eyebrow). Sits above an H2 to give every
   section a brand-voice opener. Use --light variant over dark backgrounds. */
.page-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--brand-maroon);
    margin-bottom: 0.75rem;
}
.page-eyebrow--light {
    color: var(--texan-yellow);
}

/* .page-cta - canonical button hierarchy aliasing the existing button
   tokens. Per Site_Cohesion_Audit_2026-05-01 Sweep #3 - .page-cta--primary
   is the persuasive (yellow) ask, .page-cta--secondary is the structural
   (maroon-outline) ask, .page-cta--neon is the homepage neon dialect, and
   .page-cta--ghost is the cream-on-dark hero secondary. Paint agents
   extend these via modifier classes; do not redefine the base.btn aliases. */
.page-cta { /* alias of .btn - inherits sizing, transitions, transform */ }
.page-cta--primary { /* persuasive CTA - aliases .btn-yellow */ }
.page-cta--secondary { /* structural CTA - aliases .btn-primary */ }
.page-cta--neon { /* hero CTA - aliases .btn-neon */ }
.page-cta--ghost { /* hero secondary on dark - aliases .btn-ghost */ }

/* .page-grid - canonical product/card grid. Default is auto-fit at 280px
   minimum tile width. Paint agents extend via modifier classes
   (.page-grid--3up, .page-grid--tight) without redefining. */
.page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* .page-form-card - canonical form container, promoted from
   corporate-gifts.css .inquiry-form-wrapper (gold-standard form per the
   audit). Pairs cleanly with the global input/textarea base styles. */
.page-form-card {
    background: var(--bg-surface);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ===========================================================================
   NEON DIALECT MODIFIERS (Full Dark Neon, _Neon/ folder)
   ===========================================================================
   Dialect = late-night Texan diner, Route 66 nostalgia, dramatic neon.
   Background: deep maroon shades (#1a0005 / #2a0008). Cream body text.
   White/cream Bevan headings. Yellow #FFD200 accents with glow.
   CTA: yellow filled square (.page-cta--neon - already in shell) /
   transparent cream-bordered (.page-cta--ghost - already in shell).

   Paint paradigm:
   - Apply .page-hero AND .page-hero--neon together on hero <section>.
   - Apply .page-section AND .page-section--neon for dark-tone sections.
   - Apply .page-section AND .page-section--lit-cream for the
     occasional cream "lit panel" section that punches up contrast.
   - Eyebrows in neon dialect default to yellow (.page-eyebrow--neon).
   - Buttons inside .page-hero--neon / .page-section--neon already pick
     up the dark-tone secondary treatment via shell rules.
   =========================================================================== */

:root {
    --bg-neon-night: #1a0005;
    --bg-neon-night-2: #2a0008;
    --bg-neon-panel: #3a0a14;
    --neon-yellow-glow-7: rgba(255, 210, 0, 0.07);
    --neon-yellow-glow-15: rgba(255, 210, 0, 0.15);
    --neon-yellow-glow-30: rgba(255, 210, 0, 0.3);
    --neon-yellow-glow-50: rgba(255, 210, 0, 0.5);
}

/* --- HERO: dark + neon yellow accents --- */
.page-hero--neon {
    background: var(--bg-neon-night);
    color: var(--brand-cream);
    min-height: clamp(50vh, 70vh, 600px);
}
.page-hero--neon .page-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(26, 0, 5, 0.55) 0%,
        rgba(26, 0, 5, 0.4) 40%,
        rgba(26, 0, 5, 0.7) 75%,
        rgba(26, 0, 5, 0.92) 100%
    );
}
.page-hero--neon .page-hero__bg img {
    opacity: 0.85;
    filter: brightness(0.85) contrast(1.1) saturate(1);
    object-position: center 10%;
}
.page-hero--neon .page-hero__eyebrow {
    color: var(--texan-yellow);
    text-shadow: 0 0 10px var(--neon-yellow-glow-50);
    letter-spacing: 0.25em;
}
.page-hero--neon .page-hero__title {
    color: var(--brand-cream);
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.65);
}
.page-hero--neon .page-hero__lede {
    color: var(--brand-cream);
    opacity: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5);
}

/* --- SECTION: dark-tone variant --- */
.page-section--neon {
    background: var(--bg-neon-night);
    color: var(--brand-cream);
    border-top: 1px solid var(--neon-yellow-glow-15);
}
.page-section--neon h2,
.page-section--neon h3,
.page-section--neon h4 {
    color: var(--brand-cream);
}
.page-section--neon p,
.page-section--neon li {
    color: var(--brand-cream);
    opacity: 0.88;
}
.page-section--neon a:not(.btn):not(.page-cta) {
    color: var(--texan-yellow);
}
.page-section--neon a:not(.btn):not(.page-cta):hover {
    text-shadow: 0 0 8px var(--neon-yellow-glow-50);
}

/* Slightly lighter dark variant for "alternating" sections */
.page-section--neon-2 {
    background: var(--bg-neon-night-2);
    color: var(--brand-cream);
}
.page-section--neon-2 h2,
.page-section--neon-2 h3,
.page-section--neon-2 h4 {
    color: var(--brand-cream);
}
.page-section--neon-2 p,
.page-section--neon-2 li {
    color: var(--brand-cream);
    opacity: 0.88;
}

/* --- LIT CREAM SECTION: high-contrast moment --- */
.page-section--lit-cream {
    background: var(--brand-cream);
    color: var(--brand-maroon);
    position: relative;
}
.page-section--lit-cream::before,
.page-section--lit-cream::after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--texan-yellow), transparent);
    opacity: 0.5;
}
.page-section--lit-cream::before { margin-bottom: var(--section-spacing); }
.page-section--lit-cream::after  { margin-top: var(--section-spacing); }

/* --- EYEBROW: neon variant (yellow + glow) --- */
.page-eyebrow--neon {
    color: var(--texan-yellow);
    text-shadow: 0 0 8px var(--neon-yellow-glow-30);
    letter-spacing: 0.2em;
}

/* --- CTA: neon hero variant (extends shell --neon, persuasive yellow) ---
   The shell .page-cta--neon aliases .btn-neon defined above. Provide a
   resolved rule here so apps can use just .page-cta.page-cta--neon
   without also stamping .btn / .btn-neon. Visual tokens match .btn-neon. */
.page-cta.page-cta--neon {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1rem;
    padding: 16px 40px;
    border: 2px solid var(--texan-yellow);
    border-radius: 0;
    background: var(--texan-yellow);
    color: #1a0005;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 0 10px var(--neon-yellow-glow-30),
        0 0 30px var(--neon-yellow-glow-7);
}
.page-cta.page-cta--neon:hover {
    background: transparent;
    color: var(--texan-yellow);
    transform: translateY(-2px);
    box-shadow:
        0 0 15px var(--neon-yellow-glow-50),
        0 0 40px var(--neon-yellow-glow-30),
        inset 0 0 15px var(--neon-yellow-glow-15);
}

/* --- CTA: ghost (transparent, cream border, for hero secondary) --- */
.page-cta.page-cta--ghost {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1rem;
    padding: 16px 40px;
    border: 2px solid rgba(245, 239, 227, 0.4);
    border-radius: 0;
    background: transparent;
    color: var(--brand-cream);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.page-cta.page-cta--ghost:hover {
    border-color: var(--brand-cream);
    background: rgba(245, 239, 227, 0.08);
    transform: translateY(-2px);
}

/* --- NEON DIVIDER (small accent, optional) --- */
.neon-divider-line {
    display: block;
    width: 80px;
    height: 1px;
    margin: 1.5rem auto;
    background: linear-gradient(90deg, transparent, var(--texan-yellow), transparent);
    opacity: 0.6;
}

/* --- BODY-LEVEL CASCADE (keeps the page background dark when a hero
   omits its own background image, e.g. heritage with a photo bg behind
   .page-hero__bg). Use .page-neon on <body> to lock the page in dark
   mode; hero photo overlays still work. --- */
body.page-neon {
    background: var(--bg-neon-night);
    color: var(--brand-cream);
}
body.page-neon main {
    background: var(--bg-neon-night);
}

/* ===========================================================================
   PAGE-HEADER (UTILITY / LEGAL / SHIPPING / FAQ / CONTACT)
   ===========================================================================
   Pattern C in Site_Cohesion_Audit_2026-05-01 - the no-hero, simple title
   strip pattern used on utility / legal / shop-meta pages. Promotes
   faq.css / shipping.css / contact.css "page-header" + legal.css
   "legal-header" into a shared, dialect-agnostic shell.

   Markup:
       <section class="page-header page-header--neon">
           <div class="container">
               <span class="page-eyebrow page-eyebrow--neon">Optional eyebrow</span>
               <h1 class="page-title">Page Title</h1>
               <p class="page-lede">Optional lede paragraph.</p>
           </div>
       </section>

   On the cream/utility variant (default base, no modifier) the strip sits
   on cream with maroon text. On the neon utility variant the strip turns
   into a short dark band that sets the dialect signature on first scroll
   while leaving the rest of the page on cream so legal/utility text stays
   readable. Both share spacing tokens with the rest of the shell.
   =========================================================================== */
.page-header {
    text-align: center;
    padding: var(--section-spacing) 0 2rem;
}
.page-header .page-title {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    color: var(--brand-maroon);
    margin-bottom: 1rem;
    text-transform: uppercase;
    line-height: 1.42;
    overflow: visible;
    overflow-wrap: break-word;
}
.page-header .page-lede {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}
.page-header .page-lede a {
    color: var(--brand-maroon-soft);
    text-decoration: underline;
}
.page-header .page-lede a:hover {
    color: var(--brand-maroon);
}

/* --- NEON UTILITY VARIANT: maroon-gradient strip with yellow accent rails --- */
.page-header--neon {
    background:
        radial-gradient(
            ellipse at center top,
            var(--brand-maroon) 0%,
            var(--bg-neon-night-2) 60%,
            var(--bg-neon-night) 100%
        );
    color: var(--brand-cream);
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(-1 * var(--header-height));
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.page-header--neon::before,
.page-header--neon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--texan-yellow) 30%, var(--texan-yellow) 70%, transparent 100%);
    box-shadow: 0 0 12px var(--neon-yellow-glow-50);
    opacity: 0.7;
}
.page-header--neon::before {
    top: var(--header-height);
}
.page-header--neon::after {
    bottom: 0;
}
.page-header--neon .page-title {
    color: var(--brand-cream);
    text-shadow: 2px 2px 14px rgba(0, 0, 0, 0.55);
}
.page-header--neon .page-lede {
    color: var(--brand-cream);
    opacity: 0.85;
}
.page-header--neon .page-lede a {
    color: var(--texan-yellow);
}
.page-header--neon .page-lede a:hover {
    text-shadow: 0 0 8px var(--neon-yellow-glow-50);
}
.page-header--neon .page-updated {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--texan-yellow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .page-header--neon {
        min-height: 24vh;
    }
    .page-header .page-title {
        font-size: var(--text-3xl);
    }
    .page-header .page-lede {
        font-size: var(--text-base);
    }
}