/* Phone and short touch-screen layouts retain all content in a vertical reading flow. */
@media (max-width:760px), (pointer:coarse) and (max-height:500px) {
  html.pool-entry.project-is-open .site-header { visibility: hidden; }
  .pool-home .home-contact-link { min-height: 44px; font-size: 13px; }
  .pool-home .brand { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
  .pool-home .pool-about, .pool-home .pool-contact { min-height: 44px; min-width: 64px; }
  .project-stage-bar { height: 48px; padding-inline: 20px; }
  .project-stage-bar button { min-height: 44px; padding: 8px 0; font-size: 13px; }
  .project-stage-bar span { display: none; }

  html.pool-entry .project-stage[data-about-open] { --about-dock-height: 66px; }
  html.pool-entry .project-about-viewport { overflow-x: hidden; overflow-y: auto; touch-action: pan-y pinch-zoom; }
  html.pool-entry .project-stage[data-about-open] .project-about-content {
    display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0;
    align-items: stretch; gap: 36px; padding: 22px 20px 32px;
  }
  html.pool-entry .project-about-content::after { display: none; }
  html.pool-entry .project-stage[data-about-open] .project-about-intro,
  html.pool-entry .project-stage[data-about-open] .project-about-cards,
  html.pool-entry .project-stage[data-about-open] .project-about-history,
  html.pool-entry .project-stage[data-about-open] .project-about-photos {
    width: 100%; height: auto; min-height: 0; max-width: none;
  }
  html.pool-entry .project-stage[data-about-open] .project-about-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html.pool-entry .project-stage[data-about-open] .project-about-portrait {
    width: min(64vw, 240px); height: min(64vw, 280px); min-height: 0; margin: 0 auto;
  }
  html.pool-entry .project-stage[data-about-open] .project-about h1 { font-size: clamp(28px, 8vw, 34px); margin: 12px 0 18px; }
  html.pool-entry .project-stage[data-about-open] .project-about .project-about-lead { font-size: 20px !important; margin-top: 14px; }
  html.pool-entry .project-stage[data-about-open] .project-about-bio-copy .project-about-bio {
    font-size: clamp(16px, 4.6vw, 18px); line-height: 1.8; margin-top: 24px;
  }
  html.pool-entry .project-stage[data-about-open] .project-about-cards { grid-template-rows: auto auto; gap: 16px; }
  html.pool-entry .project-stage[data-about-open] .project-about-card { padding: 22px; }
  html.pool-entry .project-stage[data-about-open] .project-about-history { overflow: visible; padding-right: 0; }
  html.pool-entry .project-stage[data-about-open] .project-about-photo-stack { height: clamp(330px, 100vw, 430px); flex: none; }
  html.pool-entry .project-stage[data-about-open] .project-about-photo-stack img { width: 64%; translate: none; }

  html.pool-entry .project-stage:not([data-about-open]) { inset: 116px 0 0; padding-right: 0; }
  html.pool-entry .project-stage:not([data-about-open]) > .hero {
    top: 8px; bottom: auto; left: 12px; right: 12px;
    width: calc(100% - 24px); height: 96px; min-height: 0; aspect-ratio: auto;
  }
  html.pool-entry .project-stage:not([data-about-open]) .project-guide-progress { display: none; }
  html.pool-entry .project-stage:not([data-about-open]) .project-stage-frame { margin-left: 0; width: 100%; }
  html.pool-entry.project-is-open .pool-home .project-stage:not([data-about-open]) .pool-dock {
    inset: 0 20%; display: flex; flex-direction: row; align-items: center; justify-content: space-around; gap: 0;
  }
  html.pool-entry.project-is-open .pool-home .project-stage:not([data-about-open]) .pool-dock a,
  html.pool-entry.project-is-open .pool-home .project-stage:not([data-about-open]) .pool-project-icon {
    width: 44px; height: 44px; margin: 0; padding: 0;
  }
  html.pool-entry.project-is-open .project-stage:not([data-about-open]) .pool-side-character {
    display: block; top: 50%; bottom: auto; left: 10%; right: auto;
    width: 44px; height: 44px; translate: -50% -50%; pointer-events: auto;
  }
  html.pool-entry.project-is-open .project-stage:not([data-about-open]) .pool-side-cloud { left: 90%; }
  html.pool-entry.beyond-pool-open .pool-return-home { left: 6px; width: 44px; min-height: 44px; font-size: 10px; }
  html.pool-entry.beyond-pool-open .pool-side-girl { left: 25%; width: 44px; height: 44px; }
  html.pool-entry.beyond-pool-open .pool-side-cloud { left: 89%; width: 44px; height: 44px; }
  html.pool-entry.beyond-pool-open .pool-dock a:nth-child(1) { left: 41%; }
  html.pool-entry.beyond-pool-open .pool-dock a:nth-child(2) { left: 57%; }
  html.pool-entry.beyond-pool-open .pool-dock a:nth-child(3) { left: 73%; }
  html.pool-entry.beyond-pool-open .pool-dock a,
  html.pool-entry.beyond-pool-open .pool-project-icon { width: 44px; height: 44px; }
  .pool-home .contact-bottom { font-size: 12px; }
  .pool-home .contact-bottom button, .pool-home .contact-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
  .project-about-card .contact-copy-number, .project-about-card a { min-height: 44px; }
}
@media (hover:none), (pointer:coarse) {
  .project-peek:not(.is-weather) { display: none !important; }
}
@media (pointer:coarse) and (max-height:500px) {
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero-copy { top: 25%; }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero h1 { font-size: 32px; line-height: 1.08; }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero-kicker { font-size: 9px; margin-bottom: 8px; }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero-tagline { font-size: 13px; line-height: 1.5; margin-top: 8px; }
  html.pool-entry .project-stage[data-about-open] .project-about-content { max-width: 700px; margin: 0 auto; }
  html.pool-entry .project-stage[data-about-open] .project-about-intro { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; }
  html.pool-entry .project-stage[data-about-open] .project-about-portrait { width: 180px; height: 240px; }
}
@media (max-width:760px), (pointer:coarse) and (max-height:500px) {
  html.pool-entry.project-is-open .project-stage > .hero .hero-art,
  html.pool-entry.beyond-pool-open > body > .hero .hero-art {
    background: #00bce7 url('/assets/pool-hero.webp?v=8') center 48% / 180% auto no-repeat;
  }
  html.pool-entry.project-is-open .project-stage > .hero .hero-art picture,
  html.pool-entry.project-is-open .project-stage > .hero .water-surface,
  html.pool-entry.beyond-pool-open > body > .hero .hero-art picture,
  html.pool-entry.beyond-pool-open > body > .hero .water-surface { visibility: hidden; }
}
/* Reserve room for the hosting badge, which this site's plan keeps enabled. */
@media (max-width:760px), (pointer:coarse) and (max-height:500px) {
  html.pool-entry .project-stage[data-about-open] { padding-bottom: calc(var(--about-dock-height) + 80px); }
  html.pool-entry .pool-home .project-stage[data-about-open] > .hero { bottom: 68px; }
  html.pool-entry[data-pool-page] body > #contact { margin-bottom: 84px; }
}
@media (pointer:coarse) and (max-height:500px) {
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .pool-home .hero {
    width: min(93.4vw, calc((100svh - 124px) * 1.78));
  }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) main {
    --home-pool-height: min(calc(93.4vw / 1.78), calc(100svh - 124px));
  }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero-copy { top: 23%; }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero h1 { font-size: 28px; }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero-kicker { font-size: 8px; margin-bottom: 6px; }
  html.pool-entry:not(.project-is-open):not(.beyond-pool-open) .hero-tagline { font-size: 12px; line-height: 1.4; margin-top: 6px; }
}