:root { --ink:#191812; --cream:#f5f0e6; --yellow:#efb83f; --orange:#dc6e2f; --green:#60785b; --line:rgba(25,24,18,.18); --muted:#777268; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; overflow-x:hidden; }
body::selection { background:var(--yellow); color:var(--ink); }
.grain { pointer-events:none; position:fixed; inset:0; z-index:10; opacity:.075; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.section-shell,.site-header { width:min(1160px,calc(100% - 80px)); margin:0 auto; }
.site-header { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:20; }
.brand { color:var(--ink); display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; letter-spacing:-.04em; text-decoration:none; }
.brand-mark { background:var(--ink); color:var(--yellow); width:25px; height:25px; display:grid; place-items:center; border-radius:50%; font-size:15px; }
.main-nav { display:flex; gap:42px; margin-left:90px; }
.main-nav a,.site-footer,.eyebrow,.section-index,.card-topline,.card-label,.detail-kicker { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; }
.main-nav a { position:relative; padding:12px 0; }
.main-nav a::after { content:''; position:absolute; left:0; right:100%; bottom:3px; height:2px; background:var(--orange); transition:right .3s; }
.main-nav a:hover::after,.main-nav a.is-active::after { right:0; }
.menu-button { display:none; border:0; background:none; padding:9px; }
.menu-button span:not(.sr-only) { display:block; width:22px; height:2px; background:var(--ink); margin:5px; }
.hero { min-height:calc(100vh - 96px); display:grid; grid-template-columns:42% 58%; align-items:center; padding-top:40px; padding-bottom:72px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 30px; }
.eyebrow-dot { background:var(--orange); display:inline-block; width:7px; height:7px; border-radius:50%; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(76px,10vw,150px); line-height:.82; letter-spacing:-.1em; margin:0 0 36px -9px; font-weight:900; }
h1 em,h2 span,.closing em { color:var(--orange); font-style:normal; }
.hero-lede { font-size:17px; line-height:1.9; max-width:320px; margin-bottom:37px; }
.arrow-link,.back-top { color:var(--ink); font-size:12px; font-weight:700; text-decoration:none; display:inline-flex; gap:20px; align-items:center; }
.arrow-link span,.back-top span { width:35px; height:35px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:17px; transition:transform .25s, background .25s; }
.arrow-link:hover span,.back-top:hover span { transform:rotate(-45deg); background:var(--yellow); }
.hero-art { height:600px; margin-left:40px; position:relative; overflow:hidden; background:linear-gradient(145deg,#d8e0ca 0%,#a8be96 100%); border-radius:48% 48% 6% 6% / 34% 34% 6% 6%; }
.sun-orb { position:absolute; width:260px; height:260px; border-radius:50%; background:var(--yellow); top:85px; left:calc(50% - 130px); box-shadow:0 0 0 20px rgba(239,184,63,.14),0 0 0 42px rgba(239,184,63,.08); }
.hill { position:absolute; border-radius:50% 50% 0 0; bottom:-15%; transform:rotate(-7deg); }
.hill-back { width:120%; height:47%; left:-14%; background:#859f78; }
.hill-front { width:120%; height:35%; left:-12%; bottom:-13%; background:#5c7659; transform:rotate(5deg); }
.banana { position:absolute; width:230px; height:116px; border:27px solid var(--yellow); border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(24deg); filter:drop-shadow(3px 7px 0 rgba(80,75,40,.15)); }
.banana span { width:13px; height:28px; background:#5f4928; display:block; position:absolute; right:-22px; bottom:-18px; border-radius:50% 50% 20% 20%; transform:rotate(30deg); }
.banana-one { left:27%; top:26%; }
.banana-two { width:170px; height:92px; border-width:21px; left:49%; top:39%; transform:rotate(35deg) scaleX(-1); }
.banana-two span { right:auto; left:-17px; bottom:-12px; }
.leaf { position:absolute; width:190px; height:32px; border-radius:100% 0; background:#416748; transform:rotate(-25deg); opacity:.88; }
.leaf-one { bottom:22%; left:16%; }.leaf-two { bottom:31%; right:5%; transform:rotate(38deg) scale(.75); }
.art-caption { position:absolute; z-index:2; bottom:27px; left:31px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; color:#f6f3e8; letter-spacing:.12em; }
.intro { padding:132px 0 155px; }
.section-intro,.ritual-header { display:grid; grid-template-columns:25% 1fr; gap:40px; }
.section-index { margin-top:9px; }
h2 { font-size:clamp(42px,5.5vw,74px); letter-spacing:-.085em; line-height:1.02; margin-bottom:27px; font-weight:800; }
.section-note { font-size:13px; line-height:1.9; color:var(--muted); max-width:300px; margin:0; }
.region-layout { display:grid; grid-template-columns:1fr 36%; gap:90px; align-items:center; margin-top:78px; }
.map-card { height:490px; border-radius:50% 50% 45% 45%; background:#e2c98a; position:relative; overflow:hidden; background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px); background-size:18px 18px; }
.map-card::after { content:''; position:absolute; inset:11%; border:1px solid rgba(76,84,52,.25); border-radius:50%; transform:rotate(-24deg); }
.map-label { position:absolute; z-index:3; font-size:13px; display:flex; flex-direction:column; gap:5px; font-weight:700; }
.map-label small { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#6e664d; font-size:9px; font-weight:400; }
.label-guangxi { top:27%; left:48%; }.label-yunnan { top:48%; left:24%; }.label-hainan { bottom:19%; right:22%; }
.map-label::before { content:''; width:9px; height:9px; background:var(--orange); border-radius:50%; position:absolute; left:-17px; top:3px; }
.map-river { position:absolute; border:1px solid rgba(78,126,131,.4); border-radius:50%; transform:rotate(35deg); }.river-one { height:210px; width:510px; left:-27%; top:24%; }.river-two { height:160px; width:420px; left:8%; top:49%; transform:rotate(-22deg); }
.map-spark { position:absolute; color:#6e845b; z-index:2; }.spark-one { top:16%; left:23%; }.spark-two { top:40%; left:68%; }.spark-three { top:71%; left:47%; }
.map-compass { position:absolute; bottom:27px; left:30px; z-index:3; color:#5d6c53; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center; line-height:1.4; }.map-compass i { font-style:normal; font-size:18px; }
.region-list { border-top:1px solid var(--line); }
.region-item { width:100%; border:0; border-bottom:1px solid var(--line); padding:24px 0; display:flex; align-items:center; background:none; color:var(--ink); font:600 13px ui-sans-serif,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; text-align:left; cursor:pointer; }
.region-item:hover,.region-item.is-selected { color:var(--orange); }.region-number { color:var(--muted); font:10px 'DM Mono',monospace; width:44px; }.region-name { flex:1; }.region-arrow { font-size:18px; transition:transform .25s; }.region-item:hover .region-arrow,.region-item.is-selected .region-arrow { transform:translate(4px,-4px); }
.region-detail { margin-top:36px; padding:0 0 0 44px; }.detail-kicker { margin-bottom:12px; }.detail-title { font-weight:800; font-size:19px; margin-bottom:10px; }.detail-copy { color:var(--muted); font-size:12px; line-height:1.8; margin:0; }
.guide { padding:132px 0 145px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:62px; }
.guide-card { background:#f0e2c3; padding:26px; min-height:270px; }
.guide-kicker { color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.09em; margin-bottom:8px; }
.guide-card h3 { font-size:28px; line-height:1.15; margin-bottom:14px; letter-spacing:-.06em; }
.guide-card p { font-size:12px; line-height:1.8; color:var(--muted); margin:0; }
.flavor { background:var(--ink); color:var(--cream); width:100%; max-width:none; padding:125px max(40px,calc((100% - 1160px)/2)) 145px; }.flavor-heading { width:min(1160px,100%); margin:0 auto; }.flavor .section-index { color:#928e80; }.flavor-grid { width:min(1160px,100%); margin:75px auto 0; display:grid; grid-template-columns:1.55fr 1fr 1fr; gap:17px; }.flavor-card { min-height:330px; padding:26px; position:relative; overflow:hidden; }.flavor-card-main { background:#d5a537; color:var(--ink); }.card-topline { display:flex; justify-content:space-between; color:#725e29; }.flavor-wheel { width:230px; height:230px; border:1px solid rgba(25,24,18,.35); border-radius:50%; position:relative; margin:29px auto 0; }.flavor-wheel::before,.flavor-wheel::after { content:''; position:absolute; background:rgba(25,24,18,.25); }.flavor-wheel::before { width:1px; top:0; bottom:0; left:50%; }.flavor-wheel::after { height:1px; left:0; right:0; top:50%; }.wheel-label { position:absolute; font:9px 'DM Mono',monospace; z-index:1; }.label-top { top:14px; left:calc(50% - 14px); }.label-right { right:12px; top:calc(50% - 5px); }.label-bottom { bottom:13px; left:calc(50% - 15px); }.label-left { left:10px; top:calc(50% - 5px); }.wheel-shape { width:115px; height:150px; border:2px solid var(--orange); border-radius:60% 40% 50% 40%; position:absolute; top:18px; left:68px; transform:rotate(27deg); background:rgba(245,240,230,.16); }.wheel-dot { width:13px; height:13px; border-radius:50%; background:var(--orange); position:absolute; top:72px; left:141px; }.card-caption { position:absolute; bottom:25px; font:12px/1.7 'Noto Sans SC',sans-serif; max-width:240px; margin:0; }.stat-card { background:#ebdfc8; color:var(--ink); display:flex; flex-direction:column; justify-content:flex-end; }.card-label { position:absolute; top:27px; left:26px; color:var(--muted); }.stat-card strong { font-size:92px; letter-spacing:-.1em; line-height:.8; font-weight:800; }.stat-card p:last-child { font-size:12px; line-height:1.7; max-width:180px; margin:21px 0 0; }.quote-card { background:#526a55; display:flex; flex-direction:column; justify-content:center; }.quote-mark { color:var(--yellow); font:80px Georgia,serif; line-height:.6; }.quote-card p { font-size:20px; line-height:1.45; letter-spacing:-.06em; max-width:215px; }.quote-by { color:#bdc6a6; font:9px 'DM Mono',monospace; }
.proof { padding:132px 0 145px; }
.proof-heading p.section-note { max-width:520px; }
.source-list { margin-top:50px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.source-item { border:1px solid rgba(25,24,18,.14); background:#f0e3c2; padding:18px; display:flex; flex-direction:column; gap:8px; transition:transform .25s, background .25s, border-color .25s; }
.source-item:hover { transform:translateY(-2px); background:#f6ebd0; border-color:rgba(220,110,47,.35); }
.source-item details { display:grid; gap:14px; }
.source-summary-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.source-summary-head a { text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:4px; }
.source-summary-head a:hover strong { text-decoration:underline; }
.source-summary-head::marker { content: ''; }
.source-summary-head::-webkit-details-marker { display:none; }
.source-kind { color:var(--muted); font:9px 'DM Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
.source-item strong { font-size:18px; line-height:1.35; }
.source-strength { font:10px 'DM Mono',monospace; letter-spacing:.02em; border-radius:999px; padding:5px 10px; border:1px solid rgba(25,24,18,.24); white-space:nowrap; }
.source-strength-high { color:#2f4a33; background:rgba(91,153,98,.2); border-color:rgba(91,153,98,.45); }
.source-strength-medium { color:#6b4a25; background:rgba(220,152,73,.2); border-color:rgba(220,152,73,.45); }
.source-strength-low { color:#603f37; background:rgba(193,101,72,.16); border-color:rgba(193,101,72,.45); }
.source-table { width:100%; border-collapse:collapse; font-size:11px; line-height:1.72; margin-top:2px; }
.source-table caption { text-align:left; color:#6f5f3f; font:10px 'DM Mono',monospace; letter-spacing:.02em; margin-bottom:8px; }
.source-table th, .source-table td { vertical-align:top; text-align:left; padding:0; }
.source-table th { width:94px; color:#6f5f3f; font:10px 'DM Mono',monospace; letter-spacing:.02em; padding-right:10px; white-space:nowrap; }
.source-table td { color:#5c574c; }
.source-table tr + tr th, .source-table tr + tr td { padding-top:6px; }
.faq { padding:132px 0 145px; }
.faq-list { margin-top:52px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:17px; }
.faq-card { padding:24px; background:#f0e2c3; min-height:245px; }
.faq-card h3 { font-size:17px; line-height:1.45; margin-bottom:10px; letter-spacing:-.04em; }
.faq-card p { font-size:12px; line-height:1.8; color:var(--muted); margin:0; }
.ritual { padding:132px 0 145px; }.ritual-header { align-items:end; }.ritual-header h2 { margin-bottom:0; }.ritual-header .section-note { margin-bottom:5px; }.ritual-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:75px; }.ritual-card { min-height:390px; background:#e8dcc3; padding:24px; position:relative; }.ritual-card-dark { background:#cf762e; color:#f7ebd6; }.ritual-num { color:var(--muted); font:10px 'DM Mono',monospace; }.ritual-card-dark .ritual-num { color:#f4c696; }.ritual-illustration { height:190px; position:relative; margin:12px 0 27px; overflow:hidden; }.toast { position:absolute; left:21%; bottom:26px; width:144px; height:120px; background:#bb763f; border-radius:50% 50% 20% 20%; transform:rotate(-8deg); box-shadow:inset 0 0 0 11px #d79b54; }.banana-slice { position:absolute; left:48%; top:57px; width:65px; height:30px; border:10px solid var(--yellow); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(26deg); }.glass { position:absolute; left:29%; top:24px; width:100px; height:135px; background:rgba(248,236,207,.42); border:2px solid #f7ebd6; border-top:0; transform:skew(-6deg); }.ice { position:absolute; background:#f7d6a1; width:31px; height:31px; transform:rotate(20deg); }.ice-a { left:38%; top:80px; }.ice-b { left:52%; top:53px; transform:rotate(64deg); }.peel-banana { position:absolute; left:34%; top:44px; width:120px; height:88px; border:18px solid var(--yellow); border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(19deg); }.peel-banana::before,.peel-banana::after { content:''; position:absolute; background:#e8a92e; height:85px; width:16px; border-radius:100%; }.peel-banana::before { left:-42px; top:37px; transform:rotate(-35deg); }.peel-banana::after { right:-31px; top:30px; transform:rotate(42deg); }.spark-line { position:absolute; width:60px; height:60px; border-top:1px solid var(--orange); border-right:1px solid var(--orange); transform:rotate(35deg); top:20px; left:70%; }.ritual-card h3 { font-size:22px; margin-bottom:10px; letter-spacing:-.06em; }.ritual-card p { font-size:12px; line-height:1.8; color:var(--muted); max-width:220px; margin:0; }.ritual-card-dark p { color:#f5d4b0; }
.closing { padding:130px 0 150px; border-top:1px solid var(--line); }.closing h2 { font-size:clamp(55px,8vw,110px); margin-bottom:50px; }.closing .eyebrow { margin-bottom:33px; }
.site-footer { width:min(1160px,calc(100% - 80px)); border-top:1px solid var(--line); padding:22px 0 27px; display:flex; justify-content:space-between; font-size:9px; }.mobile-nav { display:none; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:780px) {
  .section-shell,.site-header,.site-footer { width:calc(100% - 40px); }.site-header { height:75px; }.main-nav { display:none; }.menu-button { display:block; }.mobile-nav { position:fixed; z-index:15; inset:75px 0 auto; background:var(--cream); border-bottom:1px solid var(--line); padding:24px 20px; }.mobile-nav[hidden] { display:none; }.mobile-nav a { display:block; color:var(--ink); padding:13px 0; font-size:17px; text-decoration:none; border-bottom:1px solid var(--line); }
  .hero { min-height:auto; display:flex; flex-direction:column; align-items:stretch; padding-top:70px; padding-bottom:80px; }.hero-copy { padding-left:4px; }.hero-art { height:430px; margin:65px 0 0; }.sun-orb { width:180px; height:180px; top:70px; left:calc(50% - 90px); }.banana { transform:rotate(24deg) scale(.78); }.banana-one { left:16%; top:26%; }.banana-two { left:42%; top:39%; }.art-caption { left:20px; bottom:20px; }
  .intro,.guide,.proof,.faq,.ritual { padding:92px 0 100px; }.section-intro,.ritual-header { display:block; }.section-intro .section-index,.ritual-header .section-index { margin-bottom:35px; }.section-note { margin-top:25px; }.region-layout { display:block; margin-top:55px; }.map-card { height:390px; }.region-list { margin-top:44px; }.region-detail { padding-left:0; }.guide-grid { display:block; margin-top:44px; }.flavor { padding:92px 20px 100px; }.flavor-grid { display:block; margin-top:50px; }.flavor-card { min-height:310px; margin-bottom:14px; }.flavor-wheel { width:200px; height:200px; }.wheel-shape { width:100px; height:130px; left:59px; }.wheel-dot { left:122px; }.source-list { grid-template-columns:1fr; margin-top:32px; }.faq-list { grid-template-columns:1fr; }.faq-card,.guide-card { min-height:auto; padding:21px; margin-bottom:14px; }.ritual-cards { display:block; margin-top:50px; }.ritual-card { margin-bottom:14px; min-height:350px; }.ritual-illustration { height:170px; }.closing { padding:95px 0 105px; }.site-footer { display:grid; gap:10px; }.site-footer span:last-child { margin-top:7px; }
}