/* ── myBad Studios — Shared Stylesheet ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --paper:    #f5f2ed;
    --paper2:   #edeae4;
    --white:    #ffffff;
    --ink:      #111110;
    --ink2:     #2a2927;
    --mid:      #6b6760;
    --faint:    #c8c4bc;
    --rule:     #dedad3;
    --red:      #c8341a;
    --red-light:#fdf0ed;
    --blue:     #1a4f8c;
    --blue-mid: #2262b0;
    --blue-light:#eef4fc;
    --navy:     #0d2340;
    --purple:   #5e35b1;
    --purple-light:#f0ebfa;
}

html{scroll-behavior:smooth}
body{
    background:var(--paper);color:var(--ink);
    font-family:'DM Sans',sans-serif;font-weight:300;
    line-height:1.6;overflow-x:hidden;
}

/* ── Nav — base state (light pages) ── */
nav{
    position:fixed;top:0;left:0;right:0;z-index:200;
    padding:1.1rem 3rem;
    display:flex;align-items:center;justify-content:space-between;gap:2rem;
    background:rgba(245,242,237,0.95);
    backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--rule);
    transition:background 0.3s,box-shadow 0.3s;
}

/* Dark hero pages — nav starts transparent with light text */
nav.dark-hero{
    background:transparent;
    box-shadow:none;
}
nav.dark-hero .nav-links a{color:rgba(240,237,232,0.75);}
nav.dark-hero .nav-links a:hover{color:#f0ede8;}
nav.dark-hero .nav-links a::after{background:#f0ede8;}
nav.dark-hero .nav-shop{color:rgba(240,237,232,0.75);border-color:rgba(240,237,232,0.25);}
nav.dark-hero .nav-shop:hover{background:rgba(240,237,232,0.15);color:#f0ede8;border-color:rgba(240,237,232,0.5);}
nav.dark-hero .nav-burger span{background:#f0ede8;}

/* Scrolled state — always light background */
nav.scrolled{
    background:rgba(245,242,237,0.95);
    backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--rule);
}
nav.scrolled .nav-links a{color:var(--ink2);}
nav.scrolled .nav-links a:hover{color:var(--ink);}
nav.scrolled .nav-links a::after{background:var(--red);}
nav.scrolled .nav-shop{color:var(--red);border-color:rgba(200,52,26,0.35);}
nav.scrolled .nav-shop:hover{background:var(--red);color:#fff;}
nav.scrolled .nav-burger span{background:var(--ink);}
nav.scrolled #navLogo{filter:none!important;}

.nav-logo img{height:32px;width:auto;display:block;transition:filter 0.3s;}
.nav-links{
    display:flex;align-items:center;gap:2rem;list-style:none;flex:1;
    justify-content:center;
}
.nav-links a{
    font-size:13px;font-weight:400;color:var(--ink2);
    text-decoration:none;transition:color 0.2s;position:relative;
}
.nav-links a::after{
    content:'';position:absolute;bottom:-3px;left:0;right:0;
    height:1px;background:var(--red);
    transform:scaleX(0);transition:transform 0.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-shop{
    font-size:12px;font-weight:500;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--red);
    text-decoration:none;border:1px solid rgba(200,52,26,0.35);
    padding:0.45rem 1.1rem;
    transition:background 0.2s,color 0.2s,border-color 0.2s;flex-shrink:0;
}
.nav-shop:hover{background:var(--red);color:#fff;}

/* Burger */
.nav-burger{
    display:none;flex-direction:column;gap:5px;
    background:none;border:none;cursor:pointer;padding:4px;
}
.nav-burger span{
    display:block;width:22px;height:1.5px;background:var(--ink);
    transition:transform 0.2s,opacity 0.2s;
}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Mobile nav */
.nav-mobile{
    position:fixed;top:60px;left:0;right:0;z-index:190;
    background:rgba(245,242,237,0.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--rule);
    flex-direction:column;
    padding:1.5rem 2rem;gap:1rem;
    transform:translateY(-10px);opacity:0;
    pointer-events:none;
    transition:transform 0.25s,opacity 0.25s;
    display:flex;
}
.nav-mobile.open{transform:translateY(0);opacity:1;pointer-events:all;}
.nav-mobile a{
    font-size:15px;color:var(--ink2);text-decoration:none;
    padding:0.5rem 0;border-bottom:1px solid var(--rule);
}
.nav-mobile a:last-child{border-bottom:none;}
.mobile-shop{color:var(--red)!important;font-weight:500;}

/* ── Shared buttons ── */
.btn-solid{
    display:inline-flex;align-items:center;gap:0.4rem;
    padding:0.85rem 2.1rem;
    background:var(--ink);color:var(--paper);
    font-family:'DM Sans',sans-serif;
    font-size:12px;font-weight:500;letter-spacing:0.08em;
    text-transform:uppercase;text-decoration:none;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
    transition:background 0.2s,transform 0.15s;
}
.btn-solid:hover{background:var(--ink2);transform:translateY(-2px);}

.btn-outline{
    display:inline-flex;align-items:center;gap:0.4rem;
    padding:0.85rem 2.1rem;
    background:transparent;color:var(--ink2);
    font-family:'DM Sans',sans-serif;
    font-size:12px;font-weight:400;letter-spacing:0.08em;
    text-transform:uppercase;text-decoration:none;
    border:1px solid var(--rule);
    transition:border-color 0.2s,color 0.2s,transform 0.15s;
}
.btn-outline:hover{border-color:var(--ink2);color:var(--ink);transform:translateY(-2px);}

.btn-red{
    display:inline-flex;align-items:center;gap:0.4rem;
    padding:0.85rem 2.1rem;
    background:var(--red);color:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:12px;font-weight:500;letter-spacing:0.08em;
    text-transform:uppercase;text-decoration:none;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
    transition:background 0.2s,transform 0.15s;
}
.btn-red:hover{background:#a8291a;transform:translateY(-2px);}

/* ── Shared section utilities ── */
.eyebrow{
    font-size:10px;font-weight:600;letter-spacing:0.22em;
    text-transform:uppercase;color:var(--red);
    display:flex;align-items:center;gap:0.75rem;
    margin-bottom:2.5rem;
}
.eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--red);}
.eyebrow-blue{color:var(--blue-mid);}
.eyebrow-blue::before{background:var(--blue-mid);}

.section-h2{
    font-family:'Syne',sans-serif;
    font-size:clamp(1.8rem,3vw,2.8rem);
    font-weight:700;line-height:1.05;
    letter-spacing:-0.02em;margin-bottom:1rem;
}
.section-h2 em{font-style:italic;color:var(--red);font-weight:400;}

.section-intro{
    font-size:15px;color:var(--mid);line-height:1.8;
    max-width:580px;margin-bottom:3.5rem;
}

.section{padding:5.5rem 3rem;max-width:1100px;margin:0 auto;}
.section-wide{padding:5.5rem 3rem;max-width:1200px;margin:0 auto;}

/* ── Ticker ── */
.ticker{
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    overflow:hidden;white-space:nowrap;
    background:var(--white);padding:0.8rem 0;
}
.ticker-track{
    display:inline-flex;gap:3rem;
    animation:ticker 35s linear infinite;
}
.ticker span{
    font-size:11px;font-weight:400;letter-spacing:0.15em;
    text-transform:uppercase;color:var(--mid);
}
.ticker span.hi{color:var(--red);font-weight:500;}

/* ── Footer ── */
.site-footer{
    background:var(--ink);
    border-top:1px solid rgba(255,255,255,0.06);
    padding:4rem 3rem 2rem;
}
.footer-inner{
    max-width:1100px;margin:0 auto;
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;margin-bottom:3rem;
}
.footer-brand p{font-size:13px;color:rgba(240,237,232,0.4);line-height:1.6;}
.footer-links-group h4{
    font-size:10px;font-weight:600;letter-spacing:0.18em;
    text-transform:uppercase;color:rgba(240,237,232,0.35);
    margin-bottom:1rem;
}
.footer-links-group a{
    display:block;font-size:13px;color:rgba(240,237,232,0.5);
    text-decoration:none;margin-bottom:0.6rem;transition:color 0.2s;
}
.footer-links-group a:hover{color:rgba(240,237,232,0.85);}
.footer-bottom{
    max-width:1100px;margin:0 auto;
    padding-top:2rem;border-top:1px solid rgba(255,255,255,0.06);
    font-size:12px;color:#dddddd;
}

/* ── Scroll reveal ── */
.reveal{
    opacity:0;transform:translateY(24px);
    transition:opacity 0.65s ease,transform 0.65s ease;
}
.reveal.on{opacity:1;transform:translateY(0);}
.d1{transition-delay:0.1s;}.d2{transition-delay:0.2s;}.d3{transition-delay:0.3s;}
.d4{transition-delay:0.4s;}.d5{transition-delay:0.5s;}

/* ── Keyframes ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pulse{0%,100%{opacity:0.5;}50%{opacity:1;}}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── Mobile ── */
@media(max-width:900px){
    nav{padding:1rem 1.5rem;}
    .nav-links{display:none;}
    .nav-burger{display:flex;}
    .footer-inner{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media(max-width:600px){
    nav{padding:1rem;}
    .section,.section-wide{padding:3.5rem 1.25rem;}
    .site-footer{padding:3rem 1.25rem 2rem;}
    .footer-inner{grid-template-columns:1fr;}
}
