/* Phone layout: the same collection, with room for touch and readable details. */
html:has(body.paused){scroll-behavior:auto}

@media(max-width:760px){
  :root{--page-gutter:20px}
  .preview-note{gap:12px;font-size:8px;line-height:1.5;padding-top:calc(6px + env(safe-area-inset-top))}
  .site-header{padding:16px var(--page-gutter) 6px;min-height:0;gap:8px}
  .brand{min-height:36px}
  .wordmark{font-size:20px}
  .site-header nav{width:100%;justify-content:space-between;gap:10px;font-size:11px}
  .site-header nav a{display:flex;align-items:center;min-height:44px;padding:8px 0}
  .journey-copy{left:var(--page-gutter);right:var(--page-gutter);top:19%}
  .journey-copy h1{font-size:clamp(39px,11.5vw,66px);line-height:1.03}
  .journey-copy>p.journey-subtitle{font-size:15px;line-height:1.55}
  .journey-copy .button{font-size:11px;min-height:48px;padding:14px 20px}
  .journey-motion{width:44px;height:44px;min-height:44px;bottom:28px;right:20px}
  .journey-caption{left:20px;right:82px;bottom:30px}
  .journey-landscape{font-size:clamp(32px,9vw,44px)}
  .journey-residents{font-size:12px;line-height:1.55}
  .journey-shop{min-height:44px;font-size:11px}
  .journey-scroll-cue{bottom:44px;left:20px}

  .collection{padding:40px var(--page-gutter) 54px}
  .collection-heading{gap:14px;margin-bottom:24px}
  .collection-heading h2{font-size:clamp(32px,9vw,48px)}
  .collection-heading>p{font-size:13px;line-height:1.6}
  .region-discovery{display:grid;grid-template-columns:1fr;gap:8px;padding:18px 0 0;margin-bottom:18px}
  .region-discovery>label{font-size:11px;padding:0}
  .region-picker{width:100%;max-width:none}
  .region-picker select{font-size:16px;min-height:48px;padding:12px 44px}
  .region-discovery>p{font-size:12px;line-height:1.6;min-height:0;margin:2px 0 0}
  .collection-toolbar{display:grid;grid-template-columns:1fr;gap:6px;padding:8px 0}
  .species-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .filter{font-size:11px;min-height:44px;padding:10px 4px;white-space:nowrap}
  .filter[aria-pressed=true],.filter[aria-pressed=true]:hover{background:var(--ink);color:#fff}
  .garment-filter-label{display:block;width:100%}
  .garment-filter-label select{width:100%;font-size:16px;min-height:48px;padding:10px 8px;background:#10262c04}
  .collection-pricing{font-size:11px;line-height:1.65;margin:14px 0 24px;gap:8px}
  .collection-pricing a{font-size:12px;min-height:36px;display:flex;align-items:center}
  .product-grid{gap:28px 12px}
  .product-art{aspect-ratio:.8}
  .artwork-detail{top:9%;height:84%;left:5%;width:90%}
  .product-emblem{width:20px;height:20px;top:9px;right:9px}
  .product-title-row{display:block;padding-top:8px}
  .product-title-row h4{font-size:15px;line-height:1.3}
  .product-name{padding:6px 0;min-height:44px}
  .price{display:block;font-size:14px;margin:0 0 7px}
  .product-range{font-size:11px;line-height:1.5;gap:5px;align-items:flex-start}
  .product-range .continent-icon{width:14px;height:16px}
  .product-giving{font-size:10.5px;line-height:1.5}
  .product-risk{font-size:10px;line-height:1.5;align-items:flex-start}
  .product-risk:before{margin-top:4px}
  .impact-heading>p:last-child,.story-right p,.hero-copy .hero-intro{font-size:15px;line-height:1.75}
  .impact-status{font-size:10px;line-height:1.6}
  .first-design-original{gap:14px}
  .first-design-original img{width:48%;max-width:200px}
  .first-design-original figcaption{font-size:12px}
  .footer-links a{display:flex;align-items:center;min-height:44px;font-size:13px}

  /* An edge-to-edge sheet keeps the garment and its colour controls together. */
  .product-dialog{width:100%;max-width:none;height:100%;height:100dvh;max-height:100%;max-height:100dvh;margin:0;border:0;--panel-height:100svh}
  .dialog-close{min-width:44px;min-height:44px;top:max(10px,env(safe-area-inset-top));margin-top:max(10px,env(safe-area-inset-top));margin-right:12px;margin-bottom:-54px;font-size:12px}
  .dialog-art,.dialog-art[data-garment=hoodie]{height:clamp(520px,69svh,600px);min-height:0;max-height:none;padding:58px 18px 188px}
  .dialog-art-label{top:calc(25px + env(safe-area-inset-top));left:20px;font-size:10px}
  .garment-360{inset:calc(58px + env(safe-area-inset-top)) 0 188px;touch-action:pan-y pinch-zoom}
  .dialog-view-controls{left:20px;right:20px;bottom:12px;gap:4px}
  .viewer-status{font-size:11px;letter-spacing:0;height:17px}
  .rotation-controls{width:166px;max-width:100%;height:44px}
  .product-views{gap:20px;justify-content:center;width:100%}
  .product-views button{font-size:11px;letter-spacing:.06em;min-width:64px;min-height:44px;padding:8px}
  .dialog-art .dialog-colours{position:relative;width:100%;min-height:44px;padding-left:80px;margin:0 0 3px}
  .dialog-art .dialog-colours legend{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;font-size:10px;line-height:1.4;color:var(--ink-soft)}
  .dialog-art .colour-name{display:block;font-size:12px;margin-left:0;color:var(--ink)}
  .dialog-art .colour-swatches{justify-content:flex-end;gap:0;margin:0}
  .dialog-art .colour-swatch[aria-pressed=true]:before{outline-color:var(--ink)}
  .dialog-art .colour-preview-note{display:none}
  .product-dialog[data-ink=white][data-view=artwork] .dialog-colours legend,
  .product-dialog[data-ink=white][data-view=artwork] .colour-name{color:#f7f8f4}
  .product-dialog[data-ink=white][data-view=artwork] .colour-swatch[aria-pressed=true]:before{outline-color:#f7f8f4}
  .product-dialog[data-view=artwork] .dialog-art{padding-bottom:114px}
  .dialog-copy{padding:28px 22px max(30px,env(safe-area-inset-bottom))}
  .dialog-copy h2{font-size:clamp(28px,7.7vw,36px);line-height:1.05}
  .dialog-copy .dialog-scientific{font-size:13px}
  .dialog-connection p,.dialog-copy #dialog-description{font-size:14px;line-height:1.7}
  .dialog-product-note{font-size:11px}
  .dialog-copy>.colour-preview-note{font-size:11px;line-height:1.6;margin:-8px 0 24px}
  .dialog-pledge strong{font-size:14px}
  .dialog-pledge>span{font-size:12px}
  .animal-facts>div{grid-template-columns:80px minmax(0,1fr);gap:12px}
  .animal-facts dd{font-size:14px}
  .animal-reference summary{font-size:14px;min-height:48px}
}

@media(max-width:359px){
  :root{--page-gutter:16px}
  .wordmark{font-size:18px}
  .site-header nav{font-size:10px;gap:8px}
  .filter{font-size:10px}
  .product-grid{grid-template-columns:1fr}
  .product-art{aspect-ratio:.94}
  .product-title-row{display:flex}
  .product-range,.product-giving{font-size:12px}
  .dialog-view-controls{left:14px;right:14px}
}

@media(max-width:760px) and (max-height:520px){
  .journey-stage{min-height:480px}
  .dialog-art,.dialog-art[data-garment=hoodie]{height:480px}
}