/* Bitcoin For The Hood — mission site
   Color tokens and type match bfthrecords.com so the two sites feel like one family. */
@font-face{
  font-family:'Anton';
  src:url('../assets/fonts/anton-regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../assets/fonts/space-grotesk.woff') format('woff');
  font-weight:100 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --gold:#D4A537;
  --gold-2:#E6BE5A;
  --btc:#F7931A;
  --bg:#0b0b0d;
  --bg-2:#131317;
  --card:#18181d;
  --line:#2a2a31;
  --text:#f3f1ec;
  --muted:#a7a49c;
  --radius:16px;
  --display:'Anton',Impact,'Arial Black',sans-serif;
  --body:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold)}
.wrap{width:min(1100px,100% - 40px);margin-inline:auto}
.accent{color:var(--gold)}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);color:#000;padding:8px 12px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--gold);min-width:0}
.brand .logo{height:42px;width:auto}
.tm{font-size:13px;font-weight:700;align-self:flex-start;margin-top:8px;letter-spacing:0}
.menu{display:flex;gap:24px;list-style:none;align-items:center}
.menu a{color:var(--text);text-decoration:none;font-weight:500;font-size:15px}
.menu a:hover{color:var(--gold)}
.menu .nav-cta{border:1.5px solid var(--gold);color:var(--gold);padding:7px 14px;border-radius:999px}
.menu .nav-cta:hover{background:var(--gold);color:#111}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;text-decoration:none;border-radius:999px;padding:14px 26px;font-size:16px;transition:transform .15s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gold);color:#111}
.btn-primary:hover{background:var(--gold-2)}
.btn-ghost{border:1.5px solid var(--line);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-lg{padding:18px 36px;font-size:18px}

/* Hero */
.hero{position:relative;overflow:hidden;padding:96px 0 100px;background:var(--bg)}
.hero-media{position:absolute;inset:0;pointer-events:none}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(.8)}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,11,13,.82) 0%,rgba(11,11,13,.74) 42%,rgba(11,11,13,.9) 100%),
  linear-gradient(90deg,rgba(11,11,13,.55),rgba(11,11,13,.2) 60%,rgba(11,11,13,.45))}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-bg span{position:absolute;right:-6%;top:-12%;font-family:var(--display);font-size:clamp(380px,60vw,820px);line-height:1;color:rgba(212,165,55,.07);transform:rotate(14deg)}
.hero-inner{position:relative;z-index:2}
.hero-head,.tagline{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.kicker{font-weight:700;text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--gold);margin-bottom:22px}
.hero-logo{margin:0 0 28px}
.hero-logo img{width:min(640px,100%);height:auto}
.hero-head{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(40px,7vw,80px);line-height:.98;letter-spacing:.5px;max-width:min(14em,100%)}
.mission-lead{display:block;font-size:clamp(18px,2.6vw,28px);letter-spacing:2px;color:var(--gold);margin-bottom:12px;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.tagline{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:52ch;margin:22px 0 32px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* Sections */
.section{padding:90px 0}
.section-alt{background:var(--bg-2);border-block:1px solid var(--line)}
h2{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(38px,6vw,64px);line-height:1;letter-spacing:.5px;margin-bottom:18px}
.lead{font-size:clamp(18px,2vw,21px);max-width:60ch;color:#d9d6cf;margin-bottom:36px}

/* What we do */
.pillars{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pillars li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 28px;transition:transform .2s,border-color .2s}
.pillars li:hover{transform:translateY(-3px);border-color:rgba(212,165,55,.6)}
.pillars .icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(212,165,55,.14);color:var(--gold);font-size:22px;margin-bottom:16px}
.pillars h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(22px,2.4vw,28px);line-height:1.05;margin-bottom:10px}
.pillars p{color:var(--muted);font-size:16px}

/* Listen */
.listen{text-align:center}
.listen .lead{margin-inline:auto}
.listen-actions{display:flex;flex-direction:column;align-items:center;gap:18px}
.listen .btn-lg{min-width:min(420px,100%)}
.listen-note{color:var(--muted);font-size:15px}
.listen-note a{font-weight:700;text-decoration:none}
.listen-note a:hover{text-decoration:underline}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:44px 0;background:#08080a}
.foot{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-size:14px}
.foot-logo{width:min(260px,80%);height:auto;margin-bottom:6px}
.muted{color:var(--muted)}
.foot a{text-decoration:none;font-weight:700}
.foot a:hover{text-decoration:underline}

/* Learn Bitcoin */
.learn .lead{margin-bottom:48px}
.lesson{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-bottom:64px}
.lesson:last-child{margin-bottom:0}
.lesson-flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.lesson-flip figure{order:2}
.lesson-flip .lesson-copy{order:1}
.lesson-wide{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:36px}
.lesson figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lesson img{width:100%;height:auto;aspect-ratio:auto;vertical-align:middle}
.lesson figcaption{padding:10px 16px 12px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.lesson-copy h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(28px,4vw,44px);line-height:1;margin:0 0 16px}
.lesson-copy p{color:#d9d6cf;margin-bottom:14px}
.lesson-copy p:last-child{margin-bottom:0}
.lesson-copy .kicker{margin-bottom:10px}


/* Buy Bitcoin */
.buy-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px 48px;align-items:center;
  grid-template-areas:"intro shot" "rest shot"}
.buy-intro{grid-area:intro;align-self:end}
.buy-shot{grid-area:shot;align-self:center}
.buy-rest{grid-area:rest;align-self:start}
.buy-intro .lead{margin-bottom:0}
.buy-offer{color:var(--text);font-weight:500;max-width:46ch;margin:0 0 18px}
.buy-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 24px;font-size:15px;color:var(--muted);font-weight:500}
.buy-code span{display:inline-block;padding:7px 16px;border:1.5px solid var(--gold);border-radius:8px;color:var(--gold);font-weight:700;letter-spacing:1.5px;font-size:18px}
.buy-actions{margin:0 0 22px}
.buy-actions .btn-lg{min-width:min(360px,100%)}
.buy-note,.buy-tip{color:var(--muted);font-size:14px;max-width:50ch;margin:0 0 12px;line-height:1.55}
.buy-note{font-weight:500}
.buy-tip a{font-weight:700;text-decoration:none}
.buy-tip a:hover{text-decoration:underline}
.buy-shot{margin:0;background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.buy-shot img{width:100%;height:auto}
.buy-shot figcaption{padding:12px 16px 14px;font-size:14px;color:var(--muted);background:var(--card);border-top:1px solid var(--line)}

/* Bitcoin 101 */
.faq-section .lead{margin-bottom:36px}
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:clamp(17px,2vw,19px);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"+";color:var(--gold);font-size:26px;font-weight:500;line-height:1;flex-shrink:0}
.faq details[open] summary{color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--gold)}
.faq .faq-a{padding:0 22px 20px;color:#d9d6cf;max-width:70ch}
.faq .faq-a p{margin:0 0 12px}
.faq .faq-a p:last-child{margin-bottom:0}
.faq .faq-a a{font-weight:700;text-decoration:none}
.faq .faq-a a:hover{text-decoration:underline}

/* Donate */
.menu .nav-cta.nav-donate{background:var(--gold);color:#111;border-color:var(--gold)}
.menu .nav-cta.nav-donate:hover{background:var(--gold-2);color:#111}
.donate h2{max-width:14em}
.donate .lead{max-width:42ch}
.donate-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px;align-items:center;margin-top:40px}
.donate-qr{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:320px}
.donate-qr img{width:100%;height:auto;display:block;padding:8px;box-sizing:border-box;background:#fff}
.donate-qr figcaption{padding:10px 16px 12px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);background:var(--card);border-top:1px solid var(--line)}
.donate-actions{margin:0 0 20px}
.donate-actions .btn-lg{min-width:min(360px,100%)}
.donate-addr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 24px}
.donate-addr code{display:inline-block;padding:10px 14px;border:1.5px solid var(--gold);border-radius:8px;color:var(--gold);font-weight:700;font-size:clamp(13px,1.6vw,16px);word-break:break-all;font-family:var(--body)}
.donate-addr .btn{padding:10px 18px;width:auto}
.donate-presets-label{color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px}
.donate-presets{display:flex;flex-wrap:wrap;gap:10px}
.donate-presets .btn{padding:10px 18px;width:auto}
.donate-status{margin:14px 0 0;font-size:14px;color:var(--muted)}
.donate-status.is-error{color:#e8c48a}

/* Mobile nav */
.menu-toggle,.menu-btn{display:none}

@media (max-width:900px){
  .lesson,.lesson-flip,.lesson-wide{grid-template-columns:1fr;gap:22px}
  .buy-grid{grid-template-columns:1fr;gap:22px;grid-template-areas:"intro" "shot" "rest"}
  .lesson-flip figure,.lesson-flip .lesson-copy{order:unset}
  .donate-grid{grid-template-columns:1fr;gap:22px}
  .donate-qr{max-width:280px}
}
@media (max-width:800px){
  .pillars{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu-btn{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:10px}
  .menu-btn span{width:24px;height:2px;background:var(--text);display:block}
  .menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:10px 20px 20px}
  .menu li{width:100%}
  .menu a{display:block;padding:12px 0}
  .menu .nav-cta{display:inline-block;margin-top:8px;padding:8px 16px}
  .menu .nav-donate{margin-top:8px}
  .menu-toggle:checked ~ .menu{display:flex}
  .nav{position:relative}
}
@media (max-width:620px){
  body{font-size:16px}
  .section{padding:64px 0}
  .hero{padding:56px 0 72px}
  .brand .logo{height:32px}
  .nav{height:60px}
  .menu{top:60px}
  .btn{width:100%}
  .cta-row{flex-direction:column}
  .listen .btn-lg,.buy-actions .btn-lg,.donate-actions .btn-lg{min-width:0;width:100%}
  .donate-addr .btn,.donate-presets .btn{width:auto}
  .learn .lead{margin-bottom:32px}
  .lesson{margin-bottom:48px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}