@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#f7f4ee;
  --paper-2:#efeae0;
  --ink:#141210;
  --ink-soft:#4a453f;
  --line:#ddd6c8;
  --accent:#c1471d;
  --accent-soft:#f0d9cd;
  --dark:#131110;
  --dark-2:#1c1815;
  --on-dark:#f4efe6;
  --on-dark-soft:#a89f92;
  --dark-line:#332e28;
  --radius:2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.serif{font-family:'Fraunces',serif}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(247,244,238,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav .word{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.nav .word .dot{color:var(--accent)}
.nav ul{list-style:none;display:flex;gap:36px}
.nav ul li a{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);transition:color .2s}
.nav ul li a:hover{color:var(--ink)}
.nav .cta{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--ink);padding:10px 18px;border-radius:100px;
  transition:background .2s,color .2s;
}
.nav .cta:hover{background:var(--ink);color:var(--paper)}
.nav-links{display:flex;align-items:center;gap:36px}
@media (max-width:760px){ .nav ul{display:none} .nav-links{gap:0} }

/* ---------- hero ---------- */
.hero{padding:76px 0 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);margin-bottom:28px;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--accent)}
.hero h1{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(2.5rem,5.4vw,4.4rem);
  line-height:1.04;letter-spacing:-.02em;
}
.hero h1 .fade{color:var(--ink-soft);font-weight:400}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}
.hero .lede{
  margin-top:26px;max-width:480px;font-size:1.08rem;color:var(--ink-soft);
}
.hero .actions{display:flex;align-items:center;gap:22px;margin-top:36px}
.btn-primary{
  background:var(--ink);color:var(--paper);
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  padding:15px 30px;border-radius:100px;transition:transform .25s,background .25s;
  display:inline-block;
}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px)}
.link-under{
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--ink);padding-bottom:3px;
}
.hero-photo{position:relative}
.hero-photo .frame{
  aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);
  background:var(--paper-2);position:relative;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(28%) contrast(1.03)}
.hero-photo .tag{
  position:absolute;left:-18px;bottom:26px;
  background:var(--ink);color:var(--paper);
  padding:14px 20px;font-size:.78rem;letter-spacing:.03em;
  max-width:220px;line-height:1.4;
}
.hero-photo .tag b{color:var(--accent);font-family:'Fraunces',serif;font-size:1rem;display:block;margin-bottom:2px}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-photo{order:-1;max-width:280px}
  .hero-photo .tag{left:10px;bottom:-16px}
}

/* ---------- big number section (dark) ---------- */
.bignum{background:var(--dark);color:var(--on-dark);padding:120px 0;margin-top:110px}
.bignum .wrap{text-align:center}
.bignum .kicker{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:18px;
}
.bignum .num{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(4.5rem,15vw,10.5rem);line-height:.9;letter-spacing:-.03em;color:var(--accent);
}
.bignum .label{
  margin-top:18px;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}
.bignum p{max-width:560px;margin:26px auto 0;color:var(--on-dark-soft);font-size:1rem}
.substats{
  margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--dark-line);
}
.substats div{padding:32px 20px;border-right:1px solid var(--dark-line)}
.substats div:last-child{border-right:none}
.substats .n{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--on-dark)}
.substats .d{font-size:.82rem;color:var(--on-dark-soft);margin-top:6px;line-height:1.4}
@media (max-width:700px){.substats{grid-template-columns:1fr}.substats div{border-right:none;border-bottom:1px solid var(--dark-line)}}

/* ---------- section shell ---------- */
.section{padding:120px 0}
.section-head{max-width:640px;margin-bottom:56px}
.section-head .kicker{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:16px;display:block;
}
.section-head h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.015em;
}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.02rem;max-width:560px}

/* ---------- proof / screenshot blocks ---------- */
.proof-hero{margin-bottom:22px}
.shot{
  border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,18,16,.04);
}
.shot img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.shot:hover img{transform:scale(1.015)}
.cap{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:16px;padding-bottom:4px}
.cap .platform{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent);white-space:nowrap}
.cap .desc{font-size:.92rem;color:var(--ink-soft);max-width:640px}
.cap .desc b{color:var(--ink);font-weight:600}

.proof-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:44px 32px;margin-top:44px;
}
@media (max-width:800px){.proof-grid{grid-template-columns:1fr}}

/* ---------- work / case studies ---------- */
.project{
  border-top:1px solid var(--line);
  padding:72px 0;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;
}
.project:last-child{border-bottom:1px solid var(--line)}
.project .meta{position:sticky;top:100px;align-self:start}
.project .idx{font-family:'Fraunces',serif;font-size:.9rem;color:var(--accent);margin-bottom:18px}
.project h3{font-family:'Fraunces',serif;font-weight:500;font-size:2rem;letter-spacing:-.015em;line-height:1.08}
.project .role{margin-top:10px;font-size:.86rem;color:var(--ink-soft);letter-spacing:.02em}
.project .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.project .tag{
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);padding:6px 12px;border-radius:100px;color:var(--ink-soft);
}
.project p.body{margin-top:22px;color:var(--ink-soft);font-size:.98rem;max-width:400px}
.project .results{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.project .results div{display:flex;gap:10px;font-size:.88rem}
.project .results b{font-family:'Fraunces',serif;color:var(--ink);min-width:64px}
.project .visuals{display:flex;flex-direction:column;gap:28px}
.project .visuals .shot img{width:100%}
.project .visuals .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){
  .project{grid-template-columns:1fr;gap:28px}
  .project .meta{position:static}
  .project .visuals .row{grid-template-columns:1fr}
}

/* ---------- about ---------- */
.about-centered{max-width:620px;margin:0 auto;text-align:center}
.about-centered .kicker{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:24px}
.about-centered .big{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:400;line-height:1.7;color:var(--ink-soft);letter-spacing:0}
.about-centered .big + .big{margin-top:20px}

/* ---------- experience ---------- */
.timeline div.row{
  display:grid;grid-template-columns:170px 1fr 200px;gap:24px;
  padding:26px 0;border-top:1px solid var(--line);align-items:baseline;
}
.timeline div.row:last-child{border-bottom:1px solid var(--line)}
.timeline .dates{font-size:.8rem;color:var(--ink-soft);letter-spacing:.02em}
.timeline .co{font-family:'Fraunces',serif;font-size:1.15rem}
.timeline .role{font-size:.84rem;color:var(--ink-soft);margin-top:4px}
.timeline .loc{font-size:.8rem;color:var(--ink-soft);text-align:right}
@media (max-width:700px){
  .timeline div.row{grid-template-columns:1fr;gap:6px}
  .timeline .loc{text-align:left}
}

/* ---------- contact / footer ---------- */
.contact{background:var(--dark);color:var(--on-dark);padding:130px 0 70px}
.contact .wrap{text-align:center}
.contact h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.02em}
.contact p{color:var(--on-dark-soft);margin:20px auto 40px;max-width:440px}
.contact .btn-primary{background:var(--accent);color:var(--on-dark)}
.contact .btn-primary:hover{background:#e0651f}
.footer-grid{
  margin-top:100px;border-top:1px solid var(--dark-line);padding-top:36px;
  display:flex;justify-content:center;gap:96px;
  font-size:.82rem;color:var(--on-dark-soft);
}
.footer-grid a{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.footer-grid a:hover{border-color:var(--on-dark-soft);color:var(--on-dark)}
.footer-grid .col{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.footer-grid .col .h{color:var(--on-dark);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;margin-bottom:6px}
@media (max-width:640px){
  .footer-grid{flex-direction:column;align-items:center;gap:28px}
  .footer-grid .col{align-items:center;text-align:center}
}