/* kometa.uz: KOMETA supermarket, Shofirkon, from the KOMETA brand book (Dec 2022,
   MINIM): green #004B34 and the yellow-to-orange gradient, lime and white;
   Grandis Extended Bold for display, Fact for text; the comet arcs. Each section
   is one of the shop's own signs. Nothing tilted at rest, nothing over the arcs. */
@font-face{font-family:'Fact';src:url('/fonts/Fact-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fact';src:url('/fonts/Fact-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Grandis Extended';src:url('/fonts/GrandisExtended-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --fb:'Fact',system-ui,-apple-system,sans-serif;
  --fd:'Grandis Extended','Fact',system-ui,sans-serif;
  --g:#004B34; --gd:#003825; --lime:#99C61E; --yel:#FECA05;
  --on-g:#A9D8BF; --on-lime:#1F4A2E;
  --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--g) #E3ECE7}
body{background:#fff;color:var(--gd);font:400 18px/1.55 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--yel);color:var(--g)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
a{color:inherit}
a:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.wrap{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:10px;font:700 17px/1 var(--fb);text-decoration:none;transition:background-color .15s,box-shadow .15s}
.btn-y{background:var(--yel);color:var(--g)}
.btn-y:hover{background:#FFD83A}
.btn-w{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.btn-w:hover{box-shadow:inset 0 0 0 2px #fff}
.link{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px}
.link:hover{text-decoration-color:#fff}

.arcs{position:absolute;top:0;right:0;pointer-events:none;overflow:visible}
.arcs .orb{transform-box:view-box}
.a-hero .orb,.a-hero-m .orb{animation:orbit .7s var(--ease) both}
.a-hero .o2,.a-hero-m .o2{animation-delay:.08s}
@keyframes orbit{from{transform:rotate(-11deg);opacity:0}40%{opacity:1}to{transform:none;opacity:1}}
.a-hero,.a-voucher{display:none}
.a-hero-m{top:auto;bottom:0;width:clamp(96px,34vw,150px);height:clamp(96px,34vw,150px)}

/* ---- the cover, with the shop's door sign (p.30) hanging in it ---- */
.hero{position:relative;overflow:hidden;background:var(--g);color:#fff;padding:26px 0 48px}
.lockup{display:block;width:clamp(108px,40vw,150px);height:auto}
/* phones: the sign hangs top right, so the headline starts below the board */
.hero-grid{display:grid;margin-top:calc(clamp(100px,34vw,220px) / 1.6 - 14px)}
h1{font:700 clamp(32px,9.6vw,64px)/1.04 var(--fd);max-width:8.5em}
.where{margin-top:28px;color:var(--on-g);font-size:clamp(17px,1.5vw,20px);line-height:1.5}
.where b{color:#fff}
.go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}

.sign{position:absolute;top:18px;right:var(--gut);width:clamp(100px,34vw,220px)}
.sign::before,.sign::after{content:"";position:absolute;bottom:calc(100% - 3px);width:2px;height:1600px;background:rgba(255,255,255,.5)}
.sign::before{left:16%}.sign::after{left:83%}
.board{position:relative;z-index:1;overflow:hidden;container-type:inline-size;aspect-ratio:1.6;display:flex;align-items:center;padding:0 9%;border-radius:12px;
  background:linear-gradient(120deg,#2E7360 0%,#0E5A43 36%,#004B34 62%,#003A28 100%);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 60px -28px rgba(0,0,0,.6)}
.swoosh{position:absolute;inset:0;width:100%;height:100%}
.sign-word{position:relative;color:#fff;font:700 9.8vw/1 var(--fb);font-size:29cqi;text-transform:uppercase;white-space:nowrap;padding-top:4%}

/* ---- the aisle directory, on lime ---- */
.aisle{background:var(--lime);color:var(--gd);padding:clamp(64px,8vw,112px) 0}
/* one long word in a wide face: the size follows the width so it never runs off a phone */
.h2{font:700 clamp(26px,8.6vw,64px)/1 var(--fd)}
.dir{list-style:none;margin-top:clamp(32px,4vw,52px);border-top:2px solid var(--gd)}
.dir li{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid rgba(0,56,37,.3)}
.dir h3{font:700 clamp(20px,2.2vw,30px)/1.2 var(--fd)}
.dir p{color:var(--on-lime);font-size:clamp(16px,1.3vw,18px)}
.more{margin-top:26px;font-weight:700}

/* ---- KOMETA Bonus: the discount voucher of p.34 ---- */
.bonus{padding:clamp(64px,8vw,112px) 0}
.voucher{position:relative;overflow:hidden;color:#fff;border-radius:20px;padding:clamp(28px,4.5vw,64px) clamp(24px,4.5vw,64px);
  background:linear-gradient(120deg,#0E5A43 0%,#004B34 45%,#003A28 100%)}
.v-body{position:relative;max-width:560px}
.v-logo{display:block;width:clamp(120px,11vw,150px);height:auto}
.v-title{font:700 clamp(48px,15vw,96px)/.9 var(--fd);color:var(--yel);margin-top:clamp(24px,3vw,40px)}
.v-text{margin-top:22px;color:var(--on-g);max-width:40ch}
.v-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.v-fine{margin-top:20px;font-size:15px;color:var(--on-g)}
.v-fine a{color:#fff;font-weight:700;text-underline-offset:4px}

/* ---- the back cover ---- */
.foot{background:var(--gd);color:var(--on-g);padding:36px 0}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.lockup-foot{display:block;width:140px;height:auto}
.foot p{font-size:14px}

/* small phones: the Google link goes under the button, clear of the corner arcs */
@media (max-width:519px){
  .go{flex-direction:column;align-items:flex-start;gap:16px}
}
/* the narrowest phones: no room beside the map button for the corner arcs */
@media (max-width:339px){
  .a-hero-m{display:none}
}
@media (min-width:900px){
  .dir li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:baseline;gap:32px;padding:22px 0}
  .v-body{max-width:min(560px,calc(100% - 300px))}
  .v-title{font-size:clamp(80px,9vw,128px)}
  .a-voucher{display:block}
}
/* desktop: headline | the door sign | the cover's arcs at the edge.
   --arcs: how far the arcs reach in from the window's right edge, plus air */
@media (min-width:1024px){
  .hero{--arcs:288px;display:flex;flex-direction:column;min-height:min(880px,100vh);padding-bottom:72px}
  .hero-in{flex:1;display:flex;flex-direction:column}
  .lockup{width:170px}
  .a-hero{display:block}
  .a-hero-m{display:none}
  .hero-grid{flex:1;margin-top:0;padding:48px max(0px,calc(var(--arcs) - max(0px,(100vw - 1240px) / 2) - var(--gut))) 0 0;
    grid-template-columns:minmax(0,1fr) clamp(260px,24vw,340px);align-items:center;gap:clamp(32px,4vw,64px)}
  h1{font-size:clamp(44px,4.3vw,70px)}
  .sign{position:relative;top:auto;right:auto;width:100%}
  .sign-word{font-size:5.7vw;font-size:29cqi}
}
@media (min-width:1024px) and (max-width:1279px){.a-hero{transform:scale(.8);transform-origin:100% 50%}}
@media (min-width:1280px){.hero{--arcs:360px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.arcs .orb{animation:none}.btn{transition:none}}