:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background: #11100e;
  color: #eee7da;
  font-family: Manrope, Arial, sans-serif;
}
.page-shell {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: 28px clamp(24px, 5vw, 76px) 25px;
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 52% 62% at 88% 10%, rgba(136, 102, 58, .28), transparent 72%),
    radial-gradient(ellipse 45% 68% at 8% 100%, rgba(83, 52, 30, .24), transparent 72%),
    #11100e;
}
.page-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(70vw, 870px);
  aspect-ratio: 1;
  border: 1px solid rgba(225, 196, 147, .14);
  border-radius: 50%;
  right: -24vw;
  top: 13%;
  box-shadow: 0 0 0 60px rgba(225, 196, 147, .025), 0 0 0 145px rgba(225, 196, 147, .018);
  animation: drift 13s ease-in-out infinite alternate;
}
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .17; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.masthead, .footer { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.wordmark { color: inherit; text-decoration: none; font: 500 13px/1 "DM Mono", monospace; letter-spacing: .12em; }
.wordmark span { color: #c9a36a; margin: 0 2px; }.wordmark small { font-size: 7px; letter-spacing: .1em; vertical-align: top; }
.edition, .footer { color: rgba(238, 231, 218, .56); font: 400 10px/1.5 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(72px, 11vh, 130px) 0 44px; position: relative; z-index: 2; }
.eyebrow { color: #cfaa73; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .15em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(30px, 7vh, 75px); }
.eyebrow span { width: 31px; height: 1px; background: currentColor; }
h1 { max-width: 1000px; margin: 0; font: 500 clamp(64px, 12vw, 184px)/.8 "Playfair Display", Georgia, serif; letter-spacing: -.07em; }
h1 em { padding-left: clamp(44px, 12vw, 185px); color: #d3b17b; font-weight: 500; }
.hero-detail { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: clamp(48px, 11vh, 140px); max-width: 930px; }
.hero-detail p { color: rgba(238, 231, 218, .67); font: 400 10px/1.8 "DM Mono", monospace; letter-spacing: .08em; }
.orbital-mark { width: 98px; aspect-ratio: 1; border: 1px solid rgba(211, 177, 123, .55); border-radius: 50%; display: grid; place-items: center; position: relative; color: #d3b17b; font: 500 22px/1 "Playfair Display", serif; letter-spacing: -.1em; }
.orbital-mark i { position: absolute; inset: 7px; border: 1px solid rgba(211, 177, 123, .3); border-radius: 46% 54% 48% 52%; transform: rotate(-24deg); animation: orbit 9s linear infinite; }
.footer { border-top: 1px solid rgba(238, 231, 218, .16); padding-top: 17px; }
.footer p { margin: 0; }
@keyframes orbit { to { transform: rotate(336deg); } }
@keyframes drift { to { transform: translate(-24px, 19px) scale(1.03); } }
@media (max-width: 600px) { .edition { display: none; } h1 { font-size: clamp(60px, 18vw, 110px); } h1 em { padding-left: 28px; } .hero-detail { margin-top: 70px; } .orbital-mark { width: 72px; font-size: 17px; } }