@font-face{font-family:HoujuCalligraphy;src:url('./assets/fonts/zhi-mang-xing-cover-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:HoujuSong;src:url('./assets/fonts/source-han-serif-sc-v17-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:HoujuSong;src:url('./assets/fonts/source-han-serif-sc-v17-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:HoujuSong;src:url('./assets/fonts/source-han-serif-sc-v18-500.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0020,U+6210,U+5973,U+58EB,U+4EB2,U+542F,U+656C,U+6797}
@font-face{font-family:HoujuRoman;src:url('./assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:HoujuRoman;src:url('./assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
:root{--leaf:#78a848;--ink:#075631;--text:#123822;--milk:#f6f2d9;--paper:#f1f0dc;--muted:#52694a;--view-height:100vh;color-scheme:light;background:var(--leaf);font-synthesis:none}
@supports(height:100svh){:root{--view-height:100svh}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;height:100%;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{font-family:HoujuSong,'Songti SC',serif;font-weight:300;color:var(--text);background:var(--leaf)}
body[data-view=letter]{background:#36583b}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid currentColor;outline-offset:5px}
p,h1,h2,dl,dd{margin:0}
[hidden]{display:none!important}
/* The native links stay usable before enhancement, or if a script cannot load. */
html:not(.flow-ready) #letter:target{display:block!important}
.texture-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.invitation{width:100%;max-width:460px;margin-inline:auto}
.view-surface{position:fixed;inset:0 0 auto;width:100%;max-width:460px;height:var(--view-height);margin-inline:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.view-surface::-webkit-scrollbar{width:0;height:0}
.cover-stage{z-index:1;background:var(--leaf)}
.cover{--cover-height:max(600px,var(--view-height));position:relative;isolation:isolate;height:var(--cover-height);overflow:hidden;background:var(--leaf)}
.grain{position:absolute;inset:0;opacity:.075;mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.corner-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:HoujuRoman,serif;font-size:10px;line-height:1.3;letter-spacing:.3em;white-space:nowrap}
.top-row{position:absolute;top:calc(26px + env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right))}
.bottom-row{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right))}
.brand-mark{display:block;flex:none;width:112px;height:14px;background:currentColor;-webkit-mask:url('./assets/xilin-en.svg') left center/contain no-repeat;mask:url('./assets/xilin-en.svg') left center/contain no-repeat}
.bottom-row .brand-mark{color:var(--milk)}
.recipient{position:absolute;top:calc(82px + env(safe-area-inset-top));left:max(26px,env(safe-area-inset-left));font-size:17px;font-weight:500;letter-spacing:.19em;line-height:1.8;color:#073a24}
.cover-title{position:absolute;top:calc(96px + env(safe-area-inset-top));right:30px;writing-mode:vertical-rl;font-family:HoujuCalligraphy,cursive;font-size:clamp(200px,calc(var(--cover-height)*.2962),250px);line-height:1;font-weight:400;color:var(--ink);white-space:nowrap;user-select:none}
.cover-copy{position:absolute;bottom:calc(128px + env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.roman-title{font-family:HoujuRoman,serif;font-style:italic;font-size:38px;line-height:1;font-weight:400;color:var(--ink)}
.fine-rule{width:36px;height:1px;background:var(--milk)}
.series-name{font-size:13px;line-height:1.4;letter-spacing:.22em;font-weight:400}
.motto{font-size:12px;line-height:1.4;letter-spacing:.22em}
.cover-date{font-family:HoujuRoman,HoujuSong,serif;font-size:12px;line-height:1.4;letter-spacing:.08em}
.open-invite{position:absolute;bottom:calc(57px + env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;min-width:130px;font-size:11px;font-weight:400;letter-spacing:.24em}
.open-invite svg{width:28px;height:14px;fill:none;stroke:var(--text);stroke-width:.85}
.letter{z-index:2;min-height:var(--view-height);background:repeating-linear-gradient(90deg,#dce4c208 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,#122d2014 0 1px,transparent 1px 3px),radial-gradient(ellipse 85% 350px at 50% 0,#b9ce8730,transparent 78%),#36583b;color:#354b3b;touch-action:pan-y pinch-zoom}
#letter-material{position:fixed;inset:0 0 auto;width:100%;max-width:460px;height:var(--view-height);margin-inline:auto;pointer-events:none;z-index:0}
.letter-wrap{position:relative;z-index:1;width:min(calc(100% - 44px - env(safe-area-inset-left) - env(safe-area-inset-right)),360px);margin:0 auto;padding:0 0 max(28px,env(safe-area-inset-bottom));min-height:100%}
.letter-masthead{display:flex;align-items:flex-end;justify-content:center;height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 0 12px}
.letter-brand{display:block;width:145px;aspect-ratio:1928/239;background:linear-gradient(78deg,#bdcba4 calc(var(--letter-beam,48%) - 36%),#eef0d8 var(--letter-beam,48%),#b7c89c calc(var(--letter-beam,48%) + 36%));-webkit-mask:url('./assets/xilin-en.svg') center/contain no-repeat;mask:url('./assets/xilin-en.svg') center/contain no-repeat}
.paper{padding:36px 28px 30px;background:#f4f1e6;box-shadow:inset var(--paper-edge,1px) 0 0 #fff9,0 1px 1px #fff3,var(--paper-shadow,-2px) 3px 5px #10241635,0 14px 30px #16291828}
.paper-heading{text-align:center;margin:0 0 38px}
.paper-heading h2{font-size:18px;line-height:1.6;font-weight:400;letter-spacing:.45em;padding-left:.45em;color:#294833}
.paper-heading h2:focus{outline:none}
.paper-heading p{font-family:HoujuRoman,serif;font-style:italic;font-size:12.5px;line-height:1.5;font-weight:400;margin:5px 0 0;color:#647560}
.letter-body{font-size:14px;line-height:1.95;letter-spacing:.04em;overflow-wrap:break-word;line-break:strict;text-align:justify;text-justify:inter-ideograph}
.letter-body p{margin:0 0 12px;text-indent:0;text-wrap:pretty}
.keep-phrase{white-space:nowrap}
.letter-body .greeting{font-size:14px;font-weight:400;line-height:1.95;margin-bottom:18px;letter-spacing:.04em;text-align:left;color:#294833}
.letter-body .welcome{margin:12px 0 0}
.visit-info{margin:26px 0 0;border-top:1px solid #b7c0ac;font-size:12.5px;line-height:1.7}
.visit-info>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid #d7dcca}
.visit-info dt{font-size:11.5px;letter-spacing:.25em;color:#647560}
.visit-info dd{text-align:right;overflow-wrap:anywhere;color:#53634d;font-variant-numeric:tabular-nums}
.paper-signature{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:32px;min-height:40px}
.signature-name{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.letter-cn-brand{display:block;width:96px;height:23.47px;background:#294833;-webkit-mask:url('./assets/xilin-cn-v1.svg') center/contain no-repeat;mask:url('./assets/xilin-cn-v1.svg') center/contain no-repeat}
.signature-name>span:last-child{font-size:11.5px;letter-spacing:.14em;color:#647560}
.seal-placeholder{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid #74856b;color:#74856b;font-size:16px;line-height:1;font-weight:400}
.letter-return{display:flex;justify-content:center;padding-top:12px}
.close-invite{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:92px;padding:10px 16px;font-size:11px;letter-spacing:.16em;color:#d3dfbc}
@media(min-width:600px){body{background:#e3e7d4}body[data-view=letter]{background:#e3e7d4}.invitation,.view-surface,#letter-material{max-width:390px}}
@media(max-width:374px){.corner-row{font-size:9px;letter-spacing:.24em}.cover-title{right:20px;font-size:clamp(200px,calc(var(--cover-height)*.282),238px)}.letter-body{font-feature-settings:"palt" 1}}
@media(max-width:340px){.cover-title{right:12px;font-size:210px}.recipient{font-size:16px}}
@media(max-height:719px){.cover-title{top:calc(70px + env(safe-area-inset-top));font-size:clamp(158px,47vw,188px)}}

/* Cover-only material, unchanged from C2. */
#jacquard{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.cover{touch-action:pan-y pinch-zoom;outline:none;--ink-light:0}
.cover:focus-visible{outline:1px solid #e9edcc;outline-offset:-5px}
.cover-title{color:rgb(calc(7 + var(--ink-light)*9) calc(86 + var(--ink-light)*13) calc(49 + var(--ink-light)*6))}
.enable-tilt{position:absolute;right:20px;bottom:calc(57px + env(safe-area-inset-bottom));width:44px;height:44px;border:0;background:transparent;color:#254d31;display:grid;place-items:center;padding:11px;cursor:pointer}
.enable-tilt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1}
.enable-tilt:focus-visible{outline:1px solid currentColor;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.cover-title{color:var(--ink)}}