/* Shanghai street-shop details, built on the approved magnolia palette. */
@font-face {
  font-family: "Hogi Sign";
  src: url("../fonts/hogi-sign-serif.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
.wordmark-text {
  font-family: "Hogi Sign", "Songti SC", "SimSun", serif;
  font-weight: 800;
  font-size: 27px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.brand-english { display: inline-block; margin-left: 10px; font: 800 .52em/1 Arial, sans-serif; letter-spacing: .1em; vertical-align: .12em; }
.wordmark-text small {
  font-family: Arial, "PingFang SC", sans-serif;
  font-size: 8px;
  letter-spacing: .16em;
  font-weight: 500;
}
.brand-mark { font-family: "Hogi Sign", "Songti SC", serif; font-weight: 800; border-radius: 0; outline: 1px solid var(--brand-red); outline-offset: 3px; }
.hero-picture img { object-position: 70% 56%; }
.hero-shade {
  background: linear-gradient(90deg, #15271ff0 0%, #15271fd6 25%, #15271f66 49%, transparent 76%),
    linear-gradient(0deg, #15271fc7, transparent 27%);
}
.hero h1 { font-family: "Hogi Sign", "Songti SC", "SimSun", serif; font-weight: 800; }
.hero-eyebrow {
  display: inline-flex;
  border: 3px double #e8dcb98c;
  padding: 11px 18px;
  background: #264b3b94;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .14em;
  gap: 14px;
}
.magnolia-icon { display: block; width: 27px; height: 31px; flex-shrink: 0; }
.hero-caption { writing-mode: horizontal-tb; right: var(--gutter); bottom: 103px; opacity: .88; letter-spacing: .08em; font-size: 10px; }
.fresh-stamp { border-radius: 2px; width: 120px; height: 150px; transform: rotate(3deg); border: 3px double #e8dcb9ad; }
.fresh-stamp::before { inset: 5px; border-radius: 0; border-style: solid; border-color: #e8dcb94d; }
.fresh-ribbon { border-top: 1px solid #e8dcb954; border-bottom: 1px solid #e8dcb954; }
.fresh-ribbon i { display: inline-flex; align-items: center; }
.fresh-ribbon .magnolia-icon { width: 24px; height: 28px; }
.shanghai-note { padding: 26px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--leaf-line); background: var(--magnolia-white) url("../images/shanghai/terrazzo.svg"); }
.shanghai-note p { font-size: 13px; line-height: 2; letter-spacing: .08em; color: var(--leaf-deep); }
.shanghai-note span { font: 10px/1.8 Arial,sans-serif; letter-spacing: .16em; color: var(--leaf-muted); }
.section-topline > .eyebrow, .daily-header > .eyebrow {
  display: inline-block;
  justify-self: start;
  border: 3px double var(--leaf-green);
  padding: 8px 12px;
  line-height: 1.6;
}
.daily-header > .eyebrow { border-color: #e8dcb980; color: var(--pollen); }
.product-poster { isolation: isolate; }
.portal-frame { position: absolute; inset: 10px; z-index: 2; background: url("../images/shanghai/shikumen-frame.svg") center/100% 100% no-repeat; pointer-events: none; opacity: .65; }
.poster-top { top: 49px; left: 46px; }
.product-poster figcaption { bottom: 38px; left: 44px; }
#panel-fry > img { aspect-ratio: 1; }
.story { border-top: 1px solid var(--leaf-line); border-bottom: 1px solid var(--leaf-line); }
.story-image { min-height: 780px; }
.story-image img { object-position: 52% 44%; }
.story-image::after { inset: 60% 0 0; background: linear-gradient(transparent,#15271fb3); }
.story-image > span { letter-spacing: .08em; line-height: 1.8; }
.story-content { background: url("../images/shanghai/terrazzo.svg"); }
.story-place { display: inline-flex; flex-direction: column; gap: 8px; padding: 12px 18px; border: 3px double var(--leaf-green); color: var(--leaf-deep); font-size: 12px; letter-spacing: .12em; line-height: 1.5; }
.story-place small { font: 9px/1.5 Arial,sans-serif; letter-spacing: .2em; }
.story-content h2 { font-family: "Songti SC", "SimSun", serif; font-weight: 700; }
.story-signoff strong { display: flex; align-items: center; gap: 10px; font: 800 32px/1 Arial, sans-serif; letter-spacing: .08em; }
.story-signoff .magnolia-icon { width: 32px; height: 38px; }
.story-signoff .magnolia-icon path { stroke: var(--leaf-green); }
.partnership-star { width: 240px; height: 280px; color: var(--pollen); opacity: .15; }
.partnership-star img { width: 100%; height: 100%; }
.film-sound { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; min-height: 44px; border: 1px solid #e8dcb980; color: var(--magnolia-white); background: transparent; font-size: 12px; line-height: 1.6; margin: 18px auto 0; width: 100%; }
.film-sound[aria-pressed="true"] { background: var(--magnolia-white); color: var(--leaf-deep); }
.film-sound small { font-size: 10px; }
.privacy-dialog a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1050px) and (min-width: 761px) {
  .wordmark-text { font-size: 24px; }
  .fresh-stamp { width: 104px; height: 130px; }
  .story-image { min-height: 800px; }
  .story-content { padding-left: 9%; padding-right: 9%; }
}
@media (max-width: 760px) {
  .wordmark-text { font-size: 21px; letter-spacing: .06em; }
  .wordmark-text small { font-size: 6px; letter-spacing: .12em; }
  .hero-picture { inset: 260px 0 0; }
  .hero-picture img { object-position: 77% 62%; }
  .hero-shade { background: linear-gradient(180deg,#264b3b 0%,#264b3bf5 24%,#264b3bb3 43%,#15271f0a 69%,#15271fe0 100%); }
  .hero-eyebrow { font-size: 9px; padding: 9px 12px; gap: 10px; letter-spacing: .07em; }
  .hero-eyebrow .magnolia-icon { width: 22px; height: 26px; }
  .fresh-stamp { width: 90px; height: 112px; right: 24px; bottom: 135px; background: #264b3be8; }
  .fresh-stamp strong { font-size: 21px; }
  .fresh-stamp span { font-size: 6px; }
  .hero-caption { display: block; bottom: 103px; font-size: 8px; right: var(--gutter); }
  .shanghai-note { padding-top: 22px; padding-bottom: 22px; display: block; }
  .shanghai-note p { font-size: 12px; }
  .shanghai-note span { display: block; margin-top: 8px; font-size: 8px; }
  .section-topline > .eyebrow, .daily-header > .eyebrow { padding: 7px 9px; font-size: 8px; letter-spacing: .08em; }
  .poster-top { left: 34px; top: 36px; font-size: 7px; }
  .product-poster figcaption { left: 28px; bottom: 30px; }
  .portal-frame { inset: 8px; }
  .story-image { min-height: 0; height: auto; aspect-ratio: 4/5; }
  .story-image img { object-position: 50% 48%; }
  .story-image > span { left: 24px; right: 24px; font-size: 9px; }
  .story-place { font-size: 11px; padding: 10px 15px; }
  .story-place small { font-size: 8px; }
  .partnership-star { width: 180px; height: 220px; right: -30px; top: 58%; }
  .film-sound { font-size: 11px; }
}
@media (max-width: 360px) {
  .wordmark-text { font-size: 20px; }
  .hero-eyebrow { font-size: 8px; padding-left: 9px; padding-right: 9px; }
  .section-topline > .eyebrow { font-size: 7px; padding: 6px; }
  .product-poster figcaption small { font-size: 6px; }
}