:root { --paper: #f6f1e8; --ink: #45443f; --muted: #8b8981; --rule: rgba(69, 68, 63, 0.21); --text-wordmark: 22px; --text-body: 18px; --text-small: 14px; --text-detail: 13px; --text-tiny: 11px; --text-mobile-label: 16px; --text-mobile-body: 14px; --header-compact-spacing: 16px; --footer-optical-spacing: 23px; --footer-type-growth: 0.5714; --footer-row-shift: calc((var(--text-wordmark) - var(--text-small)) * 1.32); --gutter: 38px; --gutter-2x: 80px; --grid-gap: clamp(8px, 1vw, 16px); --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); --ease-settle: cubic-bezier(0.33, 0, 0.2, 1); --reveal-duration: 0.65s; --expand: 0; --footer-expand: 0; --footer-start-height: 0px; --footer-rest-height: 0px; --header-start-height: 0px; --about-height: 12em; --expand-scroll: 65svh; --slide-scroll: 46svh; --gallery-slides: 0; } * { box-sizing: border-box; } html { height: 100%; width: 100%; max-width: 100%; scroll-behavior: auto; overscroll-behavior-y: none; background: var(--paper); scrollbar-gutter: stable; } /* Subset WOFF2 (Latin + accents + punctuation) generated from the OTF. Preloaded in index.html; the page reveal waits for it, so `block` keeps fallback type from ever flashing. */ @font-face { font-family: "Fournier"; src: url("fonts/versioned/fournier.8f8338afc83bd93d.woff2") format("woff2"); font-display: swap; } body { height: 100%; width: 100%; max-width: 100%; margin: 0; overscroll-behavior-y: none; background: var(--paper); color: var(--ink); font-family: "Fournier", serif; font-size: var(--text-body); font-weight: 400; line-height: 1.32; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { color: inherit; font: inherit; } ::selection { background: #d6d0c2; } /* Horizontal clipping lives here, not on /. A non-visible overflow on the root element propagates to the viewport, and iOS Safari then loses vertical scrolling entirely. */ .scroll-root { height: 100%; width: 100%; max-width: 100%; overflow-x: clip; } .site-shell { display: grid; grid-template-rows: auto 1fr auto; width: 100%; max-width: 100%; height: 100vh; height: 100svh; padding: var(--gutter); /* `clip` rather than `hidden`: `hidden` makes a scroll container, and on iOS a touch that starts inside one is swallowed instead of scrolling the page. `clip` crops identically without creating one. */ overflow: hidden; overflow: clip; } .page-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); width: 100%; margin-inline: auto; } .site-header { align-items: first baseline; height: 100%; min-height: 0; padding-bottom: calc( var(--gutter-2x) - (var(--gutter-2x) - var(--header-compact-spacing)) * var(--expand) ); } .wordmark { grid-column: 1 / span 3; grid-row: 1; width: max-content; font-size: var(--text-wordmark); line-height: 22px; letter-spacing: 0.04em; text-transform: uppercase; } .about-slot { grid-column: 5 / span 6; grid-row: 1; min-width: 0; min-height: 0; height: calc(var(--about-height) * (1 - var(--expand) * 0.88)); } /* "Art Advisor" sits where the bio was, on the wordmark's baseline, and fades in only after the about group has collapsed (see .about-collapsed). */ .role { grid-column: 5 / -1; grid-row: 1; width: max-content; margin: 0; font-size: var(--text-body); line-height: 1.2; letter-spacing: -0.012em; opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease-settle); } .about-collapsed .role { opacity: 1; transition-duration: 1100ms; } .about-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--grid-gap); /* Same font-size + line-height → top-aligning line boxes = shared baseline */ align-items: start; min-width: 0; opacity: calc(1 - var(--expand)); will-change: opacity; } .section-label, .introduction { will-change: scale; } .section-label { grid-column: 1 / span 2; width: max-content; margin: 0; padding: 0; font-size: var(--text-body); line-height: 22px; scale: calc(1 - var(--expand) * 0.88); transform-origin: left top; } .footer-email:hover { opacity: 0.52; } .introduction { grid-column: 3 / span 4; margin: 0; padding: 0; font-size: var(--text-body); line-height: 1.2; letter-spacing: -0.012em; scale: calc(1 - var(--expand) * 0.88); transform-origin: left top; } .introduction p { margin: 0; } .introduction p + p { margin-top: 0.6em; } .gallery-section { position: relative; container-type: size; grid-template-rows: minmax(0, 1fr); align-items: stretch; height: 100%; min-height: 0; padding: 28px 0; } .gallery-section::before, .gallery-section::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); opacity: 0; pointer-events: none; animation: rule-reveal var(--reveal-duration) var(--ease-settle) 1800ms both; animation-play-state: paused; } .gallery-section::before { top: 0; } .gallery-section::after { bottom: 0; } .is-ready .gallery-section::before, .is-ready .gallery-section::after { animation-play-state: running; } .gallery-meta { grid-column: 5 / span 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; height: auto; min-height: 0; min-width: 0; padding-right: 8px; position: relative; z-index: 2; } .gallery-copy { display: grid; } .gallery-copy-layer { grid-area: 1 / 1; opacity: 0; will-change: opacity; } .gallery-copy-layer--active { z-index: 1; opacity: 1; } .artwork-title { margin: 0; font-size: var(--text-small); font-style: italic; letter-spacing: 0.005em; } .artwork-detail { margin: 5px 0 0; color: var(--muted); font-size: var(--text-detail); letter-spacing: 0.015em; } .gallery-navigation { display: flex; align-items: end; justify-content: space-between; gap: 16px; } .gallery-buttons { display: flex; gap: 12px; } .gallery-button { display: grid; width: 18px; height: 18px; padding: 0; place-items: center; border: 0; background: transparent; cursor: pointer; line-height: 0; opacity: 0.72; transition: opacity 280ms ease; } /* Inline SVG arrows: Fournier has no arrow glyphs, so the ← → outlines from a Times-metric serif are embedded at their 14px size, identical on every OS. */ .gallery-button svg { display: block; /* The glyph outline alone (no side bearings) at a 19px em, so the left arrow's tip sits exactly on the column edge and the right one ends on the button's right edge. 8.29 x 3.28 at 14px -> x 19/14. */ width: 11.25px; height: 4.45px; fill: currentColor; } .gallery-button:first-child { justify-items: start; } .gallery-button:last-child { justify-items: end; } .gallery-button:hover { opacity: 1; } .gallery-button:active { opacity: 0.45; } .gallery-button:focus-visible, a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; } .gallery-count { color: var(--muted); font-size: var(--text-tiny); letter-spacing: 0.14em; } .artwork-frame { grid-column: 7 / -1; grid-row: 1; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; overflow: clip; } .artwork-crop { position: relative; width: min(100%, calc(100cqh * 1220 / 1690)); height: auto; max-height: 100%; aspect-ratio: 1220 / 1690; overflow: hidden; overflow: clip; /* The artwork is what a thumb lands on. Always treat a drag here as page scrolling; slide changes come from the shared scroll timeline or arrows. */ touch-action: pan-y pinch-zoom; background: #ded8c9; user-select: none; isolation: isolate; backface-visibility: hidden; transform-origin: top left; will-change: transform; } /* Footer phase: freeze the artwork's layout box at its rest size and fit it continuously into the shrinking gallery frame on the compositor. This avoids per-frame layout or image re-rasterisation on desktop and iOS. */ .footer-phase .artwork-crop { width: var(--artwork-rest-width); max-width: none; height: var(--artwork-rest-height); max-height: none; scale: calc(1 - (1 - var(--artwork-end-scale, 1)) * var(--footer-expand, 0)); } .artwork-image { position: absolute; inset: 0; opacity: 0; visibility: hidden; } .artwork-image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; } .artwork-image--active { z-index: 1; opacity: 1; visibility: visible; } /* The outgoing layer stays paintable only for the duration of its fade. All other inactive layers are visibility-hidden, which prevents occasional Firefox compositor flashes of their otherwise transparent images. */ .artwork-image--outgoing { visibility: visible; } /* If the page had to reveal before the first artwork arrived, fade it in. */ .artwork-image img { transition: opacity 0.7s var(--ease-settle); } .awaiting-artwork .artwork-image--active img { opacity: 0; transition: none; } /* Only the two layers participating in a fade are promoted. The other fixed slide layers remain hidden and cost no compositing work. */ .artwork-image--active, .artwork-image--outgoing { will-change: opacity; } .can-crossfade .artwork-image, .can-crossfade .gallery-copy-layer { transition: opacity 0.42s var(--ease-premium); } .gallery-hint { position: absolute; right: 0; bottom: 5.6px; margin: 0; color: var(--muted); font-size: var(--text-tiny); letter-spacing: 0.1em; opacity: 0.58; text-transform: uppercase; } .site-footer { align-items: baseline; align-content: start; contain: layout paint; grid-template-rows: auto auto; row-gap: 6px; height: auto; min-height: 0; padding-top: var(--footer-optical-spacing); font-size: var(--text-small); line-height: 1.32; } .site-footer > * { scale: calc(1 + var(--footer-type-growth) * var(--footer-expand)); transform-origin: left top; } .has-footer-metrics .site-footer { height: calc( var(--footer-start-height) + (var(--footer-rest-height) - var(--footer-start-height)) * var(--expand) + (var(--header-start-height) - var(--footer-rest-height)) * var(--footer-expand) ); } .footer-label--contact { grid-column: 5 / span 2; grid-row: 1; } .footer-email { grid-column: 7 / span 3; grid-row: 1; width: max-content; transition: opacity 350ms ease; } .footer-label--locations { grid-column: 5 / span 2; grid-row: 2; translate: 0 calc(var(--footer-row-shift) * var(--footer-expand)); } .footer-cities { grid-column: 7 / span 3; grid-row: 2; margin: 0; line-height: 1.32; translate: 0 calc(var(--footer-row-shift) * var(--footer-expand)); } .reveal { --reveal-delay: 0ms; opacity: 0; animation: page-reveal var(--reveal-duration) var(--ease-settle) var(--reveal-delay) both; animation-play-state: paused; } .is-ready .reveal { animation-play-state: running; } /* Once every entrance animation has finished, drop them entirely so the scroll-linked restyles no longer have to consult a finished animation. */ .is-settled .reveal, .is-settled .gallery-section::before, .is-settled .gallery-section::after { animation: none; opacity: 1; } @keyframes page-reveal { 0% { opacity: 0; transform: translateY(9px); } 35% { opacity: 0.55; } 100% { opacity: 1; transform: none; } } @keyframes rule-reveal { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 1300px) { .about-slot { grid-column: 5 / -1; } .about-group { grid-template-columns: repeat(8, minmax(0, 1fr)); } .introduction { grid-column: 3 / span 6; } .artwork-frame { grid-column: 7 / span 6; overflow: hidden; overflow: clip; } .artwork-crop { width: min(100%, calc(100cqh * 1220 / 1690)); height: auto; transform: none; } } @media (max-width: 800px) { :root { --gutter: 20px; --grid-gap: 10px; } .site-header { grid-template-rows: auto auto; align-content: center; align-items: start; row-gap: calc(11px * (1 - var(--expand))); padding: 2px 0 calc( var(--gutter-2x) - (var(--gutter-2x) - var(--header-compact-spacing)) * var(--expand) ); } .wordmark { grid-column: 1 / -1; grid-row: 1; padding-bottom: 10px; align-self: first baseline; } .role { grid-column: 1 / -1; justify-self: end; align-self: first baseline; font-size: var(--text-mobile-body); line-height: 18px; } .about-slot { grid-column: 1 / -1; grid-row: 2; } .about-group { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: first baseline; } .section-label { grid-column: 1 / span 3; font-size: var(--text-mobile-label); line-height: 20px; } .introduction { grid-column: 4 / -1; font-size: 16px; line-height: 20px; } .gallery-section { /* Safari can mis-size auto grid rows inside a size-contained element, pushing the caption and controls through the bottom rule. The desktop container query is not needed for the stacked phone composition. */ container-type: normal; grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; padding: 18px 0 14px; } .artwork-frame { grid-column: 1 / -1; grid-row: 1; justify-content: center; max-width: none; overflow: hidden; overflow: clip; } .gallery-meta { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-start; gap: 11px; height: auto; min-height: 0; padding: 0; align-self: stretch; } .gallery-navigation { align-items: center; justify-content: space-between; gap: 22px; } .gallery-buttons { gap: 14px; } .gallery-button { width: 20px; height: 20px; } .artwork-crop { width: auto; max-width: 100%; height: 100%; max-height: 100%; transform: none; } .gallery-hint { bottom: 4px; } .site-footer { align-content: start; row-gap: 6px; padding: var(--footer-optical-spacing) 0 20px; } .site-footer > * { min-width: 0; max-width: 100%; scale: none; font-size: calc( var(--text-small) + (var(--text-wordmark) - var(--text-small)) * var(--footer-expand) ); line-height: 1.32; } .footer-label--contact, .footer-label--locations { grid-column: 1 / span 3; } .footer-email, .footer-cities { grid-column: 6 / -1; width: 100%; } .footer-email { overflow-wrap: anywhere; } .footer-cities { overflow-wrap: normal; word-break: normal; } } @media (max-width: 480px) { .section-label { grid-column: 1 / span 4; } .introduction { grid-column: 5 / -1; } .footer-label--contact, .footer-label--locations { grid-column: 1 / span 4; } .footer-email, .footer-cities { grid-column: 5 / -1; } } html, body { height: auto; min-height: 100%; } .scroll-root { height: calc(100svh + var(--expand-scroll) + (var(--gallery-slides) * var(--slide-scroll))); } .site-shell { position: sticky; top: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* On phones the biography has no label. Footer labels occupy columns 1–3, column 4 stays empty, and their text starts in column 5. */ @media (max-width: 800px) { .section-label { display: none; } .introduction { grid-column: 1 / -1; } .footer-label { grid-column: 1 / span 3; } .footer-email, .footer-cities { grid-column: 5 / -1; } } /* Stable caption geometry prevents the image from jumping between works. */ .gallery-copy { position: relative; } .gallery-copy-layer { position: absolute; inset: 0; } .gallery-copy-layer.caption-measure { position: relative; inset: auto; visibility: hidden; height: auto; } .gallery-status { margin: 8px 0 0; font-size: var(--text-detail); } .gallery-status:empty { display: none; } .gallery-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gallery-loaded .gallery-fallback { display: none; } /* Readable HTML is the fallback; enhancement never gates visibility. */ .reveal { opacity: 1; animation: none; } .is-ready.enhanced .reveal { animation: page-reveal var(--reveal-duration) var(--ease-settle) var(--reveal-delay) both; } .is-settled.enhanced .reveal { animation: none; } .gallery-section::before, .gallery-section::after { opacity: 1; animation: none; } /* Keep the phone image row independent of its frozen footer-phase image. */ @media (max-width: 800px) { .enhanced:not(.flow-layout) .gallery-section { grid-template-rows: minmax(0, 1fr) auto; } .enhanced:not(.flow-layout) .artwork-frame { position: relative; container-type: size; } .enhanced:not(.flow-layout) .artwork-crop { position: absolute; top: 0; left: 0; width: min(100%, calc(100cqh * 1220 / 1690)); height: auto; max-width: 100%; aspect-ratio: 1220 / 1690; } .enhanced.footer-phase:not(.flow-layout) .artwork-crop { width: var(--artwork-rest-width); height: var(--artwork-rest-height); max-width: none; } } /* Short screens and unenhanced pages use an ordinary document layout. */ .site-shell:not(.enhanced), .site-shell.flow-layout { position: relative; height: auto; min-height: 100svh; overflow: visible; grid-template-rows: auto auto auto; } .scroll-root:has(.site-shell:not(.enhanced)), .scroll-root:has(.flow-layout) { height: auto; } .site-shell:not(.enhanced) .site-header, .flow-layout .site-header { padding-bottom: 28px; } .site-shell:not(.enhanced) .about-slot, .flow-layout .about-slot { height: auto; } .site-shell:not(.enhanced) .gallery-section, .flow-layout .gallery-section { container-type: normal; height: auto; grid-template-rows: auto auto; row-gap: 16px; } .site-shell:not(.enhanced) .artwork-frame, .flow-layout .artwork-frame { grid-column: 1 / -1; grid-row: 1; height: auto; } .site-shell:not(.enhanced) .artwork-crop, .flow-layout .artwork-crop { position: relative; width: min(100%, 440px); height: auto; max-height: none; aspect-ratio: 1220 / 1690; scale: none; } .site-shell:not(.enhanced) .gallery-meta, .flow-layout .gallery-meta { grid-column: 1 / -1; grid-row: 2; gap: 14px; } .site-shell:not(.enhanced) .site-footer, .flow-layout .site-footer { height: auto; } .site-shell:not(.enhanced) .gallery-buttons { display: none; } .site-shell:not(.enhanced) .gallery-copy-layer--active { position: relative; } @media (prefers-reduced-motion: reduce) { .is-ready.enhanced .reveal { animation: none; } } .enhanced .gallery-fallback { display: none; } /* Each original is fitted inside the stable gallery space without cropping. */ .site-shell .artwork-frame .artwork-crop { width: 100%; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: auto; background: transparent; } .site-shell.footer-phase:not(.flow-layout) .artwork-frame .artwork-crop { width: var(--artwork-rest-width); height: var(--artwork-rest-height); max-width: none; max-height: none; } .artwork-image img, .gallery-fallback { object-fit: contain; object-position: left top; } .artwork-detail { white-space: pre-line; } .site-shell.flow-layout .artwork-frame, .site-shell:not(.enhanced) .artwork-frame { width: min(100%, 440px); aspect-ratio: 1220 / 1690; } .site-shell.flow-layout .artwork-frame .artwork-crop, .site-shell:not(.enhanced) .artwork-frame .artwork-crop { position: absolute; inset: 0; } .site-shell.flow-layout .artwork-frame, .site-shell:not(.enhanced) .artwork-frame { position: relative; } /* Full-width artwork in document flow keeps every original proportion. */ .site-shell.flow-layout .artwork-frame { width: 100%; aspect-ratio: var(--artwork-ratio, 3 / 2); align-self: start; } .site-shell.flow-layout .gallery-copy-layer--active { position: relative; } @media (max-width: 800px) { .site-shell:not(.enhanced) .artwork-frame { width: 100%; aspect-ratio: 3 / 2; } } /* Phone artwork gets the space left by this caption, inside one screen. */ @media (max-width: 800px) { .site-shell.enhanced .artwork-frame { align-self: stretch; aspect-ratio: auto; } .site-shell.enhanced .artwork-frame .artwork-crop { width: 100%; height: 100%; max-width: 100%; max-height: 100%; scale: none; aspect-ratio: auto; } } /* Keep phone geometry fixed and complete one desktop-style dissolve at a time. */ @media (max-width: 800px) { .site-shell.enhanced .gallery-copy-layer { position: absolute; } .site-shell.enhanced .gallery-copy-layer.caption-measure { position: relative; } .site-shell.enhanced .artwork-image { transition: opacity 0.42s var(--ease-premium); transition-duration: 0.42s !important; } } /* The full image fits the smoothly changing footer space at every frame. */ .site-shell.enhanced.footer-phase:not(.flow-layout) .artwork-frame .artwork-crop { width: 100%; height: 100%; max-width: 100%; max-height: 100%; scale: none; } /* The role fades after the smoothed introduction collapses, in either motion setting. */ .site-shell .role { transition: opacity 1100ms var(--ease-settle); transition-duration: 1100ms !important; } /* Keep footer information anchored below the divider as it rises. */ @media (max-width: 800px) { .site-shell .site-footer { align-content: start; } } /* Final mobile spacing: captions sit above the controls; remove duplicate bottom padding. */ @media (max-width: 800px) { .site-shell.enhanced .gallery-copy-layer:not(.caption-measure) { display: flex; flex-direction: column; justify-content: flex-end; } .site-shell.enhanced:not(.flow-layout) { padding-bottom: env(safe-area-inset-bottom, 0px); } .site-shell .site-footer { padding-bottom: 0; } } /* Fit each mobile artwork down to its own bottom-aligned caption. */ @media (max-width: 800px) { .site-shell.enhanced .artwork-frame, .site-shell.enhanced .artwork-frame .artwork-crop { overflow: visible; } .site-shell.enhanced .artwork-image { bottom: auto; height: max(0px, calc(100% + var(--caption-space, 0px))); overflow: hidden; } } /* Narrow desktop windows need their own buffer below the footer. */ @media (max-width: 800px) and (hover: hover) and (pointer: fine) { .site-shell.enhanced:not(.flow-layout) { padding-bottom: max(var(--footer-optical-spacing), env(safe-area-inset-bottom, 0px)); } }