/* Approved readiness fixes: preserve the desktop composition outside these ranges. */
.field-error{display:block;margin-top:6px;color:#ffd8b4;font-size:12px;line-height:1.45}
.field-error[hidden]{display:none}
.prototype-label{color:#e5d8c3;font-size:9px;letter-spacing:.5px}
@media(max-width:700px){
  footer{flex-wrap:wrap;gap:2px 12px;padding-top:7px;padding-bottom:9px}
  footer .prototype-label{display:block;order:3;flex-basis:100%;font-size:9px}
  #still-mode{bottom:72px}
  .chapter{bottom:94px}
  .chapter{top:max(130px,var(--header-clearance,130px));bottom:max(94px,var(--footer-clearance,94px))}
  #still-mode{bottom:max(72px,calc(var(--footer-clearance,94px) - 30px))}
  .hero{bottom:max(14svh,var(--footer-clearance,94px));max-height:min(54svh,calc(100dvh - var(--header-clearance,130px) - var(--footer-clearance,94px)))}
}
/* Tablet contact has one scroll owner, with a clear window onto the real framed
   portrait before the introduction and form enter normal vertical flow. */
@media(min-width:701px) and (max-width:1100px){
  #contact{overflow:auto;overscroll-behavior:contain;pointer-events:auto;display:flex;flex-direction:column;gap:24px;padding:0 6px 24px;scrollbar-width:thin}
  #contact>.about,#contact>#enquiry,#contact>.contact-bottom{position:relative;inset:auto;width:100%;max-width:none;flex-shrink:0;max-height:none;overflow:visible}
  #contact>.about{margin-top:36svh}
  #contact>#enquiry{margin-top:0}
  #contact>.contact-bottom{justify-content:space-between;flex-wrap:wrap}
  #contact .reading-surface{background:#171b15ed}
}
/* Short screens, including a desktop viewport at 200% zoom, need content flow
   instead of absolutely positioned reading columns. */
@media(max-height:700px){
  .chapter,#work{inset:105px 4vw 90px;overflow:auto;overscroll-behavior:contain;pointer-events:auto;display:flex;flex-direction:column;gap:24px;padding:16px 12px 28px;scrollbar-width:thin;background:#11150d80}
  .chapter>*,#work .gallery-zone,#work .work-story,#work .reviews,#contact>.about,#contact>#enquiry,#contact>.contact-bottom{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;max-height:none;flex-shrink:0;margin:0;overflow:visible}
  #work .work-story{order:0;background:#16150ee8;padding:18px}
  #work .gallery-zone{order:1;padding:20px 0}
  #work .reviews{order:2;background:#16150ee8;padding:20px}
  #work #fan{height:300px;max-height:none;max-width:520px;margin:0 auto 18px}
  #work .work-story h2{font-size:38px}
  #work .work-story h2 br{display:none}
  #work .review-grid p{font-size:16px}
  #work .chapter-actions{flex-wrap:wrap}
  .chapter .reading-surface{max-height:none;overflow:visible}
  .services .service-heading{background:#17150ee8;padding:18px}
  #contact>.about{margin-top:90px}
  .hero{top:105px;bottom:90px;left:5vw;width:90vw;max-height:none;overflow:auto}
  .hero h1{font-size:38px}
  #lightbox,#review-photo-dialog{height:96dvh;max-height:96dvh;padding-top:40px;gap:5px}
  #lightbox-caption,#review-photo-caption{font-size:12px}
  #reviews-dialog{max-height:94dvh}
  .reviews-header{padding:12px 20px}.reviews-header h2{font-size:23px}
  .reviews-footer{padding:10px 20px}
}
@media(max-height:700px){.chapter,#work,.hero{top:max(105px,var(--header-clearance,105px));bottom:max(90px,var(--footer-clearance,90px))}}
@media(max-height:700px) and (max-width:700px){.chapter,#work,.hero{top:max(130px,var(--header-clearance,130px));bottom:max(94px,var(--footer-clearance,94px))}}