html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.altar-picture{display:contents}
.altar-offering,.artifact,.incense-object{touch-action:manipulation}

/* A complete portrait shrine fits between the header and ritual controls.
   No oversized landscape canvas, horizontal camera pans, or clipped offerings. */
@media(max-width:1024px) and (orientation:portrait){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  .sanctuary{height:100svh;height:100dvh;min-height:0;background:radial-gradient(ellipse at 50% 44%,#153a39 0%,#092a30 58%,#061e29 100%)}
  .sanctuary:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/white-tara-altar-phone-v1.webp') center/cover no-repeat;filter:blur(20px);opacity:.22;pointer-events:none}
  .stage{top:calc(90px + env(safe-area-inset-top,0px));bottom:calc(75px + env(safe-area-inset-bottom,0px));left:0;right:0;max-width:100%;overflow:hidden}
  .altar-canvas{transition:none}
  .altar-art{mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent)}
  .masthead{top:calc(15px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));gap:12px;align-items:flex-start}
  .wordmark{text-align:left;min-width:0}
  .brand-name{font-size:clamp(36px,10.5vw,45px);line-height:1.02}
  .brand-subtitle{font-size:10px;letter-spacing:.18em;margin-top:8px;padding:0}
  .utility{padding:0;flex-shrink:0}
  .basket-link{font-size:13px;min-height:44px;padding:0;gap:5px;white-space:nowrap}
  .basket-link svg{width:14px;height:14px}
  .altar-footer{display:block;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .dock-wrap{width:100%}
  .altar-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:5px 0;background:linear-gradient(90deg,transparent,#082c2b70 15%,#082c2b70 85%,transparent)}
  .altar-dock button{min-width:0;min-height:48px;padding:4px 0;display:flex;flex-direction:column;justify-content:center;gap:6px;font:400 12px/1.2 var(--serif)}
  .altar-dock .dock-icon{font-size:18px}
  .candle-text,.incense-text{font-size:12px}
  .candle-text:after,.incense-text:after{content:none}
  .vignette{background:linear-gradient(0deg,#051e274d,transparent 14%,transparent 88%,#051e2726)}
  .bottle-lettering,.star-threads{display:none}
  .halo-breath{left:50%;top:30%;width:90%;height:55%}
  .altar-offering{min-width:24px;min-height:44px}
  .artifact{min-width:44px;min-height:44px}
  .artifact-label{font-size:13px;max-width:150px;bottom:-23px}
  .altar-offering:first-child .artifact-label{left:0;transform:none}
  .altar-offering:last-child .artifact-label{left:auto;right:0;transform:none}
  .altar-offering:first-child:hover .artifact-label,.altar-offering:first-child:focus-visible .artifact-label,.altar-offering:first-child.highlighted .artifact-label{transform:none}
  .altar-offering:last-child:hover .artifact-label,.altar-offering:last-child:focus-visible .artifact-label,.altar-offering:last-child.highlighted .artifact-label{transform:none}
  .artifact[data-open="oats"] .artifact-label{left:auto;right:0;transform:none}
  .artifact[data-open="rose"] .artifact-label{left:0;transform:none}
  .return-button{bottom:calc(22px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 32px);white-space:normal;text-align:center}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px));width:max-content;max-width:calc(100% - 32px)}

  .shop-window{--window-limit:calc(100svh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));top:auto;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-width:min(420px,calc(100% - 24px));max-height:var(--window-limit);margin:0 auto;transform:none;outline:0;border:1px solid #d1b77b;overflow:hidden}
  .window-chrome{min-height:44px;padding:0 7px 0 16px;font-size:10px}
  .close-window{width:44px;height:44px;flex-shrink:0}
  .window-body{max-height:calc(var(--window-limit) - 45px);overflow-x:hidden;overflow-y:auto;padding-bottom:0}
  .window-inner{padding:21px clamp(18px,5vw,25px) 25px;min-width:0}
  .shop-window h2,.offering-name{font-size:32px!important;overflow-wrap:break-word}
  .collection-window{--window-limit:calc(100svh - 172px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));left:16px;right:16px;bottom:calc(82px + env(safe-area-inset-bottom,0px));width:auto;max-width:min(360px,calc(100% - 32px))}
  .collection-window .window-body{max-height:calc(var(--window-limit) - 45px)}
  .cabinet-inner{padding:20px}
  .cabinet-inner h2{font-size:29px!important}
  .offering-link{min-width:0;padding:10px 0}
  .offering-link strong{font-size:18px}
  .product-vessel{height:170px}
  .product-meta{flex-wrap:wrap;gap:6px}
  .ingredient-garden li{font-size:15px}
  .field-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field{min-width:0}
  .field input,.field select{min-width:0;font-size:16px}
  .total-row>span{min-width:0;overflow-wrap:anywhere}
  .card-footer{flex-wrap:wrap;gap:10px 16px}
  .card-footer .text-button{font-size:13px}
}

/* A turned phone uses the landscape painting, fitted to its shorter screen. */
@media(max-width:1024px) and (max-height:560px) and (orientation:landscape){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  .sanctuary{height:100svh;height:100dvh;min-height:0;background:#082832}
  .stage{inset:0}
  .masthead{top:max(12px,env(safe-area-inset-top,0px));left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px))}
  .brand-name{font-size:37px}.brand-subtitle{font-size:9px;margin-top:5px}
  .altar-footer{bottom:max(8px,env(safe-area-inset-bottom,0px));display:flex;justify-content:center}
  .dock-wrap{width:auto}.altar-dock{display:flex;gap:6px;padding:2px 10px}.altar-dock button{flex-direction:row;font-size:13px;min-height:36px;padding:5px 6px}.altar-dock .dock-icon{font-size:16px}
  .candle-text,.incense-text{font-size:13px}.candle-text:after,.incense-text:after{content:none}
  .altar-offering{min-width:24px}
  .shop-window{top:10px;bottom:10px;left:auto;right:12px;width:min(420px,calc(100% - 24px));max-height:calc(100svh - 20px);transform:none;margin:0}
  .collection-window{left:12px;right:auto;width:330px}
  .window-body,.collection-window .window-body{max-height:calc(100svh - 65px)}
  .field input,.field select{font-size:16px}
}