/* Keep the layout viewport independent of decorative artwork. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.asterisk-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  flex-shrink: 0;
}
.brand-mark { display: inline-flex; line-height: 1; }
.hero { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.hero > *, .about-layout > *, .journey-layout > *, .project-card { min-width: 0; }
.project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.project-card { width: 100%; }
.contact::before { pointer-events: none; }

@media (max-width: 1100px) {
  .hero::before { right: 0; max-width: 100%; }
  .hero .hero-art {
    /* Contain rotated petals and rings, rather than clipping the entire page. */
    overflow: hidden;
    overflow: clip;
  }
  .hero .flower { width: 76%; height: auto; aspect-ratio: 1; scale: 1; }
  .hero .flower > span { width: 35.64%; height: 55.9%; left: 32.18%; }
  .hero .flower > span:nth-child(2n) { width: 32.82%; height: 52.56%; left: 33.59%; }
  .hero .flower-center { width: 12.3%; height: 12.3%; left: 43.85%; top: 43.85%; }
  .hero .flower-center::after { inset: 15%; }
  .hero .orbit-one { width: 92%; height: auto; aspect-ratio: 1; }
  .hero .orbit-two { width: 80%; height: auto; aspect-ratio: 1.4; }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero .hero-name { font-size: clamp(54px,18.5vw,104px); }
  .hero .hero-name em { max-width: 100%; }
  .hero .hero-actions { flex-wrap: wrap; row-gap: 16px; }
  .hero .hero-art {
    height: auto;
    min-height: 0;
    max-width: 100%;
    aspect-ratio: 1;
    margin-top: 18px;
    border-radius: 0;
  }
  .hero .flower {
    width: 76%;
    height: 76%;
    left: 50%;
    top: 50%;
    scale: 1;
    filter: drop-shadow(6px 12px 10px #a67d2720);
  }
  .hero .flower > span {
    width: 35.64%;
    height: 55.9%;
    left: 32.18%;
  }
  .hero .flower > span:nth-child(2n) {
    width: 32.82%;
    height: 52.56%;
    left: 33.59%;
  }
  .hero .flower-center {
    width: 12.3%;
    height: 12.3%;
    left: 43.85%;
    top: 43.85%;
  }
  .hero .flower-center::after { inset: 15%; }
  .hero .orbit { top: 50%; }
  .hero .orbit-one { width: 92%; height: auto; aspect-ratio: 1; }
  .hero .orbit-two { width: 80%; height: auto; aspect-ratio: 1.4; }
  .bloom-accent.one { top: 12%; right: 7%; }
  .bloom-accent.two { bottom: 14%; left: 6%; }
  .hero .hero-bottom { gap: 12px; line-height: 1.7; }
  .hero .hero-bottom > span:last-child { text-align: right; }
  .hero .scroll-arrow { margin-left: 6px; }
  .project-grid { grid-template-columns: minmax(0,1fr); }
  .project-card h3 { gap: 10px; }
  .project-card h3 > span { flex-shrink: 0; }
  .preview-tools {
    width: max-content;
    max-width: calc(100% - 24px);
    bottom: max(12px,env(safe-area-inset-bottom));
    gap: 12px;
    white-space: nowrap;
  }
  .preview-tools > span { flex-shrink: 0; }
  .preview-tools #motion-toggle { min-height: 36px; }
  dialog {
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dialog-close { min-width: 44px; min-height: 44px; top: 4px; right: 4px; }
}