/* Phone and tablet refinements. Desktop composition remains unchanged. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
.atmosphere { height: 100lvh; }
.mobile-bar { display: none; }
picture { display: contents; }

@media (max-width: 1100px) {
  :root { --gutter: max(clamp(20px, 4.2vw, 42px), env(safe-area-inset-left), env(safe-area-inset-right)); }
  .site-header {
    padding-top: max(22px, env(safe-area-inset-top));
    padding-bottom: 26px;
    background: linear-gradient(to bottom, #c6c6c6f5 10%, #c6c6c6bf 62%, #c6c6c600);
  }
  .brand { width: 210px; }
  .mobile-bar {
    display: flex; position: fixed; z-index: 31;
    bottom: max(12px, env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter);
    align-items: center; justify-content: space-between; gap: 14px;
    min-height: 60px; padding: 6px 16px;
    background: #c6c6c6f5; border: 1px solid #0f0f0e2e;
    box-shadow: 0 5px 26px #00000010;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .mobile-bar a, .mobile-bar button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 46px; font-size: 16px; line-height: 1.4; font-weight: 500;
  }
  .mobile-bar .mobile-menu-toggle { gap: 18px; }
  .mobile-menu-symbol { font-size: 22px; font-weight: 400; }
  .mobile-bar .mobile-apply { border-bottom: 2px solid var(--rose); }
  .chapter-nav, .chapter-nav.bio-nav {
    display: none; left: var(--gutter); right: var(--gutter); width: auto; max-width: none;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px);
    padding: 16px; margin: 0; gap: 5px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #c6c6c6fc; border: 1px solid #0f0f0e2e; box-shadow: 0 5px 26px #00000012;
    max-height: calc(100svh - 190px); overflow-y: auto;
    white-space: normal; font-size: 16px; line-height: 1.4; z-index: 32;
  }
  .mobile-menu-open .chapter-nav { display: grid; }
  .chapter-nav a, .chapter-nav a:first-child {
    display: flex; align-items: center; min-height: 48px; padding: 10px 3px; margin: 0;
  }
  .chapter-nav a::after { bottom: 3px; right: 12px; }
  .chapter-nav a[aria-current] { font-weight: 600; }
  .hero-section { padding-bottom: 175px; }
  .hero-copy { width: min(680px, 100%); }
  .surface-instruction { left: var(--gutter); right: auto; bottom: 118px; }
  .owner-section, .owner-section.photo-right,
  .curriculum-section.is-stacked, .bio-section, .bio-section.photo-right {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: auto; max-width: 780px; gap: 40px;
    padding: 76px var(--gutter) 84px;
  }
  .owner-section .owner-portrait, .owner-section.photo-right .owner-portrait,
  .curriculum-section.is-stacked .owner-portrait {
    order: 0; position: relative; top: auto; width: 100%; max-width: 620px; align-self: center;
  }
  .owner-section .owner-copy, .owner-section.photo-right .owner-copy,
  .curriculum-section.is-stacked .owner-copy {
    order: 1; width: 100%; max-width: 650px; align-self: center; margin-top: 0;
  }
  .owner-section .portrait-window, .owner-section .image-caption {
    width: min(100%, 560px, calc(max(260px, 100svh - 220px) * .8));
    margin-inline: auto;
  }
  .owner-deck { font-size: clamp(38px, 5.7vw, 60px); }
  .lindsey-role { font-size: clamp(27px, 3.8vw, 36px); }
  .owner-copy > p:not(.owner-deck):not(.eyebrow):not(.offering-price):not(.owner-statement) {
    font-size: 18px; line-height: 1.65;
  }
  .approach-section { max-width: 860px; padding: 76px var(--gutter) 84px; }
  .comparison-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
  .comparison-portrait {
    grid-row: 1; grid-column: 1 / -1; width: min(100%, 420px);
    max-width: calc(max(260px, 100svh - 220px) * .6675);
    aspect-ratio: 1335 / 2000; justify-self: center;
  }
  .comparison-portrait img { height: 100%; object-fit: cover; }
  .comparison-copy { align-self: start; min-width: 0; }
  .comparison-copy h3 { font-size: 34px; }
  .comparison-list strong, .comparison-list p { font-size: 17px; }
  .faq-section { display: block; max-width: 780px; padding: 76px var(--gutter) 90px; }
  .faq-intro { margin-bottom: 36px; }
  .faq-list summary { padding-block: 22px; min-height: 60px; }
  .faq-list summary::after { top: 21px; }
  .faq-list details > p { font-size: 17px; max-width: none; }
  .bio-section:first-of-type { padding-top: 138px; }
  .bio-back { min-height: 44px; }
  .bio-copy .owner-deck { font-size: clamp(40px, 5.7vw, 60px); }
  .closing-section { padding-bottom: calc(125px + env(safe-area-inset-bottom)); }
  .experience-settings button { min-height: 44px; min-width: 100px; }
  .render-status { bottom: calc(90px + env(safe-area-inset-bottom)); }
  dialog { padding: 64px 32px 34px; max-height: calc(100svh - 40px); overflow-y: auto; }
  .dialog-close { min-width: 44px; min-height: 44px; top: 8px; right: 12px; }
}

@media (max-width: 600px) {
  .brand { width: 122px; }
  .brand-wide { display: none; }
  .brand-compact { display: block; width: 100%; height: auto; }
  .site-header { padding-bottom: 22px; }
  .bio-back { font-size: 14px; gap: 6px; }
  .hero-section { min-height: 100svh; padding-top: 140px; padding-bottom: 185px; }
  .hero-copy h1 { font-size: clamp(32px, 8.7vw, 52px); line-height: 1.14; }
  .owner-section, .owner-section.photo-right, .bio-section, .bio-section.photo-right,
  .curriculum-section.is-stacked { gap: 32px; padding-top: 48px; padding-bottom: 68px; }
  .owner-section .portrait-window, .owner-section .image-caption {
    width: min(100%, calc(max(200px, 100svh - 210px) * .8)); max-width: 420px;
  }
  .owner-section .owner-deck { font-size: clamp(34px, 8.9vw, 48px); margin-bottom: 25px; }
  .owner-copy .owner-statement { font-size: clamp(29px, 7.4vw, 37px); }
  .owner-section .lindsey-role { font-size: clamp(25px, 6.5vw, 32px); }
  .owner-copy > p:not(.owner-deck):not(.eyebrow):not(.offering-price):not(.owner-statement) { font-size: 17px; line-height: 1.68; }
  .owner-copy > p + p { margin-top: 22px; }
  .image-caption { font-size: 13px; line-height: 1.5; margin-top: 13px; }
  .portfolio-link { font-size: 16px; gap: 14px; padding-inline: 16px; min-height: 50px; }
  .approach-section { padding-top: 48px; padding-bottom: 68px; }
  .section-intro { margin-bottom: 34px; }
  .section-intro h2 { font-size: clamp(34px, 8.4vw, 46px); }
  .comparison-layout { display: flex; flex-direction: column; gap: 34px; }
  .comparison-portrait { order: 0; width: min(100%, 360px); max-width: calc(max(200px, 100svh - 210px) * .6675); align-self: center; }
  .comparison-copy { order: 1; align-self: stretch; }
  .comparison-copy h3 { font-size: 34px; }
  .comparison-list li { padding-block: 17px; }
  .owner-copy > p.offering-price { font-size: 60px; }
  .offering-price > span { font-size: 14px; letter-spacing: .015em; }
  .offering-inclusions span { font-size: 16px; line-height: 1.6; }
  .apply-button { width: 100%; min-width: 0; }
  .faq-section { padding-top: 48px; padding-bottom: 68px; }
  .faq-intro h2 { font-size: clamp(42px, 10vw, 56px); }
  .faq-list summary { font-size: 17px; }
  .faq-list details > p { padding-right: 0; }
  .bio-section:first-of-type { padding-top: 126px; }
  .bio-focus-list dd { line-height: 1.6; }
  .bio-client-list li { font-size: 17px; }
  .closing-colophon h2 { font-size: clamp(36px, 9.5vw, 56px); }
  .closing-location { font-size: 16px; }
  .closing-colophon .closing-mark .closing-seal { width: 160px; height: 160px; }
  .mobile-bar { padding-inline: 12px; gap: 10px; }
  .mobile-bar a, .mobile-bar button { font-size: 15px; }
  .chapter-nav, .chapter-nav.bio-nav { padding: 12px 14px; gap: 4px 12px; }
  dialog { padding-inline: 24px; }
  dialog h2 { font-size: clamp(34px, 9vw, 46px); }
}

@media (max-height: 560px) and (max-width: 1100px) and (orientation: landscape) {
  .brand { width: 140px; }
  .brand-wide { display: block; }
  .brand-compact { display: none; }
  .site-header { padding-top: max(14px, env(safe-area-inset-top)); }
  .hero-section { min-height: 560px; }
  .chapter-nav, .chapter-nav.bio-nav { max-height: calc(100svh - 105px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .owner-section .portrait-window, .owner-section .image-caption {
    width: min(100%, calc(max(150px, 100svh - 160px) * .8));
  }
}

@media (pointer: coarse) {
  a, button, summary { touch-action: manipulation; }
  button:hover, a:hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-window, .portrait-window img, .comparison-portrait, .comparison-portrait img { will-change: auto; }
}