@font-face{font-family:'Inter 4';src:url('assets/Inter4-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter 4';src:url('assets/Inter4-Variable-Italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
:root{font-family:'Inter 4',Arial,sans-serif;font-optical-sizing:auto;font-size:16px;font-weight:550;letter-spacing:-.3px;color:#000;background:#fff;--margin:24px;--header-top:var(--margin);--muted:rgba(0,0,0,.5)}
:root{font-feature-settings:"cv01" 1,"cv10" 1}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{border:0;border-radius:0;background:none;padding:0;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}p,h1,h2{font:inherit;margin:0}button:focus-visible,a:focus-visible{outline:2px solid #1257ff;outline-offset:5px}button:hover,a:hover{color:#000}button:disabled{cursor:default}[hidden]{display:none!important}
#site{padding:var(--margin)}.header{display:flex;align-items:flex-start;justify-content:space-between;height:var(--expanded-header-height,60px)}.identity{width:320px;display:flex;flex-direction:column;gap:12px}.identity p{color:var(--muted);line-height:normal}.name,.identity p,nav a,.layout-switch,.asset-count,.lightbox-control{text-box-trim:trim-both;text-box-edge:cap alphabetic}.name{display:block}nav{display:flex;flex-direction:column;align-items:flex-end;gap:12px;width:57px}nav a{color:var(--muted);line-height:normal}main{margin-top:120px}#sizzle{position:relative}#sizzle-video{display:block;width:100%;aspect-ratio:1416/797;object-fit:cover;background:#ececec;border-radius:4px}.layout-switch{display:flex;align-items:center;gap:4px;height:12px;margin-bottom:12px}.layout-switch button{line-height:12px}.layout-switch button[aria-pressed=false]{color:var(--muted)}.gallery{position:relative;container-type:inline-size}.gallery.rigid{display:grid;grid-template-columns:repeat(var(--columns,8),minmax(0,1fr));column-gap:var(--column-gap,6px);row-gap:132px;grid-auto-rows:auto;padding:24px 0}.gallery.rigid .tile{align-self:center}.tile{display:block;position:relative;align-self:start;overflow:hidden;border-radius:4px;line-height:0;background:#f7f7f7;isolation:isolate}.tile img,.tile video{display:block;width:100%;height:100%;object-fit:cover}.tile:focus-visible{z-index:4;outline-offset:3px}.tile img{transition:opacity .18s}.gallery.loose{height:156.07345cqw}.gallery.loose .tile{position:absolute}.muted{color:var(--muted)}.about-copy{max-width:376px;display:flex;flex-direction:column;gap:24px}.about-copy h1{margin-bottom:12px}
@media(max-width:700px){.identity{width:min(320px,calc(100vw - 2 * var(--margin) - 81px))}main{margin-top:100px}.gallery.rigid{row-gap:52px}.gallery.rigid .tile{border-radius:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
#index{container-type:inline-size}

/* Colors are sampled before delivery; empty grid cells have no placeholder. */
.tile,#sizzle{background:var(--placeholder-color,#eee);border-radius:4px}
#sizzle-video{background:transparent}
.tile img,.tile video,#sizzle-video{transition:opacity 320ms ease}
.tile .media-pending,.tile:hover .media-pending,#sizzle-video.media-pending,.viewer-media.media-pending,.has-info .viewer-media.media-pending{opacity:0}

/* Keep the active visual in color and give every thumbnail the same interaction. */
.tile{scale:1;transform-origin:center;transition:filter 240ms ease-out,scale 180ms ease-out,box-shadow 220ms ease-out}
/* Touch taps and restored lightbox focus must not activate thumbnail hover styling. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
  .tile:hover{z-index:3;scale:1.15;box-shadow:0 12px 24px rgba(0,0,0,.16)}
  .gallery:has(.tile:hover) .tile:not(:hover){filter:grayscale(1)}
  .tile:focus-visible{scale:1.15;outline:none;box-shadow:0 12px 24px rgba(0,0,0,.16)}
}
.tile{overflow:visible}
.tile > img,.tile > video{position:absolute;inset:0;border-radius:inherit}
.tile-filename{position:absolute;top:calc(100% + 10px);left:0;width:100%;color:#000;text-align:center;text-box-trim:trim-both;text-box-edge:cap alphabetic;font-feature-settings:'cv01' on,'cv10' on;font-family:'Inter 4',Arial,sans-serif;font-size:10px;font-style:normal;font-weight:500;line-height:100%;letter-spacing:normal;overflow-wrap:anywhere;opacity:0;pointer-events:none;transition:opacity 160ms ease-in-out}
@media(min-width:701px) and (hover:hover) and (pointer:fine){
  .tile:hover .tile-filename,.tile:focus-visible .tile-filename{opacity:1}
  .gallery:has(.tile:focus-visible) .tile:not(:focus-visible):not(:hover){filter:grayscale(1)}
}
nav a{transition:color 200ms ease-in-out}
nav a[aria-current="location"]{color:#000}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){
  .layout-switch{display:none}
  .gallery.loose,.gallery.rigid{display:grid;height:auto;padding:0;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--column-gap,6px);row-gap:52px;grid-auto-rows:var(--cell-height,160px)}
  .gallery.loose .tile,.gallery.rigid .tile{position:relative;border-radius:4px;align-self:start}
}


/* Preserve Inter's alternate one and spurred G through font shorthand resets. */
button,dialog,p,h1,h2{font-feature-settings:inherit}

/* Both header groups contract in place; no padding changes can push siblings. */
.header{position:sticky;top:var(--header-top);z-index:20;pointer-events:none;--header-ease:cubic-bezier(.4,0,.2,1)}
.header .name,.header nav,.header-menu-toggle{pointer-events:auto}
.header .identity{position:relative;display:block;width:min(320px,calc(100vw - 2 * var(--margin) - 81px));height:var(--expanded-header-height,60px);overflow:visible;border-radius:4px;background:rgba(240,240,240,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:width 320ms var(--header-ease),height 320ms var(--header-ease),background-color 320ms var(--header-ease),backdrop-filter 320ms var(--header-ease)}
/* Keep cap-height alignment while retaining descenders and glyph overshoot. */
.header .name,.header .identity p{text-box-trim:trim-start}
.header .name{position:absolute;left:0;top:0;width:max-content;white-space:nowrap;padding:0;transform:translate(0,0);transition:transform 320ms var(--header-ease)}
.header .identity p{position:absolute;left:0;top:24px;width:min(320px,calc(100vw - 2 * var(--margin) - 81px));transform-origin:top left;opacity:1;transform:translateY(0) scale(1);transition:opacity 180ms ease-in-out,transform 320ms var(--header-ease),visibility 180ms}
.header-navigation{position:relative;flex:none;width:57px;height:60px;border-radius:4px;transition:width 320ms var(--header-ease),height 320ms var(--header-ease)}
.header-navigation::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(240,240,240,.5);backdrop-filter:blur(4.6px);-webkit-backdrop-filter:blur(4.6px);opacity:0;transition:opacity 320ms var(--header-ease)}
#primary-navigation{position:absolute;right:0;top:0;transform-origin:top right;transform:translate(0,0) scale(1);transition:opacity 180ms ease-in-out,transform 320ms var(--header-ease),visibility 180ms}
.header-menu-toggle{position:absolute;right:0;top:0;padding:12px 14px;border-radius:4px;color:var(--muted);white-space:nowrap;line-height:normal;text-box-trim:trim-both;text-box-edge:cap alphabetic;opacity:0;visibility:hidden;transition:opacity 220ms var(--header-ease),visibility 220ms}
.header.is-compact .identity{width:calc(var(--name-width,117px) + 28px);height:36px;background:rgba(240,240,240,.5);backdrop-filter:blur(4.6px);-webkit-backdrop-filter:blur(4.6px)}
.header.is-compact .name{transform:translate(14px,12px)}
.header.is-compact .identity p{opacity:0;visibility:hidden;transform:translateY(-16px) scale(.9,.5)}
.header.is-compact .header-navigation{width:71px;height:36px}
.header.is-compact .header-navigation::before{opacity:1}
.header.is-compact #primary-navigation{opacity:0;visibility:hidden;transform:translate(-14px,12px) scale(.8,.15);pointer-events:none}
.header.is-compact .header-menu-toggle{opacity:1;visibility:visible;transition-delay:80ms}
#compact-navigation{position:absolute;right:0;top:48px;width:max-content;min-width:71px;padding:12px 14px;border-radius:4px;gap:16px;background:rgba(240,240,240,.5);backdrop-filter:blur(4.6px);-webkit-backdrop-filter:blur(4.6px);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity 180ms ease-in-out,transform 220ms var(--header-ease),visibility 180ms}
.header.is-compact.is-menu-open #compact-navigation{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.header-menu-toggle:hover,.header-menu-toggle[aria-expanded="true"]{color:#000}

/* Independent translation preserves hover scaling and the layout-switch animation. */
.tile{translate:0 var(--preview-offset,0%)}
.gallery.loose .tile{translate:0 calc(var(--parallax-y,0px) + var(--preview-offset,0%))}
@media(prefers-reduced-motion:reduce){.gallery.loose .tile{translate:0 var(--preview-offset,0%)}}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){.gallery.loose .tile{translate:0 var(--preview-offset,0%)}}

/* About frame 1358:4258: three text columns and a bottom-aligned book shelf. */
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.about-grid h1,.about-grid h2{margin:0 0 24px;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.about-text{color:var(--muted);line-height:normal;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.about-bio p+p{margin-top:1em}
.about-list{padding:0;margin:0;list-style:none}
.about-detail{font-weight:400;letter-spacing:-.3px}
.about-facts{display:flex;flex-direction:column;gap:48px}
.recommended-books{margin-top:120px;border-top:1px solid #000;padding-top:24px}
.recommended-books h2{margin-bottom:36px;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.book-shelf{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:end;gap:6px}
.book-cover{display:block;position:relative;margin:0;min-width:0;transform-origin:center bottom;transition:transform 220ms ease,box-shadow 220ms ease}
.book-shelf .book-cover::after{content:none}
.book-cover:focus-visible{outline:2px solid #000;outline-offset:3px;z-index:2;transform:translateY(-6px) scale(1.1);box-shadow:0 12px 24px rgba(0,0,0,.16)}
@media(hover:hover) and (pointer:fine){.book-cover:hover{z-index:2;transform:translateY(-6px) scale(1.1);box-shadow:0 12px 24px rgba(0,0,0,.16)}}
@media(prefers-reduced-motion:reduce){.book-cover:hover,.book-cover:focus-visible{transform:none}}
.book-cover img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:701px) and (max-width:1000px){.about-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);row-gap:48px}.about-biography{grid-row:span 2}.about-facts{grid-column:2}}
@media(max-width:1000px){.book-shelf{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:24px}}
@media(max-width:700px){.about-grid{grid-template-columns:minmax(0,1fr);gap:48px}.recommended-books{margin-top:64px}}
@media(max-width:500px){.book-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* One continuous page, with stable section positions while the reel shrinks. */
main > section + section{margin-top:120px;border-top:1px solid #000;padding-top:24px}
main > section{scroll-margin-top:calc(var(--header-top) + 72px);outline:none}
#sizzle{transform:scale(var(--sizzle-scale,1));transform-origin:center top;will-change:transform}
@media(max-width:700px){main > section + section{margin-top:64px}}
@media(prefers-reduced-motion:reduce){#sizzle{transform:none;will-change:auto}}

/* Mobile uses tighter outer spacing; larger screens retain 24px. */
@media(max-width:700px){:root{--margin:12px}}

/* Shared link indicator. Placement follows the space available around each control. */
nav a,.layout-switch button{position:relative}
:is(a,.header-menu-toggle,.layout-switch button,.sizzle-control,.viewer-text-control,.viewer-icon-control)::after{content:"";position:absolute;left:-12px;top:50%;width:4px;height:4px;transform:translateY(-50%);background:#000;border-radius:50%;opacity:0;pointer-events:none;transition:opacity 160ms ease-in-out}
/* Dots sit outside the compact pill backgrounds. */
.header .name::after{left:auto;right:-12px}
.header .name:focus-visible{outline:none}
.header-menu-toggle::after{left:-12px}
.header.is-compact .identity{overflow:visible}
.header.is-compact .name::after{right:-26px}
#compact-navigation a{width:100%;text-align:right}
#compact-navigation a::after{left:-26px}

/* Give mobile navigation breathing room and larger, separated touch targets. */
@media(max-width:700px), (max-height:700px) and (pointer:coarse){
  :root{--header-top:36px}
  #site{padding-top:var(--header-top)}
  #compact-navigation{min-width:142px;max-width:calc(100vw - 2 * var(--margin));max-height:calc(100dvh - var(--header-top) - 60px);overflow-y:auto;padding:24px 28px;gap:16px;font-size:32px;font-weight:600;letter-spacing:-.96px}
  #compact-navigation a{display:flex;align-items:center;justify-content:flex-end;min-height:44px;line-height:1.2;text-box-trim:none}
}

/* Below the toggle labels keeps the dots clear of the slash and neighboring label. */
.layout-switch button::after{left:50%;top:auto;bottom:-10px;transform:translateX(-50%)}
@media(hover:hover) and (pointer:fine){
  :is(a,.header-menu-toggle,.layout-switch button,.sizzle-control,.viewer-text-control,.viewer-icon-control):hover::after{opacity:1}
}
:is(a,.header-menu-toggle,.layout-switch button,.sizzle-control,.viewer-text-control,.viewer-icon-control):focus-visible::after{opacity:1}

.layout-switch button:hover,.layout-switch button:focus-visible{color:#000}

/* Figma video control 1481:3967; offset from the sizzle's own edges. */
.sizzle-control,.video-time{position:absolute;left:12px;bottom:12px;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:36px;padding:12px 14px;border-radius:4px;background:rgba(240,240,240,.5);backdrop-filter:blur(4.6px);-webkit-backdrop-filter:blur(4.6px);color:rgba(0,0,0,.5)}
.video-time{width:auto;min-width:74px;cursor:default;user-select:none}
.video-time-value{font-variant-numeric:tabular-nums;white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic}
#sizzle-time{left:116px}
@media(hover:hover) and (pointer:fine){.video-time:hover{color:#000}}
.sizzle-pause-symbol{display:flex;flex:none;gap:4px}
button.sizzle-control::after{left:50%;right:auto;top:-12px;bottom:auto;transform:translateX(-50%)}
#sound-sizzle{left:64px}
.sizzle-sound-symbol{display:block;flex:none;width:16px;height:16px}
.sizzle-pause-symbol > span{display:block;width:3px;height:12px;background:currentColor}
.sizzle-play-symbol{display:block;flex:none}
.sizzle-control img{opacity:.5}
.sizzle-control:hover,.sizzle-control:focus-visible{color:#000}
.sizzle-control:is(:hover,:focus-visible) img{opacity:1}

/* The portrait landing view ends at the reel's lower edge. */
@media(max-width:700px) and (orientation:portrait){
  main{margin-top:max(100px,calc(100svh - var(--header-top) - var(--margin) - var(--expanded-header-height,60px) - (100vw - 2 * var(--margin)) * 797 / 1416))}
}

/* Keep the current decoded frame visible until its successor is ready. */
.tile .project-preview{position:absolute;inset:0;object-fit:contain;background:var(--placeholder-color,#eee);pointer-events:none;opacity:0;transition:none!important}
.tile .project-preview.preview-visible{opacity:1}
.tile .preview-covered{opacity:0;transition:none}

/* Live times use the same type, spacing and divider as the page sections. */
.site-footer{margin-top:120px;border-top:1px solid #000;padding-top:24px}
.footer-clocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0}
.footer-clocks > div{min-width:0;display:flex;flex-direction:column;gap:12px}
.footer-clocks dt,.footer-clocks dd{margin:0;line-height:normal;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.footer-clocks time{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:700px){.site-footer{margin-top:64px}.footer-clocks{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Mobile playback uses the video's native player and its own exit control. */
.mobile-sizzle-play{display:none}
#sizzle-video:fullscreen,.viewer-video:fullscreen{object-fit:contain;background:#000}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){
  #play-sizzle,#sound-sizzle,.video-time{display:none}
  .mobile-sizzle-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(240,240,240,.8);backdrop-filter:blur(4.6px);-webkit-backdrop-filter:blur(4.6px)}
  .mobile-sizzle-play img{width:22px;height:18px}
  .mobile-sizzle-play:focus{outline:none}
  .mobile-sizzle-play:focus-visible{background:#fff}
}


/* Real poster frames stay visible until the video presents a decoded frame. */
.viewer-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.viewer-media{position:relative}
.viewer-media.awaiting-frame{opacity:0;transition:none}
.has-info .viewer-poster{object-fit:cover}
/* Decoded handoffs are atomic; only whole slides animate, never an empty frame. */
.tile > img,.tile > video,.viewer-slide .viewer-media{transition:none}

/* Figma 1614:4206 / 1614:4204: centered percentage, counting in 7% steps. */
.portfolio-loader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100dvh;padding:24px;background:#fff;color:#000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 420ms ease,visibility 420ms}
.portfolio-loading .portfolio-loader{opacity:1;visibility:visible;pointer-events:auto}
.portfolio-loading{overflow:hidden}
.loader-counter{flex:none;max-width:100%;text-align:center}
#loader-percentage{font-size:min(240px,calc((100vw - 48px) / 2.7));font-weight:600;letter-spacing:-.02em;line-height:1.5;text-align:center;text-box-trim:trim-both;text-box-edge:cap alphabetic;white-space:nowrap}
.skip-loader{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));font-size:12px;font-weight:600;letter-spacing:-.48px;color:var(--muted);visibility:hidden}
.skip-loader:hover,.skip-loader:focus-visible{color:#000}
.portfolio-loading.loader-can-skip .skip-loader{visibility:visible}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){.portfolio-loader{padding:max(36px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){#loader-percentage{font-size:min(120px,calc((100vw - 24px) / 2.7))}}
.tile{opacity:1;transition:opacity 700ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),filter 240ms ease-out,scale 180ms ease-out,box-shadow 220ms ease-out}
.tile.is-unrevealed{opacity:0;pointer-events:none}
.tile:focus-visible{opacity:1;transition-delay:0ms}
@media(prefers-reduced-motion:reduce){.tile.is-unrevealed{opacity:1;pointer-events:auto}.portfolio-loader{transition:none}}

/* Mobile navigation expands its softened surface from the Menu button. */
.mobile-menu-open{overflow:hidden}
#mobile-navigation-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#000;font:inherit;letter-spacing:inherit;overflow:auto;overscroll-behavior:contain}
#mobile-navigation-dialog[open]{display:flex;align-items:center;justify-content:center;padding:72px var(--margin)}
#mobile-navigation-dialog::backdrop{background:transparent}
.mobile-menu-surface{position:fixed;inset:0;pointer-events:none;background:rgba(255,255,255,.5);backdrop-filter:blur(80px);-webkit-backdrop-filter:blur(80px);clip-path:circle(0px at var(--menu-origin-x,100%) var(--menu-origin-y,0px));transition:clip-path 700ms cubic-bezier(.22,1,.36,1)}
#mobile-navigation-dialog.is-open .mobile-menu-surface{clip-path:circle(var(--menu-reveal-radius,150vmax) at var(--menu-origin-x,100%) var(--menu-origin-y,0px))}
#mobile-navigation{position:relative;width:fit-content;max-width:100%;margin:0;align-items:center;gap:4px;font-size:32px;font-weight:600;letter-spacing:-.96px;opacity:0;transform:translateY(8px);transition:opacity 240ms ease,transform 360ms cubic-bezier(.22,1,.36,1)}
#mobile-navigation a{display:flex;align-items:center;justify-content:center;min-height:44px;line-height:1.2;text-box-trim:none;color:var(--muted)}
#mobile-navigation a:hover,#mobile-navigation a:focus-visible{color:#000}
#close-mobile-navigation{position:absolute;top:var(--header-top);right:var(--margin);display:grid;place-items:center;width:16px;height:16px;opacity:0;transition:opacity 200ms ease}
#close-mobile-navigation::before{content:"";position:absolute;inset:-16px}
#close-mobile-navigation img{width:16px;height:16px}
#mobile-navigation-dialog.is-open #mobile-navigation,#mobile-navigation-dialog.is-open #close-mobile-navigation{opacity:1;transform:translateY(0);transition-delay:120ms}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){.header.is-compact.is-menu-open #compact-navigation{visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.mobile-menu-surface{transition:none}#mobile-navigation{transform:none}}

/* Contact uses the About type; copying an email never leaves the page. */
.contact-list li{position:relative}
.contact-list button{text-align:left;line-height:inherit}
.email-copy-status:not(:empty){display:inline;margin-left:12px;color:#000;user-select:text;overflow-wrap:anywhere}
.footer-copyright{margin-top:24px;border-top:1px solid #000;padding-top:24px;line-height:1.4;text-box-trim:trim-both;text-box-edge:cap alphabetic}