@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --void:#0A0A0A;
  --paper:#FAFAF8;
  --ash:#6E6E6B;
  --steel:#3A3A38;
  --line:#DCDCD8;
  --line-dark:rgba(250,250,248,0.14);
  --ink:#161615;
  --white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  cursor:default;
}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;}
.serif{font-family:'Fraunces',serif;}
::selection{background:var(--ink); color:var(--paper);}

/* ---------- progress bar ---------- */
#progress{position:fixed; top:0; left:0; height:2px; background:var(--ink); width:0%; z-index:300; transition:width .1s linear;}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- cursor dot ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--ink); pointer-events:none; z-index:400; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .25s ease, height .25s ease, background .25s ease;
}
.cursor-dot.grow{width:44px; height:44px; background:var(--paper);}
@media (max-width:820px){ .cursor-dot{display:none;} }

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 6vw; transition: background .4s ease, padding .4s ease, border-color .4s ease, color .4s ease;
  border-bottom:1px solid transparent;
  color:var(--paper);
}
nav.scrolled{ background:rgba(250,250,248,0.86); backdrop-filter:blur(10px); padding:15px 6vw; border-bottom:1px solid var(--line); color:var(--ink);}
.brand{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:inherit;}
.navlinks{display:flex; gap:2.4rem; align-items:center;}
.navlinks a{
  font-size:0.8rem; text-transform:uppercase; letter-spacing:0.12em; position:relative; padding-bottom:4px; color:inherit;
}
.navlinks a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor; transition:width .3s ease;}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}
.navlinks a.active{color:inherit; font-weight:600;}
.navlinks a:focus-visible, .brand:focus-visible{outline:2px solid currentColor; outline-offset:3px;}
nav.scrolled .navlinks a:hover{color:var(--ink); }
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer;}
.burger span{width:22px; height:1.5px; background:currentColor;}
@media (max-width:820px){
  .navlinks{position:fixed; top:0; right:-100%; width:75vw; height:100vh; background:var(--void); flex-direction:column; justify-content:center; align-items:flex-start; padding:0 3rem; transition:right .5s cubic-bezier(.65,0,.35,1); gap:2rem;}
  .navlinks.open{right:0;}
  .navlinks a{color:var(--paper); font-size:1.1rem;}
  .navlinks a::after{background:var(--paper);}
  .burger{display:flex;}
}

/* ---------- marquee ticker ---------- */
.ticker{
  background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap;
  padding:calc(0.7rem + 84px) 0 0.7rem 0;
  border-bottom:1px solid var(--steel);
}
.ticker-track{display:inline-block; animation:scroll-left 26s linear infinite;}
.ticker-track span{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; margin-right:3rem; text-transform:uppercase;}
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- page transition ---------- */
.page-veil{position:fixed; inset:0; background:var(--void); z-index:500; transform:translateY(0); animation:veil-out .7s cubic-bezier(.65,0,.35,1) forwards; animation-delay:.05s; pointer-events:none;}
@keyframes veil-out{ to{transform:translateY(-100%);} }

/* ---------- generic hero ---------- */
.page-hero{ background:var(--void); color:var(--paper); padding:11rem 6vw 6rem; position:relative; overflow:hidden;}
.page-hero .tag{color:var(--ash);}
.split-line{overflow:hidden; display:block;}
.split-line span{display:inline-block; transform:translateY(110%); animation:riseUp .9s cubic-bezier(.2,.9,.25,1) forwards;}
@keyframes riseUp{ to{transform:translateY(0);} }
h1.page-title{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.05; letter-spacing:-0.01em;}

/* ---------- sections ---------- */
section{padding:7rem 6vw;}
.section-head{max-width:640px; margin-bottom:3.2rem;}
.tag{font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--ash); text-transform:uppercase; letter-spacing:0.14em; margin-bottom:0.9rem; display:block;}
h2{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15; letter-spacing:-0.01em;}
.lead{margin-top:1.1rem; font-size:1.02rem; color:var(--steel); line-height:1.7; max-width:58ch;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ---------- fact strip / counters ---------- */
.fact-strip{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.fact-strip .fact{padding:2.2rem 1.5rem; border-left:1px solid var(--line);}
.fact-strip .fact:first-child{border-left:none;}
.fact-num{font-family:'Fraunces',serif; font-size:2.4rem; font-weight:500;}
.fact-label{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ash); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.4rem;}

/* ---------- cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.6rem;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2.6rem;}
.card{background:var(--paper); padding:2.3rem 2rem; transition:background .35s ease, transform .35s ease;}
.card:hover{background:var(--ink); color:var(--paper); transform:translateY(-3px);}
.card:hover .card-num, .card:hover .card-desc{color:var(--paper); opacity:0.8;}
.card-num{font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--ash); display:block; margin-bottom:1.4rem; transition:color .35s ease;}
.card h3{font-family:'Fraunces',serif; font-weight:500; font-size:1.25rem; margin-bottom:0.7rem;}
.card-desc{font-size:0.92rem; color:var(--steel); line-height:1.6; transition:color .35s ease;}

.work-card{border:1px solid var(--line); padding:2.2rem; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; position:relative; overflow:hidden;}
.work-card:hover{transform:translateY(-4px); border-color:var(--ink); box-shadow:6px 6px 0 var(--ink);}
.work-card h3{font-family:'Fraunces',serif; font-size:1.2rem; font-weight:500; margin:1rem 0 0.5rem;}
.work-card p{color:var(--steel); font-size:0.92rem; line-height:1.6;}
.work-thumb{width:100%; height:160px; background:repeating-linear-gradient(135deg, var(--line), var(--line) 10px, transparent 10px, transparent 20px); filter:grayscale(1);}

.placeholder-note{margin-top:3.2rem; padding:1.5rem 1.7rem; border:1px dashed var(--ash); font-size:0.85rem; color:var(--steel); line-height:1.6; max-width:72ch;}

/* magnetic button */
.magnetic{position:relative; display:inline-flex; align-items:center; gap:.6rem; padding:1rem 2rem; border:1px solid var(--ink); font-weight:600; font-size:0.88rem; overflow:hidden; transition:color .3s ease;}
.magnetic::before{content:''; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .4s cubic-bezier(.65,0,.35,1); z-index:-1;}
.magnetic:hover{color:var(--paper);}
.magnetic:hover::before{transform:translateY(0);}

/* timeline (about page) */
.timeline{border-left:1px solid var(--line); margin-top:2.6rem; padding-left:2.4rem; display:flex; flex-direction:column; gap:2.6rem;}
.t-item{position:relative;}
.t-item::before{content:''; position:absolute; left:-2.55rem; top:0.35rem; width:9px; height:9px; border-radius:50%; background:var(--ink);}
.t-year{font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--ash); margin-bottom:0.3rem; display:block;}
.t-item h4{font-family:'Fraunces',serif; font-weight:500; font-size:1.1rem; margin-bottom:0.3rem;}
.t-item p{color:var(--steel); font-size:0.92rem; line-height:1.6; max-width:52ch;}

/* contact page */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:4rem;}
.contact-form{display:flex; flex-direction:column; gap:1.1rem;}
.contact-form input, .contact-form textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line); padding:0.85rem 0.2rem;
  font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--ink); transition:border-color .3s ease;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--ink);}
.contact-form button{margin-top:1rem; background:var(--ink); color:var(--paper); border:none; padding:1rem 1.8rem; font-weight:600; font-size:0.9rem; width:fit-content; cursor:pointer; transition:background .3s ease, transform .3s ease;}
.contact-form button:hover{background:var(--steel); transform:translateY(-2px);}
.contact-info{font-family:'IBM Plex Mono',monospace; font-size:0.88rem; line-height:2.1; color:var(--steel);}
.contact-info .k{color:var(--ash); display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; margin-top:1.2rem;}
.map-block{margin-top:2rem; height:180px; border:1px solid var(--line); background:
  repeating-linear-gradient(0deg, transparent, transparent 19px, var(--line) 19px, var(--line) 20px),
  repeating-linear-gradient(90deg, transparent, transparent 19px, var(--line) 19px, var(--line) 20px);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--ash); text-transform:uppercase; letter-spacing:0.08em;}

footer{padding:2.4rem 6vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--ash); flex-wrap:wrap; gap:1rem;}
footer a:hover{color:var(--ink);}

@media (max-width:820px){
  .fact-strip{grid-template-columns:repeat(2,1fr);}
  .fact-strip .fact:nth-child(3){border-left:none;}
  .grid-3, .grid-2, .contact-wrap{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}