:root{
    --bg:#0f1115; --bg-soft:#161a21; --card:#1a1f28; --line:#262d38;
    --text:#e8ebf0; --muted:#a2acbd; --accent:#c8a86b; --accent-2:#7aa2ff;
    --radius:16px; --maxw:1080px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  @media (prefers-color-scheme: light){
    :root{ --bg:#faf9f7; --bg-soft:#ffffff; --card:#ffffff; --line:#e7e3db;
           --text:#1b1e24; --muted:#5c6472; --accent:#a4823f; --accent-2:#3b63c4; }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
       line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .muted{color:var(--muted)}
  .accent{color:var(--accent)}

  /* nav */
  header.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--bg) 82%, transparent);border-bottom:1px solid var(--line)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{font-weight:700;letter-spacing:.02em}
  .navlinks{display:flex;gap:26px;font-size:.95rem}
  .navlinks a{color:var(--muted);transition:color .15s}
  .navlinks a:hover{color:var(--text)}
  @media(max-width:640px){.navlinks{display:none}}

  /* hero */
  .hero{padding:96px 0 64px}
  .eyebrow{color:var(--accent);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
  .hero h1{font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;margin:.35em 0 .3em;letter-spacing:-.02em}
  .hero p.lead{font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--muted);max-width:56ch;margin:0 0 28px}
  .btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:600;font-size:.95rem;
    border:1px solid var(--line);transition:transform .12s, background .15s}
  .btn:hover{transform:translateY(-1px)}
  .btn.primary{background:var(--accent);color:#1b1207;border-color:transparent}
  .btn.ghost{background:transparent;color:var(--text)}

  section{padding:64px 0;border-top:1px solid var(--line)}
  section h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:0 0 8px;letter-spacing:-.01em}
  section .sub{color:var(--muted);margin:0 0 32px;max-width:60ch}

  /* cards grid */
  .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;transition:transform .14s, border-color .15s}
  .card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%, var(--line))}
  .card h3{margin:0 0 6px;font-size:1.15rem}
  .card p{margin:0 0 14px;color:var(--muted);font-size:.95rem}
  .card .go{color:var(--accent);font-weight:600;font-size:.9rem}
  .tag{display:inline-block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-bottom:12px}

  /* music */
  .embeds{display:grid;gap:16px;grid-template-columns:1fr 1fr;align-items:start}
  @media(max-width:640px){.embeds{grid-template-columns:1fr}}
  .embeds iframe{display:block;width:100%;height:352px;border:0;border-radius:12px}
  .music-list{display:grid;gap:14px}
  .track{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
    border-radius:14px;padding:16px 18px}
  .track .n{width:34px;height:34px;flex:none;border-radius:9px;background:color-mix(in srgb,var(--accent) 22%, var(--card));
    display:grid;place-items:center;color:var(--accent);font-weight:700}
  .track .meta{flex:1}
  .track .meta b{display:block}
  .track .meta span{color:var(--muted);font-size:.9rem}

  /* writing */
  .posts{display:grid;gap:16px}
  .post{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--card)}
  .post .date{color:var(--muted);font-size:.82rem;letter-spacing:.04em}
  .post h3{margin:6px 0 6px;font-size:1.15rem}
  .post p{margin:0;color:var(--muted);font-size:.95rem}
  .post a.post-link{color:inherit;text-decoration:none;display:block}
  .post a.post-link:hover h3{color:var(--accent)}

  /* long-form post pages */
  .prose{max-width:68ch}
  .prose p{margin:0 0 1.3em;color:var(--text);font-size:1.05rem}
  .prose .kicker{color:var(--muted);font-size:.9rem;margin:0 0 6px}

  /* contact */
  .contact-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
  .contact-form{max-width:480px;margin-top:28px;display:grid;gap:16px}
  .contact-form label{display:grid;gap:6px;font-size:.9rem;color:var(--muted)}
  .contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{
    font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);
    border-radius:10px;padding:10px 12px;resize:vertical}
  .contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent-2);outline-offset:1px}
  .contact-form button{justify-self:start;cursor:pointer;font:inherit}
  .contact-form .form-status{margin:0;font-weight:600;min-height:1.2em}
  .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  footer{padding:40px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

  .ph{outline:1px dashed color-mix(in srgb,var(--accent) 60%, transparent);outline-offset:3px;border-radius:4px}