:root{--green:#a7d443;--ink:#253321;--cream:#f6fae9;--rule:rgba(37,51,33,.25)}
*{box-sizing:border-box}
html{min-height:100%;background:#172e21}
body{min-height:100vh;margin:0;padding:clamp(12px,1.4vw,22px);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:url('./assets/backgrounds/hero-nature.webp') center/cover fixed;-webkit-font-smoothing:antialiased}
.page{position:relative;isolation:isolate;min-height:calc(100vh - clamp(24px,2.8vw,44px));overflow:hidden;background:transparent}
.page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 17% 11% at 8% 24%,rgba(255,255,229,.58),transparent 82%),radial-gradient(ellipse 10% 19% at 27% 68%,rgba(255,255,234,.42),transparent 80%),radial-gradient(ellipse 16% 10% at 42% 12%,rgba(255,255,233,.46),transparent 82%),radial-gradient(ellipse 12% 17% at 61% 49%,rgba(255,255,234,.38),transparent 80%),radial-gradient(ellipse 18% 12% at 84% 28%,rgba(255,255,232,.48),transparent 82%),radial-gradient(ellipse 12% 19% at 91% 76%,rgba(255,255,233,.32),transparent 80%),rgba(246,249,226,.57);-webkit-mask:url('./assets/textures/paper-edge.svg') center/100% 100% no-repeat;mask:url('./assets/textures/paper-edge.svg') center/100% 100% no-repeat;backdrop-filter:blur(1.2px)}
.masthead{height:96px;padding:0 clamp(24px,2.8vw,46px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.masthead-id{font-size:1.16rem;font-weight:700;letter-spacing:-.055em;line-height:1}.masthead-id span{font-size:.78rem;vertical-align:top;margin-left:3px}
.masthead-note,.index,.micro-label,.portrait figcaption,.page-footer{font-family:"Courier New",monospace;font-size:.76rem;letter-spacing:.12em}
.masthead-note{font-size:.72rem}
.grid{display:grid;grid-template-columns:1.28fr 1fr 1fr 1fr;min-height:min(770px,calc(100vh - 148px));margin:0 clamp(24px,2.8vw,46px);border-right:1px solid var(--rule)}
.column{min-width:0;position:relative;border-left:1px solid var(--rule);padding:0 clamp(19px,2.25vw,39px)}
.decoration{--rest-angle:0deg;position:absolute;display:block;width:clamp(70px,8vw,118px);height:auto;object-fit:contain;pointer-events:none;user-select:none;transform:rotate(var(--rest-angle));transform-origin:50% 70%}
.osmanthus{--rest-angle:-10deg;position:static;width:62px}
.lemon{--rest-angle:10deg;top:-34px;right:-27px;width:85px;z-index:-1}
.apple{--rest-angle:-8deg;top:43%;right:-30px;width:72px;z-index:2}
.introduction{display:flex;flex-direction:column;align-items:flex-start;padding-left:0}
.index{padding-top:9px}
.headline{margin:auto 0;transform:translateY(-1%)}
.lead-in{display:block;font:300 clamp(1.4rem,2.5vw,2.5rem)/1.3 Georgia,"Songti SC","Noto Serif CJK SC",serif;letter-spacing:-.06em;margin-bottom:24px}
h1{font:300 clamp(4rem,6.7vw,7.5rem)/1.2 Georgia,"Songti SC","Noto Serif CJK SC",serif;letter-spacing:-.09em;margin:0;white-space:nowrap}
.period{color:var(--cream)}
.signature{display:flex;align-items:center;gap:17px;margin-top:12px}.roman-name{font:italic 300 clamp(2rem,3.5vw,3.8rem)/1.1 Georgia,serif;letter-spacing:-.06em;margin:0 0 0 4px}
.bottom-note,.column-foot{font-size:.92rem;letter-spacing:.04em;margin-bottom:25px}
.portrait-column{display:flex;flex-direction:column;align-items:flex-start}
.column-top{font:300 clamp(1.35rem,2.15vw,2.35rem)/1.45 Georgia,"Songti SC","Noto Serif CJK SC",serif;letter-spacing:-.05em;max-width:10ch;margin:0}
.column-top .tomato{--rest-angle:-8deg;position:static;display:inline-block;width:42px;vertical-align:middle;margin:0 0 0 8px}
.portrait{position:relative;isolation:isolate;width:min(100%,270px);margin:auto auto 12%;background:rgba(246,250,233,.7);padding:9px 9px 11px;box-shadow:0 18px 35px rgba(37,51,33,.13);transform:rotate(-2deg)}
.portrait .portrait-photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.portrait figcaption{padding-top:12px;font-size:.65rem;letter-spacing:.06em;text-align:right}
.thought-column{display:flex;align-items:center;justify-content:center}
.middle-thought{font:300 clamp(1.5rem,2.45vw,2.8rem)/1.55 Georgia,"Songti SC","Noto Serif CJK SC",serif;letter-spacing:-.065em;margin:0;white-space:nowrap}
.column-foot{position:absolute;bottom:0;left:clamp(19px,2.25vw,39px)}
.identity-column{display:flex;flex-direction:column;justify-content:space-between}
.identity{padding-top:8px}.identity-pair+.identity-pair{margin-top:24px}.micro-label{display:block;margin-bottom:13px}.identity-value{display:block;font:300 clamp(1.55rem,2.45vw,2.75rem)/1.24 Georgia,serif;letter-spacing:-.06em}.id-value{font-style:italic}
.closing{font:300 clamp(1.45rem,2.35vw,2.65rem)/1.48 Georgia,"Songti SC","Noto Serif CJK SC",serif;letter-spacing:-.06em;margin:0 0 21px}
.page-footer{min-height:52px;margin:0 clamp(24px,2.8vw,46px);display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:.68rem;transform:translateY(-14px)}
.footer-link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .2s ease}.footer-link:hover{opacity:.58}.footer-link:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@media(max-width:1000px){.grid{grid-template-columns:1.15fr 1fr;min-height:0}.column{min-height:400px}.introduction{min-height:530px}.portrait-column{border-right:1px solid var(--rule)}.thought-column,.identity-column{border-top:1px solid var(--rule)}.thought-column{justify-content:flex-start;align-items:center}.middle-thought{white-space:normal}.identity-column{border-right:1px solid var(--rule)}.portrait{margin:auto auto 35px}.column-foot{margin-bottom:23px}.apple{top:38%}}
@media(max-width:640px){body{padding:8px;background-attachment:scroll}.page{min-height:calc(100vh - 16px)}.masthead{height:73px;padding:0 22px}.masthead-note{font-size:.64rem;letter-spacing:.04em}.grid{display:flex;flex-direction:column;margin:0 22px;border-right:1px solid var(--rule)}.column{min-height:0;padding:23px 20px;border-top:1px solid var(--rule)}.introduction{min-height:360px;padding-left:20px;border-top:0}.index{padding:0}.headline{margin:auto 0;transform:none}.lead-in{margin-bottom:7px}h1{font-size:clamp(4rem,16vw,6rem)}.roman-name{margin-top:0}.bottom-note{margin-bottom:0}.portrait-column{min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;border-right:0}.column-top{font-size:1.5rem;margin:0}.portrait{width:100%;max-width:180px;margin:0;justify-self:end}.thought-column{min-height:245px;justify-content:flex-start;align-items:flex-start}.middle-thought{font-size:clamp(1.55rem,6vw,2.3rem)}.column-foot{right:20px;left:auto;bottom:0}.identity-column{min-height:280px;border-right:0}.identity-value{font-size:2rem}.closing{font-size:1.75rem;margin:0}.page-footer{margin:0 22px;min-height:60px;align-items:center;font-size:.62rem}}
@media(max-width:380px){.portrait-column{grid-template-columns:1fr 1fr;gap:8px}.column-top{font-size:1.25rem}.portrait{max-width:140px}.page-footer{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}}
@media(max-width:640px){.signature{gap:10px;margin-top:0}.osmanthus{width:48px}.lemon{width:58px;top:-24px;right:-20px}.apple{width:58px;top:38%;right:-23px}}
@media(max-width:640px){.column-top .tomato{width:34px;margin-left:5px}}

/* A small keepsake from Sky, tucked into the editorial grid. */
.grid{height:calc(100vh - 148px - clamp(24px,2.8vw,44px));height:calc(100dvh - 148px - clamp(24px,2.8vw,44px));min-height:0}
@media(min-width:1001px){.thought-column{align-items:flex-start;justify-content:flex-start;padding-top:clamp(125px,17vh,180px)}}
.wave-hello{position:absolute;left:clamp(19px,2.25vw,39px);right:clamp(19px,2.25vw,39px);bottom:18px;display:flex;flex-direction:column;align-items:flex-start}
.wave-frame{width:132px;margin:0 0 14px;padding:6px 6px 7px;background:rgba(246,250,233,.86);box-shadow:0 10px 22px rgba(37,51,33,.13);transform:rotate(3deg)}
.wave-frame img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.wave-frame figcaption{font-size:.72rem;line-height:1.3;text-align:center;margin-top:7px;white-space:nowrap}
.spark-button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:4px 16px 4px 5px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);font:600 .9rem Arial,"PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.spark-button img{display:block;width:38px;height:38px;object-fit:contain}
.spark-button:hover{background:#3d572e;transform:translateY(-2px)}
.spark-button:focus-visible{outline:3px solid #f6fae9;outline-offset:3px}
.spark-response{min-height:1.5em;margin:9px 0 0;font-size:.75rem;line-height:1.5;color:#3d562b}
.spark-button.is-sent img{animation:spark-pulse .6s ease-out}
@keyframes spark-pulse{50%{transform:scale(1.22) rotate(10deg)}}
@media(max-width:1000px){.grid{height:auto;min-height:0}.thought-column{min-height:570px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding-top:34px;padding-bottom:28px;gap:32px}.wave-hello{position:static}}
@media(max-width:640px){.thought-column{min-height:0;gap:34px;padding-top:24px;padding-bottom:27px}.wave-frame{width:126px}}
@media(min-width:1001px) and (max-height:850px){.wave-frame{width:108px;margin-bottom:9px}.wave-frame figcaption{font-size:.66rem}.spark-button{min-height:42px}.spark-button img{width:32px;height:32px}.spark-response{margin-top:6px}.middle-thought{font-size:clamp(1.35rem,2.1vw,2.4rem);line-height:1.42}}
@media(prefers-reduced-motion:reduce){.spark-button,.spark-button.is-sent img{animation:none;transition:none}}

.decoration.is-near{animation:decoration-wiggle .7s ease-in-out both}
@keyframes decoration-wiggle{0%,100%{transform:rotate(var(--rest-angle))}28%{transform:translateY(-2px) rotate(calc(var(--rest-angle) - 3deg))}64%{transform:translateY(1px) rotate(calc(var(--rest-angle) + 3deg))}}
@media(prefers-reduced-motion:reduce){.decoration.is-near{animation:none}}
@media(prefers-reduced-motion:reduce){body{background-attachment:scroll}}