/* Mobile reading and interaction comfort, on the approved visual foundation. */
html { scrollbar-gutter: stable; }

/* The existing deep olive keeps running text readable on limestone at every size. */
.limestone-section p:not(.eyebrow),
.limestone-section .eyebrow,
.limestone-section .config-steps span,
.limestone-section .caption,
.limestone-section .caption span:last-child { color: var(--deep); }

:is(.hero, .section-heading, .page-hero-inner, .page-intro, .split,
    .project-grid, .model-layout, .service-grid, .detail-grid, .team-pictures,
    .workmanship-grid, .gallery-wide, .process-grid, .water-grid, .faq-grid,
    .contact-inner, .config-section, .architect-block, .footer-top) > * { min-width: 0; }
.olive-section :is(a, button):focus-visible,
.contact-section :is(a, button):focus-visible { outline-color: var(--ivory); }
.gallery-dialog { overflow-y: auto; overscroll-behavior: contain; }
.dialog-media { flex-shrink: 0; }
.skip-link { top: 12px; transform: translateY(calc(-100% - 24px)); }
.skip-link:focus { transform: none; }
.steps li > *, .config-steps li > * { min-width: 0; }

@media (max-width: 820px) {
  body { font-size: 1.125rem; line-height: 1.75; }
  main p, main li, .footer-note { overflow-wrap: break-word; }

  main .hero-intro,
  main .section-heading .aside,
  main .service-copy > p:not(.eyebrow),
  main .prose p,
  main .service-list li,
  main .founders-intro,
  main .owner p,
  main .steps p,
  main .water-card p:not(.eyebrow):not(.small),
  main .process-intro p,
  main .architect-block p,
  main .model-panel p,
  main details > div,
  main details p,
  main .faq-grid > div > p:not(.eyebrow),
  main .config-section p:not(.eyebrow),
  main .contact-section p:not(.eyebrow),
  main .page-hero .lead,
  main .detail-grid p,
  main .model-cards p:not(.small),
  main .note-block p,
  .footer-note {
    font-size: 1.125rem;
    line-height: 1.75;
  }
  .page-intro .prose > p:first-child { font-size: 1.25rem; line-height: 1.7; }
  .hero-note, .model-note, .small,
  main .water-card p.small,
  .owner .role, .model-facts,
  .project-card figcaption p,
  .contact-methods small {
    font-size: 1rem;
    line-height: 1.65;
  }
  .intro-strip .wrap { font-size: 1rem; line-height: 1.65; }
  .eyebrow, .hero .eyebrow, .page-hero .eyebrow,
  .footer-label, .project-kind, .contact-methods span {
    font-size: .8125rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .caption, .team-pictures .caption { font-size: .875rem; line-height: 1.6; }
  .caption span { max-width: 100%; overflow-wrap: anywhere; }
  .team-pictures .caption strong { font-size: 1.0625rem; }
  .config-steps strong { font-size: 1.125rem; line-height: 1.55; }
  .config-steps span, .step-num { font-size: .9375rem; }

  .olive-section .text-link:hover { color: var(--paper); }

  .button, .text-link, .page-anchor, .filter-button,
  .model-tab, .menu-toggle, .dialog-navigation button,
  .dialog-original, .dialog-close { touch-action: manipulation; }
  .button, .hero .button {
    min-height: 54px;
    max-width: 100%;
    padding: 15px 20px;
    font-size: 1.0625rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .button > span, .text-link > span { flex-shrink: 0; }
  .text-link { min-height: 48px; max-width: 100%; font-size: 1.0625rem; line-height: 1.5; overflow-wrap: anywhere; }
  .filter-button, .page-anchor {
    min-height: 50px;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    border-color: var(--olive);
  }
  .filter-button { padding: 12px 16px; }
  .filter-button[aria-pressed="true"] { border-color: var(--deep); }
  .model-tab { min-width: 48px; min-height: 54px; padding: 13px 4px; font-size: 1rem; line-height: 1.5; }
  .menu-toggle { min-width: 88px; min-height: 52px; font-size: 1rem; line-height: 1.4; }
  .site-nav { padding-bottom: calc(25px + env(safe-area-inset-bottom)); }
  .site-nav > a { min-height: 52px; font-size: 1.125rem; line-height: 1.5; }
  .breadcrumbs { align-items: center; font-size: 1rem; gap: 8px 12px; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .detail-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .detail-links a { min-width: 0; min-height: 52px; font-size: 1.0625rem; line-height: 1.5; padding-block: 18px; overflow-wrap: anywhere; }
  .detail-links a > span { flex-shrink: 0; }
  summary { min-height: 54px; font-size: 1.125rem; line-height: 1.55; overflow-wrap: anywhere; }
  .footer-links a { min-height: 44px; padding-block: 6px; font-size: 1rem; line-height: 1.6; }
  .footer-bottom { font-size: .875rem; line-height: 1.6; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
  .contact-methods strong { font-size: clamp(1.25rem, 2vw, 1.4375rem); line-height: 1.5; }
  .contact-methods a[href^="mailto:"] strong { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); }

  /* The full photo remains intact. At enlarged text sizes the dialog scrolls
     vertically instead of squeezing its image underneath the controls. */
  .dialog-header h2 { font-size: 1.6875rem; line-height: 1.25; overflow-wrap: anywhere; }
  .dialog-credit { font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
  .dialog-caption { display: block; font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; }
  .dialog-status { font-size: 1.125rem; line-height: 1.65; }
  .dialog-actions { flex-wrap: wrap; row-gap: 8px; }
  .dialog-navigation { flex-wrap: wrap; max-width: 100%; }
  .dialog-navigation button { min-width: 48px; min-height: 48px; font-size: 1rem; line-height: 1.4; border-color: var(--olive); }
  .dialog-count { font-size: 1rem; line-height: 1.5; }
  .dialog-original { min-height: 48px; font-size: 1rem; line-height: 1.5; }
  .dialog-close { flex-basis: 48px; width: 48px; height: 48px; min-height: 48px; }
  .dialog-photo { max-height: max(100px, calc(100dvh - 16rem)); }
}
@media (max-width: 540px) {
  .detail-links { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  .dialog-header h2 { font-size: 1.4375rem; }
}
@media (max-width: 820px) and (max-height: 550px) {
  .dialog-header h2 { font-size: 1.3125rem; }
}

/* Explain the last configurator step beside its existing entry points. */
p.config-expectation,
main .config-section p.config-expectation,
main .contact-section p.config-expectation {
  max-width: 56ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}
.hero p.config-expectation { max-width: 460px; }
.hero .actions p.config-expectation { margin: 0; }
main .contact-section p.config-expectation { color: #dedfd4; }
main .limestone-section p.config-expectation { color: var(--deep); }

/* Keep contextual links recognisable within the existing running text. */
.content-link {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.content-link:hover { color: var(--deep); }