*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --dark: #140a10;
  --panel: rgba(20, 10, 16, 0.82);
  --cream: #ecdfe4;
  --accent: #c98ba4;
  --accent-dim: rgba(201, 139, 164, 0.35);
  --gold: var(--accent);   /* reading css from seed references --gold; alias it */
}
html, body { min-height: 100%; background: var(--dark); color: var(--cream); font-family: var(--font-serif); }
a { color: var(--accent); }
.shell { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem; }
h1, h2 { font-weight: 300; }
.tag { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); }
.btn { display: inline-block; background: var(--accent); color: var(--dark); border: none; padding: 0.85rem 2.5rem;
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.btn-secondary { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.field { display: block; width: 100%; margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; background: rgba(255,255,255,0.06);
  border: 1px solid var(--accent-dim); color: var(--cream); font-family: var(--font-sans); font-size: 1rem; }
label { font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(236,223,228,0.7); }
.error { color: #e07070; font-family: var(--font-sans); font-size: 0.8rem; margin: 0.5rem 0; min-height: 1.2em; }
.card-tile { display: block; background: var(--panel); border: 1px solid var(--accent-dim); padding: 1.5rem; margin: 1rem 0; text-decoration: none; color: var(--cream); }

/* Prevent iOS Safari from auto-zooming when a text field is focused.
   Any editable field under 16px triggers the zoom (and it stays zoomed into
   the shuffle). Forcing >=16px on mobile stops it without disabling pinch-zoom. */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px !important; }
}