/* Shared phone layout for iOS Safari and Android browsers. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mobile-dock,.mobile-preview-jump{display:none}
[hidden]{display:none!important}

@media(max-width:760px){
  :root{--phone-header:76px;--phone-dock:68px}
  html{scroll-padding-top:calc(var(--phone-header) + env(safe-area-inset-top,0px) + 16px)}
  body{padding-bottom:calc(var(--phone-dock) + env(safe-area-inset-bottom,0px));font-size:15px}
  main{min-width:0}
  .preview-strip{height:auto;min-height:28px;padding:6px 18px;text-align:center;font-size:10px;line-height:1.4}
  .site-header{position:sticky;top:0;height:calc(var(--phone-header) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;z-index:30}
  .brand{min-width:0;justify-self:center}
  .brand img{width:174px;max-width:100%}
  .site-header .icon-button,.saved-link{width:44px;height:44px;min-width:44px;justify-content:center;padding:10px}
  .nav-right{gap:0}
  .saved-link>span{display:none}
  .mobile-nav{position:sticky;top:calc(var(--phone-header) + env(safe-area-inset-top,0px));z-index:29;max-height:60vh;max-height:60dvh;overflow-y:auto;overscroll-behavior:contain;padding:10px 6% 18px;box-shadow:0 14px 18px #113f2b12}
  .mobile-nav:not([hidden]){gap:0}
  .mobile-nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font-size:15px}
  .mobile-nav a:last-child{border-bottom:0}

  .mobile-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--ivory);border-top:1px solid var(--line);padding:5px max(8px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 -4px 20px #113f2b08}
  .mobile-dock>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;min-width:0;font-size:11px;line-height:1.3;color:#687468;border-radius:4px;white-space:nowrap}
  .mobile-dock>a.active{color:var(--ink);background:var(--sage)}
  .mobile-dock svg{width:22px;height:22px;stroke-width:1.5}
  .dock-icon{position:relative;display:flex}
  .dock-count{position:absolute;left:15px;top:-5px;border-radius:12px;min-width:16px;padding:1px 4px;background:var(--ink);color:var(--ivory);font-size:9px;line-height:14px;text-align:center}
  .keyboard-open .mobile-dock{display:none}
  .toast{bottom:calc(var(--phone-dock) + env(safe-area-inset-bottom,0px) + 14px);font-size:13px;max-width:calc(100vw - 28px);line-height:1.5}

  .hero-scene{order:-1;min-height:0;padding:25px 28px 21px}
  .hero-scene .framed{width:72%;max-width:310px;padding:8px}
  .scene-caption{width:100%;max-width:360px;font-size:11px;gap:15px;margin-top:20px}
  .hero-copy{padding:32px 7% 38px}
  .hero h1{font-size:clamp(42px,11.5vw,58px);line-height:1.06}
  .hero h1 em{margin-left:.16em}
  .hero-copy p{font-size:15px;line-height:1.75;max-width:36em}
  .hero-actions{gap:14px;width:100%;margin-top:22px}
  .hero-actions .button,.hero-actions .text-link{min-height:48px;font-size:13px}
  .hero-actions .button{flex:1 1 auto;padding:12px 16px;gap:14px}
  .hero-actions .text-link{justify-content:center;border-bottom:0}
  .collection-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 5%;font-size:10px;letter-spacing:.035em}
  .collection-nav a{min-height:44px;justify-content:center;text-align:center;line-height:1.5}
  .collection-nav .num,.collection-nav a>span[aria-hidden]{display:none}
  .section{padding:44px 6%}
  .section-head p,.series-copy p{font-size:14px;line-height:1.75}
  .section-head h2,.index-band h2{font-size:clamp(31px,8.8vw,39px)}
  .art-card .art-stage{padding:12%}
  .five-grid{gap:28px 16px}
  .five-grid .art-card h3{font-size:clamp(22px,6vw,27px);line-height:1.15}
  .five-grid .art-card p{font-size:12px;line-height:1.6}
  .five-grid .art-card .eyebrow{font-size:10px;letter-spacing:.08em}
  .art-card .card-copy{gap:6px}
  .art-card h3,.series-copy h3,.saved-item h3{overflow-wrap:anywhere}
  .index-band p{font-size:14px}
  .index-search input{font-size:16px;min-width:0}
  .index-search input::placeholder{font-size:14px}
  .index-search button{min-width:48px;min-height:48px}
  .index-examples{gap:8px}
  .index-examples a{display:flex;align-items:center;min-height:44px;font-size:12px;padding:8px 14px}
  .series-stage{height:290px}
  .series-stage .concept-label{font-size:10px;left:18px;right:18px}
  .story-teaser p{font-size:15px}

  .page-intro{padding:32px 6% 28px}
  .page-intro h1{font-size:clamp(36px,10.8vw,48px);overflow-wrap:anywhere}
  .page-intro p{font-size:15px;line-height:1.75}
  .breadcrumbs{flex-wrap:wrap;font-size:12px;gap:8px;line-height:1.6;margin-bottom:20px}
  .breadcrumbs a{display:inline-flex;min-height:32px;align-items:center}
  .breadcrumbs>span{align-self:center}
  .collection-info{gap:14px;font-size:10px;line-height:1.7}
  .index-tools{grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:20px}
  .search-field{grid-column:auto;min-width:0}
  .search-field input{min-width:0;font-size:16px;min-height:44px}
  .field label,.field-label{font-size:12px;line-height:1.5}
  .field input,.field select,.field textarea{font-size:16px;min-height:48px}
  .field select{height:48px;padding:10px;max-width:100%;text-overflow:ellipsis}
  .index-results-head{font-size:12px;line-height:1.6;gap:12px}
  .clear-link{min-height:44px;flex-shrink:0;font-size:12px}
  .protein-row{grid-template-columns:28px minmax(0,1fr) 20px;gap:12px;padding:21px 0;min-height:88px}
  .protein-row h3{font-size:26px}
  .protein-row p{font-size:14px;line-height:1.55;overflow-wrap:anywhere}
  .protein-row .row-category{font-size:11px;line-height:1.5}
  .protein-row .preview-tag{font-size:10px;line-height:1.5}
  .pagination{gap:10px;font-size:12px;flex-wrap:wrap}
  .pagination button{min-height:48px;padding:10px 14px}
  .inline-note{font-size:12px;line-height:1.7}

  .product-layout{display:flex;flex-direction:column}
  .product-view{padding:24px 9% 22px;scroll-margin-top:calc(var(--phone-header) + env(safe-area-inset-top,0px) + 12px)}
  .product-art-stage{max-width:390px;margin:16px 0}
  .product-view .product-art-stage>.framed{padding:8px}
  .product-view .product-art-stage>.placeholder-art{height:var(--preview-width);min-height:0;min-width:0;padding:5%;overflow:hidden}
  .product-art-stage .placeholder-art>div{min-width:0;max-width:100%}
  .product-art-stage .placeholder-art .protein-monogram{font-size:clamp(16px,5vw,25px)}
  .product-art-stage .placeholder-art .eyebrow{font-size:8px;letter-spacing:.06em;margin-top:10px}
  .product-art-stage .placeholder-art p{display:none}
  .product-view .caption{font-size:12px;line-height:1.65}
  .product-view .image-zoom{min-height:44px;font-size:13px}
  .product-controls{padding:28px 7% 38px}
  .product-controls h1{font-size:clamp(36px,10.5vw,48px)}
  .protein-full-name{font-size:15px}
  .product-subtitle{font-size:27px}
  .product-state{font-size:11px;line-height:1.6}
  .choice-group{margin-top:25px;min-width:0}
  .choice-group legend{font-size:12px;line-height:1.6;margin-bottom:13px}
  .style-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;max-width:none}
  .style-option{min-width:44px;min-height:44px;padding:3px}
  .style-text-options{gap:8px}
  .style-text-options button{min-height:44px;font-size:13px;padding:10px 12px}
  .selected-style-name,.option-caption{font-size:14px;margin-top:10px}
  .frame-options{gap:16px;flex-wrap:wrap}
  .frame-option{width:48px;height:48px;padding:7px}
  .frame-swatch{width:30px;height:30px}
  .scale-options{gap:10px}
  .scale-options button{min-height:48px;font-size:14px;padding:10px 6px}
  .mobile-preview-jump{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:1px solid var(--line);background:transparent;gap:16px;margin-top:16px;font-size:13px}
  .save-button{min-height:52px;margin-top:12px;font-size:14px}
  .production-note{font-size:12px;line-height:1.75}
  .details-section{padding:34px 7%;gap:22px}
  .details-section p,.details-section details p{font-size:14px;line-height:1.8}
  .details-section summary{font-size:14px;min-height:32px;align-items:center;gap:16px}
  .details-section details{padding:15px 0}
  .series-hero-copy{padding:34px 7%}
  .series-hero-copy h1{font-size:clamp(38px,11vw,52px)}
  .series-hero-copy p,.series-description p,.commission-layout p,.information-content p{font-size:15px;line-height:1.8}
  .series-hero-copy .fineprint,.form-note{font-size:12px!important;line-height:1.65}
  .series-hero .series-stage{min-height:340px}
  .series-description li{font-size:14px}
  .notice p{font-size:13px}
  .commission-form .button{min-height:52px;font-size:14px}
  .saved-header .button{width:100%;min-height:48px;font-size:13px}
  .saved-grid{gap:28px 16px}
  .saved-item p{font-size:12px;line-height:1.65;overflow-wrap:anywhere}
  .saved-item-actions{flex-wrap:wrap;gap:5px 12px}
  .saved-item-actions a,.saved-item-actions button{display:flex;align-items:center;font-size:12px;min-height:44px}
  .footer-top a:not(:has(img)){min-height:36px;display:flex;align-items:center;font-size:13px}
  .footer-top p{font-size:13px}
  .footer-bottom{font-size:11px;line-height:1.7}
  .footer-bottom>a{min-height:36px;display:flex;align-items:center}
  dialog{width:calc(100% - 24px);max-width:560px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:48px 14px 22px}
  dialog>img{max-width:100%;max-height:68vh;max-height:68dvh;object-fit:contain}
  dialog p{font-size:12px;line-height:1.6}
  .dialog-close{width:48px;height:48px;right:0;top:0;z-index:1}
}

@media(max-width:374px){
  .brand img{width:155px}
  .site-header{gap:8px;padding-left:12px;padding-right:12px}
  .mobile-dock>a{font-size:10px}
  .five-grid,.saved-grid{grid-template-columns:minmax(0,1fr)}
  .five-grid .art-card h3{font-size:28px}
  .style-options{gap:4px}
  .product-controls{padding-left:6%;padding-right:6%}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button,.hero-actions .text-link{width:100%}
}

@media(max-height:500px) and (orientation:landscape) and (max-width:950px){
  .site-header{position:relative;top:auto}
  .mobile-nav{position:relative;top:auto;max-height:65vh}
}