:root {
  --bg: #12162a;
  --bg-deep: #0c0f1d;
  --paper: #ede7d8;
  --paper-dim: #a39d8c;
  --accent: #7c93b5;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: radial-gradient(120% 120% at 15% 20%, var(--bg) 0%, var(--bg-deep) 70%);
  color: var(--paper);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

body.pave { --accent: #4c8577; }
body.squeezplays { --accent: #d97a3d; }
body.canid { --accent: #b5613a; }

.wrap {
  max-width: 74rem;
  margin: 0 auto;
  padding: 4rem 6vw;
  width: 100%;
}

.mark {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--paper-dim);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 4rem;
  border-bottom: 1px solid transparent;
}
.mark:hover { color: var(--paper); }
.mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.content { max-width: 34rem; }

h1 {
  font-family: var(--serif);
  font-weight: 480;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
  color: var(--paper);
}

.sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--paper-dim);
  margin: 0 0 2.5rem;
  max-width: 32rem;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.status .phase { color: var(--accent); flex-shrink: 0; }
.status .label { font-size: 0.95rem; color: var(--paper); }

.section-label {
  font-size: 0.85rem;
  color: var(--paper-dim);
  margin: 0 0 0.75rem;
}

.links { list-style: none; margin: 0 0 2rem; padding: 0; }
.links li { margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.65rem; }
.links a {
  color: var(--paper);
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.links a:hover, .links a:focus-visible { color: var(--accent); border-color: var(--accent); }
.links a:focus-visible { outline: none; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

hr.rule {
  border: none;
  border-top: 1px solid rgba(237, 231, 216, 0.15);
  margin: 2.5rem 0;
  max-width: 32rem;
}

@media (prefers-reduced-motion: no-preference) {
  .phase-draw {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: draw 1.1s ease-out 0.2s forwards;
  }
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}