:root{--paper:#f3efe7;--paper2:#e8e1d6;--ink:#171717;--soft:#2a2927;--muted:#6f6a63;--line:#cfc6b8;--accent:#b95c32;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;letter-spacing:-.01em}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}::selection{background:var(--ink);color:var(--paper)}.shell{width:min(calc(100% - 40px),var(--max));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(243,239,231,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(23,23,23,.08)}.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-weight:700;letter-spacing:-.03em}.nav-links{display:flex;gap:26px;font-size:.92rem;color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:var(--muted)}.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:clamp(44px,8vw,120px);padding:clamp(90px,12vw,170px) 0 110px;align-items:end}.hero h1{font-size:clamp(4rem,10vw,8.75rem);line-height:.88;letter-spacing:-.075em;margin:16px 0 28px;font-weight:760;max-width:9ch}.hero-kicker{font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.3;max-width:31ch;margin:0 0 26px}.hero-copy{font-size:1.05rem;color:var(--muted);max-width:57ch;margin:0}.hero-actions{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px}.arrow-link{font-weight:650;border-bottom:1px solid currentColor;padding-bottom:3px}.hero-aside{border-top:1px solid var(--ink);padding-top:18px}.hero-aside dl{margin:0;display:grid;gap:16px}.hero-aside dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.hero-aside dd{margin:3px 0 0;font-weight:600}.section{padding:9rem 0;border-top:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:64px}.section-head h2{font-size:clamp(2.4rem,5vw,4.8rem);line-height:.94;letter-spacing:-.055em;margin:0}.section-head p{margin:4px 0 0;color:var(--muted);max-width:52ch}.project{display:grid;grid-template-columns:minmax(0,.8fr) minmax(360px,1.2fr);gap:clamp(40px,6vw,90px);padding:70px 0;border-top:1px solid var(--line);align-items:center}.project:first-child{border-top:0;padding-top:0}.project h3{font-size:clamp(2rem,4vw,4rem);line-height:.98;letter-spacing:-.045em;margin:10px 0 18px}.project-meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}.project p{color:var(--muted);max-width:55ch}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 30px}.tag{border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:.74rem}.project-visual{min-height:460px;background:var(--soft);position:relative;overflow:hidden;border-radius:4px}.project-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 40%),repeating-linear-gradient(90deg,transparent 0 84px,rgba(255,255,255,.035) 84px 85px)}.visual-label{position:absolute;left:22px;bottom:18px;color:#ece6dc;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}.at{background:#0e0c0a}.at::after{content:"";width:155px;height:155px;border:3px solid #b5764a;border-left-color:rgba(242,237,230,.22);border-radius:50%;position:absolute;right:13%;top:24%}.finance::after{content:"MOO  ·  WOLF  ·  MARLEY";position:absolute;right:10%;top:25%;max-width:7ch;color:#f3efe7;font-size:clamp(2.2rem,5vw,5rem);font-weight:760;line-height:.85;letter-spacing:-.06em;text-align:right}.market{background:var(--paper2);border:1px solid var(--line)}.market::after{content:"MODEL\A MARKET";white-space:pre;position:absolute;right:10%;top:24%;color:var(--ink);font-size:clamp(2.5rem,5vw,5.4rem);font-weight:760;line-height:.85;letter-spacing:-.06em;text-align:right}.cap-grid,.writing-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.cap,.article-card{padding:38px 34px 34px 0;border-right:1px solid var(--line)}.cap+.cap,.article-card+.article-card{padding-left:34px}.cap:last-child,.article-card:last-child{border-right:0}.cap h3,.article-card h3{margin:0 0 12px}.cap p,.article-card p{color:var(--muted);margin:0}.pivotal{background:var(--ink);color:var(--paper)}.pivotal .section{border-color:rgba(243,239,231,.16)}.pivotal-mark{width:106px;height:88px;position:relative;margin-bottom:38px}.pivotal-mark span{position:absolute;height:13px;background:var(--paper)}.pivotal-mark span:nth-child(1){left:0;top:0;width:52px}.pivotal-mark span:nth-child(2){left:17px;top:25px;width:68px}.pivotal-mark span:nth-child(3){left:9px;top:50px;width:76px}.pivotal-mark span:nth-child(4){left:0;top:75px;width:52px}.pivotal-mark i{position:absolute;width:13px;height:13px;background:#ff4d00;left:94px;top:37px}.pivotal-copy{max-width:700px;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.12;letter-spacing:-.04em}.timeline-row{display:grid;grid-template-columns:180px 1fr;gap:40px;padding:32px 0;border-top:1px solid var(--line)}.timeline-row:first-child{border-top:0}.timeline-date{color:var(--muted);font-size:.86rem}.timeline-row h3{margin:0 0 8px}.timeline-row p{margin:0;color:var(--muted)}.article-card .status{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.contact-block{display:grid;grid-template-columns:1fr 2fr;gap:40px}.contact-block h2{font-size:clamp(3rem,7vw,6.5rem);line-height:.9;letter-spacing:-.06em;margin:0}.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.contact-links a{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:620;border-bottom:1px solid currentColor}.site-footer{border-top:1px solid var(--line);padding:32px 0 44px;font-size:.82rem;color:var(--muted)}.footer-row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer-links{display:flex;gap:18px}.page-hero{padding:120px 0 84px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(4rem,9vw,8rem);line-height:.88;letter-spacing:-.07em;margin:12px 0 28px}.page-hero p{max-width:62ch;color:var(--muted)}.content-wrap{max-width:820px;margin:auto}.prose{padding:80px 0 120px}.prose h2{font-size:2rem;letter-spacing:-.04em;margin-top:60px}.prose p{color:var(--soft);font-size:1.05rem}.note{border:1px solid var(--line);padding:20px 22px;color:var(--muted);margin-top:30px}
@media(max-width:900px){.hero,.project,.section-head,.contact-block{grid-template-columns:1fr}.project-visual{min-height:340px}.cap-grid,.writing-grid{grid-template-columns:1fr}.cap,.cap+.cap,.article-card,.article-card+.article-card{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}.timeline-row{grid-template-columns:1fr;gap:8px}}@media(max-width:640px){.shell{width:min(calc(100% - 28px),var(--max))}.nav-links{gap:14px;font-size:.82rem}.nav-links a:nth-child(3){display:none}.hero{padding:72px 0 80px}.section{padding:84px 0}.project-visual{min-height:280px}}


/* =========================================================
   V2 POLISH LAYER
   Deliberately restrained: depth, motion, tactile material.
   ========================================================= */

body{
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Low-opacity material grain. Not content, not a background gimmick. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.28;
  background-image:url("/assets/paper-grain.png");
  background-repeat:repeat;
  mix-blend-mode:multiply;
}

/* Header gains just enough physical separation once content moves underneath it. */
.site-header{
  transition:
    box-shadow 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}
.site-header.is-scrolled{
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  border-bottom-color:rgba(23,23,23,.10);
  box-shadow:0 10px 34px rgba(23,23,23,.045);
}

/* Links feel authored instead of browser-default. */
.arrow-link{
  position:relative;
  border-bottom:0;
  padding-bottom:5px;
}
.arrow-link::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform-origin:left center;
  transform:scaleX(1);
  transition:transform 210ms ease;
}
.arrow-link:hover::before{transform:scaleX(.68)}
.arrow-link{
  transition:color 180ms ease, transform 180ms ease;
}
.arrow-link:hover{transform:translateX(3px)}

.nav-links a{
  position:relative;
  transition:color 180ms ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 180ms ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* The hero's hierarchy gets one quiet editorial rule. */
.hero-kicker{
  position:relative;
  padding-left:20px;
}
.hero-kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:.15em;
  bottom:.15em;
  width:2px;
  background:var(--accent);
}
.hero-aside{
  transition:transform 280ms ease, border-color 280ms ease;
}
.hero-aside:hover{
  transform:translateY(-3px);
  border-top-color:var(--accent);
}

/* Project frames: tactile, but still nearly flat. */
.project-visual{
  --rx:0deg;
  --ry:0deg;
  border:1px solid rgba(23,23,23,.10);
  box-shadow:
    0 24px 54px rgba(23,23,23,.10),
    0 5px 15px rgba(23,23,23,.05);
  transform:
    perspective(1200px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateY(0);
  transform-style:preserve-3d;
  transition:
    transform 260ms cubic-bezier(.2,.7,.2,1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}
.project:hover .project-visual{
  transform:
    perspective(1200px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateY(-6px);
  box-shadow:
    0 34px 72px rgba(23,23,23,.13),
    0 8px 18px rgba(23,23,23,.06);
}
.project:hover .project-visual.market{
  border-color:rgba(23,23,23,.20);
}
.project h3{
  transition:letter-spacing 240ms ease, color 180ms ease;
}
.project:hover h3{
  letter-spacing:-.055em;
}

/* Tiny lift on capability and writing cells — no "card" redesign. */
.cap,
.article-card{
  transition:background-color 220ms ease, transform 220ms ease;
}
.cap:hover,
.article-card:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-2px);
}

/* Timeline marker gives the background section a little more authored detail. */
.timeline-row{
  position:relative;
}
.timeline-row::before{
  content:"";
  position:absolute;
  left:-1px;
  top:29px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  opacity:0;
  transform:scale(.6);
  transition:opacity 180ms ease, transform 180ms ease;
}
.timeline-row:hover::before{
  opacity:1;
  transform:scale(1);
}

/* Pivotal mark gets one controlled mechanical reveal. */
.pivotal-mark span,
.pivotal-mark i{
  transform-origin:left center;
  transition:transform 420ms cubic-bezier(.2,.8,.2,1);
}
.pivotal-mark:hover span:nth-child(2){transform:translateX(6px)}
.pivotal-mark:hover span:nth-child(3){transform:translateX(-4px)}
.pivotal-mark:hover i{transform:translateX(4px)}

/* Progressive scroll reveal. SEO/content remains present in the DOM. */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity 620ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),
    transform 620ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms);
}
.js .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Page transitions / initial paint without a framework. */
@keyframes page-in{
  from{opacity:0}
  to{opacity:1}
}
main{
  animation:page-in 320ms ease both;
}

/* Small-screen restraint: depth stays, 3D behavior does not. */
@media (max-width:900px){
  .project-visual,
  .project:hover .project-visual{
    transform:none;
    box-shadow:0 18px 42px rgba(23,23,23,.09);
  }
}

/* Respect user motion preferences completely. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{
    opacity:1;
    transform:none;
  }
  .project-visual,
  .project:hover .project-visual{
    transform:none;
  }
}