/* Any Job Can Be a Climate Job - v2.2 mobile-first styles */
*{box-sizing:border-box}
:root{--bg:#fff8d6; --yellow:#ffe060; --ink:#111; --paper:#fffdf0; --muted:#333; --radius:16px}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
     background:var(--bg); color:var(--ink); line-height:1.65}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.container{width:92%; max-width:1120px; margin:0 auto}

/* Hero */
.header{background:radial-gradient(1200px 600px at 50% 15%, #ffe87a 0%, var(--yellow) 60%, #ffd13a 100%);
        border-bottom:4px solid var(--ink)}
.hero{padding:36px 0 24px; text-align:center}
.hero .logo{width:200px; margin:0 auto 14px; filter:drop-shadow(0 4px 0 rgba(0,0,0,.2))}
.tag{font-weight:800; font-size:clamp(1.25rem, 4vw, 2rem); letter-spacing:-.01em}
.tag .pill{display:inline-block; background:var(--ink); color:var(--bg); padding:.15em .45em; border-radius:.55rem}

/* Buttons */
.cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0 0}
.btn{display:inline-flex; align-items:center; gap:8px; line-height:1; background:var(--ink); color:var(--bg);
     border:2px solid var(--ink); padding:10px 16px; text-decoration:none; border-radius:999px; font-weight:800}
.btn.alt{background:transparent; color:var(--ink)}
.btn svg{width:20px; height:20px; fill:currentColor; display:block}

/* Sections */
section{padding:28px 0}
h1,h2{margin:0 0 8px; font-weight:900; letter-spacing:-.02em}
h2{text-transform:uppercase; font-size:clamp(1.1rem, 3.5vw, 1.6rem)}
.lead{opacity:.9}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin-top:12px}
.card{border:2px solid var(--ink); border-radius:var(--radius); padding:14px; background:var(--paper); text-decoration:none; color:inherit}
.card:hover{transform:translateY(-2px)}
.card svg{fill:currentColor}

/* About page layout */
.prose{background:#fff; border:2px solid var(--ink); border-radius:var(--radius); padding:18px; margin-bottom:32px}
.pfp{width:160px; border-radius:20px; border:2px solid var(--ink); margin:0 16px 10px 0; float:left}
.clearfix::after{content:""; display:block; clear:both}
@media(max-width:640px){ .pfp{float:none; margin:0 auto 12px; display:block} }

/* Footer */
.footer{padding:36px 0 56px; border-top:2px solid var(--ink)}
.footer a{font-weight:800}

/* v2.3 Listen & Read revert (simpler cards) */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:12px}
.card{display:block; padding:16px; border:2px solid var(--ink); border-radius:16px; background:#fffdf0; text-decoration:none; color:inherit; transition:transform .08s ease}
.card:hover{transform:translateY(-2px)}
.card strong{font-size:1.05rem}
.card span{opacity:.85; display:block; margin-top:4px}
.card svg{width:22px; height:22px; vertical-align:middle; margin-right:8px}

/* Minimal hamburger menu */
.menu-btn{position:fixed; top:12px; right:12px; z-index:20; background:var(--ink); color:var(--bg);
  border:2px solid var(--ink); border-radius:12px; padding:10px 12px; display:inline-flex; align-items:center; gap:8px}
.menu-btn span{display:block; width:18px; height:2px; background:currentColor; box-shadow:0 6px 0 currentColor, 0 -6px 0 currentColor}
.menu-panel{position:fixed; top:12px; right:12px; z-index:19; background:#fff; border:2px solid var(--ink); border-radius:14px; padding:10px; display:none; min-width:160px}
.menu-panel a{display:block; padding:8px 10px; text-decoration:none; color:inherit; font-weight:800; border-radius:8px}
.menu-panel a:hover{background:#fffdf0}
.menu-open .menu-panel{display:block}

/* v2.4 footer socials */
.footer .socials{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 0}
.footer .icon{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:2px solid var(--ink); border-radius:999px; background:#fffdf0; text-decoration:none}
.footer .icon svg{width:20px; height:20px; fill:currentColor}
.footer .row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* v2.6: Bluesky PNG size + footer note spacing */
.footer .icon img{width:20px; height:20px; display:block}
.footer .row p{margin:0}

/* v2.8: small podlink under CTAs */
.small-link { margin-top:8px; font-size:.95rem; display:block; text-align:center; opacity:.9; }
.small-link a { text-decoration:underline; font-weight:800; }
.small-link a:hover { opacity:1; }

/* v2.10: About page links */
.page-about .about-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.page-about .about-links a{display:inline-block; padding:8px 12px; border:2px solid var(--ink); border-radius:12px; background:#fffdf0; text-decoration:none; font-weight:800}
.page-about .about-links a:hover{transform:translateY(-1px)}