/* Store Hamburg: page specific design. Primitives come from co.css. */

.st-facts{display:grid;gap:20px 56px;grid-template-columns:1fr;margin-top:clamp(30px,4.5vw,56px);padding-top:24px;border-top:1px solid rgba(241,236,225,.26)}
@media (min-width:760px){.st-facts{grid-template-columns:repeat(2,auto);justify-content:start}}
.st-facts b{display:block;margin-top:10px;font:500 clamp(17px,1.5vw,22px)/1.3 var(--f-d);color:#F1ECE1}
.st-facts .co-k{color:rgba(241,236,225,.7)}

/* a busier photo needs a stronger scrim behind the headline */
.co-hero.is-store::after{background:linear-gradient(180deg,rgba(20,16,12,.55) 0%,rgba(20,16,12,.38) 22%,rgba(20,16,12,.62) 42%,rgba(20,16,12,.92) 76%,rgba(20,16,12,.97) 100%)}

/* concept */
.st-concept .co-h2{max-width:14ch}
.st-scrub{margin-top:clamp(36px,5vw,72px);max-width:24ch;font-size:clamp(28px,4.8vw,76px)}
.st-scrub b{color:var(--foil)}
.st-pil{list-style:none;margin:clamp(56px,8vw,120px) 0 0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.st-pil li{padding:28px 0 34px;border-bottom:1px solid var(--line)}
.st-pil__n{display:block;font:500 11px/1 var(--f-d);letter-spacing:.26em;color:var(--foil-s,var(--foil));margin-bottom:22px}
.st-pil .co-h3{margin-bottom:12px}
.st-pil .co-p{font-size:16px;margin:0}
@media (min-width:900px){
  .st-pil{grid-template-columns:repeat(4,1fr)}
  .st-pil li{padding:34px 28px 44px 0;border-bottom:0}
  .st-pil li+li{padding-left:28px;border-left:1px solid var(--line)}
}
.st-claim{margin-top:clamp(48px,7vw,104px);max-width:26ch;font-size:clamp(22px,2.6vw,38px);font-weight:200;letter-spacing:-.01em}

/* three worlds: panels slide over each other on desktop */
.st-worlds{background:var(--bg2);padding-top:clamp(84px,12vw,176px);position:relative;--foil:#8C6D2C;--foil-s:#6F5520}
.st-worlds__head{padding-bottom:clamp(40px,6vw,88px)}
.st-worlds__head .co-h2{max-width:14ch}
.st-world{--ink:var(--pink);--ink2:var(--pink2);--line:color-mix(in srgb,var(--pink) 26%,transparent);--foil:var(--pacc);background:var(--pbg);color:var(--pink);display:grid;grid-template-columns:1fr;position:relative}
.st-world__pack{position:relative;display:grid;place-items:center;padding:calc(var(--nav-h) + 20px) var(--pad) clamp(28px,7vw,48px);min-height:min(60vh,420px)}
.st-world__pack::before{content:"";position:absolute;inset:8% 10%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pacc) 22%,transparent),transparent);filter:blur(10px)}
.st-world__pack img{position:relative;width:auto;height:min(60vh,440px);max-width:100%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.22))}
.st-world__txt{position:relative;padding:clamp(28px,4vw,64px) var(--pad) clamp(44px,6vw,88px)}
.st-world__n{position:absolute;right:var(--pad);top:clamp(4px,1vw,16px);font:200 clamp(70px,9vw,150px)/.85 var(--f-d);letter-spacing:-.04em;color:color-mix(in srgb,var(--pink) 7%,transparent);pointer-events:none}
.st-world__h{font:200 clamp(40px,4.7vw,84px)/.98 var(--f-d);text-wrap:balance;text-transform:uppercase;letter-spacing:-.025em;margin:18px 0 20px}
.st-world__h b{font-weight:800}
.st-world__tag{font:300 clamp(18px,1.6vw,24px)/1.45 var(--f-b);max-width:30ch;color:var(--pink);margin:0 0 clamp(26px,3vw,44px)}
.st-world__notes{display:grid;gap:0;border-top:1px solid var(--line);max-width:46ch}
.st-world__notes div{display:grid;grid-template-columns:7.2em 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.st-world__notes dt{font:500 11px/1.6 var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--pacc) 62%,var(--pink))}
.st-world__notes dd{margin:0;font-size:16px;color:var(--pink)}
@media (min-width:900px){
  .st-world{position:sticky;top:var(--nav-h);min-height:calc(100svh - var(--nav-h));grid-template-columns:5fr 6fr;align-items:center;box-shadow:0 -34px 70px rgba(0,0,0,.2)}
  .st-world__pack{min-height:0;padding:clamp(28px,3vw,56px) var(--pad) clamp(28px,3vw,56px) clamp(24px,3vw,56px)}
  .st-world__pack img{height:min(66vh,660px)}
  .st-world__txt{padding:clamp(40px,5vw,88px) var(--pad) clamp(40px,5vw,88px) clamp(8px,2vw,32px)}
}
.st-worlds__foot{position:relative;background:var(--bg2)}
.st-worlds__note{padding:clamp(28px,4vw,56px) var(--pad);margin:0 auto;max-width:1240px;font:400 14px/1.6 var(--f-b);letter-spacing:0;text-transform:none;color:var(--ink2)}

/* location */
.st-loc .co-h2{max-width:12ch}
.st-adr{display:block;font:200 clamp(24px,2.6vw,40px)/1.18 var(--f-d);font-style:normal;letter-spacing:-.015em;margin:8px 0 26px}
.st-hours{display:grid;gap:0;border-top:1px solid var(--line);margin:0 0 26px;max-width:36ch}
.st-hours div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.st-hours dt{font:500 11px/1.6 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.st-hours dd{margin:0}
.st-qr{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:center;padding:clamp(24px,3vw,44px);border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 55%,transparent)}
.st-qr__img{width:176px;height:176px;background:#fff;padding:10px;flex:none}
.st-qr .co-p{margin:12px 0 0;max-width:36ch}
.st-qr__tap{display:none}
@media (max-width:760px){.st-qr__img,.st-qr__scan{display:none}.st-qr p.st-qr__tap{display:block}.st-qr a.st-qr__tap{display:inline-flex;margin-top:18px}}

/* phones: the photo sits in the upper part so the whole lit sign stays readable, text on the dark lower part */
@media (max-width:760px){
  .co-hero.is-store .co-hero__bg{inset:0 0 auto 0;height:60svh}
  .co-hero.is-store::after,.co-hero.is-press::after{background:linear-gradient(180deg,rgba(20,16,12,.5) 0%,rgba(20,16,12,0) 12%,rgba(20,16,12,.05) 36%,rgba(20,16,12,.92) 58%,#14100c 64%)}
}

@supports not (color:color-mix(in srgb,red,blue)){.st-world{--line:var(--pink2)}.st-world__n{color:var(--pink);opacity:.07}.st-world__notes dt{color:var(--pacc)}.st-world__pack::before{background:radial-gradient(closest-side,var(--pacc),transparent);opacity:.22}.st-qr{background:var(--bg)}}