:root {
  color-scheme: light;
  --ink: #2e2230;
  --muted: #6c6069;
  --paper: #faf5ed;
  --card: #fffbf4;
  --line: #e4d7ca;
  --plum: #231b26;
  --plum-light: #352738;
  --gold: #edcb9a;
  --gold-ink: #77512c;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Inter, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--sans); }
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #aa744a; outline-offset: 4px; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
[hidden] { display: none !important; }
.shell { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; transform: translateY(-160%); padding: 10px 16px; background: var(--paper); color: var(--ink); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 5; top: 0; background: var(--plum); border-bottom: 1px solid #edcb9a29; color: var(--paper); }
.header-inner { min-height: 73px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font: 700 32px/1 var(--serif); letter-spacing: .015em; }
.brand-mark { color: var(--gold); font: 400 25px/1 Georgia, serif; }
.primary-nav { display: flex; gap: 32px; color: #eadde4; font-size: 13px; }
.primary-nav a:hover, .footer-bottom > a:last-child:hover { color: var(--gold); }
.cart-trigger { justify-self: end; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 9px 5px 14px; background: transparent; color: var(--paper); border: 1px solid #edcb9a56; border-radius: 7px; font-size: 13px; }
.cart-trigger:hover { border-color: var(--gold); }
.cart-trigger svg { color: var(--gold); }
.cart-count { display: grid; min-width: 25px; min-height: 25px; place-items: center; padding-inline: 4px; border-radius: 30px; color: var(--plum); background: var(--gold); font-size: 11px; font-weight: 700; }

.hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 75% 42%, #503b4e 0%, #352738 39%, #231b26 75%); color: var(--paper); }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .3; background-image: radial-gradient(circle at 12% 27%, #f7debb 0 1px, transparent 1.5px), radial-gradient(circle at 70% 80%, #f7debb 0 .7px, transparent 1.4px), radial-gradient(circle at 33% 61%, #f7debb 0 .6px, transparent 1.3px); background-size: 233px 211px, 251px 173px, 187px 239px; mask-image: linear-gradient(90deg, transparent, #000 40%); }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 560px; }
.hero-copy { position: relative; z-index: 1; padding: 65px 0 74px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--gold-ink); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { font: 400 17px/1 Georgia, serif; }
.hero .eyebrow, .site-footer .eyebrow { color: var(--gold); }
.hero h1 { margin: 19px 0 21px; font: 600 clamp(80px, 9.2vw, 136px)/.75 var(--serif); letter-spacing: -.058em; }
.hero h1 em { display: inline-block; padding-bottom: .13em; color: var(--gold); font-weight: 500; line-height: .9; }
.hero-description { max-width: 385px; margin-bottom: 31px; color: #eadfe7; line-height: 1.7; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 10px 20px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 700; transition: background .16s, color .16s, border-color .16s; }
.button > span { font-size: 19px; line-height: 1; }
.button-gold { background: var(--gold); color: var(--plum); }
.button-gold:hover { background: #f8deb8; }
.button-dark { background: var(--plum); color: var(--paper); }
.button-dark:hover { background: #4d3851; }
.hero-art { position: relative; display: grid; align-self: stretch; min-width: 0; place-items: center; }
.portrait-frame { position: relative; z-index: 1; width: min(70%, 356px); aspect-ratio: .835; padding: 8px; border: 1px solid #edcb9a99; border-radius: 52% 52% 12px 12px / 41% 41% 12px 12px; background: #2e2430; box-shadow: 0 24px 65px #18111b82; }
.portrait-frame img { border-radius: inherit; object-position: 52% center; }
.orbit { position: absolute; width: min(97%, 526px); aspect-ratio: 1; border: 1px solid #edcb9a37; border-radius: 50%; }
.orbit-inner { width: min(91%, 495px); border-style: dashed; opacity: .75; }
.hero-star { position: absolute; z-index: 2; color: var(--gold); font: 400 46px/1 Georgia, serif; text-shadow: 0 0 16px #221925; }
.hero-star-top { right: 9%; top: 16%; }
.hero-star-bottom { left: 8%; bottom: 20%; font-size: 37px; }

.catalog { padding-block: 73px 92px; scroll-margin-top: 74px; }
.catalog-heading { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 26px; }
.catalog-heading h2, .site-footer h2 { margin-top: 5px; font: 700 clamp(45px, 6vw, 76px)/.99 var(--serif); letter-spacing: -.044em; }
.catalog-heading > p { max-width: 300px; padding-bottom: 6px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }
.filters button { padding: 9px 15px; min-height: 40px; border-radius: 30px; border: 1px solid #d8cabc; background: transparent; color: var(--ink); font-size: 13px; }
.filters button:hover { border-color: #6e5270; }
.filters button[aria-pressed='true'] { background: var(--plum); border-color: var(--plum); color: var(--paper); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-card { display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: box-shadow .2s, border-color .2s; }
.service-card:hover { border-color: #c7ac92; box-shadow: 0 9px 24px #33263912; }
.card-image { position: relative; height: 172px; background: #e2c9ad; overflow: hidden; }
.card-image img { transition: transform .3s; }
.service-card:hover img { transform: scale(1.04); }
.card-image-natal img, .card-image-individual img { object-position: center 28%; }
.card-image-tarot img, .card-image-runes img, .card-image-oracle img, .card-image-flame img { object-position: center 42%; }
.card-image-sand img { object-position: center 66%; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 19px 20px 15px; }
.card-body h3 { margin-bottom: 5px; font: 700 32px/.98 var(--serif); letter-spacing: -.025em; }
.card-body p { flex: 1; margin-bottom: 17px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.card-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-action strong { color: var(--gold-ink); font-size: 14px; }
.card-action button, .option-add { min-height: 37px; padding: 6px 11px; border: 1px solid #dfd1c5; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 700; }
.card-action button span, .option-add span { margin-left: 5px; }
.card-action button:hover, .option-add:not(:disabled):hover { border-color: var(--plum); background: var(--plum); color: var(--paper); }

.site-footer { padding: 64px 0 25px; background: var(--plum); color: var(--paper); scroll-margin-top: 74px; }
.footer-main { display: grid; grid-template-columns: 1fr minmax(310px, 37%); align-items: end; gap: 24px; padding-bottom: 47px; }
.site-footer h2 { max-width: 600px; margin-top: 11px; font-size: clamp(42px, 5vw, 65px); }
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.socials a { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 13px; border: 1px solid #edcb9a5c; border-radius: 6px; font-size: 13px; }
.socials a:hover { background: var(--gold); color: var(--plum); }
.socials a span { color: var(--gold); }
.socials a:hover span { color: inherit; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 20px; border-top: 1px solid #edcb9a38; }
.footer-bottom .brand { font-size: 24px; }
.footer-bottom .brand-mark { font-size: 19px; }
.footer-bottom > a:last-child { color: #eadde4; font-size: 12px; }

dialog { width: min(590px, calc(100% - 30px)); max-height: min(760px, calc(100dvh - 36px)); overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 0 20px 85px #100b15a0; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #18111baf; backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font: 700 clamp(32px, 6vw, 46px)/.95 var(--serif); letter-spacing: -.028em; }
.icon-button { display: grid; width: 41px; height: 41px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; }
.icon-button:hover { background: var(--paper); border-color: #a8917a; }
.service-options, .cart-items { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-inline: 22px; }
.option-row, .cart-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 65px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.option-row:last-child, .cart-line:last-child { border-bottom: 0; }
.item-name, .item-price, .cart-service { display: block; }
.item-name { font-weight: 600; line-height: 1.3; }
.item-price { margin-top: 4px; color: var(--gold-ink); font-size: 13px; }
.option-add { flex: none; }
.dialog-foot { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); }
.dialog-foot p { color: var(--gold-ink); font-size: 12px; }
.text-button { flex: none; margin-left: auto; padding: 7px 0; border: 0; background: transparent; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.cart-service { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.cart-controls { display: grid; flex: none; justify-items: end; gap: 3px; }
.quantity { display: flex; align-items: center; gap: 4px; }
.quantity button { width: 33px; height: 33px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); font-size: 17px; }
.quantity button:not(:disabled):hover { border-color: #a8917a; }
.quantity span { min-width: 22px; text-align: center; }
.remove-button { padding: 3px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.cart-summary { padding: 15px 22px 18px; border-top: 1px solid var(--line); }
.total { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.total strong { color: var(--gold-ink); }
#cart-price-note, .checkout-note { color: var(--muted); font-size: 12px; }
#cart-price-note { margin-top: 4px; }
.checkout { display: flex; margin-block: 14px 9px; }
.cart-empty { display: grid; justify-items: center; gap: 13px; padding: 29px 0 35px; text-align: center; }
.cart-empty > span { color: var(--gold-ink); font-size: 32px; }

#top, .draw-section { scroll-margin-top: 74px; }
.hero {
  background:
    radial-gradient(ellipse at 78% 37%, #64404d 0%, #3c293b 41%, transparent 72%),
    linear-gradient(120deg, #201923, #2c2030);
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 15px;
  border: 1px solid #edcb9a35;
  content: '';
  pointer-events: none;
}
.hero-inner { min-height: 610px; }
.hero h1 { margin-bottom: 10px; }
.hero-tagline {
  margin-bottom: 10px;
  color: #f1d5b2;
  font: 600 italic clamp(25px, 3vw, 35px)/1.05 var(--serif);
}
.hero-description { max-width: 435px; margin-bottom: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.button-outline { border-color: #edcb9a75; background: transparent; color: var(--gold); }
.button-outline:hover { background: #edcb9a16; border-color: var(--gold); }
.hero-aside { margin-top: 18px; color: #e9ccd7; font-size: 12px; }
.hero-aside span { margin-right: 5px; color: var(--gold); font-size: 17px; }
.orbit-outer {
  background: repeating-conic-gradient(from 0deg, #edcb9a8f 0deg 1deg, transparent 1deg 15deg);
  -webkit-mask: radial-gradient(transparent 67%, #000 67.3% 69%, transparent 69.3% 70%, #000 70.3%);
  mask: radial-gradient(transparent 67%, #000 67.3% 69%, transparent 69.3% 70%, #000 70.3%);
  opacity: .45;
}
.orbit-sign {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 1px solid #edcb9a75;
  border-radius: 50%;
  background: #392a39;
  color: var(--gold);
  font: 400 26px/1 Georgia, serif;
}
.orbit-sign-moon { top: 22%; left: 11%; }
.orbit-sign-sun { right: 11%; bottom: 17%; }
.portrait-frame { outline: 1px solid #edcb9a42; outline-offset: 6px; }

.category-band { background: #f1e4d5; border-block: 1px solid #d8c3aa; }
.category-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 18px clamp(12px, 2vw, 26px);
  transition: background .2s;
}
.category-links a + a { border-left: 1px solid #d8c3aa; }
.category-links a:hover { background: #fffbf4; }
.category-symbol {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 1px solid #bd9977;
  border-radius: 50%;
  color: var(--gold-ink);
  font: 400 25px/1 Georgia, serif;
}
.category-links strong { display: block; font: 700 clamp(22px, 3vw, 30px)/.95 var(--serif); }
.category-links small { display: block; margin-top: 4px; color: #695347; font-size: 12px; }
.category-arrow { color: var(--gold-ink); font-size: 19px; }

main {
  background:
    radial-gradient(circle at 18% 22%, #a8805c38 0 .6px, transparent 1px) 0 0 / 19px 19px,
    linear-gradient(150deg, #faf5ed, #f6ede3);
}
.catalog-heading { border-bottom: 1px solid #decdbc; padding-bottom: 20px; }
.catalog-heading > p { max-width: 350px; }
.service-card { border-color: #d9c7b4; box-shadow: 0 6px 14px #48312b0a; }
.card-image::after {
  position: absolute;
  inset: 7px;
  content: '';
  border: 1px solid #fff4dd8f;
  border-radius: 6px 6px 2px 2px;
  pointer-events: none;
}
.card-body .card-description { flex: 0; margin-bottom: 10px; }
.card-body .card-note {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 0;
  margin: auto 0 12px;
  color: #714c44;
  font: 600 italic 18px/1.1 var(--serif);
}
.card-note span { color: #946b47; font: 400 13px/1 Georgia, serif; }

.draw-section { padding: 0 0 25px; }
.draw-panel {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(25px, 5vw, 74px);
  padding: clamp(32px, 6vw, 72px);
  border: 1px solid #8c6276;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 30%, #edcb9a5c 0 .7px, transparent 1.3px) 0 0 / 72px 81px,
    radial-gradient(ellipse at 81% 35%, #543549, #2a1d2e 74%);
  color: var(--paper);
  box-shadow: inset 0 0 0 7px #f8d0b009, 0 15px 30px #3a26341e;
}
.draw-panel .eyebrow { color: var(--gold); }
.draw-copy h2, .questions h2 {
  margin-block: 9px 12px;
  font: 700 clamp(44px, 5.7vw, 75px)/.88 var(--serif);
  letter-spacing: -.045em;
}
.draw-copy > p:not(.eyebrow) { max-width: 330px; color: #e9d9e3; }
.draw-copy .button { margin-top: 20px; }
.draw-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 17px); }
.draw-card {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 110px;
  aspect-ratio: .71;
  padding: 12px 4px;
  border: 1px solid #d6a97a;
  border-radius: 8px;
  background:
    radial-gradient(ellipse, #9d6f8e60 0%, transparent 72%),
    repeating-linear-gradient(45deg, #edcb9a15 0 1px, transparent 1px 10px),
    #442d47;
  color: #f6d7aa;
  box-shadow: 0 7px 15px #21172393;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.draw-card::before {
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid #edcb9a85;
  border-radius: 5px;
  content: '';
}
.draw-card:not([aria-disabled]):hover { transform: translateY(-5px); box-shadow: 0 11px 18px #211723a8; }
.draw-card[aria-disabled] { cursor: default; }
.draw-card[aria-disabled]:not(.is-revealed) { opacity: .62; }
.draw-card.is-revealed { background: #f1d6ab; color: #4a2d3e; box-shadow: 0 0 28px #f0b98954; }
.draw-card.is-revealed::before { border-color: #8a5966; }
.draw-symbol { font: 400 clamp(26px, 4vw, 50px)/1 Georgia, serif; }
.draw-number { margin-top: 6px; font: 600 16px/1 var(--serif); }
.draw-result { min-height: 72px; margin-top: 13px; color: #eee1ea; font-size: 13px; }
.draw-result strong:not(:empty) { display: block; color: #f6d7aa; font: 700 27px/1.05 var(--serif); }
.draw-result p { margin-top: 3px; }

.questions {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(24px, 6vw, 92px);
  padding-block: 65px 84px;
}
.question-list { border-top: 1px solid #cfb89f; }
.question-list details { border-bottom: 1px solid #cfb89f; }
.question-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 13px;
  padding: 13px 2px;
  list-style: none;
  cursor: pointer;
  font: 700 25px/1.05 var(--serif);
}
.question-list summary::-webkit-details-marker { display: none; }
.question-list summary::after { color: var(--gold-ink); content: '+'; font: 400 23px/1 var(--sans); }
.question-list details[open] summary::after { content: '−'; }
.question-list details p { padding: 0 18px 15px 2px; color: var(--muted); font-size: 14px; }
.footer-note { max-width: 440px; margin-top: 12px; color: #e9d9e3; }

@media (max-width: 960px) {
  .shell { width: calc(100% - 60px); }
  .hero-inner { min-height: 550px; }
  .hero h1 { font-size: clamp(70px, 11vw, 102px); }
  .catalog-grid { gap: 14px; }
  .card-body { padding-inline: 15px; }
  .card-body h3 { font-size: 28px; }
  .card-image { height: 145px; }
}

@media (max-width: 700px) {
  .shell { width: calc(100% - 38px); }
  .header-inner { grid-template-columns: 1fr auto; min-height: 61px; gap: 12px; }
  .brand { font-size: 28px; gap: 7px; }
  .brand-mark { font-size: 21px; }
  .primary-nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; padding-bottom: 27px; }
  #top, .draw-section { scroll-margin-top: 61px; }
  .hero::before { inset: 8px; }
  .hero-copy { padding: 44px 0 16px; }
  .hero h1 { margin-block: 13px 13px; font-size: clamp(68px, 15.8vw, 106px); }
  .hero-description { margin-bottom: 21px; }
  .hero-art { min-height: 295px; max-width: 430px; width: 100%; margin-inline: auto; }
  .portrait-frame { width: min(58%, 233px); padding: 5px; }
  .orbit { width: min(81%, 303px); }
  .orbit-inner { width: min(76%, 284px); }
  .hero-star-top { right: 12%; top: 11%; font-size: 35px; }
  .hero-star-bottom { left: 11%; bottom: 18%; font-size: 28px; }
  .orbit-sign { width: 35px; font-size: 21px; }
  .orbit-sign-moon { left: 13%; }
  .orbit-sign-sun { right: 13%; }
  .category-links a { grid-template-columns: 1fr; justify-items: center; gap: 5px; padding: 10px 5px 12px; text-align: center; }
  .category-symbol { width: 34px; font-size: 19px; }
  .category-links small { max-width: 130px; font-size: 10px; line-height: 1.25; }
  .category-arrow { display: none; }
  .catalog { padding-block: 50px 60px; scroll-margin-top: 60px; }
  .catalog-heading { display: block; margin-bottom: 18px; }
  .catalog-heading > p { margin-top: 8px; padding-bottom: 0; }
  .filters { gap: 7px; margin-bottom: 18px; }
  .filters button { padding: 7px 10px; min-height: 36px; font-size: 12px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draw-panel, .questions { grid-template-columns: 1fr; }
  .draw-panel { padding: 25px; }
  .draw-deck { max-width: 390px; }
  .draw-copy .button { margin-top: 12px; }
  .draw-result { min-height: 69px; }
  .questions { padding-block: 36px 58px; }
  .footer-main { grid-template-columns: 1fr; gap: 22px; padding-bottom: 34px; }
  .site-footer { padding-top: 43px; scroll-margin-top: 60px; }
}

@media (max-width: 490px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .card-image { height: clamp(156px, 47vw, 196px); }
  .card-body { padding-inline: 17px; }
  .card-body h3 { font-size: 31px; }
  .hero-actions { gap: 7px; }
  .hero-actions .button { padding-inline: 11px; gap: 8px; }
  .category-links strong { font-size: clamp(18px, 5vw, 23px); }
  .dialog-head, .dialog-foot, .cart-summary { padding-inline: 14px; }
  .service-options, .cart-items { padding-inline: 14px; }
  .dialog-foot { flex-wrap: wrap; }
  .option-add { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}