/* Zora v2 — layered scenic composition over warm ivory. All values come from
   theme.css tokens; one scene is ever visible and [hidden] always wins. */

[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1, h2, h3, .brand-name {
  font-family: var(--serif);
  font-weight: var(--fw-semibold);
  color: var(--plum-deep);
  line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-h1); margin: var(--sp-2) 0 var(--sp-3); }
h2 { font-size: var(--fs-h2); margin: var(--sp-3) 0 var(--sp-2); }

/* Three independent art layers, anchored to the scenic stage, never blocking
   controls. The center stays exposed parchment for the live content. */
.scenic-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scenic-stage img { position: absolute; }
.art-underlay {
  left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 2200px; height: auto;
  object-fit: contain; object-position: bottom center;
  /* Continuous drawing: fade the print's hard top edge into the page
     parchment while the illustrated bottom stays fully opaque. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 48%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 48%);
}
.art-left { left: 0; bottom: 0; height: min(78vh, 900px); width: auto; opacity: 0.95; }
.art-right { right: 0; bottom: 0; height: min(70vh, 820px); width: auto; opacity: 0.95; }

.site-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--gutter);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: var(--hairline);
  backdrop-filter: blur(3px);
}
.brand-name { font-size: var(--fs-brand); letter-spacing: 0.05em; }
.header-side { display: flex; align-items: center; gap: var(--sp-3); }

main {
  position: relative; z-index: 1; flex: 1; width: 100%;
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
}
/* Surfaces: the landing scene stays open — transparent, centered, with room
   below so the landscape print reads through. Text-bearing scenes use a local
   parchment panel for legibility; never one giant panel over all the art. */
.scene-surface {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
}
.step:not(#step-intention) > .scene-surface {
  background: color-mix(in srgb, var(--paper-card) 92%, transparent);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(80, 58, 72, 0.08);
  max-width: 60rem;
  margin: 0 auto;
}
#step-intention { text-align: center; padding-bottom: min(34vh, 380px); }
#step-intention .lead { margin-left: auto; margin-right: auto; }
#step-intention .progress-line { justify-content: center; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: var(--fs-eyebrow); color: var(--ochre); margin: 0 0 var(--sp-2);
}
.progress-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.progress-line .dot {
  width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--ochre); display: inline-block;
}
.progress-line .dot.dim { background: var(--line); }
.progress-line .dot.done { background: var(--sage); }
.lead { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 46rem; margin: 0 0 var(--sp-3); }
.hint { color: var(--ink-soft); font-size: var(--fs-small); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Intention selectors: engraved sprite atlas tiles (no Unicode glyphs). */
.intentions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2);
}
.intention {
  text-align: center; cursor: pointer;
  border: var(--hairline); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper-card) 80%, transparent);
  padding: var(--sp-4) var(--sp-3); font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  min-width: 0;
}
.intention .title, .intention .hint { max-width: 22rem; }
.intention:hover { border-color: var(--ochre); }
.intention:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.intention .icon-sprite {
  width: var(--icon-size); height: var(--icon-size);
  background-image: var(--icon-atlas);
  background-size: 300% 200%; background-repeat: no-repeat;
  display: inline-block;
}
.icon-hearts { background-position: 0 0; }
.icon-sun { background-position: 50% 0; }
.icon-moon { background-position: 100% 0; }
.icon-cottage { background-position: 0 100%; }
.icon-leaves { background-position: 50% 100%; }
.icon-stars { background-position: 100% 100%; }
.intention .title { font-family: var(--serif); color: var(--plum-deep); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.intention .hint { margin: 0; }

textarea, input[type="email"], input[type="text"] {
  font: inherit; color: inherit; border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); background: #fffdf6; width: 100%;
}
textarea:focus, input:focus { outline: var(--focus-ring); }
.field-error { color: var(--error); font-size: var(--fs-small); margin: var(--sp-1) 0; }
.plain-link {
  background: none; border: none; color: var(--plum);
  text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--fs-small);
  padding: 0;
}
.plain-link:focus-visible, .ghost-button:focus-visible, .primary-button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.question-recap { font-size: var(--fs-lead); }
.question-recap em { font-family: var(--serif); color: var(--plum-deep); }

/* Spread panels: schematic card-back diagrams, extensible catalog. */
.spreads { border: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-3); }
.spread-option {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: var(--sp-4); align-items: center; text-align: left; cursor: pointer;
  border: var(--hairline); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper-card) 80%, transparent);
  padding: var(--sp-4); font: inherit; color: inherit; min-width: 0;
}
.spread-option[aria-checked="true"] { border-color: var(--plum-line); box-shadow: 0 0 0 2px rgba(109, 74, 92, 0.25); background: var(--paper-card); }
.spread-diagram { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.mini-card {
  width: 34px; height: 60px; border-radius: 3px;
  border: 1px solid var(--ochre-border);
  background: linear-gradient(135deg, var(--plum) 0%, var(--plum-deep) 55%, #46313d 100%);
  box-shadow: inset 0 0 0 2px rgba(247, 240, 226, 0.25);
}
/* Celtic schematic: six-card cross with the challenge laid across the
   present, plus the four-card staff. */
.celtic-mini { display: flex; align-items: center; }
.mini-cross { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 60px); gap: 2px; }
.mini-pair { position: relative; display: inline-block; width: 34px; height: 60px; }
.mini-pair .mini-card { position: absolute; left: 0; top: 0; }
.mini-pair .mini-crossing {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.mini-staff { display: grid; grid-template-rows: repeat(4, 60px); gap: 2px; margin-left: 12px; }
.spread-option .spread-name { font-family: var(--serif); color: var(--plum-deep); font-size: var(--fs-h3); display: block; }
.spread-option .spread-purpose { color: var(--ink-soft); font-size: var(--fs-small); display: block; margin-top: var(--sp-1); }
.spread-option .spread-count { color: var(--ochre); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.14em; display: block; margin-bottom: var(--sp-1); }

.step-actions { margin: var(--sp-4) 0 var(--sp-2); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.primary-button, a.primary-button {
  display: inline-block; background: var(--ochre); color: #fffdf6;
  border: 1px solid var(--ochre-border);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-5); font: inherit; font-size: var(--fs-body);
  cursor: pointer; text-decoration: none;
}
.primary-button:disabled { opacity: 0.5; cursor: not-allowed; }
.ghost-button {
  background: none; border: var(--hairline); color: var(--plum-deep);
  border-radius: var(--radius-pill); padding: var(--sp-2) var(--sp-4);
  font: inherit; font-size: var(--fs-body); cursor: pointer;
}

/* Card staging: natural ratio, contain only, never cropped. */
.card-stage { margin: var(--sp-4) 0; display: flex; justify-content: center; }
.card-slot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; min-width: 0; }
.card-slot .slot-label { font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.tarot-frame {
  width: var(--card-w); border: var(--hairline); border-radius: var(--radius-sm);
  padding: 4px; background: #fffdf8;
  perspective: 600px;
}
.tarot-frame .flip-inner { position: relative; transition: transform 520ms ease; transform-style: preserve-3d; }
.card-slot.turned .flip-inner { transform: rotateY(180deg); }
.tarot-face { backface-visibility: hidden; }
.tarot-face img { display: block; width: 100%; height: auto; object-fit: contain; }
.tarot-face.back { position: absolute; inset: 0; }
.tarot-face.back img { height: 100%; }
.tarot-face.front { transform: rotateY(180deg); }
.tarot-face img.reversed { transform: rotate(180deg); }
.layout-one { grid-template-columns: auto; }
.layout-one .tarot-frame { width: var(--card-w-single); }
.card-stage .layout { display: grid; gap: var(--card-gap); justify-items: center; }
.layout-three { grid-template-columns: repeat(3, auto); }
.layout-celtic { grid-template-columns: auto auto; column-gap: calc(var(--card-gap) * 1.6); }
.layout-celtic .tarot-frame { width: var(--card-w-celtic); }
.layout-celtic .slot-challenge .tarot-frame { width: calc(var(--card-w-celtic) * 0.7); }
.celtic-cross-part { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(3, auto); gap: var(--sp-1); }
.slot-foundation { grid-column: 2; grid-row: 3; }
.slot-present { grid-column: 2; grid-row: 2; }
.slot-challenge { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; z-index: 2; }
.slot-challenge .tarot-frame { width: calc(var(--card-w) * 0.7); transform: rotate(90deg); }
.slot-recent-past { grid-column: 1; grid-row: 2; }
.slot-possible-outcome { grid-column: 2; grid-row: 1; }
.slot-near-future { grid-column: 3; grid-row: 2; }
.celtic-staff-part { display: grid; grid-template-rows: repeat(4, auto); gap: var(--sp-1); align-content: center; }
.all-cards { border-top: var(--hairline); margin-top: var(--sp-4); padding-top: var(--sp-3); max-width: 46rem; }
.all-cards summary { cursor: pointer; color: var(--plum); font-family: var(--serif); font-size: var(--fs-h3); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; }
.card .frame { border: var(--hairline); border-radius: var(--radius-sm); padding: 4px; background: #fffdf8; width: 100%; }
.card img { display: block; width: 100%; height: auto; object-fit: contain; margin: 0 auto; }
.card img.reversed { transform: rotate(180deg); }
.card .name { font-family: var(--serif); color: var(--plum-deep); font-size: var(--fs-small); }
.card .position { color: var(--ink-soft); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; }
.card .orientation-badge { font-size: var(--fs-eyebrow); color: var(--ink-soft); letter-spacing: 0.06em; }

.invitation {
  border: var(--hairline); border-top: 3px solid var(--ochre-soft);
  border-radius: var(--radius-md); background: var(--paper-card);
  padding: var(--sp-4); max-width: 42rem; margin: var(--sp-4) auto var(--sp-2);
}
.sending-note { font-family: var(--serif); font-size: var(--fs-h2); color: var(--plum-deep); text-align: center; margin: var(--sp-5) 0 var(--sp-2); }
.result-question { font-size: var(--fs-lead); }
.result-question em { font-family: var(--serif); color: var(--plum-deep); }
.reading-text {
  font-family: var(--serif); font-size: var(--fs-lead); line-height: var(--lh-body);
  max-width: 44rem; white-space: pre-wrap;
  border-top: var(--hairline); padding-top: var(--sp-4);
}

dialog {
  border: var(--hairline); border-radius: var(--radius-lg);
  background: var(--paper-card); color: var(--ink);
  padding: var(--sp-5); max-width: min(92vw, 560px); width: min(92vw, 560px);
  max-height: min(86vh, 720px); overflow: auto;
}
dialog::backdrop { background: var(--backdrop); }
dialog .dialog-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.dialog-examples { margin: var(--sp-1) 0; }
#dialog-examples ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
#dialog-examples button.example {
  text-align: left; border: 1px dashed var(--ochre-soft);
  background: color-mix(in srgb, var(--paper-card) 70%, transparent);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  cursor: pointer; font: inherit; color: inherit;
}
dialog img { display: block; width: 100%; height: auto; object-fit: contain; }
dialog figure { margin: 0; text-align: center; }

.site-footer {
  position: relative; z-index: 1;
  border-top: var(--hairline); padding: var(--sp-4) var(--gutter) var(--sp-5);
  color: var(--ink-soft); background: color-mix(in srgb, var(--paper-plain) 88%, transparent);
}
.site-footer details { max-width: 46rem; }
.site-footer summary { cursor: pointer; color: var(--plum); }
#collection-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
#collection-forms form { border: var(--hairline); border-radius: var(--radius-md); padding: var(--sp-3); background: color-mix(in srgb, var(--paper-card) 70%, transparent); }
#collection-forms label { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; font-size: var(--fs-small); }
.form-note { font-size: var(--fs-small); min-height: 1.2em; }
.fineprint { font-size: var(--fs-eyebrow); margin-top: var(--sp-4); }
.fineprint a { color: var(--plum); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sign-in consent page and legal page: standalone bounded surfaces on the
   plain parchment body (no scenic stage), readable at 390px, keyboard-safe. */
.consent-surface {
  margin: auto; /* body is a flex column: centers the card both ways */
  width: min(100%, 34rem);
  padding: clamp(var(--sp-4), 4vw, var(--sp-6));
  background: color-mix(in srgb, var(--paper-card) 96%, transparent);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(80, 58, 72, 0.08);
}
.consent-surface h1 { margin-top: 0; }
.consent-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.consent-check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border: var(--hairline); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper-plain) 80%, transparent);
  cursor: pointer; font-size: var(--fs-body);
}
.consent-check input[type="checkbox"] {
  flex: none; width: 1.35em; height: 1.35em; min-width: 24px; min-height: 24px;
  margin: 0.1em 0 0; accent-color: var(--plum);
}
.consent-check:focus-within { border-color: var(--plum-line); }
.consent-check input[type="checkbox"]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.consent-form .hint { margin: 0; }
.consent-form a, .legal a { color: var(--plum); }
.consent-form .primary-button { justify-self: start; min-height: 44px; }
.legal { max-width: 46rem; }
.legal section { margin-top: var(--sp-4); }

/* Responsive composition. 1024 is the agreed desktop minimum: three
   intention columns there; phones stay two columns. Side art steps down
   behind the content edges; below 1024 the side art leaves and a shallow
   underlay band remains. No phone overflow: single-column everything. */
@media (min-width: 1024px) {
  .intentions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1365px) {
  .art-left { height: min(52vh, 560px); opacity: 0.8; }
  .art-right { height: min(48vh, 520px); opacity: 0.8; }
  /* Art sits closer to the tiles at 1024: raise the local tile parchment so
     copy stays readable while the surrounding print remains visible. */
  .intention { background: color-mix(in srgb, var(--paper-card) 90%, transparent); }
}
@media (max-width: 1023px) {
  .art-left, .art-right { display: none; }
  .art-underlay { width: 160%; max-width: none; opacity: 0.55; }
  .spread-option { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --card-w: clamp(64px, 22vw, 120px); --icon-size: clamp(56px, 16vw, 72px); }
  .intentions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-three { grid-template-columns: repeat(3, auto); gap: var(--sp-1); }
  .layout-celtic { grid-template-columns: minmax(0, 1fr); }
  .celtic-cross-part { transform: scale(0.86); transform-origin: top center; }
  .celtic-staff-part { grid-template-rows: none; grid-template-columns: repeat(4, auto); }
  .slot-challenge .tarot-frame { transform: rotate(90deg) scale(0.8); }
}
@media (max-width: 420px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Reduced motion skips only the animation: face-down and revealed states
   stay truthful — backs show until Turn, fronts after, via the same
   transforms and state classes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tarot-frame .flip-inner { transition: none; }
}