* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: white; color: black; font-family: "Times New Roman", Times, serif; }
a { color: inherit; } button { color: inherit; font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus { outline: none; }
a, button, [tabindex] { -webkit-tap-highlight-color: transparent; }
.loading { padding: 32px; }
.site-title { margin: 0; line-height: .9; overflow-wrap: anywhere; }
.site-title a { color: inherit; text-decoration: inherit; font: inherit; }
.layout { display: grid; grid-template-columns: var(--sidebar) var(--navigation) minmax(0,1fr) var(--help); grid-template-rows: auto minmax(0,1fr) var(--footer-height); grid-template-areas: "title title media help" "menu arrows media help" "footer footer footer footer"; height: 100vh; height: 100dvh; }
.site-header { grid-area: title; padding: var(--header-padding) var(--header-padding) var(--header-bottom); }
.main-navigation { grid-area: menu; min-height: 0; overflow: auto; padding: 0 var(--menu-padding) var(--menu-padding); scrollbar-width: none; }
.main-navigation::-webkit-scrollbar { display: none; }
.menu { display: flex; flex-direction: column; align-items: flex-start; gap: var(--menu-gap); padding: 0; margin: 0; list-style: none; }
.menu a { display: block; text-decoration: inherit; line-height: 1.05; }
.menu a[aria-current] { font-weight: 700; }
.menu a:hover { text-decoration: underline; }
.plus-section { width: 100%; }
.plus-toggle { display: block; border: 0; padding: 0; background: transparent; text-align: left; line-height: 1.05; }
.plus-toggle:hover { text-decoration: underline; }
.plus-projects.menu { padding: var(--menu-gap) 0 0; }
.mobile-menu .plus-projects.menu { padding-top: var(--menu-link-gap); }
.project-list .plus-projects { padding-top: var(--home-title-to-preview); }
.direction-link, .help-link, .plus-toggle { transform-origin: center; }
.direction-link:active, .help-link:active, .plus-toggle:active, .menu a:active { opacity: .6; }
.direction-navigation { grid-area: arrows; display: grid; grid-template-columns: var(--arrow-size) auto var(--arrow-size); grid-template-areas: ". up ." "left counter right" ". down ."; align-content: start; align-items: center; justify-content: center; justify-items: center; gap: var(--arrow-row-gap) var(--arrow-column-gap); padding: 0 8px 32px; min-width: 0; }
.direction-link { display: grid; place-items: center; width: var(--arrow-size); height: var(--arrow-size); border: 0; padding: 0; background: transparent; }
.direction-link img { display: block; width: 100%; height: 100%; transform: rotate(var(--rotation)); }
.direction-up { grid-area: up; --rotation: 0deg; } .direction-left { grid-area: left; --rotation: -90deg; }
.direction-down { grid-area: down; --rotation: 180deg; } .direction-right { grid-area: right; --rotation: 90deg; }
.counter { grid-area: counter; font-size: var(--counter-size); line-height: 1; white-space: nowrap; }
.media-column { grid-area: media; display: grid; justify-items: center; align-items: start; height: 100%; min-height: 0; min-width: 0; padding: var(--media-padding); overflow: hidden; }
.media-item { position: relative; width: min(100%,600px); min-width: 0; margin: 0; }
.media-item img, .media-item canvas, .media-item video { display: block; width: 100%; height: auto; }
.zoomable { cursor: zoom-in; }
.media-item[data-outline="true"]:not(.video-item), .video-item[data-outline="true"] video, .image-dialog-image[data-outline="true"], .image-dialog-video[data-outline="true"] { box-shadow: 0 0 0 1px black; }
.media-item iframe { display: block; width: 100%; height: auto; border: 0; aspect-ratio: 16/9; }
.help-column { grid-area: help; display: flex; justify-content: center; padding-top: var(--header-padding); min-width: 0; }
.help-link { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid currentColor; border-radius: 50%; line-height: 1; color: inherit; background: white; text-decoration: none; }
.help-link svg { width: 26px; height: 26px; }
.site-footer { grid-area: footer; }
dialog { color: black; background: white; } dialog::backdrop { background: white; }
.info-dialog::backdrop { background: rgba(255,255,255,.82); }
.close { position: fixed; display: grid; place-items: center; width: 44px; height: 44px; top: var(--header-padding,32px); right: max(0px,calc(var(--help,5%) / 2 - 22px)); padding: 0; border: 0; background: white; font-size: var(--close-size,26px); line-height: 1; z-index: 5; }
.info-dialog { aspect-ratio: 4 / 3; width: min(var(--card-width),calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: var(--card-padding); border: 1px solid black; overflow: auto; }
.description { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; gap: 12px; text-align: center; overflow-wrap: anywhere; }
.description p { margin: 0; white-space: pre-wrap; line-height: 1.1; }
.image-dialog, .overview-dialog { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; }
.image-dialog { overflow: hidden; }
.image-dialog-content { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: var(--zoom-padding,32px); overflow: hidden; }
.image-dialog .close, .overview-dialog .close { position: fixed; }
.image-dialog-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; visibility: hidden; cursor: zoom-out; }
.image-dialog-video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; visibility: hidden; }
.image-dialog-embed { display: block; max-width: 100%; max-height: 100%; border: 0; }
.video-viewer-stage { display: flex; flex-direction: column; align-items: center; max-width: 100%; min-width: 0; }
.video-controls { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; min-height: 32px; padding: 4px 0; background: white; color: black; font: 12px/1 "Times New Roman",Times,serif; }
.video-controls button { flex: 0 0 auto; padding: 3px 0; border: 0; background: transparent; font: inherit; }
.video-controls button:hover { text-decoration: underline; }
.video-controls input { flex: 1 1 0; min-width: 0; width: 0; height: 14px; margin: 0; accent-color: black; }
.video-time { font-variant-numeric: tabular-nums; }
.video-error { display: flex; flex-direction: column; justify-content: center; gap: 12px; max-width: 440px; padding: 24px; margin: auto; background: white; text-align: center; }
.video-item .video-error { position: absolute; inset: 0; }
.video-item:fullscreen, .video-viewer-stage:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw !important; height: 100vh !important; background: white; }
.video-item:fullscreen video, .video-viewer-stage:fullscreen video { width: 100% !important; height: calc(100% - 32px) !important; object-fit: contain; }
.gallery-page { min-height: 100dvh; }
.gallery-header { padding: var(--header-padding); padding-right: 80px; }
.gallery-help { position: absolute; top: var(--header-padding); right: 20px; }
.gallery-main { padding: 0 var(--gallery-padding) var(--gallery-padding); }
.masonry { position: relative; min-width: 0; }
.masonry-item { position: absolute; display: block; margin: 0; }
.masonry-item img, .masonry-item canvas, .masonry-item video { display: block; width: 100%; height: auto; }
.overview-project { cursor: pointer; }
.project-preview-placeholder { display: grid; place-items: center; aspect-ratio: 4/3; border: 1px solid black; text-align: center; }
.gif-poster { width: 100%; height: auto; }
.gif-runner { display: none !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gif-item[data-playing="true"] .gif-runner { display: block !important; }
.play-mark { position: absolute; right: 8px; top: 8px; width: 18px; height: 18px; pointer-events: none; }
.play-mark::after { content: ""; display: block; border-left: 8px solid black; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin: 4px 5px; filter: drop-shadow(0 0 1px white); }
.gif-item .play-mark::after { border-left-color: white; filter: drop-shadow(0 0 1px black); }
.gif-item[data-playing="true"] .play-mark { display: none; }
.overview-dialog { overflow: auto; padding: 0; }
.overview-header { position: relative; }
.overview-close-anchor { visibility: hidden; pointer-events: none; }
.mobile-header { padding: max(var(--mobile-header-top),env(safe-area-inset-top)) var(--page-padding) var(--mark-to-content); text-align: center; }
.menu-mark { display: inline-block; margin-top: var(--title-to-mark); line-height: 1; text-underline-offset: 2px; }
.project-list, .project-page { padding: 0 var(--page-padding) calc(var(--bottom-padding) + env(safe-area-inset-bottom)); }
.project { margin: 0 0 var(--home-project-gap); }
.project-title { margin: 0 0 var(--home-title-to-preview); line-height: 1; }
.project-image-link { display: block; } .project-image { display: block; width: 100%; height: auto; }
.mobile-menu { padding: 0 var(--mobile-menu-padding) var(--bottom-padding); }
.mobile-menu .menu { gap: var(--menu-link-gap); }
.mobile-menu a { padding: 5px 0; }
.project-page-title { margin: 0 0 var(--detail-title-to-description); line-height: .95; }
.project-description { margin: 0 0 var(--description-to-year); white-space: pre-wrap; line-height: 1.1; }
.project-year, .project-extra-text { margin: 0; white-space: pre-wrap; line-height: 1.1; }
.info-page .project-description { margin-bottom: var(--info-description-to-extra); }
.project-info { margin-bottom: var(--info-to-media); }
.project-page .media-item { width: 100%; height: auto; margin-bottom: var(--media-gap); }
.project-page .media-item iframe { aspect-ratio: 16/9; }
.next-project { display: block; width: max-content; margin: 40px auto 0; text-decoration: none; font-family: "Times New Roman",Times,serif; font-size: var(--next-size); }
.empty { padding: 24px; text-align: center; }

.info-dialog[open] { display: grid; align-items: center; }

.mobile-menu-page .menu-mark { font-weight: 700; }

.gallery-header.mobile-header { padding: max(var(--mobile-header-top),env(safe-area-inset-top)) var(--page-padding) var(--mark-to-content); }