/* Neoarcana — "The Reading Room"
   One stylesheet, no build step. Tokens up top; everything reads from them. */

:root {
  --bone: #faf8f4;
  --ink: #191714;
  --ink-mid: #57524a;
  --oxblood: #7a2e2a;
  --hairline: #e3ded4;
  --wash: #f2efe7;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
}

* { margin: 0; box-sizing: border-box; }
body { background: var(--bone); color: var(--ink); font-family: var(--serif); line-height: 1.65; }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 28px; }
a { color: inherit; }

/* ---------- masthead & footer ---------- */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--ink);
  font-family: var(--sans); font-size: 13px; letter-spacing: .08em;
}
.masthead .brand { font-weight: 600; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.masthead a:not(.brand) { color: var(--ink-mid); text-decoration: none; }
.masthead a:hover { color: var(--oxblood); }

footer {
  border-top: 1px solid var(--ink); margin-top: 110px; padding: 24px 0 48px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 12px; color: var(--ink-mid);
}
footer a { color: inherit; }

/* ---------- hero ---------- */
.hero { padding: 90px 0 70px; }
.hero-small { padding: 70px 0 40px; }
.kicker {
  font-family: var(--sans); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--oxblood); margin-bottom: 22px;
}
h1 { font-size: clamp(40px, 7.5vw, 76px); line-height: 1.04; font-weight: 400; letter-spacing: -.015em; max-width: 16ch; }
.standfirst { margin-top: 28px; max-width: 52ch; font-size: 19px; color: var(--ink-mid); }
.standfirst a { color: var(--oxblood); }

/* ---------- spread index ---------- */
.index { border-top: 1px solid var(--ink); margin-bottom: 40px; }
.row {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 22px;
  padding: 26px 4px; border-bottom: 1px solid var(--hairline);
  text-decoration: none; transition: background .2s;
}
.row:hover { background: var(--wash); }
.row:hover .go { transform: translateX(6px); color: var(--oxblood); }
.no { font-family: var(--sans); font-size: 13px; color: var(--ink-mid); }
.row h3 { font-size: 26px; font-weight: 400; display: inline; }
.row .desc { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); margin-left: 14px; }
.go { font-size: 20px; transition: transform .25s, color .25s; }

/* ---------- ask form ---------- */
.ask { border-top: 1px solid var(--ink); padding-top: 34px; max-width: 640px; }
.ask label { display: block; }
.ask input[type="text"] {
  width: 100%; margin-top: 14px; padding: 14px 2px;
  font-family: var(--serif); font-size: 24px; font-style: italic;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none;
}
.ask input[type="text"]:focus { border-bottom-color: var(--oxblood); }
.ask input::placeholder { color: #b5afa2; }
.ask-actions { margin-top: 30px; display: flex; align-items: center; gap: 26px; }
button {
  font-family: var(--sans); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--ink); color: var(--bone); border: 1px solid var(--ink);
  padding: 14px 30px; cursor: pointer; transition: background .2s, color .2s;
}
button:hover { background: var(--oxblood); border-color: var(--oxblood); }
.quiet { font-family: var(--sans); font-size: 13px; color: var(--ink-mid); text-decoration-color: var(--hairline); }
.quiet:hover { color: var(--oxblood); }

/* ---------- positions list ---------- */
.positions { margin-top: 80px; }
.pos-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px;
  padding: 18px 4px; border-bottom: 1px solid var(--hairline);
}
.pos-row p { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); max-width: 62ch; }

/* ---------- reading ---------- */
.reading { padding-top: 60px; }
.reading-kicker {
  font-family: var(--sans); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--oxblood); margin-bottom: 14px;
}
.question { font-size: clamp(26px, 4vw, 38px); font-style: italic; max-width: 28ch; line-height: 1.25; margin-bottom: 58px; }
.quiet-question { color: var(--ink-mid); }

.plates { display: grid; gap: 40px; margin-bottom: 70px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.plates-1 { max-width: 300px; }
.plates-3 { grid-template-columns: repeat(3, 1fr); }
/* One column on phones. Two columns left the three-card spread as 2 + 1,
   which reads as a group and a straggler rather than past/present/future.
   Stacked full width, the order is unambiguous and the art is legible. */
@media (max-width: 640px) {
  .plates, .plates-3 { grid-template-columns: 1fr; gap: 34px; }
  .plate img { max-width: 320px; margin: 0 auto; }
  .plate figcaption { max-width: 320px; margin-left: auto; margin-right: auto; }
}
/* Positioning context for the hover panel. Plates sit in a row, and the
   panel is wider than a plate, so it opens upward and centred; the panel's
   pointer-events:none means the fade-in never steals the hover. */
.plate { position: relative; }
.plate img {
  /* height:auto is required now the tags carry width/height: without it the
     attribute fixes the box and every card renders squashed. */
  display: block; width: 100%; height: auto; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(25,23,20,.2), 0 16px 36px -22px rgba(25,23,20,.45);
  transition: transform .3s ease;
}
.plate:hover img { transform: scale(1.02); }
figcaption { margin-top: 16px; border-top: 1px solid var(--ink); padding-top: 10px; }
.plate-no { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood); }
.plate-name { font-size: 20px; margin-top: 2px; }
.plate-note { font-family: var(--sans); font-size: 13px; color: var(--ink-mid); margin-top: 6px; line-height: 1.5; }
details { margin-top: 8px; }
summary {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-mid); cursor: pointer;
}
summary:hover { color: var(--oxblood); }

/* ---------- celtic cross ---------- */
.cc { display: flex; gap: 64px; justify-content: center; align-items: flex-start; margin-bottom: 26px; }
.cc-cross {
  display: grid; grid-template-columns: repeat(3, 148px); gap: 26px 34px;
  align-items: center; justify-items: center;
}
.cc-above  { grid-column: 2; grid-row: 1; }
.cc-past   { grid-column: 1; grid-row: 2; }
.cc-center { grid-column: 2; grid-row: 2; }
.cc-future { grid-column: 3; grid-row: 2; }
.cc-below  { grid-column: 2; grid-row: 3; }

.cc-card { width: 100%; max-width: 148px; text-align: center; margin: 0; position: relative; }
.cc-card img, .cc-center img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(25,23,20,.2), 0 12px 28px -18px rgba(25,23,20,.45);
}
.cc-pos {
  font-family: var(--sans); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oxblood); margin-top: 8px;
}
.cc-name { font-size: 14px; line-height: 1.3; }

/* The Present, crossed by The Challenge */
.cc-center { position: relative; text-align: center; }
.cc-center .cc-crossing {
  position: absolute; top: 0; left: 0; width: 100%;
  /* same box as the base card, so centers coincide; shrink so it reads as laid across */
  transform: rotate(90deg) scale(.82);
  box-shadow: 0 2px 6px rgba(25,23,20,.35), 0 14px 30px -16px rgba(25,23,20,.55);
}
.cc-center figcaption { position: relative; }
.cc-center .cc-pos + .cc-name { margin-bottom: 6px; }

/* staff sized so its four cards run the same height as the cross's three rows */
.cc-staff { display: flex; flex-direction: column; gap: 20px; width: 112px; flex-shrink: 0; }

.cc-index { margin-bottom: 70px; }
.cc-index .pos-row p { margin-top: 2px; }
.cc-index details { margin-top: 4px; }
.cc-index summary {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-mid); cursor: pointer;
}
.cc-index summary:hover { color: var(--oxblood); }

@media (max-width: 860px) {
  .cc { flex-direction: column; align-items: center; gap: 44px; }
  .cc-cross { grid-template-columns: repeat(3, minmax(88px, 116px)); gap: 18px 22px; }
  .cc-staff {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    width: auto; gap: 18px;
  }
  .cc-staff .cc-card { width: 108px; }
}

/* ---------- correspondences ---------- */
/* Golden Dawn attributions under each card: element, planet, Hebrew letter.
   Set in the same small-caps sans as the position label so it reads as a
   fact about the card rather than ornament. */
.corr {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mid);
}
.corr span { padding-top: 1px; }
/* Inline SVG rather than the Unicode alchemical block (U+1F700), which is
   tofu on most Windows and Android. Sized here, not in the markup. */
svg.el {
  width: 12px; height: 11px; flex: none;
  fill: none; stroke: var(--oxblood); stroke-width: 1.6; stroke-linejoin: round;
}
/* The plates index is a text column, so the line sits left of centre. */
.cc-index .corr { margin-bottom: 2px; }

/* ---------- card tooltips (all spreads) ---------- */
/* The plates index below carries the same text, so this is an aid rather
   than the only route to it: touch devices, which have no hover, lose
   nothing. Keyboard users reach it through tabindex + :focus-within. */
/* Touch devices have no hover, but the cards are focusable, so a tap opens
   the same panel. The hint was previously hidden outright on touch, which
   left the whole feature undiscoverable on a phone: it now says "Tap". */
.hint {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-mid); text-align: center; margin-bottom: 18px;
}
.hint-hover { display: none; }
.hint-tap { display: inline; }
@media (hover: hover) {
  .hint-hover { display: inline; }
  .hint-tap { display: none; }
}

.tip {
  position: absolute;
  z-index: 60;
  width: 250px;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  text-align: left;
  background: var(--bone);
  border: 1px solid var(--ink);
  padding: 12px 14px;
  box-shadow: 0 10px 30px -10px rgba(25, 23, 20, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  pointer-events: none;   /* never steals the hover from the card */
}
.cc-card:hover .tip, .cc-card:focus-within .tip,
.cc-center:hover .tip, .cc-center:focus-within .tip,
.plate:hover .tip, .plate:focus-within .tip {
  opacity: 1;
  visibility: visible;
}
.cc-card:focus-visible, .cc-center:focus-visible, .plate:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 4px; }

/* Nothing sits above the top of the cross, so that one opens downwards. */
.cc-above .tip { bottom: auto; top: calc(100% + 10px); }
/* The staff runs down the right edge; opening leftwards keeps it on screen. */
.cc-staff .tip { left: auto; right: calc(100% + 12px); bottom: auto; top: 0; transform: none; }

.tip-pos {
  font-family: var(--sans); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oxblood);
}
.tip-name { font-size: 15px; line-height: 1.3; margin-bottom: 4px; }
.tip-meaning { font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.tip-desc {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.45;
  color: var(--ink-mid); margin-top: 8px;
  border-top: 1px solid var(--hairline); padding-top: 6px;
}
.tip-meaning + .tip-pos { margin-top: 10px; }

/* Narrow screens: plates are ~140px wide in the two-column layout, so a
   centred 250px panel would hang off the left edge. Let it span the
   plate instead. Touch devices rarely reach it (no hover), but keyboard
   focus can, and it must not land off-screen when it does. */
@media (max-width: 640px) {
  .plate .tip { left: 0; right: 0; width: auto; transform: none; }
}

/* The cross packs ten cards into a narrow screen, so a panel anchored to a
   ~100px card hangs off the edge whichever way it opens: the outer columns
   overflow sideways, the staff's leftward panel overflows once the staff
   wraps. Below 860px, anchor to the viewport instead. Same panel, always
   fully visible, and it overrides the .cc-above / .cc-staff placements
   because it comes after them at equal specificity. */
@media (max-width: 860px) {
  .cc-card .tip, .cc-center .tip {
    position: fixed;
    left: 14px; right: 14px; bottom: 14px;
    top: auto; width: auto; transform: none;
    box-shadow: 0 -6px 30px -8px rgba(25, 23, 20, .35);
  }
}

/* ---------- interpretation essay ---------- */
.essay { max-width: 62ch; }
.essay p { font-size: 18px; }
.essay p + p { margin-top: 16px; }
.essay > p:first-child::first-letter {
  float: left; font-size: 64px; line-height: .85; padding: 6px 10px 0 0; color: var(--oxblood);
}
.faq-essay { border-top: 1px solid var(--ink); padding-top: 10px; }
.faq-essay h2 { font-size: 24px; font-weight: 400; margin: 44px 0 10px; }
.faq-essay p { color: var(--ink-mid); font-size: 17px; }
.pending { color: var(--ink-mid); font-style: italic; }
.ellip::after { content: ""; animation: ellip 1.6s steps(4) infinite; }
@keyframes ellip { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.again { margin-top: 60px; display: flex; gap: 26px; }