:root {
  color-scheme: dark;
  --ink: #120f0c;
  --ink-raised: #1d1813;
  --brown: #31261d;
  --parchment: #f1e3c4;
  --parchment-soft: #d8c8a7;
  --gold: #bd9a60;
  --gold-dim: #80673e;
  --teal: #73c9ba;
  --teal-bright: #b1f3df;
  --line: rgba(205, 170, 107, .36);
  --content-width: 680px;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  color: var(--parchment);
  background:
    radial-gradient(circle at 50% 15%, rgba(135, 99, 47, .11), transparent 34rem),
    var(--ink);
  font-family: Georgia, "Noto Serif SC", "Songti SC", SimSun, serif;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #f6d88d; outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: .75rem; left: .75rem; padding: .7rem 1rem; transform: translateY(-160%); color: var(--ink); background: var(--parchment); }
.skip-link:focus { transform: translateY(0); }

.home-shell { width: min(100% - 40px, var(--content-width)); min-height: 100svh; margin: 0 auto; padding: max(5rem, calc(env(safe-area-inset-top) + 3rem)) 0 max(3rem, calc(env(safe-area-inset-bottom) + 2rem)); }
.eyebrow { margin: 0 0 1rem; color: var(--gold); font-family: Arial, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(2.4rem, 12vw, 4.2rem); font-weight: 500; letter-spacing: .08em; }
.home-intro { max-width: 28rem; margin: 1.6rem 0 3rem; color: var(--parchment-soft); font-size: 1rem; line-height: 1.9; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.archive-link { display: flex; min-height: 9.5rem; flex-direction: column; justify-content: center; padding: 1.25rem; border: 1px solid var(--line); text-decoration: none; background: linear-gradient(140deg, rgba(91, 68, 41, .36), rgba(20, 16, 12, .7)); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.archive-link span, .archive-link small { color: var(--parchment-soft); font-family: Arial, sans-serif; font-size: .72rem; letter-spacing: .08em; }
.archive-link strong { margin: .35rem 0 .7rem; color: var(--gold); font-size: 2rem; font-weight: 400; }
.archive-link:hover { border-color: var(--gold); transform: translateY(-3px); background: rgba(91, 68, 41, .5); }

.result-page { background: var(--ink); }
.hero { position: relative; display: grid; height: 100vh; height: 100dvh; height: var(--viewport-height, 100dvh); min-height: 100vh; min-height: 100dvh; min-height: var(--viewport-height, 100dvh); overflow: hidden; isolation: isolate; align-items: center; background: radial-gradient(circle at 50% 46%, rgba(78, 169, 151, .25), transparent 23rem), linear-gradient(150deg, #061512, #0a211c 48%, #06100f); }
.hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at center, transparent 25%, rgba(2, 9, 8, .44) 100%); }
.hero-sigil { position: absolute; z-index: -2; top: 50%; left: 50%; width: min(82vw, 32rem); aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--teal); filter: drop-shadow(0 0 20px rgba(110, 213, 190, .22)); opacity: .82; }
.hero-sigil svg { display: block; width: 100%; height: 100%; }
.hero-content { position: relative; width: min(100% - 40px, var(--content-width)); margin: 0 auto; padding: max(2rem, env(safe-area-inset-top)) 0 max(2.7rem, calc(env(safe-area-inset-bottom) + 2rem)); text-align: center; text-shadow: 0 2px 18px #000; }
.hero-kicker { margin: 0 0 .85rem; color: var(--teal-bright); font-family: Arial, sans-serif; font-size: .72rem; font-weight: bold; letter-spacing: .22em; }
.archive-number { margin: 0; color: #effff7; font-size: clamp(3rem, 16vw, 5rem); font-weight: 400; line-height: 1; }
.hero-prompt { margin: 1.2rem 0 0; color: #d4eee5; font-size: 1rem; letter-spacing: .04em; }
.scroll-cue { display: grid; width: 2.75rem; height: 2.75rem; margin: 1.45rem auto 0; border: 1px solid rgba(177, 243, 223, .75); border-radius: 50%; place-items: center; color: var(--teal-bright); font-family: Arial, sans-serif; font-size: 1.3rem; animation: float 2s ease-in-out infinite; }
.content { width: min(100% - 40px, var(--content-width)); margin: 0 auto; padding: 4.5rem 0 max(5rem, calc(env(safe-area-inset-bottom) + 3rem)); }
.section-label { margin: 0 0 1rem; color: var(--gold); font-family: Arial, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .2em; }
.card { margin-bottom: 4.5rem; padding: 1.5rem; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(88, 67, 42, .28), rgba(32, 26, 20, .64)); box-shadow: 0 12px 40px rgba(0, 0, 0, .2), inset 0 0 22px rgba(221, 183, 110, .025); }
.card h2, .interpretation h2 { margin: 0; font-size: clamp(1.55rem, 7vw, 2.15rem); font-weight: 500; letter-spacing: .04em; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1rem; margin: 1.8rem 0 0; }
.card-grid div { min-width: 0; text-align: center; }
.tarot-image { display: block; width: 100%; margin: 0 0 .8rem; border: 1px solid rgba(205, 170, 107, .45); aspect-ratio: 5 / 8; object-fit: cover; background: var(--brown); box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.card-grid dt { margin-bottom: .5rem; color: var(--gold); font-family: Arial, sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: .08em; }
.card-grid dd { margin: 0; color: var(--parchment); font-size: clamp(1.08rem, 4.3vw, 1.3rem); line-height: 1.55; }
.interpretation { margin: 0; }
.interpretation h2 { margin-bottom: 2rem; }
.interpretation p { margin: 0 0 2rem; color: #e5d6ba; font-size: max(16px, 1rem); line-height: 1.9; }
.closing { margin: 4.6rem 0 0; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #f4dfae; font-size: clamp(1.5rem, 7vw, 2.3rem); font-weight: 500; line-height: 1.55; text-align: center; letter-spacing: .05em; }
.return-home { display: inline-block; margin-top: 2.8rem; color: var(--gold); font-family: Arial, sans-serif; font-size: .86rem; letter-spacing: .08em; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.not-found { display: grid; width: min(100% - 40px, 42rem); min-height: 100svh; margin: 0 auto; padding: 3rem 0; place-content: center; text-align: center; }
.not-found h1 { font-size: clamp(2rem, 9vw, 3.6rem); }
.not-found p { color: var(--parchment-soft); font-size: 1rem; line-height: 1.9; }
.not-found .return-home { padding: .85rem 1.15rem; border: 1px solid var(--line); text-decoration: none; }
.not-found .return-home:hover { border-color: var(--gold); }
@keyframes float { 50% { transform: translateY(7px); } }
@media (min-width: 600px) { .card { padding: 2rem; } .content { padding-top: 6rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }