/* Garden art direction: open paper, living bamboo, uninterrupted content. */
:root { --ink:#253c32; --muted:#4c5c4e; --line:#9aa58a77; --paper:#f7f4ec; }
.watercolor-fallback { background:#f7f4ec; }
.watercolor-fallback::before { display:none; }
.watercolor-canvas { z-index:-1; }
body { color:var(--ink); }
.wrap { width:min(calc(100% - 144px),1140px); }
.header { height:110px; border-bottom:1px solid #71836a44; }
.brand { color:#304e3f; font-weight:500; letter-spacing:.15em; }
.brand::before { color:#895e48;border-color:#895e48; }
.desktop-nav { font-size:13px; gap:32px; }
.hero { min-height:730px; grid-template-columns:58% 42%; padding:70px 0 110px; align-items:start; }
.hero-copy { padding:35px 30px 0 0; }
.hero h1 { font-size:clamp(42px,4.4vw,66px);line-height:1.45;letter-spacing:.07em;color:#223b30; }
.eyebrow { color:#6c6e4a; letter-spacing:.22em; }
.eyebrow::before { background:#8a8f65; }
.hero-desc { margin-top:30px; max-width:420px; }
.button { min-height:52px; }
.button.primary { background:#355441;border-color:#355441; }
.button.primary:hover { background:#213c2c; }
.button.secondary { background:#faf7ef88;border-color:#7e8a6c; }
.hero-image { margin:36px 0 0 25px;padding:8px;background:#f5f1e7b3;border:1px solid #8d967c55; }
.hero-image img { height:245px;object-fit:cover; }
.hero-image figcaption { font-size:11px; }
.hero-image figcaption span { display:none; }
.garden-section .wrap { max-width:1140px; }
.garden-intro { max-width:690px;margin:0 0 48px; }
.garden-intro h2 { font-size:44px; color:#294337; }
.scroll-paper { width:70%;margin:0;padding:0; }
.scroll-group { padding:0; }
.scroll-group h3 { color:#344e3a;font-size:27px;border-color:#728266; }
.scroll-group th,.scroll-group td { border-color:#89977a55; }
.scroll-group th { font-weight:500; }
.scroll-group .item-name { font-size:18px; }
.scroll-group .item-desc { font-size:14px; color:#52604e; }
.price,.time,.tiers h3,.phone,.wechat-line strong { font-family:Arial,'Microsoft YaHei',sans-serif; font-variant-numeric:lining-nums tabular-nums; }
.art-note { text-align:left; margin-top:35px; font-size:11px; color:#55634e; }
.section-heading h2,.contact .section-heading h2 { color:#294337; }
.space-section,.contact,.footer { background:transparent; }
.gallery img,.storefront img { border:6px solid #fbf8ee;box-shadow:0 3px 20px #233b3110; }
.tiers { border-top:1px solid #738568; }
.tiers h3 { color:#37553c; }
.motion-toggle { position:fixed;right:22px;bottom:22px;top:auto;z-index:8;background:#f8f4e9e8;border:1px solid #8c9876;border-radius:30px;padding:8px 17px;color:#36533d;font-size:12px;box-shadow:0 3px 15px #233b3110; }
.contact .eyebrow,.label,.contact .label { color:#526345; }
.qr { background:white;padding:10px; }
.no-webgl .watercolor-canvas { display:none; }
@media(max-width:900px) {
  .wrap { width:calc(100% - 72px); }
  .hero { grid-template-columns:55% 45%; }
  .hero-image { margin-left:10px; }
  .scroll-paper { width:78%; }
}
@media(max-width:700px) {
  .wrap { width:calc(100% - 40px); }
  .header { height:76px; }
  .hero { padding:25px 0 70px;min-height:0; }
  .hero-copy { padding:12px 0 26px; }
  .hero h1 { font-size:38px;line-height:1.4; }
  .hero-desc { font-size:15px;line-height:1.85;margin-top:20px; }
  .hero-image { width:82%;margin:10px 0 0; }
  .hero-image img { height:200px; }
  .hero-image figcaption { font-size:11px; }
  .scroll-paper { width:100%;padding:0; }
  .garden-intro { margin-bottom:28px; }
  .garden-intro h2 { font-size:34px; }
  .scroll-group .item-name { font-size:16px; }
  .scroll-group .item-desc { font-size:13px;line-height:1.65; }
  .scroll-group td.time { font-size:14px; }
  .scroll-group td.price { font-size:19px; }
  .scroll-group th,.scroll-group td { padding-top:20px;padding-bottom:20px; }
  .motion-toggle { bottom:82px;right:12px;padding:6px 12px; }
  .mobile-bar { background:#f7f4ecee; }
  .mobile-bar a:last-child { background:#355441;border-color:#355441; }
}

@media(min-width:701px){.scroll-paper{width:68%;}.hero-copy{padding-left:0;}}
@media(max-width:700px){.hero{width:calc(100% - 40px);grid-template-columns:1fr;}.hero-image{width:100%;}.hero-copy{padding-left:0;}}

/* Glass-inspired web material: opaque-enough body, translucent optical rim. */
.hero-copy,.scroll-paper,.contact-info,.tiers,.desktop-nav,.motion-toggle {
  background:linear-gradient(135deg,#fffef6c9,#f7f7ed9e 48%,#e7efe5b8);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  backdrop-filter:blur(15px) saturate(125%);
  border:1px solid #ffffffb8;
  box-shadow:inset 0 1px 1px #ffffffed,inset 0 -1px 1px #7d9b7b24,0 12px 40px #254b3510;
  border-radius:20px;
}
.hero-copy { padding:32px; }
.hero { gap:24px;grid-template-columns:56% 44%;overflow:visible; }
.hero h1 { font-size:clamp(38px,4vw,60px); }
.desktop-nav { padding:0 24px;border-radius:40px;gap:25px; }
.scroll-paper { padding:30px 32px;position:relative; }
.scroll-paper::before,.hero-copy::before {
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  border:1px solid #ffffff70;
  background:linear-gradient(125deg,#ffffff60,transparent 30%,transparent 75%,#ffffff35);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;padding:2px;
}
.contact-info { padding:28px; }
.tiers { padding:0 26px; }
.hero-image { margin-left:0; }
.button,.photo,.gallery img,.hero-image { border-radius:12px; }
.button.secondary { background:#ffffff70;backdrop-filter:blur(12px); }
@media(max-width:900px) and (min-width:701px){.hero-copy{padding:24px;}.hero h1{font-size:36px;}.scroll-paper{width:70%;padding:25px;}.desktop-nav{gap:18px;padding:0 18px;}}
@media(max-width:700px){
  .hero{grid-template-columns:1fr;gap:0;}.hero-copy{padding:24px 20px;border-radius:18px;}.hero h1{font-size:32px;}
  .scroll-paper{width:100%;padding:20px 14px;border-radius:18px;}
  .scroll-group .item-name{font-size:16px;}.scroll-group .item-desc{font-size:14px;}
  .scroll-group .price{font-size:18px;}.scroll-group .time{font-size:14px;}
  .contact-info{padding:22px;}.tiers{padding:0 18px;}
  .mobile-bar{background:#f7f8eece;backdrop-filter:blur(18px) saturate(130%);border-top:1px solid #fff;}
}
@supports not (backdrop-filter:blur(1px)){.hero-copy,.scroll-paper,.contact-info,.tiers,.desktop-nav{background:#f7f5edee;}}
@media(prefers-reduced-transparency:reduce){.hero-copy,.scroll-paper,.contact-info,.tiers,.desktop-nav{background:#f7f5ed;backdrop-filter:none;}}

@media(max-width:700px){.scroll-paper,.hero-copy,.contact-info,.tiers{box-shadow:inset 0 1px 1px #ffffffed;backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);}}

/* Avoid expanded backdrop shadows over the animated water. */
.hero-copy,.scroll-paper,.contact-info,.tiers,.desktop-nav,.motion-toggle { box-shadow:inset 0 1px 1px #ffffffed,inset 0 -1px 1px #7d9b7b24; }
