/* Phone layout. Loaded after style.css. */

@media (max-width: 760px) {
  /* Earlier mobile overrides. Later rules in this file win. */
  h1 .tilted {
    margin-left: auto;
    margin-right: auto;
  }
  .masthead{height: 90px;padding: 17px 20px;gap: 10px}
  .brand{font-size: 28px;letter-spacing: -1.3px}
  .edition{display: none}
  .header-actions{gap: 7px}
  .header-actions .pill{font-size: 9px;padding: 12px;min-height: 42px;gap: 7px}
  .header-actions .pill span{font-size: 17px}

  .icon-button{padding: 8px;min-width: 32px}

  .journey{height: auto}
  .stage{height: auto;overflow: visible;position: relative}
  .track{display: block;width: 100%;height: auto;transform: none !important}

  .scene{width: 100%;height: 100svh;min-height: 720px}

  .chapter-label{top: 110px;left: 20px;font-size: 10px}
  .hero-copy{top: 22%;left: 7%;z-index: 12}

  h1{font-size: clamp(58px, 15vw, 90px)}

  .hero-copy .eyebrow{font-size: 9px;max-width: 180px}
  .hero-copy .intro{
    font-size: 14px;
    margin: 20px 0 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-copy .pill{font-size: 10px;padding: 14px 15px;gap: 15px}

  .zamieszanie {background: rgba(246, 240, 221, .88)}
  .paper-glow{background: linear-gradient(90deg, #eeebcaed, rgba(238, 234, 191, .6) 55%, #eeebca10)}
  .lab-scientist{height: 43%;width: 48%;bottom: 9%}
  .scientist-one{left: 35%;rotate: -9deg}
  .scientist-two{right: -13%;bottom: 20%;height: 40%;rotate: 10deg}
  .lab-apple{right: 11%;width: 29%;bottom: 11%;z-index: 11}
  .lab-sampler{width: 45%;right: -4%;bottom: 3%;z-index: 10}
  .lab-machine{right: 1%;width: 30%;height: 36%;top: 28%}
  .lab-coffee{right: 13%;width: 16%;top: 19%}
  .lab-branch{width: 62%;bottom: -3%;left: -25%;z-index: 15}
  .lab-stamp{width: 83px;height: 83px;right: 6%;top: 19%;font-size: 9px}
  .lab-stamp strong{font-size: 19px}
  .lab-stamp small{font-size: 9px}

  .scene-caption{bottom: 80px;left: 20px;font-size: 8px;max-width: 88%;letter-spacing: 0}

  .garden-copy{top: 21%;left: 18%;width: 70%}
  .garden-copy h2{font-size: clamp(60px, 14vw, 94px)}
  .garden-copy p:not(.eyebrow){font-size: 14px}

  .garden-tree{height: 63%;width: 70%;bottom: -4%}
  .left-tree{left: -35%}
  .right-tree{right: -37%}
  .flyer-one{width: 60%;left: -7%;top: 50%}
  .flyer-two{width: 51%;right: -1%;bottom: 24%}
  .garden-coffee{width: 44%;left: 1%;bottom: -2%}
  .garden-orange{width: 45%;right: -17%;bottom: 1%}
  .garden-lemon{width: 25%;left: 40%;bottom: 19%}
  .garden-cherries{width: 18%;right: 8%;top: 17%}
  .garden-stamp{width: 86px;height: 86px;left: 19%;bottom: 17%;font-size: 9px}
  .garden-stamp strong{font-size: 15px}

  .product-copy{top: 20%;left: 7%;z-index: 12}
  .product-copy h2{font-size: clamp(42px, 11vw, 64px)}
  .product-copy p:not(.eyebrow){font-size: 14px;max-width: 270px}
  .product-copy .eyebrow{font-size: 9px}
  .product-copy .pill{font-size: 10px;padding: 12px 15px}

  .space-wash{background: linear-gradient(180deg, #f6f0dddd 5%, #f6f0ddee 45%, #f6f0dd00 90%)}
  .product-can{width: 65%;height: 50%;right: 3%;top: auto;bottom: 2%}

  .space-scientist{height: 24%;width: 30%;bottom: 2%}

  .s-one{left: 0}
  .s-two{left: 16%}
  .s-three{left: 31%}
  .space-leaf{width: 47%;right: -23%;bottom: -3%}
  .orbit-tag{right: 6%;top: auto;bottom: 31%;padding: 9px;font-size: 11px}
  .orbit-tag strong{font-size: 18px}
  .orbit-tag span{display: none}

  .note-one{top: 17%;right: -18px;scale: .6;transform-origin: right top;z-index: 2}
  .note-two{display: none}

  .battle-copy{left: 7%;top: 21%}
  .battle-copy h2{font-size: clamp(45px, 12vw, 70px)}
  .battle-copy p:not(.eyebrow){font-size: 14px;max-width: 230px}
  .battle-copy .eyebrow{font-size: 9px}
  .battle-copy .pill{font-size: 10px;padding: 12px 16px}
  .battle-copy .interaction-hint{max-width: 170px;font-size: 10px !important;margin-top: 10px}

  .battle-wash{background: linear-gradient(180deg, #f6f0dded, #f6f0dda8 50%, #f6f0dd00)}
  .villain{right: -8%;height: 49%;width: 74%;top: 46%}
  .battle[data-hits="3"] .villain{top: 54%;scale: .75}
  .squad{width: 94%;height: 20%;right: -5%;bottom: 3%}
  .rope{width: 65%;right: 3%;top: 76%}
  .rope-two{top: 67%}
  .rope-three{top: 82%}
  .battle-leaf{width: 40%;right: -20%;bottom: 0}

  .final-copy{top: 22%;left: 7%}
  .final-copy h2{font-size: clamp(52px, 13vw, 83px)}
  .final-copy p:not(.eyebrow){font-size: 14px;max-width: 300px}

  .final-actions{gap: 17px}
  .final-actions .pill{font-size: 10px;padding: 14px; 
    width: 200px; }

  .text-button{font-size: 12px}

  .winner-can{width: 66%;height: 52%;top: auto;bottom: 2%;right: -5%}

  .fallen-villain{height: 39%;width: 62%;right: 17%;bottom: 0}

  .final-scientist{height: 29%;width: 40%;left: -5%;bottom: 4%}

  .final-branch{width: 49%;bottom: -1%;left: -22%}
  .final-sampler{width: 46%;right: 23%;bottom: -1%}

  .navigation-shell{padding: 13px 12px;gap: 0;background: linear-gradient(0deg, #f4eede, transparent)}
  .scroll-cue, .page-count{display: none}
  .chapter-nav{width: 100%;padding: 4px;justify-content: space-between;gap: 0}
  .chapter-nav button{padding: 13px 8px;font-size: 9px;flex: 1}
  .chapter-nav button span{display: block;font-size: 9px;margin: 0 0 4px}
  .chapter-nav button:first-child{font-size: 8px}

  .toast{bottom: 96px;font-size: 12px;padding: 12px 16px}
  .dialog-copy{padding: 40px 25px 30px}
  .dialog-copy h2{font-size: 43px}
  .dialog-copy>p:not(.eyebrow){font-size: 14px}
  dialog[open]{grid-template-columns: 1fr}
  .dialog-art{height: 220px}
  .dialog-art>img:first-of-type{height: 125%;width: 100%;object-fit: contain;margin: 0}
  .dialog-art .dialog-apple{width: 30%;right: 1%}
  .dialog-sticker{font-size: 20px}
  .dialog-close{position: fixed;right: calc(3vw + 10px);top: calc(5svh + 5px)}
  .dialog-return{width: 100%}

  .brand{width: 87px;height: 49px;background-size: 102px auto}
  .chapter-nav button{font-size: 11px;padding: 12px 6px}
  .chapter-nav button:first-child{font-size: 9px}
  .header-actions .pill{font-size: 10px}

  .hero-copy .eyebrow, .product-copy .eyebrow, .battle-copy .eyebrow{font-size: 10px}
  .product-copy .eyebrow {background: rgba(246, 240, 221, .88); padding: 3px}
  .scene-enter{bottom: 91px;font-size: 11px;padding: 8px 10px 8px 16px;gap: 14px}
  .scene-enter b{width: 28px;height: 28px;font-size: 21px}

  .scene-caption{display: none}

  .panorama-arrow{width: 32px;height: 32px;font-size: 20px;top: 52%}
  .panorama-arrow.prev{left: 5px}
  .panorama-arrow.next{right: 5px}

  .chapter-toolbar{padding: 90px 15px 12px;gap: 12px;flex-wrap: wrap}
  .chapter-toolbar #detail-label{font-size: 11px;margin-left: auto}
  .detail-direction{display: none}
  .back-to-world{padding: 10px 12px;font-size: 11px}
  .story-intro{padding: 60px 22px 220px;min-height: 85svh}
  .story-intro h2{font-size: clamp(48px, 12vw, 78px)}
  .story-lead{font-size: 16px;line-height: 1.65;max-width: 420px;margin: 25px auto}
  .story-cutout{height: 230px;width: 45%;bottom: -38px}

  .cutout-one{left: -3%}
  .cutout-two{right: -3%}

  .story-2 .cutout-one, .story-3 .cutout-two, .story-4 .cutout-two{width: 65%;left: -14%}
  .story-3 .cutout-two, .story-4 .cutout-two{left: auto;right: -14%}
  .story-landscape{height: 50svh;min-height: 280px}
  .story-body{grid-template-columns: 1fr;padding: 65px 25px;gap: 50px}
  .story-object{min-height: 0;width: min(75%, 320px);justify-self: center}
  .story-object img{max-height: 310px}
  .story-body h3, .story-outro h3{font-size: clamp(38px, 10vw, 65px)}
  .story-body p:not(.eyebrow){font-size: 16px}
  .story-outro{padding: 60px 25px 0}

  .return-world{font-size: 12px}

  .hero-copy{top: 21%}
  .chapter-label{top: 98px}
  .scene .intro{margin-top: 18px}

  .navigation-shell{padding-bottom: max(13px, env(safe-area-inset-bottom))}

  .lab-synth{width: 54%;right: 14%;bottom: 8%;z-index: 8}
  .lab-machine-extra{width: 25%;height: 31%;right: -4%;top: 37%}
  .lab-cable{width: 38%;height: 36%}
  .cable-a{right: 3%;bottom: 10%}
  .cable-b{right: 29%;bottom: 9%}
  .cable-c{right: -11%;bottom: 18%}
  .apple-a{width: 15%;right: 43%;bottom: 16%}
  .apple-b{width: 18%;right: 28%;bottom: 10%}
  .bean-a{width: 8%;right: 26%;top: 22%}
  .bean-b{width: 7%;right: 5%;top: 42%}
  .bean-c{width: 9%;right: 5%;bottom: 25%}

  .final-actions{gap: 10px;max-width: 320px}

  #contact-dialog[open]{grid-template-columns: 1fr}
  .contact-heading{padding: 32px 25px 25px}
  .contact-heading h2{font-size: 42px}
  .contact-heading p:not(.eyebrow){margin: 18px 0}
  .contact-heading .eyebrow{padding-right: 35px}
  #contact-form{padding: 25px}
  .contact-close{position: sticky;float: right;margin-bottom: -52px;margin-left: auto;top: 10px;right: 10px;grid-column: 1}
  .contact-heading{grid-column: 1}

  .lab-apple{right: 41%}
  .lab-synth{right: 38%;z-index: 7}
  .lab-apple{z-index: 12}
  .lab-synth{right: 17%}
  .lab-synth{right: 38%}
  .lab-synth{translate: -34% 0}
  .laboratory .lab-sampler{translate: -34% 0}
  .paper-glow{background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .66) 55%, rgba(255, 255, 255, .04))}
  .laboratory .lab-machine, .laboratory .lab-machine-extra, .laboratory .scientist-two{translate: -34% 0}

  .battle-wash{background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .68) 50%, rgba(255, 255, 255, 0) 90%)}

  .finale .scene-background::after{background: linear-gradient(0deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, 0) 58%)}
  .finale #final-title>span::after{font-size: clamp(52px, 13vw, 83px)}

  .brew-gallery{padding: 45px 18px}
  .brew-grid{grid-template-columns: 1fr}
  .brew-info{padding: 18px}
  .brew-card figure{height: 260px}
  .brew-table th, .brew-table td{padding: 10px 6px}

  .masthead .header-actions{gap: 6px}
  .masthead .social-link{width: 40px;height: 40px}

  #receptura .space-wash{background: linear-gradient(180deg, rgba(255, 255, 255, .87) 5%, rgba(255, 255, 255, .93) 45%, rgba(255, 255, 255, 0) 90%)}

  
  /* Current phone pager and header */
  :root{--phone-bar: calc(64px + env(safe-area-inset-top))}

  .journey{position: fixed;inset: 0;height: 100%}
  .stage{position: relative;height: 100%;overflow-x: auto;overflow-y: hidden;touch-action: pan-x}
  .track{display: flex;width: 500%;height: 100%;transform: none !important}

  .scene{width: 20%;height: 100%;min-height: 0;flex: none}

  .scene .layer{translate: none !important}

  .masthead{height: var(--phone-bar);padding: max(8px, env(safe-area-inset-top)) 14px 8px;gap: 10px}
  .masthead .brand{width: 74px;height: 42px}
  .menu-toggle{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 44px;height: 44px;padding: 0;border: 1px solid var(--ink);border-radius: 50%;background: #fff}
  .menu-toggle-box, .menu-toggle-box::before, .menu-toggle-box::after{display: block;width: 16px;height: 2px;background: var(--ink);border-radius: 1px}
  .menu-toggle-box{position: relative}
  .menu-toggle-box::before, .menu-toggle-box::after{content: "";position: absolute;left: 0}
  .menu-toggle-box::before{top: -6px}
  .menu-toggle-box::after{top: 6px}
  body.menu-open .menu-toggle-box{background: transparent}
  body.menu-open .menu-toggle-box::before{top: 0;rotate: 45deg}
  body.menu-open .menu-toggle-box::after{top: 0;rotate: -45deg}
  body.menu-open::before{content: "";position: fixed;inset: 0;background: rgba(23, 24, 20, .35);z-index: 46}
  .navigation-shell{top: var(--phone-bar);bottom: auto;left: 0;width: 100%;padding: 0;gap: 0;background: transparent;transform: none !important;opacity: 1 !important;flex-direction: column;align-items: stretch;z-index: 45}

  .reading .navigation-shell{transform: none !important;opacity: 1 !important}

  .scroll-cue{display: none !important}
  .chapter-nav{display: none;width: 100%;flex-direction: column;align-items: stretch;gap: 4px;padding: 8px 12px 14px;border: 0;box-shadow: none;background: transparent}
  .page-count{display: none}
  .nav-progress{display: none}
  body.menu-open .navigation-shell{background: var(--paper);border-bottom: 1px solid var(--ink);z-index: 48}
  body.menu-open .page-count{display: block;order: -1;padding: 14px 18px 0;font-size: 22px;pointer-events: none}
  body.menu-open .chapter-nav{display: flex;pointer-events: auto}
  .chapter-nav button{flex: none;width: 100%;min-height: 48px;padding: 12px 14px;font-size: 15px;text-align: left;white-space: normal}
  .chapter-nav button span{display: inline;margin: 0 10px 0 0;font-size: 15px}
  .chapter-nav button.active{background: var(--acid)}

  .chapter-label{top: calc(var(--phone-bar) + 8px);left: 16px;z-index: 18;font-size: 10px;background: rgba(246, 240, 221, .88);padding: 4px 8px;border-bottom: 0}
  .hero-copy, .battle-copy, .final-copy{top: calc(var(--phone-bar) + 36px);left: 16px;right: auto;width: min(78%, 280px);z-index: 18}
  garden-copy{top: calc(var(--phone-bar) + 36px);left: 16px;right: auto;width: 92%;z-index: 18}
  
  .product-copy {top: calc(var(--phone-bar) + 36px);left: 16px;right: auto;z-index: 18}
  .scene h1, .scene h2{font-size: clamp(34px, 9vw, 48px)}
  .garden-copy p:not(.eyebrow), .product-copy p:not(.eyebrow), .battle-copy p:not(.eyebrow), .final-copy p:not(.eyebrow){font-size: 14px;max-width: 240px;margin: 8px 0}
  .hero-copy .intro{font-size: 14px;margin: 18px 0;background: rgba(246, 240, 221, .88);text-align: center;color: #000;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-copy{width: 92%}
  .hero-copy > h1 div{text-align: center}
  .scene-enter{bottom: 25px; z-index: 22;font-size: 11px;padding: 8px 8px 8px 14px;gap: 12px}

  /* .battle .scene-enter{top: calc(var(--phone-bar) + 348px)}

  .finale .scene-enter{top: calc(var(--phone-bar) + 430px)} */

  .scene-enter b{width: 28px;height: 28px;font-size: 20px}
  .panorama-arrow{width: 36px;height: 36px;font-size: 18px;top: 76%}
  .panorama-arrow.prev{left: 8px}
  .panorama-arrow.next{right: 8px}

  .stamp{width: 74px;height: 74px;font-size: 8px}
  .stamp strong{font-size: 13px}


  /* Scene backgrounds and layers */
  .laboratory .bg-lab{background-position: 0}

  .garden .bg-garden{background-position: 70% 22%}

  .space .bg-space{background-position: 50% 40%}

  .battle .bg-town{background-position: 550px 100px}

  .finale .scene-background{background-position: 28% 48%}

  .laboratory .paper-glow{background: linear-gradient(180deg, rgba(246, 240, 221, .92), rgba(246, 240, 221, .45) 20%, transparent 38%)}
  .laboratory .scientist-one{left: -18%;right: auto;top: auto;bottom: -8%;width: 78%;height: 60%;rotate: -4deg;z-index: 4;translate: none}
  .laboratory .scientist-two{left: auto;right: -16%;top: auto;bottom: -10%;width: 76%;height: 60%;rotate: 5deg;z-index: 5;translate: none}
  .laboratory .lab-machine{left: 22%;right: auto;top: auto;bottom: 16%;width: 52%;height: 42%;z-index: 8;translate: none}
  .laboratory .apple-b, .laboratory .lab-apple{display: none}
  .laboratory .lab-synth{left: -14%;right: auto;top: auto;bottom: -12%;width: 140%;height: 42%;rotate: 0;z-index: 10;translate: none}
  .laboratory .lab-sampler{left: 4%;right: auto;top: auto;bottom: 6%;width: 38%;height: 18%;z-index: 11;translate: none}
  .laboratory .lab-stamp{left: auto;right: 10px;top: calc(var(--phone-bar) + 8px);bottom: auto;width: 68px;height: 68px}
  .laboratory .lab-machine-extra, .laboratory .lab-cable, .laboratory .bean-a, .laboratory .bean-b, .laboratory .bean-c, .laboratory .apple-a, .laboratory .lab-coffee{display: none}

  .garden .garden-cherries{left: -4%;right: auto;top: 7%;bottom: auto;width: 28%;height: 16%;rotate: -14deg;z-index: 8}
  .garden .left-tree{left: -30%;right: auto;top: auto;bottom: -18%;width: 96%;height: 52%;z-index: 3}
  .garden .garden-coffee{left: auto;right: -18%;top: 28%;bottom: auto;width: 72%;height: 50%;rotate: 8deg;z-index: 4}
  .garden .flyer-one{left: auto;right: -48%;top: 52%;bottom: auto;width: 122%;height: 26%;rotate: -10deg;z-index: 7}
  .garden .flyer-two, .garden .garden-lemon, .garden .garden-orange, .garden .right-tree{display: none}
  .garden .garden-stamp{left: 75%;
        top: 45%;bottom: 16%;width: 72px;height: 72px}

  #receptura .space-wash{background: linear-gradient(180deg, rgba(246, 240, 221, .88), rgba(246, 240, 221, .28) 22%, transparent 40%)}
  .space .product-can{left: 16%;right: auto;top: 26%;bottom: auto;width: 68%;height: 34%;rotate: -12deg;z-index: 9;scale: 1}
  .space .product-can img{position: absolute;left: 125px;top: -60px;width: 100%;height: 100%;max-width: none}
  .space .product-can::before{content: "";position: absolute;left: auto;right: -28%;top: 8%;width: 85%;height: 75%;background: url("assets/galaz_jabloni.webp") center/contain no-repeat;transform: scaleX(-1) rotate(14deg);z-index: -1;pointer-events: none}
  .space .space-leaf{left: -16%;right: auto;top: 28%;bottom: auto;width: 68%;height: 38%;rotate: -16deg;z-index: 5}
  .space .s-one{left: 2%;right: auto;top: auto;bottom: 2%;width: 46%;height: 44%;rotate: 360deg;z-index: 7}
  .space .s-two{left: 26%;right: auto;top: auto;bottom: 2%;width: 50%;height: 48%;rotate: 357deg;z-index: 8}
  .space .s-three{left: auto;right: 0;top: auto;bottom: 2%;width: 46%;height: 44%;rotate: 8deg;z-index: 7}

  .space .orbit-tag, .space .lab-note{display: none}

  #bitwa .battle-wash{display: block;opacity: 1;background: rgba(214, 36, 20, .82);mix-blend-mode: multiply}
  .battle .battle-copy{background: rgba(246, 240, 221, .92);padding: 10px 12px}
  .battle .villain{left: 12%;right: auto;top: 54%;width: 76%;height: 32%;z-index: 4}
  .battle[data-hits="1"] .villain{rotate: 1deg}
  .battle[data-hits="2"] .villain{rotate: 357deg}
  .battle[data-hits="3"] .villain{rotate: 360deg;top: 58%;scale: .82}
  .battle .squad{left: 3%;right: 3%;bottom: 2%;width: auto;height: 15%;z-index: 8}
  .battle .squad img{width: 24%}
  .battle .squad img:last-child{display: none}
  .battle .rope{display: none}

  .finale .scene-background{filter: grayscale(1) contrast(1.05)}
  .finale .scene-background::after{background: linear-gradient(180deg, rgba(246, 240, 221, .88), rgba(246, 240, 221, 0) 34%)}
  .finale .chapter-label, .finale .final-copy, .finale .final-copy p:not(.eyebrow), .finale #final-title>span{color: var(--ink)}
  .finale #final-title>.tilted{color: #fff}
  .finale .final-copy{background: rgba(246, 240, 221, .9);padding: 10px 12px}
  .finale .final-actions{gap: 8px;max-width: 260px}
  .finale .winner-can{left: auto;right: -26%;top: auto;bottom: 0px;width: 116%;height: 38%;rotate: 6deg;scale: 1;z-index: 8}
  .finale .winner-can img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;max-width: none}

  .finale .fallen-villain{left: -5%;right: auto;top: auto;bottom: -4%;width: 84%;height: 36%;rotate: 88deg;z-index: 3}

  .finale .final-scientist, .finale .final-branch, .finale .final-sampler{display: none}


  /* Story sheets, products, dialogs */
  .chapter-toolbar{padding: calc(var(--phone-bar) + 8px) 14px 12px;gap: 10px}
  .story-object{width: min(100%, 280px);max-width: 100%}
  .story-outro>.pill, .story-body .pill{max-width: 100%}
  .brew-table{position: relative;overflow: visible}
  .brew-table table, .brew-table tbody{display: block;width: 100%;min-width: 0}
  .brew-table table{font-size: 13px;line-height: 1.35}
  .brew-table thead{display: block;position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0}
  .brew-table tr{display: grid;grid-template-columns: 1fr 1fr;width: 100%}
  .brew-table th, .brew-table td{display: block;width: auto;min-width: 0}
  .brew-table tbody th{grid-column: 1 / -1;padding: 10px 0 2px;border: 0;border-top: 1px solid #171814;font-weight: 700}
  .brew-table tbody tr:last-child td{padding-bottom: 10px;border-bottom: 1px solid #171814}
  .brew-table td{padding: 2px 8px 10px 0;border: 0}
  .brew-table td:nth-child(3){padding-left: 8px}
  .brew-table td:nth-child(2)::before, .brew-table td:nth-child(3)::before{display: block;margin-bottom: 2px;font: 10px 'Courier New', monospace;font-weight: 700;letter-spacing: .4px}
  .brew-table td:nth-child(2)::before{content: "100 ml"}
  .brew-table td:nth-child(3)::before{content: "330 ml"}
  .venues>h2{font-size: clamp(36px, 12vw, 64px)}
  .venue-city h3{font-size: clamp(28px, 8vw, 42px)}

  #product-dialog{width: min(480px, 94vw);max-height: 92svh}
  #product-dialog[open]{grid-template-columns: 1fr}
  #product-dialog .dialog-art{height: min(32svh, 220px);overflow: hidden}
  #product-dialog .dialog-close{position: absolute;top: 8px;right: 8px}
  #product-dialog .dialog-copy{padding: 28px 20px 24px}
  #product-dialog .dialog-copy h2{font-size: 36px}
  #contact-dialog{max-height: 92svh}
  #contact-dialog .contact-close{position: absolute;top: 8px;right: 8px;float: none;margin: 0;width: 44px;height: 44px;z-index: 2}
  #contact-dialog .contact-heading{padding: 48px 22px 22px}
}

@media (max-width: 660px) {
  /* Venues grid */
  .venues{padding: 45px 18px}
  .venues>h2{margin-bottom: 40px}
  .venue-grid{grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px}
  .venue-tile{width: 100%}
  .venue-city{margin-bottom: 45px}
}