:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #191919;
  background: #fff;
  font-synthesis: none;
  --project-width: 1410px;
  --copy-width: 605px;
  --media-width: 775px;
  --column-gap: 30px;
  --image-gap: 15px;
  --photo-height: 570px;
  --drawing-height: 517px;
  --hover-ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
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; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #214cff; 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; }
header { height: 60px; width: 100%; display: flex; align-items: center; padding: 0 20px; gap: 35px; }
.wordmark { font-size: 18px; font-weight: 700; letter-spacing: -.8px; }
nav { display: flex; gap: 34px; margin-left: auto; font-size: 11px; }
nav a.active { text-decoration: underline; text-underline-offset: 4px; }
main { min-height: 75vh; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 20px; font-size: 12px; margin-top: 90px; color: #666; }
.index-intro { display: flex; justify-content: space-between; align-items: end; padding: 75px 28px 55px; }
.index-intro h1 { font-size: clamp(60px, 8vw, 120px); line-height: .9; letter-spacing: -.075em; font-weight: 700; margin: 0; }
.intro-small { font-size: 14px; line-height: 1.5; max-width: 230px; margin: 0 0 4px; }
.filters { display: flex; align-items: center; gap: 7px; padding: 0 28px 20px; flex-wrap: wrap; }
.filters button { border: 1px solid #d2d2d2; border-radius: 0; padding: 9px 16px; font-size: 13px; }
.filters button.active { background: #191919; color: white; border-color: #191919; }
.filters .count { margin-left: auto; font-size: 12px; color: #777; }
.project-grid { padding: 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 55px 18px; }
.project-card .card-image { height: clamp(260px, 36vw, 560px); overflow: hidden; position: relative; background: #eee; }
.card-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.card-number { position: absolute; top: 16px; left: 16px; color: white; mix-blend-mode: difference; font-size: 13px; }
.card-info { display: flex; justify-content: space-between; align-items: start; padding-top: 14px; gap: 15px; }
.card-info h2 { font-size: 25px; letter-spacing: -1px; font-weight: 500; margin: 0; }
.card-info p { font-size: 12px; margin: 7px 0; color: #757575; }
.card-info .arrow { font-size: 26px; }
/* The fixed canvas stays centered, including when its edges fall outside a narrow window. */
.project-stage { width: 100%; overflow-x: clip; }
.project-page { display: grid; grid-template-columns: var(--copy-width) var(--media-width); column-gap: var(--column-gap); width: var(--project-width); margin-inline: calc((100% - var(--project-width)) / 2); }
.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: 10px; line-height: 14px; margin: 0 0 15px; display: flex; gap: 3px; flex-wrap: wrap; }
.breadcrumb > a { font-weight: 700; }
.breadcrumb .breadcrumb-tag { font-weight: 400; color: #666; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 2px; }
.project-top h1 { font-size: 56px; font-weight: 700; line-height: 1.02; letter-spacing: -.055em; margin: 0; overflow-wrap: anywhere; }
.project-sections { padding: 0; }
.text-row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 15px; margin: 0 0 27px; }
.text-row h2 { font-size: 10px; font-weight: 400; margin: 0; line-height: 1.5; }
.text-row .text { font-size: 11px; line-height: 1.5; white-space: pre-line; }
.text-row p { margin: 0; }
.project-media { min-width: 0; }
.photo-gallery { position: relative; height: var(--photo-height); }
.photo-track { display: flex; gap: var(--image-gap); height: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.photo-track::-webkit-scrollbar, .drawing-viewport::-webkit-scrollbar { display: none; }
.photo-frame { flex: 0 0 380px; height: var(--photo-height); position: relative; overflow: hidden; background: #f7f7f7; padding: 0; display: block; }
/* Fit the original image's full height; only its horizontal extent is cropped. */
.photo-frame img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translate3d(calc(-50% + var(--crop-shift, 0px)), 0, 0); filter: grayscale(1); display: block; }
.photo-frame::after, .card-image::after, .drawing-shell::after { content: ''; position: absolute; inset: 0; background: white; opacity: 0; pointer-events: none; transition: opacity 650ms var(--hover-ease); z-index: 1; }
@media (hover: hover) {
  .photo-frame:hover::after, .project-card:hover .card-image::after, .drawing-shell:hover::after { opacity: .1; }
}
.photo-frame:focus-visible::after, .project-card:focus-visible .card-image::after { opacity: .1; }
.photo-controls { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 5px; opacity: 0; pointer-events: none; transition: opacity 400ms var(--hover-ease); z-index: 2; }
.photo-gallery:hover .photo-controls, .photo-gallery:focus-within .photo-controls { opacity: 1; pointer-events: auto; }
.photo-controls button { width: 34px; height: 34px; background: #ffffffe6; font-size: 18px; }
.drawing-shell { position: relative; margin-top: var(--image-gap); background: #fafafa; }
.drawing-viewport { height: var(--drawing-height); overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; cursor: zoom-in; }
.drawing-viewport img { width: 100%; height: auto; display: block; filter: grayscale(1); }
.drawing-side { position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: 0; transition: opacity 400ms var(--hover-ease); }
.drawing-shell:hover .drawing-side, .drawing-shell:focus-within .drawing-side { opacity: 1; }
.drawing-side.left { left: 0; background: linear-gradient(90deg, #ffffff70, transparent); }
.drawing-side.right { right: 0; background: linear-gradient(-90deg, #ffffff70, transparent); }
.drawing-open { position: absolute; right: 16px; bottom: 16px; background: #ffffffe6; padding: 10px 14px; font-size: 11px; z-index: 3; opacity: 0; transition: opacity 400ms var(--hover-ease); }
.drawing-shell:hover .drawing-open, .drawing-shell:focus-within .drawing-open { opacity: 1; }
.next-project { display: flex; justify-content: space-between; padding-top: 25px; margin-top: 65px; font-size: 22px; letter-spacing: -.7px; }
.about-page { padding: 70px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.about-page h1 { font-size: clamp(70px, 8vw, 120px); line-height: .9; letter-spacing: -.07em; margin: 0; }
.about-page .about-body { max-width: 570px; font-size: 20px; line-height: 1.5; }
.about-body h2 { font-size: 13px; font-weight: 400; margin-top: 45px; padding-top: 20px; }
.about-body p { white-space: pre-line; }
.empty { padding: 80px 28px; color: #777; }
dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 20px 28px; background: #fff; color: #191919; }
dialog::backdrop { background: #fff; }
dialog[open] { display: flex; flex-direction: column; }
.viewer-top, .viewer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 20px; min-height: 35px; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 22px 45px; }
.viewer-stage img { max-width: 100%; max-height: calc(100dvh - 155px); object-fit: contain; filter: none; }
.viewer-stage button { position: absolute; top: 48%; font-size: 25px; background: #ffffffdb; padding: 12px; }
.viewer-prev { left: 0; }
.viewer-next { right: 0; }
body.modal-open { overflow: hidden; }
@media (max-width: 900px) {
  header { padding: 0 18px; gap: 20px; }
  .index-intro { padding-top: 55px; }
  .about-page { gap: 35px; }
}
@media (max-width: 600px) {
  .wordmark { font-size: 18px; }
  nav { gap: 15px; font-size: 11px; }
  .index-intro { padding: 42px 18px 34px; display: block; }
  .index-intro h1 { font-size: 72px; }
  .intro-small { margin-top: 25px; max-width: 260px; }
  .filters { padding: 0 18px 18px; gap: 6px; }
  .filters button { font-size: 12px; padding: 8px 10px; }
  .filters .count { display: none; }
  .project-grid { padding: 0 18px; grid-template-columns: 1fr; gap: 35px; }
  .project-card .card-image { height: 410px; }
  .about-page { padding: 45px 18px; grid-template-columns: 1fr; gap: 35px; }
  .about-page h1 { font-size: 78px; }
  .about-page .about-body { font-size: 18px; }
  footer { padding: 20px 18px; flex-wrap: wrap; margin-top: 60px; font-size: 11px; }
  footer #footnote { order: 3; width: 100%; }
  .viewer-stage { padding: 10px 20px; }
  .viewer-stage button { padding: 5px; }
  dialog { padding: 12px; }
  .viewer-top, .viewer-bottom { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}