:root { font-family: Arial, Helvetica, sans-serif; color: #282828; background: #fff; font-synthesis: none; --page-padding: clamp(20px, 2.4vw, 36px); --page-top: clamp(28px, 3.2vw, 48px); --sidebar-width: clamp(140px, 15vw, 190px); --layout-gap: clamp(24px, 3.5vw, 52px); }
* { box-sizing: border-box; }
body { max-width: 1500px; margin: auto; padding: var(--page-top) var(--page-padding) 0; font-size: 15px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
:focus-visible { outline: 2px solid #285c65; outline-offset: 5px; }
[hidden] { display: none !important; }
.site-header { align-self: start; text-align: left; }
.artist-name { display: inline-block; font-size: clamp(24px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.site-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 36px; }
.site-nav a { padding-bottom: 5px; font-weight: 600; }
.site-nav [aria-current] { border-bottom: 1px solid currentColor; }
.site-main, .site-footer { grid-column: 2; min-width: 0; }
.collection { margin-top: 0; }
.art-grid { list-style: none; column-gap: 30px; margin: 0; padding: 0; }
.art-card { display: flow-root; break-inside: avoid; min-width: 0; margin-bottom: 30px; }
.art-image { position: relative; display: block; background: #fff; }
.art-image img { display: block; width: 100%; height: auto; transition: opacity .18s ease; }
.art-image:hover img { opacity: .88; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 26px; padding-bottom: 32px; border-top: 1px solid #ededed; color: #888; font-size: 12px; }
.back-link { display: inline-block; margin: 0 0 32px; color: #777; font-size: 13px; }
.work-pager { position: fixed; top: 50%; left: calc(max(0px, (100vw - 1500px) / 2) + 238px); right: max(6px, calc((100vw - 1500px) / 2 + 2px)); display: flex; justify-content: space-between; pointer-events: none; z-index: 2; transform: translateY(-50%); }
.work-pager-link { display: grid; place-items: center; width: 40px; height: 48px; pointer-events: auto; background: rgb(255 255 255 / 85%); border-radius: 3px; font-size: 36px; line-height: 1; }
.work-pager-link:hover { text-decoration: none; background: #fff; }
.work-pager-link-next { margin-left: auto; }
.work-images[data-work-navigation] { touch-action: pan-y pinch-zoom; transform: translateX(var(--swipe-offset, 0)); transition: transform 160ms ease-out; }
.work-images.is-swiping { transition: none; user-select: none; }
.work-detail { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
.work-artwork { min-width: 0; }
.detail-image { display: block; margin-bottom: 32px; }
.detail-image img { display: block; max-width: 100%; width: auto; height: auto; max-height: 78vh; margin: auto; object-fit: contain; }
.work-information h1 { font-size: 25px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 10px; }
.detail-date { margin: 0 0 28px; color: #777; }
dl { margin: 0; }
dl div { margin-top: 24px; }
dt { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #999; margin-bottom: 5px; }
dd { margin: 0; font-size: 14px; color: #555; }
.work-thumbnails { display: flex; justify-content: center; align-items: center; gap: clamp(6px, 2vw, 18px); width: 100%; margin: 32px 0 0; padding: 18px 0; }
.work-thumbnail { display: grid; place-items: center; flex: 0 1 92px; min-width: 44px; aspect-ratio: 1; padding: 6px; background: #fff; }
.work-thumbnail img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.work-thumbnail-current { box-shadow: 0 3px 18px rgb(0 0 0 / 15%); outline: 1px solid #f1f1f1; }
.work-thumbnail-current img { opacity: .6; }
.about-page { max-width: 680px; min-height: 35vh; margin: 0; }
.about-page h1 { font-size: 25px; font-weight: 500; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 10px; left: 10px; padding: 10px; background: #fff; z-index: 10; }
@media (prefers-reduced-motion: reduce) { .work-images[data-work-navigation] { transition: none; } }
@media (prefers-reduced-motion: reduce) { .art-image img { transition: none; } }
.detail-image[data-open-image] { cursor: zoom-in; }
.image-viewer { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; background: rgb(255 255 255 / 98%); color: #282828; overflow: hidden; overscroll-behavior: contain; }
.image-viewer::backdrop { background: rgb(0 0 0 / 45%); }
.image-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.image-viewer-zoom { display: flex; align-items: center; gap: 6px; }
.image-viewer button { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid #ddd; border-radius: 5px; background: white; color: #282828; font-size: 22px; }
.image-viewer button:disabled { color: #bbb; cursor: default; }
.image-viewer [data-zoom-reset] { font-size: 13px; padding: 0 14px; margin-left: 8px; }
.image-viewer [data-zoom-level] { min-width: 52px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.image-viewer .image-viewer-close { border: 0; font-size: 32px; }
.image-viewer-stage { position: absolute; inset: 80px 24px 58px; overflow: hidden; touch-action: none; user-select: none; }
.image-viewer-stage.is-zoomed { cursor: grab; }
.image-viewer-stage.is-zoomed:active { cursor: grabbing; }
.image-viewer-stage img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.image-viewer-help { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; text-align: center; font-size: 12px; color: #777; margin: 0; pointer-events: none; }