/* Edition 002: warm paper, dusty rose ink, and a floating orbital sculpture. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #623e47;
  background: #f5e5df;
  font-family: Arial, Helvetica, sans-serif;
}

/* Keep the composition within the viewport while allowing short screens to scroll. */
main {
  min-height: max(760px, 100svh);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 65% 38%, #fff9ef 0%, #f5e5df 48%, #e8c8cc 100%);
}

.top, footer {
  position: absolute;
  left: 3.5vw;
  right: 3.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  z-index: 5;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.top {
  top: 30px;
}

.identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  color: inherit;
  text-decoration: none;
}

/* Links are styled as pills, but keep native link semantics and keyboard behavior. */
.page-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #a77d85;
  border-radius: 30px;
  color: inherit;
  text-decoration: none;
}

.page-link:hover {
  color: #fff9ef;
  background: #623e47;
}

a:focus-visible {
  outline: 2px solid #623e47;
  outline-offset: 5px;
}

/* The artwork sits above the title and slightly right of center. */
.sculpture {
  position: absolute;
  width: min(62vw, 730px);
  aspect-ratio: 1;
  left: 58%;
  top: 40%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #e4a9b14d, transparent 68%);
  filter: blur(25px);
}

/* Multiple soft highlights make the central sphere resemble a rose-colored pearl. */
.pearl {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #fffdf4 0%, #fbe8df 22%, #dfb4bb 55%, #a97588 82%, #714e63 100%);
  box-shadow: inset -12px -16px 24px #88576b26, 18px 35px 50px #9c657b20;
  animation: float 10s ease-in-out infinite;
}

.ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: revolve 70s linear infinite;
}

.satellite {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 25%;
  right: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #fffcf2, #b57888);
  box-shadow: 6px 8px 14px #80546320;
}

/* The serif name and small italic caption create an editorial, print-like layout. */
.title-block {
  position: absolute;
  left: 7%;
  top: 55%;
  z-index: 3;
}

.eyebrow {
  margin: 0 0 25px 5px;
  font: 10px monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(80px, 15vw, 220px);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .88;
}

.asterisk {
  display: inline-block;
  margin-left: .2em;
  font-size: .24em;
  vertical-align: top;
  color: #a26b7b;
}

.subtitle {
  margin: 28px 0 0 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 28px);
}

/* This faint number labels the visual edition, not a software version counter. */
.large-number {
  position: absolute;
  right: 4%;
  bottom: 12%;
  font: italic 120px Georgia, serif;
  letter-spacing: -.08em;
  color: #623e471f;
}

footer {
  bottom: 28px;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .07;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

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

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

/* Recompose, rather than simply shrink, the design on phones. */
@media (max-width: 650px) {
  main { min-height: max(720px, 100svh); }
  .top, footer { left: 24px; right: 24px; font-size: 9px; }
  .edition, .footer-middle { display: none; }
  .top-note { max-width: 80px; text-align: right; line-height: 1.6; }
  .sculpture { width: 115vw; left: 53%; top: 37%; }
  .title-block { left: 7%; top: 62%; }
  h1 { font-size: 18vw; }
  .eyebrow { font-size: 8px; margin-bottom: 22px; }
  .subtitle { margin-top: 22px; }
  .large-number { font-size: 80px; bottom: 10%; }
}

/* Preserve the still composition for visitors who request less motion. */
@media (prefers-reduced-motion: reduce) {
  .ribbon, .pearl { animation: none; }
}