:root {
  --bone: #fff9ec;
  --parchment: #f4e8d0;
  --parchment-deep: #e6d2ad;
  --ink: #241b14;
  --umber: #5a402b;
  --gold: #b78a3c;
  --ochre: #d79b27;
  --teal: #5b7774;
  --oxblood: #873e30;
  --ash: #b7a58c;
  --night: #17120f;
  --cream-line: rgba(255, 249, 236, 0.28);
  --ink-line: rgba(36, 27, 20, 0.28);
  --ink-soft: rgba(36, 27, 20, 0.72);
  --surface: rgba(255, 249, 236, 0.78);
  --surface-strong: rgba(255, 249, 236, 0.94);
  --shadow: 0 18px 50px rgba(51, 35, 20, 0.12);
  --shadow-dark: 0 24px 70px rgba(0, 0, 0, 0.28);
  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: 1180px;
  --header-height: 72px;
  --radius: 2px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background-color: var(--parchment);
  background-image:
    linear-gradient(rgba(255, 249, 236, 0.18), rgba(255, 249, 236, 0.18)),
    url("assets/images/parchment-tile.webp");
  background-repeat: repeat;
  background-size: auto, 720px 720px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, blockquote { margin-top: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.03;
}

h1 { font-size: clamp(2.55rem, 9.8vw, 5.75rem); }
h2 { font-size: clamp(2.2rem, 8vw, 4.15rem); }
h3 { font-size: clamp(1.45rem, 5vw, 2rem); }

::selection { background: var(--gold); color: var(--night); }

:focus-visible {
  outline: 3px solid var(--ochre);
  outline-offset: 4px;
}

.shell {
  width: min(100% - 32px, var(--shell));
  margin-inline: auto;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--night);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.top-note {
  display: none;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 24px;
  color: var(--parchment);
  background: var(--night);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.top-note span[aria-hidden="true"] { color: var(--gold); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-height);
  border-bottom: 1px solid var(--ink-line);
  background: rgba(244, 232, 208, 0.94);
  box-shadow: 0 6px 24px rgba(36, 27, 20, 0.05);
  backdrop-filter: blur(16px) saturate(.85);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: block;
  flex: 0 1 auto;
  width: min(52vw, 190px);
}

.brand img { width: 100%; height: auto; }

.menu-toggle {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(36, 27, 20, 0.36);
  background: rgba(255, 249, 236, 0.5);
  cursor: pointer;
}

.menu-toggle span {
  width: 21px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}

body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: calc(var(--header-height) + 10px);
  left: 16px;
  right: 16px;
  z-index: 76;
  display: grid;
  padding: 14px;
  border: 1px solid var(--ink);
  background: var(--bone) url("assets/images/parchment-tile.webp") repeat;
  background-size: 720px;
  box-shadow: var(--shadow-dark);
  opacity: 0;
  transform: translateY(-18px) scale(.98);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s var(--ease), visibility .22s;
}

.site-nav::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(36, 27, 20, 0.2);
  pointer-events: none;
}

.site-nav a {
  position: relative;
  z-index: 1;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(36, 27, 20, 0.15);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-nav a:last-child { border-bottom: 0; }
.site-nav a::after { content: "✦"; color: var(--gold); font-size: 10px; }

body.nav-open .site-nav {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(23, 18, 15, 0.56);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}

body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
.button.header-cta { display: none; }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.button:active { transform: translateY(1px); }
.button--dark { color: var(--bone); background: var(--night); border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--night), inset 0 0 0 4px rgba(183, 138, 60, .55); }
.button--dark:hover { background: var(--umber); box-shadow: inset 0 0 0 3px var(--umber), inset 0 0 0 4px rgba(183, 138, 60, .65), 0 8px 22px rgba(36, 27, 20, .12); }
.button--ghost { color: var(--ink); background: rgba(255, 249, 236, .38); border-color: rgba(36, 27, 20, .46); }
.button--ghost:hover { background: var(--bone); border-color: var(--ink); }
.button--light { color: var(--night); background: var(--parchment); border-color: var(--gold); }
.button--light:hover { background: var(--bone); }
.button--gold { color: var(--night); background: var(--gold); border-color: var(--gold); }
.button--gold:hover { background: var(--ochre); border-color: var(--ochre); }
.button--full { width: 100%; }

.eyebrow {
  margin-bottom: 10px;
  color: var(--umber);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow--gold { color: var(--gold); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.text-link:hover span { transform: translateX(3px); }
.text-link span { transition: transform .2s ease; }
.text-link--large { font-size: 13px; }

.ornate-panel,
.ornate-card {
  position: relative;
  border: 1px solid rgba(90, 64, 43, .62);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ornate-panel::before,
.ornate-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  border: 1px solid rgba(90, 64, 43, .2);
  pointer-events: none;
}

.ornate-panel > *, .ornate-card > * { position: relative; z-index: 1; }

.hero {
  position: relative;
  overflow: clip;
}

.hero-frame {
  position: relative;
  border-bottom: 1px solid var(--ink-line);
  background: var(--bone);
}

.hero-picture { display: block; }
.hero-image { width: 100%; height: auto; }

.hero-copy {
  z-index: 3;
  width: calc(100% - 32px);
  margin: -44px auto 0;
  padding: 32px 24px 28px;
  background: rgba(255, 249, 236, .96);
}

.hero-copy h1 { margin-bottom: 18px; max-width: 12ch; }
.hero-copy h1 em {
  display: block;
  color: var(--gold);
  font-weight: 500;
}

.hero-lead { margin-bottom: 24px; color: var(--ink-soft); font-size: 1.06rem; }
.hero-actions { display: grid; gap: 10px; }

.hero-signature {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 24px;
  color: var(--umber);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .17em;
  text-align: center;
  text-transform: uppercase;
}

.hero-signature img { width: min(240px, 80%); opacity: .88; }

.corner {
  position: absolute;
  z-index: 2;
  width: 72px;
  aspect-ratio: 1;
  background: url("assets/graphics/corner-ornament.svg") center / contain no-repeat;
  opacity: .72;
  pointer-events: none;
}

.corner--tl { top: 7px; left: 7px; }
.corner--tr { top: 7px; right: 7px; transform: scaleX(-1); }
.corner--bl { left: 7px; bottom: 7px; transform: scaleY(-1); }
.corner--br { right: 7px; bottom: 7px; transform: scale(-1); }

.disciplines {
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-line);
  background: rgba(255, 249, 236, .52);
}

.discipline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(90, 64, 43, .19);
  border: 1px solid rgba(90, 64, 43, .19);
}

.discipline {
  min-height: 128px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  background: rgba(255, 249, 236, .8);
  transition: background .2s ease, transform .2s ease;
}

.discipline:hover { background: var(--bone); }
.discipline img { width: 48px; flex: 0 0 48px; }
.discipline span { min-width: 0; display: grid; gap: 4px; }
.discipline strong { font-size: 1.1rem; font-weight: 600; line-height: 1.1; }
.discipline small { color: var(--ink-soft); font-size: .82rem; line-height: 1.3; }

.section {
  position: relative;
  padding: clamp(72px, 12vw, 132px) 0;
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.section-heading h2 { margin-bottom: 16px; }
.section-heading > p:not(.eyebrow) { max-width: 620px; margin-inline: auto; color: var(--ink-soft); }
.heading-divider { width: min(260px, 70%); margin: 20px auto 0; }

.section--offer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("assets/graphics/constellation-pattern.svg");
  background-position: center;
  background-size: 720px;
  opacity: .055;
}

.offer-grid { display: grid; gap: 18px; }

.offer-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 38px 28px 30px;
  overflow: hidden;
}

.offer-card h3 { margin-bottom: 12px; }
.offer-card > p:not(.card-kicker) { color: var(--ink-soft); }
.offer-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(90, 64, 43, .32);
  border-radius: 50%;
  background: rgba(244, 232, 208, .55);
}

.offer-icon img { width: 54px; }
.card-kicker {
  margin-bottom: 8px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.check-list {
  display: grid;
  gap: 9px;
  margin: 4px 0 28px;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: .94rem;
}

.check-list li { position: relative; padding-left: 22px; }
.check-list li::before { content: "✦"; position: absolute; left: 0; top: .2em; color: var(--gold); font-size: 9px; }
.offer-card .text-link, .offer-card .button { margin-top: auto; align-self: flex-start; }
.offer-card .button { align-self: stretch; }

.offer-card--featured {
  color: var(--bone);
  border-color: var(--gold);
  background-color: var(--night);
  background-image: linear-gradient(rgba(23, 18, 15, .85), rgba(23, 18, 15, .93)), url("assets/images/parchment-dark-tile.webp");
  box-shadow: var(--shadow-dark);
}

.offer-card--featured::before { border-color: rgba(183, 138, 60, .46); }
.offer-card--featured .offer-icon { border-color: rgba(183, 138, 60, .62); background: rgba(183, 138, 60, .06); }
.offer-card--featured .offer-icon img { filter: invert(94%) sepia(17%) saturate(539%) hue-rotate(335deg) brightness(108%) contrast(103%); }
.offer-card--featured > p:not(.card-kicker), .offer-card--featured .check-list { color: rgba(255, 249, 236, .76); }
.offer-card--featured .button--dark { background: var(--gold); color: var(--night); box-shadow: none; }
.offer-card--featured .button--dark:hover { background: var(--ochre); }
.featured-ribbon {
  position: absolute;
  top: 22px;
  right: -44px;
  width: 190px;
  padding: 7px 4px;
  color: var(--night);
  background: var(--gold);
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(42deg);
}

.card-reading {
  overflow: hidden;
  color: var(--bone);
  background-color: var(--night);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(183, 138, 60, .14), transparent 28%),
    radial-gradient(circle at 85% 75%, rgba(91, 119, 116, .11), transparent 30%),
    linear-gradient(rgba(23, 18, 15, .9), rgba(23, 18, 15, .96)),
    url("assets/images/parchment-dark-tile.webp");
  border-block: 1px solid var(--gold);
}

.card-reading::before,
.card-reading::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(183, 138, 60, .16);
  border-radius: 50%;
  pointer-events: none;
}

.card-reading::before { top: -240px; left: -220px; box-shadow: 0 0 0 52px rgba(183,138,60,.035), 0 0 0 104px rgba(183,138,60,.02); }
.card-reading::after { right: -240px; bottom: -260px; box-shadow: 0 0 0 52px rgba(183,138,60,.035), 0 0 0 104px rgba(183,138,60,.02); }

.stars {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    radial-gradient(circle at 8% 20%, var(--gold) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 72%, var(--bone) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 15%, var(--gold) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 44%, var(--bone) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 86%, var(--gold) 0 1px, transparent 2px);
  background-size: 190px 190px, 230px 230px, 280px 280px, 210px 210px, 310px 310px;
  pointer-events: none;
}

.reading-grid { position: relative; z-index: 1; display: grid; gap: 46px; }
.reading-copy h2 { max-width: 8ch; margin-bottom: 20px; }
.reading-copy > p:not(.eyebrow) { color: rgba(255, 249, 236, .72); }
.reading-note { padding-left: 18px; border-left: 1px solid var(--gold); font-style: italic; }

.card-experience { min-width: 0; }
.tarot-deck {
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(7px, 2.6vw, 18px);
  margin-inline: auto;
}

/* Slot wrapper (stol-real-faces, 2026-07-13): the position label ("Cisza"/"Granice"/"Kierunek" +
   its one-liner) used to be baked INTO the card face — a static tile that never changed across
   draws, which is the bug this rebuild fixes. Captions now live OUTSIDE the card as their own
   element so the face is free to render whatever the API actually drew. The slot, not the card,
   carries the baseline "fan" offset (--lifted) so the caption travels with its card. */
.tarot-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.tarot-slot--lifted { transform: translateY(-10px); }

.tarot-slot__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding-bottom: 8px;
  margin: 0;
  border-bottom: 1px solid rgba(183, 138, 60, .35);
  text-align: center;
}
.tarot-slot__position {
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: clamp(9px, 2.6vw, 10px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tarot-slot__hint {
  max-width: 17ch;
  color: rgba(255, 249, 236, .58);
  font-family: var(--font-display);
  font-size: clamp(.66rem, 2.5vw, .78rem);
  font-style: italic;
  line-height: 1.3;
}

.tarot-card {
  aspect-ratio: 5 / 8;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: opacity .3s ease, filter .3s ease;
}

/* Hover lift is a pre-pick affordance ONLY, transitioned solely while a card can still be chosen.
   `disabled` is set synchronously at click (script.js), so from that instant this rule no longer
   matches and any later transform change (losing hover, or the face's own reveal a beat after)
   lands with ZERO animation. Required so the reveal never reads as a "flip" — operator ruling
   2026-07-13, tightened same day after watching the live copy: even the opacity-crossfade-plus-
   lift combo read as flipping. getAnimations() on a card at click/reveal must show at most the
   opacity pair, never a transform animation. */
.tarot-card:not(:disabled) { transition: opacity .3s ease, transform .2s var(--ease), filter .3s ease; }
.tarot-card:not(:disabled):hover { transform: translateY(-8px); }
.tarot-card:disabled { cursor: default; }

/* Picked-but-not-yet-revealed feedback (the ~50ms window between the 3rd click and the API
   response, or indefinitely on the honest-fallback path): a static gold ring, no motion, so a
   chosen card reads as "registered" without pretending to show its face yet. */
.tarot-card[aria-pressed="true"]:not(.is-revealed) {
  box-shadow: 0 0 0 2px rgba(183, 138, 60, .55);
}

.tarot-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

/* Reveal (design ruling, operator, 2026-07-13 — supersedes the prior 3D rotateY "flip"; tightened
   same day after watching the live copy — see the .tarot-card:not(:disabled) comment above for
   the hover-lift half of that fix): a card's final orientation AND content are a STATIC render,
   never an animated flip, rotation, or lift. "If the card is upside down, it flips like that" was
   the exact defect — and so was "the deck's fixed position tile (Cisza/Granice/Kierunek) never
   changes across draws" (that tile now lives OUTSIDE the card, see .tarot-slot__caption above).
   Back and front faces are stacked (both absolute/inset:0) and swapped with a subtle opacity
   cross-fade only — no transform is ever transitioned on this element, so a reversed card's
   180deg turn (below) always lands instantly, whether it's applied at reveal or a beat later once
   the reading response arrives. script.js paints the drawn card's name into .tarot-card__front
   (data-card-face) BEFORE adding .is-revealed, so the correct content is already there on frame
   one — never a generic tile visible mid-cross-fade. */
.tarot-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  opacity: 1;
  transition: opacity .22s ease;
}

.tarot-card__back img { width: 100%; height: 100%; object-fit: cover; }
/* Real card faces (stol-rws-faces, 2026-07-13/14): supersedes the name-only placeholder tile
   (operator ruling: "why aren't the cards the tarot cards. what are you showing, it doesn't make
   any sense."). `display:flex` here overrides the shared `.tarot-card__face` grid so the image
   (flexible, fills whatever height remains) and the caption below it (sized to its own content)
   stack predictably regardless of card height at any viewport — the actual layout math this
   replaces `align-content`/`gap`-on-grid with, since a grid's implicit-row sizing doesn't give the
   image priority over the caption the way `flex: 1 1 auto` + `min-height: 0` does. */
.tarot-card__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  color: var(--ink);
  background-color: var(--parchment);
  background-image: url("assets/images/parchment-tile.webp");
  border: 2px solid var(--gold);
  text-align: center;
  opacity: 0;
}

.tarot-card__front::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(90,64,43,.38); }
.tarot-card__front > * { position: relative; z-index: 1; }

/* Image fills the available height above the caption; `min-height: 0` is required on a flex child
   for it to ever shrink below its content size (the classic flexbox-with-images footgun) — without
   it, a tall card name below would get pushed out of the card instead of the image shrinking to
   make room. */
.tarot-card__face-media {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarot-card__face-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Caption: house "engraved small-caps" idiom (see .eyebrow's uppercase+letter-spacing+gold
   treatment elsewhere on this page) rendered in the display serif rather than a new font import —
   this page only loads EB Garamond + Inter, and the deck must stay small, so `font-variant-caps`
   gets the small-caps feel from the family already on the wire. */
.tarot-card__face-caption {
  flex: 0 0 auto;
  max-width: 100%;
  font-family: var(--font-display);
  font-variant-caps: small-caps;
  font-size: clamp(.6rem, 2.9vw, .78rem);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.15;
  color: var(--ink);
}
.tarot-card__face-caption--fallback {
  font-variant-caps: normal;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tarot-card.is-revealed .tarot-card__back { opacity: 0; }
.tarot-card.is-revealed .tarot-card__front { opacity: 1; }
/* Reversed tarot orientation: a static 180deg turn on the front face, no transition property on
   `transform` at all — it cannot animate. Composes with the opacity fade above without fighting
   it (different properties). */
.tarot-card.is-revealed.is-reversed .tarot-card__front { transform: rotate(180deg); }
/* Dims cards not yet PICKED (never a picked-but-unrevealed card — those get the gold ring above,
   not a fade). Keyed off aria-pressed rather than is-revealed so a card doesn't visibly fade
   during the brief pick→response window or on the honest-fallback path where it never reveals. */
.tarot-deck.has-selection .tarot-card[aria-pressed="false"] { opacity: .25; filter: grayscale(.8); transform: scale(.92); }

.card-result {
  max-width: 580px;
  min-height: 116px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 28px auto 0;
  padding: 18px;
  border: 1px solid rgba(183, 138, 60, .48);
  background: rgba(255, 249, 236, .05);
}

.card-result__symbol { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 1.6rem; }
.card-result__label { margin: 0 0 3px; color: var(--gold); font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.card-result__message { margin: 0; color: rgba(255, 249, 236, .8); font-size: .98rem; line-height: 1.45; }

/* Typewriter reveal (stol-typewriter, 2026-07-13): while a reading streams in, the panel hints
   that a tap finishes it early; the caret itself is a hairline gold bar in the site's existing
   idiom (no border-radius, no glow), blinking inline right at the end of the revealed text. */
.card-result.is-typing { cursor: pointer; }
.typewriter-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: var(--gold);
  vertical-align: text-bottom;
  animation: typewriter-blink .9s steps(1) infinite;
}

@keyframes typewriter-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.section--about { overflow: hidden; }
.section--about::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 720px;
  height: 720px;
  right: -360px;
  top: 50%;
  border: 1px solid rgba(90, 64, 43, .12);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 70px rgba(90,64,43,.025), 0 0 0 140px rgba(90,64,43,.018);
}

.about-grid { display: grid; gap: 48px; align-items: center; }
.about-visual { max-width: 520px; margin-inline: auto; text-align: center; }
.about-visual img { width: min(100%, 520px); margin-inline: auto; }
.about-caption { max-width: 360px; margin: -24px auto 0; color: var(--umber); font-style: italic; }
.about-copy h2 { margin-bottom: 22px; }
.about-copy .lead { color: var(--umber); font-size: 1.16rem; }
.about-copy > p:not(.eyebrow):not(.lead) { color: var(--ink-soft); }

.value-list { display: grid; gap: 12px; margin: 30px 0; }
.value-list > div {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(90,64,43,.18);
}

.value-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(90,64,43,.38); border-radius: 50%; color: var(--gold); }
.value-list span:last-child { display: grid; gap: 2px; }
.value-list strong { font-size: 1.04rem; font-weight: 600; }
.value-list small { color: var(--ink-soft); font-size: .88rem; line-height: 1.35; }

.process {
  border-block: 1px solid var(--ink-line);
  background: rgba(255, 249, 236, .44);
}

.process-list {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-list::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 46px;
  left: 35px;
  width: 1px;
  background: rgba(90,64,43,.28);
}

.process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0 18px;
  min-height: 128px;
  padding: 20px 18px 20px 0;
  border-bottom: 1px solid rgba(90,64,43,.16);
}

.process-number {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
  z-index: 1;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--parchment);
  color: var(--umber);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .1em;
}

.process-icon { display: none; }
.process-list h3 { grid-column: 2; margin: 6px 0 8px; }
.process-list p { grid-column: 2; margin: 0; color: var(--ink-soft); font-size: .94rem; }

.journal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 0 50%, rgba(183, 138, 60, .08), transparent 32%), radial-gradient(circle at 100% 15%, rgba(91,119,116,.07), transparent 30%);
}

.featured-article { display: grid; overflow: hidden; margin-bottom: 22px; }
.featured-article__image { min-height: 260px; }
.featured-article__image img { width: 100%; height: 100%; object-fit: cover; }
.featured-article__copy { padding: 30px 24px 32px; }
.featured-article__copy h3 { margin-bottom: 14px; font-size: clamp(1.8rem, 7vw, 3.1rem); }
.featured-article__copy > p:not(.card-kicker) { color: var(--ink-soft); }

.article-grid { display: grid; gap: 18px; }
.article-card {
  overflow: hidden;
  border: 1px solid rgba(90,64,43,.36);
  background: rgba(255,249,236,.68);
  box-shadow: 0 12px 34px rgba(51,35,20,.08);
}

.article-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid rgba(90,64,43,.28); }
.article-card__body { padding: 24px; }
.article-card__body h3 { margin-bottom: 12px; }
.article-card__body > p:not(.card-kicker) { color: var(--ink-soft); }

.outcomes {
  border-block: 1px solid rgba(90,64,43,.24);
  background: linear-gradient(90deg, rgba(215,155,39,.07), rgba(255,249,236,.38), rgba(91,119,116,.06));
}

.outcomes-grid { display: grid; gap: 32px; align-items: center; }
.outcomes-visual img { width: min(280px, 72vw); margin-inline: auto; }
.outcomes-copy h2 { margin-bottom: 20px; }
.outcomes-copy blockquote { margin: 0 0 28px; padding-left: 20px; border-left: 2px solid var(--gold); color: var(--umber); font-size: 1.3rem; font-style: italic; }
.outcome-cards { display: grid; gap: 10px; }
.outcome-cards > div { display: grid; gap: 3px; padding: 18px; border: 1px solid rgba(90,64,43,.24); background: rgba(255,249,236,.5); }
.outcome-cards strong { font-weight: 600; }
.outcome-cards span { color: var(--ink-soft); font-size: .9rem; }

.faq-grid { display: grid; gap: 38px; }
.faq-intro h2 { margin-bottom: 16px; }
.faq-intro > p:not(.eyebrow) { color: var(--ink-soft); }
.faq-intro img { width: 240px; margin-top: 16px; }
.faq-list { border-top: 1px solid rgba(90,64,43,.32); }

.faq details { border-bottom: 1px solid rgba(90,64,43,.32); }
.faq summary {
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 16px 46px 16px 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(90,64,43,.38);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--font-ui);
  transform: translateY(-50%);
  transition: transform .2s ease;
}

.faq details[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.faq details p { margin: 0; padding: 0 46px 24px 0; color: var(--ink-soft); }

.booking { padding-top: 34px; }
.booking-grid { overflow: hidden; padding: 0; background: rgba(255,249,236,.74); }
.booking-visual { position: relative; padding: 24px 20px 8px; background: rgba(183,138,60,.06); }
.booking-visual > img { width: min(100%, 520px); margin: 0 auto; }
.booking-contact { margin: -20px 0 0; padding: 20px; border-top: 1px solid rgba(90,64,43,.24); text-align: center; }
.booking-contact a { display: inline-block; font-size: 1.12rem; font-weight: 600; }
.booking-contact p:last-child { margin: 4px 0 0; color: var(--ink-soft); font-size: .9rem; }
.booking-copy { padding: 36px 22px 32px; }
.booking-copy h2 { margin-bottom: 14px; }
.booking-copy > p:not(.eyebrow) { color: var(--ink-soft); }

.booking-form { display: grid; gap: 16px; margin-top: 28px; }
.field-grid { display: grid; gap: 16px; }
.booking-form label { display: grid; gap: 7px; }
.booking-form label:not(.consent) > span:first-child {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

input, select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(90,64,43,.38);
  border-radius: 0;
  color: var(--ink);
  background: rgba(255,249,236,.66);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

textarea { min-height: 132px; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(36,27,20,.48); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); background: var(--bone); box-shadow: 0 0 0 3px rgba(183,138,60,.14); }

.consent { grid-template-columns: 22px 1fr; align-items: start; gap: 10px !important; color: var(--ink-soft); font-family: var(--font-ui); font-size: 11px; line-height: 1.45; }
.consent input { width: 20px; min-height: 20px; margin: 1px 0 0; accent-color: var(--gold); }
.form-status { min-height: 1.45em; margin: -4px 0 0; color: var(--teal); font-family: var(--font-ui); font-size: 12px; }
.form-status.is-error { color: var(--oxblood); }

.newsletter {
  position: relative;
  overflow: hidden;
  padding: 54px 0;
  color: var(--bone);
  background-color: var(--night);
  background-image: linear-gradient(90deg, rgba(23,18,15,.92), rgba(36,27,20,.82)), url("assets/images/parchment-dark-tile.webp");
  border-block: 1px solid var(--gold);
}

.newsletter-inner { position: relative; display: grid; gap: 22px; align-items: center; }
.newsletter-symbol { position: absolute; right: -120px; top: 50%; width: 330px; opacity: .16; transform: translateY(-50%); pointer-events: none; }
.newsletter h2 { max-width: 18ch; margin-bottom: 12px; font-size: clamp(2rem, 7.5vw, 3.5rem); }
.newsletter p:not(.eyebrow):not(.form-status) { max-width: 610px; margin-bottom: 0; color: rgba(255,249,236,.7); }
.newsletter-form { position: relative; z-index: 1; display: grid; gap: 10px; }
.newsletter-form input { color: var(--bone); border-color: rgba(255,249,236,.35); background: rgba(255,249,236,.06); }
.newsletter-form input::placeholder { color: rgba(255,249,236,.54); }
.newsletter-form input:focus { background: rgba(255,249,236,.1); }
.newsletter-form .form-status { grid-column: 1 / -1; color: var(--parchment); }

.site-footer {
  padding: 54px 0 calc(30px + env(safe-area-inset-bottom));
  color: rgba(255,249,236,.72);
  background: #120e0c;
}

.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 22px; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand img { width: min(270px, 80%); margin-bottom: 10px; }
.footer-brand p { margin: 3px 0; font-size: .86rem; }
.site-footer h2 { margin-bottom: 12px; color: var(--gold); font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.site-footer a, .site-footer span { display: block; margin: 7px 0; font-size: .86rem; }
.site-footer a:hover { color: var(--bone); }
.footer-bottom { display: grid; gap: 9px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(183,138,60,.28); }
.footer-bottom span { margin: 0; color: rgba(255,249,236,.48); font-family: var(--font-ui); font-size: 10px; line-height: 1.5; }

.mobile-booking-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gold);
  background: rgba(244,232,208,.97);
  box-shadow: 0 -12px 30px rgba(36,27,20,.15);
  backdrop-filter: blur(14px);
  transition: translate .25s var(--ease);
}

.mobile-booking-bar > span { min-width: 0; display: grid; line-height: 1.1; }
.mobile-booking-bar small { color: var(--umber); font-family: var(--font-ui); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.mobile-booking-bar strong { overflow: hidden; font-size: .92rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mobile-booking-bar .button { min-height: 46px; padding-inline: 14px; font-size: 10px; }
body.nav-open .mobile-booking-bar { translate: 0 120%; }

.article-dialog {
  width: min(640px, calc(100% - 28px));
  max-height: min(86dvh, 760px);
  padding: 42px 26px 30px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background-color: var(--parchment);
  background-image: url("assets/images/parchment-tile.webp");
  box-shadow: var(--shadow-dark);
}

.article-dialog::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(90,64,43,.25); pointer-events: none; }
.article-dialog::backdrop { background: rgba(23,18,15,.72); backdrop-filter: blur(3px); }
.article-dialog h2 { margin-bottom: 10px; font-size: clamp(2rem, 8vw, 3.4rem); }
.article-dialog > img { width: 230px; margin: 4px 0 18px; }
.article-dialog > p[data-dialog-body] { color: var(--ink-soft); font-size: 1.04rem; }
.dialog-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 42px; height: 42px; border: 1px solid rgba(90,64,43,.4); background: rgba(255,249,236,.58); font-family: var(--font-ui); font-size: 24px; cursor: pointer; }

body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

body.reveal-ready [data-reveal] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}

body.reveal-ready [data-reveal].is-visible { opacity: 1; translate: 0 0; }

@media (min-width: 520px) {
  .hero-actions { grid-template-columns: max-content max-content; }
  .discipline { padding: 18px; }
  .discipline img { width: 58px; flex-basis: 58px; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-form { grid-template-columns: minmax(0, 1fr) auto; }
  .newsletter-form .button { min-width: 140px; }
  .article-dialog { padding: 52px 44px 40px; }
}

@media (min-width: 700px) {
  .hero-picture { aspect-ratio: 1374 / 768; overflow: hidden; }
  .hero-image { width: 100%; height: 100%; object-fit: cover; }
  .hero-copy { max-width: 690px; margin-top: -56px; padding: 42px 42px 36px; }
  .corner { width: 96px; }
  .discipline-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .discipline { min-height: 150px; flex-direction: column; justify-content: center; text-align: center; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-card--featured { grid-row: span 1; }
  .about-grid { grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: 58px; }
  .about-caption { margin-top: -34px; }
  .featured-article { grid-template-columns: minmax(0, 1.06fr) minmax(330px, .94fr); align-items: stretch; }
  .featured-article__image { min-height: 420px; }
  .featured-article__copy { display: flex; flex-direction: column; justify-content: center; padding: 42px; }
  .featured-article__copy .button { align-self: flex-start; }
  .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .outcomes-grid { grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: 60px; }
  .outcomes-visual img { width: min(360px, 100%); }
  .outcome-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: 72px; }
  .faq-intro { position: sticky; top: calc(var(--header-height) + 40px); align-self: start; }
  .booking-grid { grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr); }
  .booking-visual { display: flex; flex-direction: column; justify-content: center; padding: 36px 28px; border-right: 1px solid rgba(90,64,43,.22); }
  .booking-copy { padding: 54px 46px 48px; }
  .footer-grid { grid-template-columns: 1.8fr repeat(3, .7fr); }
  .footer-brand { grid-column: auto; }
}

@media (min-width: 820px) {
  body { padding-bottom: 0; }
  .mobile-booking-bar { display: none; }
  .reading-grid { grid-template-columns: minmax(260px, .72fr) minmax(450px, 1.28fr); align-items: center; gap: 70px; }
  .reading-copy { align-self: center; }
  .process-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .process-list::before { top: 62px; bottom: auto; left: 12.5%; right: 12.5%; width: auto; height: 1px; }
  .process-list li { display: flex; flex-direction: column; align-items: center; min-height: 310px; padding: 0 22px; border: 0; text-align: center; }
  .process-number { position: absolute; top: 0; left: 10px; width: 34px; height: 34px; font-size: 9px; background: var(--bone); }
  .process-icon { z-index: 1; width: 124px; height: 124px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid var(--gold); border-radius: 50%; background: var(--parchment); }
  .process-icon img { width: 78px; }
  .process-list h3, .process-list p { grid-column: auto; }
  .process-list h3 { margin: 0 0 10px; }
  .footer-bottom { grid-template-columns: auto 1fr; align-items: start; gap: 40px; }
  .footer-bottom span:last-child { text-align: right; }
}

@media (min-width: 960px) {
  :root { --header-height: 84px; }
  .top-note { display: flex; }
  .brand { width: 240px; }
  .menu-toggle { display: none; }
  .site-nav {
    position: static;
    z-index: auto;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 30px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .site-nav::before { display: none; }
  .site-nav a {
    min-height: auto;
    display: inline-block;
    padding: 9px 0;
    border: 0;
    font-size: 11px;
    letter-spacing: .075em;
  }
  .site-nav a::before { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--gold); transition: right .25s ease; }
  .site-nav a:hover::before { right: 0; }
  .site-nav a::after { display: none; }
  .button.header-cta { display: inline-flex; min-height: 46px; white-space: nowrap; }
  .nav-backdrop { display: none; }
  body.nav-open { overflow: auto; }
  .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .offer-card--featured { transform: translateY(-16px); }
  .newsletter-inner { grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); gap: 70px; }
  .newsletter-symbol { right: 34%; width: 420px; }
}

@media (min-width: 1080px) {
  .hero-frame::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 48%;
    background: linear-gradient(90deg, rgba(255,249,236,.48), rgba(255,249,236,.14) 68%, transparent);
    pointer-events: none;
  }
  .hero-copy {
    position: absolute;
    top: 50%;
    left: max(3.5vw, calc((100vw - var(--shell)) / 2));
    width: min(420px, 34vw);
    margin: 0;
    padding: 38px 34px 32px;
    background: rgba(255,249,236,.88);
    backdrop-filter: blur(7px);
    transform: translateY(-50%);
  }
  .hero-copy h1 { font-size: clamp(3.05rem, 4.4vw, 4.9rem); }
  .hero-lead { font-size: 1.04rem; }
  .hero-signature { margin-top: 18px; }
  .corner { width: 120px; }
  .discipline { min-height: 132px; flex-direction: row; justify-content: flex-start; text-align: left; }
  .discipline-grid { background: transparent; border-inline: 0; }
  .discipline:not(:last-child) { border-right: 1px solid rgba(90,64,43,.22); }
}

@media (min-width: 1280px) {
  .hero-copy { width: 450px; padding: 44px 40px 36px; }
  .hero-copy h1 { font-size: 5.05rem; }
  .discipline img { width: 64px; flex-basis: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body.reveal-ready [data-reveal] { opacity: 1; translate: none; }
  .tarot-card__face { transition: none; }
  /* Belt-and-suspenders for requirement 3 — script.js already bypasses the typewriter entirely
     under reduced motion (no caret is ever inserted), this just guarantees the blink can't run
     even if a caret somehow lands in the DOM. */
  .typewriter-caret { display: none; }
}