@charset "UTF-8";
:root {
  --paper:#f6f3ed;
  --ink:#293c35;
  --muted:#70776c;
  --line:#dedfd4;
  --gold:#a18550;
  --green:#304d40;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.75;
  word-break:keep-all;
}
a {
  color:inherit;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
button,textarea {
  font:inherit;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,a:focus-visible,textarea:focus-visible {
  outline:3px solid #aa7b39;
  outline-offset:5px;
}
[hidden] {
  display:none!important;
}
.skip-link {
  position:absolute;
  left:20px;
  top:-100px;
  background:white;
  padding:10px;
  z-index:2;
}
.skip-link:focus {
  top:10px;
}
.site-header {
  max-width:1160px;
  margin:auto;
  padding:27px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.brand {
  font-family:Georgia,"Batang",serif;
  font-size:21px;
  font-weight:bold;
  letter-spacing:-.5px;
}
.brand span {
  color:var(--gold);
  margin-right:7px;
}
.about-link {
  font-size:13px;
}
.about-link span {
  margin-left:15px;
}
main {
  max-width:1060px;
  margin:auto;
  padding:0 32px;
}
.intro {
  text-align:center;
  padding:57px 0 34px;
}
.eyebrow {
  font-size:11px;
  font-weight:bold;
  letter-spacing:2.5px;
  color:#7b714e;
  margin:0 0 14px;
}
h1,h2 {
  font-family:Georgia,"Batang",serif;
  font-weight:500;
  letter-spacing:-1.5px;
}
h1 {
  font-size:40px;
  margin:0 0 15px;
}
.intro>p:not(.eyebrow) {
  font-size:15px;
  color:var(--muted);
  margin:0;
}
.date-line {
  font-size:12px;
  color:var(--muted);
  margin-top:24px;
}
.date-line span {
  color:var(--gold);
  margin:0 13px;
}
.reading {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:72px;
  align-items:center;
  padding:26px 50px 52px;
}
.card-area {
  text-align:center;
}
.tarot-card {
  width:260px;
  height:398px;
  padding:12px;
  margin:auto;
  border-radius:130px 130px 13px 13px;
  background:#294739;
  box-shadow:0 16px 32px #293c351c;
  color:#dfc99a;
  transition:background .4s;
}
.tarot-card.revealed {
  background:#344f46;
}
.card-inner {
  height:100%;
  border:1px solid #b79f6680;
  border-radius:118px 118px 6px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:27px 15px 23px;
  position:relative;
}
#card-number {
  font:14px Georgia,serif;
  letter-spacing:3px;
}
.card-art {
  position:relative;
  width:180px;
  flex:1;
  display:grid;
  place-items:center;
  transition:transform .6s;
}
.card-art.reversed {
  transform:rotate(180deg);
}
.orbit {
  position:absolute;
  width:153px;
  height:153px;
  border:1px solid #c1ae7270;
  border-radius:50%;
}
.orbit:after {
  content:"";
  position:absolute;
  inset:13px -13px;
  border:1px solid #c1ae7240;
  border-radius:50%;
  transform:rotate(-35deg);
}
.celestial {
  font-family:Georgia,serif;
  font-size:100px;
  line-height:1;
  color:#e6d09c;
  text-shadow:0 0 32px #e6d09c20;
}
.spark {
  position:absolute;
  font-size:23px;
}
.spark-one {
  left:4px;
  top:30px;
}
.spark-two {
  right:0;
  bottom:31px;
  font-size:15px;
}
.card-label {
  display:grid;
  gap:6px;
}
.card-label span:first-child {
  font-family:Georgia,serif;
  font-size:12px;
  letter-spacing:2px;
}
.card-label span:last-child {
  font-size:12px;
  color:#e6dbc2;
}
.card-caption {
  font-size:11px;
  color:var(--muted);
  margin:20px 0 0;
}
.reading-content h2 {
  font-size:34px;
  line-height:1.5;
  margin:0 0 14px;
}
.lead {
  font-size:14px;
  color:var(--muted);
  margin:0 0 25px;
}
#interpretations {
  margin-bottom:25px;
}
article {
  border-top:1px solid var(--line);
  padding:12px 0;
}
article h3 {
  font-size:13px;
  margin:0 0 4px;
}
article p {
  font-size:13px;
  color:#59665b;
  margin:0;
}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
button {
  cursor:pointer;
  border-radius:5px;
  padding:13px 20px;
  font-size:13px;
  transition:background .2s,transform .2s;
}
button:hover {
  transform:translateY(-2px);
}
button:disabled {
  opacity:.6;
  cursor:wait;
}
.primary {
  background:var(--green);
  border:1px solid var(--green);
  color:#fff;
  min-width:190px;
}
.primary:hover {
  background:#223e31;
}
.primary span {
  margin-left:20px;
  color:#ddc48d;
}
.secondary {
  background:transparent;
  color:var(--ink);
  border:1px solid #b9bdb0;
}
.secondary:hover {
  background:#e9e8df;
}
.status {
  font-size:12px;
  color:#57664f;
  min-height:22px;
  margin:12px 0 0;
}
#manual-copy label {
  font-size:13px;
}
textarea {
  width:100%;
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:12px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  resize:vertical;
}
.how-it-works {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:28px 0;
  text-align:center;
}
.how-it-works>div+div {
  border-left:1px solid var(--line);
}
.how-it-works span {
  font:italic 14px Georgia,serif;
  color:var(--gold);
}
.how-it-works h3 {
  font-size:13px;
  font-weight:500;
  margin:8px 0 4px;
}
.how-it-works p {
  font-size:11px;
  color:var(--muted);
  margin:0;
}
.gentle-note {
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin:25px 0 40px;
}
footer {
  border-top:1px solid var(--line);
  text-align:center;
  padding:30px 20px;
  color:var(--muted);
}
footer .brand {
  font-size:17px;
  color:var(--ink);
}
footer p {
  font-size:11px;
  margin:6px 0 15px;
}
footer nav {
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  font-size:11px;
}
footer small {
  display:block;
  font-size:10px;
  margin-top:15px;
  color:var(--muted);
}
.document {
  max-width:760px;
  padding-top:52px;
  padding-bottom:65px;
  min-height:65vh;
}
.document h1 {
  font-size:32px;
}
.document h2 {
  font-family:inherit;
  font-size:18px;
  letter-spacing:0;
  margin-top:30px;
}
.document p,.document li {
  font-size:15px;
  color:#59665b;
}
.document .back {
  display:inline-block;
  margin-top:24px;
  text-decoration:underline;
  font-size:14px;
}
@media(min-width:1400px) {
  .intro {
    padding-top:70px;
  }
  .reading {
    padding-bottom:65px;
  }
}
@media(max-width:760px) {
  .site-header {
    padding:19px 22px;
  }
  main {
    padding:0 22px;
  }
  .intro {
    padding:38px 0 24px;
  }
  h1 {
    font-size:30px;
  }
  .intro>p:not(.eyebrow) {
    font-size:13px;
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.8px;
  }
  .reading {
    grid-template-columns:1fr;
    gap:32px;
    padding:12px 0 35px;
    max-width:440px;
    margin:auto;
  }
  .tarot-card {
    width:228px;
    height:345px;
  }
  .card-inner {
    padding-top:22px;
  }
  .celestial {
    font-size:84px;
  }
  .orbit {
    width:133px;
    height:133px;
  }
  .reading-content h2 {
    font-size:29px;
  }
  .reading-content {
    width:100%;
  }
  .actions button {
    flex:1;
    min-width:0;
  }
  .how-it-works {
    gap:18px;
    grid-template-columns:1fr;
    text-align:left;
    padding:22px;
  }
  .how-it-works>div {
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:baseline;
  }
  .how-it-works>div+div {
    border-left:0;
  }
  .how-it-works h3 {
    margin:0;
  }
  .how-it-works p {
    grid-column:2;
  }
  .document {
    padding-top:35px;
    padding-bottom:40px;
  }
  .document h1 {
    font-size:28px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}

/* Reading guides and the static card reference. */
.top-nav { display:flex; gap:20px; align-items:center; font-size:13px; }
.learning { max-width:900px; }
.learning a:not(.guide-tile):not(.small-link) { text-decoration:underline; text-underline-offset:3px; }
.learning h1 { line-height:1.45; }
.learning h2 { line-height:1.6; }
.learning section { margin:32px 0; }
.learning h3 { font-size:15px; margin:12px 0; }
.learning .article-summary { font-size:17px; }
.learning .article-meta { font-size:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.guide-tile { display:block; border:1px solid var(--line); border-radius:8px; padding:22px; background:#fbf9f4; }
.guide-tile:hover { background:#edeee4; text-decoration:none; }
.guide-tile h2 { font-family:inherit; font-size:17px; font-weight:600; letter-spacing:0; margin:0 0 10px; }
.guide-tile p { font-size:14px; margin:0; color:#59665b; }
.home-guides { padding:20px 0 35px; }
.home-guides>h2 { font-size:27px; margin:0; }
.table-scroll { overflow-x:auto; }
.learning table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; }
.learning caption { text-align:left; font-size:12px; color:var(--muted); padding:10px 0; }
.learning td,.learning th { padding:13px; border:1px solid var(--line); min-width:80px; }
.learning th { background:#e9ede3; }
.worksheet { border:1px solid var(--line); border-radius:8px; padding:10px 24px; background:#fbf9f4; }
.worksheet p { border-bottom:1px solid var(--line); padding-bottom:18px; }
.card-index { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0; }
.card-index a { padding:7px 12px; border:1px solid var(--line); border-radius:4px; font-size:13px; }
.library-card { scroll-margin-top:20px; padding:12px 0 24px; border-top:1px solid var(--line); }
.library-card h2 span { display:block; font:14px Georgia,serif; color:var(--muted); }
.direction-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.direction-grid dt { font-size:13px; font-weight:bold; }
.direction-grid dd { margin:4px 0 16px; font-size:14px; color:#59665b; }
.small-link { font-size:12px; text-decoration:underline; }
@media(max-width:760px) {
  .top-nav { gap:12px; font-size:12px; }
  .site-header .brand { font-size:18px; white-space:nowrap; }
  .guide-grid,.direction-grid { grid-template-columns:1fr; }
  .guide-tile { padding:18px; }
  .learning .article-summary { font-size:15px; }
  .learning h1 { font-size:27px; }
  .home-guides>h2 { font-size:23px; }
}