/* 平台版视觉：完整背景图 + 两层细雨与轻雾，没有循环视频。 */
.preview-note { background: #eaf1eb; color: #536b5b; }
.hero { min-height: 670px; background: var(--qx-paper); }
.hero-image {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  z-index: -1; border: 0; border-radius: 0; box-shadow: none;
  background: #e9f0e9 url('/assets/hero-platform-wide-v1.webp') center 52% / cover no-repeat;
  overflow: hidden;
}
.hero-image::before, .hero-image::after {
  content: ""; position: absolute; display: block; border-radius: 50%; pointer-events: none;
  filter: blur(24px); background: radial-gradient(ellipse, rgba(255,255,255,.72), rgba(255,255,255,.28) 45%, transparent 72%);
  animation: qx-platform-breeze 26s ease-in-out infinite alternate;
}
.hero-image::before { width: 47%; height: 31%; left: 31%; top: 15%; opacity: .24; }
.hero-image::after { width: 43%; height: 21%; left: 52%; top: 64%; opacity: .18; animation-duration: 32s; animation-direction: alternate-reverse; }
.rain-layer { position: absolute; inset: -240px 0; pointer-events: none; background: url('/assets/rain-fine.svg') 0 0 / 360px 180px repeat; animation: qx-fine-rain 1.25s linear infinite; opacity: .36; }
.rain-layer--far { background-size: 480px 240px; opacity: .20; animation-name: qx-distant-rain; animation-duration: 2.1s; }
.hero.is-rain-paused .rain-layer, .hero.is-rain-paused .hero-image::before, .hero.is-rain-paused .hero-image::after { animation-play-state: paused; }
.hero.is-rain-disabled .rain-layer { opacity: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; height: auto; z-index: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(252,250,245,.55) 84%, #fcfaf5 100%), linear-gradient(90deg, rgba(252,250,245,.89) 0%, rgba(252,250,245,.76) 28%, rgba(252,250,245,.15) 59%, transparent 100%);
  transform: none; animation: none; pointer-events: none;
}
.hero-inner { min-height: 670px; position: relative; z-index: 1; }
.hero-copy { width: min(52%, 580px); padding: 44px 0 72px; }
.hero h1 { font-size: clamp(42px, 4.2vw, 64px); }
.hero-description { max-width: 475px; font-size: 16px; color: #52665b; }
.hero-bottom { z-index: 2; background: rgba(252,250,245,.74); color: #50695a; border-radius: 20px; padding: 5px 12px; }
.shop-section { background: #fcfaf5; }
.product-grid:has(> .empty-state) { display: block; }
.product-grid > .empty-state { margin: 0; padding: 29px; border: 1px dashed #cad7cb; border-radius: 16px; background: #f7f9f4; }
.order-note { border-left: 3px solid #80a18a; background: #f2f7f0; }
.about-layout { display: block; max-width: 960px; }
.about-copy { padding: 37px 43px; background: #f6f8f1; }
.about-copy h2 { max-width: 670px; }
.about-copy > p:not(.section-label) { max-width: 760px; }
.contact-links .button { font-size: 12px; padding-inline: 16px; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; text-align: center; }
.whisper-card:hover { transform: translateY(-3px); }
.whisper-card:focus-within { transform: translateY(-3px); box-shadow: var(--qx-shadow-hover); }
.shell { width: min(1226px, 100%); padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
.preview-note { padding-top: max(7px, env(safe-area-inset-top)); }
.site-header { -webkit-backdrop-filter: blur(18px); }
.contact-card { -webkit-backdrop-filter: blur(9px); }
.site-footer { padding-bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); }
.menu-toggle { min-width: 44px; min-height: 44px; }
a, button { -webkit-tap-highlight-color: rgba(111,137,121,.16); touch-action: manipulation; }
.whisper-card textarea, .whisper-card input { font-size: 16px; line-height: 1.5; min-height: 48px; scroll-margin-block: 100px; }
.whisper-card textarea { min-height: 150px; }
.whisper-layout > * { min-width: 0; }
#turnstile-box { width: 100%; min-width: 0; }
.sound-control { position: fixed; z-index: 20; right: max(22px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 11px 17px; border: 1px solid #cbd8cc; border-radius: 999px; background: rgba(252,250,245,.96); color: var(--qx-pine); font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 5px 18px rgba(48,75,66,.08); transition: transform .18s ease, background .18s ease; }
.sound-control[aria-pressed="true"] { background: #eaf1e8; }
body.is-contact-visible .sound-control { visibility: hidden; }
.ambient-settings { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dfe7dc; }
.ambient-caption { display: block; color: var(--qx-pine); font-family: "Songti SC", "STSong", serif; font-size: 17px; }
.ambient-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 11px; }
.ambient-toggle { min-height: 44px; padding: 9px 14px; border: 1px solid #cbd8cc; border-radius: 99px; background: #fcfaf5; color: var(--qx-pine); font: inherit; font-size: 12px; cursor: pointer; transition: transform .24s cubic-bezier(.2,.7,.2,1), background .24s ease; }
.ambient-toggle[aria-pressed="true"] { background: #e6eee4; }
.ambient-toggle:disabled { opacity: .65; cursor: default; }
.ambient-settings small { display: block; font-size: 11px; line-height: 1.8; color: var(--qx-muted); }
.is-touch-press:not(input):not(textarea) { transform: translateY(-2px); box-shadow: var(--qx-shadow-hover); }
@media (hover: hover) { .sound-control:hover, .ambient-toggle:not(:disabled):hover { transform: translateY(-3px); } }
.sound-icon { display: flex; align-items: center; gap: 3px; height: 18px; }
.sound-icon i { width: 2px; height: 6px; background: currentColor; border-radius: 2px; }
.sound-icon i:nth-child(2) { height: 13px; }
.sound-icon i:nth-child(3) { height: 9px; }
.sound-control[aria-pressed="true"] .sound-icon i { animation: qx-sound-wave 1.8s ease-in-out infinite alternate; }
.sound-control[aria-pressed="true"] .sound-icon i:nth-child(2) { animation-delay: -.5s; }
.sound-control[aria-pressed="true"] .sound-icon i:nth-child(3) { animation-delay: -1.1s; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes qx-sound-wave { from { transform: scaleY(.65); } to { transform: scaleY(1.2); } }
@keyframes qx-platform-breeze { from { transform: translate3d(-14px, 3px, 0); } to { transform: translate3d(22px, -3px, 0); } }
@keyframes qx-fine-rain { from { transform: translate3d(0, -180px, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes qx-distant-rain { from { transform: translate3d(0, -240px, 0); } to { transform: translate3d(0, 0, 0); } }
@media (max-width: 900px) {
  .header-inner { height: 66px; }
  .menu-toggle { width: 44px; height: 44px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
  .menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--qx-pine); }
  .site-nav { display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(24px, env(safe-area-inset-left)) 20px; background: #fcfaf5; border-bottom: 1px solid var(--qx-border); box-shadow: var(--qx-shadow); }
  .site-nav.is-open { display: flex; }
  /* 横屏手机高度不够时，菜单在内部滚动，避免最后几项够不着（110px 约为顶部提示条加页头） */
  .site-nav { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav a { padding: 14px 4px; min-height: 44px; }
  /* 菜单打开时先收起右下角的雨声按钮，免得盖住菜单里的「联系我」 */
  body:has(.site-nav.is-open) .sound-control { visibility: hidden; }
  .site-nav .nav-contact { text-align: center; margin-top: 7px; padding: 12px; }
  .hero { min-height: 600px; }
  .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; background-position: 52% center; }
  .hero-inner { min-height: 600px; align-items: center; }
  .hero-copy { width: min(65%, 560px); padding: 40px 0 60px; }
}
@media (max-width: 620px) {
  .shell { width: min(520px, 100%); padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .brand { font-size: 23px; gap: 8px; }
  .hero { min-height: 640px; min-height: clamp(540px, 82svh, 720px); }
  .hero-image { width: 100%; height: 100%; margin: 0; background-size: cover; background-position: 59% center; }
  .hero::after { inset: 0; background: linear-gradient(180deg, rgba(252,250,245,.35) 0%, rgba(252,250,245,.60) 44%, rgba(252,250,245,.90) 79%, #fcfaf5 100%); }
  .hero-inner { min-height: 640px; min-height: clamp(540px, 82svh, 720px); align-items: flex-end; }
  .hero-copy { width: 100%; padding: 25px 0 60px; }
  .hero h1 { font-size: clamp(35px, 9vw, 46px); }
  .hero-description { font-size: 14px; }
  .about-copy { padding: 24px; }
  .contact-links { display: grid; }
  .contact-links .button { font-size: 12px; gap: 8px; }
  .sound-control { right: max(14px, env(safe-area-inset-right)); }
  .hero-image::before, .hero-image::after { filter: blur(14px); }
  .rain-layer { opacity: .30; }
  .rain-layer--far { opacity: .13; }
  body.is-editing .sound-control { visibility: hidden; }
}
@media (hover: none) {
  .product-card:hover, .order-note:hover, .notice-item:hover, .notice-intro:hover, .about-copy:hover, .blog-panel:hover, .contact-card:hover, .contact-layout > div:first-child:hover, .whisper-card:hover, .whisper-layout > div:first-child:hover, .item-panel:hover, .button-primary:hover { transform: none; box-shadow: var(--qx-shadow); }
  .whisper-card:focus-within { transform: none; }
  button:not(:disabled):active, a.button:not(.button-disabled):active { transform: scale(.985); }
  .is-touch-press:not(input):not(textarea) { transform: translateY(-2px); box-shadow: var(--qx-shadow-hover); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero, .hero-inner { min-height: 470px; }
  .hero-copy { padding-block: 35px; width: min(70%, 600px); }
  .hero h1 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image::before, .hero-image::after { animation: none !important; }
  .rain-layer { animation: none !important; opacity: 0; }
  .sound-icon i { animation: none !important; }
  .sound-control, .ambient-toggle { transition: none; }
  .sound-control:hover, .ambient-toggle:not(:disabled):hover { transform: none; }
  .is-touch-press:not(input):not(textarea) { transform: none; }
  .product-card:hover, .order-note:hover, .notice-item:hover, .notice-intro:hover, .about-copy:hover, .blog-panel:hover, .contact-card:hover, .contact-layout > div:first-child:hover, .whisper-card:hover, .whisper-layout > div:first-child:hover, .item-panel:hover, .whisper-card:focus-within, button:not(:disabled):active, a.button:not(.button-disabled):active { transform: none; }
}

/* 栏目预告（转型后替代原资源卡片）：独立类名，沿用雾青 / 芷草白与 3px 悬停 */
.corner-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.corner-card { padding: 22px 22px 24px; border-radius: 18px; background: var(--qx-paper); border: 1px solid var(--qx-border); box-shadow: var(--qx-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.corner-card h3 { margin: 10px 0 8px; font-size: 1.15rem; color: var(--qx-pine); }
.corner-card p { margin: 0; line-height: 1.75; color: var(--qx-muted); }
.corner-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; letter-spacing: .08em; color: var(--qx-jade); background: var(--qx-mist); }
.corner-note { margin: 22px 0 0; font-size: .9rem; color: var(--qx-muted); }
@media (hover: hover) { .corner-card:hover { transform: translateY(-3px); box-shadow: var(--qx-shadow-hover); } }
@media (prefers-reduced-motion: reduce) { .corner-card { transition: none; } .corner-card:hover { transform: none; } }
.corner-status--live { color: #fffefa; background: var(--qx-jade); }
.corner-card h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--qx-border); text-underline-offset: 4px; }
.corner-card h3 a:hover, .corner-card h3 a:focus-visible { text-decoration-color: var(--qx-jade); }