/* Kalos Agathos Clothing — coming soon
   Palette: porphyry purple ground, imperial gold line. */

:root {
  --ink:        #0b0509;
  --ink-2:      #241026;
  --gold:       #d9b45b;
  --gold-lit:   #f3e2ac;
  --gold-dim:   rgba(217, 180, 91, 0.42);
  --serif:      "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(120% 90% at 50% 12%, var(--ink-2) 0%, #140a16 42%, var(--ink) 100%);
  color: var(--gold);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Faint vignette + parchment grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(100% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.frame {
  min-height: 100%;
  padding: clamp(0.75rem, 2.2vmin, 1.75rem);
}

/* Double hairline border, as on an old plate */
.stage {
  position: relative;
  min-height: calc(100vh - clamp(1.5rem, 4.4vmin, 3.5rem));
  min-height: calc(100dvh - clamp(1.5rem, 4.4vmin, 3.5rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.5vmin, 1.25rem);
  padding: clamp(1.25rem, 3.5vmin, 2.75rem) 1rem;
  border: 1px solid var(--gold-dim);
  outline: 1px solid var(--gold-dim);
  outline-offset: 5px;
}

/* ---------- Wordmark ---------- */

.mark { text-align: center; margin: 0; }

.eyebrow {
  margin: 0 0 0.55em;
  font-size: clamp(0.6rem, 1.35vmin, 0.78rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.wordmark {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.9rem, 6.4vmin, 4.1rem);
  line-height: 1.05;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  text-transform: uppercase;
  color: var(--gold-lit);
  text-shadow: 0 0 26px rgba(217, 180, 91, 0.22);
}

.house {
  margin: 0.5em 0 0;
  font-size: clamp(0.72rem, 1.7vmin, 1rem);
  letter-spacing: 0.75em;
  text-indent: 0.75em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Eagle stage ---------- */

.eagle {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
}

.eagle canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#ink {
  opacity: 1;
  transition: opacity 900ms ease;
  filter: drop-shadow(0 0 9px rgba(217, 180, 91, 0.12));
}

.eagle.is-resetting #ink { opacity: 0; }

/* ---------- Notice ---------- */

.notice { text-align: center; margin: 0; }

.rule {
  margin: 0 0 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  color: var(--gold-dim);
  font-size: 0.7rem;
}

.rule::before,
.rule::after {
  content: "";
  height: 1px;
  width: clamp(2.5rem, 12vmin, 7rem);
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}

.rule::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }

.soon {
  margin: 0;
  font-size: clamp(0.82rem, 2.1vmin, 1.15rem);
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: var(--gold-lit);
}

.greek {
  margin: 0.9em 0 0;
  font-size: clamp(0.78rem, 1.75vmin, 1rem);
  font-style: italic;
  color: var(--gold);
  opacity: 0.85;
}

.greek span { color: var(--gold-dim); font-style: normal; }

.contact {
  margin: 1.1em 0 0;
  font-size: clamp(0.66rem, 1.4vmin, 0.82rem);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
}

.contact a {
  color: var(--gold-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 300ms ease, border-color 300ms ease;
}

.contact a:hover,
.contact a:focus-visible { color: var(--gold-lit); border-bottom-color: var(--gold-dim); }

/* Fade the whole plate in on load */
.mark, .notice { animation: rise 1600ms ease both; }
.notice { animation-delay: 260ms; }

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

@media (prefers-reduced-motion: reduce) {
  .mark, .notice { animation: none; }
  #ink { transition: none; }
}

@media (max-width: 480px) {
  .stage { gap: 0.4rem; }
  .eagle { min-height: 180px; }
}