:root {
  --paper: #f6efe3;
  --card: #fbf6ec;
  --ink: #1c1a17;
  --accent: #b8452b;
}

html, body { margin: 0; min-height: 100%; background: var(--paper); }
a { color: inherit; }
a:hover { color: inherit; }

@keyframes ea-spin { to { transform: rotate(360deg); } }
@keyframes ea-spin-rev { to { transform: rotate(-360deg); } }
@keyframes ea-float {
  0%, 100% { transform: rotate(0deg) translateY(-6px); }
  50% { transform: rotate(0deg) translateY(-12px); }
}

.page {
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: 'EB Garamond', Georgia, serif;
  display: flex;
  flex-direction: column;
}

.grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(28,26,23,.14) 0.6px, transparent 0.6px);
  background-size: 5px 5px;
  opacity: .5;
  pointer-events: none;
}

.ring { position: absolute; border-radius: 50%; pointer-events: none; }
.ring-1 { left: -12vmin; top: -18vmin; width: 140vmin; height: 140vmin; border: 1px solid rgba(28,26,23,.22); animation: ea-spin 300s linear infinite; }
.ring-2 { left: -2vmin; top: -6vmin; width: 115vmin; height: 115vmin; border: 1px dashed rgba(28,26,23,.22); animation: ea-spin-rev 210s linear infinite; }
.ring-3 { left: 14vmin; top: 18vmin; width: 68vmin; height: 68vmin; border: 1px solid rgba(28,26,23,.18); animation: ea-spin 135s linear infinite; }

.line { position: absolute; left: 34%; top: -30%; width: 1px; height: 160%; background: rgba(28,26,23,.16); pointer-events: none; }
.line-1 { transform: rotate(32deg); }
.line-2 { transform: rotate(-58deg); }

.dot { position: absolute; background: var(--ink); border-radius: 50%; }

.masthead {
  position: relative;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4.7vw, 56px) 0;
  font-size: clamp(11px, .9vw, 12px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(28,26,23,.7);
}

.hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 64px);
  padding: clamp(32px, 6vh, 72px) clamp(28px, 6vw, 72px) clamp(48px, 8vh, 96px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.title {
  flex: 1 1 320px;
  margin: 0;
  font-family: Federo, serif;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  line-height: .92;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.card {
  position: relative;
  flex: none;
  width: clamp(220px, 24vw, 300px);
  aspect-ratio: 3 / 5;
  margin-inline: auto;
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink);
  box-shadow: 0 1px 0 var(--ink), 0 30px 60px -30px rgba(28,26,23,.45);
  transform: rotate(4deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  container-type: inline-size;
}
.card:hover, .card:focus-visible {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 1px 0 var(--ink), 0 50px 80px -30px rgba(28,26,23,.5);
  animation: ea-float 3s ease-in-out .5s infinite;
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.card-border-outer { position: absolute; inset: 4%; border: 1px solid var(--ink); }
.card-border-inner { position: absolute; inset: 6%; border: 3px double var(--ink); }
.card-numeral {
  position: absolute; top: 7%; left: 0; right: 0;
  text-align: center;
  font-family: Federo, serif;
  font-size: 7.3cqw;
  letter-spacing: .2em;
}
.card-star {
  position: absolute; top: 22%; left: 50%;
  transform: translateX(-50%);
  font-size: 50cqw;
  line-height: 1;
  color: var(--accent);
}
.card-name {
  position: absolute; bottom: 13%; left: 0; right: 0;
  text-align: center;
  font-family: Federo, serif;
  font-size: 8.7cqw;
  letter-spacing: .14em;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}