:root {
      --paper: #f4f3ef;
      --ink: #22231f;
      --muted: #77786f;
      --line: #d9d8d0;
      --accent: #a7b79b;
      --serif: Georgia, "Times New Roman", serif;
      --sans: Arial, Helvetica, sans-serif;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    html {
      min-height: 100%;
      background: var(--paper);
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
    }

    .page {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100svh;
      padding: 0 clamp(24px, 7.2vw, 108px);
      overflow: hidden;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 86px;
      border-bottom: 1px solid var(--line);
      animation: appear .8s ease both;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .brand-mark {
      display: grid;
      width: 29px;
      height: 29px;
      place-items: center;
      border: 1px solid var(--ink);
      border-radius: 50%;
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0;
    }

    .edition {
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    main {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
      align-items: center;
      gap: clamp(36px, 7vw, 100px);
      flex: 1;
      padding: clamp(64px, 10vh, 112px) 0;
    }

    .copy {
      position: relative;
      z-index: 1;
      animation: rise .9s .08s ease both;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 29px;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .2em;
      line-height: 1.6;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 30px;
      height: 1px;
      background: var(--muted);
      content: "";
    }

    h1 {
      max-width: 650px;
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(58px, 7.6vw, 108px);
      font-weight: 400;
      letter-spacing: -.065em;
      line-height: .94;
    }

    h1 em {
      color: #777e6b;
      font-weight: 400;
    }

    .description {
      max-width: 380px;
      margin: 30px 0 0;
      color: #67685f;
      font-size: 14px;
      line-height: 1.9;
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 38px;
      padding: 12px 15px;
      border: 1px solid var(--line);
      border-radius: 2px;
      color: #55574e;
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 50%;
      background: #89977a;
      box-shadow: 0 0 0 4px rgb(137 151 122 / 13%);
      animation: breathe 3s ease-in-out infinite;
    }

    .art {
      position: relative;
      display: grid;
      min-height: 400px;
      aspect-ratio: 4 / 4.7;
      max-height: 590px;
      place-items: center;
      animation: appear 1.2s .15s ease both;
    }

    .art::before,
    .art::after {
      position: absolute;
      border: 1px solid #deddd5;
      border-radius: 50%;
      content: "";
    }

    .art::before {
      width: 96%;
      aspect-ratio: 1;
    }

    .art::after {
      width: 72%;
      aspect-ratio: 1;
    }

    .orbit {
      position: absolute;
      z-index: 2;
      width: 84%;
      aspect-ratio: 1;
      border: 1px solid transparent;
      border-top-color: #a9b49e;
      border-radius: 50%;
      animation: rotate 32s linear infinite;
    }

    .orbit::after {
      position: absolute;
      top: 9%;
      left: 8%;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #a9b49e;
      content: "";
    }

    .shape {
      position: relative;
      z-index: 1;
      display: grid;
      width: 53%;
      aspect-ratio: 1;
      place-items: center;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at 35% 25%,
          #e1e5d9 0%,
          #b6c2a9 33%,
          #89977b 68%,
          #737e68 100%);
      box-shadow:
        inset -18px -22px 45px rgb(54 65 47 / 13%),
        0 24px 60px rgb(76 85 67 / 12%);
      animation: float 7s ease-in-out infinite;
    }

    .shape::before {
      position: absolute;
      inset: 13%;
      border: 1px solid rgb(255 255 255 / 40%);
      border-radius: 50%;
      content: "";
    }

    .shape::after {
      position: absolute;
      top: 16%;
      left: 21%;
      width: 25%;
      height: 12%;
      border-radius: 50%;
      background: rgb(255 255 255 / 28%);
      filter: blur(12px);
      content: "";
      transform: rotate(-35deg);
    }

    .cross {
      position: absolute;
      z-index: 3;
      width: 19px;
      height: 19px;
      color: #888b7c;
    }

    .cross::before,
    .cross::after {
      position: absolute;
      top: 50%;
      left: 50%;
      background: currentColor;
      content: "";
      transform: translate(-50%, -50%);
    }

    .cross::before { width: 19px; height: 1px; }
    .cross::after { width: 1px; height: 19px; }

    .cross-one { top: 14%; right: 13%; }
    .cross-two { bottom: 16%; left: 12%; transform: scale(.65); }

    .art-label {
      position: absolute;
      right: 0;
      bottom: 4%;
      color: var(--muted);
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 76px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .08em;
      animation: appear 1s .3s ease both;
    }

    .footer-note {
      line-height: 1.7;
    }

    .footer-mark {
      font-family: var(--serif);
      font-size: 22px;
      color: #898a80;
    }

    @keyframes appear {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes rise {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(-5deg); }
      50% { transform: translateY(-12px) rotate(3deg); }
    }

    @keyframes rotate {
      to { transform: rotate(360deg); }
    }

    @keyframes breathe {
      0%, 100% { opacity: 1; }
      50% { opacity: .45; }
    }

    @media (min-width: 1400px) {
      .page { padding-right: max(108px, calc((100vw - 1260px) / 2)); 
              padding-left: max(108px, calc((100vw - 1260px) / 2)); }
    }

    @media (max-width: 760px) {
      .page { padding: 0 25px; }
      .topbar { min-height: 70px; }
      .edition { font-size: 9px; }
      main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 68px 0 54px;
      }
      h1 { font-size: clamp(60px, 14vw, 92px); }
      .description { margin-top: 24px; }
      .status { margin-top: 28px; }
      .art {
        width: min(100%, 370px);
        min-height: 0;
        margin: 0 auto;
      }
      .art-label { bottom: 1%; }
      footer { min-height: 68px; }
    }

    @media (max-width: 380px) {
      .page { padding: 0 19px; }
      .brand { gap: 8px; font-size: 11px; }
      .edition { max-width: 100px; text-align: right; line-height: 1.6; }
      h1 { font-size: 58px; }
      .art { width: 94%; }
      footer { font-size: 9px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }