/* ============================================================
   DG Club App — "Midnight Bazaar"
   Deco-Modern Indian Casino · dark mode first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,700;1,9..144,900&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

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

:root{
    /* ink + velvet */
    --ink:#07090F;
    --midnight:#0C1220;
    --velvet:#131A2C;
    --velvet-2:#1A2239;
    --hairline:rgba(245,183,0,.14);
    --hairline-strong:rgba(245,183,0,.42);

    /* warm metals + spice */
    --marigold:#F5B700;
    --marigold-hot:#FFC733;
    --marigold-deep:#C89200;
    --crimson:#E11D48;
    --ruby:#9F1239;
    --jade:#12B886;

    /* type */
    --cream:#F3E9D2;
    --bone:#E2D8BE;
    --ash:#8F97AD;
    --ash-dim:#5F6478;

    /* legacy aliases (kept so existing pages don't break) */
    --primary:var(--marigold);
    --primary-light:var(--marigold-hot);
    --accent:var(--marigold);
    --accent-dark:var(--marigold-deep);
    --text:var(--cream);
    --text-muted:var(--ash);
    --bg:var(--ink);
    --card:var(--velvet);
    --border:var(--hairline);
    --success:var(--jade);

    --radius:2px;
    --radius-lg:6px;
    --shadow:0 1px 0 rgba(245,183,0,.06), 0 20px 40px -20px rgba(0,0,0,.6);
    --shadow-lg:0 30px 80px -30px rgba(0,0,0,.8), 0 1px 0 rgba(245,183,0,.12) inset;
    --container:1180px;

    --font-display:'Fraunces', 'Cormorant Garamond', 'Bodoni Moda', ui-serif, Georgia, serif;
    --font-body:'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

body{
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.65;
    color:var(--cream);
    background:var(--ink);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    letter-spacing:.005em;

    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245,183,0,.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 10%, rgba(225,29,72,.06), transparent 60%),
        radial-gradient(ellipse 60% 40% at 0% 50%, rgba(18,184,134,.04), transparent 70%),
        linear-gradient(180deg, var(--ink) 0%, var(--midnight) 100%);
    background-attachment:fixed;
}

/* film grain overlay */
body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:.4;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.91 0 0 0 0 0.82 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size:180px;
}
/* keep interactive layer above grain */
header,nav,main,footer,.ticker-strip,.ornament{position:relative;z-index:2}

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

a{color:var(--marigold);text-decoration:none;transition:color .2s ease, text-shadow .2s ease}
a:hover{color:var(--marigold-hot);text-shadow:0 0 18px rgba(245,183,0,.35)}

::selection{background:var(--marigold);color:var(--ink)}

/* ============================================================
   HEADER / HERO
   ============================================================ */
header.site-header{
    padding:clamp(48px,9vw,110px) 20px clamp(60px,10vw,130px);
    text-align:center;
    overflow:hidden;
    border-bottom:1px solid var(--hairline);
    background:
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(245,183,0,.16), transparent 65%),
        linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}

/* deco sunburst rays */
header.site-header::before{
    content:'';
    position:absolute;
    inset:auto 0 -40% 0;
    height:150%;
    background:
        conic-gradient(from 180deg at 50% 100%,
            transparent 0deg,
            rgba(245,183,0,.09) 8deg,
            transparent 16deg,
            rgba(245,183,0,.14) 24deg,
            transparent 32deg,
            rgba(245,183,0,.09) 40deg,
            transparent 48deg,
            rgba(245,183,0,.14) 56deg,
            transparent 64deg,
            rgba(245,183,0,.09) 72deg,
            transparent 80deg,
            rgba(245,183,0,.14) 88deg,
            transparent 96deg,
            rgba(245,183,0,.09) 104deg,
            transparent 112deg,
            rgba(245,183,0,.14) 120deg,
            transparent 128deg,
            rgba(245,183,0,.09) 136deg,
            transparent 144deg);
    mask-image:radial-gradient(ellipse 90% 60% at 50% 100%, #000 0%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 100%, #000 0%, transparent 70%);
    animation:raysDrift 28s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:0;
}

@keyframes raysDrift{
    0%{transform:translateX(-2%) rotate(-1deg)}
    100%{transform:translateX(2%) rotate(1deg)}
}

/* thin marigold hairline at hero bottom */
header.site-header::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--marigold) 50%, transparent);
    opacity:.55;
    z-index:2;
}

header.site-header h1{
    font-family:var(--font-display);
    font-weight:900;
    font-style:italic;
    font-size:clamp(2.5rem, 9vw, 6.75rem);
    line-height:.92;
    letter-spacing:-.02em;
    color:var(--cream);
    margin-bottom:18px;
    position:relative;
    z-index:2;
    text-wrap:balance;
    animation:fadeRise .9s cubic-bezier(.2,.7,.2,1) .05s both;
}
header.site-header h1::after{
    content:'';
    display:block;
    width:clamp(72px,14vw,180px);
    height:1px;
    margin:22px auto 0;
    background:linear-gradient(90deg, transparent, var(--marigold), transparent);
}
header.site-header p{
    font-family:var(--font-body);
    font-weight:400;
    font-size:clamp(.95rem,1.9vw,1.15rem);
    color:var(--bone);
    opacity:.82;
    max-width:620px;
    margin:0 auto;
    position:relative;
    z-index:2;
    letter-spacing:.08em;
    text-transform:uppercase;
    animation:fadeRise .9s cubic-bezier(.2,.7,.2,1) .25s both;
}

/* small eyebrow above h1 — inserted via markup */
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--marigold);
    margin-bottom:24px;
    padding:6px 14px;
    border:1px solid var(--hairline-strong);
    border-radius:999px;
    background:rgba(245,183,0,.05);
    position:relative;
    z-index:2;
    animation:fadeRise .9s cubic-bezier(.2,.7,.2,1) both;
}
.eyebrow .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--crimson);
    box-shadow:0 0 10px var(--crimson);
    animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.45;transform:scale(.78)}
}
@keyframes fadeRise{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav.site-nav{
    background:rgba(7,9,15,.72);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid var(--hairline);
}
nav.site-nav::after{
    content:'';
    position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg, transparent, var(--marigold) 50%, transparent);
    opacity:.35;
}
.nav-container{
    max-width:var(--container);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 22px;
}
.nav-brand{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    color:var(--cream);
    font-size:1.35rem;
    letter-spacing:-.01em;
}
.nav-toggle{
    display:block;
    background:transparent;
    border:1px solid var(--hairline-strong);
    color:var(--marigold);
    padding:8px 12px;
    border-radius:var(--radius);
    cursor:pointer;
    font-size:1.1rem;
    line-height:1;
    min-height:42px;
    min-width:42px;
    transition:all .2s ease;
}
.nav-toggle:hover{background:rgba(245,183,0,.1);color:var(--marigold-hot)}

.nav-menu{
    display:none;
    list-style:none;
    flex-direction:column;
    width:100%;
    padding:12px 0 18px;
}
.nav-menu.open{display:flex}
.nav-menu li{width:100%}
.nav-menu a{
    display:block;
    color:var(--bone);
    padding:14px 22px;
    font-weight:500;
    font-size:.98rem;
    border-top:1px solid var(--hairline);
    min-height:44px;
    letter-spacing:.02em;
    transition:color .15s ease, background .15s ease;
}
.nav-menu a:hover,
.nav-menu a[aria-current="page"]{
    color:var(--marigold);
    background:rgba(245,183,0,.04);
}

@media (min-width:880px){
    .nav-toggle{display:none}
    .nav-container{padding:0 22px}
    .nav-menu{
        display:flex!important;
        flex-direction:row;
        gap:2px;
        width:auto;
        padding:0;
    }
    .nav-menu li{width:auto}
    .nav-menu a{
        border-top:none;
        padding:20px 16px;
        font-size:.85rem;
        letter-spacing:.06em;
        text-transform:uppercase;
        color:var(--ash);
        position:relative;
    }
    .nav-menu a::after{
        content:'';
        position:absolute;
        left:16px;right:16px;bottom:14px;
        height:1px;
        background:var(--marigold);
        transform:scaleX(0);
        transform-origin:left;
        transition:transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .nav-menu a:hover,
    .nav-menu a[aria-current="page"]{color:var(--cream);background:transparent}
    .nav-menu a:hover::after,
    .nav-menu a[aria-current="page"]::after{transform:scaleX(1)}
}

/* ============================================================
   TICKER STRIP
   ============================================================ */
.ticker-strip{
    background:linear-gradient(90deg, var(--velvet), var(--midnight), var(--velvet));
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    padding:10px 0;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--bone);
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{
    display:flex;
    gap:48px;
    width:max-content;
    animation:tickerSlide 45s linear infinite;
    padding-left:48px;
}
.ticker-track span{
    display:inline-flex;
    align-items:baseline;
    gap:10px;
    white-space:nowrap;
}
.ticker-track span + span{
    padding-left:48px;
    border-left:1px solid var(--hairline);
}
.ticker-track b{
    color:var(--marigold-hot);
    font-weight:700;
    letter-spacing:.08em;
}
@keyframes tickerSlide{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs{
    max-width:var(--container);
    margin:0 auto;
    padding:18px 22px 0;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ash-dim);
}
.breadcrumbs a{color:var(--ash)}
.breadcrumbs a:hover{color:var(--marigold)}
.breadcrumbs span[aria-current="page"]{color:var(--cream)}

/* ============================================================
   MAIN / SECTIONS
   ============================================================ */
main{
    flex:1;
    max-width:var(--container);
    margin:0 auto;
    padding:clamp(24px,4vw,48px) 22px;
    width:100%;
}

section{
    background:linear-gradient(180deg, var(--velvet) 0%, rgba(19,26,44,.72) 100%);
    padding:clamp(28px,4vw,52px);
    margin-bottom:28px;
    border-radius:var(--radius-lg);
    border:1px solid var(--hairline);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}

/* deco corner ticks on every section */
section::before,
section::after{
    content:'';
    position:absolute;
    width:14px;height:14px;
    border:1px solid var(--hairline-strong);
    pointer-events:none;
}
section::before{
    top:10px;left:10px;
    border-right:none;border-bottom:none;
}
section::after{
    bottom:10px;right:10px;
    border-left:none;border-top:none;
}

section > h2:first-child,
section > .eyebrow + h2{
    margin-top:4px;
}

h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.6rem,3.8vw,2.5rem);
    line-height:1.08;
    letter-spacing:-.015em;
    color:var(--cream);
    margin-bottom:18px;
    text-wrap:balance;
}
h2 em, h2 i{
    font-style:italic;
    color:var(--marigold);
    font-weight:700;
}

h3{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--marigold);
    margin:24px 0 10px;
    font-size:clamp(1.15rem,2.4vw,1.4rem);
    letter-spacing:-.005em;
}

p{margin-bottom:14px;color:var(--bone)}
p a{border-bottom:1px dashed rgba(245,183,0,.35);padding-bottom:1px}
p a:hover{border-bottom-color:var(--marigold-hot)}

strong{color:var(--cream);font-weight:700}
em{color:var(--marigold);font-style:italic}

/* section number badge (optional, via markup) */
.section-num{
    display:inline-block;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:.85rem;
    color:var(--marigold);
    letter-spacing:.08em;
    margin-bottom:6px;
    padding-bottom:4px;
    border-bottom:1px solid var(--hairline-strong);
}

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--marigold);
    color:var(--ink)!important;
    padding:16px 30px;
    border-radius:var(--radius);
    font-family:var(--font-body);
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-decoration:none;
    margin:8px 10px 8px 0;
    min-height:52px;
    border:none;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
    box-shadow:
        0 0 0 1px var(--marigold-deep),
        0 12px 28px -10px rgba(245,183,0,.6),
        inset 0 1px 0 rgba(255,255,255,.25);
}
.cta::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform:translateX(-110%);
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.cta:hover{
    background:var(--marigold-hot);
    transform:translateY(-2px);
    box-shadow:
        0 0 0 1px var(--marigold),
        0 20px 40px -10px rgba(245,183,0,.75),
        inset 0 1px 0 rgba(255,255,255,.4);
}
.cta:hover::before{transform:translateX(110%)}
.cta::after{
    content:'→';
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.1rem;
    transition:transform .2s ease;
}
.cta:hover::after{transform:translateX(3px)}

.cta.secondary{
    background:transparent;
    color:var(--cream)!important;
    box-shadow:inset 0 0 0 1px var(--hairline-strong);
}
.cta.secondary:hover{
    background:rgba(245,183,0,.06);
    color:var(--marigold)!important;
    box-shadow:inset 0 0 0 1px var(--marigold);
}
.cta.secondary::before{display:none}

.cta.block{display:flex;width:100%;margin:10px 0}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* ============================================================
   TABLES (at-a-glance style)
   ============================================================ */
table{
    width:100%;
    border-collapse:collapse;
    margin:18px 0;
    font-size:.95rem;
    font-family:var(--font-body);
    background:rgba(7,9,15,.35);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
th,td{
    padding:14px 18px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--hairline);
}
tr:last-child td{border-bottom:none}

th{
    background:rgba(245,183,0,.06);
    color:var(--marigold);
    font-family:var(--font-mono);
    font-weight:500;
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
}
td{color:var(--bone)}
td:first-child{
    color:var(--ash);
    font-family:var(--font-mono);
    font-size:.82rem;
    letter-spacing:.04em;
    width:38%;
}
td:last-child{color:var(--cream);font-weight:500}
tr:hover td{background:rgba(245,183,0,.03)}

@media (max-width:560px){
    table{font-size:.88rem}
    th,td{padding:10px 12px}
    td:first-child{width:42%}
}

/* ============================================================
   LISTS — numbered how-to gets deco numerals
   ============================================================ */
ul,ol{padding-left:22px;margin-bottom:14px}
ul li,ol li{margin-bottom:8px;color:var(--bone)}

ol{
    counter-reset:step;
    list-style:none;
    padding-left:0;
}
ol li{
    counter-increment:step;
    padding:12px 0 12px 56px;
    position:relative;
    border-bottom:1px dashed var(--hairline);
}
ol li:last-child{border-bottom:none}
ol li::before{
    content:counter(step,decimal-leading-zero);
    position:absolute;
    left:0;top:10px;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:1.4rem;
    color:var(--marigold);
    letter-spacing:-.02em;
    min-width:40px;
}

ul{padding-left:22px;list-style:disc}
ul li{color:var(--bone)}
ul li::marker{color:var(--marigold)}

/* ============================================================
   CARDS GRID — deco game cards
   ============================================================ */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
    margin:24px 0 8px;
}
.card{
    background:linear-gradient(180deg, var(--velvet-2) 0%, var(--velvet) 100%);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    padding:26px 24px 28px;
    position:relative;
    overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--marigold), transparent);
    opacity:0;
    transition:opacity .35s ease;
}
.card::after{
    content:'';
    position:absolute;
    top:-40%;right:-40%;
    width:180px;height:180px;
    background:radial-gradient(circle, rgba(245,183,0,.12), transparent 65%);
    opacity:0;
    transition:opacity .5s ease;
    pointer-events:none;
}
.card:hover{
    transform:translateY(-4px);
    border-color:var(--hairline-strong);
    box-shadow:var(--shadow-lg);
}
.card:hover::before{opacity:1}
.card:hover::after{opacity:1}

.card h3{
    margin-top:0;
    margin-bottom:10px;
    color:var(--cream);
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.35rem;
    letter-spacing:-.005em;
}
.card h3 a{color:inherit;border:none}
.card h3 a:hover{color:var(--marigold)}
.card p{color:var(--ash);font-size:.92rem;margin-bottom:0;line-height:1.55}

/* card decorative index number */
.card[data-index]::before{opacity:1}
.card[data-index] h3::before{
    content:attr(data-index);
    display:block;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.24em;
    color:var(--marigold);
    margin-bottom:10px;
    font-weight:500;
}

/* ============================================================
   STATS GRID (for At a Glance alt-style)
   ============================================================ */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1px;
    background:var(--hairline);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin:20px 0;
}
.stat{
    background:var(--velvet);
    padding:24px 22px;
    position:relative;
    transition:background .25s ease;
}
.stat:hover{background:var(--velvet-2)}
.stat .label{
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ash);
    margin-bottom:10px;
    display:block;
}
.stat .value{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.6rem;
    line-height:1.15;
    color:var(--cream);
    letter-spacing:-.01em;
}
.stat .value em{
    color:var(--marigold);
    font-style:italic;
    font-weight:900;
}

/* ============================================================
   FAQ — details / summary
   ============================================================ */
details.faq{
    border-top:1px solid var(--hairline);
    padding:2px 0;
}
details.faq:last-of-type{border-bottom:1px solid var(--hairline)}
details.faq summary{
    list-style:none;
    cursor:pointer;
    padding:22px 48px 22px 4px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.05rem,2.2vw,1.25rem);
    color:var(--cream);
    position:relative;
    transition:color .2s ease;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
    content:'+';
    position:absolute;
    right:8px;top:50%;
    transform:translateY(-50%);
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.6rem;
    color:var(--marigold);
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
details.faq[open] summary::after{content:'−';transform:translateY(-50%) rotate(180deg)}
details.faq summary:hover{color:var(--marigold)}
details.faq[open] summary{color:var(--marigold)}
details.faq p{
    padding:0 0 22px 4px;
    color:var(--bone);
    font-size:.98rem;
}

/* ============================================================
   FORMS
   ============================================================ */
form{display:flex;flex-direction:column;gap:14px;margin:18px 0}
label{
    font-family:var(--font-mono);
    font-weight:500;
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--marigold);
}
input,select,textarea{
    padding:14px 16px;
    background:rgba(7,9,15,.5);
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius);
    font-size:16px;
    font-family:var(--font-body);
    color:var(--cream);
    min-height:48px;
    transition:border-color .2s ease, background .2s ease;
}
input::placeholder,textarea::placeholder{color:var(--ash-dim)}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--marigold);
    background:rgba(7,9,15,.8);
    box-shadow:0 0 0 3px rgba(245,183,0,.12);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert{
    padding:14px 18px;
    border-radius:var(--radius);
    margin:14px 0;
    font-size:.95rem;
    border:1px solid;
    border-left-width:3px;
    font-family:var(--font-body);
}
.alert.info{background:rgba(18,184,134,.08);border-color:var(--jade);color:#7EE7C4}
.alert.warn{background:rgba(245,183,0,.08);border-color:var(--marigold);color:var(--marigold-hot)}
.alert.success{background:rgba(18,184,134,.08);border-color:var(--jade);color:#7EE7C4}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer{
    background:var(--midnight);
    color:var(--ash);
    text-align:center;
    padding:56px 22px 44px;
    font-size:.88rem;
    margin-top:56px;
    border-top:1px solid var(--hairline);
    position:relative;
}
footer.site-footer::before{
    content:'';
    position:absolute;
    left:50%;top:-1px;
    width:200px;height:1px;
    background:linear-gradient(90deg, transparent, var(--marigold), transparent);
    transform:translateX(-50%);
}
footer.site-footer nav{
    margin-bottom:22px;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
}
footer.site-footer nav a{
    color:var(--bone);
    margin:0 10px;
    transition:color .2s ease;
}
footer.site-footer nav a:hover{color:var(--marigold)}
footer.site-footer p{
    color:var(--ash-dim);
    margin-bottom:0;
    font-size:.82rem;
    letter-spacing:.04em;
}
footer.site-footer .mark{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:2rem;
    color:var(--marigold);
    margin-bottom:18px;
    display:inline-block;
    letter-spacing:-.01em;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center{text-align:center}
.muted{color:var(--ash)}
.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(245,183,0,.08);
    color:var(--marigold);
    padding:4px 10px;
    border-radius:999px;
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    border:1px solid var(--hairline-strong);
}
.badge.hot{
    color:var(--crimson);
    border-color:rgba(225,29,72,.4);
    background:rgba(225,29,72,.08);
}
.badge.hot::before{
    content:'';
    width:5px;height:5px;border-radius:50%;
    background:var(--crimson);
    box-shadow:0 0 8px var(--crimson);
    animation:pulse 1.6s ease-in-out infinite;
}

/* entry animations for sections */
section{animation:fadeRise .7s cubic-bezier(.2,.7,.2,1) both}
section:nth-of-type(2){animation-delay:.08s}
section:nth-of-type(3){animation-delay:.14s}
section:nth-of-type(4){animation-delay:.2s}
section:nth-of-type(5){animation-delay:.24s}
section:nth-of-type(n+6){animation-delay:.28s}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .ticker-track{animation:none;padding-left:0}
}