/* Shared phone layouts. Desktop catalogue and carousel grids use their own sizing. */
@media (max-width: 680px) {
    body {
        padding-bottom: calc(59px + env(safe-area-inset-bottom));
        font-size: .89rem;
        line-height: 1.5;
    }
    .wrap {
        width: calc(100% - 24px);
    }
    main h1 {
        font-size: clamp(1.8rem, 7vw, 2.55rem);
    }
    main h2 {
        font-size: clamp(1.34rem, 5vw, 1.85rem);
    }
    main h3 {
        font-size: .97rem;
    }
    main p {
        margin-block: .55rem .75rem;
    }
    .eyebrow {
        margin-bottom: .45rem;
        font-size: .59rem;
        letter-spacing: .12em;
    }
    .section {
        margin-block: 1.45rem;
    }
    .section-heading {
        gap: .55rem;
        margin-bottom: .8rem;
    }
    .page-intro {
        padding-block: 1.15rem .7rem;
    }
    .page-intro > p:last-child {
        margin-bottom: .2rem;
        font-size: .87rem;
    }
    .actions {
        gap: .45rem .65rem;
    }
    .button {
        min-height: 41px;
        padding: .45rem .67rem;
        font-size: .82rem;
    }
    .panel {
        padding: .82rem;
        border-radius: 9px;
    }
    .panel h2,
    .panel > h2 {
        font-size: 1.35rem;
        margin-bottom: .65rem;
    }
    .panel form,
    form.panel,
    .split,
    .resource-grid,
    .steps,
    .form-grid {
        gap: .65rem;
    }
    input:not([type="checkbox"]):not([type="file"]),
    select,
    textarea {
        padding-block: .35rem;
    }
    form.panel input:not([type="checkbox"]):not([type="file"]),
    form.panel select,
    form.panel textarea,
    .auth-card form input {
        font-size: 1rem;
    }
    .notice,
    .error {
        padding: .55rem .65rem;
    }
    .site-header {
        padding-block: 4px;
    }
    .site-header .header-inner {
        min-height: 49px;
        padding: .2rem .45rem;
        border-radius: 12px;
    }
    .site-header .logo {
        font-size: .95rem;
    }
    .site-header .logo-mark {
        width: 33px;
    }
    .site-header .logo small {
        margin-top: 2px;
        font-size: .39rem;
    }
    .header-actions a,
    .header-actions button {
        min-height: 40px;
    }
    .mobile-editorial {
        padding: .32rem 12px;
        font-size: .78rem;
    }
    .mobile-dock a {
        min-height: 46px;
        font-size: .63rem;
    }
    .mobile-dock .dock-icon {
        height: 23px;
    }
    .mobile-dock svg {
        width: 17px;
        height: 17px;
    }
    .motion-hero {
        min-height: 305px;
        align-items: center;
    }
    .motion-hero-inner {
        padding-block: 1.2rem 2.6rem;
    }
    .motion-hero .eyebrow {
        gap: .32rem;
        font-size: .56rem;
    }
    .motion-hero .eyebrow span {
        width: 8px;
    }
    .motion-hero h1 {
        font-size: clamp(1.98rem, 8.3vw, 3rem);
        line-height: 1.02;
    }
    .motion-description {
        max-width: 39ch;
        font-size: .86rem;
        margin-block: .6rem .75rem;
    }
    .motion-toggle {
        bottom: .55rem;
        padding: .22rem .44rem;
        font-size: .65rem;
    }
    .category-rail .wrap {
        padding-block: .45rem;
    }
    .category-rail .category-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: .35rem;
        margin-top: .2rem;
        padding-bottom: .2rem;
    }
    .category-rail .category-chips a {
        flex-shrink: 0;
        padding: .24rem .45rem;
        font-size: .7rem;
    }
    .category-rail .text-link {
        font-size: .78rem;
    }
    .home-collection .section-heading {
        padding-bottom: .45rem;
    }
    .home-collection .section-heading .actions {
        width: 100%;
        font-size: .77rem;
    }
    .cards.collection-track {
        grid-auto-columns: calc((100% - .55rem) / 2);
        gap: .55rem;
        padding: 2px 2px .35rem;
        scrollbar-width: none;
    }
    .cards.collection-track::-webkit-scrollbar,
    .category-rail .category-chips::-webkit-scrollbar {
        display: none;
    }
    .carousel-controls {
        gap: .28rem;
    }
    .carousel-controls button {
        width: 35px;
        height: 35px;
        font-size: .95rem;
    }
    .carousel-controls .carousel-toggle {
        min-width: 49px;
        padding-inline: .4rem;
        font-size: .69rem;
    }
    .collection-note {
        margin-block: -.1rem .45rem;
        font-size: .76rem;
    }
    .cards {
        gap: .55rem;
    }
    .card {
        border-radius: 8px;
    }
    .card-body {
        padding: .55rem;
    }
    .card-body p:not(.eyebrow) {
        font-size: .8rem;
    }
    .card-image span {
        bottom: .3rem;
        right: .3rem;
        padding: .15rem .28rem;
        font-size: .58rem;
    }
    [data-carousel-autoplay] .card-body > p {
        display: none;
    }
    [data-carousel-autoplay] .card-meta {
        padding-top: .25rem;
        border: 0;
        font-size: .68rem;
    }
    .demo-3d,
    .editorial {
        gap: .65rem;
        padding: .75rem;
        border-radius: 10px;
    }
    .demo-stage model-viewer {
        height: 205px;
    }
    .viewer-legend {
        padding: .4rem .55rem;
        font-size: .65rem;
    }
    .editorial img {
        max-height: 155px;
    }
    .staff-placeholder svg {
        width: 30px;
        height: 30px;
    }
    .person-profile {
        gap: .65rem;
    }
    .person-profile .staff-portrait {
        max-height: 210px;
    }
    .person-profile h1 {
        font-size: 2rem;
    }
    .person-profile h2 {
        font-size: 1.27rem;
        margin-top: .85rem;
    }
    .fabric-page {
        margin-block: .65rem 1.5rem;
    }
    .fabric-breadcrumb {
        margin-bottom: .6rem;
        font-size: .72rem;
    }
    .fabric-summary {
        gap: .65rem;
    }
    .fabric-stage {
        aspect-ratio: 5 / 4;
        border-radius: 10px;
    }
    .fabric-gallery-bar,
    .fabric-quick-links {
        margin-block: .45rem;
    }
    .fabric-thumbnails a {
        width: 68px;
        font-size: .6rem;
    }
    .fabric-thumbnails img {
        height: 40px;
    }
    .fabric-info h1 {
        font-size: 2rem;
    }
    .fabric-info .lead {
        font-size: .9rem;
    }
    .fabric-price {
        font-size: 1.18rem;
    }
    .fabric-detail {
        margin-top: .85rem;
    }
    .fabric-detail h2 {
        font-size: 1.55rem;
    }
    .auth-shell {
        min-height: auto;
        margin-block: .75rem 1.5rem;
        border-radius: 12px;
    }
    .auth-aside {
        min-height: 0;
        padding: .85rem;
    }
    .auth-aside h1 {
        font-size: 1.55rem;
    }
    .auth-aside p:not(.eyebrow) {
        margin-block: .35rem;
    }
    .auth-card {
        padding: .9rem;
    }
    .auth-card h2 {
        margin-top: .7rem;
        font-size: 1.55rem;
    }
    .auth-card form,
    .social-buttons {
        gap: .48rem;
    }
    .social-button {
        min-height: 41px;
    }
    .footer {
        margin-top: 1.65rem;
    }
    .footer-intro,
    .footer-grid {
        padding-block: 1rem;
        gap: .7rem;
    }
    .footer-intro h2 {
        font-size: 1.65rem;
    }
    .footer-grid,
    .footer-base {
        font-size: .77rem;
    }
    .footer-grid a:not(.logo) {
        margin-top: .36rem;
    }
    .footer-base {
        padding-block: .6rem;
        gap: .4rem .8rem;
    }
}