:root {
    --bg:#08090b; --bg2:#0d0f12; --panel:#0f1216; --text:#eceef1;
    --muted:#9298a1; --faint:#565c64; --accent:#d4ff4f; --accent-dim:#9bc23a;
    --line:rgba(255,255,255,0.09); --line2:rgba(255,255,255,0.05);
    --serif:'Fraunces',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
    --sans:'Hanken Grotesk',system-ui,sans-serif;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:var(--sans);
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a { color:inherit; text-decoration:none; }

  nav { position:fixed; top:0; left:0; right:0; z-index:5; display:flex;
    justify-content:space-between; align-items:center;
    padding:26px clamp(20px,5vw,64px); mix-blend-mode:difference; }
  .brand { font-family:var(--mono); font-size:13px; letter-spacing:0.16em;
    text-transform:uppercase; font-weight:500; }
  .brand b { color:var(--accent); }
  .back { font-family:var(--mono); font-size:12px; letter-spacing:0.08em;
    color:var(--muted); transition:color .3s; }
  .back:hover { color:var(--accent); }

  .wrap { max-width:1080px; margin:0 auto; padding:180px clamp(20px,5vw,64px) 120px; }
  .sec-eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--accent-dim); margin-bottom:28px; }
  .sec-h { font-family:var(--serif); font-weight:300;
    font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.02; letter-spacing:-0.02em;
    max-width:16ch; }
  .sec-h em { font-style:italic; }
  .lead { color:var(--muted); max-width:52ch; margin-top:22px; }

  .posts { margin-top:56px; border-top:1px solid var(--line); }
  .post { display:grid; grid-template-columns:auto 1fr auto; gap:28px;
    align-items:baseline; padding:30px 6px; border-bottom:1px solid var(--line);
    transition:padding-left .3s, background .3s; }
  .post:hover { padding-left:22px;
    background:linear-gradient(90deg, rgba(212,255,79,0.04), transparent 60%); }
  .post .pno { font-family:var(--mono); font-size:12px; color:var(--faint); }
  .post .pt { font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.9rem);
    font-weight:400; letter-spacing:-0.01em; }
  .post .pd { color:var(--muted); font-size:0.95rem; margin-top:6px; max-width:52ch; }
  .post .pmeta { font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--faint); margin-top:12px; }
  .post .arw { font-family:var(--mono); color:var(--faint); transition:color .3s, transform .3s; }
  .post:hover .arw { color:var(--accent); transform:translate(3px,-3px); }

  footer { border-top:1px solid var(--line2); padding:40px clamp(20px,5vw,64px);
    font-family:var(--mono); font-size:12px; color:var(--faint);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  footer a { color:var(--muted); }
  footer a:hover { color:var(--accent); }