/* The project index and detail pages share the existing type and motion system. */
body { text-size-adjust: auto; }
body.portfolio-home-page, body.portfolio-detail-page, body.portfolio-works-page { background: var(--black) !important; }
.portfolio-home, .portfolio-detail, .portfolio-works { line-height: 1.25; }
.works-heading { padding: 155px var(--grid-margin) 42px; color: var(--paper); }
.works-heading h1 { margin-top: 28px; font-size: clamp(28px, 3.35vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.07; }
.portfolio-home > .category-index { border-radius: 0 0 18px 18px; }
.portfolio-entry { min-height: 100svh; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px var(--grid-margin) 32px; color: var(--paper); }
.entry-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 46px; }
.entry-statement { font-size: clamp(25px, 2.75vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; width: 43%; max-width: 22ch; }
.entry-scroll { display: flex; justify-content: space-between; align-items: center; width: 29%; min-width: 190px; font-size: 12px; border-top: 1px solid #8c8986; padding-top: 12px; }
.entry-scroll > span:last-child { font-size: 20px; transition: transform .5s var(--ease); }
.entry-scroll:hover > span:last-child { transform: translateY(5px); }
.portfolio-overview { position: relative; padding: 40px var(--grid-margin) 54px; color: var(--black); background: var(--paper); border-radius: 20px 20px 0 0; }
.overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; padding-top: 12px; border-top: 1px solid #9f9c98; }
.overview-heading h2 { font-size: clamp(27px, 2.8vw, 40px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; }
.overview-count { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.overview-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 12px 10px; align-items: start; container-type: inline-size; }
.overview-note { grid-column: 11 / 15; grid-row: 1; align-self: center; padding: 30px 12px; }
.overview-note__number { display: block; font-family: 'ESNein', Impact, sans-serif; font-size: clamp(76px, 13vw, 180px); line-height: .8; letter-spacing: -.055em; }
.overview-note p { font-size: 13px; margin-top: 16px; }
.overview-note a { display: inline-flex; align-items: center; gap: 30px; border-top: 1px solid #a5a29f; margin-top: 35px; padding-top: 12px; font-size: 12px; }
.overview-card { min-width: 0; display: block; transform-origin: 50% 70%; transition: transform .8s var(--ease); }
.overview-card--1 { grid-column: 1 / 9; grid-row: 1; }
.overview-card--2 { grid-column: 5 / 9; grid-row: 2; }
.overview-card--3 { grid-column: 9 / 15; grid-row: 2; }
.overview-card--4 { grid-column: 1 / 9; grid-row: 3; }
.overview-card--5 { grid-column: 9 / 15; grid-row: 3; }
.overview-card--6 { grid-column: 5 / 9; grid-row: 4; }
.overview-card--7 { grid-column: 9 / 15; grid-row: 4; }
.overview-card__image { position: relative; overflow: hidden; aspect-ratio: 346 / 340; border-radius: clamp(10.2px, 1.19vw, 18.7px); background: #424242; }
.overview-card--1 .overview-card__image, .overview-card--4 .overview-card__image { aspect-ratio: 702 / 438; }
.overview-card--5 .overview-card__image, .overview-card--7 .overview-card__image { aspect-ratio: 526 / 340; }
/* Paired photographs share a height, keeping both image edges on the same line. */
@media (min-width: 1001px) {
  .overview-card--2 .overview-card__image, .overview-card--3 .overview-card__image,
  .overview-card--6 .overview-card__image, .overview-card--7 .overview-card__image {
    height: calc(((100cqw - 130px) / 14 * 4 + 30px) * 340 / 346);
    aspect-ratio: auto;
  }
  .overview-card--4 .overview-card__image, .overview-card--5 .overview-card__image {
    height: calc(((100cqw - 130px) / 14 * 8 + 70px) * 438 / 702);
    aspect-ratio: auto;
  }
}
.overview-card__image img { transition: opacity .8s .2s, transform .9s var(--ease); }
.overview-card--1 img { object-position: 50% 57%; }
.overview-card--4 img { object-position: 50% 44%; }
.overview-card__caption { display: grid; grid-template-columns: 24px 1fr 24px; align-items: start; gap: 8px; padding: 8px 2px 0; line-height: 1.25; }
.overview-card__caption h3 { font-size: clamp(14px, 1.25vw, 18px); font-weight: 500; letter-spacing: -.025em; }
.overview-card--1 .overview-card__caption h3, .overview-card--4 .overview-card__caption h3 { font-size: clamp(17px, 1.65vw, 24px); font-weight: 700; }
.overview-card__caption small { display: block; color: #716e6a; font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 3px; }
.overview-card__number { font-size: 11px; opacity: .65; padding-top: 3px; }
.overview-card__type { display: flex; align-items: start; justify-content: flex-end; }
.arrow { display: inline-grid; width: 1em; height: 1em; overflow: hidden; font-size: 21px; line-height: 1; }
.arrow > span { grid-area: 1 / 1; display: block; transition: transform .5s var(--ease); }
.arrow > span:last-child { transform: translate(-110%,110%); }
a:hover .arrow > span:first-child, a:focus-visible .arrow > span:first-child { transform: translate(110%,-110%); }
a:hover .arrow > span:last-child, a:focus-visible .arrow > span:last-child { transform: translate(0,0); }
.motion-enabled .overview-card.is-below { transform: scale(.9); transition: none; }
.motion-enabled .overview-card.is-below img { opacity: 0; transition: none; }
.image-cue { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 22px; padding: 12px 14px; border-radius: 5px; background: var(--paper); color: var(--black); font-size: 12px; z-index: 2; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease); }
.overview-card:hover .image-cue, .overview-card:focus-visible .image-cue, .project-cover:hover .image-cue, .project-cover:focus-visible .image-cue, .detail-image:hover .image-cue, .detail-image:focus-visible .image-cue { opacity: 1; transform: none; }
.overview-card:hover .overview-card__image img, .overview-card:focus-visible .overview-card__image img { transform: scale(1.045); }
.overview-bottom { display: flex; justify-content: space-between; padding: 20px 0 0; margin-top: 58px; border-top: 1px solid #a5a29f; font-size: 13px; }
.category-index { padding: 58px var(--grid-margin) 68px; background: var(--paper); color: var(--black); border-radius: 18px 18px 0 0; }
.portfolio-section-label { display: block; font-size: 12px; line-height: 1.4; }
.category-index nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; margin-top: 32px; }
.category-index a { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid #aaa8a5; font-size: 14px; }
.category-index a > span:last-child { display: flex; gap: 30px; }
.category-index a:hover { color: #79716a; }
.project-category { background: var(--paper); color: var(--black); padding: 0 var(--grid-margin) 70px; }
.category-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 42px 0; border-top: 1px solid #aaa8a5; }
.category-heading > span { font-size: 12px; padding-top: 8px; }
.category-heading h2 { font-weight: 700; letter-spacing: -.04em; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.15; }
.portfolio-project { background: #d7d5d2; color: var(--black); padding: 24px 24px 40px; border-radius: 16px; margin-bottom: 24px; scroll-margin-top: 14px; overflow: hidden; }
.portfolio-project--dark { background: var(--black); color: var(--paper); }
.project-section__top { display: flex; justify-content: space-between; border-top: 1px solid currentColor; padding-top: 9px; font-size: 11px; opacity: .8; }
.project-section__heading { display: grid; grid-template-columns: 2fr 7fr 3fr; align-items: end; gap: 24px; padding: 40px 0 30px; }
.project-section__heading .m-work__number { grid-column: auto; grid-row: auto; min-width: 0; }
.project-section__heading .m-work__number > div:first-child { display: none; }
.project-section__heading .m-work__number > div:last-child { display: flex; overflow: hidden; }
.project-section__heading .m-work__number strong:first-of-type { font-size: clamp(72px, 9vw, 132px); line-height: .84; letter-spacing: -.075em; }
.project-section__heading .m-work__number strong span { display: inline-block; }
.project-section__heading h2 { font-size: clamp(28px, 3.35vw, 48px); font-weight: 700; line-height: 1.07; letter-spacing: -.045em; }
.project-section__heading h2 > .project-location { display: block; opacity: .62; }
.project-section__heading .m-work__detail { grid-column: auto; grid-row: auto; font-size: 12px; line-height: 1.25; }
.project-section__heading .m-work__detail > div:first-child { min-height: 0; font-size: 11px; margin-bottom: 10px; opacity: .65; }
.project-section__heading .m-work__detail > div:last-child { font-size: 12px; }
.project-section__body { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 30px; align-items: end; }
.project-cover { display: block; grid-column: auto; position: relative; overflow: hidden; border-radius: 10px; width: 100%; aspect-ratio: 1.65; }
.project-cover .picture { width: 100%; height: 100%; overflow: hidden; }
.project-section__info { display: flex; flex-direction: column; gap: 36px; padding: 0 0 8px; }
.project-section__info p { font-size: 14px; line-height: 1.4; max-width: 35ch; }
.project-cover, .detail-image { transition: transform .8s var(--ease); transform-origin: 50% 65%; }
.motion-enabled .project-cover.is-below, .motion-enabled .detail-image.is-below { transform: scale(.94); transition: none; }
.motion-enabled .project-cover.is-below img, .motion-enabled .detail-image.is-below img { opacity: 0; }
.detail-image img { transition: opacity .8s .2s; }
.project-open { border-top: 1px solid currentColor; padding-top: 15px; display: flex; gap: 18px; justify-content: space-between; font-size: 12px; align-items: center; }
.portfolio-project--dark .project-section__body { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.portfolio-project--dark .project-cover { grid-column: 2; grid-row: 1; }
.portfolio-project--dark .project-section__info { grid-column: 1; grid-row: 1; }
.is-drawing .overview-card__image, .project-cover.is-drawing { background: #fff; }
.is-drawing .overview-card__image img, .project-cover.is-drawing img { object-fit: contain; transform: none !important; padding: 12px; }
.portfolio-about { background: var(--paper); color: var(--black); padding-top: 1px; }
.portfolio-about .module { min-height: 0; }
.portfolio-about .module__wrap { margin-top: 0; padding-bottom: 1px; }
.portfolio-about .m-text__grid { margin-block: 65px; }
.portfolio-stats { padding: 40px var(--grid-margin) 100px; background: var(--paper); color: var(--black); border-radius: 0 0 18px 18px; }
.portfolio-stats > .portfolio-section-label { border-top: 1px solid #aaa8a5; padding-top: 10px; }
.portfolio-stats__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; margin-top: 60px; }
.portfolio-stats .m-stats__number { font-size: clamp(66px, 9.5vw, 140px); }
.portfolio-stats .m-stats__label { font-size: 13px; line-height: 1.3; }
.portfolio-home-page .s-footer, .portfolio-detail-page .s-footer, .portfolio-works-page .s-footer { color: var(--paper); }
.detail-heading { padding: 155px var(--grid-margin) 64px; color: var(--paper); }
.detail-back { display: inline-block; font-size: 12px; padding-bottom: 10px; }
.detail-heading__grid { display: grid; grid-template-columns: 7fr 4fr; gap: 8vw; padding-top: 50px; }
.detail-heading h1 { font-weight: 700; font-size: clamp(30px, 4.2vw, 60px); letter-spacing: -.05em; line-height: 1.07; margin-top: 15px; }
.detail-location { font-size: clamp(24px, 3.2vw, 44px); opacity: .6; margin-top: 6px; letter-spacing: -.045em; }
.detail-heading__info p { font-size: 13.65px; line-height: 1.4; max-width: 44ch; }
.detail-heading__info nav { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; font-size: 12px; }
.detail-heading__info nav a { border-bottom: 1px solid #8e8b87; padding-bottom: 6px; }
.detail-section { padding: 32px var(--grid-margin) 80px; background: var(--black); color: var(--paper); }
.detail-section--paper { background: var(--paper); color: var(--black); border-radius: 18px; }
.detail-section__label { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid #8c8986; padding: 16px 0 32px; }
.detail-section__label h2 { font-size: 23px; font-weight: 500; letter-spacing: -.03em; }
.detail-section__label > span { font-size: 12px; }
.detail-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 24px; align-items: start; }
.detail-figure { min-width: 0; }
.detail-figure:first-child, .detail-figure--wide { grid-column: 1 / -1; }
.detail-image { display: block; position: relative; overflow: hidden; border-radius: 10px; background: #424242; width: 100%; }
.detail-image img { width: 100%; height: auto; object-fit: contain; }
.detail-image.project-gallery__tile { aspect-ratio: auto; grid-column: auto; }
.detail-image.project-gallery__tile img { height: auto; }
.detail-figure--portrait { grid-column: 1; }
.detail-figure--portrait + .detail-figure--wide { grid-column: 2; padding-top: 18%; }
.detail-figure figcaption { display: flex; gap: 20px; font-size: 12px; line-height: 1.3; padding-top: 12px; }
.detail-figure figcaption > span:first-child { opacity: .55; }
.detail-gallery--drawings .detail-figure:first-child { grid-column: 1 / -1; }
.drawing-image { background: white; padding: 14px; border-radius: 5px; }
.drawing-image img { transform: none; }
.drawing-index { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-bottom: 45px; font-size: 13px; }
.drawing-index a { border-bottom: 1px solid #aaa8a5; padding-bottom: 6px; }
.drawing-group + .drawing-group { margin-top: 65px; }
.drawing-group h3 { font-size: 20px; font-weight: 500; margin-bottom: 25px; }
.next-project { background: var(--paper); color: var(--black); display: grid; grid-template-columns: 1fr 3fr 50px; align-items: center; gap: 32px; padding: 65px var(--grid-margin); border-top: 1px solid #aaa8a5; border-radius: 0 0 18px 18px; }
.next-project > span:first-child { font-size: 12px; }
.next-project h2 { font-size: clamp(24px, 3vw, 42px); font-weight: 700; letter-spacing: -.04em; }
.next-project > .arrow { font-size: 38px; }
.image-viewer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: 18px 24px; margin: 0; background: #262626; color: var(--paper); border: none; z-index: 100; }
.image-viewer[open] { display: flex; flex-direction: column; }
.image-viewer::backdrop { background: #262626; }
.image-viewer__bar, .image-viewer__controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-shrink: 0; font-size: 13px; min-height: 44px; }
.image-viewer button { min-height: 44px; padding: 10px 5px; }
.image-viewer button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.image-viewer__stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding-block: 16px; }
.image-viewer__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.image-viewer.is-zoomed .image-viewer__stage { display: block; }
.image-viewer.is-zoomed .image-viewer__stage img { width: max(150%, 1600px); max-width: none; max-height: none; height: auto; }
.image-viewer__controls { border-top: 1px solid #62605e; }
.viewer-open { overflow: hidden; }
@media (max-width: 1000px) {
  .detail-heading { padding-top: 155px; }
  .overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
  .overview-note { grid-column: 4; grid-row: 1; padding: 10px 0; }
  .overview-note__number { font-size: 90px; }
  .overview-note p { font-size: 12px; }
  .overview-note a { flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .overview-card--1 { grid-column: 1 / 4; grid-row: 1; }
  .overview-card--2 { grid-column: 1 / 3; grid-row: 2; }
  .overview-card--3 { grid-column: 3 / 5; grid-row: 2; }
  .overview-card--4 { grid-column: 1 / 4; grid-row: 3; }
  .overview-card--5 { grid-column: 3 / 5; grid-row: 4; }
  .overview-card--6 { grid-column: 1 / 3; grid-row: 4; }
  .overview-card--7 { grid-column: 2 / 5; grid-row: 5; }
  .overview-card--2 .overview-card__image, .overview-card--3 .overview-card__image,
  .overview-card--5 .overview-card__image, .overview-card--6 .overview-card__image { aspect-ratio: 1.5; }
  .overview-card--3 .overview-card__caption { grid-template-columns: 1fr 20px; }
  .overview-card--3 .overview-card__number { display: none; }
  .overview-card--3 .overview-card__caption h3 { font-size: 13px; }
  .project-section__heading { grid-template-columns: 2fr 7fr 3fr; gap: 18px; }
  .project-section__body, .portfolio-project--dark .project-section__body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; }
  .portfolio-project--dark .project-cover { grid-column: 1; }
  .portfolio-project--dark .project-section__info { grid-column: 2; }
  .project-cover { aspect-ratio: 1.3; }
  .detail-heading__grid { gap: 40px; }
}
@media (max-width: 640px) {
  .portfolio-entry { padding-bottom: 26px; }
  .entry-bottom { gap: 36px; }
  .entry-statement { width: 58%; font-size: clamp(22px, 5.8vw, 29px); max-width: 18ch; }
  .entry-scroll { width: 52%; min-width: 0; font-size: 11px; }
  .portfolio-overview { padding-top: 26px; border-radius: 14px 14px 0 0; }
  .detail-heading { padding-top: 155px; }
  .overview-heading { gap: 18px; margin-bottom: 26px; }
  .overview-heading h2 { font-size: 27px; }
  .overview-count { font-size: 11px; }
  .overview-grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .overview-note { display: none; }
  .overview-card--1 { grid-column: 1 / -1; grid-row: 1; }
  .overview-card--2 { grid-column: 1; grid-row: 2; }
  .overview-card--3 { grid-column: 2; grid-row: 2; }
  .overview-card--4 { grid-column: 1 / -1; grid-row: 3; }
  .overview-card--5 { grid-column: 1; grid-row: 4; }
  .overview-card--6 { grid-column: 2; grid-row: 4; align-self: start; }
  .overview-card--7 { grid-column: 1 / -1; grid-row: 5; }
  .overview-card--2 .overview-card__image, .overview-card--3 .overview-card__image, .overview-card--5 .overview-card__image, .overview-card--6 .overview-card__image { aspect-ratio: 1; }
  .overview-card__image { border-radius: 10.2px; }
  .overview-card__caption, .overview-card--3 .overview-card__caption { grid-template-columns: 1fr 20px; gap: 8px; }
  .overview-card__number { display: none; }
  .overview-card__caption h3 { font-size: 13px; }
  .overview-card--1 .overview-card__caption h3, .overview-card--4 .overview-card__caption h3 { font-size: 19px; }
  .overview-card__type .arrow { font-size: 17px; }
  .overview-card__caption small { font-size: 11px; }
  .category-index { padding-block: 38px; }
  .category-index nav { grid-template-columns: 1fr; margin-top: 20px; }
  .category-index a { font-size: 13px; padding-block: 17px; }
  .category-heading { grid-template-columns: 1fr; gap: 15px; padding-block: 30px; }
  .category-heading h2 { font-size: 26px; }
  .project-category { padding-bottom: 35px; }
  .portfolio-project { padding: 16px 14px 24px; margin-inline: -4px; border-radius: 12px; }
  .project-section__top { font-size: 10px; gap: 16px; }
  .project-section__heading { grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 22px 16px; padding-block: 28px 22px; }
  .project-section__heading h2 { font-size: 26px; }
  .project-section__heading .m-work__number strong:first-of-type { font-size: 64px; }
  .project-section__heading .m-work__detail { grid-column: 2; font-size: 12px; }
  .project-section__heading .m-work__detail > div:first-child { display: none; }
  .project-section__heading .m-work__detail br { display: none; }
  .project-section__heading .m-work__detail span { margin-right: 8px; }
  .project-section__body, .portfolio-project--dark .project-section__body { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .project-cover { aspect-ratio: 1.35; }
  .project-section__info { gap: 22px; }
  .project-section__info p { max-width: none; font-size: 13.65px; }
  .project-cover .image-cue { display: none; }
  .portfolio-stats { padding-bottom: 60px; }
  .portfolio-stats__grid { grid-template-columns: 1fr; gap: 35px; margin-top: 36px; }
  .portfolio-stats .m-stats__number { font-size: 90px; }
  .detail-heading { padding-bottom: 36px; }
  .detail-heading__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 30px; }
  .detail-heading h1 { font-size: 34px; }
  .detail-location { font-size: 28px; }
  .detail-heading__info nav { margin-top: 22px; }
  .detail-section { padding-bottom: 40px; }
  .detail-gallery { display: flex; flex-direction: column; gap: 30px; }
  .detail-figure { width: 100%; }
  .detail-figure--portrait + .detail-figure--wide { padding-top: 0; }
  .detail-figure figcaption { font-size: 11px; gap: 12px; }
  .drawing-image { padding: 6px; }
  .next-project { grid-template-columns: 1fr 32px; gap: 18px; padding-block: 40px; }
  .next-project > span:first-child { grid-column: 1 / -1; }
  .next-project h2 { font-size: 26px; }
  .image-viewer { padding: 8px 14px; }
  .image-viewer__bar, .image-viewer__controls { font-size: 12px; }
  .image-viewer__bar p { max-width: 75%; }
}
@media (hover: none) { .detail-image .image-cue { opacity: 1; transform: none; padding: 8px 10px; right: 8px; bottom: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .overview-card:hover img, .overview-card, .project-cover, .detail-image { transform: none !important; }
  .motion-enabled .overview-card.is-below img, .motion-enabled .project-cover.is-below img, .motion-enabled .detail-image.is-below img { opacity: 1; }
}