@font-face{font-family:Plex;src:url('assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#f5f5f3;--ink:#242520;--muted:#73766e;--line:#d8dad3;--gutter:clamp(24px,4vw,76px);--tile-width:clamp(260px,33vw,500px);font-family:Plex,'Courier New',monospace;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:1px solid var(--ink);outline-offset:7px}button:disabled{color:#b2b4ad;cursor:default}::selection{background:#242520;color:#fff}
.masthead{position:fixed;z-index:30;top:0;left:0;width:100%;padding:38px var(--gutter);display:flex;justify-content:space-between;align-items:flex-start;gap:20px;pointer-events:none}.masthead a{pointer-events:auto}.wordmark{display:block;width:max-content;font-size:19px;letter-spacing:-1.2px;text-transform:uppercase;line-height:1.15}.identity-dot{margin-left:2px}.identity p{font-size:12px;line-height:1.6;margin:9px 0 0;color:var(--muted)}.contact{font-size:14px;text-transform:uppercase;line-height:1.8}.contact:hover,.controls button:hover:not(:disabled),.dialog-top button:hover{text-decoration:underline;text-underline-offset:5px}
.archive{height:100svh;min-height:500px;position:relative;isolation:isolate;overflow:hidden;touch-action:pan-x;user-select:none}.reel{position:absolute;inset:0;perspective:1400px;touch-action:pan-x;cursor:grab}.reel.dragging{cursor:grabbing}.project-tile{position:absolute;top:50%;left:50%;width:var(--tile-width);aspect-ratio:15/7;display:block;background:#e5e5e1;overflow:hidden;will-change:transform,opacity;transform-origin:center;backface-visibility:hidden;cursor:pointer;border-radius:1px;box-shadow:0 2px 6px #00000007}.project-tile img,.project-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);pointer-events:none}.project-tile video{opacity:0;transition:opacity .26s}.project-tile.is-playing video{opacity:1}.project-tile:focus-visible{outline-offset:8px}.project-tile:not(.current){pointer-events:auto}.reel::before,.reel::after{content:'';pointer-events:none;position:absolute;left:0;width:100%;height:160px;z-index:25}.reel::before{top:0;background:linear-gradient(var(--paper) 15%,#f5f5f300)}.reel::after{bottom:0;background:linear-gradient(#f5f5f300,var(--paper) 85%)}
.project-info{position:absolute;z-index:26;top:50%;transform:translateY(-50%);font-size:14px;line-height:1.7;width:calc((100% - var(--tile-width))/2 - var(--gutter) - 48px);max-width:350px;pointer-events:none;transition:opacity .18s,translate .18s}.info-left{left:var(--gutter);text-align:right}.info-right{right:var(--gutter)}.project-info.changing{opacity:0;translate:0 4px}.project-info h1{font:inherit;text-transform:uppercase;letter-spacing:.02em;margin:7px 0 0;line-height:1.65}.project-info p{margin:0}.project-info .eyebrow{color:var(--muted);font-size:12px;letter-spacing:.07em}.secondary{color:var(--muted)}#project-subtitle{font-size:12px;margin-top:3px}#project-type{text-transform:uppercase;margin-top:7px;font-size:12px;letter-spacing:.04em}.open-project{display:inline-flex;align-items:center;gap:24px;pointer-events:auto;font-size:12px;margin-top:17px;padding:6px 0;border-bottom:1px solid var(--line)}.open-project:hover{border-color:var(--ink)}.open-project span{font-size:18px;line-height:1}.explore-hint{position:absolute;bottom:113px;left:50%;transform:translateX(-50%);z-index:28;font-size:12px;color:var(--muted);transition:opacity .7s;white-space:nowrap}.archive.explored .explore-hint{opacity:0;pointer-events:none}
.controls{position:fixed;bottom:0;left:0;z-index:30;width:100%;padding:28px var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px;background:linear-gradient(#f5f5f300,var(--paper) 28%);font-size:12px}.controls>button{justify-self:start}.sequence-controls{display:flex;align-items:center;gap:18px}.sequence-line{width:30px;height:1px;background:var(--line)}.playback-controls{display:flex;align-items:center;justify-content:flex-end;gap:26px}.playback-controls button{white-space:nowrap}#sound-toggle{display:flex;align-items:center;gap:9px}.sound-bars{display:flex;gap:2px;height:11px;align-items:center}.sound-bars i{display:block;width:1px;height:3px;background:currentColor;transition:height .3s}.sound-on .sound-bars i:nth-child(1){height:5px}.sound-on .sound-bars i:nth-child(2){height:11px}.sound-on .sound-bars i:nth-child(3){height:8px}.sound-on .sound-bars i:nth-child(4){height:4px}
dialog{color:var(--ink);background:var(--paper);border:0;padding:0;max-width:none;max-height:none}dialog::backdrop{background:#24252075;backdrop-filter:blur(9px)}.dialog-top{position:sticky;top:0;z-index:4;background:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;font-size:14px;border-bottom:1px solid var(--line)}.dialog-top h2{font:inherit;margin:0;text-transform:uppercase}.dialog-top button{white-space:nowrap}.dialog-top button span{font-size:20px;margin-left:12px}.index-dialog{width:min(850px,calc(100% - 60px));height:min(800px,calc(100svh - 64px));padding:0 36px 26px}.index-list{padding:10px 0}.index-row{display:grid;grid-template-columns:34px 72px 1fr auto;width:100%;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0;text-align:left}.index-row:hover{background:#e9eae5}.index-row[aria-current=true]{background:#e1e3db}.index-row img{width:72px;height:40px;object-fit:cover}.index-row span{font-size:14px;line-height:1.5}.index-row .index-num,.index-row .index-year{color:var(--muted);font-size:12px}
.project-dialog{width:100%;height:100svh;padding:0 var(--gutter) 40px;overscroll-behavior:contain}.project-dialog .dialog-top{padding:28px 0}#project-content{max-width:1320px;margin:auto}.detail-head{padding:54px 0 36px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}.detail-head h2{font-size:clamp(25px,4vw,62px);font-weight:400;letter-spacing:-.065em;line-height:1.2;text-transform:uppercase;margin:0 0 12px;max-width:1000px}.detail-head p{font-size:14px;color:var(--muted);margin:0;line-height:1.7}.detail-head .detail-credit{max-width:290px;font-size:12px;text-align:right}.full-film{width:100%;max-height:78svh;background:#111;display:block}.film-error{font-size:14px;line-height:1.7;padding:18px;border:1px solid var(--line)}.film-picker{display:flex;align-items:center;gap:18px;margin:22px 0;font-size:14px}.film-picker select{background:transparent;font:inherit;border:1px solid var(--line);padding:10px;color:var(--ink);max-width:80%}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}.gallery img{display:block;width:100%;height:auto;align-self:center}.gallery img:first-child:last-child{grid-column:1/-1}.gallery img.landscape:nth-child(5n+1){grid-column:1/-1}.project-links{padding:36px 0;font-size:14px}.project-links a{border-bottom:1px solid var(--ink)}.detail-nav{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:24px 0;max-width:1320px;margin:auto;font-size:14px}.no-script{position:fixed;inset:120px 20px auto;z-index:99;padding:30px;background:var(--paper)}
@media(min-width:1700px){.info-left{left:calc(50% - 610px)}.info-right{right:calc(50% - 610px)}}
@media(max-width:900px){:root{--tile-width:clamp(260px,38vw,380px);--gutter:26px}.masthead{padding-top:26px}.project-info{width:calc((100% - var(--tile-width))/2 - var(--gutter) - 18px)}.project-info h1{font-size:12px}.project-info .eyebrow,#project-subtitle,#project-type{font-size:12px}.playback-controls{gap:16px}.controls{grid-template-columns:1fr auto;gap:15px}.sequence-controls{display:none}.wordmark{font-size:18px}}
@media(max-width:600px){:root{--gutter:22px;--tile-width:72vw}.masthead{padding-top:24px}.identity p{max-width:175px;font-size:12px;line-height:1.4;margin-top:7px}.contact{font-size:12px}.archive{min-height:420px}.reel{bottom:70px}.reel::before,.reel::after{height:160px}.project-info{width:auto;max-width:none;top:auto;transform:none;bottom:123px;left:var(--gutter);right:var(--gutter);text-align:left;pointer-events:none}.info-left{padding-right:94px}.project-info h1{font-size:14px;line-height:1.5;margin-top:3px}.project-info .eyebrow{font-size:12px}.info-right{left:auto;bottom:125px;right:var(--gutter);text-align:right}.info-right .eyebrow,#project-type{display:none}.open-project{margin-top:0;font-size:12px;gap:10px;padding:5px 0}.controls{padding:22px var(--gutter);align-items:center}.playback-controls{gap:13px;flex-direction:column;align-items:flex-end}.controls>button{align-self:end}.controls button{font-size:12px}.explore-hint{bottom:86px;font-size:12px}.index-dialog{width:calc(100% - 24px);height:calc(100svh - 32px);padding:0 18px 18px}.index-row{grid-template-columns:24px 54px 1fr;gap:12px}.index-row img{width:54px;height:32px}.index-row .index-year{display:none}.index-row span{font-size:13px}.dialog-top{font-size:12px;padding:22px 0}.detail-head{display:block;padding:30px 0}.detail-head h2{font-size:30px;letter-spacing:-.045em}.detail-head .detail-credit{text-align:left;margin-top:14px;max-width:none}.gallery{grid-template-columns:1fr;gap:12px;margin-top:14px}.detail-nav{font-size:12px}.project-dialog{padding:0 18px 20px}.film-picker{display:block}.film-picker select{display:block;max-width:100%;width:100%;margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.project-tile{will-change:auto}}

.detail-credit span{display:block}.detail-credit .credit-label{text-transform:uppercase;font-size:10px;letter-spacing:.08em;margin-bottom:5px}.detail-credit .credit-year{margin-top:5px}
.main-nav{display:flex;align-items:flex-start;gap:26px;pointer-events:auto;font-size:14px;line-height:1.8;text-transform:uppercase}
.main-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.home-nav{align-items:center}
.home-nav .contact{align-items:center}
@media(max-width:600px){.masthead{gap:12px}.main-nav{gap:10px;font-size:12px;flex-shrink:0}}

/* Mobile layout: separate the moving reel, project copy and controls. */
@media(max-width:600px){
  body{height:100svh;min-height:620px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:auto}
  .masthead{position:relative;padding:20px var(--gutter) 6px;min-width:0}
  .identity{min-width:0}.identity p{max-width:175px;overflow-wrap:anywhere}
  .contact{flex-shrink:0;min-height:44px;display:flex;align-items:flex-start}
  .archive{height:auto;min-height:0;display:grid;grid-template-rows:minmax(180px,1fr) auto auto auto;overflow:hidden;touch-action:auto}
  .reel{position:relative;inset:auto;grid-row:1;width:100%;height:100%;min-height:0;overflow:hidden;touch-action:pan-x}
  .project-tile{width:var(--mobile-tile-width,var(--tile-width))}
  .reel::before,.reel::after{height:12px}
  .project-info{position:static;inset:auto;transform:none;width:auto;min-width:0;max-width:none;margin:0 var(--gutter);text-align:left}
  .info-left{grid-row:2;min-height:0;padding:8px 0 0}
  .project-info h1{margin-top:5px;line-height:1.5;overflow-wrap:anywhere;text-wrap:pretty}
  #project-subtitle{margin-top:5px;line-height:1.6;overflow-wrap:anywhere;text-wrap:pretty}
  .info-right{grid-row:3;margin-top:8px;text-align:left}
  .open-project{min-height:44px;box-sizing:border-box;gap:18px;padding:8px 0;margin:0}
  .explore-hint{display:none}
  .controls{position:relative;width:100%;min-width:0;padding:4px var(--gutter) max(8px,env(safe-area-inset-bottom));background:var(--paper);grid-template-columns:minmax(0,1fr) auto}
  .controls>button{align-self:center;min-height:44px}
  .playback-controls{gap:0}.playback-controls button{min-height:32px;line-height:1.5}
  .index-row{grid-template-columns:24px 54px minmax(0,1fr)}
  .index-row span{min-width:0;overflow-wrap:anywhere}
  .dialog-top{gap:16px}.dialog-top>span,.dialog-top h2{min-width:0;overflow-wrap:anywhere}
  .dialog-top button{flex-shrink:0;min-height:44px}
  .detail-head h2,.detail-head p{overflow-wrap:anywhere}
  .detail-nav{gap:24px}.detail-nav button{flex:1;min-width:0;min-height:44px;line-height:1.6;text-align:left;overflow-wrap:anywhere}
  .detail-nav button:last-child{text-align:right}
}

/* Static barbed-wire ornaments, visible only on mobile. */
.reel-wire{display:none}
@media(max-width:600px){
  .reel-wire{display:block;position:absolute;top:50%;width:clamp(22px,7.5vw,30px);height:16px;color:#55574f;z-index:27;pointer-events:none;transform:translate(-50%,-50%)}
  .reel-wire-left{left:calc((100% - var(--mobile-tile-width,var(--tile-width)))/4)}
  .reel-wire-right{left:calc(100% - (100% - var(--mobile-tile-width,var(--tile-width)))/4);transform:translate(-50%,-50%) scaleX(-1)}
}

/* Keep the preview visible before play() on Safari; mobile animations sit above it. */
.project-tile.preview-ready video{opacity:1}
.project-tile .mobile-loop{z-index:2;opacity:1;pointer-events:none}