:root { color-scheme: light; --paper: #f4f3ed; --ink: #213c35; --muted: #626d62; --line: #d8dcd1; --accent: #b8c998; font-family: "Avenir Next", "Trebuchet MS", sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; }
.page { max-width: 1512px; min-height: 100svh; margin: auto; padding: 0 6%; display: flex; flex-direction: column; }
.header { display: flex; align-items: center; justify-content: space-between; padding: 32px 0; border-bottom: 1px solid var(--line); gap: 24px; }
.brand { display: inline-flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; font-size: 21px; font-weight: 700; letter-spacing: -.6px; }
.brand-mark { width: 34px; height: 40px; }
.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 2px; }
.header-note { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
main { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 40px; padding: 88px 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 2px; margin: 0 0 30px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b8454; }
h1 { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: clamp(46px, 5.6vw, 85px); font-weight: 400; line-height: 1.08; letter-spacing: -3px; margin: 0 0 27px; }
h1 em { font-weight: 400; color: #687b58; }
.description { color: var(--muted); font-size: 16px; line-height: 1.85; max-width: 450px; }
.notice { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 23px; display: flex; gap: 24px; max-width: 440px; }
.notice-number { font-size: 11px; color: var(--muted); padding-top: 3px; }
.notice h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.notice p { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0; }
.illustration { position: relative; aspect-ratio: 1; width: 100%; max-width: 450px; justify-self: end; display: grid; place-items: center; background: radial-gradient(ellipse, #e4e9d8 0, transparent 68%); }
.orbit { position: absolute; border: 1px solid #cdd5c2; border-radius: 50%; }
.orbit-outer { width: 92%; height: 92%; }
.orbit-inner { width: 73%; height: 73%; border-style: dashed; opacity: .8; }
.monogram { width: 48%; height: 48%; display: grid; place-items: center; background: var(--ink); color: #dae5c8; border-radius: 28%; transform: rotate(-8deg); box-shadow: 14px 21px 0 #dce2d2; }
.monogram svg { width: 55%; transform: rotate(8deg); }
.orbit-label { position: absolute; bottom: 1%; font-size: 9px; letter-spacing: 2px; background: var(--paper); padding: 8px 15px; }
.cross { position: absolute; font-size: 24px; font-weight: 400; background: var(--paper); color: #7b8b69; line-height: 1; }
.cross-top { top: 11%; right: 15%; }
.cross-bottom { bottom: 19%; left: 8%; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .5px; }
@media (max-width: 720px) { .page { padding: 0 7%; } .header { padding: 23px 0; } .header-note { display: none; } main { grid-template-columns: 1fr; gap: 45px; padding: 58px 0 44px; } h1 { letter-spacing: -2px; } .illustration { width: 72%; max-width: 300px; justify-self: center; } .notice { margin-top: 32px; } footer { font-size: 10px; flex-wrap: wrap; } }