/* tags: #demolistings #onepage — Tarot demo (Art Deco style, Oct 18, 2026) */
:root {
  --bg: #14181F; --ink: #F2EBDD; --muted: #C9C1B1; --panel: #1B2029; --line: rgba(201,165,76,.38);
  --primary: #C9A54C; --on-primary: #14181F; --secondary: #C9A54C; --on-secondary: #14181F;
  --font-display: 'Cinzel', Georgia, serif; --font-body: 'Raleway', system-ui, sans-serif;
  --radius: 0; --btn-radius: 0; --card-border: 1px solid var(--line); --field-radius: 0;
  --field-bg: #10141A; --field-border: 1px solid var(--line); --step-radius: 0;
  --btn-line-color: #C9A54C; --logo-spacing: .08em; --head-border: 1px solid var(--line);
}
h1, h2, h3, .logo { letter-spacing: .06em; color: #E9D9A8; }
.btn { background: transparent; color: var(--primary); }
.btn.solid { background: var(--primary); color: var(--on-primary); }
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--primary); margin: 0 auto 20px; }
.ornament::before, .ornament::after { content: ''; width: 72px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.ornament span { width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); }
.hero { padding: clamp(40px, 7vw, 80px) 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,165,76,.16), transparent 60%), repeating-conic-gradient(from 0deg at 50% 0%, rgba(201,165,76,.06) 0 4deg, transparent 4deg 12deg); }
.frame { max-width: 820px; margin: 0 auto; text-align: center; padding: clamp(32px, 6vw, 64px) clamp(18px, 5vw, 56px); border: 3px double var(--primary); outline: 1px solid var(--primary); outline-offset: 8px; background: rgba(20,24,31,.6); }
.frame .lead { margin: 0 auto; }
.frame .actions { justify-content: center; }
.divider { border: 0; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, var(--primary), transparent); }
.card { text-align: center; position: relative; }
.card::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(201,165,76,.18); pointer-events: none; }
.card .suit { display: block; font-size: 26px; color: var(--primary); margin-bottom: 10px; }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.about .portrait { aspect-ratio: 3 / 4; border: 3px double var(--primary); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 14px; background: linear-gradient(160deg, #1d2430, #11151b); padding: 20px; }
@media (max-width: 720px) { .about { grid-template-columns: 1fr; } .about .portrait { max-width: 280px; } }
.newsletter { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.notfound .big { color: var(--primary); }
/* The "photo" spot as a tarot card (The Star) until the reader adds their own photo. */
.tarot-card { aspect-ratio: 5 / 8; max-width: 320px; width: 100%; margin: 0 auto; border: 3px double var(--primary); outline: 1px solid var(--primary); outline-offset: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 22px 16px; font-family: var(--font-display); color: #E9D9A8; letter-spacing: .12em; background: radial-gradient(circle at 50% 46%, rgba(201,165,76,.28), transparent 42%), repeating-conic-gradient(from 0deg at 50% 46%, rgba(201,165,76,.12) 0 3deg, transparent 3deg 15deg), linear-gradient(180deg, #1b2230, #10141a); }
.tarot-card .num { font-size: 18px; }
.tarot-card .star { font-size: clamp(72px, 12vw, 110px); line-height: 1; color: var(--primary); }
.tarot-card .name { font-size: 16px; border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary); padding: 6px 14px; }
.about .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .about .steps { grid-template-columns: 1fr; } }