@import url("navigation.css");

:root { color-scheme: dark; --ink:#f8efd4; --gold:#f7da78; --violet:#b889ef; --pink:#ff9dcb; }
* { box-sizing: border-box; }
html { min-height:100%; background:#07030e; }
body {
  min-height:100vh; margin:0; color:var(--ink); font-family:Georgia,"Times New Roman",serif;
  background:radial-gradient(circle at 50% 0%,rgba(117,70,162,.3),transparent 46rem),linear-gradient(rgba(5,2,12,.46),rgba(5,2,12,.8)),url("../images/stars 1.gif") repeat;
}
.page { min-height:100vh; padding:clamp(18px,4vw,64px) clamp(12px,3vw,42px); }
.content {
  width:min(1320px,100%); min-height:calc(100vh - 80px); margin:0 auto; padding:clamp(22px,4vw,58px);
  overflow:hidden; display:flex; flex-direction:column; align-items:center; position:relative; isolation:isolate;
  background:linear-gradient(180deg,rgba(12,6,27,.72),rgba(7,3,17,.94)),url("../images/wallhaven-yxy8zk.jpg") center top/cover fixed;
  border:1px solid rgba(247,218,120,.72); border-radius:26px 26px 8px 8px;
  box-shadow:0 0 0 5px rgba(184,137,239,.16),0 22px 70px rgba(0,0,0,.62),inset 0 0 90px rgba(0,0,0,.55);
}
.content::before,.content::after {
  content:"✦  ☾  ✧  ☽  ✦"; width:calc(100% - 36px); position:absolute; left:18px; z-index:-1;
  color:rgba(247,218,120,.45); font-size:clamp(15px,2vw,24px); letter-spacing:clamp(8px,2vw,28px); text-align:center;
}
.content::before { top:12px; }
.content::after { bottom:12px; transform:rotate(180deg); }
.tarot-header { width:min(800px,100%); margin:20px auto 28px; text-align:center; }
.eyebrow { margin:0 0 14px; color:var(--violet); font:700 .74rem/1.3 Verdana,sans-serif; letter-spacing:.28em; text-transform:uppercase; }
.content-title { margin:0; color:var(--gold); font-size:clamp(2.4rem,7vw,5.7rem); font-weight:400; line-height:.95; text-shadow:0 3px 0 #4a255c,0 0 28px rgba(247,218,120,.3); }
.tarot-subtitle { margin:20px 0 0; color:#eadcf8; font-size:clamp(1rem,2vw,1.25rem); font-style:italic; letter-spacing:.04em; }
.intro-box { width:min(760px,100%); margin-bottom:10px; background:rgba(7,3,17,.74); border:1px solid rgba(184,137,239,.72); border-radius:8px; box-shadow:inset 0 0 30px rgba(79,35,111,.22); }
.intro-head { padding:14px 18px; color:var(--gold); cursor:pointer; text-align:center; font:700 .88rem/1.2 Verdana,sans-serif; letter-spacing:.18em; list-style:none; text-transform:uppercase; }
.intro-head::-webkit-details-marker { display:none; }
.intro-head::marker { color:transparent; }
.intro-head::before { content:"☾"; display:inline-block; margin-right:10px; color:var(--pink); transition:transform .2s ease; }
.intro-box[open] .intro-head::before { transform:rotate(90deg); }
.intro-body { padding:4px clamp(18px,4vw,34px) 24px; color:#eee5f6; font:.94rem/1.75 Verdana,sans-serif; text-align:center; }
.resources-button {
  display:inline-block; margin:18px auto 16px; font:700 .9rem/1 Verdana,sans-serif;
}
.home-button {
  display:inline-block; margin:0 auto 34px; padding:11px 24px; color:#4d1534;
  background:linear-gradient(#ffd1e5,#ff9dcb); border:1px solid #fff0f7; border-radius:999px;
  outline:2px solid #b8457a; outline-offset:2px; font:700 .9rem/1 Verdana,sans-serif; text-decoration:none;
  box-shadow:0 5px 0 #762e53,0 8px 20px rgba(0,0,0,.35); transition:transform .15s ease,filter .15s ease;
}
.home-button:hover,.home-button:focus-visible { filter:brightness(1.1); transform:translateY(-2px); }
.content-scroll { width:100%; overflow:visible; }
.major-text,.minor-text { color:var(--gold); font-size:clamp(1.35rem,3vw,2rem); font-weight:400; letter-spacing:.12em; text-align:center; text-transform:uppercase; text-shadow:0 2px 0 #301942; }
.major-text { margin:8px 0 24px; }
.minor-text { margin:42px 0 8px; }
.major-text::before,.major-text::after,.minor-text::before,.minor-text::after { content:" ✦ "; color:var(--violet); }
.suit-text {
  margin:34px 0 4px; padding:12px; color:#eadcf8; text-align:center;
  font-size:clamp(1.05rem,2.3vw,1.45rem); font-style:italic; letter-spacing:.2em; text-transform:uppercase;
  border-top:1px solid rgba(184,137,239,.38); border-bottom:1px solid rgba(184,137,239,.38);
}
.suit-text::before,.suit-text::after { margin:0 .55em; color:var(--pink); }
.suit-cups::before,.suit-cups::after { content:"♕"; }
.suit-wands::before,.suit-wands::after { content:"✦"; }
.suit-swords::before,.suit-swords::after { content:"†"; }
.suit-pentacles::before,.suit-pentacles::after { content:"⛤"; }
.btn-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.8vw,24px); padding-bottom:52px; }
.grid-break { grid-column:1/-1; }
.img-btn { display:block; position:relative; padding:6px; background:linear-gradient(145deg,#d4b66a,#6f3c83 55%,#e5c87b); border-radius:7px; box-shadow:0 10px 22px rgba(0,0,0,.52); transition:transform .2s ease,box-shadow .2s ease; }
.img-btn img { display:block; width:100%; height:auto; border-radius:3px; }
.img-btn::after { content:"✦"; position:absolute; inset:0; display:grid; place-items:center; color:#fff2b8; font-size:2rem; opacity:0; background:radial-gradient(circle,rgba(95,49,127,.18),rgba(4,1,10,.68)); transition:opacity .2s ease; }
.img-btn:hover,.img-btn:focus-visible { z-index:1; transform:translateY(-7px) rotate(-.5deg); box-shadow:0 17px 28px rgba(0,0,0,.68),0 0 20px rgba(184,137,239,.35); }
.img-btn:hover::after,.img-btn:focus-visible::after { opacity:1; }
@media (max-width:900px) { .btn-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:620px) {
  .page { padding:10px; }
  .content { min-height:calc(100vh - 20px); padding:28px 16px 36px; border-radius:18px 18px 6px 6px; background-attachment:scroll; }
  .tarot-header { margin-top:14px; }
  .eyebrow { font-size:.66rem; letter-spacing:.16em; }
  .btn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .minor-text { margin-top:30px; }
  .intro-body { font-size:.84rem; }
}
@media (prefers-reduced-motion:reduce) { .img-btn,.home-button,.resources-button,.intro-head::before { transition:none; } }

/* Studybook overview links: suit headings remain plain text. */
.arcana-button{display:block;padding:16px 10px;border:1px solid var(--violet);border-radius:10px;background:linear-gradient(135deg,#241233,#10091f);text-decoration:none;box-shadow:0 4px 0 #452955}
.arcana-button:hover{background:#342047;border-color:var(--gold)}
.overview-button{display:block;width:fit-content;max-width:100%;margin:16px auto 8px;padding:12px 24px;color:#271237;background:linear-gradient(120deg,#f7da78,#fff1bd,#e5be67);border:3px double #5c3969;border-radius:4px 24px;text-align:center;text-decoration:none;font:italic 1.25rem/1.3 Georgia,serif;box-shadow:0 0 24px #f7da7826}
.overview-button:hover{filter:brightness(1.08)}
.arcana-button:focus-visible,.overview-button:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
.study-notes{width:min(760px,100%);margin:24px auto;padding:20px;border:1px solid #b889ef80;border-radius:8px;background:#10091fcc}
.study-notes h2{margin:0 0 16px;color:var(--gold);font-weight:400}
.notes-space{min-height:100px;line-height:1.7;overflow-wrap:anywhere}

.archive-nav{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;margin:22px auto 10px}
.archive-nav .home-button,.archive-nav .resources-button{margin:0;text-align:center;line-height:1.3}
.archive-nav+.overview-button{margin:12px auto 32px}
@media(max-width:620px){.archive-nav{gap:12px}.archive-nav .home-button,.archive-nav .resources-button{flex:1;min-width:0;padding:10px 8px;font-size:.76rem}}