:root {
  color-scheme: light;
  --paper: #f6f2e9;
  --paper-deep: #ebe5d8;
  --ink: #263c35;
  --muted: #7c877d;
  --rust: #bd7053;
  --gold: #e5b85f;
  --green: #728975;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.page-grain { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfdbd0; padding: 0 6.4vw; position: relative; z-index: 2; }
.wordmark { font: 600 19px var(--sans); letter-spacing: -.09em; text-decoration: none; color: var(--ink); }
.wordmark span { font-weight: 400; }.wordmark i { color: var(--rust); font-style: normal; }.wordmark small { font: 10px var(--mono); letter-spacing: -.02em; color: var(--muted); margin-left: 2px; }
.domain-status, .edition { font: 9px var(--mono); letter-spacing: .09em; color: #68796d; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: #89a477; box-shadow: 0 0 0 3px #89a47725; }
.edition { color: #9b9a8c; }.edition b { color: var(--rust); font-size: 13px; margin-left: 5px; }
.hero { min-height: min(750px, calc(100svh - 78px)); position: relative; display: grid; grid-template-columns: 47% 53%; align-items: center; padding: 46px 10.5vw 60px 13.2vw; overflow: hidden; }
.hero-copy { z-index: 1; position: relative; padding-bottom: 10px; }
.eyebrow { margin: 0 0 27px; font: 9px var(--mono); color: #8a9389; text-transform: uppercase; letter-spacing: .09em; }
.eyebrow span { color: var(--rust); }
h1 { margin: 0; font: 500 clamp(58px, 7.2vw, 100px)/.95 var(--serif); letter-spacing: -.07em; }
h1 em, h2 em { color: var(--rust); font-weight: 500; }
.hero-deck { color: #66746b; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.8; margin: 27px 0 36px; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; color: #879187; text-decoration: none; font: 9px var(--mono); letter-spacing: .07em; transition: color .2s; }
.scroll-cue:hover { color: var(--rust); }.scroll-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #c5c9bb; border-radius: 50%; font-size: 13px; transition: transform .2s; }.scroll-cue:hover .scroll-icon { transform: translateY(3px); }
.art-stage { height: min(540px, 65vw); min-height: 385px; position: relative; isolation: isolate; }
.art-stage::before { content: ""; position: absolute; z-index: -1; width: 82%; aspect-ratio: 1; border-radius: 50%; top: 8%; left: 10%; background: #f0eadb; }
.art-label { position: absolute; top: 5%; right: 0; font: 8px var(--mono); letter-spacing: .1em; color: #9a9c8d; }.art-label span { color: var(--rust); margin-left: 7px; }
.sun { width: 117px; height: 117px; position: absolute; top: 18%; right: 19%; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 12px #e5b85f18, 0 0 0 26px #e5b85f0b; animation: sun-breathe 7s ease-in-out infinite; }
.orbit { position: absolute; width: 72%; height: 32%; left: 14%; top: 23%; border: 1px solid #c9a97059; border-radius: 50%; transform: rotate(-25deg); }.orbit-two { width: 69%; left: 18%; top: 19%; transform: rotate(45deg); border-color: #c9a97036; }
.spark { position: absolute; z-index: 2; color: var(--rust); }.spark-one { top: 26%; left: 22%; font-size: 22px; }.spark-two { top: 16%; right: 15%; font-size: 17px; color: #8b9a80; }.spark-three { top: 38%; left: 38%; color: #d7a352; font-size: 39px; }
.hill { position: absolute; bottom: 8%; width: 100%; height: 45%; border-radius: 50% 50% 0 0 / 35% 35% 0 0; }.hill-back { left: 10%; width: 92%; bottom: 12%; height: 41%; background: #a8b39a; transform: rotate(-8deg); }.hill-front { left: -3%; height: 37%; background: #758c78; transform: rotate(5deg); }
.house { position: absolute; width: 39%; left: 33%; bottom: 23%; z-index: 2; filter: drop-shadow(0 14px 13px #384b3823); animation: house-float 6s ease-in-out infinite; }
.roof { position: relative; width: 122%; height: 0; margin-left: -11%; border-left: 86px solid transparent; border-right: 86px solid transparent; border-bottom: 76px solid #b9694e; }.roof::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #d7a45c; top: -12px; left: -8px; }
.house-body { height: 127px; position: relative; margin-top: -1px; background: #ead8b9; border-left: 5px solid #d4bc9a; border-right: 5px solid #d4bc9a; }
.window { position: absolute; width: 28px; height: 32px; top: 29px; background: #8ba09a; border: 4px solid #f3e7cf; box-shadow: 0 0 0 1px #aa9376; }.window-left { left: 13%; }.window-right { right: 13%; }.window i { position: absolute; height: 100%; width: 1px; left: 50%; background: #eeddbd; }.window b { position: absolute; width: 100%; height: 1px; top: 50%; background: #eeddbd; }
.door { position: absolute; bottom: 0; left: calc(50% - 19px); height: 67px; width: 38px; border-radius: 18px 18px 0 0; background: #8a5c42; border: 4px solid #f3e7cf; border-bottom: 0; }.door i { position: absolute; right: 5px; top: 35px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.house-shadow { position: absolute; bottom: -10px; left: -18%; width: 136%; height: 15px; border-radius: 50%; background: #4256443b; filter: blur(5px); }
.flower { position: absolute; z-index: 3; width: 13px; height: 13px; bottom: 17%; border-radius: 50%; background: #f1d99a; box-shadow: 0 -8px #f1d99a, 0 8px #f1d99a, 8px 0 #f1d99a, -8px 0 #f1d99a; transform: scale(.44); }.flower i { position: absolute; width: 7px; height: 7px; background: #b96f52; border-radius: 50%; left: 3px; top: 3px; }.flower-a { left: 23%; }.flower-b { right: 17%; bottom: 21%; transform: scale(.34); }.flower-c { right: 26%; bottom: 12%; transform: scale(.26); }
.art-caption { position: absolute; bottom: 3%; left: 17%; width: 69%; display: flex; justify-content: space-between; font: 8px var(--mono); letter-spacing: .1em; color: #f3efdf; }.art-caption span:last-child { font-size: 14px; margin-top: -4px; }
.secret-mark { position: absolute; z-index: 4; right: 5%; bottom: 2%; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #f4ead5; background: #536e5b; box-shadow: 0 3px 12px #384b3823; font-size: 15px; }
.hero-index { position: absolute; right: 5.2vw; bottom: 46%; display: flex; flex-direction: column; align-items: center; gap: 11px; font: 9px var(--mono); color: #a7aa9c; }.hero-index span:first-child { color: var(--rust); }.index-line { width: 1px; height: 42px; background: #d5cdbc; }
.note-section { position: relative; min-height: 440px; display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; padding: 76px 13.2vw; background: #ebe8dc; overflow: hidden; }
.note-aside { align-self: start; padding-top: 22px; display: flex; flex-direction: column; gap: 12px; color: #879185; font: 8px var(--mono); letter-spacing: .12em; }.aside-star { font-size: 24px; color: var(--rust); }
.note-content { max-width: 470px; }.note-content .eyebrow { margin-bottom: 20px; }.note-content h2 { margin: 0; font: 500 clamp(43px, 5vw, 66px)/1.02 var(--serif); letter-spacing: -.06em; }.note-copy { max-width: 380px; margin: 20px 0 28px; color: #66746b; font-size: 15px; line-height: 1.8; }.note-foot { display: flex; align-items: center; gap: 10px; color: #899286; font: 8px var(--mono); letter-spacing: .08em; }.tiny-heart { font-size: 16px; color: var(--rust); }.foot-rule { width: 28px; height: 1px; background: #c8bfaa; margin: 0 5px; }.care-link { display: inline-flex; align-items: center; min-height: 28px; margin: 0 -7px; padding: 0 7px; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; }.care-link:hover, .care-link:focus-visible { color: var(--rust); outline: none; }
.mail-invite { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 24px; }.mail-invite > span { color: #92988e; font: 8px var(--mono); letter-spacing: .12em; }.mail-invite a { color: var(--ink); font-size: 13px; text-decoration: none; border-bottom: 1px solid #c5a787; padding-bottom: 4px; transition: color .2s, border-color .2s; }.mail-invite a:hover, .mail-invite a:focus-visible { color: var(--rust); border-color: var(--rust); }.mail-invite a i { color: var(--rust); font-style: normal; margin-left: 6px; }.mail-invite small { color: #92988e; font-size: 10px; line-height: 1.5; }
.note-doodle { width: 145px; height: 145px; justify-self: end; position: relative; color: #8b7960; transform: rotate(7deg); }.doodle-sun { font-size: 62px; color: #d4aa5b; position: absolute; right: 5px; top: 0; }.note-doodle > span { position: absolute; top: 62px; left: 0; font: italic 17px/1.1 var(--serif); }.note-doodle svg { position: absolute; width: 100px; bottom: 4px; right: 0; fill: none; stroke: #b87559; stroke-width: 1.3; stroke-linecap: round; }
.site-footer { min-height: 62px; padding: 15px 6.4vw; display: flex; align-items: center; justify-content: space-between; color: #9a9b8e; font: 8px var(--mono); letter-spacing: .1em; }.footer-flower { color: var(--rust); font-size: 15px; }
@keyframes house-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sun-breathe { 0%,100% { box-shadow: 0 0 0 12px #e5b85f18, 0 0 0 26px #e5b85f0b; } 50% { box-shadow: 0 0 0 18px #e5b85f13, 0 0 0 38px #e5b85f08; } }
@media (min-width: 1500px) { .hero { padding-left: max(13.2vw, calc((100vw - 1180px)/2)); padding-right: max(10.5vw, calc((100vw - 1240px)/2)); }.note-section { padding-left: max(13.2vw, calc((100vw - 1180px)/2)); padding-right: max(13.2vw, calc((100vw - 1180px)/2)); } }
@media (max-width: 900px) { .topbar { padding: 0 5vw; }.edition { display: none; }.hero { grid-template-columns: 45% 55%; padding: 45px 8vw 55px 9vw; }.art-stage { transform: scale(.93); transform-origin: center; }.note-section { padding: 70px 9vw; grid-template-columns: .5fr 1.5fr .8fr; }.hero-index { right: 3vw; } }
@media (max-width: 650px) {
  .topbar { height: 64px; padding: 0 22px; }.domain-status { font-size: 7px; letter-spacing: .04em; }.status-dot { width: 5px; height: 5px; margin-right: 5px; }
  .hero { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: 57px 28px 40px; }.hero-copy { padding: 0; }.eyebrow { margin-bottom: 22px; font-size: 8px; }h1 { font-size: clamp(58px, 16vw, 88px); }.hero-deck { font-size: 15px; margin: 22px 0 22px; }.desktop-break { display: none; }.scroll-cue { font-size: 8px; }.art-stage { width: min(100%, 440px); height: min(100vw, 390px); min-height: 315px; align-self: center; margin: 19px auto 0; transform: none; }.sun { width: 86px; height: 86px; }.roof { border-left-width: 67px; border-right-width: 67px; border-bottom-width: 60px; }.house-body { height: 98px; }.window { width: 23px; height: 26px; top: 22px; border-width: 3px; }.door { width: 31px; height: 53px; left: calc(50% - 15px); border-width: 3px; }.hero-index { display: none; }
  .note-section { padding: 57px 28px 68px; display: grid; grid-template-columns: 1fr auto; gap: 20px 10px; }.note-aside { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 0; }.aside-star { font-size: 19px; }.note-content { grid-column: 1 / -1; }.note-content h2 { font-size: 56px; }.note-copy { font-size: 14px; }.note-doodle { grid-column: 2; grid-row: 3; width: 105px; height: 115px; margin-top: -40px; }.doodle-sun { font-size: 48px; }.note-doodle > span { font-size: 14px; top: 52px; }.note-doodle svg { width: 78px; }
  .site-footer { padding: 18px 22px; min-height: 66px; }.site-footer > span:first-child { max-width: 95px; line-height: 1.7; }.site-footer > span:last-of-type { max-width: 105px; text-align: right; line-height: 1.7; }.footer-flower { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
