:root{
  --bg:#f3f2ef; --fg:#111110; --muted:#6b6a65; --line:#d9d7d1;
  --accent:#ef3d1a; --tile:#e9e7e2; --card:#eceae5;
  --maxw:1360px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0c0b; --fg:#f1efe9; --muted:#8f8d85; --line:#242320;
         --accent:#ff4a24; --tile:#141311; --card:#131210; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5; overflow-x:hidden;
}
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px)}

/* nav */
nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
    background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw); margin:0 auto; height:66px; padding:0 clamp(20px,5vw,64px);
        display:flex; align-items:center; justify-content:space-between}
.mono{font-weight:800; letter-spacing:-.04em; font-size:18px}
.mono span{color:var(--accent)}
.nav-links{display:flex; gap:28px; font-size:13px; letter-spacing:.02em; text-transform:uppercase}
.nav-links a{color:var(--muted); transition:color .25s}
.nav-links a:hover{color:var(--fg)}
@media (max-width:560px){ .nav-links a:not(.hl){display:none} }

/* hero (home) */
header.hero{min-height:calc(100dvh - 66px); display:flex; flex-direction:column; justify-content:center;
            padding:56px 0 40px; position:relative}
.kick{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:28px}
h1{margin:0; font-weight:800; letter-spacing:-.045em; line-height:1.02;
   font-size:clamp(58px,14vw,208px); text-transform:uppercase}
h1 .dot{color:var(--accent)}
.lead{margin:34px 0 0; max-width:30ch; font-size:clamp(19px,2.4vw,30px); font-weight:500;
      letter-spacing:-.01em; line-height:1.28}
.hero-cta{margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; font-size:14px;
     letter-spacing:.02em; border:1px solid var(--fg); border-radius:999px; transition:transform .2s, background .25s, color .25s}
.btn.solid{background:var(--fg); color:var(--bg)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost:hover{background:var(--fg); color:var(--bg)}

/* marquee */
.marq{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0}
.marq-track{display:flex; gap:56px; white-space:nowrap; width:max-content; animation:slide 34s linear infinite}
.marq span{font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.marq span b{color:var(--fg); font-weight:600}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marq-track{animation:none} }

section{padding:clamp(72px,12vw,150px) 0}
.sec-label{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:42px}

/* projects list (home) */
.proj{display:block; padding:clamp(32px,5vw,56px) 0; border-top:1px solid var(--line); position:relative;
      transition:padding-left .35s cubic-bezier(.16,1,.3,1)}
.proj:last-child{border-bottom:1px solid var(--line)}
.proj-head{display:grid; grid-template-columns:88px 1fr auto; gap:clamp(18px,4vw,60px); align-items:baseline}
.pnum{font-size:15px; font-weight:700; color:var(--muted); padding-top:10px; transition:color .3s}
.arrow{align-self:center; font-size:26px; color:var(--muted); transition:transform .35s cubic-bezier(.16,1,.3,1), color .3s; opacity:0}
a.proj:hover{padding-left:14px}
a.proj:hover .pnum{color:var(--accent)}
a.proj:hover .arrow{opacity:1; transform:translateX(6px); color:var(--accent)}
a.proj:hover .ptitle{color:var(--accent)}
.ptitle{margin:0; font-weight:800; letter-spacing:-.03em; line-height:.98;
        font-size:clamp(34px,6vw,78px); transition:color .3s}
.pmeta{display:grid; grid-template-columns:1fr; gap:22px; margin:22px 0 0 clamp(0px,calc(88px + 4vw),148px)}
@media (min-width:900px){ .pmeta{grid-template-columns:1.3fr 1fr; align-items:start; gap:48px} }
.pdesc{font-size:clamp(16px,1.7vw,19px); color:var(--fg); max-width:52ch; line-height:1.5}
.pdesc .em{color:var(--accent); font-weight:600}
.ptags{display:flex; flex-wrap:wrap; gap:8px; align-content:start}
.tag{font-size:12.5px; letter-spacing:.02em; color:var(--muted); border:1px solid var(--line);
     padding:6px 12px; border-radius:999px}

/* about */
.about{display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,40px); align-items:start}
@media (min-width:820px){
  .about{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(56px,9vw,130px)}
}
.about h2{font-weight:800; letter-spacing:-.03em; line-height:.94; margin:0;
          font-size:clamp(38px,7.5vw,100px)}
.about-body{max-width:46ch}
.about-body p{font-size:clamp(17px,1.9vw,21px); color:var(--fg); line-height:1.5; margin:0 0 18px}
.about-body p:last-child{margin-bottom:0}
.about-body .muted{color:var(--muted)}

/* footer */
footer{border-top:1px solid var(--line); padding:clamp(64px,10vw,120px) 0 60px}
.foot-h{font-weight:800; letter-spacing:-.03em; line-height:.95;
        font-size:clamp(40px,9vw,120px); margin:0 0 40px}
.foot-links{display:flex; flex-wrap:wrap; gap:14px 44px; font-size:clamp(16px,2vw,20px)}
.foot-links a{display:inline-flex; align-items:center; gap:10px; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .25s,color .25s}
.foot-links a:hover{border-color:var(--accent); color:var(--accent)}
.foot-bottom{margin-top:64px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
             font-size:12.5px; color:var(--muted); letter-spacing:.02em}

/* ===== detail pages ===== */
.backlink{display:inline-flex; align-items:center; gap:10px; margin:44px 0 0; font-size:14px;
          letter-spacing:.02em; color:var(--muted); transition:gap .25s,color .25s}
.backlink:hover{gap:16px; color:var(--fg)}
.dhero{padding:36px 0 8px}
.detail h1{font-size:clamp(44px,9.5vw,132px); line-height:1.0}
.dlead{margin:28px 0 0; max-width:34ch; font-size:clamp(20px,2.6vw,34px); font-weight:500;
       letter-spacing:-.01em; line-height:1.24}
.dlead .em{color:var(--accent)}
.metabar{display:flex; flex-wrap:wrap; gap:12px 40px; padding:34px 0; margin-top:26px;
         border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.metabar .mi{display:flex; flex-direction:column; gap:6px}
.metabar .mk{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.metabar .mv{font-size:15.5px; font-weight:600}
.prose{max-width:64ch; padding:clamp(56px,8vw,96px) 0 0}
.prose h2{font-weight:800; letter-spacing:-.02em; line-height:1.05; margin:52px 0 18px;
          font-size:clamp(26px,3.4vw,40px)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:clamp(17px,1.55vw,19px); color:var(--fg); line-height:1.62; margin:0 0 20px}
.prose p .em{color:var(--accent); font-weight:600}
.prose .muted{color:var(--muted)}
.prose ul{margin:0 0 20px; padding:0; list-style:none}
.prose li{position:relative; padding-left:26px; margin:0 0 12px; font-size:clamp(16px,1.5vw,18px); line-height:1.55}
.prose li::before{content:""; position:absolute; left:0; top:12px; width:9px; height:9px; background:var(--accent)}
.stackrow{display:flex; flex-wrap:wrap; gap:8px; padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,104px)}

/* reveal */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .js .rv{opacity:1; transform:none; transition:none} }