/* TAOBOY official site — iOS launch design system.
   Ported from the approved design authority (taoboy-website/site.css plus the
   per-page style blocks of index / blog / article-template / brand-story /
   community / launch-benefits). Loaded only by the redesigned pages; the
   almanac and legal pages keep style.css untouched. */

:root{
--deep-teal:#2F5D58;--deep-teal-hover:#36716B;--deep-teal-press:#244946;--ink-teal:#1E3A36;--jade:#5F8F7A;
--warm-white:#F7F5F0;--card:#FBFAF7;--surface-2:#F0EDE6;--paper-deep:#EFE8DA;
--pale-gold:#D8C29A;--gold-deep:#B89A66;--gold-line:#C9AE7D;--cinnabar:#C96A5B;
--teal-container:#D0E8E4;--jade-container:#DDEDE7;--gold-container:#F3E9D2;
--ink:#23302E;--secondary:#5F6963;--tertiary:#8B938D;--on-dark:#F4F1E9;--on-dark-soft:rgba(244,241,233,.68);
--border:#E6DECF;--border-strong:#D3C9B5;--hairline:rgba(35,48,46,.09);
--serif:"Noto Serif TC","Noto Serif SC","Songti SC","STSong",serif;
--sans:"Noto Sans SC","Noto Sans TC","PingFang SC","Helvetica Neue",system-ui,sans-serif;
--fz-display:clamp(34px,5vw,58px);--fz-h1:clamp(28px,3.8vw,44px);--fz-h2:clamp(24px,2.8vw,32px);--fz-h3:20px;--fz-lead:18px;--fz-body:16px;--fz-sm:14px;--fz-label:12.5px;
--r-pill:999px;--r-xl:22px;--r-lg:16px;--r-md:12px;--r-sm:8px;
--sh-1:0 1px 2px rgba(35,48,46,.05);--sh-2:0 6px 18px rgba(47,93,88,.08),0 1px 3px rgba(35,48,46,.05);--sh-3:0 18px 48px rgba(35,48,46,.12),0 4px 12px rgba(47,93,88,.07);
--container:1140px;--narrow:720px;
/* Clearance for in-page jumps: the sticky header is 64px tall (58px below 980). */
--anchor-offset:90px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* The header is sticky, so anything reached through an in-page link has to
   clear it instead of parking underneath and looking like an overshoot. */
[id]{scroll-margin-top:var(--anchor-offset)}
html[lang="zh-Hans"]{--serif:"Noto Serif SC","Songti SC","STSong",serif}
html[lang="zh-Hant"]{--serif:"Noto Serif TC","Songti TC",serif;--sans:"Noto Sans TC","PingFang TC","Helvetica Neue",system-ui,sans-serif}
html[lang="en"]{--serif:"Noto Serif SC",Georgia,serif}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{background:var(--warm-white);color:var(--ink);font-family:var(--sans);font-size:var(--fz-body);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--deep-teal);text-decoration:none}
a:hover{color:var(--deep-teal-hover);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.35;text-wrap:pretty;color:var(--ink-teal)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.wrap-narrow{max-width:var(--narrow);margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.section{padding:clamp(56px,8vw,104px) 0}
.section-alt{background:var(--card);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fz-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-line)}
.sec-title{font-size:var(--fz-h2);margin-bottom:14px}
.sec-lead{color:var(--secondary);font-size:var(--fz-lead);max-width:640px;text-wrap:pretty}
.sec-tagline{font-family:var(--serif);font-size:clamp(18px,2vw,24px);font-weight:600;color:var(--gold-deep);margin-top:4px}
/* Chinese breaks between any two characters, so a short word can be split
   across lines. Wrap such a word to keep it whole. */
.nowrap{white-space:nowrap}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.nav{display:flex;align-items:center;gap:28px;max-width:var(--container);margin:0 auto;padding:0 clamp(16px,4vw,56px);height:64px}
.nav-logo{flex:none}
.nav-logo img{height:52px;width:auto}
.nav-links{display:flex;gap:26px;list-style:none;margin-left:auto}
@media(max-width:1180px){.nav{gap:16px}.nav-links{gap:16px}.nav-cta{padding:9px 14px}}
@media(max-width:1060px){.nav-links{gap:13px}.nav-logo img{height:46px}}
.nav-links a{color:var(--ink);font-size:var(--fz-sm);font-weight:500}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--deep-teal);text-decoration:none}
.nav-links a[aria-current="page"]{border-bottom:2px solid var(--gold-line);padding-bottom:2px}
.nav-cta{background:var(--deep-teal);color:#fff!important;padding:9px 18px;border-radius:var(--r-pill);font-size:var(--fz-sm);font-weight:600;white-space:nowrap}
.nav-cta:hover{background:var(--deep-teal-hover);text-decoration:none!important}
/* Language switcher: real links, because locales are separate URLs on this site. */
.lang-switcher{display:flex;border:1px solid var(--border-strong);border-radius:var(--r-pill);overflow:hidden;flex:none}
.lang-switcher .lang-btn{background:transparent;padding:6px 12px;font-size:12.5px;color:var(--secondary);min-height:32px;display:inline-flex;align-items:center;white-space:nowrap}
.lang-switcher .lang-btn:hover{background:var(--surface-2);color:var(--deep-teal);text-decoration:none}
.lang-switcher .lang-btn.active{background:var(--deep-teal);color:#fff}
.lang-switcher .lang-btn.active:hover{background:var(--deep-teal);color:#fff}
.nav-burger{display:none;margin-left:auto;background:none;border:1px solid var(--border-strong);border-radius:var(--r-sm);width:44px;height:44px;font-size:18px;color:var(--ink);cursor:pointer}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;width:max-content;max-width:100%;border-radius:var(--r-pill);font-weight:600;font-size:15px;padding:13px 26px;min-height:48px;border:0;cursor:pointer;transition:background .18s,transform .18s;font-family:inherit}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--deep-teal);color:#fff!important}
.btn-primary:hover{background:var(--deep-teal-hover)}
.btn-secondary{background:transparent;color:var(--deep-teal)!important;border:1.5px solid var(--deep-teal)}
.btn-secondary:hover{background:var(--teal-container)}
.btn-ghost{background:transparent;color:var(--deep-teal)!important;padding:13px 10px}

/* ---- Store badges ---- */
.store-badges{display:flex;gap:14px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:11px;background:var(--ink-teal);color:#fff!important;border-radius:12px;padding:10px 20px;min-height:56px;min-width:178px;line-height:1.25}
.store-badge:hover{background:#28504a;text-decoration:none}
.store-badge svg{width:26px;height:26px;flex:none}
.store-badge .sb-pre{display:block;font-size:11px;opacity:.75}
.store-badge .sb-name{display:block;font-size:16.5px;font-weight:600}
/* Rendered when IOS_APP_STORE_URL is not configured yet: same visual weight, no fabricated link. */
.store-badge--pending{cursor:default;opacity:.94}
.store-badge--pending:hover{background:var(--ink-teal)}
.store-pending-note{display:block;font-size:12.5px;color:var(--tertiary);margin-top:10px}

/* ---- Status chips ---- */
.status-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12.5px;font-weight:600;padding:3px 12px;border-radius:var(--r-pill);border:1px solid transparent;line-height:1.6}
.status-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-published{background:var(--teal-container);color:#215953;border-color:#b9dcd6}
.st-curated{background:var(--gold-container);color:#7d6534;border-color:#e6d3ab}
.st-integrated{background:var(--jade-container);color:#3c6b58;border-color:#c4ddd2}
.st-review{background:var(--surface-2);color:var(--secondary);border-color:var(--border-strong)}
.st-review::before{background:transparent;border:1.5px dashed currentColor;width:6px;height:6px}

/* ---- Cards / external link marker ---- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.ext::after{content:"↗";font-size:.85em;margin-left:4px;vertical-align:1px}
.ext-note{display:inline-flex;align-items:center;gap:6px;font-size:var(--fz-label);color:var(--secondary);border:1px dashed var(--border-strong);border-radius:var(--r-pill);padding:3px 12px}

/* ---- Footer ---- */
.site-footer{background:var(--ink-teal);color:var(--on-dark-soft);padding:clamp(48px,6vw,72px) 0 36px;font-size:var(--fz-sm)}
.site-footer a{color:var(--on-dark)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.footer-grid h4{color:var(--on-dark);font-size:14px;margin-bottom:14px;font-family:var(--sans);font-weight:600;letter-spacing:.06em}
.footer-grid ul{list-style:none;display:grid;gap:9px}
.footer-brand img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.9;margin-bottom:14px}
.footer-brandline{font-family:var(--serif);font-size:17px;color:var(--on-dark)}
.footer-subline{font-size:13px;margin-top:6px;color:rgba(244,241,233,.6)}
.footer-legal-row{margin-top:34px}
.footer-legal-row ul{display:flex;flex-wrap:wrap;gap:9px 22px}
.footer-disclaimer{max-width:var(--container);margin:36px auto 0;padding:22px clamp(20px,4.5vw,56px) 0;border-top:1px solid rgba(244,241,233,.14);font-size:12.5px;line-height:1.8;color:rgba(244,241,233,.55)}
.footer-copy{margin-top:10px}

/* Pages whose last block is a card, table or note need breathing room before
   the dark footer; the home page already ends on a padded .section. */
.page-main{padding-bottom:clamp(56px,7vw,88px)}

/* ---- Reveal / accessibility ---- */
/* Content is visible by default; site-shell.js arms the animation, so a failed
   or disabled script can never leave a section permanently hidden. */
.reveal.armed{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.armed.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal.armed{opacity:1;transform:none}}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--deep-teal);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;z-index:99}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--deep-teal);outline-offset:2px}

/* =====================================================================
   Home
   ===================================================================== */
.launch-banner{background:var(--ink-teal);color:var(--on-dark);font-size:var(--fz-sm);text-align:center;padding:10px clamp(16px,4vw,32px);display:flex;gap:8px 18px;justify-content:center;align-items:center;flex-wrap:wrap}
.launch-banner a{color:var(--pale-gold);font-weight:600;white-space:nowrap}
/* The ink-wash brand backdrop. Its calligraphy - 知天时 明人事 修心性 - occupies
   81.5%-91% of the image height, so the hero opens a band below its content for
   exactly that stretch of the artwork: the line lands clear of the copy above it
   and well below the Studio card and the handset, which stop far higher. The
   mountains stay faint behind the hero, which is where they were before. */
.hero{position:relative;overflow:hidden;
--wash-w:min(100%,var(--container));
--wash-h:calc(var(--wash-w) / 1.652);
padding:clamp(24px,2.6vw,40px) 0 calc(clamp(28px,3.6vw,56px) + var(--wash-h) * .095)}
/* Height comes from aspect-ratio, not a calc on --wash-w: a percentage inside
   `height` resolves against the container height, which silently cropped the
   artwork. The drop is a translate percentage for the same reason - that one
   does resolve against the element's own box. */
.hero::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(4.5%);width:var(--wash-w);aspect-ratio:1024/620;background:url("/assets/ink_wash_bg.jpg") center/100% auto no-repeat;opacity:.3;pointer-events:none;
/* The artwork has its own paper ground, a shade darker than the page, so its
   box would read as a rectangle. Fade the edges instead of cutting them. The
   fades stop outside 10%-90%, and the calligraphy sits at 13.7%-87%, so the
   line itself stays at full strength. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,#000 92%,transparent);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,#000 92%,transparent);
mask-composite:intersect}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,52px);align-items:center}
.hero h1{font-size:clamp(30px,4vw,48px);letter-spacing:0;margin:0 0 16px}
.hero-sub{color:var(--secondary);font-size:var(--fz-lead);max-width:540px;margin-bottom:12px;text-wrap:pretty}
.hero-sub-quiet{font-size:var(--fz-body);color:var(--tertiary)}
.hero-live{display:inline-flex;align-items:center;gap:8px;background:var(--gold-container);border:1px solid var(--gold-line);color:#7d6534;border-radius:var(--r-pill);font-size:13px;font-weight:600;padding:5px 16px;margin-bottom:20px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:26px 0 22px}
.hero-cta .btn{min-height:56px;padding:14px 30px}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;color:var(--secondary);font-size:13.5px}
.trust li{display:flex;align-items:center;gap:7px}
.trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-line);flex:none}
/* Hero stage. The Studio artwork is the lead visual and the Android handset
   overlaps its lower-right corner, so the two entrances read as one world
   rather than two banners. Both are real links; nothing is a scripted target. */
.hero-stage{position:relative;margin-bottom:clamp(26px,3.4vw,46px)}
/* Sits below the handset overhang, so it reads as a note on the whole
   picture rather than a caption inside it. */
.stage-note{margin-top:clamp(8px,1vw,14px);font-size:clamp(11px,1.05vw,12.5px);line-height:1.6;color:var(--tertiary);text-wrap:pretty}
.stage-studio{display:block;position:relative;container-type:inline-size;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:var(--card);box-shadow:var(--sh-3);transition:transform .3s ease,box-shadow .3s ease}
.stage-studio img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
/* A short, low scrim only under the caption; the artwork itself stays clean. */
.stage-studio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(180deg,rgba(247,245,240,0),rgba(247,245,240,.34))}
.stage-studio:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(35,48,46,.16)}
.stage-overlay{position:absolute;z-index:2;left:calc(15% + 2em);bottom:4.5%;font-family:var(--serif);font-weight:600;font-size:clamp(11px,3.2cqw,17px);line-height:1.45;letter-spacing:.03em;color:var(--ink-teal);background:rgba(251,250,247,.86);border:1px solid rgba(201,174,125,.55);border-radius:var(--r-pill);padding:5px 15px;box-shadow:0 4px 14px rgba(35,48,46,.08)}
/* The English title is three words rather than five characters, so it is set
   a size down in small caps spacing to take a comparable share of the card. */
html[lang="en"] .stage-overlay{left:15%;font-size:clamp(9.5px,2.3cqw,12px);letter-spacing:.05em;padding:4px 13px}
.stage-phone{position:absolute;bottom:clamp(-46px,-4vw,-26px);right:6%;z-index:3;width:clamp(108px,23%,168px);display:block}
.stage-phone-frame{display:block;position:relative;aspect-ratio:9/19.4;border-radius:clamp(13px,1.5vw,19px);background:#171d1c;box-shadow:var(--sh-3)}
.stage-phone-frame img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;object-position:top center;border-radius:clamp(9px,1.1vw,15px)}
.stage-phone-label{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--secondary);background:rgba(251,250,247,.9);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 11px}
a.stage-phone:hover .stage-phone-label{color:var(--deep-teal)}
/* POST_IOS only: the iPhone tucks in beside Android. Whether it also becomes a
   link is the App Store release gate decision, with IOS_APP_STORE_URL. */
.stage-phone--ios{right:calc(6% + clamp(70px,15%,110px));bottom:clamp(-32px,-2.8vw,-16px);width:clamp(84px,16.5%,124px);z-index:2}
.stage-phone--ios .stage-phone-label{left:0;transform:none;bottom:calc(100% + 30px)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.pillar{padding:26px 24px 28px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border);border-top:3px solid var(--gold-line)}
.pillar h3{font-size:19px;margin-bottom:10px}
.pillar p{color:var(--secondary);font-size:14.5px;line-height:1.8}
.pillar .p-num{font-family:var(--serif);color:var(--gold-deep);font-size:13px;letter-spacing:.18em;display:block;margin-bottom:12px}
.library{background:linear-gradient(180deg,var(--card),var(--warm-white));border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.lib-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:8px}
.lib-flow{list-style:none;display:grid;gap:0;counter-reset:step}
.lib-step{position:relative;padding:0 0 30px 46px}
.lib-step:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;border-left:2px dashed var(--gold-line)}
.lib-node{position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:14px;font-weight:700;background:var(--gold-container);color:#7d6534;border:1px solid var(--gold-line)}
.lib-step h3{font-size:17.5px;margin-bottom:5px;font-family:var(--sans);font-weight:600;color:var(--ink)}
.lib-step p{color:var(--secondary);font-size:14.5px}
.lib-status{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lib-visual{position:relative;text-align:center;padding:36px 0;overflow:hidden}
.lib-visual img{display:block;width:100%;height:auto;margin:0;filter:drop-shadow(0 18px 40px rgba(35,48,46,.14));animation:jieqiSpin 120s linear infinite}
.lib-visual:hover img{animation-play-state:paused}
@keyframes jieqiSpin{to{transform:rotate(360deg)}}
.jieqi-wrap{position:relative;display:block;width:min(100%,420px);margin:0 auto}
@media(prefers-reduced-motion:reduce){.lib-visual img{animation:none}}
.lib-note{margin-top:26px;padding:16px 20px;border-left:3px solid var(--gold-line);background:var(--gold-container);border-radius:0 var(--r-md) var(--r-md) 0;font-size:14px;color:#6c5a33}
.lib-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
/* Four quiet units, ruled rather than boxed, so this band does not read as a
   second card matrix above the four capabilities. */
.today{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3.2vw,40px);margin-top:clamp(34px,4vw,48px)}
.today-item{padding-top:20px;border-top:1px solid var(--border-strong)}
.today-item h3{font-size:19px;margin-bottom:9px}
.today-item p{color:var(--secondary);font-size:14.5px;line-height:1.8}
.today-spirit{margin-top:clamp(34px,4.5vw,54px);font-family:var(--serif);font-size:clamp(16px,1.8vw,21px);font-weight:600;color:var(--gold-deep);text-align:center;text-wrap:pretty}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.duo-card{border-radius:var(--r-xl);border:1px solid var(--border);background:var(--card);padding:clamp(28px,3.5vw,44px);position:relative;overflow:hidden}
.duo-card.dark{background:var(--ink-teal);border-color:transparent;color:var(--on-dark)}
.duo-card.dark h3,.duo-card.dark .sec-title{color:var(--on-dark)}
.duo-card.dark p,.duo-card.dark li{color:var(--on-dark-soft)}
.duo-card.dark .eyebrow{color:var(--pale-gold)}
.duo-card h3{font-size:clamp(22px,2.2vw,27px);margin:8px 0 14px}
.duo-card>p{font-size:15px;margin-bottom:18px;color:var(--secondary)}
.duo-points{list-style:none;display:grid;gap:10px;font-size:14.5px}
.duo-points li{padding-left:22px;position:relative}
.duo-points li::before{content:"—";position:absolute;left:0;color:var(--gold-line)}
.price-block{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:20px 0 6px}
.price-now{font-family:var(--serif);font-size:38px;font-weight:700;color:var(--pale-gold)}
.price-tag{font-size:12px;border:1px solid var(--gold-line);color:var(--pale-gold);border-radius:var(--r-pill);padding:3px 12px}
.price-note{font-size:12.5px;line-height:1.7;opacity:.72;margin-top:14px}
.gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.gift{padding:24px 22px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border);text-align:left}
.gift .g-amount{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--deep-teal);display:inline-block;margin-right:8px}
.gift .g-unit{font-size:13px;color:var(--gold-deep);font-weight:600;display:inline-block}
.gift h3{font-size:15.5px;font-family:var(--sans);font-weight:600;color:var(--ink);margin:12px 0 7px}
.gift p{font-size:13.5px;color:var(--secondary);line-height:1.7}
.gift-meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:13px;color:var(--secondary)}
.gift-meta .btn{min-height:44px;padding:9px 22px}
.articles{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;margin-top:40px}
.art-card{border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:1px solid var(--border);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.art-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);text-decoration:none}
.art-card img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}
.art-body{padding:20px 22px 24px;display:grid;gap:9px}
.art-cat{font-size:12px;letter-spacing:.1em;color:var(--gold-deep);font-weight:600}
.art-card h3{font-size:17px;line-height:1.5;color:var(--ink-teal)}
.art-card p{font-size:13.5px;color:var(--secondary)}
.home-article-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.community-band{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(30px,4vw,52px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.community-band .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.community-band .cm-lead{color:var(--secondary);font-size:15px}
.community-band .ext-note{margin-top:18px}
.comm-split{display:grid;gap:12px}
.comm-cell{border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;font-size:13.5px;background:var(--warm-white)}
.comm-cell strong{display:block;color:var(--ink-teal);margin-bottom:4px;font-size:14px}
.home-disclaimer{font-size:12.5px;color:var(--tertiary);line-height:1.8;border-top:1px solid var(--hairline);padding-top:22px;margin-top:8px}

/* =====================================================================
   Blog index
   ===================================================================== */
.blog-head{padding:clamp(24px,2.6vw,40px) 0 clamp(24px,3vw,36px)}
.blog-head h1{font-size:var(--fz-h1);margin-bottom:12px}
.blog-head .motto{color:var(--gold-deep);font-size:14px;letter-spacing:.12em;margin-top:10px}
.cats{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0 34px}
.cat{border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:8px 18px;font-size:13.5px;color:var(--secondary);background:transparent;line-height:1.6;display:inline-flex;align-items:center;min-height:40px}
.cat[aria-current="true"]{background:var(--deep-teal);border-color:var(--deep-teal);color:#fff}
.cat:hover{border-color:var(--deep-teal);color:var(--deep-teal);text-decoration:none}
.cat[aria-current="true"]:hover{color:#fff}
.featured{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--card);margin-bottom:38px}
.featured img{width:100%;height:100%;object-fit:cover;min-height:280px}
.featured-body{padding:clamp(26px,3.5vw,46px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.featured h2{font-size:clamp(22px,2.4vw,30px);line-height:1.4}
.featured p{color:var(--secondary);font-size:15px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--tertiary);align-items:center}
.meta-row .art-cat{font-size:12px;letter-spacing:.1em;color:var(--gold-deep);font-weight:600}
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.article-card{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--card);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.article-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.article-card img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}
.article-card__body{padding:18px 20px 22px;display:grid;gap:10px}
.article-card__body h2{font-size:16.5px;line-height:1.5;color:var(--ink-teal)}
.article-card__body .excerpt{font-size:13.5px;color:var(--secondary)}
.article-card__link{font-size:13.5px;font-weight:600}
.blog-comm{margin-top:52px;border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:26px clamp(20px,3vw,36px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--card)}
.blog-comm p{color:var(--secondary);font-size:14.5px;max-width:560px}

/* =====================================================================
   Article detail
   ===================================================================== */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--tertiary);padding:clamp(20px,2.2vw,30px) 0 0}
.breadcrumbs span[aria-current]{color:var(--secondary)}
.art-head{padding:clamp(28px,4vw,44px) 0 30px}
.art-head .meta-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.art-head h1{font-size:clamp(26px,3.6vw,40px);line-height:1.45;margin-bottom:16px}
.art-head .summary{font-size:var(--fz-lead);color:var(--secondary);text-wrap:pretty}
.art-cat-lg{font-size:12.5px;letter-spacing:.12em;color:var(--gold-deep);font-weight:600}
.byline{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--tertiary);margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline)}
.byline b{color:var(--secondary);font-weight:600}
.prov-card{border:1px solid var(--border);border-left:3px solid var(--gold-line);border-radius:var(--r-md);background:var(--card);padding:20px 24px;margin:34px 0;display:grid;gap:10px;font-size:14px}
.prov-card .row{display:flex;gap:12px;align-items:baseline}
.prov-card .k{flex:none;width:7.5em;color:var(--tertiary);font-size:13px}
.prov-card .v{color:var(--ink)}
.article-hero{border-radius:var(--r-md);width:100%;height:auto;margin:0 0 8px}
.article-content{font-family:var(--serif);font-size:17px;line-height:2.0;color:var(--ink)}
.article-content p{margin-bottom:1.5em;text-wrap:pretty}
.article-content h2{font-size:22px;margin:2.2em 0 .9em;font-family:var(--serif)}
.article-content ul{margin:0 0 1.5em 1.2em;display:grid;gap:.5em}
.article-content blockquote{margin:2em 0;padding:18px 26px;border-left:3px solid var(--gold-line);background:var(--gold-container);border-radius:0 var(--r-md) var(--r-md) 0;font-size:16.5px;color:#6c5a33}
.editor-note,.boundary{border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:20px 24px;margin:2.2em 0;font-family:var(--sans);font-size:14px;color:var(--secondary);background:var(--card)}
.editor-note h2,.boundary h2{font-size:14.5px;font-family:var(--sans);color:var(--ink-teal);margin:0 0 8px}
.editor-note p{margin-bottom:.8em}
.editor-note p:last-child{margin-bottom:0}
.references,.related-links{font-family:var(--sans);font-size:13.5px;color:var(--secondary);margin:2.2em 0}
.references h2,.related-links h2{font-size:15px;margin-bottom:10px;font-family:var(--sans);color:var(--ink-teal)}
.references ol{padding-left:20px;display:grid;gap:6px}
.related-links ul{padding-left:20px;display:grid;gap:6px}
.art-ctas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:44px 0 0}
.cta-tile{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);padding:26px 28px;display:grid;gap:10px}
.cta-tile h2,.cta-tile h3{font-size:17px;font-family:var(--serif)}
.cta-tile p{font-size:13.5px;color:var(--secondary)}
.cta-tile .btn{justify-self:start;margin-top:6px}
.art-disc{font-size:12.5px;color:var(--tertiary);line-height:1.8;margin:36px 0 0;padding-top:20px;border-top:1px solid var(--hairline)}

/* =====================================================================
   Brand story
   ===================================================================== */
.story-hero{position:relative;background:var(--ink-teal);color:var(--on-dark);overflow:hidden}
.story-hero::before{content:"";position:absolute;inset:0;background:url("/assets/ink_wash_bg.jpg") center bottom/cover no-repeat;opacity:.12;filter:invert(1)}
/* Wider than the shared narrow column so the lead sits on one line at desktop;
   still well inside the 1020px article body below. */
.story-hero .wrap-narrow{position:relative;max-width:840px;padding-top:clamp(36px,4.4vw,64px);padding-bottom:clamp(44px,5.5vw,80px)}
.story-hero .eyebrow{color:var(--pale-gold)}
.story-hero h1{color:var(--on-dark);font-size:clamp(28px,4.2vw,48px);line-height:1.4;margin-bottom:20px}
.story-hero .sub{color:var(--on-dark-soft);font-size:var(--fz-lead);text-wrap:pretty}
.story-hero .en-title{margin-top:26px;font-size:13px;letter-spacing:.14em;color:rgba(244,241,233,.72);text-transform:uppercase;position:relative;text-shadow:0 1px 6px rgba(30,58,54,.9)}
.story-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,72px);max-width:1020px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(20px,4.5vw,56px) 0}
.story-toc{position:sticky;top:96px;align-self:start;font-size:13.5px}
.story-toc h2{font-size:12.5px;letter-spacing:.12em;color:var(--tertiary);font-family:var(--sans);font-weight:600;margin-bottom:14px}
.story-toc ol{list-style:none;display:grid;gap:2px;counter-reset:toc}
.story-toc a{display:flex;gap:10px;color:var(--secondary);padding:7px 10px;border-left:2px solid var(--hairline);counter-increment:toc}
.story-toc a::before{content:counter(toc,cjk-ideographic);color:var(--gold-deep);font-family:var(--serif);flex:none}
.story-toc a:hover{color:var(--deep-teal);border-left-color:var(--gold-line);text-decoration:none}
.story-body{font-family:var(--serif);font-size:17px;line-height:2.0}
.story-body .lede{font-size:19px;color:var(--ink-teal);line-height:2.0;margin-bottom:1.6em}
.story-body p{margin-bottom:1.5em;text-wrap:pretty}
.story-body h2{font-size:23px;margin:2.4em 0 1em}
.story-body h2 .no{color:var(--gold-deep);margin-right:12px;font-size:16px}
.pull{margin:2.2em 0;padding:26px 30px;background:var(--gold-container);border-radius:var(--r-md);font-size:19px;line-height:1.9;color:#6c5a33;text-align:center}
.pull::before{content:"「";color:var(--gold-deep)}
.pull::after{content:"」";color:var(--gold-deep)}
.body-note{font-family:var(--sans);font-size:13px;color:var(--tertiary);border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:14px 18px;margin:2em 0}
/* The chapter body is the final Simplified Chinese edition; the note explains
   that on the pages whose translation is still pending. */
html[lang="zh-Hans"] .body-note{display:none}
.lib-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:1.4em 0 2em;font-family:var(--sans)}
.story-src{font-family:var(--sans);border:1px solid var(--border);border-left:3px solid var(--gold-line);border-radius:var(--r-md);background:var(--card);padding:20px 24px;margin:2.4em 0;font-size:14px;color:var(--secondary)}
.story-src b{color:var(--ink)}
.founder-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);padding:26px 30px;margin:1.6em 0;font-family:var(--sans)}
.founder-card h3{font-size:16.5px;font-family:var(--sans);margin-bottom:12px;color:var(--ink-teal)}
.fd-bio{font-family:var(--serif);font-size:16px;line-height:2.0;color:var(--ink)}
.fd-bio p{margin-bottom:1.2em}
.founder-card>a{display:inline-flex;margin-top:6px;font-size:13.5px}
.story-ctas{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:44px auto 0;max-width:1020px;padding:0 clamp(20px,4.5vw,56px)}
.story-disc{max-width:1020px;margin:32px auto 0;padding:20px clamp(20px,4.5vw,56px) 0;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--tertiary);line-height:1.8}

/* =====================================================================
   Community
   ===================================================================== */
.comm-hero{padding:clamp(24px,2.6vw,40px) 0 clamp(30px,4vw,44px)}
.comm-hero h1{font-size:var(--fz-h1);margin-bottom:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0 0}
.channel{border-radius:var(--r-xl);padding:clamp(26px,3vw,38px);border:1px solid var(--border);display:flex;flex-direction:column;gap:14px}
.channel.public{background:var(--jade-container);border-color:#c4ddd2}
.channel.private{background:var(--card)}
.channel h2{font-size:21px;display:flex;align-items:center;gap:10px}
.channel .tag{font-size:11.5px;letter-spacing:.1em;font-weight:700;border-radius:var(--r-pill);padding:3px 12px;align-self:flex-start}
.channel.public .tag{background:var(--deep-teal);color:#fff}
.channel.private .tag{background:var(--surface-2);color:var(--secondary);border:1px solid var(--border-strong)}
.channel ul{list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--secondary)}
.channel ul li{padding-left:22px;position:relative}
.channel.public ul li::before{content:"✓";position:absolute;left:0;color:var(--deep-teal);font-weight:700}
.channel.private ul li::before{content:"✕";position:absolute;left:0;color:var(--cinnabar);font-weight:700}
.channel .foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:10px;align-items:flex-start}
.channel .foot .note{font-size:12.5px;color:var(--secondary)}
.privacy-callout{margin:40px 0 0;border:1.5px solid var(--cinnabar);border-radius:var(--r-lg);background:#FBF1EF;padding:24px 28px;display:flex;gap:16px;align-items:flex-start}
.privacy-callout .ico{flex:none;width:34px;height:34px;border-radius:50%;background:var(--cinnabar);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px}
.privacy-callout h2{font-size:16.5px;color:#8f4437;margin-bottom:6px;font-family:var(--sans)}
.privacy-callout p{font-size:14px;color:#7c4a40;line-height:1.8}
.faq-list{display:grid;gap:14px;margin-top:34px;max-width:820px}
.faq{border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);padding:20px 24px}
.faq h2{font-size:15.5px;font-family:var(--sans);margin-bottom:7px;color:var(--ink-teal)}
.faq p{font-size:14px;color:var(--secondary)}

/* =====================================================================
   Launch benefits
   ===================================================================== */
.bf-hero{padding:clamp(24px,2.6vw,40px) 0 clamp(28px,4vw,40px)}
.bf-hero h1{font-size:var(--fz-h1);margin-bottom:14px}
.window-card{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);padding:18px 24px;margin-top:26px;font-size:14px;color:var(--secondary)}
.window-card b{color:var(--ink)}
.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:36px 0 0}
.rule{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);padding:26px 28px}
.rule .amount{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--deep-teal)}
.rule .unit{font-size:13px;color:var(--gold-deep);font-weight:600;margin-left:6px}
/* A card without an amount opens with the unit, so it must not be indented. */
.rule .unit:first-child{margin-left:0}
.rule h2{font-size:17.5px;margin:10px 0 8px;font-family:var(--sans);font-weight:600;color:var(--ink)}
.rule p{font-size:14px;color:var(--secondary)}
.rule .cond{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);font-size:13px;color:var(--tertiary)}
.stack-table{margin-top:44px}
.stack-table h2{font-size:20px;margin-bottom:16px}
.stack-table .table-scroll{overflow-x:auto}
.stack-table table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;min-width:420px}
.stack-table th,.stack-table td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--hairline)}
.stack-table th{background:var(--surface-2);font-weight:600;font-size:13px;color:var(--secondary)}
.stack-table tr:last-child td{border-bottom:0}
.stack-table .eg{font-size:13px;color:var(--tertiary);margin-top:12px}
.fine{margin-top:40px;max-width:820px}
.fine h2{font-size:18px;margin-bottom:14px}
.fine ol{padding-left:22px;display:grid;gap:14px;font-size:14px;color:var(--secondary)}
.fine li b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.pending{border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--gold-container);color:#6c5a33;padding:16px 20px;font-size:13.5px;margin-top:28px}
.bf-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:44px 0 0}

/* =====================================================================
   Responsive
   ===================================================================== */
@media(max-width:980px){
:root{--anchor-offset:80px}
.nav{height:58px;gap:14px}
.nav-logo img{height:46px}
.nav-links{display:none;position:absolute;top:58px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--border);flex-direction:column;gap:0;padding:8px 0;box-shadow:var(--sh-2)}
.nav-links.open{display:flex}
.nav-links li a{display:block;padding:13px clamp(20px,5vw,32px);min-height:48px}
.nav-burger{display:block;margin-left:0}
.nav .lang-switcher{margin-left:auto}
.nav-cta{display:none}
.footer-grid{grid-template-columns:1fr 1fr}
.hero-grid{grid-template-columns:1fr}
.hero-visual{max-width:560px}
.hero-stage{margin:18px 0 clamp(30px,6vw,46px)}
.pillars{grid-template-columns:1fr 1fr}
.today{grid-template-columns:1fr 1fr}
.gifts{grid-template-columns:1fr 1fr}
.articles{grid-template-columns:1fr 1fr}
.art-featured{grid-column:span 2}
.duo{grid-template-columns:1fr}
.lib-grid{grid-template-columns:1fr}
.community-band{grid-template-columns:1fr}
.grid-cards{grid-template-columns:1fr 1fr}
.featured{grid-template-columns:1fr}
.featured img{min-height:220px;max-height:300px}
}
@media(max-width:860px){
.split{grid-template-columns:1fr}
.story-layout{grid-template-columns:1fr}
.story-toc{position:static;border-bottom:1px solid var(--hairline);padding-bottom:22px}
.story-ctas{grid-template-columns:1fr}
}
@media(max-width:760px){
.footer-grid{grid-template-columns:1fr;gap:28px}
.footer-legal-row ul{flex-direction:column;gap:9px}
.store-badges{width:100%}
.store-badge{flex:1;min-width:160px;justify-content:center}
.hero-cta{gap:12px}
.hero-cta .btn{width:100%}
.rule-grid{grid-template-columns:1fr}
.art-ctas{grid-template-columns:1fr}
.prov-card .row{flex-direction:column;gap:2px}
.prov-card .k{width:auto}
}
@media(max-width:640px){
.pillars,.gifts,.articles,.grid-cards{grid-template-columns:1fr}
.today{grid-template-columns:1fr;gap:24px}
/* Below this width the handsets stop overlapping the artwork and stack
   underneath it, so nothing is cropped or covered on a phone. */
.hero-stage{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-bottom:8px}
.stage-studio{flex:0 0 100%}
.stage-phone{position:relative;inset:auto;flex:0 0 auto;width:clamp(132px,36vw,180px);padding-top:26px}
.stage-phone-label{left:50%;bottom:auto;top:0}
.art-featured{grid-column:span 1}
.hero h1{font-size:clamp(28px,7.6vw,36px)}
}