/* Larger closing-page typography and room for the contact details. */
.thanks > .chapter { font-size: 1.25rem; }
.thanks > h2 { font-size: clamp(3rem, 4.8vw, 4.8rem); }
.thanks .contacts { width: min(100%, 29rem); }
.thanks .contacts h3 { font-size: 1.25rem; }
.thanks .contacts dl > div { font-size: 1.1875rem; line-height: 1.55; }
@media (min-width: 440px) {
  .thanks .contacts dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* Page-specific compositions; images always retain their original aspect ratio. */
.keta-plans { display: contents; }
/* Match the glass tower and entrance in this pair, using uniform scale and position. */
@media screen {
  #prima-dopo .comparison.is-ready .comparison-layer { overflow: hidden; }
  #prima-dopo .comparison.is-ready .comparison-before img {
    transform-origin: top left;
    transform: translate(-20.2%, -18.3%) scale(1.333333);
  }
}
@media (max-width: 759px) {
  .keta-plans > figure { grid-column: auto; grid-row: auto; }
}
@media screen {
  .paged-portfolio .profile-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr) minmax(0, .7fr);
    align-items: stretch;
  }
  .paged-portfolio .identity { display: flex; flex-direction: column; }
  .paged-portfolio .portrait { width: min(86%, 250px); }
  .paged-portfolio .identity-details { display: flex; flex: 1; flex-direction: column; }
  .paged-portfolio .identity-details .contacts { margin-top: auto; padding-top: 24px; }
  .paged-portfolio .profile-section { margin-top: 24px; }
  .paged-portfolio .software-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
  .paged-portfolio .contents { display: flex; flex-direction: column; }
  .paged-portfolio .contents ol { display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
  .paged-portfolio .contents a { grid-template-columns: 1.5rem 1.5rem minmax(0, 1fr); }

  /* Keta: image and three-paragraph description, with the plans grouped at right. */
  .paged-portfolio .keta-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; }
  .paged-portfolio .keta-hero { grid-column: 1; grid-row: 1; }
  .paged-portfolio .keta-copy {
    grid-column: 1; grid-row: 2;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; align-content: start;
  }
  .paged-portfolio .keta-copy p + p { margin-top: 0; }
  .paged-portfolio .keta-plans {
    grid-column: 2; grid-row: 1 / 3;
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  }

  /* Column ratios account for the complete stack, not just its first image. */
  .paged-portfolio .gallery-keta { grid-template-columns: minmax(0, 3.33fr) minmax(0, 1fr); }
  .paged-portfolio .gallery-cava { grid-template-columns: minmax(0, 1.784fr) minmax(0, 1fr); }
  .paged-portfolio .gallery { align-items: stretch; }
  .paged-portfolio .gallery > .image-stack { justify-content: space-between; }

  /* Elevation and description share a baseline beneath the Eduso façade. */
  .paged-portfolio .eduso-details { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; }
  .paged-portfolio .eduso-details > .drawing {
    contain: size; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  }
  .paged-portfolio .eduso-details > .drawing img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }

  /* Plans align within equal cells; the roof plan follows the complete grid height. */
  .paged-portfolio .eduso-plans { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; }
  .paged-portfolio .roof-plan {
    contain: size; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  }
  .paged-portfolio .roof-plan img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
  .paged-portfolio .plan-detail-grid { align-items: stretch; }
  .paged-portfolio .plan-detail-grid > figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .paged-portfolio .plan-detail-grid img { width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; }

  /* Let the hero establish the column height; fit the secondary image above/below text. */
  .paged-portfolio .cava-grid, .paged-portfolio .clema-grid { align-items: stretch; }
  .paged-portfolio .cava-grid > .image-stack, .paged-portfolio .clema-grid > .image-stack {
    contain: size; display: grid; min-height: 0;
  }
  .paged-portfolio .cava-grid > .image-stack { grid-template-rows: minmax(0, 1fr) auto; }
  .paged-portfolio .clema-grid > .image-stack { grid-template-rows: auto minmax(0, 1fr); }
  .paged-portfolio .cava-grid > .image-stack > figure,
  .paged-portfolio .clema-grid > .image-stack > figure {
    display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0;
  }
  .paged-portfolio .cava-grid > .image-stack > figure img,
  .paged-portfolio .clema-grid > .image-stack > figure img {
    width: 100%; height: 100%; min-height: 0; object-fit: contain;
  }
  /* A dedicated image cell prevents Safari from sizing the image over its caption. */
  .paged-portfolio .fitted-media { position: relative; min-height: 0; min-width: 0; }
  .paged-portfolio .fitted-media img { position: absolute; inset: 0; }
  .paged-portfolio .clema-grid > .image-stack > figure { grid-template-rows: minmax(0, 1fr); }

  /* Cava's plan uses its full column width; the shorter copy fills the space below. */
  .paged-portfolio .cava-grid > .image-stack { contain: none; display: flex; }
  .paged-portfolio .cava-grid > .image-stack > figure { display: block; }
  .paged-portfolio .cava-grid .fitted-media { position: static; }
  .paged-portfolio .cava-grid > .image-stack > figure img {
    position: static; width: 100%; height: auto;
  }
  .paged-portfolio .cava-grid .project-copy { flex: 1; }

  .paged-portfolio .clema-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
  .paged-portfolio .clema-grid > .image-stack { contain: none; display: flex; }
  .paged-portfolio .clema-grid > .image-stack > figure { display: block; }
  .paged-portfolio .clema-grid .fitted-media { position: static; }
  .paged-portfolio .clema-grid > .image-stack > figure img {
    position: static; width: 100%; height: auto;
  }
  .paged-portfolio .clema-grid .project-copy { flex: 1; }

  .paged-portfolio .construction-grid {
    grid-template-columns: max-content max-content;
    gap: 64px; padding-inline: 0; justify-content: center;
  }
  .paged-portfolio .construction-grid img { height: 660px; width: auto; max-width: none; }

  .paged-portfolio .clema-layout-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .paged-portfolio .clema-layout-grid > .drawing {
    contain: size; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  }
  .paged-portfolio .clema-layout-grid > .drawing img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
}

/* Keep drawing captions equally readable after each desktop page is scaled to fit. */
figcaption { font-size: .8125rem; line-height: 1.4; padding-top: 12px; }
#clema-layout figcaption { padding-top: 18px; }
@media screen {
  .paged-portfolio figcaption {
    font-size: calc(.8125rem / var(--page-scale, 1));
    padding-top: calc(12px / var(--page-scale, 1));
  }
  .paged-portfolio #clema-layout figcaption { padding-top: calc(18px / var(--page-scale, 1)); }
}

/* Page 08: trim the ceiling while preserving the furniture and the image proportions. */
#clema .clema-living-room { position: relative; aspect-ratio: 1253 / 1066; overflow: hidden; }
#clema .clema-grid .clema-living-room img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}

/* Keep the profile at the shared page width, with its former 20% text enlargement. */
@media screen {
  .paged-portfolio #profilo { font-size: 1.2rem; }
  .paged-portfolio #profilo h2 { font-size: clamp(1.62rem, 2.28vw, 2.1rem); }
  .paged-portfolio #profilo h3 { font-size: 1.2rem; }
  .paged-portfolio #profilo .identity h1 { font-size: clamp(1.62rem, 2.28vw, 2.22rem); }
  .paged-portfolio #profilo .profession { font-size: 1.275rem; }
  .paged-portfolio #profilo .contacts dl > div {
    font-size: 1rem;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: .75rem;
  }
  .paged-portfolio #profilo .contacts dd { white-space: nowrap; }
  .paged-portfolio #profilo .profile-copy .lead { font-size: 1.35rem; }
  .paged-portfolio #profilo .contents a { font-size: 1.125rem; }
  .paged-portfolio #profilo .contents-labels { font-size: .9rem; }
  .paged-portfolio #profilo .page-number { font-size: .975rem; }
  .paged-portfolio #profilo .page-header a { font-size: 1.05rem; }
  .paged-portfolio #profilo .page-footer { font-size: .9rem; }
}