:root{--paper:#fbfaf7;--white:#fff;--sand:#f3efe7;--sand-2:#ebe4d8;--ink:#0f1c24;--ink-2:#1f313b;--slate:#4a5862;--mist:#6b7780;--rule:#e2dccf;--rule-2:#c9c0af;--gold:#b4894b;--gold-2:#caa56b;--gold-text:#7a5a2b;--gold-soft:#f4ecdd;--lagoon:#2f6b66;--lagoon-soft:#e4efec;--alert:#9c2533;--on-ink:#f3efe7;--on-ink-2:#b9c3c8;
--serif:"Cormorant Garamond","WF Serif SC",var(--wf-latin-serif-fallback,serif);--sans:"WF Sans SC",var(--wf-latin-sans-fallback,sans-serif);
--spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,.8,.2,1);--out:cubic-bezier(.22,1,.36,1);--gut:clamp(20px,4.6vw,72px);--max:1360px;--r:4px;
--lh-bg:rgba(251,250,247,.94);--lh-fg:#0f1c24;--lh-accent:#2f6b66;--lh-border:rgba(15,28,36,.16);--lh-shadow:0 10px 30px -12px rgba(15,28,36,.35);--lh-panel-radius:10px;--lh-font:var(--sans)}
:lang(ar){--serif:"Noto Naskh Arabic","Cormorant Garamond",serif;--sans:"Noto Sans Arabic","WF Sans SC",sans-serif}
:lang(hi){--serif:"Noto Serif Devanagari","Cormorant Garamond",serif;--sans:"Noto Sans Devanagari","WF Sans SC",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{font-size:max(var(--copy-floor,14px),17px);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;font-kerning:normal}
:root:not(:lang(zh-CN)) body{font-variant-east-asian:proportional-width}
:lang(zh-CN) body,:lang(zh-CN){line-height:1.8;letter-spacing:.01em}
h1,h2,h3,p,figure,dl,dd{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,4.6rem)}
h2{font-size:clamp(1.65rem,2.4vw,2.2rem)}
h3{font-size:max(var(--copy-floor,14px),1.06rem);font-weight:700;line-height:1.35}
:lang(zh-CN) h1,:lang(zh-CN) h2{letter-spacing:.02em;line-height:1.25}
:lang(ar) h1,:lang(ar) h2,:lang(hi) h1,:lang(hi) h2{line-height:1.45;letter-spacing:0}
p,a,button,dd,li{overflow-wrap:anywhere}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--rule-2);transition:color .16s,text-decoration-color .16s}
a:hover{text-decoration-color:currentColor}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:3px solid var(--lagoon);outline-offset:4px;border-radius:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:max(var(--copy-floor,14px),.74rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
:lang(zh-CN) .eyebrow,:lang(ar) .eyebrow,:lang(hi) .eyebrow{letter-spacing:.06em;font-size:max(var(--copy-floor,14px),.84rem)}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--slate);max-width:40em}
.caption,.secondary-text{font-size:max(var(--copy-floor,14px),.9rem);color:var(--slate)}
#app-root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{display:block;flex:1 0 auto;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(56px,8vw,112px)}
main:has(>.intent-section:last-child){padding-bottom:0}
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border:1px solid var(--ink);border-radius:var(--r);background:transparent;color:var(--ink);font-weight:700;font-size:max(var(--copy-floor,14px),.95rem);text-decoration:none;line-height:1.2;transition:transform 180ms var(--spring),background-color .16s,border-color .16s,color .16s,box-shadow .18s}
.button.primary{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 1px 0 rgba(15,28,36,.12),0 12px 24px -16px rgba(122,90,43,.9)}
.button.primary:hover{background:var(--gold-2);border-color:var(--gold-2)}
.button.secondary{background:var(--white);border-color:var(--rule-2)}
.button.secondary:hover{border-color:var(--ink)}
.button.plain{border-color:transparent;padding-inline:12px;color:var(--lagoon);text-decoration:underline;text-decoration-color:transparent}
.button.plain:hover{text-decoration-color:currentColor}
.button:active,.sound-button:active{transform:scale(.97);filter:brightness(1.06);transition-duration:120ms;transition-timing-function:var(--out)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.button:hover,.sound-button:hover{transform:translateY(-1px)}
.text-link:hover .arrow{transform:translate(2px,-2px)}
}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--lagoon);font-weight:700;text-decoration:none}
.text-link span[data-t]{text-decoration:underline;text-decoration-color:rgba(47,107,102,.35);text-underline-offset:.3em}
.text-link:hover span[data-t]{text-decoration-color:currentColor}
.arrow{display:inline-block;font-size:max(var(--copy-floor,14px),.85em);transition:transform .18s var(--spring)}
.button .arrow{color:inherit}
.skip-link{position:fixed;z-index:100;inset-inline-start:16px;top:-120px;padding:12px 18px;background:var(--ink);color:var(--on-ink);border-radius:var(--r)}
.skip-link:focus-visible{top:12px}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:clamp(16px,3vw,44px);padding:14px var(--gut);background:rgba(251,250,247,.97);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-inline-end:auto;min-width:0}
.brand-mark{display:inline-flex;align-items:flex-end;gap:3px;width:34px;height:36px;flex:none}
.brand-mark i{display:block;width:10px;border:1.5px solid var(--gold);border-bottom:0;border-radius:6px 6px 0 0}
.brand-mark i:nth-child(1){height:22px}
.brand-mark i:nth-child(2){height:34px;border-color:var(--ink)}
.brand-mark i:nth-child(3){height:16px}
.brand-words strong{display:block;font-family:var(--serif);font-weight:500;font-size:max(var(--copy-floor,14px),1.28rem);letter-spacing:.08em;line-height:1.1;white-space:nowrap}
.brand-words small{display:block;margin-top:3px;font-size:max(var(--copy-floor,14px),.62rem);font-weight:700;letter-spacing:.2em;color:var(--slate);white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:clamp(12px,2vw,30px)}
.main-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:max(var(--copy-floor,14px),.9rem);font-weight:700;text-decoration:none;color:var(--ink-2);white-space:nowrap}
.main-nav a::after{content:"";position:absolute;inset-inline:0;bottom:6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.main-nav a:hover::after{transform:scaleX(.5)}
.main-nav a[aria-current]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px}
.sound-button{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:6px 14px 6px 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--white);font-size:max(var(--copy-floor,14px),.82rem);font-weight:700;white-space:nowrap;transition:transform 180ms var(--spring),border-color .16s,background-color .16s}
.sound-button:hover{border-color:var(--ink)}
.sound-button[aria-pressed=false]{color:var(--slate)}
.sound-glyph{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.sound-glyph i{width:2px;height:100%;border-radius:1px;background:var(--gold);transform-origin:bottom;animation:eq 1.6s var(--ease) infinite alternate}
.sound-glyph i:nth-child(2){animation-delay:-.5s}
.sound-glyph i:nth-child(3){animation-delay:-1.1s}
.sound-glyph i:nth-child(4){animation-delay:-.8s}
.sound-button[aria-pressed=false] .sound-glyph i{animation:none;transform:scaleY(.22);background:var(--mist)}
@keyframes eq{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
.offline-bar{padding:10px var(--gut);background:var(--gold-soft);border-bottom:1px solid var(--gold-2);font-size:max(var(--copy-floor,14px),.92rem)}
.site-footer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;padding:clamp(40px,5vw,64px) var(--gut) 48px;background:var(--ink);color:var(--on-ink-2);font-size:max(var(--copy-floor,14px),.9rem)}
.footer-brand{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center}
.footer-brand .brand-mark{grid-row:span 2}
.footer-brand .brand-mark i:nth-child(2){border-color:var(--on-ink)}
.footer-brand p:first-of-type{font-family:var(--serif);font-size:max(var(--copy-floor,14px),1.3rem);color:var(--on-ink)}
.site-footer details summary{cursor:pointer;color:var(--on-ink)}
.entity-lines{display:grid;gap:4px;font-size:max(var(--copy-floor,14px),.85rem)}
.footer-line{position:absolute;inset-inline:var(--gut);top:0;height:2px;background:linear-gradient(90deg,var(--gold) 0 64px,transparent 64px)}
.feedback-lane{position:fixed;z-index:30;inset-inline:0;bottom:18px;display:flex;justify-content:center;pointer-events:none}
.feedback{pointer-events:auto;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:max(var(--copy-floor,14px),.92rem);box-shadow:0 18px 40px -18px rgba(15,28,36,.6);animation:rise .32s var(--out)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
dialog{max-width:min(520px,calc(100vw - 32px));padding:32px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 40px 80px -40px rgba(15,28,36,.6)}
dialog::backdrop{background:rgba(15,28,36,.42)}
dialog h2{margin:10px 0 12px}
dialog p{color:var(--slate)}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:26px}
.boot-screen{min-height:60vh;display:grid;place-items:center;padding:40px var(--gut);text-align:center}
.boot-screen h1{font-size:max(var(--copy-floor,14px),2rem);margin-bottom:12px}
.boot-screen .button{margin:18px 6px 0}
.prerender-loading{color:var(--slate)}
/* icons: masks of the shared family's paths */
.wf-arrow,.wf-i{display:inline-block;inline-size:1em;block-size:1em;vertical-align:-.125em;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.wf-arrow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E")}
.wf-i-globe{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.6 4 5.6 4 9s-1.5 6.4-4 9'/%3E%3Cpath d='M12 3c-2.5 2.6-4 5.6-4 9s1.5 6.4 4 9'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")}
.wf-i-chevron{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.25 12 14.75l5.5-5.5'/%3E%3C/svg%3E")}
.wf-i-list{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h10'/%3E%3Cpath d='M9 12h10'/%3E%3Cpath d='M9 18h10'/%3E%3Cpath d='M5 6h.01'/%3E%3Cpath d='M5 12h.01'/%3E%3Cpath d='M5 18h.01'/%3E%3C/svg%3E")}
.wf-i-left{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m6-6-6 6 6 6'/%3E%3C/svg%3E")}
[dir="rtl"] .wf-i-left{transform:scaleX(-1)}
@media (forced-colors:active){.wf-arrow,.wf-i{background:CanvasText;forced-color-adjust:none}}
/* proportional quotes outside Chinese */
html:not(:lang(zh)) *{font-variant-east-asian:proportional-width!important}html :lang(zh){font-variant-east-asian:normal!important}
