/* ==========================================================================
   CHRONOS // SWISS WATCHMAKER DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Color Palette */
    --bg-obsidian: #06080e;
    --bg-navy: #0b0f19;
    --bg-card: rgba(15, 22, 38, 0.55);
    --gold-champagne: #dfb05b;
    --gold-metallic: #c5a05b;
    --gold-dim: rgba(223, 176, 91, 0.3);
    --gold-glow: rgba(223, 176, 91, 0.18);
    --gold-aura: rgba(223, 176, 91, 0.02);
    
    /* System Colors */
    --text-main: #f1f3f7;
    --text-muted: #8c9ba5;
    --text-white: #ffffff;
    --border-gold: rgba(223, 176, 91, 0.14);
    --border-light: rgba(255, 255, 255, 0.04);
    
    /* Layout Tokens */
    --border-radius-lg: 16px;
    --border-radius-md: 10px;
    --border-radius-sm: 6px;
    --transition-smooth: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.18s ease;
    
    /* Typography */
    --font-serif: 'Cinzel', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, monospace;
}

/* Reset & Basics */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-obsidian);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Luxury Blueprint Background */
body::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(circle at 80% 20%, var(--gold-aura) 0%, transparent 45%),
        radial-gradient(circle at 10% 80%, rgba(223, 176, 91, 0.015) 0%, transparent 50%),
        linear-gradient(rgba(11, 15, 25, 0.9), rgba(6, 8, 14, 0.95));
    z-index: -2;
    pointer-events: none;
}

body::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(circle at center, rgba(223, 176, 91, 0.01) 2px, transparent 2px),
        linear-gradient(var(--border-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
    background-size: 100px 100px, 40px 40px, 40px 40px;
    opacity: 0.25;
    z-index: -1;
    pointer-events: none;
}

/* Layout Utilities */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 40px 0;
}

/* Header & Guild Navigation Menu */
.chronos-header {
    background: rgba(6, 8, 14, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-gold);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    transition: var(--transition-smooth);
}

.header-inner {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-white);
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.header-logo span {
    color: var(--gold-champagne);
    font-weight: 800;
    text-shadow: 0 0 8px var(--gold-glow);
}

.guild-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.guild-nav-link {
    text-decoration: none;
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.05em;
}

.guild-nav-link:hover {
    color: var(--gold-champagne);
    border-color: rgba(223, 176, 91, 0.1);
    background: rgba(223, 176, 91, 0.03);
}

.guild-nav-link.is-active {
    color: var(--text-white);
    background: rgba(223, 176, 91, 0.08);
    border-color: var(--gold-champagne);
    box-shadow: inset 0 0 10px rgba(223, 176, 91, 0.05), 0 0 10px rgba(223, 176, 91, 0.1);
    text-shadow: 0 0 8px var(--gold-glow);
}

/* User Widget */
.guild-user-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    background: rgba(223, 176, 91, 0.04);
    border: 1px dashed var(--border-gold);
    border-radius: 30px;
    text-decoration: none;
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    transition: var(--transition-fast);
}

.guild-user-badge:hover {
    background: rgba(223, 176, 91, 0.08);
    border-color: var(--gold-champagne);
    box-shadow: 0 0 12px var(--gold-glow);
}

.guild-user-avatar {
    font-size: 1.1rem;
}

.guild-user-level {
    color: var(--gold-champagne);
    font-weight: 700;
}

/* Glassmorphic Cards & Layout Panels */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-top: 1.5px solid var(--border-gold);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(223, 176, 91, 0.02) 0%, transparent 100%);
    pointer-events: none;
}

.glass-card:hover {
    border-top-color: var(--gold-champagne);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45), 0 0 15px rgba(223, 176, 91, 0.05);
}

/* Grid Systems */
.chronos-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .chronos-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.chronos-layout-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .chronos-layout-sidebar {
        grid-template-columns: 280px 1fr;
    }
}

/* Titles & Badges */
.section-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold-champagne);
    text-transform: uppercase;
    margin-bottom: 6px;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: 0.03em;
}

h1 {
    font-size: 2.2rem;
    line-height: 1.25;
}

h2 {
    font-size: 1.6rem;
}

.text-lead {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 300;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    outline: none;
}

.btn--primary {
    background: linear-gradient(135deg, var(--gold-metallic), var(--gold-champagne));
    color: var(--bg-obsidian);
    border: none;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(223, 176, 91, 0.25);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(223, 176, 91, 0.4);
    filter: brightness(1.08);
}

.btn--outline {
    background: transparent;
    color: var(--gold-champagne);
    border: 1px solid var(--border-gold);
}

.btn--outline:hover {
    background: rgba(223, 176, 91, 0.05);
    border-color: var(--gold-champagne);
    color: var(--text-white);
    box-shadow: 0 0 10px rgba(223, 176, 91, 0.15);
}

.btn--full {
    width: 100%;
}

/* Ticking Circular Chronograph Hero Illustration */
.watch-illustration-wrap {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 380px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watch-casing {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 8px double var(--gold-champagne);
    background: radial-gradient(circle, #0e1424 45%, #05080e 100%);
    box-shadow: 0 25px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(223,176,91,0.2), 0 0 35px var(--gold-glow);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watch-dial-markings {
    position: absolute;
    width: 90%;
    height: 90%;
    border: 1px dashed rgba(223,176,91,0.12);
    border-radius: 50%;
}

.watch-gear-center {
    width: 120px;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke="%23dfb05b" stroke-width="2.5"><circle cx="50" cy="50" r="20" stroke-dasharray="2 3"/><path d="M50 5 L50 20 M50 80 L50 95 M5 50 L20 50 M80 50 L95 50 M18 18 L29 29 M71 71 L82 82 M82 18 L71 29 M29 71 L18 82"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: gearSpin 24s linear infinite;
    opacity: 0.65;
    position: absolute;
}

.watch-gear-small {
    width: 70px;
    height: 70px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke="%23c5a05b" stroke-width="2.5"><circle cx="50" cy="50" r="15" stroke-dasharray="3 3"/><path d="M50 5 L50 15 M50 85 L50 95 M5 50 L15 50 M85 50 L95 50 M20 20 L30 30 M80 80 L70 70 M80 20 L70 30 M30 70 L20 80"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    animation: gearSpinCounter 12s linear infinite;
    opacity: 0.45;
    position: absolute;
    top: 75px;
    left: 75px;
}

.watch-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    border-radius: 4px;
}

.watch-hand--hour {
    width: 6px;
    height: 70px;
    background: var(--text-white);
    margin-left: -3px;
    box-shadow: 0 0 5px rgba(255,255,255,0.4);
    z-index: 10;
}

.watch-hand--minute {
    width: 4px;
    height: 100px;
    background: var(--gold-champagne);
    margin-left: -2px;
    box-shadow: 0 0 6px rgba(223,176,91,0.5);
    z-index: 11;
}

.watch-hand--second {
    width: 2px;
    height: 120px;
    background: #ff5252;
    margin-left: -1px;
    box-shadow: 0 0 4px rgba(255,82,82,0.4);
    z-index: 12;
}

.watch-cap {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-white);
    border: 2px solid var(--gold-champagne);
    position: absolute;
    z-index: 15;
}

@keyframes gearSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gearSpinCounter {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Watch Timepiece Sponsor Card Grid */
.timepiece-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 576px) {
    .timepiece-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

.timepiece-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-md);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
    min-height: 380px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    position: relative;
}

.timepiece-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    pointer-events: none;
    transition: var(--transition-smooth);
}

.timepiece-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.45);
}

.timepiece-card:hover::after {
    border-color: var(--gold-champagne);
}

.timepiece-card.active::after {
    border-color: var(--gold-champagne);
    box-shadow: inset 0 0 10px rgba(223, 176, 91, 0.08);
}

.timepiece-cover {
    height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: flex-end;
    padding: 10px;
}

.timepiece-cover::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(6,8,14,0.1) 40%, rgba(6,8,14,0.85) 100%);
}

.timepiece-badge {
    position: relative;
    z-index: 5;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--text-white);
    border: 0.5px solid rgba(255,255,255,0.15);
}

.timepiece-badge.online { background: rgba(0, 240, 255, 0.15); color: #00f0ff; border-color: rgba(0, 240, 255, 0.3); }
.timepiece-badge.sweepstakes { background: rgba(223, 176, 91, 0.15); color: var(--gold-champagne); border-color: rgba(223, 176, 91, 0.3); }
.timepiece-badge.social { background: rgba(255, 0, 127, 0.15); color: #ff007f; border-color: rgba(255, 0, 127, 0.3); }

.timepiece-body {
    padding: 18px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.timepiece-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin-bottom: 6px;
    color: var(--text-white);
    letter-spacing: 0.02em;
}

.timepiece-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 12px;
}

.timepiece-specs {
    list-style: none;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-main);
}

.timepiece-specs li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.timepiece-specs li::before {
    content: '▫';
    color: var(--gold-champagne);
    font-weight: bold;
}

.timepiece-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.03);
    padding-top: 12px;
    margin-top: auto;
}

.timepiece-meta {
    display: flex;
    flex-direction: column;
}

.timepiece-meta span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Sidebar filter list */
.sidebar-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-box {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-box-title {
    font-family: var(--font-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold-champagne);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding-bottom: 8px;
}

.filter-node {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-node:hover {
    color: var(--text-white);
}

.filter-checkbox-round {
    width: 12px;
    height: 12px;
    border: 1px solid var(--border-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.filter-node.is-active {
    color: var(--text-white);
    font-weight: 600;
}

.filter-node.is-active .filter-checkbox-round {
    background: var(--gold-champagne);
    border-color: var(--gold-champagne);
    box-shadow: 0 0 6px var(--gold-champagne);
}

/* Inputs & Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.form-control {
    background: rgba(6, 8, 14, 0.4);
    border: 1px solid var(--border-gold);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    color: var(--text-white);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition-fast);
    width: 100%;
}

.form-control:focus {
    border-color: var(--gold-champagne);
    background: rgba(6, 8, 14, 0.7);
    box-shadow: 0 0 10px rgba(223,176,91,0.08);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Calibrator Mini-game Section */
.calibrator-workbench {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
}

.calibrator-ring {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px dashed var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(15,22,38,0.3) 60%, transparent 100%);
}

.calibrator-target {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #00f0ff;
    top: 8px; /* Top center alignment anchor */
    box-shadow: 0 0 15px rgba(0,240,255,0.4);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calibrator-target::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00f0ff;
}

.calibrator-gear {
    width: 200px;
    height: 200px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke="%23dfb05b" stroke-width="3"><circle cx="50" cy="50" r="30" stroke-dasharray="2 2"/><path d="M50 5 L50 20 M50 80 L50 95 M5 50 L20 50 M80 50 L95 50 M18 18 L29 29 M71 71 L82 82 M82 18 L71 29 M29 71 L18 82 M34 10 L40 22 M66 90 L60 78 M10 34 L22 40 M90 66 L78 60 M90 34 L78 40 M10 66 L22 60 M66 10 L60 22 M34 90 L40 78"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    transform-origin: center center;
    transition: transform 0.05s linear; /* Smooth responsive feedback */
}

.calibrator-pointer {
    position: absolute;
    width: 6px;
    height: 120px;
    background: linear-gradient(to top, transparent 40%, var(--gold-champagne) 100%);
    bottom: 50%;
    transform-origin: bottom center;
    z-index: 8;
}

/* Watch assembly customizer workbench */
.assembly-stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 320px;
    border-radius: var(--border-radius-lg);
    background: radial-gradient(circle, rgba(15,22,38,0.7) 40%, #05080e 100%);
    border: 1px solid var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 12px 35px rgba(0,0,0,0.4);
}

.custom-bezel {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 6px solid var(--gold-champagne);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
    position: absolute;
}

.custom-dial {
    width: 218px;
    height: 218px;
    border-radius: 50%;
    background-color: #0b1325;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.custom-hands {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* Customizer side configurations grid */
.custom-options-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.custom-options-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.custom-chip-btn {
    background: rgba(6, 8, 14, 0.4);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-size: 0.65rem;
    font-weight: bold;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    user-select: none;
    text-transform: uppercase;
}

.custom-chip-btn:hover {
    color: var(--gold-champagne);
    border-color: rgba(223,176,91,0.25);
    background: rgba(223,176,91,0.02);
}

.custom-chip-btn.is-active {
    background: rgba(223,176,91,0.08);
    border-color: var(--gold-champagne);
    color: var(--text-white);
    box-shadow: 0 0 10px var(--gold-glow);
}

/* Ledger Diagnostic log lines */
.ledger-terminal {
    background: #04060b;
    border: 1px solid var(--border-gold);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #e0e5eb;
    height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
}

.ledger-line {
    opacity: 0;
    transform: translateY(2px);
    animation: ledgerPrint 0.2s forwards;
}

.ledger-line::before {
    content: '[WATCH_SYS] ';
    color: var(--gold-champagne);
}

.ledger-line.warn::before {
    content: '[CALIB_WARN] ';
    color: #ff5252;
}

.ledger-line.ok::before {
    content: '[CALIB_SYNC] ';
    color: #00f0ff;
}

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

/* Footer Section */
.chronos-footer {
    border-top: 1px solid var(--border-light);
    background: #04060a;
    padding: 24px 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-top: auto;
    text-transform: uppercase;
}

.chronos-footer span {
    color: var(--gold-champagne);
}