/* ============================================================================
   dollar-trader.com — shared stylesheet (design system lifted from digdrivediy.com)
   Loaded AFTER each page's own <style> so it governs the shared chrome:
   tokens, type, header/nav/drawer, hero band, article + about blocks, footer.
   Page-specific calculator CSS stays in each page and re-skins via the tokens.
   Fonts: Oswald (headings) + Barlow (body) via Google Fonts link in <head>.
   ========================================================================== */

:root{
  /* new palette */
  --bg:#0d0d0d; --bg-alt:#1a1a1a; --panel:rgba(13,13,13,.25);
  --cream:#f6f2e8; --cream-72:rgba(246,242,232,.72); --cream-50:rgba(246,242,232,.5);
  --gold:#c9a227; --gold-text:#d4b03a; --white:#fff;
  --head:'Oswald',Impact,'Arial Narrow',sans-serif; --body:'Barlow',Arial,sans-serif;
  --radius:3px; --maxw:1100px;
  /* legacy token names used by every page's calculator CSS — mapped onto the palette */
  --surface:#1a1a1a; --border:#2a2a2a; --accent:#d4b03a;
  --text:#f6f2e8; --subtext:rgba(246,242,232,.72); --muted:rgba(246,242,232,.5);
  --green:#22c55e; --red:#ef4444; --blue:#38bdf8;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.65}
a{color:var(--gold-text)}
h1,h2,h3{font-family:var(--head);text-transform:uppercase;color:var(--white);line-height:1.08;letter-spacing:.01em}
h1{font-weight:700}h2{font-weight:700}h3{font-weight:500}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* kicker — dash-prefixed eyebrow */
.kicker,.hero-band .hero-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:14px;opacity:1}
.kicker::before,.hero-band .hero-eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);flex:none}
.lede{font-size:1.02rem;color:var(--cream-72);max-width:720px;margin-bottom:28px}
.meta{font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-72)}

/* buttons */
.btn{display:inline-block;font-family:var(--head);font-weight:700;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;padding:13px 22px;border-radius:var(--radius);border:2px solid var(--gold);background:var(--gold);color:var(--bg);text-decoration:none;transition:transform .12s,background .12s;cursor:pointer}
.btn:hover{background:#d9b23a;transform:translateY(-1px);text-decoration:none}
.btn.ghost{background:transparent;color:var(--cream)}
.btn.ghost:hover{background:rgba(201,162,39,.12)}

/* ── header / nav ─────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:20;background:rgba(13,13,13,.98);border-bottom:3px solid var(--gold);width:100%}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none;flex:none}
.brand img{height:30px;width:auto;display:block}
.brand.home{visibility:hidden}
.site-nav{display:flex;gap:2px;flex-wrap:nowrap}
.site-nav a{font-family:var(--head);font-weight:500;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);padding:8px 11px;border-radius:var(--radius);white-space:nowrap;text-decoration:none}
.site-nav a:hover,.site-nav a.active{color:var(--gold-text)}
.site-nav a.active{border-bottom:2px solid var(--gold);border-radius:0}

.hamburger{display:none;background:transparent;border:2px solid var(--gold);border-radius:var(--radius);width:42px;height:42px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;position:static;flex:none}
.hamburger span{display:block;width:18px;height:2px;background:var(--cream);border-radius:0;transition:transform .2s,opacity .2s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999}
.mobile-overlay.open{display:block}
.mobile-drawer{position:fixed;top:0;left:-300px;width:280px;height:100%;z-index:1000;background:var(--bg-alt);border-right:3px solid var(--gold);padding:24px 16px;transition:left .25s ease;overflow-y:auto}
.mobile-drawer.open{left:0}
.mobile-drawer-title{font-family:var(--head);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--gold-text);text-transform:uppercase;padding:0 14px 10px;border-bottom:1px solid #2a2a2a;margin-bottom:8px}
.mobile-drawer nav{display:flex;flex-direction:column;gap:2px}
.mobile-drawer nav a{display:block;padding:11px 14px;font-family:var(--head);font-weight:500;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);text-decoration:none;border-radius:var(--radius)}
.mobile-drawer nav a:hover{color:var(--gold-text)}
.mobile-drawer nav a.active{color:var(--gold-text);border-left:3px solid var(--gold);border-radius:0}
@media (max-width:980px){.site-nav{display:none}.hamburger{display:flex}}

/* ── hero band (tool pages) ───────────────────────────────────────────────── */
.hero-band{width:100%;background:radial-gradient(1200px 400px at 20% 0%,rgba(201,162,39,.10),transparent 60%),var(--bg);border-bottom:0;padding:0}
.hero-band .hero-inner{max-width:var(--maxw);margin:0 auto;padding:48px 24px 36px}
.hero-band .hero-title{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1;color:var(--white);font-size:clamp(2.4rem,6vw,4.4rem);margin:0 0 10px}
.hero-band .hero-title .t1,.hero-band .hero-title .t2{display:block;font-weight:700;color:var(--white);letter-spacing:.005em}
.hero-band .hero-title .t1{font-size:.5em;font-weight:500;color:var(--cream-72);letter-spacing:.06em;margin-bottom:4px}
.hero-band .hero-title em,.hero-band .hero-title .t2 em{font-style:normal;color:var(--gold-text)}
.hero-band .hero-h1,.hero-band .hero-sub{font-family:var(--body);font-size:1rem;color:var(--cream-72);line-height:1.6;max-width:720px;margin-top:8px}
.hero-band .hero-text{text-align:left}
.hero-band .hero-title-group{align-items:flex-start}

/* ── article block + skip link ────────────────────────────────────────────── */
.article-wrap{max-width:900px;width:100%;margin:0 auto;padding:32px 24px 0}
.article{min-width:0;overflow-wrap:anywhere;background:var(--bg-alt);border:1px solid #2a2a2a;border-top:3px solid var(--gold);border-radius:var(--radius);padding:28px 28px 24px}
.article-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.article-head h2{min-width:0;flex:1 1 320px;overflow-wrap:anywhere}
.article h2{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700;letter-spacing:.01em;line-height:1.15;margin:0}
.article h3{font-family:var(--head);font-weight:500;font-size:1.05rem;letter-spacing:.04em;color:var(--gold-text);margin:22px 0 10px}
.article p{font-size:.95rem;color:var(--cream-72);line-height:1.8;margin:0 0 14px}
.article p strong{color:var(--cream)}
.article p a{color:var(--gold-text);text-decoration:none}.article p a:hover{text-decoration:underline}
.article .related{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #2a2a2a}
.article .related a{font-family:var(--head);font-weight:500;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);text-decoration:none;background:transparent;border:1px solid var(--gold);border-radius:var(--radius);padding:9px 14px}
.article .related a:hover{color:var(--gold-text);background:rgba(201,162,39,.1)}
.article .note{font-size:.78rem;color:var(--cream-50);line-height:1.6;margin:16px 0 0;padding-top:12px;border-top:1px solid #2a2a2a}
.skip-link{flex:none;font-family:var(--head);font-weight:500;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-72);background:transparent;border:1px solid #2a2a2a;border-radius:var(--radius);padding:6px 10px;text-decoration:none;white-space:nowrap;transition:color .12s,border-color .12s}
.skip-link:hover{color:var(--gold-text);border-color:var(--gold)}

/* ── "About this tool" box ────────────────────────────────────────────────── */
.about-box{margin-bottom:20px;border:1px solid #2a2a2a;border-left:3px solid var(--gold);border-radius:var(--radius);background:var(--bg-alt);overflow:hidden}
.about-box summary{cursor:pointer;padding:14px 18px;font-family:var(--head);font-size:.9rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);list-style:none;display:flex;justify-content:space-between;align-items:center;user-select:none}
.about-box summary::-webkit-details-marker{display:none}
.about-box summary span{font-family:var(--body);font-size:.72rem;font-weight:500;color:var(--cream-50);letter-spacing:0;text-transform:none}
.about-box .about-body{padding:0 18px 18px;border-top:1px solid #2a2a2a}
.about-box .about-body p{font-size:.9rem;color:var(--cream-72);line-height:1.7;margin:12px 0 0}
.about-box .about-body p strong{color:var(--cream)}

/* ── misc shared bits ─────────────────────────────────────────────────────── */
.ad-slot{min-height:0}
main{width:100%}

/* ── footer ───────────────────────────────────────────────────────────────── */
.site-footer{border-top:3px solid var(--gold);padding:44px 0 36px;background:var(--bg);margin:48px 0 0;font-size:1rem;color:var(--cream);text-align:left;width:100%}
.site-footer .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;max-width:var(--maxw)}
@media (max-width:700px){.site-footer .wrap{grid-template-columns:1fr}}
.site-footer .links{display:flex;gap:4px 18px;flex-wrap:wrap;margin-top:14px}
.site-footer .links a{font-family:var(--head);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.site-footer .links a:hover{color:var(--gold-text)}
.site-footer .links.legal a{color:var(--cream-50)}
.site-footer small{display:block;color:var(--cream-50);font-size:.8rem;max-width:720px;margin-top:16px;line-height:1.55}
.site-footer .meta{white-space:nowrap}