.tarot-navigation { border-bottom: 1px solid #bda06c44; }
.tarot-navigation a { padding: .6rem .85rem; color: #dfc28b; border-radius: .4rem; text-decoration: none; }
.tarot-navigation a[aria-current], .tarot-navigation a:hover { background: #dfc28b15; }
.tarot-panel, .tarot-hero { background: #1d2b24; border: 1px solid #bda06c44; border-radius: 1rem; }
.tarot-panel a { color: #dfc28b; text-decoration: none; }
.tarot-panel:has(a:hover) { border-color: #bda06c88; }
.tarot-copy { max-width: 72ch; line-height: 1.85; }
.tarot-emblem { display: grid; place-items: center; height: 10rem; border: 1px solid #bda06c55; border-radius: .6rem; background: radial-gradient(ellipse, #bda06c18, transparent); font-size: 3rem; color: #dfc28b; }
.tarot-spread { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 1rem; background: #1d2b24; border-radius: 1rem; }
.tarot-position { display: grid; place-items: center; min-height: 6rem; border: 1px solid #bda06c88; border-radius: .5rem; color: #dfc28b; text-decoration: none; background: #18231e; }
.tarot-position:hover { background: #2d3b30; }
.tarot-spread-daily { grid-template-columns: 1fr; max-width: 12rem; }
.tarot-spread-celtic { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 5rem); }
.tarot-spread-celtic .tarot-position { min-height: 0; }
.tarot-spread-celtic .position-1 { grid-area: 2 / 2 / 4 / 3; }
.tarot-spread-celtic .position-2 { grid-area: 3 / 2 / 4 / 4; z-index: 1; margin: 0 .3rem 1.5rem; }
.tarot-spread-celtic .position-3 { grid-area: 4 / 2; }
.tarot-spread-celtic .position-4 { grid-area: 2 / 1; }
.tarot-spread-celtic .position-5 { grid-area: 1 / 2; }
.tarot-spread-celtic .position-6 { grid-area: 2 / 4; }
.tarot-spread-celtic .position-7 { grid-area: 4 / 5; }
.tarot-spread-celtic .position-8 { grid-area: 3 / 5; }
.tarot-spread-celtic .position-9 { grid-area: 2 / 5; }
.tarot-spread-celtic .position-10 { grid-area: 1 / 5; }
.tarot-positions li { scroll-margin-top: 2rem; }
.tarot-positions li:target { border-left: 2px solid #dfc28b; padding-left: 1rem; }
.tarot-navigation a:focus-visible, .tarot-position:focus-visible { outline: 2px solid #dfc28b; outline-offset: 3px; }
