:root{
  --bg:#0f0e0c; --bg-2:#161412; --ink:#ece5d8; --ink-2:#a79d8f; --ink-3:#6e6659;
  --rule:#2a2622; --ember:#d9552b; --ember-2:#f0763f;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --gutter:clamp(1.1rem,3.5vw,3rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variation-settings:"opsz" 14}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:#fff}

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

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:baseline;
  padding:1.1rem var(--gutter);background:linear-gradient(var(--bg) 70%,transparent);
  border-bottom:1px solid transparent}
.wordmark{display:flex;gap:.7rem;align-items:baseline}
.wm-name{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;font-variation-settings:"opsz" 30}
.wm-role{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.nav{display:flex;gap:1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.nav a{position:relative;padding-bottom:.2rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ember);transition:right .35s var(--ease)}
.nav a:hover::after,.nav a.on::after{right:0}
.nav a.on{color:var(--ink)}

/* shared text bits */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.2rem}
.eyebrow .idx-big{color:var(--ember);font-weight:500}
main{padding:0 var(--gutter)}

/* hero */
.hero{min-height:calc(82svh - 4.5rem);display:flex;flex-direction:column;justify-content:center;
  padding:3rem 0 2rem;max-width:62rem}
.hero-line{font-size:clamp(2.6rem,7.2vw,6.4rem);line-height:.98;letter-spacing:-.025em;font-weight:300;margin:0 0 1.6rem;
  font-variation-settings:"opsz" 144}
.hero-line em{font-style:italic;font-weight:300;color:var(--ink-2)}
.hero-sub{max-width:34rem;color:var(--ink-2);font-size:1.05rem;margin:0 0 2.4rem}
.hero-cta{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-2);
  display:inline-flex;gap:.6rem;align-items:center;width:max-content}
.hero-cta .arrow{display:inline-block;transition:transform .4s var(--ease)}
.hero-cta:hover .arrow{transform:translateY(.3rem)}

/* index */
.index{padding:1rem 0 6rem}
.index-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding-top:1rem;margin-bottom:2.2rem;gap:1rem;flex-wrap:wrap}
.index-title{font-size:.95rem;font-weight:400;font-style:italic;margin:0;color:var(--ink-2)}
.index-kinds{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0}
.grid{columns:5;column-gap:clamp(.9rem,1.8vw,1.6rem)}
@media (max-width:1400px){.grid{columns:4}}
@media (max-width:1000px){.grid{columns:3}}
@media (max-width:680px){.grid{columns:2}}
@media (max-width:420px){.grid{columns:1}}
.tile{display:block;break-inside:avoid;margin-bottom:clamp(1.4rem,2.6vw,2.4rem);opacity:0;transform:translateY(18px);
  animation:rise .9s var(--ease) forwards;animation-delay:calc(.05s * var(--i) + .2s)}
.tile-img{display:block;aspect-ratio:var(--ar);overflow:hidden;background:var(--bg-2)}
.tile-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.1s var(--ease),filter .6s var(--ease);
  filter:saturate(.92) contrast(1.02)}
.tile:hover .tile-img img{transform:scale(1.045);filter:saturate(1) contrast(1)}
.tile-meta{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:baseline;padding:.6rem 0 0;
  border-top:1px solid transparent;transition:border-color .4s var(--ease)}
.tile:hover .tile-meta{border-color:var(--rule)}
.tile-meta .idx{font-family:var(--mono);font-size:.64rem;color:var(--ember);letter-spacing:.08em}
.tile-meta .ttl{font-size:1rem;font-style:italic;font-weight:400;font-variation-settings:"opsz" 30;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-meta .kind{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* project pages */
.proj-head{padding:3.5rem 0 2.5rem;max-width:62rem}
.proj-title{font-size:clamp(3rem,10vw,8rem);line-height:.92;letter-spacing:-.03em;font-weight:300;font-style:italic;margin:0;
  font-variation-settings:"opsz" 144}
.proj-body{display:flex;flex-direction:column;gap:clamp(2.2rem,6vw,5.5rem);padding:1rem 0 4rem;max-width:80rem;margin:0 auto}
.ph{margin:0;position:relative;cursor:zoom-in}
.ph img{width:100%;background:var(--bg-2)}
.ph figcaption{position:absolute;left:0;bottom:-1.5rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--ink-3)}
.wide{width:100%;max-width:74rem;margin:0 auto}
.solo{width:min(100%,38rem)}
.solo.left{margin-right:auto;margin-left:clamp(0rem,6vw,6rem)}
.solo.right{margin-left:auto;margin-right:clamp(0rem,6vw,6rem)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.5rem);max-width:64rem;margin:0 auto;width:100%}
.pair .ph:nth-child(2){margin-top:clamp(1.5rem,6vw,5rem)}
@media (max-width:640px){.pair{grid-template-columns:1fr}.pair .ph:nth-child(2){margin-top:0}.solo{width:100%;margin-left:0!important;margin-right:0!important}}

.proj-nav{display:grid;grid-template-columns:1fr auto 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:2rem 0 4rem}
.pn{display:flex;flex-direction:column;gap:.3rem;padding:1.4rem 1rem;transition:background .3s}
.pn:hover{background:var(--bg-2)}
.pn.next{text-align:right;align-items:flex-end}
.pn.all{text-align:center;align-items:center;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.pn-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pn-title{font-size:1.4rem;font-style:italic;font-weight:300;font-variation-settings:"opsz" 60}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(10,9,8,.96);display:grid;place-items:center;padding:3rem;
  animation:fade .25s var(--ease)}
.lightbox[hidden]{display:none}
.lb-img{max-width:100%;max-height:calc(100vh - 6rem);object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox button{position:absolute;background:none;border:0;color:var(--ink-2);font-family:var(--mono);font-size:1.3rem;cursor:pointer;padding:1rem}
.lightbox button:hover{color:var(--ember-2)}
.lb-close{top:.6rem;right:1rem}
.lb-prev{left:.4rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.4rem;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);margin:0}

/* text pages */
.text-page{padding:4rem 0 6rem;min-height:70svh}
.page-title{font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;letter-spacing:-.025em;font-weight:300;font-style:italic;margin:0 0 2.5rem;font-variation-settings:"opsz" 144}
.text-cols{max-width:40rem;border-top:1px solid var(--rule);padding-top:2rem}
.prose{font-size:1.25rem;line-height:1.55;color:var(--ink-2);margin:0 0 1.4rem;font-variation-settings:"opsz" 18}
.prose a{color:var(--ink);border-bottom:1px solid var(--ember)}
.prose a:hover{color:var(--ember-2)}
.big-link a{font-size:clamp(1.3rem,3.5vw,2.2rem);font-style:italic;border-bottom-width:2px}

/* footer */
.foot{display:flex;justify-content:space-between;gap:2rem;align-items:baseline;padding:2rem var(--gutter) 2.5rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink-3);flex-wrap:wrap}
.foot-line{margin:0;max-width:60ch}
.foot-top:hover{color:var(--ember-2)}

/* motion */
.reveal{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease) forwards;animation-delay:calc(.09s * var(--i))}
.proj-body .reveal{animation:none;opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.proj-body .reveal.pending{opacity:0;transform:translateY(22px)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.reveal,.tile{animation:none;opacity:1;transform:none}.proj-body .reveal.pending{opacity:1;transform:none}}