@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;500;700&display=swap");

:root { --ink:#151515; --paper:#fbfbfa; --line:#d7d7d2; --project-blue:#102f5e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans Mono", "MS Gothic", "MS PGothic", monospace; font-size:15px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a { color:inherit; }
.site-header { display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 20px 24px; border-bottom:1px solid var(--line); }
.wordmark { font-size:22px; letter-spacing:-1.2px; text-decoration:none; }
nav { display:flex; justify-content:center; gap:24px; } nav a { padding:4px 6px; font-size:16px; text-decoration:none; text-transform:lowercase; } nav a:hover { text-decoration:none; opacity:.68; } nav a.active { color:var(--project-blue); font-weight:700; }
.home-main { max-width:1000px; margin:0 auto; padding:32px 20px 72px; }.recent-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.home-page { min-height:100vh; overflow:hidden; }.home-page .home-header { position:absolute; z-index:5; top:50%; left:50%; width:max-content; padding:0; border:0; transform:translate(-50%,-50%); }.home-page .home-main { position:relative; max-width:none; min-height:100vh; margin:0; padding:0; }.home-page .recent-grid { position:absolute; inset:0; display:block; }.home-page .work-thumbnail { position:absolute; width:clamp(88px,15vw,230px); transform:translate(-50%,-50%) scale(1); transition:transform .18s ease; }.home-page .work-thumbnail:hover { z-index:10; transform:translate(-50%,-50%) scale(1.4); }.home-page .work-thumbnail:nth-child(1) { left:calc(50% + min(33vw,470px)); top:50%; }.home-page .work-thumbnail:nth-child(2) { left:calc(50% + min(23vw,330px)); top:calc(50% - min(27vh,240px)); }.home-page .work-thumbnail:nth-child(3) { left:50%; top:calc(50% - min(35vh,320px)); }.home-page .work-thumbnail:nth-child(4) { left:calc(50% - min(23vw,330px)); top:calc(50% - min(27vh,240px)); }.home-page .work-thumbnail:nth-child(5) { left:calc(50% - min(33vw,470px)); top:50%; }.home-page .work-thumbnail:nth-child(6) { left:calc(50% - min(23vw,330px)); top:calc(50% + min(27vh,240px)); }.home-page .work-thumbnail:nth-child(7) { left:50%; top:calc(50% + min(35vh,320px)); }.home-page .work-thumbnail:nth-child(8) { left:calc(50% + min(23vw,330px)); top:calc(50% + min(27vh,240px)); }.hover-title { position:fixed; z-index:30; padding:4px 6px; background:var(--paper); color:var(--project-blue); font-size:13px; line-height:1; opacity:0; pointer-events:none; transform:translate(14px,-125%); transition:opacity .12s ease; }.hover-title.is-visible { opacity:1; }
.work-thumbnail,.photo-slider,.film-slider { position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border:0; background:#d9d7ce; }.home-project { color:inherit; text-decoration:none; cursor:pointer; }.work-thumbnail img,.photo-slider img,.slider-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.work-thumbnail.is-contain,.photo-slider.is-contain,.film-slider.is-contain { background:#fff; }.work-thumbnail.is-contain img,.photo-slider.is-contain img,.film-slider.is-contain img { object-fit:contain; }.home-project .video-frame { pointer-events:none; }
.placeholder-art { display:none; position:absolute; inset:0; overflow:hidden; }.is-placeholder .placeholder-art { display:block; }.is-placeholder img { display:none; }.placeholder-art::before,.placeholder-art::after,.placeholder-art i,.placeholder-art b { content:""; position:absolute; display:block; border-radius:100%; }
.tone-moss { background:#536448; }.tone-moss::before { width:80%; height:56%; top:12%; left:-10%; background:#172b1a; }.tone-moss::after { width:45%; height:45%; right:10%; bottom:-10%; background:#acb970; }.tone-paper { background:#e4dfcf; }.tone-paper::before { width:28%; height:130%; left:40%; top:-15%; background:#2f3945; border-radius:0; transform:rotate(23deg); }.tone-paper i { width:45%; height:12%; top:44%; left:29%; background:#cf7e53; border-radius:0; }.tone-clay { background:#c06d46; }.tone-clay::after { width:80%; height:80%; right:-14%; top:-25%; background:#e4bd8e; }.tone-ink { background:#12222c; }.tone-ink::before { width:70%; height:105%; left:15%; top:22%; background:#b9d0d4; }.tone-sun { background:#d5ba26; }.tone-sun::before { width:92%; height:58%; left:7%; top:18%; background:#e66532; }.tone-blue { background:#9cb7ba; }.tone-blue::after { width:46%; height:125%; right:22%; top:-15%; background:#3e6765; border-radius:0; transform:rotate(25deg); }.tone-red { background:#ca463a; }.tone-red::before { width:43%; height:115%; left:27%; top:-10%; background:#f0aa66; border-radius:0; transform:rotate(15deg); }.tone-silver { background:#b4b7b0; }.tone-silver::before { width:60%; height:60%; left:20%; top:17%; background:#f1e6d0; }.tone-green { background:#2c634c; }.tone-green::before { width:112%; height:50%; left:-10%; bottom:-10%; background:#89a85e; border-radius:0; transform:rotate(-12deg); }
.video-card { background:#202020; }.video-frame,.slider-media { position:absolute; inset:0; }.video-frame iframe { width:100%; height:100%; border:0; }.video-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.play-button { position:absolute; top:50%; left:50%; width:48px; height:48px; border:1px solid var(--paper); border-radius:50%; background:rgba(21,21,21,.38); transform:translate(-50%,-50%); pointer-events:none; }.play-button::after { content:""; position:absolute; top:50%; left:53%; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid var(--paper); transform:translate(-50%,-50%); }
.page-main { max-width:1320px; margin:0 auto; padding:64px 20px; }.project-row { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(180px,.9fr); gap:clamp(25px,6vw,105px); align-items:start; margin-bottom:clamp(65px,12vw,165px); scroll-margin-top:25px; }.project-row.reversed { grid-template-columns:minmax(180px,.9fr) minmax(0,2.1fr); }.project-row.reversed .project-media { order:2; }.project-row.reversed .project-description { order:1; }.project-description { padding-top:4px; }.project-description h1 { margin:0 0 20px; color:var(--project-blue); font:inherit; font-size:16px; font-weight:700; }.project-description p { margin:0; font-size:14px; line-height:1.55; }.project-credits,.project-slide-credits { margin-top:22px; }.project-credits p + p,.project-slide-credits p + p { margin-top:5px; }.project-description a { display:inline-block; margin-top:18px; font-size:14px; line-height:1.4; text-underline-offset:4px; }
.photo-slider,.film-slider.is-image { cursor:zoom-in; }.slider-controls { position:absolute; z-index:3; right:10px; bottom:10px; display:flex; align-items:center; gap:7px; color:var(--ink); background:var(--paper); padding:3px 5px; font-size:12px; }.slider-controls[hidden] { display:none; }.slider-controls button { padding:0; border:0; background:none; color:inherit; font:16px/1 "Noto Sans Mono", "MS Gothic", "MS PGothic", monospace; cursor:pointer; }.slider-controls button:hover { text-decoration:underline; }
.lightbox { max-width:min(94vw,1400px); max-height:92vh; padding:12px; border:0; background:var(--paper); color:var(--ink); overflow:visible; }.lightbox::backdrop { background:rgba(18,18,18,.36); backdrop-filter:blur(11px); }.lightbox img { display:block; max-width:100%; max-height:80vh; object-fit:contain; }.lightbox p { margin:8px 0 0; font-size:12px; }.close-lightbox { position:absolute; top:-12px; right:-12px; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:var(--paper); color:var(--ink); font:22px/1 Arial,sans-serif; cursor:pointer; }
.contact-main { max-width:760px; margin:0 auto; padding:32px 20px 30px; font-size:clamp(17px,2.5vw,25px); line-height:1.35; }.contact-main p { margin:0 0 22px; }.contact-main > a { text-underline-offset:5px; }.contact-main .contact-small { margin-top:28px; font-size:14px; line-height:1.65; }
.contact-bio { font-size:15px; line-height:1.55; }
@media (max-width:700px) { .site-header { gap:14px; padding:22px 15px 19px; }.wordmark { font-size:20px; } nav { width:100%; justify-content:space-between; gap:8px; } nav a { font-size:14px; }.home-main { padding:12px 10px 45px; }.recent-grid { gap:6px; }.home-page .home-header { padding:0; }.home-page .home-main { padding:0; }.home-page .work-thumbnail { width:clamp(72px,25vw,118px); }.home-page .work-thumbnail:nth-child(1) { left:calc(50% + 31vw); top:50%; }.home-page .work-thumbnail:nth-child(2) { left:calc(50% + 22vw); top:calc(50% - 22vh); }.home-page .work-thumbnail:nth-child(3) { left:50%; top:calc(50% - 31vh); }.home-page .work-thumbnail:nth-child(4) { left:calc(50% - 22vw); top:calc(50% - 22vh); }.home-page .work-thumbnail:nth-child(5) { left:calc(50% - 31vw); top:50%; }.home-page .work-thumbnail:nth-child(6) { left:calc(50% - 22vw); top:calc(50% + 22vh); }.home-page .work-thumbnail:nth-child(7) { left:50%; top:calc(50% + 31vh); }.home-page .work-thumbnail:nth-child(8) { left:calc(50% + 22vw); top:calc(50% + 22vh); }.page-main { padding:30px 10px 50px; }.project-row,.project-row.reversed { display:flex; flex-direction:column; gap:15px; margin-bottom:65px; }.project-row.reversed .project-media,.project-row.reversed .project-description { order:initial; }.project-description { padding:0 10px; }.contact-main { padding:24px 22px 32px; } }

@media (max-width:700px) {
  body { font-size:14px; }
  .photo-slider,.film-slider { touch-action:pan-y; }
  .home-page,.home-page .home-main { min-height:100svh; }
  .home-page .home-header { width:calc(100% - 36px); text-align:center; }
  .home-page .wordmark { font-size:clamp(18px,5.4vw,21px); }
  .home-page nav { justify-content:center; gap:clamp(10px,4vw,19px); }
  .home-page nav a { font-size:clamp(13px,3.6vw,15px); }
  .page-main { padding:28px 12px 56px; }
  .project-row,.project-row.reversed { gap:18px; margin-bottom:76px; }
  .project-description { width:100%; padding:0 8px; }
  .project-description h1 { margin-bottom:14px; font-size:15px; }
  .project-description p,.project-description a { font-size:13px; }
  .project-credits,.project-slide-credits { margin-top:18px; }
  .slider-controls { right:8px; bottom:8px; min-height:28px; padding:4px 6px; }
  .slider-controls button { min-width:22px; min-height:22px; font-size:18px; }
  .lightbox { width:calc(100vw - 20px); padding:9px; }
  .contact-main { padding:24px 22px 32px; font-size:clamp(16px,5vw,21px); }
  .contact-bio { font-size:14px; }
}

@media (max-width:370px) {
  .site-header { padding-inline:12px; }
  nav a { font-size:13px; }
  .home-page .work-thumbnail { width:clamp(64px,24vw,90px); }
}

@media (max-width:700px) and (orientation:portrait) {
  /* Keep the home title clear of the circle of work on vertical screens. */
  .home-page .home-header { top:11svh; }
  .home-page .work-thumbnail:nth-child(1) { left:81vw; top:58svh; }
  .home-page .work-thumbnail:nth-child(2) { left:72vw; top:38svh; }
  .home-page .work-thumbnail:nth-child(3) { left:50vw; top:28svh; }
  .home-page .work-thumbnail:nth-child(4) { left:28vw; top:38svh; }
  .home-page .work-thumbnail:nth-child(5) { left:19vw; top:58svh; }
  .home-page .work-thumbnail:nth-child(6) { left:28vw; top:78svh; }
  .home-page .work-thumbnail:nth-child(7) { left:50vw; top:87svh; }
  .home-page .work-thumbnail:nth-child(8) { left:72vw; top:78svh; }

  /* On a phone, show the project name, then its media, then the description. */
  .project-row,.project-row.reversed { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
  .project-description { display:contents; }
  .project-description h1 { order:1; margin:0 8px 15px; }
  .project-media,.project-row.reversed .project-media { order:2; width:100%; }
  .project-description .project-copy { order:3; margin:18px 8px 0; }
  .project-description .project-credits,.project-description .project-slide-credits { order:4; margin:18px 8px 0; }
  .project-description > a { order:5; margin:18px 8px 0; }
}

/* Keep the slider controls clear of Vimeo's own player controls. */
.film-slider.video-card .slider-controls { bottom:52px; }

@media (pointer:coarse) {
  .slider-swipe-zone { position:absolute; top:0; bottom:58px; z-index:2; width:18%; }
  .slider-swipe-zone-left { left:0; }
  .slider-swipe-zone-right { right:0; }
  .photo-slider,.film-slider { touch-action:pan-y; }
}

.project-description .project-copy { white-space:pre-line; }

/* Let the current section sit above the navigation baseline. */
.site-header:not(.home-header) nav a:not(.active) { position:relative; top:24px; }

@media (max-width:700px) {
  .site-header:not(.home-header) nav a:not(.active) { top:19px; }
}