:root{
  --ink:#16201A; --forest:#2C5C3A; --moss:#5E8C61; --sage:#EAF0E7;
  --sage-2:#F3F7F1; --line:#D7DED3; --muted:#5F6760; --paper:#FFFFFF;
  --maxw:1120px;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Sora',system-ui,sans-serif;
  --mono:'Space Mono','SFMono-Regular',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--moss)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.brand span{color:var(--forest)}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-size:.92rem;color:var(--muted);transition:color .15s}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:.9rem;
     padding:9px 18px;border-radius:999px;border:1.5px solid var(--forest);color:var(--forest);
     transition:background .18s,color .18s,transform .18s;cursor:pointer}
.btn:hover{background:var(--forest);color:#fff}
.btn.solid{background:var(--forest);color:#fff}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- Hero (home) ---------- */
.hero{padding:84px 0 72px;border-bottom:1px solid var(--line);
      background:radial-gradient(1100px 460px at 88% -8%, var(--sage) 0%, rgba(234,240,231,0) 60%)}
.hero .wrap{display:grid;grid-template-columns:1.55fr .9fr;gap:48px;align-items:center}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;margin:14px 0 6px}
.hero .role{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--forest)}
.hero .lead{font-weight:300;font-size:clamp(1.02rem,1.5vw,1.18rem);color:#2c352e;max-width:34ch;margin:22px 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.portrait{justify-self:center;width:min(280px,72vw);aspect-ratio:1;border-radius:50%;
          border:8px solid var(--forest);background:var(--sage);overflow:hidden;
          box-shadow:0 18px 50px -22px rgba(44,92,58,.55)}
.portrait img{width:100%;height:100%;object-fit:cover}

/* ---------- Section frame ---------- */
section{padding:78px 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;
          border-bottom:1px solid var(--line);padding-bottom:14px}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:-.01em}
.sec-head .idx{font-family:var(--mono);font-size:.72rem;color:var(--moss);letter-spacing:.1em}

/* ---------- About ---------- */
.about{background:var(--sage-2)}
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.about p.profile{font-size:1.12rem;font-weight:300;color:#28322b;max-width:46ch}
.meta-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--forest);margin:0 0 10px}
.toolgroup{margin-bottom:16px}
.toolgroup h4{font-family:var(--display);font-weight:600;font-size:.82rem;margin-bottom:7px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-family:var(--mono);font-size:.72rem;background:#fff;border:1px solid var(--moss);
     color:var(--forest);border-radius:6px;padding:4px 10px;line-height:1.3}
.langs{margin-top:22px;font-size:.96rem}
.langs b{font-family:var(--display);font-weight:600}

/* ---------- Project grid (home) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
      display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(22,32,26,.4);border-color:var(--moss)}
.thumb{aspect-ratio:1/1;overflow:hidden;background:var(--sage-2);border-bottom:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.04)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card-cat{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.card h3{font-family:var(--display);font-weight:600;font-size:1.22rem;margin:7px 0 9px}
.card p{font-weight:300;font-size:.96rem;color:#3a443d;margin-bottom:14px}
.card .tags{margin-bottom:16px}
.card .tags .tag{font-size:.66rem;padding:3px 8px}
.card-link{margin-top:auto;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--forest)}
.card:hover .card-link{color:var(--ink)}
.more-note{margin-top:30px;font-size:.95rem;color:var(--muted);font-weight:300}

/* ---------- Project detail ---------- */
.proj-hero{padding:64px 0 26px;background:radial-gradient(900px 360px at 90% -20%, var(--sage) 0%, rgba(234,240,231,0) 60%)}
.backlink{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--moss)}
.backlink:hover{color:var(--forest)}
.proj-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.1rem);line-height:1.04;letter-spacing:-.015em;margin:10px 0 0}
.proj-body{padding:34px 0 78px}
.proj-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:42px;align-items:start;margin-bottom:10px}
.proj-figure{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--sage-2)}
.proj-figure img{width:100%;height:auto;display:block}
.proj-side{position:sticky;top:84px}
.meta-block{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.meta-block:last-child{border-bottom:0}
.meta-block p:not(.meta-label){font-size:.98rem;color:#2c352e}
.detail-section{max-width:760px;margin:30px 0}
.detail-section h2{font-family:var(--display);font-weight:600;font-size:1.28rem;margin-bottom:12px;
                   padding-bottom:10px;border-bottom:1px solid var(--line)}
.detail-section p{font-weight:300;font-size:1.04rem;color:#2c352e}
.placeholder-box{border:1.5px dashed var(--moss);border-radius:12px;background:var(--sage-2);
                 color:var(--moss);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
                 text-transform:uppercase;display:flex;align-items:center;justify-content:center;
                 min-height:120px;text-align:center;padding:18px}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aspect-video{aspect-ratio:16/9}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* ---------- Contact ---------- */
.contact{background:var(--forest);color:#eef3ec}
.contact .wrap{text-align:center}
.contact .eyebrow{color:#a8c9ae}
.contact h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);margin:14px 0 10px;color:#fff}
.contact p{font-weight:300;color:#cfe0cf;max-width:46ch;margin:0 auto 28px}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn.light{border-color:#cfe0cf;color:#fff}
.btn.light:hover{background:#fff;color:var(--forest)}
.btn.fill{background:#fff;color:var(--forest);border-color:#fff}
.btn.fill:hover{background:var(--sage);border-color:var(--sage)}
.cdetails{margin-top:30px;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:#bcd4be;
          display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap}
.cdetails a:hover{color:#fff}
.foot{border-top:1px solid rgba(255,255,255,.16);margin-top:46px;padding-top:20px;
      font-family:var(--mono);font-size:.7rem;color:#a8c0aa}

/* ---------- Reveal animation (only when body.js-anim is set) ---------- */
.reveal{transition:opacity .6s ease,transform .6s ease}
.js-anim .reveal{opacity:0;transform:translateY(18px)}
.js-anim .reveal.in{opacity:1;transform:none}

/* ---------- Focus + reduced motion ---------- */
a:focus-visible,.btn:focus-visible,.card:focus-visible{outline:3px solid var(--moss);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .js-anim .reveal{opacity:1;transform:none}
  .reveal{transition:none}
  .card:hover{transform:none}
  .card:hover .thumb img{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .portrait{grid-row:1;width:min(190px,52vw)}
  .hero{padding:54px 0 52px}
  .about-grid{grid-template-columns:1fr;gap:30px}
  .grid{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr;gap:24px}
  .proj-side{position:static}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .navlinks a:not(.btn){display:none}
  section{padding:58px 0}
}