@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-ext-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-ext-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#EDEBE6;
  --ink:#1A1A1D;
  --soft:rgba(26,26,29,.5);
  --rule:rgba(26,26,29,.16);
  --room:#EDEBE6;
  --room-deep:#DEDAD2;
  --room-soft:#6C6A63;
  --room-ink:#1A1A1D;
  --dot:#3826E8;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.blue{background:var(--room)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hidden{display:none}

.topbar{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.navlink{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:opacity .15s}
.navlink:hover{opacity:.55}
.wordmark{font-size:clamp(19px,2.4vw,26px);font-weight:400;letter-spacing:-.02em;text-transform:uppercase;transition:opacity .15s}
.wordmark:hover{opacity:.55}

/* ---------- index ---------- */


.roomtitle{font-size:clamp(19px,2.4vw,26px);font-weight:500;letter-spacing:-.02em}

#home{padding:30px 34px 14vh;min-height:100vh}
.masthead{position:relative;max-width:none}
.defn{display:block;transition:opacity .15s}
.defn:hover h1{opacity:.6}
.masthead h1{
  font-size:clamp(38px,7vw,96px);font-weight:400;letter-spacing:-.03em;
  line-height:.96;text-transform:uppercase;margin:0;
}
.masthead .ipa{
  font-family:var(--mono);font-size:clamp(12px,1.3vw,14px);font-weight:400;
  letter-spacing:.01em;color:var(--room-soft);margin:.7em 0 0;
}
.masthead .defn-rule{height:1px;background:var(--ink);margin:16px 0 18px;max-width:640px}
.masthead .def{
  font-size:clamp(15px,1.6vw,18px);font-weight:400;line-height:1.55;
  margin:0;max-width:52ch;
}
.masthead .syn{
  font-size:clamp(13px,1.4vw,15px);font-weight:400;line-height:1.55;
  margin:.9em 0 0;max-width:52ch;color:var(--room-soft);
}
.masthead .syn span{color:var(--ink)}
.mastnav{position:absolute;top:.35em;right:0}
.mastnav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.mastnav a:hover{opacity:.55}
.shelf{margin-top:20vh}
@media(max-width:860px){
  #home{padding:24px 22px 10vh}
  .masthead .def,.masthead .syn{max-width:none}
  .masthead .defn-rule{margin:14px 0 16px}
  .shelf{margin-top:12vh}
}

.shelf{display:grid;grid-template-columns:repeat(12,1fr);gap:34px 26px;align-items:start}
.item{display:block;width:100%}
.frame{container-type:inline-size;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--room-deep);
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.tilehead{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(18,18,22,.42);opacity:0;transition:opacity .16s ease}
.tilehead b{font-weight:400;text-transform:uppercase;letter-spacing:-.035em;
  line-height:.92;color:#fff;text-align:center;white-space:nowrap;
  font-size:var(--fs,28px)}
.item:hover .tilehead,.item:focus-visible .tilehead{opacity:1}
@media(hover:none){.tilehead{display:none}}
.item:hover .frame{transform:translateY(-5px)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.ph{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--room-soft)}
.cap{margin-top:10px;display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.cap .st{color:var(--room-soft);white-space:nowrap}
.cap .st.live{color:var(--dot)}
.cap .st.live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--dot);margin-right:6px;vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.cap .st.live::before{animation:none}}

/* ---------- subpage: about ---------- */
#about{min-height:100vh;padding:34px 40px 12vh}
.aboutgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:56px;align-items:start;margin-top:13vh}
.bio{max-width:60ch}
.portrait{margin:0;position:sticky;top:9vh}
.portrait img{width:100%;height:auto;display:block}
.portrait figcaption{margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--soft)}
.lede{font-size:clamp(24px,3.4vw,38px);font-weight:400;letter-spacing:-.028em;line-height:1.16;margin-bottom:36px}
.bio p{margin-bottom:19px;line-height:1.62;font-size:17px}
.bio em{font-style:italic}
.contact{margin-top:52px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:13px;display:flex;gap:24px;flex-wrap:wrap}

/* ---------- subpage: project ---------- */
#project{min-height:100vh;padding:30px 34px 12vh;color:var(--room-ink)}
.pj-title{font-size:clamp(34px,6.8vw,86px);font-weight:400;letter-spacing:-.03em;line-height:.96;margin-top:11vh;text-transform:uppercase}
.pj-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;margin-top:38px;align-items:start}
.pj-text{font-size:clamp(17px,1.7vw,20px);line-height:1.5;max-width:46ch}
.pj-facts{font-family:var(--mono);font-size:12px;line-height:2.1;letter-spacing:.03em}
.pj-facts b{font-weight:400;color:var(--room-soft);display:inline-block;min-width:11ch}
.watch{display:inline-block;margin-top:34px;font-family:var(--sans);
  font-size:clamp(26px,3.6vw,46px);font-weight:400;letter-spacing:-.03em;
  text-transform:uppercase;text-decoration:none;line-height:1;
  border-bottom:2px solid currentColor;padding-bottom:6px;transition:opacity .15s}
.watch:hover{opacity:.55}
.watch{color:var(--dot)}
.watch .arrow{display:inline-block;margin-left:.18em;transition:transform .18s ease}
.watch:hover .arrow{transform:translateX(.12em)}
.pj-gallery{margin-top:52px;display:flex;flex-direction:column;gap:16px;max-width:1100px}
.pj-still{margin:0;background:var(--room-deep);overflow:hidden;display:block}
.pj-still img{width:100%;height:auto;display:block}
.pj-still.empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.pj-next{margin-top:11vh;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.pj-next .nx{font-size:clamp(18px,2.7vw,32px);font-weight:400;letter-spacing:-.025em;text-transform:uppercase;transition:opacity .15s}
.pj-next .nx:hover{opacity:.6}

@media(max-width:860px){
  #cover{padding:24px 22px 26px}
  #about{padding:24px 22px 12vh}
  #work,#project{padding:24px 22px 10vh}
  .shelf{grid-template-columns:repeat(2,1fr);gap:26px 16px;margin-top:26px}
  .item{grid-column:auto / span 1 !important;grid-row:auto !important;margin-top:0 !important}
  .item:nth-child(even){margin-top:5vh !important}
  .pj-grid{grid-template-columns:1fr;gap:26px}
  .aboutgrid{grid-template-columns:1fr;gap:34px;margin-top:8vh}
  .portrait{position:static;max-width:74%}
}

/* ---- static multipage additions ---- */
a{text-decoration:none;color:inherit}
main{display:block}
.room{background:var(--room);color:var(--room-ink);min-height:100vh}
body:has(.room){background:var(--room)}
html:has(.room){background:var(--room)}
.navlink.soft{color:var(--room-soft)}
nav{display:flex;gap:22px}
h1{font-weight:400}
.roomtitle{margin:0}