:root {
  color-scheme: light;
  --paper: #f4f2eb;
  --ink: #222520;
  --muted: #686b62;
  --line: #d6d8cc;
  --blue: #294be8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: #c9d1ff; color: #17234f; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.page-shell { max-width: 1600px; padding: 0 6%; margin: auto; }
.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 10; padding: 1rem; background: var(--ink); color: white; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; font-size: 25px; font-weight: 750; letter-spacing: -1.3px; white-space: nowrap; }
.brand-symbol { font: italic 40px var(--serif); color: var(--blue); margin-right: 10px; }
.brand-period { color: var(--blue); }
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.product-byline { font: 10px/1.5 var(--sans); color: var(--muted); letter-spacing: .15px; }
.product-byline strong { font-weight: 650; color: var(--ink); }
.product-byline span { color: var(--blue); margin-left: 3px; }
.product-byline:hover, .product-byline:hover strong { color: var(--blue); }

.site-header nav { display: flex; gap: 32px; font-size: 13px; }
.site-header nav a { padding: 10px 0; }
.site-header nav a:hover, .back-top:hover { color: var(--blue); }
.header-note { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 9px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.hero { min-height: 640px; padding: 76px 0 65px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 30px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.8px; line-height: 1.6; text-transform: uppercase; margin: 0 0 27px; }
.tiny-cross { color: var(--blue); font-size: 18px; vertical-align: middle; margin-right: 8px; }
h1 { margin: 0; font-size: clamp(65px, 7.6vw, 118px); font-weight: 500; line-height: .99; letter-spacing: -.075em; }
h1 em, h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; color: var(--blue); }
.hero-invitation { margin: 26px 0 0; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.4; letter-spacing: -.6px; }
.hero-description { max-width: 350px; font-size: 15px; line-height: 1.8; color: var(--muted); margin: 28px 0; }
.button { display: inline-flex; align-items: center; gap: 39px; padding: 17px 22px; background: var(--blue); color: white; font-size: 12px; border: 1px solid var(--blue); transition: background .2s, transform .2s; }
.button:hover { background: #1d36af; transform: translateY(-2px); }
.button span { font-size: 21px; line-height: .5; }
.hero-footnote { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--muted); font-size: 10px; }
.short-rule { width: 27px; height: 1px; background: #989d8d; }
.orbit-art { aspect-ratio: 1; position: relative; width: 100%; max-width: 535px; justify-self: end; overflow: hidden; background: radial-gradient(ellipse at center, #e8ebdb 0, #eef0e4 45%, transparent 72%); }
.art-grid { position: absolute; inset: 7%; background-image: linear-gradient(#9fa68e18 1px, transparent 1px), linear-gradient(90deg, #9fa68e18 1px, transparent 1px); background-size: 35px 35px; border-radius: 50%; mask-image: radial-gradient(circle, black 35%, transparent 70%); }
.art-coordinate { position: absolute; font: 8px/1.4 monospace; letter-spacing: 1.6px; color: #707866; }
.coordinate-top { top: 3%; left: 8%; }
.coordinate-bottom { bottom: 3%; right: 4%; }
.orbit-system { position: absolute; inset: 7%; animation: arrive 1.4s ease-out both; }
.orbit { position: absolute; width: 85%; height: 51%; top: 24.5%; left: 7.5%; border: 1px solid #7a8f5e; border-radius: 50%; }
.orbit-one { transform: rotate(-38deg); }
.orbit-two { transform: rotate(30deg); border-color: #405ae2; }
.orbit-three { transform: rotate(90deg); border-color: #909d80; }
.orbit-core { position: absolute; inset: 0; display: grid; place-items: center; font: italic clamp(125px, 18vw, 260px)/1 var(--serif); color: var(--blue); padding-bottom: 24px; text-shadow: 8px 10px 30px #294be819; }
.orbit-point { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--paper); }
.point-one { top: 23%; left: 22%; }
.point-two { right: 12%; bottom: 29%; width: 8px; height: 8px; background: #728351; }
.point-three { left: 41%; bottom: 10%; width: 7px; height: 7px; }
.art-plus { position: absolute; font: 20px monospace; color: #7c8470; }
.plus-one { top: 12%; right: 8%; }.plus-two { bottom: 14%; left: 3%; }
.art-caption { position: absolute; bottom: 12%; right: 0; font: italic 15px/1.3 var(--serif); color: #51594a; transform: rotate(-7deg); }
.caption-arrow { position: absolute; left: -31px; top: -18px; font-size: 33px; }
.interlude { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; color: var(--muted); font-size: 11px; }
.interlude-star { color: var(--blue); font-size: 22px; }
h2 { font-weight: 400; font-size: clamp(29px, 3vw, 45px); line-height: 1.15; letter-spacing: -.05em; margin: 0; }
.about { margin: 24px 0 80px; padding: 60px; background: #e7eadd; display: grid; grid-template-columns: 1fr 1.8fr; gap: 35px; }
.about-label .eyebrow { color: #5e6851; }
.about-symbol { display: block; color: #7f8b67; font-size: 100px; line-height: 1; margin-top: 65px; }
.about-copy h2 { font-size: clamp(34px, 3.7vw, 54px); margin-bottom: 28px; }
.about-copy p { color: #5e6558; font-size: 13px; line-height: 1.9; max-width: 425px; }
.about-signature { display: inline-block; font: italic 17px var(--serif); margin-top: 18px; color: var(--blue); }
.about-signature span { margin-left: 15px; }
.site-footer { border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 28px 0 35px; gap: 25px; }
.site-footer .wordmark { font-size: 21px; }.site-footer p { color: var(--muted); font-size: 10px; }.back-top { font-size: 10px; }.back-top span { margin-left: 10px; }
@keyframes arrive { from { opacity: 0; transform: rotate(-12deg) scale(.92); } to { opacity: 1; transform: rotate(0) scale(1); } }
@media (min-width: 1600px) { h1 { font-size: 118px; } }
@media (max-width: 1000px) {
  .header-note { display: none; }
  .hero { gap: 10px; min-height: 580px; padding-top: 60px; }
  .hero-description { font-size: 14px; max-width: 310px; }
  .art-caption { font-size: 12px; }
  .about { padding: 42px; }
}
@media (max-width: 700px) {
  .page-shell { padding: 0 6%; }
  .site-header { min-height: 86px; gap: 15px; }.wordmark { font-size: 22px; }.brand-symbol { font-size: 33px; }
  .site-header nav { gap: 16px; font-size: 11px; }
  .hero { grid-template-columns: 1fr; padding: 48px 0 30px; gap: 30px; }
  h1 { font-size: clamp(52px, 12.7vw, 87px); }
  .eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .hero-description { max-width: 350px; }.hero-footnote { margin-top: 23px; }
  .orbit-art { width: min(100%, 380px); justify-self: center; }.orbit-core { font-size: 190px; }
  .interlude { justify-content: center; font-size: 10px; padding: 17px 0; }.interlude span:nth-last-child(-n+2) { display: none; }
  h2 { font-size: 31px; }
  .about { grid-template-columns: 1fr; margin-bottom: 45px; padding: 30px 25px; gap: 20px; }.about-symbol { display: none; }.about-label .eyebrow { margin: 0; }
  .about-copy h2 { font-size: 38px; }.site-footer { flex-wrap: wrap; gap: 16px; }.site-footer p { order: 3; flex-basis: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }