:root { --charcoal: #242620; --cream: #ebe6dc; --red: #d64b36; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cream); color: var(--charcoal); font-family: "Manrope", sans-serif; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); }
main { min-height: 100vh; padding: 34px 5vw; display: grid; grid-template-rows: auto 1fr auto; }
header, footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; }
.domain { font-weight: 600; }
.edition { color: #77776f; }
section { align-self: center; position: relative; padding: 9vh 8vw; }
.kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin: 0 0 26px; }
h1 { position: relative; z-index: 1; font-size: clamp(50px, 8.4vw, 132px); font-weight: 500; line-height: .92; letter-spacing: -.065em; margin: 0; max-width: 1200px; }
h1 em { font-family: "Playfair Display", serif; font-weight: 500; color: var(--red); }
.note { margin: 38px 0 0 50%; color: #6c6c64; font-size: 14px; line-height: 1.7; max-width: 310px; }
.orbit { position: absolute; width: min(36vw, 500px); aspect-ratio: 1; right: 2vw; top: 50%; transform: translateY(-50%); border: 1px solid rgba(36,38,32,.15); border-radius: 50%; }
.orbit span { position: absolute; inset: 13%; border: 1px solid rgba(36,38,32,.11); border-radius: 50%; }
.orbit span:nth-child(2) { inset: 31%; }
.orbit i { position: absolute; top: 7%; left: 28%; width: 12px; height: 12px; background: var(--red); border-radius: 50%; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
footer { border-top: 1px solid rgba(36,38,32,.2); padding-top: 22px; color: #77776f; }
@media (max-width: 700px) {
  main { padding: 24px 20px; }
  section { padding: 8vh 0; }
  h1 { font-size: clamp(48px, 16vw, 78px); }
  .note { margin-left: 0; }
  .orbit { width: 75vw; right: -35vw; opacity: .65; }
}