:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #191919;
  background: #fff;
  font-synthesis: none;
  /* app.js maps design pixels to screen pixels, accounting for display density. */
  --project-unit: 1px;
  --collection-unit: 1px;
  --collection-ui-unit: 1px;
  --ui-unit: 1px;
  --project-gutter: 65px;
  --copy-width: calc(900 * var(--project-unit));
  --media-width: calc(1125 * var(--project-unit));
  --column-gap: calc(90 * var(--project-unit));
  --project-width: calc(var(--copy-width) + var(--column-gap) + var(--media-width));
  --image-gap: calc(15 * var(--project-unit));
  --photo-height: calc(830 * var(--project-unit));
  --drawing-height: calc(752 * var(--project-unit));
  --menu-height: 96px;
  --menu-font-size: 15.6px;
  --header-menu-font-size: 15.6;
  --header-unit: 1px;
  --rule-major: 2px;
  --rule-minor: 1px;
  --nav-underline-gap: 3px;
  --viewer-duration: 560ms;
  --hover-ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
/* Reserve the same gutter on short and long pages, including open viewers. */
html { scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
button:disabled { opacity: .3; cursor: default; }
/* Touch/clicks stay clear; keyboard navigation retains a neutral focus ring. */
:where(button, a, select, [tabindex]):focus:not(:focus-visible) { outline: none; }
button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #191919; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Center the tallest text as before, then align the smaller menu to its baseline. */
header { position: sticky; top: 0; z-index: 20; background: #fff; height: var(--menu-height); width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: baseline; padding: 0 50px; gap: calc(35 * var(--header-unit)); }
/* Keep the menu's layout fixed while the name blurs on click. */
.wordmark { position: relative; font-size: calc(31.68 * var(--header-unit)); font-weight: 700; letter-spacing: calc(-.96 * var(--header-unit)); }
.wordmark-label { display: inline-block; }
nav { display: flex; align-items: baseline; gap: calc(34 * var(--header-unit)); margin-left: auto; font-size: calc(var(--header-menu-font-size) * var(--header-unit)); font-weight: 700; }
nav button { padding: 0; font-weight: inherit; }
nav a.active { text-decoration: none; }
.nav-work > [data-nav], nav > a[data-nav] { display: block; position: relative; white-space: nowrap; }
.nav-work { position: relative; z-index: 10; }
.nav-work::after { content: ''; position: absolute; top: 100%; right: 0; width: 100%; height: calc(var(--nav-underline-gap) + var(--rule-major)); }
/* Rules keep their CSS-pixel weight as the surrounding layout and type shrink. */
.work-menu-line, nav > a[data-nav]::after { position: absolute; top: calc(100% + var(--nav-underline-gap)); right: 0; height: var(--rule-major); background: #000; pointer-events: none; }
nav > a[data-nav]::after { content: ''; width: 0; transition: width 135ms cubic-bezier(.22,.7,.3,1); }
nav > a[data-nav].active::after { width: 100%; }
nav > a[data-nav]:focus-visible::after { width: 100%; transition-duration: 190ms; }
@media (hover: hover) {
  nav > a[data-nav]:hover::after { width: 100%; transition-duration: 190ms; }
}
.work-menu-line { width: 0; z-index: 1; }
.nav-work:has(.active) .work-menu-line { width: 100%; }
.nav-work.is-open .work-menu-line { width: var(--work-menu-width, 104px); }
.category-menu { position: absolute; top: calc(100% + var(--nav-underline-gap) + var(--rule-major)); right: 0; z-index: 10; min-width: 0; width: max-content; background: white; padding: 0; overflow: hidden; border: 0; box-shadow: none; }
.category-menu[aria-hidden="true"] { pointer-events: none; }
.category-menu-sheet { display: flow-root; }
.category-menu[hidden] { display: none; }
.category-menu a, .category-menu button { display: block; white-space: nowrap; padding: 8px 10px; }
.category-menu a:hover, .category-menu a:focus-visible, .category-menu button:hover, .category-menu button:focus-visible { background: #000; color: #fff; }
main { min-height: calc(100dvh - var(--menu-height)); }
.pull-refresh { display: none; }
.splash-page { min-height: calc(100dvh - var(--menu-height)); display: grid; place-items: center; padding: 24px; }
.splash-filters { position: absolute; pointer-events: none; overflow: hidden; }
.splash-polaroid {
  /* Preserve the existing photograph size (including the visitor's display
     scaling). The paper is added outside the image, not inside its square. */
  --splash-size: min(600px, calc((100vw - 48px) * 744 / 904), max(0px, calc(100dvh - var(--menu-height) - 48px)));
  --polaroid-height: calc(var(--splash-size) * 1064 / 744);
  /* Previous 15% lift plus another 20%, moving the paper and photograph
     together. Keep the entire top edge below the fixed menu. */
  --splash-lift: min(calc(var(--splash-size) * .35), max(0px, calc((100dvh - var(--menu-height) - var(--polaroid-height)) / 2 - 24px)));
  position: relative; width: calc(var(--splash-size) * 904 / 744);
  height: var(--polaroid-height); isolation: isolate;
  transform: translateY(calc(-1 * var(--splash-lift)));
}
.splash-frame {
  /* The measured opening spans x83..828 and y83..829 in the 904x1064 PNG.
     A two-pixel bleed hides its gently uneven, partly transparent edges. */
  position: absolute; left: calc(81 / 904 * 100%); top: calc(81 / 1064 * 100%);
  width: calc(750 / 904 * 100%); height: calc(750 / 1064 * 100%);
  overflow: hidden; isolation: isolate;
  /* Photoshop approximation: Outer Bevel / Chisel Hard / Down, depth 100%,
     size 1px, soften 0px, light 25deg at altitude 45deg. The opposing hard
     edges use the light's unit direction (cos 25deg, -sin 25deg).
     Black at 9% and white at 50% equal Multiply and Screen respectively. */
  box-shadow: .90631px -.42262px 0 0 rgb(0 0 0 / .09),
              -.90631px .42262px 0 0 rgb(255 255 255 / .5);
}
.splash-frame::after {
  /* Inner Shadow: Multiply, black 10%, distance 0, choke 0, size 4px.
     This overlay sits above both image layers throughout their dissolve. */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 4px 0 rgb(0 0 0 / .1); mix-blend-mode: multiply;
}
.splash-frame:focus-visible::after { outline: 2px solid #191919; outline-offset: -5px; }
.splash-slide { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; pointer-events: none; }
.splash-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.splash-image-soft { mask-image: radial-gradient(ellipse at center, transparent var(--film-edge-start, 50%), #000 94%); }
.splash-film-layer { position: absolute; inset: 0; pointer-events: none; }
.splash-film-development, .splash-film-grain { mix-blend-mode: soft-light; }
.splash-film-vignette { mix-blend-mode: multiply; }
.splash-film-leak { mix-blend-mode: screen; }
.splash-film-expressive-light { mix-blend-mode: screen; }
.splash-polaroid-paper { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.splash-polaroid.layout-in-motion .splash-image { scale: var(--resize-image-x, 1) var(--resize-image-y, 1); }
/* Collections use the same 80% reflow/hold/scale rule as project pages. */
.collection-stage { width: calc(100% - 130px); margin-inline: auto; overflow-x: clip; padding-bottom: calc(24 * var(--collection-ui-unit)); }
.work-page { width: calc(2730 * var(--collection-unit)); max-width: 100%; margin-inline: auto; }
.index-intro { display: flex; justify-content: space-between; align-items: end; padding: calc(75 * var(--collection-ui-unit)) 0 calc(55 * var(--collection-ui-unit)); }
.index-intro h1 { font-size: calc(120 * var(--collection-ui-unit)); line-height: .9; letter-spacing: -.075em; font-weight: 700; margin: 0; }
.index-intro h1 a { display: inline-block; }
.filters { display: flex; align-items: center; gap: calc(20 * var(--collection-ui-unit)); padding: 0 0 calc(20 * var(--collection-ui-unit)); flex-wrap: wrap; }
.category-filters { display: flex; align-items: center; gap: calc(7 * var(--collection-ui-unit)); flex-wrap: wrap; }
.category-filters button { border: 1px solid transparent; border-radius: 0; padding: calc(9 * var(--collection-ui-unit)) calc(16 * var(--collection-ui-unit)); font-size: calc(13 * var(--collection-ui-unit)); font-weight: 700; }
.category-filters button.active { background: #191919; color: white; border-color: #191919; }
.work-tools { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: calc(20 * var(--collection-ui-unit)); flex-wrap: wrap; max-width: 100%; font-size: calc(12 * var(--collection-ui-unit)); }
.filters .count { color: #777; white-space: nowrap; }
.sort-control { --sort-inset: 8px; position: relative; min-width: 0; white-space: nowrap; }
.sort-control.is-open { z-index: 12; }
.sort-trigger { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--collection-ui-unit)); font: inherit; color: inherit; background: #fff; border: 0; border-bottom: var(--rule-minor) solid #000; border-radius: 0; padding: calc(5 * var(--collection-ui-unit)) 0; max-width: 100%; }
.sort-menu-line { position: absolute; left: 0; bottom: calc(-1 * var(--rule-minor)); width: 100%; height: var(--rule-minor); background: #000; pointer-events: none; }
.sort-control.is-open .sort-menu-line { left: calc(-1 * var(--sort-inset)); width: var(--sort-menu-width, 100%); }
.sort-chevron { display: block; flex: none; width: calc(10 * var(--collection-ui-unit)); height: calc(6 * var(--collection-ui-unit)); overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sort-menu { position: absolute; top: 100%; left: calc(-1 * var(--sort-inset)); min-width: calc(100% + var(--sort-inset)); width: max-content; overflow: hidden; background: #fff; z-index: 12; }
.sort-menu[hidden] { display: none; }
.sort-menu[aria-hidden="true"] { pointer-events: none; }
.sort-menu-sheet { display: flow-root; }
.sort-option { display: block; width: 100%; padding: 10px var(--sort-inset, 8px); font: inherit; font-weight: 400; text-align: left; white-space: nowrap; border-radius: 0; }
.sort-menu .sort-option[aria-selected="true"] { background: #000; color: #fff; }
.sort-menu:has(.sort-option:focus) .sort-option, .sort-menu:has(.sort-option:hover) .sort-option { background: #fff; color: inherit; }
.sort-menu:has(.sort-option:focus):not(:has(.sort-option:hover)) .sort-option:focus,
.sort-menu:has(.sort-option:hover) .sort-option:hover { background: #000; color: #fff; }
.sort-option:hover, .sort-option:focus-visible { background: #000; color: #fff; outline: none; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(15 * var(--collection-unit)); }
.all-work-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #000; font-size: calc(15.6 * var(--collection-ui-unit)); line-height: 1.595; }
/* Year and Project occupy 40%; four measured detail tracks share the other 60%. */
.all-work-table .work-year { width: calc(145 * var(--collection-ui-unit)); }
.all-work-table .work-title { width: calc(40% - 145 * var(--collection-ui-unit)); }
.all-work-table col:nth-child(n+3) { width: 15%; }
.mep-work { margin-top: calc(2 * var(--work-row-height, 51.282px)); }
.mep-work h2 { margin: 0 0 calc(12 * var(--collection-ui-unit)); font-size: calc(15.6 * var(--collection-ui-unit)); font-weight: 700; line-height: 1.45; }
/* Increase line spacing and vertical padding by 10%, without scaling rules. */
.all-work-table th, .all-work-table td { text-align: left; vertical-align: top; padding: calc(13.2 * var(--collection-ui-unit)) calc(16 * var(--collection-ui-unit)) calc(13.2 * var(--collection-ui-unit)) 0; overflow-wrap: anywhere; }
.all-work-table th { font-weight: 700; }
.all-work-table th:last-child, .all-work-table td:last-child { padding-right: 0; }
.all-work-table th:first-child, .all-work-table td:first-child { white-space: nowrap; }
.all-work-table thead tr, .all-work-table tbody tr:last-child { border-bottom: var(--rule-major) solid #000; }
.all-work-table tbody tr { border-bottom: var(--rule-minor) solid #000; }
.all-work-table tbody tr[data-published="false"] > td > span { opacity: .5; }
.all-work-table tbody tr[data-published="false"]:not(:last-child) { border-bottom-color: rgb(0 0 0 / .5); }
.all-work-table tr[data-project] { cursor: pointer; }
.all-work-table a { font-weight: 700; }
.all-work-table a:focus-visible { outline-offset: 2px; }
html.rules-ready .all-work-table tr { border-bottom-color: transparent !important; }
.project-card { min-width: 0; }
.project-card .card-image { aspect-ratio: 900 / 555; width: 100%; overflow: hidden; position: relative; isolation: isolate; background: #eee; }
.card-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.layout-in-motion .card-image img, .photo-gallery.layout-in-motion .photo-frame img, .drawing-shell.layout-in-motion .drawing-slide img { scale: var(--resize-image-x, 1) var(--resize-image-y, 1); }
.layout-in-motion .card-title { scale: var(--resize-text-x, 1) var(--resize-text-y, 1); transform-origin: left bottom; }
.card-image::after { content: ''; position: absolute; inset: auto 0 0; height: 65px; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .5)); mix-blend-mode: multiply; opacity: 0; transition: opacity 812.5ms var(--hover-ease); pointer-events: none; }
.card-title { position: absolute; z-index: 1; left: calc(20 * var(--collection-ui-unit)); bottom: calc(16 * var(--collection-ui-unit)); color: white; font-size: calc(16 * var(--collection-ui-unit)); font-weight: 400; line-height: 1.1; opacity: 0; transform: translateY(5px); transition: opacity 812.5ms var(--hover-ease), transform 812.5ms var(--hover-ease); }
.project-card:hover .card-image::after, .project-card:focus-visible .card-image::after { opacity: 1; }
.project-card:hover .card-title, .project-card:focus-visible .card-title { opacity: 1; transform: none; }
/* Center the complete copy + media composition, including its internal gap. */
.project-stage { position: relative; width: calc(100% - 2 * var(--project-gutter)); margin-inline: auto; overflow-x: clip; padding-top: calc(30 * var(--ui-unit)); padding-bottom: calc(24 * var(--ui-unit)); }
/* A real containing block shares the menu gutters. Fractional tracks and the
   maximum width keep both columns inside it even before resize JS has run. */
.project-page { display: grid; grid-template-columns: minmax(0, 900fr) minmax(0, 1125fr); column-gap: min(var(--column-gap), 4.255319%); width: var(--project-width); max-width: 100%; margin-inline: auto; }
.project-copy { min-width: 0; }
.project-top { height: calc(var(--photo-height) + var(--image-gap)); display: flex; flex-direction: column; align-items: start; }
.breadcrumb { font-size: var(--menu-font-size); line-height: 1.25; margin: 0 0 15px; display: flex; gap: 4px; flex-wrap: wrap; }
.breadcrumb > a { font-weight: 700; }
.breadcrumb .breadcrumb-tag { font-weight: 400; color: #666; }
.breadcrumb a:hover { text-decoration: underline; text-decoration-color: #000; text-decoration-thickness: var(--rule-minor); text-underline-offset: 2px; }
.project-top h1 { width: 100%; font-size: 56px; font-weight: 700; line-height: 1.02; letter-spacing: -.055em; margin: 0; padding-bottom: 12px; border-bottom: var(--rule-major) solid #000; overflow-wrap: anywhere; }
.project-meta { display: flex; width: 100%; align-items: baseline; gap: 20px; margin-top: 12px; font-size: var(--menu-font-size); line-height: 1.35; font-weight: 700; }
.project-location { min-width: 0; }
.project-year { margin-left: auto; flex-shrink: 0; text-align: right; }
.project-sections { height: var(--drawing-height); padding: 0; overflow-y: auto; scrollbar-width: none; }
.project-sections > :last-child { margin-bottom: 0; }
.text-row { margin: 0 0 27px; }
.text-row h2 { font-size: var(--menu-font-size); font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: var(--rule-minor) solid #000; line-height: 1.25; }
/* One screen-pixel renderer supplies every structural rule in both browsers. */
.rule-overlay { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.rule-overlay svg { display: block; overflow: hidden; pointer-events: none; }
html.rules-ready .work-menu-line, html.rules-ready nav > a[data-nav]::after { background: transparent; }
html.rules-ready .sort-menu-line { background: transparent; }
html.rules-ready .project-top h1, html.rules-ready .text-row h2, html.rules-ready .sort-trigger { border-bottom-color: transparent; }
.text-row .text { min-height: 36px; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.text-row p { margin: 0; }
.text-row p + p { margin-top: 12px; }
.project-sections { --text-offset: calc(250 * var(--project-unit)); }
.text-row .section-body { margin-left: var(--text-offset); overflow-wrap: anywhere; }
.project-field { display: grid; grid-template-columns: var(--text-offset) minmax(0, 1fr); margin: 0 0 12px; }
.project-field dt { margin: 0; padding-right: 12px; font-weight: 700; overflow-wrap: anywhere; }
.project-field dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.project-field a { text-decoration: none; }
.project-field a:hover { text-decoration: underline; text-decoration-color: #000; text-decoration-thickness: var(--rule-minor); text-underline-offset: 3px; }
.project-media { min-width: 0; }
.photo-gallery { position: relative; height: var(--photo-height); overflow: clip; touch-action: pan-y pinch-zoom; }
.photo-track { display: flex; gap: var(--image-gap); height: 100%; will-change: transform; }
.project-sections::-webkit-scrollbar { display: none; }
.photo-frame { flex: 0 0 calc((100% - var(--image-gap)) / 2); min-width: 0; height: var(--photo-height); position: relative; overflow: hidden; background: #f7f7f7; padding: 0; display: block; }
.photo-frame:focus-visible { outline-offset: -3px; }
.photo-frame.viewer-pointer-return:focus-visible, .drawing-slide.viewer-pointer-return:focus-visible { outline: none; }
/* Fill every frame proportionally, cropping whichever dimension extends beyond it. */
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1); display: block; user-select: none; }
.photo-frame img, .card-image img, .drawing-slide img { transition: filter 650ms var(--hover-ease); }
@media (hover: hover) {
  .photo-frame:hover img, .project-card:hover .card-image img, .drawing-shell:hover .drawing-slide img { filter: grayscale(0); }
}
.photo-frame:focus-visible img, .project-card:focus-visible .card-image img, .drawing-viewport:focus-visible .drawing-slide img { filter: grayscale(0); }
.drawing-shell { position: relative; margin-top: var(--image-gap); }
/* All sheets share one frame; contain retains each sheet's full proportions. */
.drawing-viewport { height: var(--drawing-height); overflow: hidden; touch-action: pan-y pinch-zoom; }
.drawing-track { width: 100%; height: 100%; display: flex; align-items: stretch; gap: var(--image-gap); will-change: transform; }
.drawing-slide { flex: 0 0 100%; min-width: 0; height: 100%; padding: 0; display: block; cursor: zoom-in; background: #f4f4f4; isolation: isolate; }
.drawing-slide img { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(1); mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.drawing-slide[aria-hidden="true"], .drawing-viewport[data-moving="true"] .drawing-slide { pointer-events: none; }
.drawing-slide:focus-visible { outline-offset: -3px; }
.about-stage { padding-top: calc(64.5 * var(--ui-unit)); }
html.about-route { --menu-font-size: calc(15.6 * var(--ui-unit)); }
.about-copy { display: flex; flex-direction: column; gap: calc(40 * var(--ui-unit)); height: calc(1104 * var(--project-unit)); padding-bottom: calc(32 * var(--project-unit)); }
.about-page .about-top { flex: none; height: auto; min-height: 0; }
.about-top h1 { font-size: calc(56 * var(--ui-unit)); padding-bottom: calc(12 * var(--ui-unit)); }
.about-top .project-meta { gap: calc(20 * var(--ui-unit)); margin-top: calc(12 * var(--ui-unit)); }
.about-body { flex: 0 1 auto; min-height: 0; min-width: 0; margin: auto 0 calc(-1 * var(--about-ink-offset, 0px)); font-size: var(--menu-font-size); font-weight: 400; line-height: var(--about-leading, 1.875em); overflow-y: auto; scrollbar-width: none; overflow-wrap: anywhere; }
.about-body::-webkit-scrollbar { display: none; }
.about-body p { margin: 0; white-space: pre-line; }
.about-body p + p { margin-top: 1em; }
html:not(.mobile-layout) .about-body p + p { margin-top: var(--about-leading, 1.875em); }
.about-body strong { font-weight: 700; }
.about-portrait { min-width: 0; padding-top: calc(40 * var(--project-unit)); }
.about-polaroid { position: relative; isolation: isolate; width: calc(904 * var(--project-unit)); height: calc(1064 * var(--project-unit)); max-width: 100%; margin-inline: auto; }
.about-profile-window { position: absolute; left: calc(81 / 904 * 100%); top: calc(81 / 1064 * 100%); width: calc(750 / 904 * 100%); height: calc(750 / 1064 * 100%); overflow: hidden; background: #fff; }
.about-profile-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal; user-select: none; }
.about-details { grid-column: 1 / -1; margin: calc(40 * var(--ui-unit)) 0 0 calc(250 * var(--project-unit)); font-size: var(--menu-font-size); }
.about-details h2 { font-size: inherit; font-weight: 400; }
html.about-stacked .about-page { width: var(--media-width); display: flex; flex-direction: column; }
html.about-stacked .about-copy { display: contents; }
html.about-stacked .about-top { order: 0; width: 100%; padding-bottom: calc(30 * var(--ui-unit)); }
html.about-stacked .about-portrait { order: 1; width: 100%; padding-top: 0; }
html.about-stacked .about-body { order: 2; flex: none; height: auto; overflow: visible; margin-top: calc(30 * var(--ui-unit)); line-height: 1.65; }
html.about-stacked .about-details { order: 3; }
.about-flight { position: fixed; top: 0; left: 0; z-index: 10; transform-origin: 0 0; pointer-events: none; }
.about-flight .splash-polaroid { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none !important; translate: none !important; scale: none !important; }
.about-flight .splash-frame { background: #fff; transition: box-shadow 330ms var(--hover-ease); }
.about-flight .splash-frame::after { transition: opacity 330ms var(--hover-ease); }
.about-flight.is-portrait .splash-frame { box-shadow: none; }
.about-flight.is-portrait .splash-frame::after { opacity: 0; }
.about-flight-cover { position: absolute; inset: 0; }
.about-return-stage { position: fixed; left: 0; visibility: hidden; pointer-events: none; }
.about-flight.is-returning .splash-frame, .about-flight.is-returning .splash-frame::after { transition-delay: var(--about-return-shadow-delay, 0ms); }
html.collection-two-columns .work-page { width: calc(1815 * var(--collection-unit)); }
html.collection-two-columns .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.collection-stacked .work-page { width: calc(900 * var(--collection-unit)); }
html.collection-stacked .project-grid { grid-template-columns: 1fr; }
.empty { padding: 80px 28px; color: #777; }
dialog { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; padding: 0; overflow: hidden; background: transparent; color: #191919; }
dialog::backdrop { background: rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color var(--viewer-duration) var(--hover-ease), backdrop-filter var(--viewer-duration) var(--hover-ease), -webkit-backdrop-filter var(--viewer-duration) var(--hover-ease); }
dialog.is-visible::backdrop { background: rgb(0 0 0 / .15); -webkit-backdrop-filter: blur(6.3px); backdrop-filter: blur(6.3px); }
dialog[open] { display: flex; flex-direction: column; }
.sort-dialog[open] { display: block; }
.sort-panel { position: absolute; top: 50%; left: 0; right: 0; margin-inline: auto; translate: 0 -50%; transform-origin: 0 0; width: min(340px, calc(100% - 2 * var(--mobile-gutter, 24px))); background: #fff; box-shadow: 0 4px 18px rgb(0 0 0 / .08); font-size: calc(21 * var(--mobile-unit, 1px)); overflow: hidden; }
.sort-panel:focus { outline: none; }
.sort-panel-sheet { max-height: calc(100dvh - 2 * var(--mobile-gutter, 24px)); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.sort-panel .sort-option { min-height: 44px; padding: calc(16 * var(--mobile-unit, 1px)) calc(24 * var(--mobile-unit, 1px)); }
.sort-panel .sort-option[aria-selected="true"] { background: #000; color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sort-dialog::backdrop { transition: none; } }
/* Each enlarged image occupies a whole window-width slide; its natural fit supplies the gutters. */
.viewer-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; opacity: 0; }
.viewer-stage:focus { outline: none; }
dialog.is-ready .viewer-stage { opacity: 1; }
.viewer-track { width: 100%; height: 100%; position: relative; will-change: transform; }
.viewer-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: var(--menu-height) 50px calc(2 * var(--menu-height)); }
.viewer-media { position: relative; flex: none; width: min(100%, calc(max(1px, 100dvh - 3 * var(--menu-height)) * var(--viewer-aspect, 1))); aspect-ratio: var(--viewer-aspect, 1); box-shadow: 0 4px 18px rgb(0 0 0 / .08); }
.viewer-slide img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; mix-blend-mode: normal; user-select: none; }
.viewer-drawing .viewer-media { background: #fff; }
.viewer-hit { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; z-index: 2; background: transparent; }
.viewer-left { left: 0; }
.viewer-right { right: 0; }
.viewer-hit:focus-visible { outline-offset: -4px; }
.viewer-dissolve { position: absolute; inset: 0; pointer-events: none; }
.viewer-flight { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; isolation: isolate; will-change: clip-path; }
.viewer-flight img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; transform-origin: 0 0; user-select: none; will-change: transform; }
body.modal-open { overflow: hidden; }
body.modal-open .drawing-viewport, body.modal-open .project-sections { transition: none; }
/* The preview blur is baked into the public image. It scales with the image,
   and cannot be removed by changing CSS or opening its direct file URL. */
.is-private-locked { cursor: pointer; }
#private-pin[open] { display: block; }
#private-pin::backdrop, #private-pin.is-visible::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pin-form { position: absolute; width: var(--pin-width, 169px); height: calc(var(--pin-width, 169px) / 3); transform: translate(-50%, -50%); opacity: 0; transition: opacity 400ms var(--hover-ease); font-family: Arial, Helvetica, sans-serif; }
#private-pin.is-visible .pin-form { opacity: 1; }
.pin-box { position: relative; display: block; width: 100%; height: 100%; }
.pin-box::before, .pin-box::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* Whiten only the selected blurred preview; originals stay protected. */
.pin-preview-frame { position: absolute; pointer-events: none; box-shadow: 0 0 12px rgb(0 0 0 / 0); transition: box-shadow 800ms var(--hover-ease); }
#private-pin.is-visible .pin-preview-frame { box-shadow: 0 0 12px rgb(0 0 0 / .1); }
.pin-preview-wash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 800ms var(--hover-ease); }
#private-pin.is-visible .pin-preview-wash { opacity: .7; }
.pin-box::before { background: rgb(255 255 255 / .8); }
.pin-box::after { box-shadow: inset 0 0 12px rgb(0 0 0 / .2); }
#portfolio-pin { position: relative; width: 100%; height: 100%; border: 0; border-radius: 0; outline: none; padding: 6px 12px; font: 24px Arial, Helvetica, sans-serif; text-align: center; letter-spacing: 6px; color: #333; background: transparent; -webkit-appearance: none; }
#portfolio-pin:disabled { opacity: .7; }
#pin-instruction { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; white-space: nowrap; font-size: 12px; font-weight: 400; line-height: 1.5; opacity: .5; }
#pin-error { position: absolute; top: calc(100% + 32px); left: 50%; transform: translateX(-50%); width: 260px; color: #4a4a4a; font-size: 12px; line-height: 1.5; text-align: center; }
@media (prefers-reduced-motion: reduce) { .pin-form, .pin-preview-frame, .pin-preview-wash { transition: none; } }
@media (max-width: 900px) {
  header { gap: calc(20 * var(--header-unit)); }
}
@media (max-width: 600px) {
  :root { --menu-font-size: 14.4px; --header-menu-font-size: 14.4; }
  .wordmark { font-size: calc(24 * var(--header-unit)); }
  nav { gap: calc(15 * var(--header-unit)); }

}
@media (hover: none) {
  .card-image::after, .card-title { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* The project breakpoint follows its measured design width (including density),
   rather than a separate mobile breakpoint that could make it jump too early. */
html.project-route { --menu-font-size: calc(15.6 * var(--ui-unit)); }
html.project-route .breadcrumb { gap: calc(4 * var(--ui-unit)); margin-bottom: calc(15 * var(--ui-unit)); }
html.project-route .project-top h1 { font-size: calc(56 * var(--ui-unit)); padding-bottom: calc(12 * var(--ui-unit)); }
html.project-route .project-meta { gap: calc(20 * var(--ui-unit)); margin-top: calc(12 * var(--ui-unit)); }
html.project-route .text-row { margin-bottom: calc(27 * var(--ui-unit)); }
html.project-route .text-row h2 { margin-bottom: calc(12 * var(--ui-unit)); padding-bottom: calc(8 * var(--ui-unit)); }
html.project-route .text-row .text { min-height: calc(36 * var(--ui-unit)); font-size: calc(12 * var(--ui-unit)); }
html.project-route .text-row p + p, html.project-route .project-field { margin-bottom: calc(12 * var(--ui-unit)); }
html.project-route .text-row p + p { margin-top: calc(12 * var(--ui-unit)); margin-bottom: 0; }
html.project-route .project-field dt { padding-right: calc(12 * var(--ui-unit)); }
html.project-route #pin-instruction { font-size: calc(12 * var(--ui-unit)); margin-top: calc(8 * var(--ui-unit)); }
html.project-route #portfolio-pin { font-size: calc(24 * var(--ui-unit)); padding: calc(6 * var(--ui-unit)) calc(12 * var(--ui-unit)); letter-spacing: calc(6 * var(--ui-unit)); }
html.project-route .viewer-slide { padding-left: calc(50 * var(--ui-unit)); padding-right: calc(50 * var(--ui-unit)); }
html.project-stacked .project-page { width: var(--media-width); display: flex; flex-direction: column; }
html.project-stacked .project-copy { display: contents; }
html.project-stacked .project-top { height: auto; min-height: calc(170 * var(--ui-unit)); padding-bottom: calc(30 * var(--ui-unit)); }
html.project-stacked .project-media { order: 2; }
html.project-stacked .project-sections { order: 3; height: auto !important; margin-top: calc(30 * var(--ui-unit)); overflow: visible; }

/* Only transient blur layers receive a compositing hint. No blanket promotion. */
#app.is-render-prepared, .wordmark-label.is-render-prepared { transform: translateZ(0); backface-visibility: hidden; }
#viewer.is-render-prepared::backdrop { will-change: backdrop-filter, background-color; }
.category-menu button { width: 100%; text-align: left; }
.category-menu [aria-checked="true"] { text-decoration: underline; text-decoration-thickness: var(--rule-minor); text-underline-offset: 3px; }
html[lang="zh-Hans"] body { font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }

/* Fit the same header between equal 50px margins on every narrow screen. */
@media (max-width: 440px) {
  :root { --header-unit: max(.1px, calc((100vw - 100px) / 340)); }
}

/* Touch devices only: a shared 4% portrait-width rail survives rotation. */
html.mobile-layout {
  scrollbar-gutter: auto;
  overscroll-behavior: none;
  --menu-height: calc(96 * var(--mobile-unit));
  --header-unit: var(--mobile-unit);
  --header-menu-font-size: 17.5;
}
html.mobile-layout body { padding-top: var(--menu-height); overscroll-behavior: none; }
html.mobile-layout .pull-refresh {
  position: fixed; top: calc(var(--menu-height) + 10px); left: 50%; z-index: 16;
  display: flex; align-items: center; gap: 8px; transform: translateX(-50%);
  color: #000; font-size: 12px; line-height: 22px; white-space: nowrap;
  opacity: min(1, calc(var(--pull-progress, 0) * 2)); pointer-events: none;
}
.pull-refresh[hidden] { display: none !important; }
.pull-refresh svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transform: rotate(-90deg); transition: scale 180ms cubic-bezier(.2,1.4,.4,1); }
.pull-refresh-track { opacity: .15; }
.pull-refresh-progress { stroke-dasharray: 56.55; stroke-dashoffset: calc(56.55 * (1 - var(--pull-progress, 0))); stroke-linecap: round; }
.pull-refresh[data-state="armed"] svg { scale: 1.06; }
.pull-refresh[data-state="refreshing"] svg { animation: pull-refresh-spin 700ms linear infinite; }
.pull-refresh[data-state="refreshing"] .pull-refresh-progress { stroke-dasharray: 40 16.55; stroke-dashoffset: 0; }
@keyframes pull-refresh-spin { to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) {
  .pull-refresh svg { animation: none !important; transition: none !important; scale: 1 !important; }
}
html.mobile-layout header {
  position: fixed; top: 0; left: 0; right: 0;
  padding-inline: var(--mobile-gutter); gap: calc(20 * var(--mobile-unit));
  touch-action: manipulation;
}
html.mobile-layout .wordmark { font-size: calc(30 * var(--mobile-unit)); }
html.mobile-layout nav { gap: calc(20 * var(--mobile-unit)); }
html.mobile-layout .project-stage, html.mobile-layout .collection-stage {
  width: calc(100% - 2 * var(--mobile-gutter));
  max-width: none; margin-inline: auto;
}
html.mobile-layout .project-stage { padding-top: calc(64 * var(--mobile-unit)); }
html.mobile-layout .project-page { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: 0; }
html.mobile-layout .project-copy { display: contents; }
html.mobile-layout .project-top { height: auto; min-height: 0; padding-bottom: calc(40 * var(--mobile-unit)); }
html.mobile-layout .breadcrumb {
  font-size: calc(20 * var(--mobile-type-unit)); line-height: 1.35;
  gap: calc(4 * var(--mobile-unit)); margin-bottom: calc(24 * var(--mobile-unit));
}
html.mobile-layout .project-top h1 {
  font-size: calc(70 * var(--mobile-type-unit));
  padding-bottom: calc(20 * var(--mobile-unit));
}
html.mobile-layout .project-meta {
  font-size: calc(20 * var(--mobile-type-unit));
  gap: calc(20 * var(--mobile-unit)); margin-top: calc(16 * var(--mobile-unit));
}
html.mobile-layout .project-media { order: 2; width: 100%; }
html.mobile-layout .project-sections {
  order: 3; height: auto; overflow: visible; margin-top: calc(40 * var(--mobile-unit));
  --text-offset: 27.777778%;
}
html.mobile-layout .text-row h2 { font-size: calc(20 * var(--mobile-type-unit)); }
html.mobile-layout .text-row .text { font-size: calc(15 * var(--mobile-type-unit)); }
html.mobile-layout .photo-frame img, html.mobile-layout .viewer-slide img {
  pointer-events: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
html.mobile-layout .photo-gallery, html.mobile-layout .drawing-viewport,
html.mobile-layout .viewer-stage { touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
html.mobile-layout .drawing-viewport { position: relative; }
.drawing-dissolve { position: absolute; inset: 0; pointer-events: none; }
html.mobile-layout .work-page, html.mobile-layout .about-page { width: 100%; max-width: 100%; }
html.mobile-layout .work-page { --mobile-tools-lift: calc(9 * var(--mobile-unit) + 2px); }
html.mobile-layout .project-grid {
  grid-template-columns: 1fr; gap: calc(28.125 * var(--project-unit));
  margin-top: calc(-1 * var(--mobile-tools-lift));
}
html.mobile-layout .work-list { margin-top: calc(-1 * var(--mobile-tools-lift)); }
html.mobile-layout .all-work-table { font-size: calc(16 * var(--mobile-type-unit)); }
html.mobile-layout .mep-work h2 { font-size: calc(16 * var(--mobile-type-unit)); margin-bottom: calc(12 * var(--mobile-unit)); }
html.mobile-layout .all-work-table .work-year { width: 9%; }
html.mobile-layout .all-work-table .work-title { width: 31%; }
html.mobile-layout .all-work-table th, html.mobile-layout .all-work-table td { padding: calc(13.2 * var(--mobile-unit)) calc(8 * var(--mobile-unit)) calc(13.2 * var(--mobile-unit)) 0; }
html.mobile-layout .all-work-table th:last-child, html.mobile-layout .all-work-table td:last-child { padding-right: 0; }
html.mobile-layout .all-work-table th:first-child, html.mobile-layout .all-work-table td:first-child { white-space: normal; overflow-wrap: normal; }
html.mobile-layout .index-intro { padding: calc(64 * var(--mobile-unit)) 0 calc(40 * var(--mobile-unit)); }
html.mobile-layout .index-intro h1 { font-size: calc(70 * var(--mobile-type-unit)); }
html.mobile-layout .filters {
  display: grid; grid-template-columns: minmax(0,1fr) calc(100 * var(--mobile-unit));
  gap: calc(50 * var(--mobile-unit)); align-items: end;
  padding-bottom: calc(24 * var(--mobile-unit));
}
html.mobile-layout .category-filters {
  display: grid; grid-template-columns: repeat(4, max-content); justify-items: start;
  gap: calc(8 * var(--mobile-unit)) calc(6 * var(--mobile-unit));
}
html.mobile-layout .category-filters [data-tag="Sports"] { grid-row: 2; grid-column: 1; }
html.mobile-layout .category-filters button, html.mobile-layout .category-filters button.active {
  font-size: calc(16 * var(--mobile-type-unit));
  padding: calc(9 * var(--mobile-unit)) calc(5 * var(--mobile-unit));
}
html.mobile-layout .work-tools {
  display: grid; grid-template-columns: 1fr; width: 100%; margin: 0;
  font-size: calc(15 * var(--mobile-type-unit)); gap: calc(6 * var(--mobile-unit));
  translate: 0 calc(-1 * var(--mobile-tools-lift));
}
html.mobile-layout .work-tools .count { text-align: right; }
html.mobile-layout .sort-control { display: block; }
html.mobile-layout .sort-trigger { width: 100%; font-size: calc(15 * var(--mobile-type-unit)); gap: calc(6 * var(--mobile-unit)); padding: calc(5 * var(--mobile-unit)) 0; }
html.mobile-layout .sort-chevron { width: calc(9 * var(--mobile-unit)); height: calc(5.4 * var(--mobile-unit)); }
html.mobile-layout .card-image::after { display: none; }
html.mobile-layout .card-title { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.mobile-layout .project-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.mobile-layout .card-image img { pointer-events: none; -webkit-touch-callout: none; }
html.mobile-layout .project-card.is-touch-preview .card-image img { filter: grayscale(0); }
html.mobile-layout .about-page { gap: 0; padding: 0; }
html.mobile-layout .about-top { padding-bottom: calc(40 * var(--mobile-unit)); }
html.mobile-layout .about-portrait { padding-top: 0; }
html.mobile-layout .about-polaroid { width: 100%; height: auto; aspect-ratio: 904 / 1064; }
/* Match the visible paper edges inside the Polaroid's transparent canvas. */
html.mobile-layout .about-body { margin: calc(40 * var(--mobile-unit)) 2% 0; font-size: calc(20 * var(--mobile-type-unit)); text-align: justify; text-align-last: left; }
html.mobile-layout .splash-page { padding: var(--mobile-gutter); min-height: calc(100dvh - var(--menu-height)); }
html.mobile-layout .splash-polaroid {
  --splash-size: min(calc((100vw - 2 * var(--mobile-gutter)) * 744 / 904), calc(max(0px, 100dvh - 2 * var(--menu-height) - 2 * var(--mobile-gutter)) * 744 / 1064));
  --splash-lift: calc(var(--menu-height) / 2);
}
html.mobile-layout .viewer-slide {
  padding: var(--mobile-gutter); align-items: center; pointer-events: none;
}
html.mobile-layout .viewer-media {
  pointer-events: auto;
  width: min(100%, calc(max(1px, 100dvh - 2 * var(--mobile-gutter)) * var(--viewer-aspect, 1)));
}