/* ============================================================
   pages.css — mayiu v2 page layers
   ============================================================ */

/* ---------- HERO: editorial type + polaroid duo ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(44px,6.5vh,76px) 0 clamp(30px,4vh,40px)}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,5vw,64px);align-items:center}
.hero__copy .label{margin-bottom:22px}
.hero h1{font-size:clamp(42px,5.8vw,76px);max-width:11ch}
.hero .lede{margin:22px 0 30px;max-width:50ch}
.hero__cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.hero__quiet{margin-top:30px;color:var(--ink-2);font-size:14.5px}
.hero__quiet b{color:var(--ink);font-weight:700}
.hero__quiet .star{color:var(--pink);letter-spacing:.08em}

.hero__duo{position:relative;height:min(560px,58vw);justify-self:end;width:min(100%,430px)}
.pola{
  position:absolute;background:#fff;padding:10px 10px 40px;border-radius:6px;
  box-shadow:var(--shadow);transition:transform .45s var(--ease);
}
.pola img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pola figcaption{position:absolute;left:12px;right:12px;bottom:8px;font:600 21px/1 var(--hand);color:var(--pink);text-align:center}
.pola--1{width:62%;top:0;right:2%;transform:rotate(2.4deg)}
.pola--2{width:56%;left:0;bottom:0;transform:rotate(-3deg);z-index:2}
.pola:hover{transform:rotate(0) translateY(-8px);z-index:3}
.hero__bloom{position:absolute;z-index:3;pointer-events:none;color:var(--pink);animation:petal 9s ease-in-out infinite}
.hero__bloom--a{top:-34px;left:-26px;width:88px;height:88px}
.hero__bloom--b{bottom:8%;right:-24px;width:60px;height:60px;animation-delay:1.6s}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:46px}
  .hero__duo{justify-self:start;height:min(520px,124vw);width:min(100%,380px)}
  .hero__bloom--a{left:auto;right:-10px}
}
@media (prefers-reduced-motion:reduce){.hero__bloom{animation:none}}

/* shared bloom svg (uses currentColor) */
.bloom{display:block;color:var(--pink);position:absolute;pointer-events:none}
.bloom--float{animation:petal 9s ease-in-out infinite}
@keyframes petal{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-11px) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.bloom--float{animation:none}}

/* ---------- generic rhythm ---------- */
.sec{padding:clamp(64px,9vh,104px) 0}
.sec--tight{padding:clamp(52px,7vh,76px) 0}
.sec--tint{background:var(--rose-2)}
.sec--cream{background:var(--cream)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,54px)}
.sec-head .label{margin-bottom:14px;display:flex}
.sec-head .h2{margin-top:12px}
.sec-head .sub{margin-top:14px}
.sec-head__link{padding-bottom:6px}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,70px);align-items:center}
.story__seal{width:68px;height:68px;margin-bottom:20px}
.story__body .h2{margin:14px 0 20px}
.story__quote{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(35,26,31,.12);
  font:500 italic clamp(18px,2vw,22px)/1.45 var(--serif);color:var(--pink);
  max-width:40ch;
}
.story__quote small{display:block;margin-top:10px;font:italic 500 14px/1 var(--serif);color:var(--ink-2)}
.story__media{position:relative}
.story__media img.story__photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.story__bloom{bottom:-30px;left:-28px;width:96px;height:96px}
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:50px}
  .story__media{order:2}
  .story__bloom{left:auto;right:-12px;bottom:-24px;width:78px;height:78px}
}

/* ---------- postcards (what's inside) ---------- */
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.post{
  background:#fff;border-radius:6px;padding:10px 10px 16px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.post:nth-child(odd){transform:rotate(-.7deg)}
.post:nth-child(even){transform:rotate(.7deg)}
.post:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--shadow)}
.post img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.post__body{padding:14px 6px 0;display:grid;gap:7px}
.post__body h3{font:500 21px/1.2 var(--serif)}
.post__body p{color:var(--ink-2);font-size:14px}
.post__body .tlink{margin-top:2px;font-size:12.5px}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.posts{grid-template-columns:1fr;gap:14px}.post{transform:none!important}}

/* ---------- bag band ---------- */
.bagband{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,66px);align-items:center}
.bagband__body .h2{margin:14px 0 18px}
.bagband__cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:26px}
.bagband__media{position:relative}
.bagband__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:var(--shadow)}
.bagband__tag{
  position:absolute;top:-18px;left:-16px;background:#fff;color:var(--pink);
  font:600 26px/1 var(--hand);padding:14px 20px 16px;border-radius:5px;
  box-shadow:var(--shadow-sm);transform:rotate(-7deg);
}
.bagband__tag::before{
  content:"";position:absolute;top:9px;left:11px;width:7px;height:7px;border-radius:50%;
  background:var(--rose-2);box-shadow:inset 0 1px 2px rgba(35,26,31,.25);
}
@media (max-width:900px){.bagband{grid-template-columns:1fr;gap:44px}.bagband__tag{top:-14px;left:10px}}

/* ---------- cafe teaser (home) ---------- */
.cafeteaser{text-align:center;padding:clamp(60px,8vh,88px) 0}
.cafeteaser__logo{width:96px;height:96px;border-radius:50%;margin:0 auto 20px;box-shadow:var(--shadow-sm)}
.cafeteaser h2{font-size:clamp(28px,3.6vw,42px)}
.cafeteaser p{margin:16px auto 0;color:var(--ink-2);max-width:56ch}
.cafeteaser__links{margin-top:26px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap}

/* ---------- visit (home, no map) ---------- */
.visit2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
.visit2 .h2{margin:14px 0 26px}
.vrows{display:grid;gap:0;max-width:520px}
.vrow{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid rgba(35,26,31,.1)}
.vrow dt{font:italic 500 16px/1.4 var(--serif);color:var(--pink)}
.vrow dd{margin:0;color:var(--ink-2);font-size:15.5px}
.vrow dd b{color:var(--ink);font-weight:700}
.visit2__cta{display:grid;gap:16px;justify-items:start;padding-top:8px}
.visit2__cta .note{color:var(--ink-2);font-size:14px;max-width:30ch}
@media (max-width:860px){.visit2{grid-template-columns:1fr}.visit2__cta{padding-top:26px}}

/* ---------- store page ---------- */
.store-sec{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(48px,7vh,74px) 0;border-bottom:1px solid rgba(35,26,31,.08)}
.store-sec:last-of-type{border-bottom:0}
.store-sec:nth-of-type(even){grid-template-columns:1.05fr .95fr}
.store-sec:nth-of-type(even) .store-sec__media{order:2}
.store-sec__media{position:relative}
.store-sec__media img:not(.store-sec__badge){width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:var(--shadow)}
.store-sec__num{font:500 italic 30px/1 var(--serif);color:var(--pink);display:block;margin-bottom:14px}
.store-sec h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:16px}
.store-sec p{color:var(--ink-2);max-width:52ch}
.store-list{display:grid;gap:9px;margin-top:18px}
.store-list li{display:flex;gap:10px;align-items:baseline;color:var(--ink-2);font-size:15.5px}
.store-list li::before{content:"✿";color:var(--pink);font-size:12px;flex:none}
.store-sec .tlink{margin-top:22px}
.store-sec__badge{
  position:absolute;right:-20px;top:-20px;width:100px;height:100px;border-radius:50%;
  border:5px solid #fff;box-shadow:var(--shadow-sm);
}
.store-cafe-link{margin-top:34px;display:flex;justify-content:center}
@media (max-width:900px){
  .store-sec,.store-sec:nth-of-type(even){grid-template-columns:1fr;gap:34px;padding:40px 0}
  .store-sec:nth-of-type(even) .store-sec__media{order:0}
  .store-sec__badge{right:-10px;top:-14px;width:84px;height:84px}
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.step{background:#fff;border-radius:6px;padding:28px 26px;display:grid;gap:13px;box-shadow:var(--shadow-sm)}
.step__num{width:42px;height:42px;border-radius:50%;background:var(--rose-2);color:var(--pink);display:grid;place-items:center;font:500 italic 19px/1 var(--serif)}
.step h3{font:500 20px/1.25 var(--serif)}
.step p{color:var(--ink-2);font-size:15px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- gallery: polaroid wall ---------- */
.gal-head{padding:clamp(44px,6vh,72px) 0 clamp(28px,4vh,40px)}
.gal-head h1{font-size:clamp(38px,5vw,58px)}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;padding-top:8px}
.pcard{
  background:#fff;border-radius:6px;padding:12px 12px 20px;box-shadow:var(--shadow-sm);
  transform:rotate(var(--tilt,0deg));
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pcard:nth-child(3n+1){--tilt:-1.2deg}
.pcard:nth-child(3n+2){--tilt:.9deg}
.pcard:nth-child(3n){--tilt:-.6deg}
.pcard:hover{transform:rotate(0) translateY(-7px);box-shadow:var(--shadow);z-index:2;position:relative}
.pcard img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pcard__cap{padding:14px 4px 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pcard__cap b{font:500 italic 16.5px/1.3 var(--serif);color:var(--ink);font-weight:500}
.pcard__cap span{font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pink);white-space:nowrap}
.tile__btn{display:block;width:100%;text-align:left}
@media (max-width:900px){.wall{grid-template-columns:repeat(2,1fr);gap:18px 14px}}
@media (max-width:520px){.wall{grid-template-columns:1fr;gap:16px}.pcard{transform:none}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:4vh 3vw}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(33,10,22,.95);border:0}
.lightbox__body{position:relative;z-index:1;display:grid;gap:16px;justify-items:center;max-width:min(1060px,94vw);max-height:92vh}
.lightbox__img{max-height:74vh;max-width:100%;object-fit:contain;border:10px solid #fff;border-radius:5px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lightbox__cap{color:#FBE7EF;font-size:14.5px;display:flex;gap:14px;align-items:center}
.lightbox__text{display:flex;gap:12px;align-items:baseline}
.lightbox__cap b{font-weight:700;color:#fff}
.lightbox__text > span{font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(251,231,239,.55)}
.lightbox__count{color:rgba(251,231,239,.6);font-size:12.5px;letter-spacing:.16em}
.lightbox__x{position:absolute;top:22px;right:24px;z-index:2;width:48px;height:48px;border-radius:50%;background:rgba(255,252,250,.14);color:#FBE7EF;display:grid;place-items:center;font-size:22px;transition:background .25s}
.lightbox__x:hover{background:var(--pink);color:#fff}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;border-radius:50%;background:rgba(255,252,250,.14);color:#FBE7EF;display:grid;place-items:center;font-size:22px;transition:background .25s}
.lightbox__nav:hover{background:var(--pink);color:#fff}
.lightbox__nav--prev{left:2vw}
.lightbox__nav--next{right:2vw}
@media (max-width:640px){.lightbox__nav--prev{left:8px}.lightbox__nav--next{right:8px}}

/* ---------- visit page ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:#fff;border-radius:8px;padding:28px 26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.card h3{font:500 24px/1.2 var(--serif)}
.card p{color:var(--ink-2);font-size:15px}
.card .btn,.card .tlink{margin-top:auto}
.card--wide{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.card--wide > div{display:grid;gap:8px;max-width:56ch}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.hours{border-top:1px solid rgba(35,26,31,.1);margin-top:6px;width:100%}
.hours li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid rgba(35,26,31,.1);color:var(--ink-2);font-size:15px}
.hours li b{color:var(--ink);font-weight:700}
.map-frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--rose-2)}
.map-frame iframe{display:block;width:100%;height:340px;border:0;filter:saturate(.95) contrast(1.02)}
@media (max-width:860px){.map-frame iframe{height:300px}}

/* ---------- cafe page ---------- */
.cafepage{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:center}
.cafepage__media{position:relative}
.cafepage__media img.cafephoto{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:var(--shadow)}
.cafepage__seal{position:absolute;left:-26px;bottom:-26px;width:118px;height:118px;border-radius:50%;border:5px solid var(--rose);box-shadow:var(--shadow-sm)}
.cafepage__body .h2{margin:14px 0 18px}
.cafefacts{display:grid;gap:10px;margin-top:22px}
.cafefacts li{display:flex;gap:11px;align-items:baseline;color:var(--ink-2);font-size:15.5px}
.cafefacts li::before{content:"✿";color:var(--pink);font-size:12px;flex:none}
.cafepage__cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:26px}
@media (max-width:900px){
  .cafepage{grid-template-columns:1fr;gap:46px}
  .cafepage__seal{left:auto;right:-10px;bottom:-18px;width:96px;height:96px}
}

/* noscript notice */
.noscript{margin:24px auto;max-width:640px;text-align:center;color:var(--ink-2);font-size:14.5px;border:1px dashed var(--line);border-radius:12px;padding:18px 20px;background:#fff}