:root{--bg:#050505;--fg:#f2f1ec;--muted:#8d8c87;--line:#272725;--panel:#0d0d0c}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}.shell{width:min(1500px,calc(100% - 48px));margin:0 auto}
header{display:grid;grid-template-columns:1fr auto;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.brand,nav,.mono,.eyebrow,.section-num,.meta,.tiny,.work-filter,.roleline{font-family:"IBM Plex Mono",monospace}
.brand{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
nav{display:flex;gap:24px} nav a{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} nav a:hover{color:var(--fg)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:72px;padding:68px 0 58px;align-items:end}
.eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.hero h1{margin:0;font-size:clamp(64px,9vw,132px);line-height:.84;letter-spacing:-.06em;font-weight:300}
.hero p{margin:0;color:#cbc9c3;font-size:20px;line-height:1.38;max-width:520px}
.rule{border-top:1px solid var(--line)}
.section{display:grid;grid-template-columns:150px minmax(0,1fr);gap:48px;padding:76px 0;border-top:1px solid var(--line)}
.section-num{font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;position:sticky;top:28px;align-self:start}
.section h2{margin:0 0 24px;font-size:clamp(38px,5vw,72px);font-weight:300;line-height:.92;letter-spacing:-.045em}
.lede{font-size:clamp(22px,2.6vw,34px);line-height:1.15;max-width:960px;color:#d9d8d2;margin:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 54px;margin-top:40px}
.cardline{border-top:1px solid var(--line);padding:18px 0}
.cardline h3{font-size:20px;font-weight:400;margin:0 0 8px}.cardline p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0 30px;font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(max-width:900px){
 .shell{width:min(100% - 28px,1500px)} .hero{grid-template-columns:1fr;gap:32px;padding:50px 0 42px}
 .section{grid-template-columns:1fr;gap:18px;padding:56px 0}.section-num{position:static}.grid2{grid-template-columns:1fr}
 nav{gap:14px}
}

.work-tools{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.work-filter{display:flex;gap:18px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.work-filter span:first-child{color:var(--fg)}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding-bottom:80px}
.work-card{grid-column:span 6;border:1px solid var(--line);background:var(--panel)}
.work-card.feature{grid-column:span 12}.work-card.wide{grid-column:span 7}.work-card.narrow{grid-column:span 5}
.work-img{position:relative;min-height:360px;overflow:hidden;background:#151515}.feature .work-img{min-height:650px}
.work-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}.work-card:hover img{transform:scale(1.025)}
.deferred-work{display:none!important}
.work-copy{padding:17px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:20px}
.work-copy h3{font-size:34px;font-weight:300;letter-spacing:-.035em;margin:0 0 7px}.work-copy p{margin:0;color:var(--muted);font-size:13px}
.roleline{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:right}
@media(max-width:900px){.work-grid{grid-template-columns:1fr}.work-card,.work-card.feature,.work-card.wide,.work-card.narrow{grid-column:auto}.work-copy{grid-template-columns:1fr}.roleline{text-align:left}}

/* ===== Curated image hierarchy + randomized motion ===== */
.media-hero-xl{margin-top:42px}
.media-hero-xl img{width:100%;display:block}
.media-feature-xl{grid-column:1/-1}
.media-feature-xl img{width:100%;display:block}
.media-small{max-width:720px}
.media-mini{max-width:460px}
.media-center{margin-left:auto;margin-right:auto}
.media-narrow{max-width:820px}
.media-portrait-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.media-portrait-grid img{width:100%;height:auto;display:block}
.media-landscape-pair{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.media-landscape-pair.equal{grid-template-columns:1fr 1fr}
.media-gallery-asym{display:grid;grid-template-columns:1.4fr .6fr;gap:14px}
.media-gallery-asym .stack{display:grid;gap:14px}
.media-gallery-asym img{display:block;width:100%;height:100%;object-fit:cover}
.media-caption-inline{
  margin-top:8px;
  font-family:"IBM Plex Mono",monospace;
  font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)
}

/* animation primitives */
.fx{
  opacity:0;
  will-change:transform,opacity,clip-path,filter;
  transition:
    opacity .75s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1),
    clip-path 1.05s cubic-bezier(.16,1,.3,1),
    filter .9s ease;
}
.fx.in{opacity:1;transform:none;clip-path:inset(0);filter:none}
.fx-rise{transform:translateY(34px) scale(.985)}
.fx-left{transform:translateX(-34px) scale(.99)}
.fx-right{transform:translateX(34px) scale(.99)}
.fx-zoom{transform:scale(1.08);filter:blur(4px)}
.fx-mask-x{clip-path:inset(0 100% 0 0)}
.fx-mask-y{clip-path:inset(100% 0 0 0)}
.fx-tilt-a{transform:translateY(22px) rotate(-1.4deg) scale(1.01)}
.fx-tilt-b{transform:translateY(22px) rotate(1.4deg) scale(1.01)}
.fx-scan{filter:contrast(.7) brightness(.85);transform:scale(1.03)}
.fx-scan::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);
  opacity:.7;pointer-events:none
}

/* reveal timing for grouped visuals */
.fx-group > *{transition-delay:var(--delay,0ms)}
.fx-group > *:nth-child(1){--delay:0ms}
.fx-group > *:nth-child(2){--delay:90ms}
.fx-group > *:nth-child(3){--delay:180ms}
.fx-group > *:nth-child(4){--delay:270ms}
.fx-group > *:nth-child(5){--delay:360ms}
.fx-group > *:nth-child(6){--delay:450ms}

/* image hover states */
@media (hover:hover) and (pointer:fine){
  .media-card:hover img,
  .media-frame:hover img,
  .work-card:hover img,
  .card:hover img{
    transform:scale(1.028);
  }
}

/* ===== Cursor system ===== */
@media (pointer:fine){
  body, a, button { cursor:none; }

  #sw-cursor{
    position:fixed;left:0;top:0;z-index:99999;
    width:12px;height:12px;
    transform:translate(-50%,-50%);
    pointer-events:none;
    mix-blend-mode:difference;
    transition:width .16s ease,height .16s ease,border-radius .16s ease,border-color .16s ease;
  }
  #sw-cursor .core{
    position:absolute;inset:3px;background:#fff;
  }
  #sw-cursor .ring{
    position:absolute;inset:0;border:1px solid rgba(255,255,255,.85);
  }
  #sw-cursor .bracket{
    position:absolute;width:7px;height:7px;border-color:#fff;border-style:solid;opacity:0;
    transition:opacity .12s ease
  }
  #sw-cursor .b1{left:-3px;top:-3px;border-width:1px 0 0 1px}
  #sw-cursor .b2{right:-3px;top:-3px;border-width:1px 1px 0 0}
  #sw-cursor .b3{left:-3px;bottom:-3px;border-width:0 0 1px 1px}
  #sw-cursor .b4{right:-3px;bottom:-3px;border-width:0 1px 1px 0}

  #sw-cursor.state-link{width:20px;height:20px;border-radius:50%}
  #sw-cursor.state-link .core{inset:8px}
  #sw-cursor.state-media{width:34px;height:34px}
  #sw-cursor.state-media .ring{opacity:0}
  #sw-cursor.state-media .bracket{opacity:1}
  #sw-cursor.state-project{width:40px;height:40px}
  #sw-cursor.state-project .ring{border-radius:50%}
  #sw-cursor.state-project .core{inset:17px}

  #sw-cursor-label{
    position:fixed;left:0;top:0;z-index:99999;pointer-events:none;
    transform:translate(18px,14px);
    font-family:"IBM Plex Mono",monospace;
    font-size:8px;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;mix-blend-mode:difference;opacity:0;
    transition:opacity .12s ease;white-space:nowrap
  }
  #sw-cursor-label.show{opacity:.55}

  .sw-trail{
    position:fixed;left:0;top:0;z-index:99998;
    width:4px;height:4px;background:#fff;border-radius:50%;
    pointer-events:none;mix-blend-mode:difference;
    transform:translate(-50%,-50%);
    opacity:.18
  }
}

@media(max-width:900px){
  .media-portrait-grid{grid-template-columns:repeat(2,1fr)}
  .media-landscape-pair,.media-gallery-asym{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .fx{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
  .sw-trail{display:none!important}
}