/* All layout changes stop before desktop. The dialog is closed by default. */
@media (max-width: 1099px) {
  .home-hero header > nav,
  .b3.b-header > nav { display: none; }
  .home-hero header,
  .b3.b-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10001;
    gap: 16px;
    height: calc(56px + env(safe-area-inset-top));
    padding: calc(6px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 6px max(20px, env(safe-area-inset-left));
    background: #17181a;
    color: #ece8e1;
    border-bottom: 1px solid #ece8e133;
  }
  body.inner { padding-top: calc(56px + env(safe-area-inset-top)); }
  html { scroll-padding-top: calc(72px + env(safe-area-inset-top)); }
  .home-hero header .mark { top: 0; }
  .home-hero header .mark .logo,
  .b3.b-header .brand .logo { width: 132px; height: 44px; }
  .home-hero .actions :is(.door, .link) { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .phone-menu-toggle,
  .phone-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid currentColor;
    border-radius: 0;
    background: #17181a;
    color: #ece8e1;
    font: 400 16px/1.4 'Public Sans', sans-serif;
    cursor: pointer;
  }
  .phone-menu-toggle { margin-left: auto; flex-shrink: 0; }
  .phone-menu-toggle[hidden] { display: none; }
  .home-hero header .mark,
  .b3.b-header .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .phone-menu-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    box-sizing: border-box;
    border: 0;
    background: #17181a;
    color: #ece8e1;
    overflow-y: auto;
    overscroll-behavior: contain;
    font: 400 16px/1.5 'Public Sans', sans-serif;
  }
  .phone-menu-panel[open] { display: flex; flex-direction: column; gap: 20px; }
  .phone-menu-panel::backdrop { background: #17181a; }
  .phone-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .phone-menu-heading h2 { margin: 0; font: 400 18px/1.4 'Public Sans', sans-serif; }
  .phone-menu-panel nav { display: grid; gap: 0; font: inherit; letter-spacing: 0; text-transform: none; }
  .phone-menu-panel nav { flex-shrink: 0; }
  .phone-menu-panel nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #ece8e133;
    color: inherit;
    text-decoration: none;
  }
  .phone-menu-panel nav a[aria-current] { color: #d3977b; }
  .phone-menu-panel .phone-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 52px;
    padding: 10px 16px;
    border: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
  }
  .phone-menu-panel :is(a, button):focus-visible,
  .phone-menu-toggle:focus-visible { outline: 2px solid #d3977b; outline-offset: 4px; }
  html.phone-menu-open { overflow: hidden; }
  .phone-menu-open body { position: fixed; top: var(--phone-menu-scroll); width: 100%; overflow: hidden; }
  /* The credit is moved here only at this breakpoint; it occupies footer space. */
  .b3.b-footer .olympeion-concept {
    position: static;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: calc(100% - 40px);
    margin: 0 20px max(24px, env(safe-area-inset-bottom));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    color: #252623;
    font-size: 14px;
    white-space: normal;
  }
  .b3 .phone-project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    font: 400 14px/1.65 'IBM Plex Mono', monospace;
    color: var(--b-muted);
  }
  .b3 .phone-project-meta > span { white-space: nowrap; }
}

@media (max-width: 600px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .home-hero { height: 100vh; height: 100svh; }
  .home-hero .intro { bottom: max(24px, env(safe-area-inset-bottom)); }
  .home-hero .actions :is(.door, .link) { font-size: 14px; min-height: 44px; }
}

@media (max-width: 1099px) {
  .b-skip { z-index: 10002; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .b3 :is(p, li, dt, dd, figcaption, label, small, .b-mono, .b-label, .price-note, .contact-note, .maker-note, .footer-bottom),
  .b3 .spec-table :is(dt, dd),
  .b3 .product-specification .spec-table :is(dt, dd),
  .b3 .team-grid article > p,
  .b3 .product-selection .product-card p,
  .b3 .pivot-copy p:not(.b-label),
  .b3 .swatches span,
  .b3 .glass-swatches span,
  .b3 .form-confirmation small { font-size: 14px; }
  .b3 .contact-card dt,
  .b3 .field label,
  .b3 .footer-grid p,
  .b3 .footer-grid .b-mono,
  .b3 .footer-grid > div:first-child > p,
  .b3 .product-measures dt,
  .b3 .product-photo figcaption,
  .b3 .image-slot figcaption,
  .b3 .work-photo figcaption,
  .b3 .product-card .product-photo figcaption,
  .b3 .fullbleed-photo figcaption,
  .b3 .workshop-welding figcaption,
  .b3 .work-foot > .b-mono,
  .b3 .pivot-copy > p.b-mono:not(.scroll-hint),
  .b3 .card-title p,
  .b3 .team-grid article > p.b-mono,
  .b3 .b-faq details p,
  .b3 .finish-layout > div > p,
  .b3 .price-basis .price-note { font-size: 14px; }
  .b3 .hard-facts span,
  .b3 .pivot-copy .angle-readout span,
  .b3 .pivot-film-caption,
  .b3 .pivot-film-caption .pivot-plate,
  .b3 .product-card > .b-mono,
  .b3 .image-slot figcaption > span:first-child,
  .b3 .image-slot figcaption > .steel-stamp,
  .b3 .card-title > .b-mono,
  .b3 .fullbleed-photo figcaption > span,
  .b3 .process-grid li > .b-mono,
  .b3 .process-maker,
  .b3 .glass-options .glass-swatches span,
  .b3 .form-help,
  .b3 .field .form-help,
  .b3 .field-error,
  .b3 .wall-price,
  .b3 .wall-price span,
  .b3 .product-index-label,
  .b3 .product-index > a,
  .b3 .product-index > a:last-child,
  .b3 .product-index .index-number,
  .b3 .work-foot .b-link,
  .b3 .work-secondary .b-link,
  .b3 .price-basis summary,
  .b3 .product-drawing > span,
  .b3 .project-card.card-0 figcaption > span:first-child,
  .b3 .fullbleed-photo figcaption > span:last-child,
  .b3 .material-board .glass-swatches span,
  .b3 .price-large span,
  .b3 .steel-stamp,
  .b3 .double-head > .b-mono,
  .b3 .case-decisions h3 { font-size: 14px; }
  .b3 :is(a[href], button, input, select, textarea, summary),
  .olympeion-concept { min-height: 44px; min-width: 44px; }
  .b3 :is(p, li, dd) > a[href],
  .b3 .footer-bottom a,
  .olympeion-concept { display: inline-flex; align-items: center; }
  .b3 .footer-grid > div > a:not(.footer-brand) { min-height: 44px; }
  .b3 .footer-brand { display: inline-flex; align-items: center; }
  .b3 .next-project > a.b-mono { display: inline-flex; align-items: center; font-size: 14px; }
  .b3 .field :is(input, select, textarea) { font-size: 16px; }
  .olympeion-concept { font-size: 14px; white-space: normal; max-width: calc(100% - 24px); }
  .b3 :is(h1, h2, h3, p, dd, dt, a, figcaption) { overflow-wrap: anywhere; }
  .b3 .b-container > *,
  .b3 .two-cols > *,
  .b3 .case-layout > * { min-width: 0; }
}

@media (max-width: 600px) {
  /* Keep the product hero's action on the first screen, including 375 × 667. */
  .b3 .product-hero { padding-block: 28px; gap: 24px; }
  .b3 .product-hero .b-label { margin-bottom: 16px; }
  .b3 .product-hero h1 { font-size: clamp(42px, 12.8vw, 56px); }
  .b3 .product-hero .b-lead { margin-block: 16px; }
  .b3 .product-hero .price-large { margin-block: 18px; }
  .b3 .product-hero .price-large span { font-size: 14px; }
  .b3 .product-hero .price-basis { margin-bottom: 16px; }
  /* Give each statistic enough room for a complete caption. */
  .b3 .hard-facts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .b3 .hard-facts > div + div { border-left: 0; border-top: 1px solid var(--b-line); padding: 24px 0 0; }
  .b3 .hard-facts span { max-width: none; }
  /* The readout label needs more width than the original 78px track. */
  .b3 .pivot-copy { grid-template-columns: minmax(0, 1fr) 110px; }
  .b3 .pivot-copy .angle-readout span { max-width: 100%; }
  .b3 .double-head h1 span { padding-left: 0; }
  /* Project photo and story spacing, without changing the other sections. */
  .b3.phone-project .b-section { padding-block: 38px; }
  .b3.phone-project :is(.project-wide, .office-compose) { padding-bottom: 32px; }
  .b3.phone-project :is(.landscape-head, .double-head, .slide-head, .roof-head) { padding-bottom: 32px; }
  .b3 .contact-layout { padding-bottom: 40px; }
  .b3 .form-confirmation[hidden] { padding: 0; border: 0; }
}

@media (max-width: 420px) {
  .b3 .team-grid { grid-template-columns: minmax(0, 1fr); }
  .b3 .team-grid article > p:last-child { max-width: none; }
  .b3 .team-grid article > p.b-mono { min-height: 0; }
}