/* Mobile layout: content follows its natural height instead of shrinking to fit.
   The second query also covers a phone rotated to landscape. */
@media (max-width:700px), (max-width:1000px) and (max-height:500px) {
  html {
    height:auto;
    min-height:100%;
    overflow:visible;
    scroll-padding-top:16px;
  }

  body.home-page,
  body.preview-page {
    height:auto;
    min-height:100svh;
    overflow:visible;
  }

  .home-page .page {
    --gutter:clamp(16px,4.5vw,28px);
    height:auto;
    min-height:100svh;
    grid-template-rows:auto 1fr auto;
    row-gap:16px;
    padding: max(12px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
  }

  .home-page header { min-height:57px; gap:16px; padding-bottom:12px; border-bottom:1px solid rgba(178,180,173,.65); }
  .home-page .brand { width:125px; height:44px; }
  .home-page .menu-link { min-height:44px; font-size:.6875rem; letter-spacing:.12em; padding:0 4px; }
  .home-page main { min-height:auto; justify-content:space-evenly; gap:clamp(16px,2.5svh,24px); }
  .home-page .launch-copy { padding-top:0; }
  .home-page h1 { font-size:clamp(1rem,6.8cqw,2.75rem); line-height:1.2; white-space:nowrap; letter-spacing:-.05em; }
  .home-page .headline-first,
  .home-page h1 em { display:inline; white-space:nowrap; }
  .home-page .launch-description { max-width:none; margin:12px auto 0; font-size:clamp(.625rem,4.15cqw,1rem); line-height:1.5; white-space:nowrap; }
  .home-page .launch-actions { margin-top:6px; }
  .home-page .collection-link { min-height:44px; font-size:.9375rem; gap:14px; padding:8px; }

  .home-page .story-carousel { display:none; }
  .home-page .mobile-concept { display:block; flex:none; min-width:0; margin:0; }
  .home-page .mobile-concept-visual { display:block; width:100%; aspect-ratio:1; overflow:hidden; background:#eee9e1; }
  .home-page .mobile-concept-visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
  .home-page .mobile-concept-caption { margin:18px auto 0; max-width:100%; color:var(--muted); font-size:clamp(.8125rem,3.7vw,.9375rem); line-height:1.55; text-align:center; }
  .home-page .story-viewport { flex:none; width:100%; height:auto; aspect-ratio:1; }
  .home-page .story-slide { height:100%; }
  .home-page .story-image-link img { object-fit:contain; object-position:center; }
  .home-page .concept-slide img { object-fit:cover; object-position:center; }
  .home-page .story-navigation { display:flex; flex-direction:column; align-items:stretch; gap:4px; min-height:0; padding:8px 0 0; }
  .home-page .story-tabs { display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; gap:clamp(4px,1.2cqw,12px); width:100%; }
  .home-page .story-tabs button { flex:0 0 auto; min-width:44px; min-height:44px; padding:10px 0; font-size:clamp(.625rem,3.55cqw,.875rem); line-height:1.4; white-space:nowrap; overflow-wrap:normal; }
  .home-page .label-long { display:inline; }
  .home-page .label-short { display:none; }
  .home-page .story-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; width:100%; gap:12px; }
  .home-page .story-controls button { width:44px; height:44px; }
  .home-page .story-controls span { font-size:.75rem; }
  .home-page footer { font-size:.75rem; line-height:1.5; white-space:normal; }

  /* Two generous product rows; the third stays available by vertical scrolling. */
  html:has(.preview-page) {
    scroll-snap-type:none;
    scroll-padding-block:0;
  }
  .preview-page { display:block; }
  .preview-page .preview-stage { display:grid; height:100svh; grid-template-rows:auto minmax(0,1fr); }
  .preview-page .header { flex-wrap:wrap; min-height:50px; padding:max(3px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 3px max(16px,env(safe-area-inset-left)); gap:6px 12px; }
  .preview-page .wordmark { width:125px; height:40px; }
  .preview-page .wordmark img { width:112%; height:auto; }
  .preview-page .header nav { order:0; width:auto; margin:0 0 0 auto; border:0; gap:14px; flex:none; }
  .preview-page nav>a { display:flex; align-items:center; min-height:44px; padding:10px 2px; font-size:.6875rem; letter-spacing:.08em; }
  .preview-page .launch { display:none; }
  .preview-page main { display:grid; flex:none; min-height:0; grid-template-rows:auto auto minmax(0,1fr); }
  /* Compact unified banner reserves the remaining screen for two complete cards. */
  .preview-page .hero { position:relative; display:grid; grid-template-rows:minmax(0,1fr); flex:none; height:clamp(104px,16.5svh,136px); min-height:min-content; max-height:none; background:#101110; background-image:none; overflow:hidden; isolation:isolate; }
  .preview-page .hero-image { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:cover; object-position:center; opacity:.8; background:none; }
  .preview-page .hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(16,17,16,.08) 0%,rgba(16,17,16,.3) 35%,rgba(16,17,16,.72) 68%,rgba(16,17,16,.94) 100%); }
  .preview-page .hero-content { position:relative; z-index:2; grid-row:1; align-self:end; display:grid; gap:3px; width:100%; max-width:none; margin:0; padding:8px 16px 10px; background:transparent; }
  .preview-page .hero-content .eyebrow { font-size:.625rem; line-height:1.4; letter-spacing:.16em; }
  .preview-page .hero h1,
  .preview-page .hero[data-collection="modernos"] h1,
  .preview-page .hero[data-collection="contemporaneos"] h1 { margin:0; font-size:clamp(1.125rem,5.3vw,1.75rem); line-height:1.15; letter-spacing:.01em; }
  .preview-page .hero h1 br { display:none; }
  .preview-page .hero h1 em::before { content:" "; }
  .preview-page .hero p { margin:0; font-size:.875rem; line-height:1.4; letter-spacing:.02em; color:#d1cbbf; }
  .preview-page .gold-line,
  .preview-page .hero-caption { display:none; }

  .preview-page .collection-switcher { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 12px; }
  .preview-page .collection-choice { min-width:0; min-height:44px; padding:3px 2px; font-size:.75rem; line-height:1.4; letter-spacing:0; text-transform:none; overflow-wrap:anywhere; }
  .preview-page .collection-choice>span:not(.choice-label) { display:block; margin:0 0 2px; font-size:.625rem; }
  .preview-page .collection-choice .choice-full { display:none; }
  .preview-page .collection-choice .choice-mobile { display:inline; }
  .preview-page .collection-choice[aria-pressed="true"]::after { left:8%; right:8%; }

  .preview-page .collection { display:grid; grid-template-rows:auto minmax(0,1fr); flex:none; width:100%; max-width:540px; height:100%; min-height:0; padding:18px 18px max(18px,env(safe-area-inset-bottom)); }
  .preview-page .section-heading { display:block; margin-bottom:14px; }
  .preview-page .section-heading .eyebrow { font-size:.625rem; line-height:1.4; letter-spacing:.12em; color:#735731; }
  .preview-page .section-heading h2 { margin:5px 0 0; font-size:clamp(1.25rem,6.4vw,1.75rem); line-height:1.15; }
  .preview-page h1,
  .preview-page h2,
  .preview-page h3 { overflow-wrap:anywhere; }
  .preview-page .edition { display:none; }
  .preview-page .products { display:flex; flex-direction:column; align-items:stretch; flex:none; gap:20px; height:100%; min-height:0; overflow-y:auto; scroll-snap-type:y proximity; scrollbar-width:thin; scrollbar-color:#b79b74 transparent; }
  .preview-page .products:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .preview-page .product { display:grid; flex:0 0 calc((100% - 20px)/2); grid-template-columns:minmax(0,1fr) minmax(0,.84fr); grid-template-rows:minmax(min-content,1fr) minmax(44px,1fr); align-items:stretch; column-gap:18px; row-gap:18px; min-width:0; height:auto; min-height:clamp(170px,calc((100vw - 54px)/1.84),264px); break-inside:avoid; page-break-inside:avoid; scroll-snap-align:start; }
  .preview-page .product-visual { grid-column:1; grid-row:1/-1; align-self:center; display:flex; justify-content:center; align-items:center; width:100%; height:auto; aspect-ratio:1; flex:none; min-height:0; container-type:normal; }
  /* Square photograph stays entirely inside the left column. */
  .preview-page .product-photo { display:block; flex:none; width:100%; height:auto; max-width:100%; max-height:none; aspect-ratio:1; margin:0; background-size:300% 100%; }
  .preview-page .badge { top:4px; left:4px; padding:4px 6px; font-size:.5625rem; letter-spacing:.06em; }
  .preview-page .photo-action { display:none; }
  .preview-page .product-title { grid-column:2; grid-row:1; align-self:end; width:100%; min-height:0; padding:0; text-align:left; }
  .preview-page .product-title>span { font-size:.625rem; line-height:1.4; letter-spacing:.1em; color:#735731; }
  .preview-page .product-title h3 { margin:6px 0; font-size:clamp(1.125rem,6.3vw,1.625rem); line-height:1.12; }
  .preview-page .product-title p { display:block; margin:0; color:#716b60; font-size:.875rem; line-height:1.4; }
  .preview-page .product>.button { grid-column:2; grid-row:2; align-self:start; justify-self:stretch; width:100%; max-width:none; min-height:44px; padding:10px 8px; font-size:clamp(.5625rem,2.7vw,.6875rem); letter-spacing:.05em; white-space:nowrap; gap:4px; margin:0; }
  .preview-page .product>.button span { font-size:.9rem; }
  .preview-page footer { position:relative; z-index:2; display:block; width:100%; padding:28px 16px max(12px,env(safe-area-inset-bottom)); color:#989b8e; font-size:.75rem; line-height:1.5; letter-spacing:.04em; text-align:center; }
  .preview-page footer>span:nth-child(2) { display:none; }
  .preview-page footer>a { display:none; }


  .preview-page dialog { width:calc(100% - 24px); max-width:460px; max-height:calc(100svh - 24px); max-height:calc(100dvh - 24px); padding:0; overflow:auto; overscroll-behavior:contain; }
  .preview-page .close { top:8px; right:8px; width:44px; height:44px; font-size:1.125rem; }
  .preview-page .detail-grid { display:block; }
  .preview-page .detail-photo { display:block; width:100%; height:auto; max-height:none; aspect-ratio:1; margin:0; }
  .preview-page .detail-copy { padding:24px 20px; }
  .preview-page .detail-copy .eyebrow { font-size:.6875rem; line-height:1.5; letter-spacing:.12em; color:#735731; }
  .preview-page .detail-copy h2 { font-size:1.75rem; line-height:1.2; }
  .preview-page .detail-copy>p { font-size:1rem; line-height:1.65; }
  .preview-page .availability { font-size:.6875rem; line-height:1.5; letter-spacing:.08em; color:#735731; }
  .preview-page .detail-copy p.note { font-size:.8125rem; line-height:1.6; color:#716b60; }
  .preview-page .detail-copy .button { min-height:48px; padding:12px; font-size:.75rem; line-height:1.5; letter-spacing:.04em; }
  html:has(.preview-page dialog[open]),
  .preview-page:has(dialog[open]) { overflow:hidden; }
}

/* Compact the introduction on short portrait screens, keeping the whole banner. */
@media (max-height:650px) and (min-height:501px) and (max-width:700px) {
  .preview-page .header { min-height:50px; padding-top:max(3px,env(safe-area-inset-top)); padding-bottom:3px; }
  .preview-page .hero { height:clamp(96px,16svh,108px); }
  .preview-page .hero-content { gap:4px; padding:8px 16px; }
  .preview-page .hero-content .eyebrow { font-size:.5625rem; }
  .preview-page .hero h1,
  .preview-page .hero[data-collection="modernos"] h1,
  .preview-page .hero[data-collection="contemporaneos"] h1 { font-size:1rem; }
  .preview-page .hero p { font-size:.8125rem; }
  .preview-page .collection-choice { min-height:44px; padding-block:3px; }
  .preview-page .collection { padding-top:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .preview-page .section-heading { margin-bottom:6px; }
  .preview-page .product { column-gap:10px; row-gap:6px; }
  .preview-page .product-title h3 { margin-block:4px; font-size:1rem; }
  .preview-page .product-title p { font-size:.75rem; }
}

/* Reading accessibility takes precedence when the viewport is extremely short. */
@media (max-height:500px) and (max-width:1000px), (max-width:300px) {
  .preview-page .preview-stage { height:auto; min-height:100svh; display:block; }
  .preview-page main { display:block; }
  .preview-page .collection { display:block; height:auto; }
  .preview-page .products { height:auto; overflow:visible; gap:28px; scroll-snap-type:none; }
  .preview-page .product { flex:none; height:auto; min-height:180px; }
  .preview-page .product-visual { height:auto; min-height:0; }
  .preview-page .product-photo { width:100%; height:auto; max-height:none; }
}

/* Landscape phones keep the same reading order without oversized images. */
@media (min-width:701px) and (max-width:1000px) and (max-height:500px) {
  .home-page .page { max-width:680px; }
  .home-page .mobile-concept-visual { max-width:480px; margin-inline:auto; aspect-ratio:4/3; }
  .home-page .mobile-concept-visual img { object-fit:contain; }
  .home-page .story-viewport { max-width:480px; margin-inline:auto; aspect-ratio:4/3; }
  .home-page .concept-slide img { object-fit:contain; }
  .preview-page .hero { height:112px; }
}

/* At extreme magnification, retain access to text rather than clipping it. */
@media (max-width:300px) {
  .home-page h1,
  .home-page .headline-first,
  .home-page h1 em,
  .home-page .launch-description { white-space:normal; }
  .home-page .story-tabs { overflow-x:auto; justify-content:flex-start; gap:12px; }
}