:root {
  --bg:#070910; --panel:#10141f; --line:#2b3143; --text:#f5f2f6; --muted:#aaa9bc;
  --pink:#ef8cbd; --pink-soft:#f6b3d3; --mint:#9fcdb8;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:radial-gradient(circle at 75% 8%,rgba(94,79,154,.14),transparent 28rem),var(--bg);font-family:Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}.page-shell{max-width:1480px;margin:auto}
.site-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding:1.1rem clamp(1.2rem,4vw,4rem);background:rgba(7,9,16,.82);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:.7rem;font:600 .95rem "DM Mono",monospace;letter-spacing:.28em;color:var(--pink-soft)}.brand-frog{letter-spacing:0}
.nav{display:flex;gap:2rem}.nav a{color:#b8b7ca;font-size:.9rem}.nav a:hover,.nav .active{color:var(--pink-soft)}
.header-links{justify-self:end;display:flex;gap:.6rem}
.github-icon{font:500 .85rem "DM Mono",monospace;border:1px solid var(--line);padding:.55rem .7rem;border-radius:.45rem}
.hero{display:grid;grid-template-columns:.92fr 1.28fr;min-height:640px;border-bottom:1px solid rgba(255,255,255,.06)}
.hero-copy{padding:clamp(3rem,6vw,6rem) clamp(1.4rem,4vw,4rem);display:flex;flex-direction:column;justify-content:center}
.eyebrow{margin:0 0 1rem;font:500 .75rem "DM Mono",monospace;letter-spacing:.4em;color:#8f90a7}
h1{margin:0 0 1.3rem;font-size:clamp(3.8rem,7vw,6.5rem);line-height:.92;letter-spacing:-.055em;color:var(--pink-soft)}
.intro{max-width:34rem;margin:0;color:#d8d5df;font-size:clamp(1.08rem,1.5vw,1.4rem);line-height:1.6}.intro strong{color:var(--pink)}
.tagline{margin:1.5rem 0 0;font:400 1.05rem "DM Mono",monospace;color:#b8b7ca}
.meta{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;margin:2.1rem 0 2.4rem;color:#b8b7ca;font-size:.92rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.1rem;padding:.85rem 1.45rem;border:1px solid var(--line);border-radius:.65rem;font-weight:600;transition:.18s}
.btn:hover{transform:translateY(-2px)}.btn-primary{color:#17121a;background:linear-gradient(135deg,#ed84b8,#f3a5cc);border-color:transparent}.btn-secondary{background:rgba(255,255,255,.025)}
.hero-art-wrap{overflow:hidden;background:#11141f}.hero-art{width:100%;height:100%;object-fit:cover;object-position:68% 50%;display:block;filter:saturate(.92) contrast(1.03)}
.quote-strip{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:2.2rem clamp(1.4rem,4vw,4rem);border-bottom:1px solid rgba(255,255,255,.06)}
.quote{text-align:right;font:italic 600 clamp(1.7rem,3vw,2.6rem) "Cormorant Garamond",serif;color:var(--pink-soft)}.quote-copy{max-width:31rem;color:#b8b7ca;line-height:1.6}
.section{padding:clamp(4rem,7vw,7rem) clamp(1.4rem,4vw,4rem);border-bottom:1px solid rgba(255,255,255,.06)}
.section-heading{margin-bottom:2rem}h2{margin:0;font-size:clamp(2rem,3vw,3.2rem);letter-spacing:-.035em}.section-subtitle{max-width:46rem;color:var(--muted);line-height:1.65}
.chips,.card-tags{display:flex;flex-wrap:wrap;gap:.7rem}.chips span,.card-tags span{border:1px solid #30364b;background:#0d111b;border-radius:.55rem;padding:.62rem .9rem;color:#d7d5df;font:400 .85rem "DM Mono",monospace}.chips span:nth-child(3n+1){color:var(--pink-soft)}.chips span:nth-child(5n+2){color:var(--mint)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.card{min-height:260px;padding:1.6rem;border:1px solid #2c3245;border-radius:1rem;background:radial-gradient(circle at top right,rgba(236,132,184,.08),transparent 12rem),rgba(16,20,31,.8)}.card-icon{margin-bottom:1.2rem;font:500 1.6rem "DM Mono",monospace;color:var(--pink)}.card h3{margin:0 0 .7rem}.card p{color:var(--muted);line-height:1.65}.card-tags{margin-top:1.1rem}.card-tags span{padding:.38rem .55rem;font-size:.72rem}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}.notebook{justify-self:center;width:min(100%,330px);padding:2rem;color:#3b3440;background:#f5ead8;border-radius:.4rem 1.1rem .5rem .5rem;box-shadow:12px 18px 50px rgba(0,0,0,.28);transform:rotate(-2deg);font:500 1.05rem/1.7 "DM Mono",monospace}.notebook p{margin:0}.notebook span{color:#bd658e;font-size:1.5rem}
.contact{text-align:center;background:radial-gradient(circle at 50% 30%,rgba(231,126,178,.08),transparent 27rem)}.contact p:not(.eyebrow){max-width:44rem;margin:1rem auto 1.8rem;color:var(--muted);line-height:1.65}.contact .btn-secondary{margin-top:1.2rem}
.contact-form{max-width:34rem;margin:0 auto 1.4rem;display:flex;flex-direction:column;gap:1rem;text-align:left;color-scheme:dark}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-form input,.contact-form textarea{width:100%;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:.65rem;background:var(--panel);color:var(--text);font:400 .95rem Inter,system-ui,sans-serif;resize:vertical;appearance:none}
.contact-form textarea{min-height:8rem}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#75748c}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--pink)}
.contact-form button{width:100%;border:none;cursor:pointer;margin-top:.2rem}
@media(max-width:650px){.contact-form .form-row{grid-template-columns:1fr}}
footer{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;padding:1.5rem clamp(1.4rem,4vw,4rem);color:#8d8da0;font-size:.8rem}.footer-quote{justify-self:end;color:var(--pink-soft);font:italic 1.05rem "Cormorant Garamond",serif}
@media(max-width:980px){.site-header{grid-template-columns:1fr auto}.nav{display:none}.hero{grid-template-columns:1fr}.hero-art-wrap{order:-1;min-height:56vw;max-height:560px}.cards{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.notebook{justify-self:start}}
@media(max-width:650px){.hero-copy{padding:3.4rem 1.2rem 4rem}.hero-art-wrap{min-height:86vw}.quote-strip{grid-template-columns:1fr}.quote{text-align:left}.section{padding:4rem 1.2rem}.meta{display:grid;gap:.8rem}footer{grid-template-columns:1fr}.footer-quote{justify-self:start}}