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

:root {
  --bg:         #150B0E;
  --bg-card:    #1c1113;
  --bone:       #EDE6DC;
  --bone-dim:   #857D74;
  --body:       #B5ADA3;
  --oxblood:    #6E1220;
  --pink:       #E04B7C;
  --pink-light: #F0879F;
  --gold:       #BF9B30;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--bone);
  font-family: 'Texturina', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--pink-light); text-decoration: none; }

/* ── SHARED ─────────────────────────────────────────────────── */
.star-clip {
  clip-path: polygon(
    50% 0,   58% 30.6%, 85.4% 14.6%, 69.4% 42%,
    100% 50%, 69.4% 58%, 85.4% 85.4%, 58% 69.4%,
    50% 100%, 42% 69.4%, 14.6% 85.4%, 30.6% 58%,
    0 50%,   30.6% 42%, 14.6% 14.6%, 42% 30.6%
  );
}
.grain {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 5;
  opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.btn-primary {
  display: inline-block;
  background: var(--pink); color: var(--bg);
  font: 600 14px 'Texturina', serif;
  letter-spacing: .24em; text-transform: uppercase;
  padding: 16px 34px;
  cursor: pointer;
  transition: background .2s;
}
.btn-primary:hover { background: var(--pink-light); color: var(--bg); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes marq   { from { transform: translateX(0) }    to { transform: translateX(-50%) } }
@keyframes blink  { 0%,49% { opacity: 1 }                50%,100% { opacity: 0 } }
@keyframes twink  { 0%,100% { opacity:.35; transform:rotate(0deg) scale(1) }
                    50%     { opacity:1;   transform:rotate(45deg) scale(1.12) } }
@keyframes floaty { 0%,100% { transform: translateY(0) }
                    50%     { transform: translateY(-8px) } }

/* ═══════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 40px;
  background: rgba(21,11,14,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(237,230,220,.1);
}
.nav-logo {
  display: flex; flex-direction: column;
  gap: 1px;
  width: max-content;
}
.nav-logo-name {
  font: 400 26px 'UnifrakturMaguntia', serif;
  color: var(--bone);
  white-space: nowrap;
  display: block;
}
.nav-logo-sub {
  font: 400 10px 'Texturina', serif;
  letter-spacing: .3em;
  color: var(--bone-dim);
  white-space: nowrap;
  display: block;
  text-align: center;
}
.nav-links {
  display: flex; align-items: center; gap: 28px;
}
.nav-links a {
  font: 400 12px 'Texturina', serif;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--bone-dim);
  transition: color .2s;
}
.nav-links a:hover { color: var(--bone); }
.nav-book {
  border: 1px solid var(--pink) !important;
  color: var(--pink) !important;
  padding: 8px 20px;
  transition: background .2s, color .2s !important;
}
.nav-book:hover { background: var(--pink); color: var(--bg) !important; }

/* ── Burger button (hidden on desktop) ── */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--bone);
  transition: transform .3s, opacity .3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 90svh; min-height: 580px;
  overflow: hidden;
}
/* Bottom fade to background */
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 18%;
  background: linear-gradient(to top, rgba(21,11,14,1) 0%, rgba(21,11,14,0) 100%);
  z-index: 6; pointer-events: none;
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  transform: translateX(20%);
}
.hero-fade-left {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(
    to right,
    rgba(21,11,14,1)   0%,
    rgba(21,11,14,1)  30%,
    rgba(21,11,14,.8) 38%,
    rgba(21,11,14,0)  52%
  );
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    105deg,
    rgba(21,11,14,.82) 0%,
    rgba(21,11,14,.48) 42%,
    rgba(21,11,14,.04) 70%
  );
}
.hero-content {
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 720px; z-index: 10;
}
.hero-kicker {
  margin-bottom: 20px;
  font: 400 14px 'Texturina', serif;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--pink-light);
}
.hero-heading {
  font: 400 64px/1.12 'UnifrakturMaguntia', serif;
  color: var(--bone);
}
.hero-typed-line {
  margin-top: 10px;
  font: 400 82px/1 'Monsieur La Doulaise', cursive;
  color: var(--gold);
  min-height: 90px;
  display: block;
}
.hero-cursor {
  display: inline-block;
  width: 3px; height: 52px;
  background: var(--gold);
  margin-left: 4px; vertical-align: -6px;
  animation: blink 1s steps(1) infinite;
}
.hero-body {
  margin: 22px 0 32px; max-width: 440px;
  font: 400 18px/1.8 'Texturina', serif;
  color: var(--body);
}
.hero-star {
  position: absolute; right: 60px; top: 60px; z-index: 10;
  width: 96px; height: 96px;
  background: var(--gold);
  animation: twink 5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════════════════════════ */
.marquee-wrap {
  padding: 24px 0 22px;
  border-top: 1px solid rgba(237,230,220,.14);
  border-bottom: 1px solid rgba(237,230,220,.14);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marq 32s linear infinite;
}
.marquee-half {
  display: flex; align-items: center; gap: 36px;
  flex: none;
  width: max-content;
  padding-right: 36px;
  font: 400 30px 'UnifrakturMaguntia', serif;
  color: rgba(237,230,220,.38);
  white-space: nowrap;
}
.marquee-star {
  width: 16px; height: 16px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   INTRO QUOTE
═══════════════════════════════════════════════════════════════ */
.intro-quote {
  padding: 52px 52px 48px;
  text-align: center;
}
.intro-quote p {
  margin: 0 auto; max-width: 820px;
  font: 400 italic 20px/1.75 'Texturina', serif;
  color: var(--body);
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════════ */
.about {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(237,230,220,.1);
}
.about-text {
  padding: 72px 52px 80px;
  border-right: 1px solid rgba(237,230,220,.1);
}
.about-kicker {
  margin-bottom: 16px;
  font: 400 11px 'Texturina', serif;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold);
}
.about-heading {
  margin-bottom: 24px;
  font: 400 38px/1.22 'UnifrakturMaguntia', serif;
  color: var(--bone);
}
.about-body {
  margin-bottom: 18px;
  font: 400 15px/1.85 'Texturina', serif;
  color: var(--body);
}
.about-body-dim { color: var(--bone-dim); }
.about-photo { position: relative; overflow: hidden; min-height: 480px; }
.about-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 42%;
}
.about-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(21,11,14,.55), rgba(21,11,14,0) 44%);
}

/* ═══════════════════════════════════════════════════════════════
   PRESS — ornamental framed portraits
═══════════════════════════════════════════════════════════════ */
.press {
  background: var(--oxblood);
  padding: 56px 52px 64px;
}
.press-header {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-bottom: 44px;
}
.press-star-sm {
  width: 16px; height: 16px;
  background: var(--gold); flex-shrink: 0;
}
.press-heading {
  margin: 0;
  font: 400 34px 'UnifrakturMaguntia', serif;
  color: var(--bone);
}
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 86%;
  margin: 0 auto;
}

/* ── Ornamental frame ── */
.press-item {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--gold);
  padding: 14px 14px 20px;
  background: rgba(21,11,14,.35);
}
.press-item::before {
  content: '';
  position: absolute; inset: 7px;
  border: 1px solid rgba(191,155,48,.28);
  pointer-events: none; z-index: 1;
}
.press-item::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(191,155,48,.035) 0px, rgba(191,155,48,.035) 1px,
    transparent 1px, transparent 12px
  );
}
.press-corners { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.press-corner {
  position: absolute;
  width: 13px; height: 13px;
  background: var(--gold); opacity: .85;
}
.press-corner-tl { top: 4px;    left: 4px; }
.press-corner-tr { top: 4px;    right: 4px; }
.press-corner-bl { bottom: 4px; left: 4px; }
.press-corner-br { bottom: 4px; right: 4px; }

.press-img {
  position: relative; z-index: 1;
  width: 100%; height: 0;
  padding-bottom: 125%; /* 4:5 portrait — more reliable than aspect-ratio in Safari flex children */
  background: var(--bg); overflow: hidden;
}
.press-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.press-caption {
  position: relative; z-index: 1;
  padding: 16px 2px 2px;
}
.press-cap-rule {
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(191,155,48,.55), transparent);
  margin-bottom: 12px;
}
.press-name {
  font: 400 20px 'UnifrakturMaguntia', serif;
  color: var(--bone); margin: 0 0 5px;
}
.press-detail {
  font: 400 11px 'Texturina', serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(237,230,220,.55); margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TAROT CARDS — services
═══════════════════════════════════════════════════════════════ */
.process {
  background: var(--bg);
  border-top: 1px solid rgba(237,230,220,.14);
  padding: 56px 40px 64px;
}
.process-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 40px;
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.process-heading {
  font: 400 36px 'UnifrakturMaguntia', serif;
  color: var(--bone);
}
.process-hint {
  font: 400 11.5px 'Texturina', serif;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--bone-dim);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, clamp(220px, 18vw, 265px));
  justify-content: center;
  gap: clamp(40px, 5vw, 70px);
  margin-bottom: 40px;
}

/* ── Card shell ── */
.card-outer {
  perspective: 1400px;
  cursor: pointer;
}
.card-inner {
  position: relative;
  width: 100%;
  /* padding-bottom instead of aspect-ratio: Safari mishandles aspect-ratio
     on elements with preserve-3d, causing both faces to bleed through */
  height: 0;
  padding-bottom: 160%; /* 5:8 portrait */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.card-inner.flipped {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card-face,
.card-back {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid var(--gold);
  overflow: hidden;
  /* Safari ignores backface-visibility inside this 3D context, so the hidden
     face is driven explicitly. The swap must land exactly where the card is
     edge-on at 90°. The flip's cubic-bezier(.2,.7,.2,1) is front-loaded and
     crosses 90° at ~14% of its 900ms — NOT at the halfway point. Retime this
     delay if the flip duration or easing changes, or the card will blink out. */
  transition: visibility 0s linear .13s;
}
.card-back { visibility: hidden; }
.card-inner.flipped .card-face { visibility: hidden; }
.card-inner.flipped .card-back { visibility: visible; }

/* ── Face ── */
.card-face {
  background: var(--bg-card);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  text-align: center;
  padding: clamp(14px, 1.8vw, 22px) clamp(12px, 1.4vw, 20px);
  /* explicit initial rotation so Safari registers the starting state */
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.card-face::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(191,155,48,.28);
  pointer-events: none;
}
.card-face::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(191,155,48,.04) 0px, rgba(191,155,48,.04) 1px,
    transparent 1px, transparent 10px
  );
}
.card-corners { position: absolute; inset: 0; pointer-events: none; }
.card-corner {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--gold); opacity: .65;
}
.card-corner-tl { top: 14px;    left: 14px; }
.card-corner-tr { top: 14px;    right: 14px; }
.card-corner-bl { bottom: 14px; left: 14px; }
.card-corner-br { bottom: 14px; right: 14px; }

.card-top {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%;
}
.card-numeral {
  font: 400 11px 'Texturina', serif;
  letter-spacing: .5em; color: var(--gold);
}
.card-rule {
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(191,155,48,.55), transparent);
}

.card-mid { position: relative; z-index: 1; }
.card-star-el {
  width: clamp(44px, 5vw, 68px);
  height: clamp(44px, 5vw, 68px);
  background: var(--gold);
}
.card-star-el.d0 { animation: floaty 6s ease-in-out infinite; }
.card-star-el.d1 { animation: floaty 6s ease-in-out .8s infinite; }
.card-star-el.d2 { animation: floaty 6s ease-in-out 1.6s infinite; }

.card-bottom {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%;
}
.card-title-front {
  font: 400 clamp(16px, 2vw, 26px) 'UnifrakturMaguntia', serif;
  color: var(--bone); margin: 0;
}
.card-reveal {
  font: 400 9px 'Texturina', serif;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--bone-dim); margin: 0;
}

/* ── Back ── */
.card-back {
  background: var(--oxblood);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 2.5vw, 36px) clamp(16px, 2vw, 28px);
}
.card-back::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(191,155,48,.25);
  pointer-events: none;
}
.card-back::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(191,155,48,.04) 0px, rgba(191,155,48,.04) 1px,
    transparent 1px, transparent 10px
  );
}
.card-back-inner { position: relative; z-index: 1; }
.card-title-back {
  font: 400 clamp(16px, 1.8vw, 24px) 'UnifrakturMaguntia', serif;
  color: var(--bone); margin: 0 0 10px;
}
.card-rule-back {
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(237,230,220,.3), transparent);
  margin-bottom: 14px;
}
.card-desc {
  font: 400 clamp(11px, 1.1vw, 14px)/1.82 'Texturina', serif;
  color: var(--bone); margin: 0 0 16px;
}
.card-book-btn {
  display: block; width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: 400 9px 'Texturina', serif;
  letter-spacing: .34em; text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.card-book-btn:hover { background: var(--gold); color: var(--bg); }

/* ═══════════════════════════════════════════════════════════════
   BOOK EMBED
═══════════════════════════════════════════════════════════════ */
.book-embed-section {
  padding: 60px 52px;
  border-top: 1px solid rgba(237,230,220,.1);
}
.book-embed-heading {
  font: 400 11px 'Texturina', serif;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--bone-dim); text-align: center; margin-bottom: 36px;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--oxblood);
  padding: 22px 52px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-logo {
  font: 400 26px 'UnifrakturMaguntia', serif;
  color: var(--bone);
}
.footer-social {
  display: flex; align-items: center; gap: 24px;
}
.footer-social-link {
  display: flex; align-items: center; gap: 7px;
  font: 400 10px 'Texturina', serif;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(237,230,220,.55);
  transition: color .2s;
}
.footer-social-link:hover { color: var(--gold); }
.footer-social-link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.footer-copy {
  font: 400 10px 'Texturina', serif;
  letter-spacing: .18em;
  color: rgba(237,230,220,.4);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
/* Nav collapses to burger at the point the links would overflow */
@media (max-width: 720px) {
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(21,11,14,.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(237,230,220,.1);
    padding: 8px 20px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 14px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(237,230,220,.07);
    letter-spacing: .2em;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-book {
    margin-top: 10px;
    text-align: center;
    padding: 12px 20px !important;
  }
}

@media (max-width: 840px) {
  .cards-grid {
    grid-template-columns: clamp(240px, 76vw, 290px);
    gap: 22px;
  }
}

@media (max-width: 700px) {
  .process { padding: 40px 24px 48px; }
  .process-header { max-width: 100%; }

  .marquee-half { font-size: 18px; gap: 20px; }
  .marquee-star { width: 10px; height: 10px; }

  .press { padding: 40px 24px 48px; }
  .press-grid { grid-template-columns: 1fr; gap: 28px; max-width: 100%; }
  .press-heading { font-size: 24px; }

  .hero-content { left: 24px; right: 24px; top: 50%; transform: translateY(-50%); }
  .hero-heading { font-size: 42px; }
  .hero-typed-line { font-size: 56px; min-height: 64px; }
  .hero-body { font-size: 15px; }
  .hero-star { width: 60px; height: 60px; right: 24px; top: 24px; }

  .about { grid-template-columns: 1fr; }
  .about-text { border-right: none; border-bottom: 1px solid rgba(237,230,220,.1); padding: 48px 24px; }
  .about-photo { min-height: 320px; }

  .intro-quote { padding: 36px 24px; }
  .nav { padding: 10px 20px; }
  .nav-links { gap: 16px; }
  .book-embed-section { padding: 40px 20px; }
  .footer { flex-direction: column; gap: 12px; text-align: center; padding: 24px 20px; }
}