:root {
  --ink: #08060b;
  --ink-2: #100a15;
  --panel: rgba(20, 10, 27, 0.82);
  --panel-solid: #160d1d;
  --wine: #5c123b;
  --violet: #6f2a91;
  --violet-soft: #b76bd1;
  --ember: #d64739;
  --copper: #c77a54;
  --copper-soft: #e6aa7c;
  --ivory: #f4e9db;
  --mist: #cbbdcb;
  --line: rgba(230, 170, 124, 0.23);
  --line-bright: rgba(230, 170, 124, 0.48);
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Animated smoke, glows and the off-canvas navigation must never create a
     horizontal page that can be dragged on touch devices. */
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--ivory);
  background:
    radial-gradient(circle at 78% 8%, rgba(113, 34, 141, 0.2), transparent 26rem),
    radial-gradient(circle at 13% 44%, rgba(117, 17, 63, 0.14), transparent 30rem),
    var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .36;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.34) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(201,117,206,.26) 0 1px, transparent 1.5px);
  background-size: 83px 83px, 137px 137px;
  background-position: 7px 9px, 33px 57px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--ivory); color: var(--ink); }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(8, 6, 11, .94), rgba(8, 6, 11, .72));
  backdrop-filter: blur(18px);
  transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled { border-color: var(--line); background: rgba(8, 6, 11, .94); }
.header-inner { height: 118px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; transform-origin: left center; animation: brand-reveal 1.1s cubic-bezier(.16,.8,.24,1) both; }
.brand-mark { width: 108px; height: 108px; flex: 0 0 auto; position: relative; transform-style: preserve-3d; background: url("assets/witch-medallion-logo-sofia.png?v=2") center / contain no-repeat; filter: drop-shadow(0 0 22px rgba(111,42,145,.28)); animation: logo-turn 12s ease-in-out infinite; transition: filter .45s ease; }
.brand-mark::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 42%, rgba(230,170,124,.12) 52%, rgba(240,176,125,.95) 56%, rgba(230,170,124,.14) 61%, transparent 70% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); animation: logo-orbit 5.5s linear infinite; filter: drop-shadow(0 0 6px rgba(230,170,124,.35)); }
.brand-mark::after { content: "✦"; position: absolute; left: 50%; top: 0; color: var(--copper-soft); font-size: .72rem; text-shadow: 0 0 14px rgba(230,170,124,.9); transform-origin: 0 53px; animation: logo-star-orbit 5.5s linear infinite; }
.brand:hover .brand-mark { filter: drop-shadow(0 0 32px rgba(199,122,84,.4)) drop-shadow(0 0 25px rgba(111,42,145,.32)); animation: logo-turn-fast 2.4s cubic-bezier(.55,.05,.35,1) infinite; }
.brand-name { position: relative; display: grid; align-items: center; min-width: 252px; line-height: .86; font-family: var(--serif); text-transform: none; animation: name-breathe 6s ease-in-out infinite; }
.brand-name::after { content: ""; position: absolute; left: 0; right: 4%; bottom: -11px; height: 1px; background: linear-gradient(90deg, transparent, rgba(230,170,124,.92) 16%, rgba(230,170,124,.18) 78%, transparent); background-size: 180% 100%; animation: name-line 4.8s ease-in-out infinite; }
.brand-first { margin: 0 0 5px .02em; font-family: "Snell Roundhand", "Apple Chancery", "URW Chancery L", cursive; font-size: 1.55rem; font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; background: linear-gradient(180deg, #f0b07d 0%, #c25e5f 48%, #741a38 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(139,36,60,.25)); }
.brand-name strong { position: relative; color: var(--ivory); font-family: "Copperplate", "Copperplate Gothic Light", "Trajan Pro", Georgia, serif; font-size: 1.82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; background: linear-gradient(180deg, #fff0e1 0%, #d3776d 28%, #9a2946 58%, #601228 82%, #c96159 100%); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: .25px rgba(255,236,215,.16); filter: drop-shadow(0 2px 0 rgba(38,3,15,.75)) drop-shadow(0 0 11px rgba(131,32,57,.22)); transition: letter-spacing .45s ease, filter .35s ease, background-position .45s ease; }
.brand-name strong::after { content: ""; position: absolute; left: 5%; right: 12%; bottom: -5px; height: 3px; background: radial-gradient(circle at 28% 100%, #6d142b 0 1px, transparent 2px), radial-gradient(circle at 71% 100%, #8d263e 0 1.5px, transparent 2.5px), linear-gradient(90deg, transparent, rgba(150,48,66,.72) 18%, rgba(108,24,45,.82) 70%, transparent); opacity: .72; }
.brand:hover .brand-name strong { letter-spacing: .09em; background-position: 0 100%; filter: drop-shadow(0 2px 0 rgba(38,3,15,.75)) drop-shadow(0 0 16px rgba(163,45,65,.3)); }
.main-nav { justify-self: end; display: flex; gap: 3px; align-items: center; padding: 4px; border: 1px solid rgba(230,170,124,.1); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(111,42,145,.035)); box-shadow: inset 0 0 24px rgba(111,42,145,.04); }
.main-nav a { color: var(--mist); font-size: .7rem; letter-spacing: .105em; text-transform: uppercase; white-space: nowrap; position: relative; isolation: isolate; overflow: hidden; padding: 11px 11px; border-radius: 999px; transition: color .28s ease, transform .28s ease, text-shadow .28s ease, box-shadow .28s ease; }
.main-nav a::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 120%, rgba(199,122,84,.22), transparent 58%), linear-gradient(90deg, transparent, rgba(111,42,145,.16), transparent); opacity: 0; transform: scale(.72); transition: opacity .32s ease, transform .32s ease; }
.main-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 5px; height: 1px; background: linear-gradient(90deg, transparent, var(--copper-soft), transparent); box-shadow: 0 0 9px rgba(230,170,124,.5); transition: left .3s ease, right .3s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--ivory); transform: translateY(-1px); text-shadow: 0 0 13px rgba(230,170,124,.3); box-shadow: inset 0 0 18px rgba(111,42,145,.12); }
.main-nav a:hover::before, .main-nav a.active::before { opacity: 1; transform: scale(1); }
.main-nav a:hover::after, .main-nav a.active::after { left: 18%; right: 18%; }

@keyframes brand-reveal { 0% { opacity: 0; transform: translateX(-18px) scale(.96); filter: blur(5px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes logo-turn { 0%, 12% { transform: perspective(620px) rotateY(0deg) scale(1); } 47% { transform: perspective(620px) rotateY(180deg) scale(1.035); } 84%, 100% { transform: perspective(620px) rotateY(360deg) scale(1); } }
@keyframes logo-orbit { to { transform: rotate(360deg); } }
@keyframes logo-star-orbit { 0% { transform: rotate(0deg) scale(.72); opacity: .45; } 50% { transform: rotate(180deg) scale(1.15); opacity: 1; } 100% { transform: rotate(360deg) scale(.72); opacity: .45; } }
@keyframes logo-turn-fast { to { transform: perspective(620px) rotateY(360deg) scale(1.04); } }
@keyframes name-breathe { 0%, 100% { opacity: .92; transform: translateX(0); } 50% { opacity: 1; transform: translateX(2px); } }
@keyframes name-line { 0%, 100% { background-position: 100% 0; opacity: .45; } 50% { background-position: 0 0; opacity: 1; } }
.header-actions { display: flex; align-items: center; gap: 10px; }
.cart-button, .menu-button { position: relative; isolation: isolate; border: 1px solid rgba(230,170,124,.34); background: radial-gradient(circle at 35% 28%, rgba(111,42,145,.28), rgba(17,8,21,.92) 64%); min-width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 18px rgba(199,122,84,.05), 0 0 0 1px rgba(255,255,255,.015); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.cart-button::before, .menu-button::before { content: ""; position: absolute; z-index: -1; inset: 4px; border: 1px solid rgba(230,170,124,.13); border-top-color: rgba(230,170,124,.52); border-radius: inherit; transition: transform .55s ease, border-color .3s ease; }
.cart-button:hover, .menu-button:hover, .menu-button.is-open { border-color: var(--copper-soft); transform: translateY(-2px); box-shadow: inset 0 0 22px rgba(111,42,145,.2), 0 0 22px rgba(199,122,84,.15); }
.cart-button:hover::before, .menu-button:hover::before, .menu-button.is-open::before { transform: rotate(180deg); border-color: rgba(230,170,124,.48); }
.cart-glyph { width: 21px; height: 20px; position: relative; display: block; margin-top: 4px; border: 1.4px solid var(--copper-soft); border-radius: 3px 3px 8px 8px; box-shadow: inset 0 0 8px rgba(111,42,145,.16); transition: transform .3s ease, box-shadow .3s ease; }
.cart-glyph::before { content: ""; position: absolute; left: 5px; top: -7px; width: 9px; height: 8px; border: 1.4px solid var(--copper-soft); border-bottom: 0; border-radius: 8px 8px 0 0; }
.cart-glyph::after { content: "✦"; position: absolute; inset: 1px 0 0; display: grid; place-items: center; color: var(--ivory); font-size: .48rem; text-shadow: 0 0 7px rgba(230,170,124,.8); }
.cart-button:hover .cart-glyph { transform: translateY(-1px) scale(1.04); box-shadow: inset 0 0 10px rgba(111,42,145,.3), 0 0 10px rgba(230,170,124,.12); }
.cart-count { position: absolute; z-index: 3; right: -3px; top: -5px; min-width: 19px; height: 19px; padding: 0 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #b74f48, #74233d); box-shadow: 0 3px 12px rgba(0,0,0,.4); font-size: .63rem; font-weight: 700; }
.menu-glyph { width: 22px; height: 18px; position: relative; display: block; }
.menu-glyph i { position: absolute; right: 1px; height: 1px; background: linear-gradient(90deg, transparent, var(--copper-soft) 22%, var(--ivory)); box-shadow: 0 0 6px rgba(230,170,124,.3); transform-origin: center; transition: top .35s ease, width .35s ease, opacity .25s ease, transform .35s ease; }
.menu-glyph i:nth-child(1) { top: 2px; width: 16px; }
.menu-glyph i:nth-child(2) { top: 8px; width: 21px; }
.menu-glyph i:nth-child(3) { top: 14px; width: 12px; }
.menu-button:hover .menu-glyph i { width: 21px; }
.menu-button.is-open .menu-glyph i:nth-child(1) { top: 8px; width: 21px; transform: rotate(45deg); }
.menu-button.is-open .menu-glyph i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-button.is-open .menu-glyph i:nth-child(3) { top: 8px; width: 21px; transform: rotate(-45deg); }
.menu-button { display: none; }

.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--copper); border-radius: 999px; padding: 0 26px; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(244,233,219,.11); border-radius: inherit; pointer-events: none; }
.button::after { content: ""; position: absolute; z-index: -1; width: 45px; height: 140%; left: -70px; top: -20%; transform: skewX(-22deg); background: rgba(255,255,255,.22); transition: left .5s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(199,122,84,.22), 0 0 28px rgba(111,42,145,.12); }
.button:hover::after { left: calc(100% + 30px); }
.button-primary { color: #fff8ef; background: linear-gradient(135deg, #8d3155, #5d193e 45%, #31102d); font-weight: 700; box-shadow: inset 0 0 18px rgba(255,255,255,.05); }
.button-ghost { background: linear-gradient(135deg, rgba(199,122,84,.08), rgba(111,42,145,.06)); color: var(--ivory); }
.button-small { min-height: 44px; padding-inline: 18px; }
.eyebrow { margin: 0 0 18px; color: var(--copper-soft); letter-spacing: .24em; text-transform: uppercase; font-size: .7rem; font-weight: 700; }
.eyebrow::before { content: ""; display: inline-block; width: 34px; height: 1px; background: var(--copper); margin-right: 12px; vertical-align: middle; }
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: .98; margin: 0; }
.section-title { font-size: clamp(2.4rem, 5vw, 4.9rem); max-width: 820px; }
.muted { color: var(--mist); }
.accent { color: var(--copper-soft); font-style: italic; }

.hero { min-height: calc(100vh - 88px); display: grid; align-items: stretch; position: relative; border-bottom: 1px solid var(--line); }
.hero-grid { width: min(1440px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr); min-height: 760px; }
.hero-copy { padding: 110px max(54px, calc((100vw - 1180px) / 2)) 80px max(54px, calc((100vw - 1180px) / 2)); padding-right: 56px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.hero-copy h1 { font-size: clamp(4rem, 7.2vw, 7.2rem); }
.hero-copy h1 span { display: block; color: var(--copper-soft); font-style: italic; }
.hero-copy > p:not(.eyebrow):not(.hero-note) { color: var(--mist); max-width: 590px; font-size: 1.08rem; margin: 30px 0; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin: 30px 0 0; color: #9e8e9f; font-size: .78rem; letter-spacing: .06em; }
.hero-media { position: relative; min-height: 700px; overflow: hidden; }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ink) 0%, transparent 21%), linear-gradient(0deg, rgba(8,6,11,.6), transparent 32%); }
.hero-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 44%; filter: saturate(.95) contrast(1.04); }
.hero-sigil { position: absolute; z-index: 3; left: 8%; bottom: 8%; border-left: 1px solid var(--copper); padding: 12px 0 12px 18px; color: var(--ivory); font-family: var(--serif); font-size: 1.1rem; max-width: 260px; text-shadow: 0 2px 15px #000; }

.section { padding: 120px 0; position: relative; }
.section-compact { padding: 80px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 56px; }
.section-heading > p { max-width: 440px; color: var(--mist); margin: 0; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--copper); margin-bottom: 44px; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 80px; background: linear-gradient(90deg, transparent, var(--copper)); }
.ornament::after { transform: scaleX(-1); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; padding: 44px 0 52px; }
.ritual-card { --mirror-margin: 72px 46px 48px; min-width: 0; min-height: 620px; position: relative; isolation: isolate; background: transparent; filter: drop-shadow(0 30px 34px rgba(0,0,0,.58)); transition: transform .5s cubic-bezier(.2,.75,.2,1), filter .45s ease; }
.ritual-card::before { content: ""; position: absolute; z-index: 0; inset: 13% 7% 5%; border-radius: 48%; pointer-events: none; opacity: .46; background: radial-gradient(ellipse, rgba(91,34,101,.2), transparent 68%); filter: blur(18px); transition: opacity .45s ease, transform .55s ease; }
.ritual-card::after { content: none; }
.ritual-card:hover { transform: translateY(-5px); filter: drop-shadow(0 36px 40px rgba(0,0,0,.7)) drop-shadow(0 0 17px rgba(144,88,70,.14)); }
.ritual-card:hover::before { opacity: .8; transform: scale(1.04); }
.mirror-carving { position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: #a17150; }
.mirror-carving path, .mirror-carving circle, .mirror-carving ellipse, .mirror-carving rect { vector-effect: non-scaling-stroke; }
.frame-heavy { fill: none; stroke: #21161c; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.frame-ridge { fill: none; stroke: #966a4e; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(221,158,109,.16)); transition: stroke .4s ease, filter .4s ease; }
.frame-inner { fill: none; stroke: rgba(211,168,130,.34); stroke-width: 1.35; stroke-linejoin: round; }
.filigree { fill: none; stroke: #956445; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .88; filter: drop-shadow(0 1px 0 #09070a); }
.engraving { fill: none; stroke: rgba(176,122,86,.62); stroke-width: 1.25; stroke-linecap: square; stroke-linejoin: miter; }
.frame-inlay { stroke: #c08b65; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(0,0,0,.9)); transition: filter .4s ease, fill .4s ease; }
.frame-inlay--ruby { fill: #781f2d; stroke: #d28c78; }
.frame-ridge { animation: metal-alive 7s ease-in-out infinite; }
.frame-inlay--center { animation: ruby-alive 3.8s ease-in-out infinite; }
.ritual-card:hover .frame-ridge { stroke: #c18b62; filter: drop-shadow(0 0 5px rgba(219,154,108,.3)); }
.ritual-card:hover .frame-inlay { filter: drop-shadow(0 0 8px rgba(184,91,119,.45)); }
.mirror-glass { min-height: 500px; position: relative; z-index: 2; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; margin: var(--mirror-margin); padding: 86px 25px 38px; border: 1px solid rgba(183,138,102,.34); border-radius: 47% 47% 13% 13% / 20% 20% 8% 8%; background: radial-gradient(ellipse at 56% 13%, rgba(159,125,149,.12), transparent 29%), radial-gradient(circle at 23% 46%, rgba(176,131,122,.055), transparent 27%), linear-gradient(148deg, rgba(37,29,39,.98), rgba(7,7,11,.995) 52%, rgba(24,17,27,.99)); box-shadow: inset 0 0 0 4px rgba(7,5,9,.85), inset 0 0 45px rgba(0,0,0,.88), 0 0 0 4px rgba(46,28,35,.9), 0 18px 36px rgba(0,0,0,.42); animation: mirror-breathe 8s ease-in-out infinite; }
.mirror-glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .62; background: radial-gradient(circle at 73% 22%, rgba(238,224,210,.07) 0 1px, transparent 2px), radial-gradient(circle at 31% 69%, rgba(238,224,210,.04) 0 1px, transparent 2px), linear-gradient(108deg, transparent 13%, rgba(235,226,215,.045) 32%, transparent 47%); background-size: 83px 91px, 107px 123px, auto; mix-blend-mode: screen; }
.mirror-glass::after { content: ""; position: absolute; z-index: 0; top: -18%; left: -58%; width: 32%; height: 145%; pointer-events: none; opacity: 0; transform: skewX(-13deg); background: linear-gradient(90deg, transparent, rgba(224,214,204,.105), transparent); filter: blur(2px); }
.ritual-card:hover .mirror-glass::after { animation: mirror-glint 1.8s ease-out both; }
@keyframes mirror-glint { 0% { left: -58%; opacity: 0; } 30% { opacity: .58; } 100% { left: 132%; opacity: 0; } }
@keyframes metal-alive { 0%, 100% { stroke: #74503c; filter: drop-shadow(0 0 0 transparent); } 50% { stroke: #a47151; filter: drop-shadow(0 0 4px rgba(204,139,93,.18)); } }
@keyframes ruby-alive { 0%, 100% { opacity: .72; filter: drop-shadow(0 0 3px rgba(95,13,27,.35)); } 50% { opacity: 1; filter: drop-shadow(0 0 9px rgba(185,39,60,.72)); } }
@keyframes mirror-breathe { 0%, 100% { filter: brightness(.97); } 50% { filter: brightness(1.035); } }
.mirror-content, .mirror-glass .card-link, .mirror-number { position: relative; z-index: 5; }
.mirror-number { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); color: rgba(190,156,126,.46); font-family: var(--serif); font-size: .62rem; letter-spacing: .45em; text-indent: .45em; }
.mirror-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card-icon { width: 64px; height: 64px; border: 1px solid rgba(190,143,109,.48); border-radius: 50%; display: grid; place-items: center; color: #c79b77; background: radial-gradient(circle at 50% 42%, rgba(119,46,88,.22), rgba(10,8,13,.92) 70%); box-shadow: 0 0 0 4px rgba(72,45,54,.72), inset 0 0 22px rgba(114,49,120,.22), 0 10px 20px rgba(0,0,0,.34); transition: color .35s ease, box-shadow .35s ease; }
.ritual-card:hover .card-icon { color: #f0dfcf; box-shadow: 0 0 0 4px rgba(94,58,67,.78), inset 0 0 22px rgba(125,53,130,.28), 0 0 18px rgba(160,87,131,.14); }
.service-icon { width: 46px; height: 46px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(194,118,94,.18)); }
.service-icon__gem, .service-icon__cap, .service-icon__veil { fill: #771f31; stroke: #d1987a; }
.service-icon__ring { transform-box: fill-box; transform-origin: center; animation: bond-breathe 4.6s ease-in-out infinite; }
.service-icon__ring--right { animation-delay: -2.3s; }
.service-icon__spark { animation: icon-glimmer 3.2s ease-in-out infinite; }
.service-icon__gem { animation: icon-glimmer 3.2s ease-in-out infinite .35s; }
.service-icon__post { stroke: rgba(211,170,137,.9); }
.service-icon__sign { fill: rgba(83,27,48,.58); stroke: #cf9a78; transform-box: fill-box; transform-origin: center; animation: sign-alive 4.6s ease-in-out infinite; }
.service-icon__sign--right { animation-delay: -2.3s; }
.service-icon__cap { animation: choice-pulse 3.6s ease-in-out infinite; }
.service-icon__veil { transform-box: fill-box; transform-origin: center; animation: shadow-drift 5.5s ease-in-out infinite; }
.service-icon__star { animation: icon-glimmer 3.8s ease-in-out infinite; }
@keyframes bond-breathe { 0%, 100% { transform: translateX(0); opacity: .72; } 50% { transform: translateX(1px); opacity: 1; } }
@keyframes icon-glimmer { 0%, 100% { opacity: .5; filter: drop-shadow(0 0 0 transparent); } 50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(219,103,119,.72)); } }
@keyframes sign-alive { 0%, 100% { transform: translateX(0); opacity: .72; } 50% { transform: translateX(1.25px); opacity: 1; filter: drop-shadow(0 0 5px rgba(182,48,72,.36)); } }
@keyframes choice-pulse { 0%, 100% { opacity: .66; filter: drop-shadow(0 0 2px rgba(121,26,49,.28)); } 50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(190,50,76,.7)); } }
@keyframes shadow-drift { 0%, 100% { transform: translateX(-1.5px); opacity: .72; } 50% { transform: translateX(2px); opacity: 1; } }
.ritual-card h3 { max-width: 260px; font-family: var(--serif); font-size: clamp(1.65rem, 2vw, 1.95rem); line-height: 1.08; font-weight: 400; margin: 25px auto 14px; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.84); }
.ritual-card p { max-width: 250px; color: #aaa0aa; margin: 0 auto; line-height: 1.66; }
.ritual-card .card-link { align-self: center; justify-content: center; text-align: center; color: #b98c6c; }
.mirror-crown, .mirror-side, .mirror-foot { display: none; }
.card-link { margin-top: 30px; color: var(--copper-soft); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.card-link::after { content: "→"; transition: transform .2s ease; }
.card-link:hover::after { transform: translateX(5px); }

.split { display: grid; grid-template-columns: .88fr 1.12fr; gap: 72px; align-items: center; }
.portrait-panel { min-height: 640px; position: relative; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.portrait-panel img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 46% 58%; }
.portrait-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,11,.75), transparent 55%); }
.portrait-seal { position: absolute; z-index: 2; right: 24px; bottom: 24px; width: 118px; height: 118px; border: 1px solid var(--copper); border-radius: 50%; display: grid; place-items: center; color: var(--copper-soft); background: rgba(8,6,11,.58); font-family: var(--serif); text-align: center; line-height: 1.2; }
.split-copy p { color: var(--mist); }
.feature-list { margin: 34px 0; display: grid; gap: 16px; }
.feature { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.feature span:first-child { color: var(--copper-soft); }
.feature strong { display: block; font-family: var(--serif); font-size: 1.16rem; font-weight: 400; margin-bottom: 2px; }
.feature small { color: var(--mist); }

.matrix-feature { border-block: 1px solid var(--line); background: radial-gradient(circle at 72% 45%, rgba(119,41,137,.28), transparent 31rem), rgba(255,255,255,.014); }
.matrix-grid { display: grid; grid-template-columns: 1fr .88fr; gap: 70px; align-items: center; }
.matrix-visual { width: min(440px, 100%); aspect-ratio: 1; margin-inline: auto; position: relative; border: 1px solid var(--line-bright); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 90px rgba(119,41,137,.2), 0 0 70px rgba(111,42,145,.12); }
.matrix-visual::before, .matrix-visual::after { content: ""; position: absolute; inset: 14%; border: 1px solid var(--line); transform: rotate(45deg); }
.matrix-visual::after { transform: rotate(0deg); }
.matrix-center { width: 116px; height: 116px; border-radius: 50%; border: 1px solid var(--copper); background: var(--panel-solid); display: grid; place-items: center; font-family: var(--serif); color: var(--copper-soft); font-size: 3rem; z-index: 2; }
.matrix-node { position: absolute; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line-bright); background: var(--ink-2); display: grid; place-items: center; color: var(--ivory); z-index: 2; }
.matrix-node.n1 { top: 4%; left: calc(50% - 31px); }
.matrix-node.n2 { right: 4%; top: calc(50% - 31px); }
.matrix-node.n3 { bottom: 4%; left: calc(50% - 31px); }
.matrix-node.n4 { left: 4%; top: calc(50% - 31px); }

.cta-band { padding: 84px 0; border-block: 1px solid var(--line); background: linear-gradient(120deg, rgba(92,18,59,.18), rgba(111,42,145,.1)); text-align: center; }
.cta-band h2 { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 400; margin: 0 0 20px; }
.cta-band p { color: var(--mist); max-width: 620px; margin: 0 auto 30px; }

.page-hero { padding: 120px 0 88px; border-bottom: 1px solid var(--line); text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; width: 500px; height: 500px; border: 1px solid rgba(199,122,84,.13); border-radius: 50%; left: calc(50% - 250px); top: -310px; box-shadow: 0 0 90px rgba(111,42,145,.14); }
.page-hero .eyebrow::before { display: none; }
.page-hero h1 { font-size: clamp(3.5rem, 8vw, 7rem); }
.page-hero p:last-child { color: var(--mist); max-width: 680px; margin: 24px auto 0; }

.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.about-story .story-image { position: sticky; top: 110px; min-height: 720px; border: 1px solid var(--line); overflow: hidden; }
.story-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 56% 52%; }
.story-content h2 { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 400; line-height: 1.08; }
.story-content p { color: var(--mist); }
.quote { border-left: 1px solid var(--copper); margin: 42px 0; padding: 8px 0 8px 28px; font-family: var(--serif); color: var(--ivory); font-size: 1.65rem; line-height: 1.45; }
.book-hero h1 { font-family: "Snell Roundhand", "Apple Chancery", "URW Chancery L", Georgia, serif; letter-spacing: -.02em; }
.book-section { overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(88,31,92,.16), transparent 34rem); }
.book-intro { max-width: 850px; margin: 0 auto; text-align: center; }
.book-intro .eyebrow::before { display: none; }
.book-intro .section-title { max-width: none; }
.book-intro > p:last-child { max-width: 720px; margin: 24px auto 0; color: var(--mist); }
.ancient-book { min-height: 900px; margin-top: 64px; display: grid; place-items: center; perspective: 2100px; position: relative; isolation: isolate; }
.ancient-book::before { content: ""; position: absolute; z-index: -2; width: min(1040px, 92vw); height: 190px; bottom: 18px; border-radius: 50%; background: radial-gradient(ellipse, rgba(96,26,69,.4), rgba(0,0,0,.78) 68%); filter: blur(38px); transform: rotateX(68deg); }
.book-aura { position: absolute; z-index: -1; width: min(780px, 90vw); aspect-ratio: 1; border: 1px solid rgba(194,134,78,.12); border-radius: 50%; pointer-events: none; animation: book-aura-breathe 5.8s ease-in-out infinite; }
.book-aura::before, .book-aura::after { content: ""; position: absolute; inset: 10%; border: 1px dashed rgba(158,72,119,.14); border-radius: 50%; animation: book-aura-spin 42s linear infinite; }
.book-aura::after { inset: 25%; border-style: solid; border-color: rgba(230,170,124,.1); animation-direction: reverse; animation-duration: 28s; }
.book-aura i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #dfa26b; box-shadow: 0 0 14px 4px rgba(168,55,112,.44); animation: book-spark 3.6s ease-in-out infinite; }
.book-aura i:nth-of-type(1) { left: 8%; top: 36%; }.book-aura i:nth-of-type(2) { left: 29%; top: 7%; animation-delay: -.7s; }.book-aura i:nth-of-type(3) { right: 14%; top: 22%; animation-delay: -1.8s; }.book-aura i:nth-of-type(4) { right: 7%; bottom: 31%; animation-delay: -2.4s; }.book-aura i:nth-of-type(5) { left: 24%; bottom: 8%; animation-delay: -1.2s; }.book-aura i:nth-of-type(6) { left: 4%; bottom: 27%; animation-delay: -3s; }
.book-aura span { position: absolute; color: rgba(227,181,124,.38); font-family: var(--serif); text-shadow: 0 0 14px rgba(171,60,111,.7); }
.book-aura span:nth-of-type(1) { top: 3%; left: 49%; }.book-aura span:nth-of-type(2) { right: 1%; top: 48%; }.book-aura span:nth-of-type(3) { bottom: 2%; left: 48%; transform: rotate(45deg); }
.book-cover, .book-reader { grid-area: 1 / 1; }
.book-cover { width: min(540px, calc(100vw - 46px)); aspect-ratio: .72; padding: 90px 58px 72px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #efd3a5; overflow: hidden; cursor: pointer; transform-style: preserve-3d; transform-origin: left center; border: 6px solid #12080e; border-left-width: 22px; border-radius: 7px 22px 22px 7px; background: radial-gradient(circle at 50% 42%, rgba(133,31,78,.46), transparent 28%), radial-gradient(circle at 16% 15%, rgba(230,170,124,.08), transparent 24%), repeating-linear-gradient(116deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px), linear-gradient(145deg, #4d142d 0%, #210a1a 38%, #0d0710 72%, #321028 100%); box-shadow: inset 0 0 0 2px rgba(230,170,124,.36), inset 0 0 0 13px rgba(8,4,8,.76), inset 18px 0 42px rgba(0,0,0,.72), inset 0 0 88px rgba(0,0,0,.42), 0 54px 100px rgba(0,0,0,.76), -9px 8px 0 #090508, -15px 14px 0 #806446, -20px 18px 0 #2d171c; transition: transform 1.08s cubic-bezier(.2,.72,.16,1), opacity .5s ease .45s, visibility 0s linear 1s, box-shadow .45s ease; }
.book-cover::before { content: ""; position: absolute; inset: 27px; border: 1px solid rgba(230,170,124,.7); box-shadow: inset 0 0 0 4px rgba(8,4,8,.72), inset 0 0 0 6px rgba(230,170,124,.18), 0 0 22px rgba(142,39,91,.2); clip-path: polygon(0 0, 28% 0, 31% 5px, 69% 5px, 72% 0, 100% 0, 100% 28%, calc(100% - 5px) 31%, calc(100% - 5px) 69%, 100% 72%, 100% 100%, 72% 100%, 69% calc(100% - 5px), 31% calc(100% - 5px), 28% 100%, 0 100%, 0 72%, 5px 69%, 5px 31%, 0 28%); }
.book-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: radial-gradient(circle at 18% 12%, rgba(255,225,173,.14) 0 1px, transparent 2px), radial-gradient(circle at 73% 62%, rgba(0,0,0,.3) 0 1px, transparent 2px), linear-gradient(105deg, transparent 42%, rgba(255,255,255,.04) 49%, transparent 55%); background-size: 59px 71px, 83px 97px, auto; mix-blend-mode: overlay; }
.book-cover:hover { transform: translateY(-9px) rotateY(-5deg); box-shadow: inset 0 0 0 2px rgba(230,170,124,.45), inset 0 0 0 13px rgba(8,4,8,.74), inset 18px 0 42px rgba(0,0,0,.72), inset 0 0 88px rgba(0,0,0,.42), 0 64px 110px rgba(0,0,0,.78), -9px 8px 0 #090508, -15px 14px 0 #806446, -20px 18px 0 #2d171c, 0 0 72px rgba(142,39,91,.28); }
.book-cover__ward { position: absolute; z-index: 3; top: 42px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: rgba(229,183,124,.56); font-size: .72rem; letter-spacing: .32em; }
.book-cover__kicker { position: relative; z-index: 2; margin-bottom: 24px; font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: 1.16rem; letter-spacing: .04em; color: rgba(244,221,185,.82); }
.book-cover strong { position: relative; z-index: 2; max-width: 410px; font-family: "Snell Roundhand", "Apple Chancery", "URW Chancery L", Georgia, serif; font-size: clamp(3.35rem, 7vw, 5.25rem); font-weight: 500; line-height: .85; letter-spacing: -.035em; text-align: center; color: #f2d5a8; text-shadow: 0 2px 0 #351018, 0 0 24px rgba(230,170,124,.22); }
.book-cover strong em { display: block; margin-top: 14px; color: #dd796f; font-weight: 500; text-shadow: 0 2px 0 #2b0a15, 0 0 28px rgba(185,45,89,.32); }
.book-cover__author { position: relative; z-index: 2; margin-top: 30px; padding-top: 18px; width: 68%; border-top: 1px solid rgba(223,169,99,.46); font-family: var(--serif); font-size: .88rem; letter-spacing: .18em; text-transform: uppercase; }
.book-cover__ornament { position: relative; z-index: 2; width: 98px; height: 98px; margin-bottom: 24px; border: 1px solid rgba(230,170,124,.54); border-radius: 50%; display: grid; place-items: center; transform: rotate(45deg); box-shadow: inset 0 0 0 6px rgba(7,3,7,.64), inset 0 0 0 7px rgba(230,170,124,.19), 0 0 28px rgba(151,37,91,.2); }
.book-cover__ornament::before, .book-cover__ornament::after { content: ""; position: absolute; width: 76%; height: 76%; border: 1px solid rgba(230,170,124,.42); transform: rotate(30deg); }
.book-cover__ornament::after { width: 54%; height: 54%; transform: rotate(60deg); }
.book-cover__ornament i { position: absolute; inset: 27%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f1978a 0 4%, #9d264c 32%, #380817 78%); box-shadow: 0 0 22px rgba(218,66,101,.64), inset 0 -7px 12px rgba(0,0,0,.5); animation: book-ruby-pulse 3s ease-in-out infinite; }
.book-cover__ornament b { position: relative; z-index: 2; color: #f1c98d; font-family: var(--serif); font-size: .8rem; letter-spacing: .08em; transform: rotate(-45deg); text-shadow: 0 1px 4px #000; }
.book-cover__seal { position: absolute; z-index: 3; right: 38px; bottom: 54px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(230,170,124,.52); border-radius: 50%; color: #d8a369; transform: rotate(-12deg); box-shadow: inset 0 0 0 4px rgba(7,3,7,.7); }
.book-cover__seal i { font-style: normal; font-size: 1.25rem; }.book-cover__seal b { position: absolute; font-size: .55rem; }
.book-cover__hint { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); white-space: nowrap; font-family: var(--serif); font-size: .73rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,209,162,.74); }
.book-cover__hint i { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border: 1px solid currentColor; transform: rotate(45deg); animation: book-hint-pulse 2.3s ease-in-out infinite; }
.book-cover__corner { position: absolute; z-index: 4; width: 76px; height: 76px; opacity: .88; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.book-cover__corner::before, .book-cover__corner::after { content: ""; position: absolute; background: linear-gradient(90deg, #735035, #d7aa70 46%, #765034); }
.book-cover__corner::before { width: 76px; height: 8px; clip-path: polygon(0 0,100% 0,86% 100%,0 100%); }
.book-cover__corner::after { width: 8px; height: 76px; clip-path: polygon(0 0,100% 0,100% 86%,0 100%); }
.book-cover__corner--tl { left: 16px; top: 16px; }.book-cover__corner--tr { right: 16px; top: 16px; transform: scaleX(-1); }.book-cover__corner--bl { left: 16px; bottom: 16px; transform: scaleY(-1); }.book-cover__corner--br { right: 16px; bottom: 16px; transform: scale(-1); }
.book-reader { width: min(1200px, calc(100vw - 36px)); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(22px) scale(.86) rotateX(4deg); transition: opacity .62s ease .38s, transform .92s cubic-bezier(.16,.78,.2,1) .28s, visibility 0s linear 1s; }
.ancient-book.is-open .book-cover { transform: translateX(-31%) rotateY(-155deg) scale(.84); opacity: 0; visibility: hidden; pointer-events: none; }
.ancient-book.is-open .book-reader { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: .42s, .34s, 0s; }
.ancient-book.is-open .book-aura { width: min(1260px, 98vw); }
.book-spread { width: 100%; aspect-ratio: 1.5; max-height: 790px; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 24px; border: 1px solid rgba(218,163,99,.62); border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(130,35,83,.26), transparent 24%), linear-gradient(90deg, #351223, #09050b 48%, #09050b 52%, #351223); box-shadow: inset 0 0 0 8px rgba(9,4,8,.9), inset 0 0 0 10px rgba(217,159,95,.2), inset 0 0 78px rgba(0,0,0,.72), 0 52px 100px rgba(0,0,0,.76), 0 0 55px rgba(130,32,82,.13); transform-style: preserve-3d; }
.book-spread::before { content: "✦        ☾        ✦        ☽        ✦"; position: absolute; z-index: 10; top: 7px; left: 50%; transform: translateX(-50%); color: rgba(229,177,112,.52); font-size: .58rem; letter-spacing: .5em; white-space: nowrap; pointer-events: none; }
.book-page { min-width: 0; height: 100%; position: relative; overflow: hidden; padding: 0; border: 0; background: #1e0a15; cursor: pointer; box-shadow: inset 0 0 30px rgba(34,8,18,.7); color: #3b2225; }
.book-page__paper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 7.5% 9% 8%; background: radial-gradient(circle at 53% 42%, rgba(255,255,255,.36), transparent 35%), radial-gradient(circle at 12% 8%, rgba(129,54,93,.17), transparent 28%), radial-gradient(circle at 88% 90%, rgba(97,37,76,.15), transparent 30%), repeating-linear-gradient(7deg, rgba(104,75,49,.028) 0 1px, transparent 1px 5px), linear-gradient(135deg, #d2c3ae, #ece4d4 42%, #cbb8a0); box-shadow: inset 0 0 42px rgba(75,40,29,.32), inset 0 0 0 1px rgba(255,247,225,.42); }
.book-page__paper::before { content: ""; position: absolute; inset: 3.2%; border: 1px solid rgba(105,58,47,.46); box-shadow: inset 0 0 0 4px rgba(236,216,181,.24), inset 0 0 0 5px rgba(129,67,52,.2); clip-path: polygon(0 0,30% 0,33% 4px,67% 4px,70% 0,100% 0,100% 30%,calc(100% - 4px) 33%,calc(100% - 4px) 67%,100% 70%,100% 100%,70% 100%,67% calc(100% - 4px),33% calc(100% - 4px),30% 100%,0 100%,0 70%,4px 67%,4px 33%,0 30%); }
.book-page__paper::after { content: ""; position: absolute; inset: 0; opacity: .48; pointer-events: none; background: radial-gradient(circle at 18% 16%, rgba(85,36,48,.16) 0 1px, transparent 2px), radial-gradient(circle at 74% 68%, rgba(62,35,20,.12) 0 1px, transparent 2px), linear-gradient(90deg, rgba(56,23,28,.18), transparent 8% 92%, rgba(56,23,28,.2)); background-size: 79px 83px, 97px 71px, auto; mix-blend-mode: multiply; }
.book-page__content { position: relative; z-index: 3; width: 100%; max-height: 100%; overflow: hidden; white-space: pre-line; text-align: center; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif; font-size: clamp(.66rem, 1.02vw, .96rem); font-weight: 500; line-height: 1.27; letter-spacing: .012em; color: #3a2228; text-shadow: 0 1px rgba(255,255,255,.36); }
.book-page.is-dense .book-page__content { font-size: clamp(.61rem, .9vw, .86rem); line-height: 1.22; }
.book-page.is-very-dense .book-page__content { font-size: clamp(.57rem, .82vw, .8rem); line-height: 1.19; }
.book-page__content::first-letter { font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: 1.58em; color: #7f263f; }
.book-page__watermark { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: "Baskerville", Georgia, serif; font-size: clamp(11rem, 20vw, 18rem); line-height: 1; color: rgba(96,35,79,.045); text-shadow: 0 0 36px rgba(89,34,81,.08); }
.book-page__number { position: absolute; z-index: 4; left: 50%; bottom: 3.2%; transform: translateX(-50%); font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: .84rem; color: rgba(83,43,45,.7); }
.book-page__number::before, .book-page__number::after { content: "✦"; margin: 0 11px; font-size: .46rem; color: #8d3b4e; }
.book-page__corner { position: absolute; z-index: 2; width: 52px; height: 52px; border-color: rgba(114,51,60,.46); pointer-events: none; }
.book-page__corner--one { top: 5.1%; left: 5.1%; border-top: 1px solid; border-left: 1px solid; }.book-page__corner--two { right: 5.1%; bottom: 5.1%; border-right: 1px solid; border-bottom: 1px solid; }
.book-page.is-title-page .book-page__content { display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 400; }
.book-page.is-title-page .book-page__content::first-letter { font-size: inherit; color: inherit; }
.book-title-kicker { font-family: var(--serif); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: #7b4d50; }
.book-title-moon { margin: 28px 0 23px; color: #762a4d; font-family: var(--serif); font-size: 1.2rem; letter-spacing: .5em; text-indent: .5em; text-shadow: 0 0 15px rgba(118,42,77,.22); }
.book-page.is-title-page strong { font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: clamp(3rem, 6.2vw, 5.25rem); font-weight: 500; line-height: .88; color: #4a2030; text-shadow: 0 2px rgba(255,255,255,.32); }
.book-page.is-title-page strong em { display: block; margin-top: 11px; color: #872c4b; font-weight: 500; }
.book-title-thread { width: 60%; height: 1px; margin: 30px 0 20px; background: linear-gradient(90deg, transparent, #9a614f, transparent); position: relative; }
.book-title-thread::after { content: "◇"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 0 9px; background: #ded2bf; color: #8c384c; }
.book-title-author { font-family: var(--serif); font-size: .88rem; letter-spacing: .22em; text-transform: uppercase; color: #5d3639; }
.book-page--left { border-radius: 12px 2px 2px 12px; transform-origin: right center; box-shadow: inset -26px 0 30px rgba(49,21,25,.24), -8px 9px 0 #8a715b, -12px 13px 0 #342022; }
.book-page--right { border-radius: 2px 12px 12px 2px; transform-origin: left center; box-shadow: inset 26px 0 30px rgba(49,21,25,.24), 8px 9px 0 #8a715b, 12px 13px 0 #342022; }
.book-page[disabled] { cursor: default; }
.book-page.is-empty { cursor: default; }
.book-page.is-empty .book-page__content { display: none; }
.book-spine { position: absolute; z-index: 6; left: 50%; top: 23px; bottom: 23px; width: 44px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(50,20,29,.34) 20%, rgba(255,255,255,.12) 47%, rgba(50,20,29,.36) 76%, transparent); box-shadow: inset 0 0 12px rgba(0,0,0,.18); }
.book-spine::after { content: ""; position: absolute; left: 50%; top: 7%; bottom: 7%; width: 1px; background: linear-gradient(transparent, rgba(128,76,52,.55), transparent); }
.book-turn-sheet { position: absolute; z-index: 8; top: 24px; right: 24px; bottom: 24px; width: calc(50% - 24px); opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.3), transparent 36%), linear-gradient(135deg, #cbbb9f, #eee6d5 48%, #c8b398); box-shadow: inset 0 0 38px rgba(72,37,27,.28); transform-style: preserve-3d; backface-visibility: hidden; }
.book-turn-sheet::before { content: attr(data-page); position: absolute; right: 9%; bottom: 7%; color: rgba(92,45,49,.6); font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; }
.book-turn-sheet::after { content: "☾"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(106,39,80,.08); font-family: var(--serif); font-size: 12rem; }
.ancient-book.is-turning-forward .book-turn-sheet { right: 24px; left: auto; transform-origin: left center; animation: page-turn-forward .72s cubic-bezier(.45,.05,.25,.98) both; }
.ancient-book.is-turning-back .book-turn-sheet { left: 24px; right: auto; transform-origin: right center; animation: page-turn-back .72s cubic-bezier(.45,.05,.25,.98) both; }
.book-controls { padding: 30px 18px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.book-control, .book-close { min-height: 46px; border: 1px solid rgba(214,160,108,.38); border-radius: 999px; background: linear-gradient(180deg, rgba(93,35,49,.52), rgba(18,9,14,.94)); color: #e7cba4; padding: 0 23px; cursor: pointer; font-family: var(--serif); letter-spacing: .06em; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.book-control:hover, .book-close:hover { transform: translateY(-2px); border-color: #d6a06c; box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 18px rgba(164,54,76,.12); }
.book-control:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; }
.book-counter { text-align: center; color: #bda98f; font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: 1.05rem; letter-spacing: .05em; }
.book-close { grid-column: 1 / -1; justify-self: center; min-height: 38px; padding-inline: 20px; border-color: transparent; background: transparent; color: rgba(203,189,203,.72); font-size: .82rem; }
.book-noscript { text-align: center; color: var(--mist); }
@keyframes book-hint-pulse { 0%, 100% { opacity: .4; box-shadow: 0 0 0 transparent; } 50% { opacity: 1; box-shadow: 0 0 11px rgba(211,117,99,.65); } }
@keyframes book-ruby-pulse { 0%, 100% { box-shadow: 0 0 17px rgba(218,66,101,.42), inset 0 -7px 12px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 34px rgba(218,66,101,.84), 0 0 64px rgba(119,32,91,.3), inset 0 -7px 12px rgba(0,0,0,.5); } }
@keyframes book-aura-spin { to { transform: rotate(360deg); } }
@keyframes book-aura-breathe { 0%, 100% { opacity: .46; filter: drop-shadow(0 0 14px rgba(118,38,93,.16)); } 50% { opacity: .82; filter: drop-shadow(0 0 28px rgba(118,38,93,.32)); } }
@keyframes book-spark { 0%, 100% { opacity: .18; transform: translateY(0) scale(.7); } 50% { opacity: .9; transform: translateY(-14px) scale(1.25); } }
@keyframes page-turn-forward { 0% { opacity: 1; transform: perspective(1500px) rotateY(0deg); box-shadow: -10px 0 22px rgba(0,0,0,.2); } 49% { opacity: 1; } 100% { opacity: 0; transform: perspective(1500px) rotateY(-178deg); box-shadow: -36px 0 44px rgba(0,0,0,.35); } }
@keyframes page-turn-back { 0% { opacity: 1; transform: perspective(1500px) rotateY(0deg); box-shadow: 10px 0 22px rgba(0,0,0,.2); } 49% { opacity: 1; } 100% { opacity: 0; transform: perspective(1500px) rotateY(178deg); box-shadow: 36px 0 44px rgba(0,0,0,.35); } }

/* Strict antique grimoire edition */
.ancient-book:not(.is-open) .book-aura { opacity: .2; filter: sepia(.8) saturate(.45); }
.ancient-book:not(.is-open) .book-aura i, .ancient-book:not(.is-open) .book-aura span { display: none; }
.book-cover { width: min(528px, calc(100vw - 46px)); padding: 94px 64px 76px; overflow: visible; border: 5px solid #090708; border-left-width: 24px; border-radius: 5px 15px 15px 5px; background: radial-gradient(ellipse at 50% 43%, rgba(78,31,38,.3), transparent 33%), repeating-linear-gradient(93deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px), repeating-linear-gradient(3deg, rgba(0,0,0,.06) 0 1px, transparent 1px 9px), linear-gradient(145deg, #2a1b1d 0%, #150d10 43%, #080709 76%, #211417 100%); box-shadow: inset 0 0 0 2px rgba(154,119,75,.34), inset 0 0 0 12px rgba(4,3,4,.78), inset 19px 0 38px rgba(0,0,0,.76), inset 0 0 95px rgba(0,0,0,.66), 0 50px 92px rgba(0,0,0,.76), -8px 7px 0 #080607, -14px 12px 0 #715d42, -19px 16px 0 #24181a; transform: rotateX(2.5deg) rotateY(-7deg) rotateZ(-.7deg); }
.book-cover::before { inset: 31px; border-color: rgba(176,137,84,.52); box-shadow: inset 0 0 0 5px rgba(6,4,5,.82), inset 0 0 0 6px rgba(176,137,84,.18), inset 0 0 0 14px rgba(6,4,5,.48), inset 0 0 0 15px rgba(176,137,84,.14); clip-path: none; }
.book-cover::after { opacity: .72; background: radial-gradient(circle at 19% 13%, rgba(185,145,91,.1) 0 1px, transparent 2px), radial-gradient(circle at 73% 62%, rgba(0,0,0,.3) 0 1px, transparent 2px), repeating-linear-gradient(102deg, transparent 0 17px, rgba(255,255,255,.012) 18px 19px); background-size: 53px 61px, 71px 83px, auto; mix-blend-mode: soft-light; }
.book-cover:hover { transform: translateY(-8px) rotateX(1deg) rotateY(-2deg) rotateZ(0deg); box-shadow: inset 0 0 0 2px rgba(176,137,84,.42), inset 0 0 0 12px rgba(4,3,4,.78), inset 19px 0 38px rgba(0,0,0,.76), inset 0 0 95px rgba(0,0,0,.66), 0 58px 100px rgba(0,0,0,.8), -8px 7px 0 #080607, -14px 12px 0 #715d42, -19px 16px 0 #24181a; }
.book-cover__fore-edge { position: absolute; z-index: 1; top: 19px; right: -18px; bottom: -10px; width: 20px; border: 1px solid rgba(91,68,42,.66); border-left: 0; border-radius: 0 8px 8px 0; background: repeating-linear-gradient(0deg, #a9956e 0 2px, #d0bd91 2px 4px, #806d4d 4px 5px); box-shadow: inset 5px 0 7px rgba(41,27,20,.42), 5px 4px 13px rgba(0,0,0,.52); transform: skewY(1.5deg); }
.book-cover__fore-edge::after { content: ""; position: absolute; inset: 7% 2px; background: repeating-linear-gradient(0deg, transparent 0 15px, rgba(58,39,25,.28) 16px 17px); }
.book-cover__bottom-edge { position: absolute; z-index: 1; left: 20px; right: -10px; bottom: -15px; height: 17px; border: 1px solid rgba(91,68,42,.64); border-top: 0; border-radius: 0 0 8px 6px; background: repeating-linear-gradient(90deg, #a6926a 0 3px, #d1bd90 3px 5px, #766347 5px 6px); box-shadow: inset 0 5px 7px rgba(41,27,20,.38), 4px 6px 12px rgba(0,0,0,.46); transform: skewX(-1.4deg); }
.book-cover__spine-ribs { position: absolute; z-index: 5; left: -21px; top: 38px; bottom: 34px; width: 19px; border-radius: 7px 0 0 7px; background: repeating-linear-gradient(0deg, transparent 0 70px, rgba(161,123,75,.74) 71px 76px, rgba(33,19,22,.9) 77px 84px), linear-gradient(90deg, #080607, #2d1b20 45%, #0a0708); box-shadow: inset -4px 0 6px rgba(0,0,0,.66), -3px 2px 6px rgba(0,0,0,.35); }
.book-cover__bookmark { position: absolute; z-index: 0; left: 57%; bottom: -48px; width: 15px; height: 58px; background: linear-gradient(90deg, #4f0e20, #8b2039 48%, #3f0a19); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); filter: drop-shadow(2px 3px 3px rgba(0,0,0,.5)); transform: rotate(2deg); }
.book-cover__ward { top: 49px; color: rgba(194,153,95,.42); font-size: .62rem; letter-spacing: .36em; }
.book-cover__kicker { margin-bottom: 34px; font-family: Baskerville, "Iowan Old Style", Georgia, serif; font-size: .73rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(218,189,144,.68); }
.book-cover__ornament { width: 68px; height: 68px; margin-bottom: 39px; border-color: rgba(181,139,84,.58); border-radius: 50%; transform: none; box-shadow: inset 0 0 0 5px rgba(4,3,4,.75), inset 0 0 0 6px rgba(181,139,84,.18); }
.book-cover__ornament::before { width: 86px; height: 86px; border-color: rgba(181,139,84,.2); border-radius: 50%; transform: none; }
.book-cover__ornament::after { width: 44px; height: 44px; border-color: rgba(181,139,84,.38); transform: rotate(45deg); }
.book-cover__ornament i { inset: 31%; background: radial-gradient(circle at 39% 34%, #7b4b42, #401b22 42%, #13090c 82%); box-shadow: inset 0 -5px 8px rgba(0,0,0,.64); animation: none; }
.book-cover__ornament b { font-family: Baskerville, Georgia, serif; font-size: .7rem; transform: none; color: #c7a36d; }
.book-cover strong { max-width: 390px; font-family: Baskerville, "Iowan Old Style", Georgia, serif; font-size: clamp(2.25rem, 5vw, 3.55rem); font-weight: 500; font-style: normal; line-height: 1.07; letter-spacing: .075em; text-transform: uppercase; color: #d1b487; text-shadow: 0 2px 0 #10090b; }
.book-cover strong em { margin-top: 10px; color: #b99262; font-weight: 500; font-style: normal; text-shadow: 0 2px 0 #10090b; }
.book-cover__author { margin-top: 39px; padding-top: 19px; width: 62%; border-color: rgba(176,137,84,.32); font-family: Baskerville, Georgia, serif; font-size: .73rem; letter-spacing: .25em; color: rgba(218,189,144,.78); }
.book-cover__seal { right: -1px; top: 50%; bottom: auto; width: 45px; height: 92px; border-color: #8f6f46; border-radius: 5px 0 0 5px; color: #27161a; transform: translateY(-50%); background: linear-gradient(90deg, #5d432b, #bd9560 45%, #765634 72%, #3f2c20); box-shadow: inset 0 0 0 4px rgba(20,12,12,.44), -5px 4px 10px rgba(0,0,0,.5); }
.book-cover__seal i { font-size: 1rem; }.book-cover__seal b { color: #2d171b; }
.book-cover__corner { width: 58px; height: 58px; opacity: .72; }
.book-cover__corner::before { width: 58px; height: 6px; }.book-cover__corner::after { width: 6px; height: 58px; }
.book-cover__hint { bottom: 27px; color: rgba(207,177,132,.58); font-size: .68rem; }

.book-spread { padding: 26px; border-color: rgba(154,117,71,.52); border-radius: 15px; background: linear-gradient(90deg, #241719, #080708 47.5%, #080708 52.5%, #241719); box-shadow: inset 0 0 0 8px rgba(5,4,5,.94), inset 0 0 0 10px rgba(160,122,73,.18), inset 0 0 76px rgba(0,0,0,.78), 0 52px 96px rgba(0,0,0,.78); }
.book-spread::before { color: rgba(190,147,89,.4); }
.book-page { background: #130d0d; }
.book-page__paper {
  padding: 11% 14% 9.5%;
  background:
    linear-gradient(90deg, rgba(45, 24, 13, .2), transparent 10% 90%, rgba(45, 24, 13, .22)),
    url("assets/aged-grimoire-page-v1.png") center / 101% 101% no-repeat,
    #c4a875;
  background-blend-mode: multiply, normal, normal;
  box-shadow:
    inset 0 0 78px rgba(52, 29, 15, .62),
    inset 0 0 0 1px rgba(255, 231, 175, .2);
  clip-path: polygon(.5% .4%, 17% 0, 34% .35%, 51% .08%, 69% .42%, 84% .12%, 99.5% .55%, 99.8% 16%, 99.45% 34%, 99.82% 51%, 99.5% 70%, 99.8% 86%, 99.3% 99.5%, 83% 99.8%, 66% 99.45%, 49% 99.85%, 31% 99.48%, 15% 99.82%, .4% 99.35%, .15% 82%, .48% 64%, .12% 46%, .45% 27%);
}
.book-page--right .book-page__paper {
  background:
    linear-gradient(270deg, rgba(45, 24, 13, .2), transparent 10% 90%, rgba(45, 24, 13, .24)),
    url("assets/aged-grimoire-page-v1.png") 52% center / 103% 102% no-repeat,
    #c4a875;
}
.book-page.age-two .book-page__paper { background-position: center, 48% 51%, center; }
.book-page.age-three .book-page__paper { background-position: center, 51% 49%, center; }
.book-page.age-four .book-page__paper { background-position: center, 49% 50%, center; }
.book-page__paper::before {
  inset: 4.4%;
  border-color: rgba(74, 40, 28, .4);
  box-shadow:
    inset 0 0 0 1px rgba(224, 191, 128, .2),
    inset 0 0 0 7px rgba(76, 42, 27, .05),
    0 0 22px rgba(79, 45, 26, .08);
  clip-path: none;
}
.book-page__paper::after {
  opacity: .78;
  background:
    radial-gradient(circle at 17% 14%, rgba(72, 37, 18, .24) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 71%, rgba(58, 31, 16, .18) 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 110%, rgba(60, 31, 17, .31), transparent 38%),
    linear-gradient(90deg, rgba(36, 18, 13, .31), transparent 8% 92%, rgba(36, 18, 13, .32));
  background-size: 61px 69px, 83px 77px, auto, auto;
}
.book-page__header { position: absolute; z-index: 4; top: 5.8%; left: 50%; transform: translateX(-50%); width: 60%; padding-bottom: 7px; border-bottom: 1px solid rgba(96,48,42,.25); color: rgba(80,42,41,.62); font-family: Baskerville, "Iowan Old Style", Georgia, serif; font-size: clamp(.45rem, .62vw, .62rem); letter-spacing: .23em; text-align: center; text-transform: uppercase; }
.book-page__marginalia { position: absolute; z-index: 4; left: 4.6%; top: 50%; color: rgba(105,43,55,.44); font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: .76rem; letter-spacing: .16em; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.book-page--right .book-page__marginalia { left: auto; right: 4.6%; transform: translateY(-50%); }
.book-page__stain { position: absolute; z-index: 1; border-radius: 48% 52% 63% 37%; pointer-events: none; mix-blend-mode: multiply; filter: blur(.5px); }
.book-page__stain--one { width: 22%; aspect-ratio: 1.65; left: 7%; top: 11%; border: 1px solid rgba(99,56,31,.16); background: radial-gradient(ellipse, transparent 48%, rgba(106,62,32,.11) 57%, transparent 69%); transform: rotate(-18deg); }
.book-page__stain--two { width: 16%; aspect-ratio: 1.2; right: 7%; bottom: 10%; background: radial-gradient(ellipse, rgba(93,48,28,.1), transparent 68%); transform: rotate(24deg); }
.book-page.age-two .book-page__stain--one { left: 68%; top: 16%; transform: rotate(23deg); }.book-page.age-two .book-page__stain--two { right: 66%; bottom: 12%; }
.book-page.age-three .book-page__stain--one { left: 11%; top: 70%; transform: rotate(7deg); }.book-page.age-three .book-page__stain--two { right: 8%; bottom: 68%; }
.book-page.age-four .book-page__stain--one { left: 62%; top: 67%; transform: rotate(-31deg); }.book-page.age-four .book-page__stain--two { right: 70%; bottom: 64%; }
.book-page__content {
  color: #2b1d18;
  text-align: left;
  line-height: 1.34;
  text-shadow: 0 1px rgba(255, 235, 190, .2);
  text-wrap: pretty;
  hyphens: auto;
}
.book-page.is-title-page .book-page__content { text-align: center; }
.book-page__content::first-letter {
  color: #682936;
  font-size: 2.05em;
  line-height: .72;
  text-shadow: 0 1px rgba(255, 234, 195, .28);
}
.book-page__watermark {
  width: clamp(94px, 12vw, 142px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 44, 42, .13);
  border-radius: 50%;
  color: rgba(83, 35, 43, .038);
  font-size: clamp(2.2rem, 4vw, 3.45rem);
  text-shadow: none;
  box-shadow: inset 0 0 0 9px rgba(83, 42, 35, .025), inset 0 0 0 10px rgba(83, 42, 35, .08);
}
.book-page__watermark::before {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(91, 44, 42, .055);
  transform: rotate(45deg);
}
.book-page__watermark::after {
  content: "✦";
  position: absolute;
  top: -7px;
  left: 50%;
  padding: 0 6px;
  color: rgba(91, 44, 42, .09);
  font-size: .72rem;
  transform: translateX(-50%);
}
.book-page__number { bottom: 4.1%; color: rgba(72,39,34,.72); }
.book-page__number::before, .book-page__number::after { color: #73343e; }
.book-page__corner { width: 44px; height: 44px; border-color: rgba(103,52,47,.44); }
.book-page__fold { position: absolute; z-index: 5; right: .8%; bottom: .7%; width: 26px; height: 26px; background: linear-gradient(135deg, rgba(106,71,47,.18) 0 49%, rgba(237,216,174,.7) 51% 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); filter: drop-shadow(-2px -2px 2px rgba(56,33,24,.16)); opacity: .62; }
.book-page--left .book-page__fold { right: auto; left: .8%; transform: scaleX(-1); }
.book-page.is-title-page .book-page__header { letter-spacing: .28em; }
.book-page.is-title-page .book-page__content { transform: translateY(1.5%); }
.book-spine { top: 25px; bottom: 25px; width: 50px; background: linear-gradient(90deg, transparent, rgba(38,22,18,.4) 18%, rgba(255,241,202,.11) 48%, rgba(38,22,18,.42) 78%, transparent); }
.book-spine::before { content: ""; position: absolute; left: 50%; top: 9%; bottom: 9%; width: 15px; transform: translateX(-50%); background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(117,77,48,.48) 32px 34px, transparent 35px 42px); opacity: .56; }

.book-smoke { grid-area: 1 / 1; position: relative; z-index: 30; width: min(1180px, 100vw); height: 800px; overflow: visible; pointer-events: none; opacity: 0; }
.ancient-book.is-smoking .book-smoke { opacity: 1; }
.book-smoke::before { content: ""; position: absolute; left: 50%; bottom: 21%; width: 46%; height: 22%; border-radius: 50%; opacity: 0; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(202,194,201,.46), rgba(116,93,115,.23) 42%, transparent 72%); filter: blur(25px); }
.ancient-book.is-smoking .book-smoke::before { animation: grimoire-smoke-base 2.5s ease-out both; }
.book-smoke__puff { position: absolute; left: var(--smoke-left); bottom: var(--smoke-bottom); width: var(--smoke-size); height: calc(var(--smoke-size) * .7); border-radius: 48% 52% 61% 39%; opacity: 0; background: radial-gradient(circle at 23% 68%, rgba(221,216,219,.52) 0 9%, rgba(157,143,155,.25) 22%, transparent 41%), radial-gradient(circle at 51% 38%, rgba(216,210,215,.58) 0 10%, rgba(155,139,153,.27) 25%, transparent 46%), radial-gradient(circle at 78% 63%, rgba(202,195,201,.5) 0 8%, rgba(117,96,114,.24) 23%, transparent 43%); filter: blur(10px); mix-blend-mode: screen; transform-origin: center; will-change: transform, opacity; }
.book-smoke__puff::after { content: ""; position: absolute; inset: 18% -8% -12% 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(201,190,199,.38), transparent 70%); filter: blur(11px); }
.ancient-book.is-smoking .book-smoke__puff { animation: grimoire-smoke-rise var(--smoke-time) cubic-bezier(.16,.68,.24,1) var(--smoke-delay) both; }
@keyframes grimoire-smoke-rise { 0% { opacity: 0; transform: translate3d(0,38px,0) scale(.34) rotate(0deg); } 16% { opacity: .8; } 55% { opacity: .53; } 100% { opacity: 0; transform: translate3d(var(--smoke-drift),var(--smoke-rise),0) scale(var(--smoke-scale)) rotate(var(--smoke-rotate)); } }
@keyframes grimoire-smoke-base { 0% { opacity: 0; transform: translateX(-50%) scale(.45); } 18% { opacity: .76; } 68% { opacity: .36; } 100% { opacity: 0; transform: translateX(-50%) translateY(-220px) scale(1.65); } }
.principles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 42px; }
.principle { background: var(--ink-2); padding: 24px; display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.principle span { color: var(--copper-soft); }
.principle strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.principle p { margin: 4px 0 0; font-size: .9rem; }

.shop-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 42px; }
.filter-button { border: 1px solid var(--line); background: transparent; color: var(--mist); padding: 10px 17px; cursor: pointer; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.filter-button.active, .filter-button:hover { border-color: var(--copper); color: var(--ivory); background: rgba(199,122,84,.08); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { border: 1px solid var(--line); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; transition: transform .24s ease, border-color .24s ease; }
.product-card:hover { transform: translateY(-6px); border-color: var(--line-bright); }
.product-art { aspect-ratio: 1.23; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(123,48,144,.34), transparent 28%), linear-gradient(140deg, #201022, #0b080e 56%, #2b0c20); }
.product-art::before { content: ""; position: absolute; width: 44%; aspect-ratio: 1; left: 28%; top: 18%; border: 1px solid rgba(230,170,124,.23); transform: rotate(45deg); box-shadow: 0 0 60px rgba(111,42,145,.22); }
.product-art::after { content: attr(data-symbol); position: absolute; inset: 0; display: grid; place-items: center; color: rgba(244,233,219,.82); font-family: var(--serif); font-size: 4rem; text-shadow: 0 4px 25px #000; }
.product-card:nth-child(2n) .product-art { background: radial-gradient(circle at 50% 45%, rgba(94,18,59,.4), transparent 30%), linear-gradient(150deg, #28101f, #09070c 58%, #25142e); }
.product-card:nth-child(3n) .product-art { background: radial-gradient(circle at 50% 45%, rgba(199,122,84,.2), transparent 26%), linear-gradient(135deg, #160c18, #08060b 60%, #351024); }
.product-body { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.product-type { color: var(--copper-soft); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; }
.product-body h3 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; margin: 8px 0; }
.product-body p { color: var(--mist); font-size: .9rem; margin: 0 0 22px; }
.product-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-family: var(--serif); color: var(--ivory); font-size: 1.1rem; }

.calculator { display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: start; }
.calc-panel { border: 1px solid var(--line); background: var(--panel); padding: 36px; box-shadow: var(--shadow); }
.calc-panel h2 { font-family: var(--serif); font-size: 2rem; font-weight: 400; margin: 0 0 12px; }
.field { display: grid; gap: 8px; margin: 22px 0; }
.field label { color: var(--mist); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; color: var(--ivory); border: 1px solid var(--line); background: rgba(8,6,11,.78); padding: 15px 16px; outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(199,122,84,.08); }
.field textarea { min-height: 140px; resize: vertical; }
.calc-note { color: #9b8b9c; font-size: .78rem; margin-top: 18px; }
.matrix-result { min-height: 610px; display: grid; align-content: center; }
.matrix-result[hidden] { display: none; }
.result-wheel { width: min(430px, 90vw); aspect-ratio: 1; margin: 0 auto 38px; border: 1px solid var(--line-bright); border-radius: 50%; position: relative; display: grid; place-items: center; box-shadow: inset 0 0 100px rgba(111,42,145,.2); }
.result-wheel::before { content: ""; position: absolute; inset: 15%; border: 1px solid var(--line); transform: rotate(45deg); }
.result-number { width: 114px; height: 114px; border-radius: 50%; background: var(--panel-solid); border: 1px solid var(--copper); display: grid; place-items: center; color: var(--copper-soft); font-family: var(--serif); font-size: 3.2rem; z-index: 3; }
.result-node { position: absolute; width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--line-bright); background: var(--ink-2); display: grid; place-items: center; font-family: var(--serif); font-size: 1.45rem; z-index: 2; }
.result-node.top { top: 4%; left: calc(50% - 33px); }
.result-node.right { right: 4%; top: calc(50% - 33px); }
.result-node.bottom { bottom: 4%; left: calc(50% - 33px); }
.result-node.left { left: 4%; top: calc(50% - 33px); }
.result-meanings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.meaning { border: 1px solid var(--line); padding: 16px; }
.meaning small { color: var(--copper-soft); text-transform: uppercase; letter-spacing: .1em; }
.meaning strong { display: block; margin-top: 3px; font-family: var(--serif); font-weight: 400; }

.contacts-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.contact-list { display: grid; gap: 12px; margin: 34px 0; }
.contact-item { border: 1px solid var(--line); padding: 20px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.contact-item span { color: var(--mist); }
.contact-item strong { font-family: var(--serif); font-weight: 400; color: var(--copper-soft); }
.contact-form { border: 1px solid var(--line); background: var(--panel); padding: 38px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-status { min-height: 24px; margin: 14px 0 0; color: var(--copper-soft); }

.site-footer { border-top: 1px solid var(--line); padding: 60px 0 30px; background: rgba(0,0,0,.22); }
.footer-top { display: grid; grid-template-columns: 1.2fr .62fr 1.18fr; gap: 46px; padding-bottom: 48px; }
.footer-intro p { max-width: 420px; color: var(--mist); }
.footer-column h3 { margin: 0 0 18px; color: var(--copper-soft); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-column a { display: block; color: var(--mist); margin: 8px 0; }
.footer-column a:hover { color: var(--ivory); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; color: #847687; font-size: .76rem; }
.footer-bottom--compact { justify-content: center; text-align: center; }

.footer-social-column { min-width: 0; }
.footer-contact-page {
  width: 100%;
  padding: 0 2px 11px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(230,170,124,.12);
  font-family: var(--antique-caption) !important;
  letter-spacing: .055em;
}
.footer-contact-page b { color: var(--copper-soft); font-size: 1rem; font-weight: 400; transition: transform .28s ease; }
.footer-contact-page:hover b { transform: translateX(4px); }
.footer-socials { display: grid; gap: 9px; margin-top: 15px; }
.footer-social-link {
  position: relative;
  width: 100%;
  min-height: 58px;
  margin: 0 !important;
  padding: 8px 12px 8px 9px;
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) 18px;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  border: 1px solid rgba(230,170,124,.14);
  border-radius: 15px;
  background:
    radial-gradient(circle at 8% 50%,rgba(126,49,126,.14),transparent 31%),
    linear-gradient(96deg,rgba(25,13,28,.78),rgba(8,6,11,.35));
  box-shadow: inset 0 0 22px rgba(111,42,145,.045), 0 8px 25px rgba(0,0,0,.16);
  isolation: isolate;
  transition: color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.footer-social-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: linear-gradient(105deg,transparent 8%,rgba(230,170,124,.07) 48%,transparent 88%);
  transform: translateX(-85%);
  transition: opacity .3s ease, transform .55s ease;
}
.footer-social-link:hover {
  color: var(--ivory) !important;
  transform: translateX(4px);
  border-color: rgba(230,170,124,.42);
  box-shadow: inset 0 0 25px rgba(111,42,145,.11), 0 12px 30px rgba(0,0,0,.28);
}
.footer-social-link:hover::before { opacity: 1; transform: translateX(85%); }
.footer-social-link__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #e2b18e;
  border: 1px solid rgba(230,170,124,.4);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,rgba(120,40,83,.82),rgba(37,15,38,.94) 58%,#0c0810 84%);
  box-shadow: inset 0 0 0 3px rgba(7,4,9,.35), 0 0 16px rgba(151,48,103,.12);
}
.footer-social-link__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.footer-social-link--tiktok .footer-social-link__icon svg,
.footer-social-link--telegram .footer-social-link__icon svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.footer-social-link__copy { min-width: 0; display: grid; gap: 1px; }
.footer-social-link__copy strong { color: #f0d2b7; font-family: var(--antique-display) !important; font-size: .96rem; font-weight: 500; letter-spacing: .045em; }
.footer-social-link__copy small { overflow: hidden; color: #968593; font-family: var(--antique-caption) !important; font-size: .62rem; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.footer-social-link__arrow { color: rgba(230,170,124,.56); font-size: .86rem; transition: transform .28s ease, color .28s ease; }
.footer-social-link:hover .footer-social-link__arrow { color: #f0c19e; transform: translate(2px,-2px); }
.footer-contact-email { margin-top: 15px !important; overflow-wrap: anywhere; font-size: .82rem; }

.cart-drawer { position: fixed; inset: 0; z-index: 70; pointer-events: none; visibility: hidden; }
.cart-drawer.open { pointer-events: auto; visibility: visible; }
.cart-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .25s ease; }
.cart-drawer.open .cart-backdrop { opacity: 1; }
.cart-panel { position: absolute; top: 0; right: 0; width: min(440px, 100%); height: 100%; background: #0e0911; border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .3s ease; padding: 28px; display: flex; flex-direction: column; }
.cart-drawer.open .cart-panel { transform: translateX(0); }
.cart-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.cart-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; }
.icon-button { border: 0; background: transparent; color: var(--mist); cursor: pointer; font-size: 1.4rem; }
.cart-items { overflow: auto; flex: 1; padding: 14px 0; }
.cart-empty { color: var(--mist); text-align: center; margin-top: 80px; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item strong { font-family: var(--serif); font-weight: 400; }
.cart-item small { color: var(--mist); display: block; }
.remove-item { border: 0; background: transparent; color: var(--copper-soft); cursor: pointer; }
.cart-foot { border-top: 1px solid var(--line); padding-top: 20px; }
.cart-summary { display: flex; justify-content: space-between; margin-bottom: 18px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 30px); background: var(--ivory); color: var(--ink); padding: 12px 18px; opacity: 0; pointer-events: none; transition: .25s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

.bat-gate-open { overflow: hidden; }
.bat-gate { position: fixed; inset: 0; z-index: 240; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--ivory); text-align: center; background: radial-gradient(circle at 50% 43%, rgba(72,25,82,.28), transparent 26%), rgba(5,3,8,.91); opacity: 1; transition: opacity .65s ease, visibility .65s ease; }
.bat-gate.is-opening { opacity: 0; visibility: hidden; }
.bat-gate__ornament { width: 86px; height: 86px; display: grid; place-items: center; border: 1px solid rgba(230,170,124,.36); border-radius: 50%; color: var(--copper-soft); font-family: var(--serif); font-size: 2rem; box-shadow: 0 0 0 8px rgba(230,170,124,.035), inset 0 0 28px rgba(111,42,145,.28); animation: gate-breathe 2.8s ease-in-out infinite; }
.bat-gate p { margin: 4px 0 8px; color: rgba(230,170,124,.72); font-family: var(--serif); font-size: .72rem; letter-spacing: .32em; }
.bat-gate__button { min-width: 260px; padding: 16px 30px 14px; border: 1px solid rgba(230,170,124,.46); border-radius: 999px; color: var(--ivory); background: rgba(20,10,24,.82); box-shadow: 0 14px 42px rgba(0,0,0,.38); cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.bat-gate__button:hover { transform: translateY(-2px); border-color: var(--copper-soft); background: rgba(53,19,61,.88); }
.bat-gate__button span { display: block; font-family: var(--serif); font-size: 1rem; letter-spacing: .045em; }
.bat-gate__button small { display: block; margin-top: 3px; color: rgba(244,233,219,.52); font-size: .57rem; letter-spacing: .19em; text-transform: uppercase; }

.bat-swarm { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; isolation: isolate; contain: strict; background: radial-gradient(circle at 70% 48%, rgba(32,7,41,0) 0, rgba(3,1,6,.08) 43%, rgba(3,1,6,.32) 100%); animation: swarm-curtain 3.8s ease-out both; }
.bat-swarm::before { content: ""; position: absolute; left: 70%; top: 48%; width: 18vmin; height: 18vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255,213,170,.4) 0, rgba(140,55,156,.2) 23%, rgba(34,5,43,.12) 43%, transparent 72%); opacity: 0; transform: translate(-50%, -50%) scale(.15); animation: swarm-portal 1.55s cubic-bezier(.12,.78,.21,1) .03s both; filter: blur(3px); }
.bat-swarm::after { content: ""; position: absolute; inset: -12%; z-index: 3; background: radial-gradient(circle at 50% 50%, rgba(241,188,145,.2), rgba(111,34,129,.12) 18%, transparent 50%); opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.bat-swarm.is-impact::after { animation: bat-impact-flash .58s ease-out both; }
.flying-bat { --bat-size: 120px; position: absolute; left: var(--start-x); top: var(--start-y); width: var(--bat-size); height: calc(var(--bat-size) * .5); opacity: 0; transform: translate(-50%, -50%) scale(.018); will-change: transform, opacity; backface-visibility: hidden; }
.bat-swarm.is-active .flying-bat { animation: bat-flight var(--flight-time) cubic-bezier(.12,.57,.13,1) var(--flight-delay) both; }
.flying-bat--attack { z-index: 4; }
.bat-shape { position: absolute; inset: 0; opacity: var(--bat-opacity); transform: scaleX(var(--facing)); }
.bat-sprite { display: block; width: 100%; height: 100%; object-fit: contain; }

@keyframes gate-breathe { 0%, 100% { transform: scale(.96); box-shadow: 0 0 0 8px rgba(230,170,124,.025), inset 0 0 24px rgba(111,42,145,.22); } 50% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(230,170,124,.055), inset 0 0 34px rgba(111,42,145,.4); } }
@keyframes swarm-curtain { 0%, 74% { background-color: rgba(3,1,6,.08); } 86% { background-color: rgba(3,1,6,.22); } 100% { background-color: transparent; } }
@keyframes swarm-portal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); } 24% { opacity: .9; } 72% { opacity: .58; transform: translate(-50%, -50%) scale(2.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(7); } }
@keyframes bat-impact-flash { 0% { opacity: 0; transform: scale(.55); } 16% { opacity: .72; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes bat-flight { 0% { opacity: 0; transform: translate(-50%, -50%) translate3d(0,0,0) scale(.025) rotate(var(--spin-1)); } 12% { opacity: .12; } 35% { opacity: .88; transform: translate(-50%, -50%) translate3d(var(--travel-x-1), var(--travel-y-1), 0) scale(.15) rotate(var(--spin-1)); } 62% { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--travel-x-2), var(--travel-y-2), 0) scale(.64) rotate(var(--spin-2)); } 83% { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--travel-x-3), var(--travel-y-3), 0) scale(var(--near-scale)) rotate(var(--spin-3)); } 100% { opacity: 0; transform: translate(-50%, -50%) translate3d(var(--travel-x), var(--travel-y), 0) scale(var(--end-scale)) rotate(var(--spin)); } }

/* Cinematic atmosphere */
.mystic-atmosphere { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.candle-glow { position: absolute; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(231,134,67,.14) 0, rgba(151,48,90,.055) 28%, transparent 68%); will-change: transform, opacity; }
.candle-glow--one { left: -18vw; top: 7vh; animation: candle-drift-one 8.4s ease-in-out infinite; }
.candle-glow--two { right: -24vw; bottom: -14vh; animation: candle-drift-two 11.2s ease-in-out infinite; }
@keyframes candle-drift-one { 0%, 100% { opacity: .34; transform: translate3d(0,0,0) scale(.96); } 18% { opacity: .48; } 43% { opacity: .3; transform: translate3d(5vw,2vh,0) scale(1.08); } 67% { opacity: .5; } 82% { opacity: .28; transform: translate3d(1vw,-1vh,0) scale(1.01); } }
@keyframes candle-drift-two { 0%, 100% { opacity: .22; transform: translate3d(0,0,0) scale(1); } 31% { opacity: .38; transform: translate3d(-4vw,-3vh,0) scale(1.12); } 57% { opacity: .19; } 79% { opacity: .35; transform: translate3d(-1vw,1vh,0) scale(.98); } }

.has-mystic-cursor, .has-mystic-cursor a, .has-mystic-cursor button, .has-mystic-cursor input, .has-mystic-cursor textarea { cursor: none !important; }
.mystic-cursor, .mystic-cursor-aura { position: fixed; left: 0; top: 0; z-index: 800; pointer-events: none; opacity: 0; }
.mystic-cursor { width: 25px; height: 25px; margin: -12.5px 0 0 -12.5px; border: 1px solid rgba(230,170,124,.72); border-radius: 50%; box-shadow: 0 0 12px rgba(230,170,124,.32), inset 0 0 9px rgba(111,42,145,.26); transition: width .2s ease, height .2s ease, margin .2s ease, opacity .2s ease, border-color .2s ease; }
.mystic-cursor::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--copper-soft); font-size: .47rem; text-shadow: 0 0 7px rgba(230,170,124,.8); }
.mystic-cursor-aura { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: radial-gradient(circle, rgba(143,55,157,.11), transparent 66%); transition: transform .11s ease-out, opacity .28s ease, width .24s ease, height .24s ease, margin .24s ease; }
.mystic-cursor.is-visible, .mystic-cursor-aura.is-visible { opacity: 1; }
.mystic-cursor.is-interactive { width: 38px; height: 38px; margin: -19px 0 0 -19px; border-color: rgba(244,233,219,.88); }
.mystic-cursor.is-interactive::after { content: "☾"; font-size: .8rem; }
.mystic-cursor-aura.is-interactive { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: radial-gradient(circle, rgba(199,122,84,.14), rgba(111,42,145,.07) 34%, transparent 69%); }

.mystic-title { position: relative; opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(18px); filter: blur(7px); transition: opacity .9s ease, clip-path 1.15s cubic-bezier(.18,.72,.18,1), transform 1s ease, filter .9s ease; }
.mystic-title.title-visible { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); filter: blur(0); }
.mystic-title::after { content: ""; position: absolute; left: -8%; top: 42%; width: 40%; height: 42%; background: linear-gradient(90deg, transparent, rgba(230,170,124,.18), rgba(111,42,145,.16), transparent); opacity: 0; pointer-events: none; transform: translateX(-100%) skewX(-18deg); }
.mystic-title.title-visible::after { animation: title-ink 1.45s ease-out .12s both; }
@keyframes title-ink { 0% { opacity: 0; transform: translateX(-110%) skewX(-18deg); } 28% { opacity: .66; } 100% { opacity: 0; transform: translateX(320%) skewX(-18deg); } }

.smoke-divider { height: 84px; margin: -42px 0; position: relative; z-index: 3; overflow: hidden; pointer-events: none; opacity: .64; background: radial-gradient(ellipse at 18% 52%, rgba(101,43,115,.19), transparent 26%), radial-gradient(ellipse at 52% 48%, rgba(202,126,91,.1), transparent 22%), radial-gradient(ellipse at 83% 55%, rgba(99,32,111,.2), transparent 29%); animation: smoke-breathe 8s ease-in-out infinite; }
.smoke-divider::before, .smoke-divider::after { content: ""; position: absolute; inset: 18% -10%; background: radial-gradient(ellipse at center, rgba(125,63,136,.14), transparent 58%); transform: translateX(-8%); animation: smoke-cross 13s ease-in-out infinite alternate; }
.smoke-divider::after { opacity: .6; transform: translateX(9%) scaleX(.75); animation-duration: 17s; animation-direction: alternate-reverse; }
@keyframes smoke-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .72; } }
@keyframes smoke-cross { from { transform: translate3d(-12%,2px,0) scaleX(.84); } to { transform: translate3d(12%,-3px,0) scaleX(1.12); } }

.button-runes { position: absolute; z-index: 1; inset: 3px 13px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,240,222,.76); font-family: var(--serif); font-size: .48rem; letter-spacing: .16em; opacity: 0; pointer-events: none; transform: scale(.72); transition: opacity .28s ease, transform .38s ease, letter-spacing .38s ease; }
.button:hover .button-runes, .button:focus-visible .button-runes { opacity: .48; transform: scale(1); letter-spacing: .32em; }
.button:hover { border-color: var(--copper-soft); box-shadow: 0 12px 36px rgba(199,122,84,.22), 0 0 28px rgba(111,42,145,.12), inset 0 0 18px rgba(230,170,124,.08); }

.hero-copy { transform: translate3d(var(--copy-x, 0), var(--copy-y, 0), 0); transition: transform .22s ease-out; }
.hero-media img { transform: scale(1.045) translate3d(var(--image-x, 0), var(--image-y, 0), 0); transition: transform .22s ease-out, filter .35s ease; }
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .46; background: radial-gradient(circle 260px at var(--light-x, 72%) var(--light-y, 38%), rgba(244,171,102,.2), rgba(161,67,96,.07) 30%, transparent 66%); mix-blend-mode: screen; animation: portrait-candle 4.2s ease-in-out infinite; }
@keyframes portrait-candle { 0%, 100% { opacity: .31; } 17% { opacity: .5; } 25% { opacity: .37; } 58% { opacity: .46; } 76% { opacity: .29; } }
.photo-magic::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle 210px at var(--light-x, 64%) var(--light-y, 38%), rgba(244,170,105,.18), rgba(132,48,91,.06) 34%, transparent 68%); mix-blend-mode: screen; opacity: .62; transition: opacity .3s ease; }
.photo-magic img { transform: scale(1.035) translate3d(var(--photo-x, 0), var(--photo-y, 0), 0); transition: transform .22s ease-out, filter .3s ease; }
.photo-magic:hover img { filter: saturate(1.03) contrast(1.035) brightness(1.025); }

.magic-card { --card-rx: 0deg; --card-ry: 0deg; --card-lift: 0px; position: relative; transform: perspective(900px) translateY(var(--card-lift)) rotateX(var(--card-rx)) rotateY(var(--card-ry)); transform-style: preserve-3d; transition: transform .16s ease-out, border-color .25s ease, box-shadow .25s ease; }
.magic-card:hover { --card-lift: -7px; transform: perspective(900px) translateY(var(--card-lift)) rotateX(var(--card-rx)) rotateY(var(--card-ry)); border-color: var(--line-bright); box-shadow: 0 32px 90px rgba(0,0,0,.55), 0 0 35px rgba(111,42,145,.1); }
.magic-card::after { content: ""; position: absolute; z-index: 0; inset: 36% -18% -28%; background: radial-gradient(ellipse at var(--card-light-x, 50%) var(--card-light-y, 50%), rgba(154,65,168,.22), rgba(103,32,115,.08) 28%, transparent 64%); opacity: 0; transform: translateY(28px) scale(.85); transition: opacity .35s ease, transform .55s ease; pointer-events: none; }
.magic-card:hover::after { opacity: 1; transform: translateY(0) scale(1.06); }
.magic-card > * { position: relative; z-index: 1; transform: translateZ(16px); }
.magic-card .card-icon { transition: color .3s ease, box-shadow .3s ease, transform .3s ease; }
.magic-card:hover .card-icon { color: var(--ivory); transform: translateZ(24px) rotate(9deg); box-shadow: 0 0 34px rgba(111,42,145,.28), inset 0 0 22px rgba(199,122,84,.08); }
.magic-card .product-art::after { transition: transform .4s ease, color .35s ease, text-shadow .35s ease; }
.magic-card:hover .product-art::after { color: #fff3e5; text-shadow: 0 0 18px rgba(230,170,124,.42), 0 0 48px rgba(111,42,145,.38); transform: scale(1.08) rotate(-4deg); }

.brand { position: relative; }
.logo-spell { position: absolute; z-index: -1; left: 54px; top: 54px; width: 210px; height: 210px; margin: -105px 0 0 -105px; border: 1px solid rgba(230,170,124,.42); border-radius: 50%; display: grid; place-items: center; color: var(--copper-soft); font-family: var(--serif); font-size: .66rem; letter-spacing: 1.15em; opacity: 0; pointer-events: none; box-shadow: 0 0 40px rgba(111,42,145,.16), inset 0 0 40px rgba(111,42,145,.11); }
.brand.is-conjuring .brand-mark { animation: logo-conjure 1.35s cubic-bezier(.16,.82,.2,1) both; }
.brand.is-conjuring .logo-spell { animation: spell-open 1.4s ease-out both; }
@keyframes logo-conjure { 0% { transform: perspective(600px) rotateY(0) scale(1); } 46% { transform: perspective(600px) rotateY(210deg) scale(1.16); filter: drop-shadow(0 0 44px rgba(230,170,124,.55)); } 100% { transform: perspective(600px) rotateY(720deg) scale(1); } }
@keyframes spell-open { 0% { opacity: 0; transform: scale(.22) rotate(-80deg); } 34% { opacity: .82; } 100% { opacity: 0; transform: scale(1.18) rotate(95deg); } }

.nav-magic-ring { display: none; }
.rare-omen { position: absolute; z-index: 2; left: 18%; top: 23%; width: 78px; height: 220px; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 16%, rgba(4,2,7,.86) 0 15%, transparent 17%), linear-gradient(112deg, transparent 20%, rgba(4,2,7,.82) 24% 49%, transparent 52%); clip-path: polygon(38% 0, 63% 0, 71% 17%, 65% 31%, 88% 100%, 12% 100%, 35% 31%, 29% 17%); transform: translate3d(-36px,9px,0) scale(.82); }
.rare-omen.is-visible { animation: omen-cross 4.2s ease-in-out both; }
@keyframes omen-cross { 0%, 100% { opacity: 0; } 18% { opacity: .08; } 48% { opacity: .2; } 72% { opacity: .09; } 100% { transform: translate3d(145px,-8px,0) scale(1.04); } }

.page-veil { position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 1; visibility: visible; background: #07040a; transition: opacity .62s ease, visibility .62s ease; }
.page-veil::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 50% 52%, rgba(112,42,126,.34), transparent 24%), radial-gradient(ellipse at 32% 58%, rgba(185,102,78,.13), transparent 28%); transform: scale(1.25); transition: transform .72s ease; }
.page-veil.is-ready { opacity: 0; visibility: hidden; }
.page-veil.is-ready::before { transform: scale(.7); }
.page-veil.is-closing { opacity: 1; visibility: visible; }
.page-veil.is-closing::before { transform: scale(1.35); }

@media (max-width: 820px) {
  .nav-magic-ring { position: absolute; display: block; right: -104px; top: 18%; width: 300px; height: 300px; border: 1px solid rgba(230,170,124,.16); border-radius: 50%; opacity: 0; pointer-events: none; box-shadow: inset 0 0 52px rgba(111,42,145,.09), 0 0 42px rgba(111,42,145,.08); }
  .nav-magic-ring::before, .nav-magic-ring::after { content: ""; position: absolute; border: 1px solid rgba(230,170,124,.11); inset: 17%; transform: rotate(45deg); }
  .nav-magic-ring::after { inset: 29%; border-radius: 50%; transform: rotate(0); }
  .nav-magic-ring i { position: absolute; color: rgba(230,170,124,.46); font-family: var(--serif); font-style: normal; }
  .nav-magic-ring i:nth-child(1) { left: 48%; top: 2%; }
  .nav-magic-ring i:nth-child(2) { right: 4%; top: 48%; }
  .nav-magic-ring i:nth-child(3) { left: 48%; bottom: 2%; }
  .nav-magic-ring i:nth-child(4) { left: 4%; top: 48%; }
  .main-nav.open .nav-magic-ring { animation: nav-ring-open 1.05s cubic-bezier(.15,.76,.25,1) both, nav-ring-spin 24s linear 1.05s infinite; }
  .main-nav.open a { animation: nav-summon .55s ease both; }
  .main-nav.open a:nth-of-type(2) { animation-delay: .05s; }
  .main-nav.open a:nth-of-type(3) { animation-delay: .1s; }
  .main-nav.open a:nth-of-type(4) { animation-delay: .15s; }
  .main-nav.open a:nth-of-type(5) { animation-delay: .2s; }
  .main-nav.open a:nth-of-type(6) { animation-delay: .25s; }
  @keyframes nav-ring-open { from { opacity: 0; transform: scale(.35) rotate(-90deg); } to { opacity: .72; transform: scale(1) rotate(0); } }
  @keyframes nav-ring-spin { to { transform: rotate(360deg); } }
  @keyframes nav-summon { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
  .mystic-cursor, .mystic-cursor-aura { display: none; }
  .has-mystic-cursor, .has-mystic-cursor a, .has-mystic-cursor button, .has-mystic-cursor input, .has-mystic-cursor textarea { cursor: auto !important; }
  .smoke-divider { height: 60px; margin: -30px 0; }
  .hero-media img { transform: scale(1.02); }
}

@media (max-width: 1050px) {
  .brand { gap: 10px; }
  .brand-mark { width: 88px; height: 88px; }
  .brand-name { min-width: 190px; }
  .brand-name strong { font-size: 1.3rem; letter-spacing: .065em; }
  .brand-first { font-size: 1.15rem; letter-spacing: .03em; }
  .main-nav { gap: 1px; }
  .main-nav a { padding-inline: 8px; font-size: .6rem; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-copy { padding-left: 40px; }
  .cards, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .about-story, .matrix-grid, .calculator, .contacts-grid { gap: 40px; }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 28px, 680px); }
  .header-inner { height: 106px; grid-template-columns: 1fr auto; gap: 14px; }
  .brand-mark { width: 94px; height: 94px; }
  .brand-mark::after { transform-origin: 0 46px; }
  .brand-name { min-width: 206px; }
  .brand-name strong { font-size: 1.45rem; letter-spacing: .065em; }
  .brand-first { font-size: 1.24rem; letter-spacing: .03em; }
  .main-nav { position: fixed; left: auto; right: 0; top: 0; bottom: auto; width: min(430px, calc(100% - 26px)); height: 100dvh; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 118px 42px 52px; background: radial-gradient(circle at 82% 9%, rgba(77,23,88,.88) 0, rgba(22,9,27,.96) 30%, #09070c 72%); border-left: 1px solid rgba(230,170,124,.25); border-radius: 0 0 0 36px; box-shadow: -30px 0 90px rgba(0,0,0,.72), inset 28px 0 65px rgba(111,42,145,.08); transform: translateX(110%); opacity: 0; visibility: hidden; transition: transform .35s ease, opacity .25s ease, visibility .35s; z-index: 80; }
  .main-nav::before { content: "✦  SOFIA DEMCHENKO  ✦"; position: absolute; top: 48px; left: 42px; color: var(--copper-soft); font-family: var(--serif); font-size: .7rem; letter-spacing: .2em; opacity: .86; }
  .main-nav.open { transform: translateX(0); opacity: 1; visibility: visible; }
  .main-nav a { color: rgba(244,233,219,.82); font-family: var(--serif); font-size: 1.7rem; letter-spacing: .015em; text-transform: none; padding: 19px 10px 19px 4px; border: 0; border-bottom: 1px solid rgba(230,170,124,.12); border-radius: 0; display: flex; justify-content: space-between; align-items: center; overflow: hidden; transition: color .3s ease, padding-left .3s ease, border-color .3s ease, text-shadow .3s ease, box-shadow .3s ease; }
  .main-nav a::before { content: "☾"; z-index: 0; inset: auto; left: 5px; top: 50%; color: var(--copper-soft); background: none; font-family: var(--serif); font-size: .8rem; opacity: 0; transform: translate(-16px, -50%) rotate(-35deg); transition: opacity .3s ease, transform .3s ease; }
  .main-nav a::after { content: "✦"; position: static; width: auto; height: auto; background: none; box-shadow: none; color: var(--copper-soft); font-family: var(--sans); font-size: .68rem; opacity: .22; transform: rotate(0deg) scale(.8); transition: opacity .3s ease, transform .3s ease; }
  .main-nav a:hover, .main-nav a.active { color: var(--ivory); padding-left: 32px; border-color: rgba(230,170,124,.42); text-shadow: 0 0 18px rgba(230,170,124,.28); box-shadow: inset 90px 0 55px -70px rgba(111,42,145,.75), inset 0 -1px rgba(230,170,124,.13); }
  .main-nav a:hover::before, .main-nav a.active::before { opacity: 1; transform: translate(0, -50%) rotate(0deg); }
  .main-nav a:hover::after, .main-nav a.active::after { opacity: 1; transform: rotate(135deg) scale(1.12); }
  .menu-button { display: inline-grid; position: relative; z-index: 100; }
  .header-actions .button { display: none; }
  .hero-grid { display: flex; flex-direction: column-reverse; min-height: auto; }
  .hero-media { min-height: 56vh; }
  .hero-media::before { background: linear-gradient(0deg, var(--ink) 0%, transparent 34%); }
  .hero-media img { object-position: 50% 44%; }
  .hero-copy { padding: 42px 24px 72px; }
  .hero-copy h1 { font-size: clamp(3.5rem, 16vw, 5.8rem); }
  .section { padding: 82px 0; }
  .section-heading { align-items: start; flex-direction: column; }
  .cards, .product-grid { grid-template-columns: 1fr; }
  .cards { gap: 82px; padding-inline: 26px; }
  .ritual-card { width: min(520px, 100%); justify-self: center; }
  .split, .about-story, .matrix-grid, .calculator, .contacts-grid { grid-template-columns: 1fr; }
  .ancient-book { min-height: clamp(680px, 135vw, 1050px); margin-top: 48px; }
  .ancient-book:not(.is-open) { min-height: 680px; }
  .book-cover { width: min(440px, calc(100vw - 48px)); }
  .book-reader { width: min(680px, calc(100vw - 28px)); }
  .book-spread { width: min(100%, 660px); margin-inline: auto; aspect-ratio: .75; grid-template-columns: 1fr; padding: 12px; border-radius: 14px; }
  .book-page--right, .book-spine { display: none; }
  .book-page--left { border-radius: 9px; box-shadow: 0 8px 0 #8a715b, 0 12px 0 #342022; }
  .book-page__paper { padding: 11.5% 13.5% 9.5%; }
  .book-page__content { font-size: clamp(.56rem, 2.6vw, .92rem); line-height: 1.25; }
  .book-page.is-dense .book-page__content { font-size: clamp(.53rem, 2.34vw, .83rem); line-height: 1.2; }
  .book-page.is-very-dense .book-page__content { font-size: clamp(.5rem, 2.18vw, .77rem); line-height: 1.17; }
  .book-page.is-title-page strong { font-size: clamp(2.4rem, 12vw, 4.8rem); }
  .book-page__watermark { font-size: clamp(2rem, 8vw, 3.1rem); }
  .book-turn-sheet { top: 12px; right: 12px; bottom: 12px; left: 12px; width: auto; }
  .ancient-book.is-turning-forward .book-turn-sheet { left: 12px; right: 12px; transform-origin: left center; }
  .ancient-book.is-turning-back .book-turn-sheet { left: 12px; right: 12px; transform-origin: right center; }
  .book-controls { padding-inline: 0; grid-template-columns: 1fr auto 1fr; }
  .book-control { padding-inline: 16px; }
  .portrait-panel { min-height: 540px; }
  .about-story .story-image { position: relative; top: 0; min-height: 560px; }
  .calculator > .calc-panel { order: 1; }
  .matrix-result { min-height: 520px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .brand { gap: 8px; }
  .brand-mark { width: 66px; height: 66px; }
  .brand-mark::after { transform-origin: 0 32px; }
  .brand-name { min-width: 150px; }
  .brand-first { margin-bottom: 3px; font-size: .9rem; letter-spacing: .02em; }
  .brand-name strong { font-size: 1.02rem; letter-spacing: .05em; }
  .brand-name::after { bottom: -6px; }
  .main-nav { padding-inline: 28px; }
  .main-nav::before { left: 28px; }
  .hero-media { min-height: 48vh; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .page-hero { padding: 82px 0 64px; }
  .book-hero h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .book-intro .section-title { font-size: clamp(2.7rem, 13vw, 4.2rem); }
  .ancient-book:not(.is-open) { min-height: 590px; }
  .book-cover { padding: 62px 34px 52px; border-left-width: 14px; }
  .book-cover::before { inset: 20px; }
  .book-cover__ward { top: 31px; font-size: .54rem; letter-spacing: .2em; }
  .book-cover strong { font-size: clamp(2.2rem, 10.5vw, 3.15rem); letter-spacing: .06em; }
  .book-cover__author { width: 84%; font-size: .68rem; }
  .book-cover__ornament { width: 60px; height: 60px; margin-bottom: 24px; }
  .book-cover__ornament::before { width: 74px; height: 74px; }
  .book-cover__seal { right: -1px; top: 50%; bottom: auto; width: 36px; height: 76px; }
  .book-cover__corner { width: 48px; height: 48px; }
  .book-cover__corner::before { width: 48px; }.book-cover__corner::after { height: 48px; }
  .book-cover__fore-edge { right: -13px; width: 15px; }
  .book-cover__bottom-edge { bottom: -11px; height: 13px; }
  .book-cover__spine-ribs { left: -13px; width: 12px; }
  .book-cover__bookmark { bottom: -38px; height: 47px; width: 12px; }
  .book-smoke { height: 650px; }
  .book-controls { gap: 9px; }
  .book-control { min-height: 42px; padding-inline: 13px; font-size: .82rem; }
  .book-counter { font-size: .86rem; }
  .cards { padding-inline: 12px; }
  .ritual-card { --mirror-margin: 64px 33px 40px; min-height: 590px; }
  .mirror-glass { min-height: 480px; padding: 78px 22px 34px; }
  .mirror-number { top: 48px; }
  .ritual-card h3 { font-size: 1.72rem; }
  .form-row, .result-meanings { grid-template-columns: 1fr; }
  .contact-form, .calc-panel { padding: 24px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-intro { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .footer-social-column { width: 100%; }
  .footer-socials { gap: 10px; }
  .footer-social-link { min-height: 62px; grid-template-columns: 43px minmax(0,1fr) 18px; padding: 9px 13px 9px 9px; }
  .footer-social-link__icon { width: 43px; height: 43px; }
  .footer-social-link__copy strong { font-size: 1.02rem; }
  .footer-social-link__copy small { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .mystic-title { opacity: 1; clip-path: none; transform: none; filter: none; }
  .mystic-atmosphere, .smoke-divider, .page-veil, .mystic-cursor, .mystic-cursor-aura, .rare-omen, .book-smoke { display: none !important; }
  .hero-copy, .hero-media img, .photo-magic img, .magic-card, .magic-card:hover { transform: none !important; }
}

/* Photographic book object and page-corner navigation */
.book-cover { width: min(610px, calc(100vw - 34px)); aspect-ratio: 2 / 3; padding: 178px 112px 176px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; transform: rotateZ(-1.2deg) rotateY(-2deg); }
.book-cover::before, .book-cover::after { display: none; }
.book-cover:hover { transform: translateY(-8px) rotateZ(-.35deg) rotateY(0deg) scale(1.015); box-shadow: none; }
.book-cover__photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 36px 32px rgba(0,0,0,.72)) drop-shadow(0 0 28px rgba(123,75,38,.13)); }
.book-cover__fore-edge, .book-cover__bottom-edge, .book-cover__spine-ribs, .book-cover__bookmark, .book-cover__corner, .book-cover__ward, .book-cover__seal { display: none; }
.book-cover__kicker { z-index: 2; margin-bottom: 22px; font-family: Baskerville, "Iowan Old Style", Georgia, serif; font-size: .66rem; letter-spacing: .2em; color: rgba(212,178,125,.76); text-shadow: 0 2px 3px #000; }
.book-cover__ornament { z-index: 2; width: 50px; height: 50px; margin-bottom: 26px; border-color: rgba(202,160,99,.48); background: rgba(19,11,9,.22); }
.book-cover__ornament::before { width: 63px; height: 63px; }.book-cover__ornament::after { width: 34px; height: 34px; }
.book-cover__ornament i { background: radial-gradient(circle at 39% 34%, #8b5a43, #3d1e1a 52%, #110908 84%); }
.book-cover strong { z-index: 2; max-width: 350px; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05; letter-spacing: .065em; color: #d8bc88; text-shadow: 0 2px 3px #000, 0 0 10px rgba(0,0,0,.45); }
.book-cover strong em { color: #c6a36f; }
.book-cover__author { z-index: 2; width: 72%; margin-top: 28px; padding-top: 15px; font-size: .68rem; color: rgba(218,189,144,.8); text-shadow: 0 2px 3px #000; }
.book-cover__hint { z-index: 2; bottom: 15%; color: rgba(215,183,137,.72); text-shadow: 0 2px 3px #000; }

.book-controls { display: block; padding: 21px 12px 0; text-align: center; }
.book-control { display: none; }
.book-counter { display: block; margin-bottom: 5px; }
.book-close { display: inline-flex; align-items: center; justify-content: center; margin: 4px auto 0; }
.book-turn-corner { position: absolute; z-index: 16; bottom: 26px; width: 92px; height: 92px; padding: 0; border: 0; color: #5d302e; cursor: pointer; filter: drop-shadow(0 4px 4px rgba(42,22,15,.2)); transition: width .35s ease, height .35s ease, filter .35s ease, transform .35s ease, opacity .25s ease; }
.book-turn-corner--next { right: 26px; background: linear-gradient(135deg, transparent 0 48%, #c1aa80 49%, #e4d2aa 70%, #9f865f 100%); transform-origin: right bottom; }
.book-turn-corner--prev { left: 26px; background: linear-gradient(225deg, transparent 0 48%, #c1aa80 49%, #e4d2aa 70%, #9f865f 100%); transform-origin: left bottom; }
.book-turn-corner span { position: absolute; bottom: 8px; font-family: Baskerville, Georgia, serif; font-size: 1.75rem; line-height: 1; }
.book-turn-corner small { position: absolute; bottom: 15px; font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: .72rem; font-weight: 600; letter-spacing: .05em; opacity: .76; }
.book-turn-corner--next span { right: 9px; }.book-turn-corner--next small { right: 31px; }
.book-turn-corner--prev span { left: 9px; }.book-turn-corner--prev small { left: 31px; }
.book-turn-corner:hover { filter: drop-shadow(0 11px 9px rgba(31,15,10,.34)); }
.book-turn-corner--next:hover { transform: rotate(-2deg); }.book-turn-corner--prev:hover { transform: rotate(2deg); }
.book-turn-corner:disabled { opacity: 0; pointer-events: none; }
.book-page--right:hover .book-page__fold, .book-page--left:not(:disabled):hover .book-page__fold { width: 45px; height: 45px; opacity: .86; }
.book-page__fold { transition: width .35s ease, height .35s ease, opacity .35s ease; }

.book-turn-sheet { top: 26px; right: 26px; bottom: 26px; width: calc(50% - 26px); border-radius: 1px 9px 9px 1px; background: linear-gradient(90deg, rgba(48,25,15,.25), transparent 15% 88%, rgba(48,25,15,.2)), url("assets/aged-grimoire-page-v1.png") center / cover no-repeat, #c4a875; box-shadow: inset 0 0 58px rgba(61,34,21,.48); }
.book-turn-sheet::before { z-index: 2; }
.book-turn-sheet::after { content: ""; position: absolute; inset: 0; display: block; background: linear-gradient(90deg, rgba(45,23,18,.28), transparent 16% 77%, rgba(255,244,211,.32)), radial-gradient(ellipse at 100% 50%, rgba(61,31,20,.28), transparent 42%); mix-blend-mode: multiply; }
.ancient-book.is-turning-forward .book-turn-sheet { right: 26px; animation: antique-page-forward 1.08s cubic-bezier(.34,.02,.2,1) both; }
.ancient-book.is-turning-back .book-turn-sheet { left: 26px; animation: antique-page-back 1.08s cubic-bezier(.34,.02,.2,1) both; }
@keyframes antique-page-forward { 0% { opacity: 1; transform: perspective(1800px) rotateY(0) skewY(0) scaleX(1); border-radius: 1px 9px 9px 1px; box-shadow: -8px 1px 14px rgba(0,0,0,.16); } 24% { transform: perspective(1800px) rotateY(-42deg) skewY(-1.4deg) scaleX(.97); border-radius: 2px 28px 28px 2px; box-shadow: -24px 5px 30px rgba(0,0,0,.28); } 52% { opacity: 1; transform: perspective(1800px) rotateY(-96deg) skewY(1.2deg) scaleX(.89); border-radius: 28px; box-shadow: -46px 7px 44px rgba(0,0,0,.38); } 78% { opacity: .9; transform: perspective(1800px) rotateY(-148deg) skewY(1.7deg) scaleX(.96); } 100% { opacity: 0; transform: perspective(1800px) rotateY(-179deg) skewY(0) scaleX(1); box-shadow: -55px 0 42px rgba(0,0,0,.28); } }
@keyframes antique-page-back { 0% { opacity: 1; transform: perspective(1800px) rotateY(0) skewY(0) scaleX(1); border-radius: 9px 1px 1px 9px; box-shadow: 8px 1px 14px rgba(0,0,0,.16); } 24% { transform: perspective(1800px) rotateY(42deg) skewY(1.4deg) scaleX(.97); border-radius: 28px 2px 2px 28px; box-shadow: 24px 5px 30px rgba(0,0,0,.28); } 52% { opacity: 1; transform: perspective(1800px) rotateY(96deg) skewY(-1.2deg) scaleX(.89); border-radius: 28px; box-shadow: 46px 7px 44px rgba(0,0,0,.38); } 78% { opacity: .9; transform: perspective(1800px) rotateY(148deg) skewY(-1.7deg) scaleX(.96); } 100% { opacity: 0; transform: perspective(1800px) rotateY(179deg) skewY(0) scaleX(1); box-shadow: 55px 0 42px rgba(0,0,0,.28); } }

@media (max-width: 820px) {
  .book-cover { width: min(560px, calc(100vw - 18px)); padding: 29% 16% 27%; }
  .book-cover strong { font-size: clamp(1.85rem, 8.5vw, 2.8rem); }
  .book-cover__hint { bottom: 14%; }
  .book-turn-corner { bottom: 12px; width: 76px; height: 76px; }
  .book-turn-corner--next { right: 12px; }.book-turn-corner--prev { left: 12px; }
  .book-turn-corner:hover { width: 76px; height: 76px; }
  .book-turn-sheet { top: 12px; right: 12px; bottom: 12px; left: 12px; width: auto; }
  .ancient-book.is-turning-forward .book-turn-sheet, .ancient-book.is-turning-back .book-turn-sheet { left: 12px; right: 12px; }
}

@media (max-width: 520px) {
  .book-cover { width: min(382px, calc(100vw - 8px)); padding: 30% 17% 28%; }
  .book-cover__kicker { margin-bottom: 15px; font-size: .54rem; }
  .book-cover__ornament { width: 39px; height: 39px; margin-bottom: 18px; }
  .book-cover__ornament::before { width: 50px; height: 50px; }.book-cover__ornament::after { width: 26px; height: 26px; }
  .book-cover strong { font-size: clamp(1.45rem, 7.4vw, 2rem); }
  .book-cover__author { margin-top: 18px; padding-top: 11px; font-size: .55rem; }
  .book-cover__hint { bottom: 13%; font-size: .58rem; }
  .book-turn-corner small { display: none; }
}

/* Monumental jeweled grimoire */
.ancient-book:not(.is-open) {
  min-height: 1220px;
}

.ancient-book:not(.is-open)::before {
  width: min(1040px, 94vw);
  height: 250px;
  bottom: 65px;
  background: radial-gradient(ellipse, rgba(151, 83, 35, .28), rgba(89, 24, 67, .2) 34%, rgba(0, 0, 0, .82) 72%);
  filter: blur(46px);
}

.book-cover {
  width: min(790px, calc(100vw - 34px));
  aspect-ratio: 2 / 3;
  padding: 0;
  display: block;
  overflow: visible;
  transform: rotateZ(-.7deg) rotateY(-1.5deg);
}

.book-cover:hover {
  transform: translateY(-12px) rotateZ(-.15deg) rotateY(1deg) scale(1.018);
}

.book-cover__photo {
  filter:
    drop-shadow(0 58px 48px rgba(0, 0, 0, .78))
    drop-shadow(0 0 34px rgba(177, 105, 47, .18));
}

.book-cover__kicker,
.book-cover__ornament,
.book-cover strong,
.book-cover__author {
  display: none;
}

.book-cover__hint {
  left: 50%;
  bottom: -20px;
  z-index: 3;
  min-width: 260px;
  padding: 12px 22px;
  border: 1px solid rgba(196, 145, 82, .42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(35, 17, 18, .94), rgba(10, 7, 10, .98));
  color: rgba(237, 204, 150, .9);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 218, 159, .06);
  letter-spacing: .16em;
}

.book-cover__hint::before,
.book-cover__hint::after {
  content: "✦";
  margin-inline: 10px;
  color: #a66f3e;
}

.book-cover__hint i {
  display: none;
}

@media (max-width: 820px) {
  .ancient-book:not(.is-open) {
    min-height: clamp(760px, 156vw, 1120px);
  }

  .book-cover {
    width: min(680px, calc(100vw - 12px));
    padding: 0;
  }
}

@media (max-width: 520px) {
  .ancient-book:not(.is-open) {
    min-height: 660px;
  }

  .book-cover {
    width: min(420px, calc(100vw + 6px));
    padding: 0;
  }

  .book-cover__hint {
    bottom: -12px;
    min-width: 218px;
    padding: 10px 15px;
    font-size: .57rem;
    letter-spacing: .12em;
  }

  .book-cover__hint::before,
  .book-cover__hint::after {
    margin-inline: 6px;
  }
}

/* Gothic sanctum, author plaque and two-stage cover opening */
.ancient-book {
  min-height: 1420px;
}

.ancient-book::after {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 4, 9, .04), rgba(7, 4, 9, 0) 58%, rgba(7, 4, 9, .2)),
    url("assets/grimoire-sanctum-v2.png") center top / auto 100% no-repeat;
  opacity: .96;
  filter: saturate(.86) contrast(1.04);
  pointer-events: none;
  transition: opacity .9s ease, filter .9s ease;
}

.ancient-book::before {
  z-index: -1;
  bottom: 120px;
}

.ancient-book.is-open::after {
  opacity: .58;
  filter: saturate(.66) brightness(.58) blur(1px);
}

.book-cover {
  top: -12px;
  z-index: 9;
  transition:
    transform 1.65s cubic-bezier(.18, .66, .16, 1),
    opacity .65s ease .58s,
    visibility 0s linear 2.2s,
    filter .65s ease;
}

.book-cover:hover {
  transform: translateY(-10px) rotateZ(-.15deg) rotateY(1deg) scale(1.012);
}

.book-cover__hint {
  display: none;
}

.book-credit {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: 58px;
  width: min(430px, calc(100vw - 56px));
  margin: 0;
  padding: 15px 42px 14px;
  border: 1px solid #8a633c;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(239, 202, 135, .08) 50%, transparent 94%),
    linear-gradient(180deg, #3b281c, #120d0d 48%, #070607);
  color: #e2bf84;
  text-align: center;
  box-shadow:
    inset 0 0 0 3px #0b0808,
    inset 0 0 0 4px rgba(187, 137, 78, .34),
    0 14px 36px rgba(0, 0, 0, .64);
  transform: translateX(-50%);
  transition: opacity .48s ease, transform .7s ease;
  pointer-events: none;
}

.book-credit::before,
.book-credit::after {
  content: "◆";
  position: absolute;
  top: 50%;
  color: #9c6534;
  font-size: .6rem;
  transform: translateY(-50%) rotate(45deg);
}

.book-credit::before { left: 17px; }
.book-credit::after { right: 17px; }
.book-credit span { display: block; margin-bottom: 3px; font-family: var(--serif); font-size: .61rem; letter-spacing: .23em; text-transform: uppercase; color: rgba(221, 179, 113, .7); }
.book-credit strong { display: block; font-family: Baskerville, "Iowan Old Style", Georgia, serif; font-size: 1.15rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #efcf96; text-shadow: 0 1px 4px #000; }
.book-credit small { display: block; margin-top: 5px; font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif; font-size: .76rem; color: rgba(232, 209, 173, .7); }

.ancient-book.is-opening .book-credit,
.ancient-book.is-open .book-credit {
  opacity: 0;
  transform: translate(-50%, 16px);
}

.ancient-book.is-opening .book-cover {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transform: translateX(-7%) rotateY(-102deg) rotateZ(-1deg) scale(.97);
  filter: brightness(.82) drop-shadow(34px 34px 26px rgba(0, 0, 0, .66));
}

.ancient-book.is-opening .book-reader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ancient-book.is-open .book-cover {
  transform: translateX(-31%) rotateY(-166deg) scale(.87);
  transition-duration: 1.05s, .58s, 0s, .58s;
  transition-delay: 0s, .38s, 1.25s, 0s;
}

.ancient-book.is-open .book-reader {
  transform: translateY(125px);
  transition-delay: .78s, .7s, 0s;
}

@media (max-width: 820px) {
  .ancient-book {
    min-height: clamp(920px, 176vw, 1210px);
  }

  .ancient-book::after {
    background-size: auto 100%;
  }

  .book-cover {
    top: -22px;
  }

  .ancient-book.is-open .book-reader {
    transform: translateY(80px);
  }

  .book-credit {
    bottom: 42px;
  }
}

@media (max-width: 520px) {
  .ancient-book {
    min-height: 760px;
  }

  .book-cover {
    top: -34px;
  }

  .book-credit {
    bottom: 28px;
    width: min(330px, calc(100vw - 34px));
    padding: 12px 32px 11px;
  }

  .book-credit strong { font-size: .9rem; letter-spacing: .13em; }
  .book-credit small { font-size: .66rem; }
  .ancient-book.is-open .book-reader { transform: translateY(42px); }
}

@media (prefers-reduced-motion: reduce) {
  .ancient-book.is-opening .book-cover { transform: none; opacity: 0; }
}

/* The grimoire emerges from the arch and then rests inside it */
.book-cover {
  width: min(574px, calc(100vw - 150px));
  top: -31px;
}

.book-cover:hover {
  transform: translateY(-8px) rotateZ(-.15deg) rotateY(1deg) scale(1.014);
}

.book-cover__photo {
  filter:
    drop-shadow(0 42px 38px rgba(0, 0, 0, .78))
    drop-shadow(0 0 42px rgba(156, 86, 42, .2));
}

.ancient-book::after {
  opacity: 1;
  background-position: center top;
}

.ancient-book.visible:not(.is-open):not(.is-opening) .book-cover {
  animation: grimoire-emerge-from-arch 2.55s cubic-bezier(.2, .66, .22, 1) backwards;
}

@keyframes grimoire-emerge-from-arch {
  0% {
    opacity: 0;
    transform: perspective(1800px) translateY(38px) translateZ(-270px) scale(.78) rotateZ(-1.3deg) rotateY(-2deg);
    filter: brightness(.42) saturate(.58) blur(3.5px);
  }
  34% {
    opacity: .46;
    transform: perspective(1800px) translateY(27px) translateZ(-178px) scale(.84) rotateZ(-1.1deg) rotateY(-1.8deg);
    filter: brightness(.58) saturate(.7) blur(2.2px);
  }
  72% {
    opacity: .9;
    transform: perspective(1800px) translateY(8px) translateZ(-32px) scale(.965) rotateZ(-.82deg) rotateY(-1.55deg);
    filter: brightness(.9) saturate(.9) blur(.45px);
  }
  100% {
    opacity: 1;
    transform: rotateZ(-.7deg) rotateY(-1.5deg);
    filter: none;
  }
}

.book-credit {
  bottom: 68px;
}

@media (max-width: 820px) {
  .book-cover {
    width: min(468px, calc(100vw - 88px));
    top: -22px;
  }

  .book-credit {
    bottom: 46px;
  }
}

@media (max-width: 520px) {
  .book-cover {
    width: min(300px, calc(100vw - 58px));
    top: -14px;
  }

  .book-credit {
    bottom: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ancient-book.visible:not(.is-open):not(.is-opening) .book-cover {
    animation: none;
  }
}

/* Premium Cards page composition */
.cards-page {
  background:
    radial-gradient(circle at 50% 19%, rgba(105, 37, 119, .2), transparent 30rem),
    radial-gradient(circle at 12% 58%, rgba(111, 24, 62, .15), transparent 32rem),
    linear-gradient(180deg, #07050a, #0d0710 42%, #07050a 100%);
}

.cards-page .book-hero {
  min-height: 650px;
  padding: 72px 0 90px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(207, 154, 91, .18);
  background:
    radial-gradient(circle at 50% 47%, rgba(114, 31, 127, .24), transparent 25rem),
    linear-gradient(180deg, rgba(10, 6, 13, .35), rgba(5, 4, 7, .9));
}

.cards-page .book-hero::before {
  content: "";
  position: absolute;
  width: min(820px, 86vw);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(210, 159, 99, .15);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 55%, rgba(120, 48, 135, .08) 56% 57%, transparent 58%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(216, 166, 102, .18) 12.2% 12.5%, transparent 12.7% 37%, rgba(216, 166, 102, .15) 37.2% 37.5%, transparent 37.7% 62%, rgba(216, 166, 102, .15) 62.2% 62.5%, transparent 62.7% 87%, rgba(216, 166, 102, .18) 87.2% 87.5%, transparent 87.7%);
  box-shadow: inset 0 0 100px rgba(103, 35, 117, .08), 0 0 90px rgba(78, 20, 86, .1);
  transform: translate(-50%, -48%);
  animation: cards-orbit 36s linear infinite;
}

.book-hero__frame {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  padding: 74px 54px 58px;
  border: 1px solid rgba(210, 159, 99, .24);
  border-radius: 34px 34px 110px 110px;
  background:
    linear-gradient(90deg, transparent, rgba(225, 176, 111, .24), transparent) top 22px center / 72% 1px no-repeat,
    radial-gradient(circle at 50% 0, rgba(127, 48, 139, .16), transparent 54%),
    rgba(10, 6, 13, .48);
  box-shadow: inset 0 0 0 8px rgba(5, 4, 7, .4), inset 0 0 85px rgba(102, 34, 112, .09), 0 30px 90px rgba(0, 0, 0, .36);
  text-align: center;
}

.book-hero__frame::before,
.book-hero__frame::after {
  content: "✦";
  position: absolute;
  top: 17px;
  color: rgba(224, 175, 108, .66);
  font-size: .76rem;
  text-shadow: 0 0 16px rgba(224, 175, 108, .55);
}

.book-hero__frame::before { left: 11%; }
.book-hero__frame::after { right: 11%; }
.book-hero__moon { display: grid; place-items: center; width: 62px; height: 62px; margin: -104px auto 26px; border: 1px solid rgba(220, 168, 102, .45); border-radius: 50%; background: #100813; color: #e0a86e; font-family: var(--serif); font-size: 1.75rem; box-shadow: inset 0 0 0 7px #08060a, inset 0 0 0 8px rgba(220, 168, 102, .16), 0 0 42px rgba(112, 41, 123, .38); }
.cards-page .book-hero .eyebrow { color: #d8a56e; letter-spacing: .28em; }
.cards-page .book-hero h1 { margin: 12px auto 20px; max-width: 980px; font-size: clamp(5rem, 10.5vw, 9.4rem); line-height: .78; letter-spacing: -.055em; text-shadow: 0 8px 42px rgba(0, 0, 0, .46); }
.cards-page .book-hero h1 .accent { display: block; margin-top: .18em; font-size: .82em; }
.cards-page .book-hero p:not(.eyebrow) { max-width: 690px; margin: 0 auto; color: rgba(235, 223, 225, .72); font-size: 1rem; }

.book-hero__jump {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 30px;
  padding: 13px 25px;
  border: 1px solid rgba(213, 158, 97, .48);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(65, 29, 49, .8), rgba(17, 9, 18, .94));
  color: #edcf9e;
  font-family: var(--serif);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  box-shadow: inset 0 0 20px rgba(145, 60, 114, .16), 0 12px 36px rgba(0, 0, 0, .42);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.book-hero__jump:hover { transform: translateY(-3px); border-color: rgba(235, 185, 120, .82); box-shadow: inset 0 0 25px rgba(145, 60, 114, .25), 0 16px 42px rgba(0, 0, 0, .52), 0 0 30px rgba(120, 48, 135, .18); }
.book-hero__jump b { font-size: 1rem; animation: book-jump-arrow 1.6s ease-in-out infinite; }

.cards-page .book-section {
  position: relative;
  padding-top: 112px;
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(5, 4, 7, .9), transparent 14%),
    radial-gradient(circle at 50% 32%, rgba(78, 24, 88, .16), transparent 36rem);
}

.cards-page .book-section::before,
.cards-page .book-section::after {
  content: "";
  position: absolute;
  top: 90px;
  bottom: 150px;
  width: 1px;
  background: linear-gradient(transparent, rgba(214, 162, 98, .35) 12%, rgba(214, 162, 98, .12) 75%, transparent);
}

.cards-page .book-section::before { left: max(24px, calc(50% - 650px)); }
.cards-page .book-section::after { right: max(24px, calc(50% - 650px)); }

.cards-page .book-intro {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin-inline: auto;
  padding: 62px 76px 48px;
  border: 1px solid rgba(215, 164, 101, .24);
  border-radius: 28px;
  background:
    linear-gradient(90deg, transparent, rgba(226, 178, 113, .17), transparent) top 24px center / 76% 1px no-repeat,
    radial-gradient(circle at 50% 0, rgba(105, 37, 116, .17), transparent 56%),
    rgba(15, 8, 17, .72);
  box-shadow: inset 0 0 0 7px rgba(5, 4, 7, .48), inset 0 0 60px rgba(94, 34, 105, .08), 0 32px 80px rgba(0, 0, 0, .34);
  text-align: center;
}

.book-intro__seal {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: -100px auto 25px;
  border: 1px solid rgba(215, 164, 101, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8b2f46, #35101f 50%, #0d080d 76%);
  color: #e8c58f;
  font-family: Baskerville, Georgia, serif;
  font-size: .84rem;
  letter-spacing: .13em;
  box-shadow: inset 0 0 0 7px #080508, inset 0 0 0 8px rgba(216, 166, 102, .25), 0 0 34px rgba(117, 39, 122, .34);
}

.cards-page .book-intro .section-title { max-width: 780px; margin-inline: auto; font-size: clamp(4rem, 7.6vw, 7rem); line-height: .9; }
.cards-page .book-intro > p:not(.eyebrow) { max-width: 780px; margin: 20px auto 0; color: rgba(235, 224, 226, .7); }

.book-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 38px;
  border: 1px solid rgba(215, 164, 101, .19);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(215, 164, 101, .14);
}

.book-meta span { padding: 18px 18px 17px; background: linear-gradient(180deg, rgba(35, 17, 30, .94), rgba(10, 7, 12, .98)); }
.book-meta small { display: block; margin-bottom: 5px; color: rgba(218, 168, 106, .62); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; }
.book-meta strong { display: block; color: #e8d9c5; font-family: var(--serif); font-size: .91rem; font-weight: 500; letter-spacing: .035em; }

.cards-page .ancient-book::after {
  background-image:
    linear-gradient(180deg, rgba(7, 4, 9, .03), rgba(7, 4, 9, 0) 58%, rgba(7, 4, 9, .16)),
    url("assets/grimoire-sanctum-v2.png");
  filter: saturate(.92) contrast(1.03);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
}

.book-credit {
  bottom: 66px;
  width: min(510px, calc(100vw - 62px));
  padding: 22px 58px 18px;
  border: 1px solid #9d7041;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% -40%, rgba(159, 46, 63, .28), transparent 42%),
    linear-gradient(180deg, #4c3322 0%, #211515 16%, #090708 58%, #171012 100%);
  box-shadow: inset 0 0 0 4px #090607, inset 0 0 0 5px rgba(207, 153, 87, .45), inset 0 0 28px rgba(139, 50, 76, .12), 0 18px 45px rgba(0, 0, 0, .7), 0 0 34px rgba(112, 46, 119, .15);
}

.book-credit::before,
.book-credit::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 108px;
  height: 34px;
  color: transparent;
  background:
    radial-gradient(circle at 50% 50%, #85213d 0 5px, #d19a59 6px 8px, transparent 9px),
    linear-gradient(90deg, transparent, #8e663f 18%, #d0a163 50%, #8e663f 82%, transparent) center / 100% 2px no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  transform: translateY(-50%);
}

.book-credit::before { left: -102px; }
.book-credit::after { right: -102px; }
.book-credit__gem { position: absolute; left: 50%; top: -16px; width: 31px; height: 31px; border: 2px solid #d3a064; transform: translateX(-50%) rotate(45deg); background: radial-gradient(circle at 34% 28%, #ff8d8a 0 8%, #a91f3d 23%, #4c071b 66%, #15040b 100%); box-shadow: inset 0 -7px 10px rgba(0, 0, 0, .48), 0 0 0 5px #120b0c, 0 0 0 6px rgba(206, 153, 89, .58), 0 0 22px rgba(178, 46, 76, .55); }
.book-credit span { margin-bottom: 4px; color: rgba(229, 184, 119, .78); }
.book-credit strong { font-size: 1.3rem; letter-spacing: .22em; background: linear-gradient(180deg, #fff0c7, #ca9456 72%, #79502f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.book-credit small { margin-top: 7px; color: rgba(238, 215, 183, .72); }

@keyframes cards-orbit { to { transform: translate(-50%, -48%) rotate(360deg); } }
@keyframes book-jump-arrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (max-width: 820px) {
  .cards-page .book-hero { min-height: 590px; padding-inline: 6px; }
  .book-hero__frame { padding: 66px 24px 50px; border-radius: 28px 28px 70px 70px; }
  .cards-page .book-hero h1 { font-size: clamp(4.1rem, 15vw, 7rem); }
  .cards-page .book-intro { padding: 58px 32px 38px; }
  .book-meta { grid-template-columns: 1fr; }
  .book-credit::before, .book-credit::after { width: 56px; }
  .book-credit::before { left: -50px; }.book-credit::after { right: -50px; }
}

@media (max-width: 520px) {
  .cards-page .book-hero { min-height: 530px; padding-top: 54px; }
  .book-hero__frame { padding: 58px 17px 42px; border-radius: 24px 24px 52px 52px; }
  .book-hero__moon { width: 52px; height: 52px; margin-top: -84px; }
  .cards-page .book-hero h1 { font-size: clamp(3.25rem, 15.5vw, 5rem); }
  .cards-page .book-hero p:not(.eyebrow) { font-size: .9rem; }
  .book-hero__jump { padding-inline: 17px; font-size: .64rem; }
  .cards-page .book-section { padding-top: 92px; }
  .cards-page .book-intro { padding: 52px 19px 28px; border-radius: 22px; }
  .book-intro__seal { width: 62px; height: 62px; margin-top: -84px; }
  .cards-page .book-intro .section-title { font-size: clamp(3.1rem, 13.5vw, 4.5rem); }
  .book-meta span { padding: 14px 12px; }
  .book-credit { width: min(336px, calc(100vw - 30px)); padding: 19px 36px 15px; }
  .book-credit strong { font-size: .92rem; letter-spacing: .14em; }
  .book-credit::before, .book-credit::after { display: none; }
}

/* Keep manuscript text clear of the illustrated botanical margin. */
.book-page--left .book-page__paper {
  padding-left: 18%;
  padding-right: 11.5%;
}

/* Cart close control mirrors the animated menu close control. */
.cart-head .cart-close {
  position: relative;
  isolation: isolate;
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(230, 170, 124, .34);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: radial-gradient(circle at 35% 28%, rgba(111, 42, 145, .28), rgba(17, 8, 21, .92) 64%);
  color: var(--ivory);
  box-shadow: inset 0 0 18px rgba(199, 122, 84, .05), 0 0 0 1px rgba(255, 255, 255, .015);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cart-head .cart-close::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  border: 1px solid rgba(230, 170, 124, .13);
  border-top-color: rgba(230, 170, 124, .52);
  border-radius: inherit;
  transition: transform .55s ease, border-color .3s ease;
}
.cart-drawer.open .cart-head .cart-close,
.cart-head .cart-close:hover,
.cart-head .cart-close:focus-visible {
  border-color: var(--copper-soft);
  transform: translateY(-2px);
  box-shadow: inset 0 0 22px rgba(111, 42, 145, .2), 0 0 22px rgba(199, 122, 84, .15);
}
.cart-drawer.open .cart-head .cart-close::before,
.cart-head .cart-close:hover::before,
.cart-head .cart-close:focus-visible::before {
  transform: rotate(180deg);
  border-color: rgba(230, 170, 124, .48);
}
.cart-drawer.open .menu-glyph--close i:nth-child(1) {
  top: 8px;
  width: 21px;
  transform: rotate(45deg);
}
.cart-drawer.open .menu-glyph--close i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.cart-drawer.open .menu-glyph--close i:nth-child(3) {
  top: 8px;
  width: 21px;
  transform: rotate(-45deg);
}

/* A crimson-gold thread marks the visitor's path through every page. */
.fate-thread {
  --thread-offset: 1;
  position: fixed;
  z-index: 46;
  top: 50%;
  right: 11px;
  width: 30px;
  height: min(61vh, 540px);
  min-height: 300px;
  pointer-events: none;
  transform: translateY(-50%);
  opacity: .72;
  filter: drop-shadow(0 0 8px rgba(132, 30, 67, .22));
  transition: opacity .4s ease, filter .4s ease;
}
.fate-thread.is-awake {
  opacity: .96;
  filter: drop-shadow(0 0 12px rgba(167, 44, 77, .34));
}
.fate-thread__line { position: absolute; inset: 22px 6px; width: 18px; height: calc(100% - 44px); overflow: visible; }
.fate-thread__shadow,
.fate-thread__progress { fill: none; stroke-linecap: round; }
.fate-thread__shadow { stroke: rgba(218, 169, 109, .18); stroke-width: 1.15; }
.fate-thread__progress { stroke: url(#fateThreadGradient); stroke-width: 1.75; stroke-dasharray: 1; stroke-dashoffset: var(--thread-offset); filter: drop-shadow(0 0 3px rgba(204, 69, 92, .68)); transition: stroke-dashoffset .16s linear; }
.fate-thread__moon,
.fate-thread__seal { position: absolute; left: 50%; transform: translateX(-50%); color: #d7a268; font-family: var(--serif); text-shadow: 0 0 11px rgba(214, 125, 86, .55); }
.fate-thread__moon { top: -5px; font-size: .84rem; }
.fate-thread__seal { bottom: -5px; font-size: .48rem; }
.fate-thread__knot {
  position: absolute;
  left: 50%;
  top: var(--knot-y);
  width: 7px;
  height: 7px;
  border: 1px solid rgba(207, 151, 91, .44);
  background: #140a11;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 3px rgba(16, 8, 13, .76);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.fate-thread__knot.is-passed {
  border-color: #e0aa6d;
  background: radial-gradient(circle at 35% 30%, #ff9b90, #8d1737 56%, #310818);
  box-shadow: 0 0 0 3px rgba(16, 8, 13, .82), 0 0 11px rgba(196, 49, 78, .72);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.18);
}

/* Small cursor-led reflections make jewels and polished metal feel physical. */
.brand-mark,
.ritual-card,
.book-cover,
.book-credit,
.book-intro__seal { --glint-x: 50%; --glint-y: 50%; }
.living-glint {
  position: absolute;
  z-index: 24;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle 7px at var(--glint-x) var(--glint-y), rgba(255, 249, 223, .96) 0 6%, rgba(255, 197, 137, .7) 18%, rgba(190, 56, 93, .26) 42%, transparent 72%),
    radial-gradient(circle 38px at var(--glint-x) var(--glint-y), rgba(241, 181, 119, .2), transparent 68%);
  mix-blend-mode: screen;
  filter: blur(.15px) drop-shadow(0 0 7px rgba(235, 154, 101, .35));
  transition: opacity .22s ease;
}
.is-glinting > .living-glint { opacity: .88; }
.brand-mark > .living-glint { inset: 10%; border-radius: 50%; }
.book-credit > .living-glint { inset: -18px -112px; }
.book-cover > .living-glint { inset: 8% 9% 10%; }
.ritual-card > .living-glint { inset: 1.5% 3%; }

/* The antique mirror clouds over, then clears exactly beneath the cursor. */
.mirror-fog {
  position: absolute;
  z-index: 4;
  inset: -9%;
  pointer-events: none;
  opacity: .66;
  background:
    radial-gradient(ellipse at 20% 28%, rgba(211, 202, 208, .18), transparent 32%),
    radial-gradient(ellipse at 77% 66%, rgba(187, 176, 190, .16), transparent 35%),
    radial-gradient(ellipse at 48% 92%, rgba(107, 76, 111, .18), transparent 42%),
    linear-gradient(118deg, rgba(231, 222, 223, .06), transparent 42%, rgba(177, 154, 176, .08));
  background-size: 128% 116%, 118% 132%, 130% 122%, auto;
  filter: blur(9px);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  animation: mirror-fog-drift 10s ease-in-out infinite alternate;
  transition: opacity .5s ease;
}
.mirror-glass.is-fog-active .mirror-fog {
  opacity: .82;
  -webkit-mask-image: radial-gradient(circle 98px at calc(var(--fog-x) + 9%) calc(var(--fog-y) + 9%), transparent 0 44%, rgba(0, 0, 0, .34) 62%, #000 100%);
  mask-image: radial-gradient(circle 98px at calc(var(--fog-x) + 9%) calc(var(--fog-y) + 9%), transparent 0 44%, rgba(0, 0, 0, .34) 62%, #000 100%);
}
@keyframes mirror-fog-drift {
  0% { background-position: 0% 0%, 100% 30%, 40% 100%, center; }
  50% { background-position: 12% 9%, 86% 45%, 52% 83%, center; }
  100% { background-position: 5% 18%, 96% 56%, 34% 91%, center; }
}

@media (max-width: 820px) {
  .fate-thread { right: 3px; width: 22px; opacity: .58; }
  .fate-thread__line { inset-inline: 4px; width: 14px; }
  .fate-thread__knot { width: 6px; height: 6px; }
}

@media (max-width: 420px) {
  .fate-thread { right: 0; opacity: .42; transform: translateY(-50%) scale(.84); transform-origin: right center; }
}

/* Portal navigation: every page is revealed through the same ceremonial ring. */
.page-veil {
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(71, 21, 82, .31), transparent 24%),
    #050307;
  transition: opacity .82s ease .18s, visibility .82s ease .18s;
}
.page-veil::before {
  inset: -25%;
  background:
    conic-gradient(from 30deg at 50% 50%, transparent, rgba(135, 47, 116, .11), transparent 24%, rgba(199, 122, 84, .08), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(123, 48, 144, .28), transparent 27%);
  filter: blur(18px);
  animation: portal-haze 8s linear infinite;
}
.page-portal {
  position: relative;
  z-index: 3;
  width: min(43vmin, 350px);
  aspect-ratio: 1;
  border: 1px solid rgba(231, 171, 116, .74);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #efbc82;
  box-shadow:
    0 0 0 10px rgba(200, 122, 84, .035),
    0 0 0 12px rgba(223, 167, 111, .18),
    0 0 70px rgba(122, 42, 137, .46),
    inset 0 0 70px rgba(73, 17, 88, .62);
  opacity: 1;
  transform: scale(1) rotate(0);
  transition: opacity .55s ease, transform .9s cubic-bezier(.16,.82,.22,1);
}
.page-portal::before,
.page-portal::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(229, 167, 110, .34);
  inset: 10%;
  transform: rotate(45deg);
}
.page-portal::after { inset: 22%; border-radius: 50%; transform: rotate(0); box-shadow: inset 0 0 40px rgba(5,3,7,.88); }
.page-portal i {
  position: absolute;
  inset: -8%;
  border: 1px dashed rgba(230, 170, 124, .3);
  border-radius: 50%;
  animation: portal-spin 9s linear infinite;
}
.page-portal b { position: relative; z-index: 2; font: 400 clamp(1.4rem, 4vw, 2.6rem)/1 var(--serif); text-shadow: 0 0 22px rgba(244, 185, 126, .88); animation: portal-star 1.7s ease-in-out infinite; }
.page-portal em { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, rgba(7,3,9,.96), rgba(38,8,46,.8) 52%, transparent 74%); box-shadow: 0 0 36px rgba(112, 42, 126, .65); }
.page-veil__smoke { position: absolute; z-index: 2; width: 58vw; height: 35vh; border-radius: 50%; filter: blur(38px); opacity: .38; background: radial-gradient(ellipse, rgba(136,100,136,.38), rgba(72,32,83,.17) 45%, transparent 72%); }
.page-veil__smoke--one { left: -10%; bottom: 13%; animation: portal-smoke-one 4.2s ease-in-out infinite alternate; }
.page-veil__smoke--two { right: -12%; top: 13%; animation: portal-smoke-two 5.1s ease-in-out infinite alternate; }
.page-veil__destination { position: absolute; z-index: 4; left: 50%; top: calc(50% + min(27vmin, 210px)); transform: translateX(-50%); color: rgba(239, 188, 130, .76); font: 400 .65rem/1 var(--serif); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.page-veil.is-ready .page-portal { opacity: 0; transform: scale(.08) rotate(-120deg); }
.page-veil.is-ready .page-veil__smoke,
.page-veil.is-ready .page-veil__destination { opacity: 0; }
.page-veil.is-closing .page-portal { animation: portal-arrive .95s cubic-bezier(.16,.82,.22,1) both; }
@keyframes portal-arrive { from { opacity: 0; transform: scale(.12) rotate(-120deg); } 55% { opacity: 1; } to { transform: scale(1) rotate(0); } }
@keyframes portal-spin { to { transform: rotate(360deg); } }
@keyframes portal-star { 50% { transform: scale(1.28) rotate(45deg); filter: brightness(1.35); } }
@keyframes portal-haze { to { transform: rotate(360deg) scale(1.25); } }
@keyframes portal-smoke-one { to { transform: translate3d(18vw,-7vh,0) scale(1.2); } }
@keyframes portal-smoke-two { to { transform: translate3d(-16vw,9vh,0) scale(.88); } }

/* The lunar phase mirrors reading progress without competing with the fate thread. */
.moon-progress {
  position: fixed;
  z-index: 46;
  left: 16px;
  top: 50%;
  width: 54px;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  pointer-events: none;
  opacity: .52;
  transition: opacity .4s ease, filter .4s ease;
}
.moon-progress.is-awake { opacity: .88; filter: drop-shadow(0 0 13px rgba(211, 151, 91, .28)); }
.moon-progress__orbit { position: relative; width: 44px; height: 44px; border: 1px solid rgba(222, 168, 108, .3); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(222,168,108,.022); }
.moon-progress__orbit::before { content: ""; position: absolute; inset: -7px; border: 1px dotted rgba(222,168,108,.2); border-radius: 50%; animation: moon-orbit-spin 18s linear infinite; }
.moon-progress__orbit i { position: relative; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe2a3, #c27b4f 55%, #6f203d 100%); box-shadow: 0 0 16px rgba(229,159,91,.42); }
.moon-progress__orbit i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: radial-gradient(circle at 62% 45%, #130b17, #07050a 70%); transition: transform .65s cubic-bezier(.2,.72,.18,1); }
.moon-progress.phase-0 .moon-progress__orbit i::after { transform: translateX(0); }
.moon-progress.phase-1 .moon-progress__orbit i::after { transform: translateX(7px); }
.moon-progress.phase-2 .moon-progress__orbit i::after { transform: translateX(15px); }
.moon-progress.phase-3 .moon-progress__orbit i::after { transform: translateX(23px); }
.moon-progress.phase-4 .moon-progress__orbit i::after { transform: translateX(34px); }
.moon-progress__label { writing-mode: vertical-rl; transform: rotate(180deg); color: rgba(218,172,119,.7); font: 400 .56rem/1 var(--serif); letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; }
@keyframes moon-orbit-spin { to { transform: rotate(360deg); } }

/* A user-controlled atmosphere: wind and candle crackle never autoplay. */
.sound-toggle {
  position: fixed;
  z-index: 65;
  left: 18px;
  bottom: 18px;
  min-width: 84px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(224, 166, 107, .28);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(244,233,219,.68);
  background: rgba(12,7,15,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0,0,0,.38), inset 0 0 16px rgba(123,48,144,.07);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sound-toggle:hover { transform: translateY(-2px); color: var(--ivory); border-color: rgba(224,166,107,.58); }
.sound-toggle[aria-pressed="true"] { color: #f1bd82; border-color: rgba(225,164,102,.66); box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 24px rgba(135,38,76,.2); }
.sound-toggle__icon { height: 15px; display: flex; align-items: center; gap: 2px; }
.sound-toggle__icon i { width: 2px; height: 5px; border-radius: 2px; background: currentColor; transition: height .2s ease; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon i { animation: sound-wave .8s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon i:nth-child(2) { animation-delay: -.25s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon i:nth-child(3) { animation-delay: -.52s; }
.sound-toggle__label { font-size: .57rem; letter-spacing: .13em; text-transform: uppercase; }
@keyframes sound-wave { to { height: 15px; } }

/* The former ring cursor becomes a slim antique quill with a fading gold trace. */
.mystic-cursor {
  width: 28px;
  height: 42px;
  margin: -5px 0 0 -7px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: opacity .2s ease, filter .2s ease;
  filter: drop-shadow(0 0 7px rgba(231,174,111,.5));
}
.mystic-cursor::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -13px;
  width: 14px;
  height: 38px;
  border-radius: 90% 8% 82% 15%;
  background: linear-gradient(115deg, rgba(255,239,190,.98), #c4814d 44%, #6d213d 72%, transparent 74%);
  transform: rotate(-28deg);
  transform-origin: bottom center;
  clip-path: polygon(49% 0, 100% 9%, 70% 48%, 100% 46%, 62% 63%, 72% 100%, 47% 76%, 0 100%, 29% 58%, 0 61%, 34% 42%);
}
.mystic-cursor::after { content: ""; inset: auto; left: 8px; top: 20px; width: 2px; height: 18px; background: linear-gradient(#d99c62, #8a2746); transform: rotate(-28deg); transform-origin: top center; box-shadow: 0 0 6px rgba(230,170,124,.6); }
.mystic-cursor.is-interactive { width: 28px; height: 42px; margin: -5px 0 0 -7px; filter: drop-shadow(0 0 11px rgba(255,204,142,.9)); }
.mystic-cursor.is-interactive::after { content: ""; font-size: 0; }
.cursor-trail { position: fixed; z-index: 799; width: var(--trail-size); height: var(--trail-size); border-radius: 50%; pointer-events: none; background: #f0b875; box-shadow: 0 0 8px rgba(230,151,93,.9); animation: cursor-dust .72s ease-out both; }
@keyframes cursor-dust { to { opacity: 0; transform: translate3d(var(--trail-drift),22px,0) scale(.1); } }

/* Store products sit on a velvet altar, with smoke and wax seals. */
.shop-sanctum { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 20%, rgba(111,42,145,.13), transparent 43%), linear-gradient(180deg, transparent, rgba(39,8,28,.18) 68%, rgba(7,3,9,.54)); }
.shop-sanctum::before,
.shop-sanctum::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22vw; max-width: 330px; pointer-events: none; opacity: .34; filter: blur(1px); }
.shop-sanctum::before { left: 0; background: linear-gradient(100deg, rgba(73,10,36,.85), transparent), repeating-linear-gradient(92deg, rgba(255,255,255,.02) 0 2px, transparent 3px 21px); clip-path: polygon(0 0,100% 0,58% 100%,0 100%); }
.shop-sanctum::after { right: 0; background: linear-gradient(260deg, rgba(73,10,36,.85), transparent), repeating-linear-gradient(88deg, rgba(255,255,255,.02) 0 2px, transparent 3px 21px); clip-path: polygon(0 0,100% 0,100% 100%,42% 100%); }
.shop-altar { position: relative; isolation: isolate; }
.altar-stage { position: absolute; z-index: -1; inset: 72px -3vw auto; height: 72%; pointer-events: none; border-top: 1px solid rgba(227,170,112,.12); background: linear-gradient(180deg, transparent, rgba(83,16,43,.1) 55%, rgba(29,6,19,.28)); box-shadow: inset 0 35px 70px rgba(0,0,0,.24); }
.altar-moon { position: absolute; left: 50%; top: -62px; transform: translateX(-50%); color: rgba(221,166,108,.17); font: 400 7rem/1 var(--serif); text-shadow: 0 0 50px rgba(119,41,137,.25); }
.altar-candle { position: absolute; top: 40px; width: 18px; height: 72px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg,#80635c,#d3b3a0 47%,#5c4344); box-shadow: 0 20px 38px rgba(0,0,0,.55); }
.altar-candle--left { left: 1vw; }
.altar-candle--right { right: 1vw; }
.altar-candle i { position: absolute; left: 50%; top: -18px; width: 11px; height: 23px; transform: translateX(-50%); border-radius: 55% 45% 52% 48%; background: radial-gradient(circle at 50% 65%, #fff5c9 0 12%, #f49a49 35%, #8c2447 68%, transparent 72%); filter: drop-shadow(0 0 13px #e2764e); animation: altar-flame 1.8s ease-in-out infinite alternate; }
@keyframes altar-flame { to { transform: translateX(-50%) scale(.82,1.12) rotate(4deg); filter: drop-shadow(0 0 19px #e99a62); } }
.shop-altar .product-grid { position: relative; padding: 34px 26px 48px; border: 1px solid rgba(220,161,103,.1); border-bottom-color: rgba(220,161,103,.28); background: linear-gradient(180deg, rgba(5,3,7,.12), rgba(71,11,34,.16)), radial-gradient(ellipse at 50% 100%, rgba(125,28,58,.2), transparent 57%); box-shadow: 0 34px 70px rgba(0,0,0,.32), inset 0 -18px 30px rgba(25,4,15,.32); }
.shop-altar .product-card { border-color: rgba(216,157,100,.16); background: linear-gradient(150deg, rgba(28,13,25,.96), rgba(9,6,11,.94)); box-shadow: 0 22px 44px rgba(0,0,0,.35), inset 0 0 35px rgba(111,42,145,.025); }
.artifact-smoke { position: absolute; z-index: 2; left: 20%; right: 20%; bottom: 3%; height: 48%; opacity: .18; filter: blur(13px); background: radial-gradient(ellipse at 35% 70%, rgba(199,183,196,.56), transparent 43%), radial-gradient(ellipse at 70% 34%, rgba(126,93,122,.5), transparent 47%); animation: artifact-smoke 5.6s ease-in-out infinite alternate; }
.artifact-halo { position: absolute; z-index: 0; inset: 17%; border: 1px solid rgba(229,170,113,.17); border-radius: 50%; box-shadow: 0 0 35px rgba(114,37,129,.2), inset 0 0 25px rgba(114,37,129,.12); animation: artifact-halo 11s linear infinite; }
.artifact-pedestal { position: absolute; z-index: 1; left: 25%; right: 25%; bottom: 11%; height: 11%; border-radius: 50%; background: radial-gradient(ellipse, rgba(216,158,102,.34), rgba(78,27,55,.26) 48%, transparent 73%); box-shadow: 0 9px 15px rgba(0,0,0,.56); }
.product-art::after { z-index: 3; }
.product-card:hover .artifact-smoke { opacity: .5; filter: blur(9px); }
.product-card:hover .artifact-halo { border-color: rgba(239,185,128,.48); box-shadow: 0 0 46px rgba(147,44,152,.36), inset 0 0 29px rgba(145,47,155,.23); }
@keyframes artifact-smoke { to { transform: translate3d(13px,-22px,0) scale(1.22); opacity: .34; } }
@keyframes artifact-halo { to { transform: rotate(360deg); } }
.wax-cart-button { min-width: 116px; overflow: visible; border-color: transparent; padding-right: 42px; background: rgba(18,8,16,.76); }
.wax-cart-button > span { position: relative; z-index: 2; }
.wax-cart-button > i { position: absolute; z-index: 3; right: -2px; top: 50%; width: 37px; height: 37px; margin-top: -18.5px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,221,190,.78); font: 600 .52rem/1 "Copperplate", serif; letter-spacing: .03em; background: radial-gradient(circle at 33% 26%, #c84f5d, #7e1839 51%, #3c0b22 100%); border: 1px solid #d26a67; box-shadow: 0 3px 9px rgba(0,0,0,.5), inset 0 0 0 4px rgba(72,10,34,.23), 0 0 0 3px rgba(91,20,45,.22); transition: transform .35s ease, filter .35s ease; }
.wax-cart-button:hover > i { transform: rotate(-10deg) scale(1.1); filter: brightness(1.18); }
.wax-cart-button .button-runes { display: none; }

/* The cart is now an opening reliquary chest rather than a flat drawer. */
.cart-chest { perspective: 1300px; }
.cart-chest .cart-backdrop { background: radial-gradient(circle at 72% 44%, rgba(74,24,79,.24), transparent 26%), rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.cart-chest .cart-panel {
  isolation: isolate;
  transform-origin: right center;
  transform: translateX(108%) rotateY(-18deg) scale(.97);
  padding: 58px 34px 30px;
  border-left: 3px double rgba(205,145,87,.42);
  background:
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 4% 96%, rgba(255,255,255,.016)),
    repeating-linear-gradient(0deg, rgba(233,177,119,.025) 0 1px, transparent 1px 24px),
    radial-gradient(ellipse at 50% 0%, rgba(111,42,145,.18), transparent 39%),
    linear-gradient(145deg, #1c0d16, #09060a 52%, #220b18);
  box-shadow: -32px 0 85px rgba(0,0,0,.72), inset 0 0 0 8px rgba(93,42,48,.15), inset 0 0 0 10px rgba(209,150,92,.09);
  transition: transform .72s cubic-bezier(.16,.82,.22,1);
}
.cart-chest.open .cart-panel { transform: translateX(0) rotateY(0) scale(1); }
.cart-chest .cart-panel::before { content: ""; position: absolute; z-index: -1; left: 9px; right: 9px; top: 10px; height: 70px; border: 1px solid rgba(215,157,98,.23); border-radius: 48% 48% 8px 8px / 38px 38px 8px 8px; background: linear-gradient(180deg, rgba(110,39,62,.19), rgba(22,9,15,.2)); box-shadow: inset 0 0 23px rgba(0,0,0,.38); }
.cart-chest .cart-panel::after { content: ""; position: absolute; z-index: 4; left: 50%; top: 43px; width: 34px; height: 28px; transform: translateX(-50%); border: 1px solid #a8664f; border-radius: 6px 6px 12px 12px; background: radial-gradient(circle at 50% 45%, #d58b61 0 3px, #57162f 4px 8px, #210a17 9px); box-shadow: 0 4px 13px rgba(0,0,0,.55); }
.cart-chest-ornament { position: absolute; z-index: 3; left: 50%; top: 21px; width: 190px; height: 52px; transform: translateX(-50%); pointer-events: none; display: flex; align-items: center; justify-content: space-between; color: rgba(222,165,105,.48); }
.cart-chest-ornament::before,
.cart-chest-ornament::after { content: ""; width: 65px; height: 1px; background: linear-gradient(90deg, transparent, rgba(222,165,105,.44)); }
.cart-chest-ornament::after { transform: scaleX(-1); }
.cart-chest-ornament span,
.cart-chest-ornament b { font: 400 .65rem/1 var(--serif); }
.cart-chest-ornament i { position: absolute; left: 50%; top: 13px; width: 25px; height: 25px; border: 1px solid rgba(213,153,95,.27); transform: translateX(-50%) rotate(45deg); }
.cart-chest .cart-item { margin: 8px 0; padding: 17px 14px; border: 1px solid rgba(214,155,97,.11); background: rgba(8,4,8,.33); box-shadow: inset 0 0 22px rgba(100,31,89,.04); }
.cart-chest .cart-empty::before { content: "☾"; display: block; margin-bottom: 18px; color: rgba(224,166,107,.54); font: 400 2.4rem/1 var(--serif); text-shadow: 0 0 22px rgba(111,42,145,.34); }

/* Consultation requests are sealed with wax before being stored. */
.booking-form-stage { position: relative; min-height: 620px; display: grid; align-items: start; scroll-margin-top: 126px; }
.booking-seal-gate {
  grid-area: 1 / 1;
  position: relative;
  min-height: 620px;
  padding: 58px 34px;
  border: 1px solid rgba(218,158,101,.18);
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(118,35,73,.24), transparent 31%),
    radial-gradient(circle at 50% 48%, rgba(111,42,145,.13), transparent 54%),
    linear-gradient(145deg, rgba(28,12,24,.97), rgba(8,5,10,.96));
  box-shadow: var(--shadow), inset 0 0 0 9px rgba(214,155,98,.025), inset 0 0 60px rgba(111,42,145,.1);
}
.booking-seal-gate[hidden] {
  display: none !important;
}
.booking-seal-gate::before,
.booking-seal-gate::after { content: ""; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(220,162,104,.12); transform: rotate(45deg); }
.booking-seal-gate::before { left: -145px; top: -145px; }
.booking-seal-gate::after { right: -145px; bottom: -145px; }
.booking-seal-gate__ornament { color: rgba(224,166,108,.55); font: 400 .75rem/1 var(--serif); letter-spacing: .75em; margin-right: -.75em; }
.booking-seal-gate h2 { margin: 18px 0 32px; max-width: 480px; color: var(--ivory); font: 400 clamp(2rem,4vw,3rem)/1.08 var(--serif); }
.booking-seal-gate small { margin-top: 18px; color: rgba(205,189,202,.54); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.booking-seal-open { position: relative; width: 128px; height: 128px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #f8d2af; cursor: pointer; background: radial-gradient(circle at 35% 26%, #d45a62, #982646 42%, #59102d 75%, #2b0719 100%); box-shadow: 0 16px 30px rgba(0,0,0,.5), inset 0 0 0 12px rgba(79,11,35,.19), inset 0 0 24px rgba(255,190,141,.13), 0 0 0 7px rgba(115,25,51,.17), 0 0 45px rgba(145,36,74,.22); transition: transform .35s ease, filter .35s ease; }
.booking-seal-open::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(252,204,166,.3); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(62,8,28,.18); }
.booking-seal-open::after { content: "✦"; position: absolute; inset: 31px; border: 1px solid rgba(252,204,166,.13); border-radius: 50%; display: grid; place-items: center; color: rgba(250,210,176,.2); }
.booking-seal-open span { position: relative; z-index: 2; font: 600 1.4rem/1 "Copperplate", serif; letter-spacing: .08em; text-shadow: 0 2px 6px rgba(46,5,22,.7); }
.booking-seal-open i { position: absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); min-width: 170px; color: #e5ad78; font: 400 .69rem/1 var(--serif); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.booking-seal-open:hover { transform: translateY(-5px) rotate(-5deg) scale(1.04); filter: brightness(1.12); }
.booking-seal-shard { position: absolute; z-index: 5; left: 48px; top: 46px; width: 28px; height: 31px; opacity: 0; background: #8f2142; clip-path: polygon(0 0,100% 13%,81% 100%,15% 79%); }
.booking-seal-gate.is-breaking .booking-seal-open { animation: booking-seal-break .75s cubic-bezier(.18,.7,.2,1) both; }
.booking-seal-gate.is-breaking .booking-seal-shard { animation: booking-shard .68s ease-out both; }
.booking-seal-gate.is-breaking .booking-seal-shard--two { --booking-x: 86px; --booking-y: 65px; animation-delay: .05s; }
.booking-seal-gate.is-breaking { animation: booking-gate-fade .8s ease .25s both; }
@keyframes booking-seal-break { 0% { transform: none; } 38% { transform: scale(1.18) rotate(-8deg); filter: brightness(1.4); } 100% { transform: scale(.56) rotate(24deg); opacity: .08; } }
@keyframes booking-shard { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--booking-x,-74px),var(--booking-y,78px)) rotate(170deg); } }
@keyframes booking-gate-fade { to { opacity: 0; filter: blur(13px); transform: scale(1.035); } }
.booking-form-stage .contact-form { grid-area: 1 / 1; }
.booking-form-stage .contact-form.is-veiled { opacity: 0; visibility: hidden; transform: scale(.96); pointer-events: none; }
.booking-form-stage .contact-form.is-unsealed { animation: booking-form-reveal .9s cubic-bezier(.16,.82,.22,1) both; }
@keyframes booking-form-reveal { from { opacity: 0; transform: translateY(20px) scale(.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
.contact-form { position: relative; overflow: hidden; }
.contact-form::after { content: ""; position: absolute; pointer-events: none; inset: 10px; border: 1px solid rgba(218,158,101,.08); }
.wax-seal-submit { position: relative; min-width: 225px; min-height: 62px; padding: 0 24px 0 78px; overflow: visible; border: 0; border-radius: 4px; color: var(--ivory); background: linear-gradient(90deg, rgba(24,10,21,.96), rgba(53,13,34,.96)); box-shadow: 0 12px 30px rgba(0,0,0,.33), inset 0 0 0 1px rgba(221,163,105,.2); }
.wax-seal-submit::after { display: none !important; }
.wax-seal-submit::before { content: ""; position: absolute; left: 52px; top: 50%; right: -10px; height: 1px; background: linear-gradient(90deg, rgba(218,157,98,.5), transparent); }
.wax-seal-submit__mark { position: absolute; z-index: 3; left: -4px; top: 50%; width: 70px; height: 70px; margin-top: -35px; border-radius: 50%; display: grid; place-items: center; color: #f2c6a0; font: 600 .9rem/1 "Copperplate", serif; letter-spacing: .08em; background: radial-gradient(circle at 35% 27%, #c8515d, #8d1f42 43%, #501029 74%, #280616); border: 1px solid #d66c69; box-shadow: 0 8px 18px rgba(0,0,0,.48), inset 0 0 0 8px rgba(71,10,32,.22), inset 0 0 16px rgba(255,186,137,.12), 0 0 0 4px rgba(104,23,48,.2); transition: transform .35s ease, filter .35s ease; }
.wax-seal-submit__mark::after { content: "✦"; position: absolute; inset: 9px; border: 1px solid rgba(245,197,158,.24); border-radius: 50%; display: grid; place-items: center; color: transparent; }
.wax-seal-submit__text { position: relative; z-index: 2; font: 400 .72rem/1.2 var(--serif); letter-spacing: .13em; text-transform: uppercase; }
.wax-seal-submit:hover .wax-seal-submit__mark { transform: rotate(-8deg) scale(1.06); filter: brightness(1.14); }
.wax-fragment { position: absolute; z-index: 5; left: 23px; top: 23px; width: 16px; height: 18px; background: #8d1f42; clip-path: polygon(0 0,100% 20%,73% 100%,18% 78%); opacity: 0; pointer-events: none; }
.wax-seal-submit.is-breaking .wax-seal-submit__mark { animation: seal-break .78s cubic-bezier(.2,.7,.2,1) both; }
.wax-seal-submit.is-breaking .wax-fragment { animation: wax-fragment .75s ease-out both; }
.wax-seal-submit.is-breaking .wax-fragment--two { animation-delay: .05s; --wax-x: 55px; --wax-y: 22px; transform: rotate(70deg); }
.wax-seal-submit.is-stamped .wax-seal-submit__mark { animation: seal-stamp .65s ease both; }
@keyframes seal-break { 0% { transform: none; } 38% { transform: scale(1.16) rotate(-7deg); filter: brightness(1.35); } 100% { transform: scale(.72) rotate(17deg); opacity: .22; } }
@keyframes wax-fragment { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--wax-x,-42px),var(--wax-y,36px)) rotate(140deg); } }
@keyframes seal-stamp { 0% { transform: scale(1.22); opacity: .3; } 55% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }

/* The Matrix draws itself and every node can be opened for its meaning. */
.result-wheel { overflow: visible; background: radial-gradient(circle at 50% 50%, rgba(111,42,145,.13), transparent 58%); }
.matrix-lines { position: absolute; inset: 5%; width: 90%; height: 90%; overflow: visible; }
.matrix-lines path,
.matrix-lines circle { fill: none; stroke: url(#none); stroke: rgba(218,159,100,.42); stroke-width: .33; stroke-dasharray: 420; stroke-dashoffset: 420; filter: drop-shadow(0 0 2px rgba(152,56,153,.45)); }
.matrix-lines path:nth-child(2) { stroke: rgba(146,62,157,.4); stroke-dasharray: 520; stroke-dashoffset: 520; }
.matrix-lines circle { stroke: rgba(218,159,100,.21); stroke-dasharray: 210; stroke-dashoffset: 210; }
.matrix-result.is-awakening .matrix-lines path,
.matrix-result.is-awakening .matrix-lines circle { animation: matrix-draw 1.9s cubic-bezier(.22,.72,.18,1) forwards; }
.matrix-result.is-awakening .matrix-lines path:nth-child(2) { animation-delay: .26s; }
.matrix-result.is-awakening .matrix-lines circle { animation-delay: .52s; }
@keyframes matrix-draw { to { stroke-dashoffset: 0; } }
.result-node,
.result-number { cursor: pointer; outline: none; transition: transform .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease; }
.matrix-result.is-awakening .result-node,
.matrix-result.is-awakening .result-number { animation: matrix-node-awake .72s cubic-bezier(.15,.78,.18,1) both; }
.matrix-result.is-awakening .result-node.right { animation-delay: .18s; }
.matrix-result.is-awakening .result-node.bottom { animation-delay: .36s; }
.matrix-result.is-awakening .result-node.left { animation-delay: .54s; }
.matrix-result.is-awakening .result-number { animation-delay: .76s; }
@keyframes matrix-node-awake { from { opacity: 0; transform: scale(.3) rotate(-90deg); filter: blur(8px); } to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); } }
.result-node::after,
.result-number::after { content: attr(data-matrix-label); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); color: rgba(218,166,111,.66); font: 400 .52rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .25s ease; }
.result-node:hover,
.result-node:focus-visible,
.result-number:hover,
.result-number:focus-visible,
.result-node.is-selected,
.result-number.is-selected { color: #fff0d9; border-color: #e2a667; transform: scale(1.12); box-shadow: 0 0 0 5px rgba(212,151,93,.05), 0 0 28px rgba(136,41,139,.38), inset 0 0 22px rgba(183,78,108,.13); }
.result-node:hover::after,
.result-node:focus-visible::after,
.result-number:hover::after,
.result-number:focus-visible::after,
.result-node.is-selected::after,
.result-number.is-selected::after { opacity: 1; }
.matrix-orbit { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; margin: -50%; color: rgba(225,168,108,.55); font: 400 .8rem/1 var(--serif); animation: matrix-orbit 13s linear infinite; pointer-events: none; }
.matrix-orbit::before { content: inherit; position: absolute; left: 50%; top: -7px; }
.matrix-orbit--two { width: 78%; height: 78%; margin: -39%; color: rgba(159,77,166,.6); animation-direction: reverse; animation-duration: 9s; }
@keyframes matrix-orbit { to { transform: rotate(360deg); } }

/* Triple-clicking the home logo reveals a cinematic secret omen. */
.secret-omen { position: fixed; z-index: 920; inset: 0; overflow: hidden; pointer-events: auto; opacity: 0; background: radial-gradient(circle at 50% 48%, rgba(53,16,64,.38), transparent 28%), rgba(3,2,5,.88); transition: opacity .45s ease; }
.secret-omen.is-visible { opacity: 1; }
.secret-omen__moon { position: absolute; left: 50%; top: 48%; width: min(58vmin, 520px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%) scale(.65); background: radial-gradient(circle at 37% 34%, #ffe8bb, #d49a68 58%, #7f3450 83%, #2c0e25 100%); box-shadow: 0 0 90px rgba(224,163,104,.32), 0 0 190px rgba(122,42,135,.24); animation: secret-moon-rise 5.8s ease-out both; }
.secret-omen__moon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .28; background: radial-gradient(circle at 63% 31%, #70465a 0 4%, transparent 5%), radial-gradient(circle at 31% 66%, #825061 0 7%, transparent 8%), radial-gradient(circle at 62% 75%, #76485d 0 5%, transparent 6%); mix-blend-mode: multiply; }
.secret-omen__stars { position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(circle, #f4c78f 0 1px, transparent 1.5px); background-size: 83px 79px; animation: secret-stars 6s linear both; }
.secret-witch { position: absolute; z-index: 3; left: -30vw; top: 42%; width: min(42vw, 470px); filter: drop-shadow(0 0 12px rgba(129,42,139,.42)); animation: secret-witch-flight 5.2s cubic-bezier(.19,.65,.2,1) .38s both; }
.secret-witch svg { width: 100%; overflow: visible; }
.secret-witch__broom { fill: none; stroke: #140a18; stroke-width: 7; stroke-linecap: round; }
.secret-witch__body,
.secret-witch__hat,
.secret-witch__cloak { fill: #100713; stroke: rgba(225,164,104,.25); stroke-width: 1; }
.secret-omen__message { position: absolute; z-index: 4; left: 50%; bottom: 10vh; transform: translateX(-50%); color: rgba(250,220,182,.88); font: 400 clamp(.72rem,1.4vw,1rem)/1 var(--serif); letter-spacing: .28em; text-transform: uppercase; white-space: nowrap; opacity: 0; animation: secret-message 5.4s ease 1s both; }
@keyframes secret-moon-rise { 0% { opacity: 0; transform: translate(-50%,-36%) scale(.28); } 24% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes secret-stars { to { transform: translateX(-45px); opacity: .3; } }
@keyframes secret-witch-flight { 0% { transform: translate3d(0,18vh,0) scale(.45) rotate(-8deg); opacity: 0; } 16% { opacity: 1; } 48% { transform: translate3d(65vw,-5vh,0) scale(.9) rotate(2deg); } 100% { transform: translate3d(145vw,-20vh,0) scale(1.35) rotate(-4deg); opacity: 0; } }
@keyframes secret-message { 0%,12%,100% { opacity: 0; } 28%,72% { opacity: 1; text-shadow: 0 0 18px rgba(229,168,111,.52); } }

@media (max-width: 820px) {
  .moon-progress { left: 3px; transform: translateY(-50%) scale(.82); transform-origin: left center; opacity: .48; }
  .moon-progress__label { display: none; }
  .sound-toggle { left: 10px; bottom: 10px; min-width: 42px; width: 42px; padding: 0; }
  .sound-toggle__label { display: none; }
  .shop-altar .product-grid { padding: 28px 16px 35px; }
  .altar-candle { display: none; }
  .wax-seal-submit { margin-left: 8px; }
  .booking-form-stage,
  .booking-seal-gate { min-height: 560px; }
  .secret-witch { width: 70vw; }
}

@media (max-width: 520px) {
  .page-portal { width: 64vmin; }
  .page-veil__destination { top: calc(50% + 38vmin); }
  .moon-progress { display: none; }
  .shop-altar .product-grid { padding-inline: 10px; }
  .wax-cart-button { min-width: 104px; }
  .cart-chest .cart-panel { padding-inline: 22px; }
  .wax-seal-submit { min-width: 205px; padding-left: 68px; }
  .wax-seal-submit__mark { width: 62px; height: 62px; margin-top: -31px; }
  .booking-seal-gate { min-height: 510px; padding-inline: 20px; }
  .booking-seal-open { width: 112px; height: 112px; }
  .result-wheel { width: min(345px, 86vw); }
  .result-node { width: 58px; height: 58px; }
  .result-node.top { left: calc(50% - 29px); }
  .result-node.right { top: calc(50% - 29px); }
  .result-node.bottom { left: calc(50% - 29px); }
  .result-node.left { top: calc(50% - 29px); }
}

@media (prefers-reduced-motion: reduce) {
  .page-portal,
  .page-portal *,
  .moon-progress *,
  .artifact-smoke,
  .artifact-halo,
  .altar-candle i,
  .matrix-orbit,
  .secret-omen *,
  .cursor-trail { animation: none !important; }
  .cursor-trail { display: none; }
  .page-veil { transition-duration: .15s; }
}

/* Literal antique chest cart: a centered object with its own opening lid. */
.cart-chest { perspective: 1500px; }
.cart-chest .cart-backdrop {
  background:
    radial-gradient(ellipse at 50% 84%, rgba(143,48,88,.2), transparent 34%),
    radial-gradient(circle at 50% 44%, rgba(74,24,79,.3), transparent 30%),
    rgba(0,0,0,.84);
  backdrop-filter: blur(7px) saturate(.72);
}
.cart-chest .cart-panel {
  top: 57%;
  left: 50%;
  right: auto;
  width: min(620px, calc(100% - 34px));
  height: min(510px, calc(100vh - 210px));
  min-height: 360px;
  padding: 54px 44px 30px;
  overflow: visible;
  border: 3px double rgba(216,156,93,.52);
  border-radius: 12px 12px 27px 27px;
  transform-origin: center bottom;
  transform: translate(-50%,-32%) rotateX(-12deg) scale(.72);
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 5% 95%, rgba(255,255,255,.018)),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(229,170,110,.035) 39px, transparent 40px),
    repeating-linear-gradient(94deg, rgba(66,21,34,.2) 0 3px, transparent 4px 63px),
    radial-gradient(ellipse at 50% 0%, rgba(115,40,100,.2), transparent 38%),
    linear-gradient(145deg, #28121b, #0d080b 52%, #32101d);
  box-shadow:
    0 48px 90px rgba(0,0,0,.78),
    inset 0 0 0 9px rgba(94,42,44,.18),
    inset 0 0 0 11px rgba(219,158,96,.11),
    inset 0 -30px 55px rgba(0,0,0,.34);
  transition: transform .78s cubic-bezier(.16,.82,.22,1), opacity .42s ease;
}
.cart-chest.open .cart-panel {
  transform: translate(-50%,-42%) rotateX(0) scale(1);
  opacity: 1;
}
.cart-chest .cart-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px;
  height: auto;
  border: 1px solid rgba(221,161,101,.14);
  border-radius: 7px 7px 18px 18px;
  background: none;
  box-shadow: inset 0 0 42px rgba(0,0,0,.22);
}
.cart-chest .cart-panel::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 50%;
  top: -20px;
  width: 54px;
  height: 44px;
  transform: translateX(-50%);
  border: 2px solid #b56f50;
  border-radius: 7px 7px 15px 15px;
  background:
    radial-gradient(circle at 50% 45%, #f0b276 0 3px, #7b1939 4px 10px, transparent 11px),
    linear-gradient(145deg,#c58558,#6f2c3b 45%,#26101b 72%,#a65f49);
  box-shadow: 0 8px 18px rgba(0,0,0,.62), inset 0 0 0 4px rgba(37,10,19,.28), 0 0 18px rgba(185,91,76,.18);
}
.cart-chest-lid {
  position: absolute;
  z-index: -2;
  left: 11px;
  right: 11px;
  top: -160px;
  height: 166px;
  overflow: hidden;
  border: 3px double rgba(216,156,93,.54);
  border-bottom-width: 5px;
  border-radius: 50% 50% 8px 8px / 108px 108px 8px 8px;
  transform-origin: center bottom;
  opacity: 0;
  transform: translateY(154px) rotateX(-84deg) scaleY(.55);
  background:
    repeating-linear-gradient(90deg, rgba(224,163,101,.04) 0 2px, transparent 3px 54px),
    radial-gradient(ellipse at 50% 76%, rgba(122,43,108,.2), transparent 48%),
    linear-gradient(155deg,#341620,#11090d 58%,#3b1221);
  box-shadow: 0 -16px 50px rgba(0,0,0,.48), inset 0 0 0 9px rgba(91,37,44,.2), inset 0 0 0 11px rgba(218,157,98,.09);
}
.cart-chest.open .cart-chest-lid { animation: chest-lid-open 1.05s cubic-bezier(.14,.75,.18,1) .12s forwards; }
.cart-chest-lid__panel { position: absolute; inset: 26px 48px 21px; border: 1px solid rgba(218,157,98,.19); border-radius: 50% 50% 10px 10px / 70px 70px 10px 10px; box-shadow: inset 0 0 32px rgba(0,0,0,.42), 0 0 0 5px rgba(77,23,36,.17); }
.cart-chest-lid__panel::before,
.cart-chest-lid__panel::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(transparent, rgba(221,160,99,.35), transparent); }
.cart-chest-lid__panel::before { left: 25%; }
.cart-chest-lid__panel::after { right: 25%; }
.cart-chest-lid__crest { position: absolute; left: 50%; top: 47px; width: 64px; height: 64px; transform: translateX(-50%); border: 1px solid rgba(227,168,106,.45); border-radius: 50%; display: grid; place-items: center; color: #d99c64; font: 400 1.6rem/1 var(--serif); background: radial-gradient(circle, rgba(109,32,73,.35), rgba(16,8,13,.76)); box-shadow: 0 0 0 6px rgba(213,151,92,.045), inset 0 0 24px rgba(111,42,145,.22), 0 0 24px rgba(111,42,145,.13); text-shadow: 0 0 12px rgba(225,164,104,.68); }
.cart-rivet { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#efbc82,#8d4b46 56%,#30141f); box-shadow: 0 2px 5px rgba(0,0,0,.6); }
.cart-rivet.r1 { left: 22px; top: 80px; }
.cart-rivet.r2 { right: 22px; top: 80px; }
.cart-rivet.r3 { left: 74px; bottom: 15px; }
.cart-rivet.r4 { right: 74px; bottom: 15px; }
.cart-chest-lid .cart-chest-ornament { top: 18px; width: 88%; opacity: .55; }
.cart-chest-lid .cart-chest-ornament i { display: none; }
.cart-chest-base { position: absolute; z-index: -2; inset: auto 0 -27px; height: 30px; pointer-events: none; }
.cart-chest-base::before { content: ""; position: absolute; left: 9%; right: 9%; top: 0; height: 13px; border: 1px solid rgba(214,153,93,.3); background: linear-gradient(180deg,#3b1720,#170a10); box-shadow: 0 12px 20px rgba(0,0,0,.55); }
.cart-chest-foot { position: absolute; top: 5px; width: 52px; height: 23px; border: 1px solid rgba(214,153,93,.32); background: linear-gradient(145deg,#32131c,#12080d); clip-path: polygon(0 0,100% 0,78% 100%,17% 100%); }
.cart-chest-foot--left { left: 9%; }
.cart-chest-foot--right { right: 9%; transform: scaleX(-1); }
.cart-chest-handle { position: absolute; left: 50%; top: 3px; width: 105px; height: 30px; transform: translateX(-50%); border: 3px solid rgba(179,108,75,.54); border-top: 0; border-radius: 0 0 70px 70px; box-shadow: inset 0 -3px 5px rgba(0,0,0,.45); }
.cart-chest .cart-head { flex: 0 0 auto; padding: 0 0 17px; border-bottom: 1px solid rgba(220,159,98,.22); }
.cart-chest .cart-head h2 { color: #f1dfcf; font-size: 1.65rem; text-shadow: 0 2px 7px rgba(0,0,0,.6); }
.cart-chest .cart-items { padding: 15px 2px; scrollbar-color: #7f2944 transparent; }
.cart-chest .cart-item { background: linear-gradient(90deg, rgba(91,21,46,.12), rgba(10,5,9,.36)); border: 1px solid rgba(218,157,98,.14); }
.cart-chest .cart-foot { flex: 0 0 auto; background: linear-gradient(180deg, rgba(14,7,11,.12), rgba(70,17,38,.13)); }
.cart-chest .cart-close { background: radial-gradient(circle at 35% 28%, rgba(123,43,94,.3), rgba(21,9,17,.94) 64%); }
@keyframes chest-lid-open {
  0% { opacity: 0; transform: translateY(154px) rotateX(-84deg) scaleY(.55); filter: brightness(.55); }
  20% { opacity: 1; }
  68% { transform: translateY(-9px) rotateX(9deg) scaleY(1.035); filter: brightness(1.16); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scaleY(1); filter: brightness(1); }
}

@media (max-width: 640px) {
  .cart-chest .cart-panel {
    top: 58%;
    width: calc(100% - 18px);
    height: min(500px, calc(100vh - 170px));
    min-height: 330px;
    padding: 46px 22px 24px;
  }
  .cart-chest.open .cart-panel { transform: translate(-50%,-43%) rotateX(0) scale(1); }
  .cart-chest-lid { top: -122px; height: 128px; border-radius: 50% 50% 7px 7px / 82px 82px 7px 7px; }
  .cart-chest-lid__panel { inset: 20px 33px 16px; }
  .cart-chest-lid__crest { top: 34px; width: 52px; height: 52px; font-size: 1.25rem; }
  .cart-chest-lid .cart-chest-ornament { display: none; }
  .cart-rivet.r1,.cart-rivet.r2 { top: 60px; }
  .cart-chest .cart-head h2 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-chest.open .cart-chest-lid { animation: none; opacity: 1; transform: none; }
}

/* Complete altar shop: each service is now a distinct physical relic in an arched niche. */
.shop-altar .product-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 34px 22px;
  padding: 58px 38px 68px;
  border-radius: 180px 180px 12px 12px / 70px 70px 12px 12px;
  background:
    linear-gradient(90deg, rgba(38,5,22,.45), transparent 9% 91%, rgba(38,5,22,.45)),
    radial-gradient(ellipse at 50% 100%, rgba(129,31,62,.25), transparent 58%),
    linear-gradient(180deg, rgba(7,4,9,.58), rgba(34,7,22,.36));
  box-shadow: 0 42px 90px rgba(0,0,0,.44), inset 0 0 0 10px rgba(211,151,93,.025), inset 0 0 70px rgba(111,42,145,.08);
}
.shop-altar .altar-offering {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
}
.shop-altar .altar-offering:hover { border: 0; box-shadow: none; }
.shop-altar .altar-offering::before { content: ""; position: absolute; z-index: -1; left: 7%; right: 7%; top: 5%; bottom: 3%; border: 1px solid rgba(211,151,93,.12); border-radius: 46% 46% 9px 9px / 25% 25% 9px 9px; background: linear-gradient(180deg, rgba(37,12,34,.25), rgba(6,4,7,.14)); box-shadow: inset 0 0 34px rgba(0,0,0,.35); }
.shop-altar .product-art {
  aspect-ratio: .95;
  overflow: visible;
  margin: 0 12px;
  background: transparent !important;
}
.shop-altar .product-art::before { display: none; }
.shop-altar .product-art::after { display: none; }
.artifact-niche { position: absolute; z-index: 0; inset: 2% 4% 0; border: 1px solid rgba(219,158,99,.19); border-bottom-color: rgba(219,158,99,.34); border-radius: 50% 50% 8px 8px / 29% 29% 8px 8px; background: radial-gradient(circle at 50% 42%, rgba(119,40,130,.17), transparent 34%), linear-gradient(180deg,rgba(19,8,19,.5),rgba(4,3,5,.83)); box-shadow: inset 0 0 52px rgba(0,0,0,.65), inset 0 0 0 8px rgba(211,151,93,.02), 0 18px 32px rgba(0,0,0,.28); }
.artifact-niche::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(217,157,98,.08); border-radius: inherit; }
.artifact-niche::after { content: "✦"; position: absolute; left: 50%; top: 7%; transform: translateX(-50%); color: rgba(224,166,106,.32); font: 400 .65rem/1 var(--serif); }
.shop-altar .artifact-halo { inset: 22% 24% 24%; z-index: 1; }
.shop-altar .artifact-pedestal { z-index: 2; left: 17%; right: 17%; bottom: 9%; height: 13%; background: linear-gradient(180deg, rgba(218,158,99,.31), rgba(53,17,35,.6) 47%, rgba(8,4,8,.85)); border: 1px solid rgba(218,158,99,.21); border-radius: 50% 50% 10px 10px; box-shadow: 0 15px 20px rgba(0,0,0,.65), inset 0 4px 8px rgba(241,188,133,.08); }
.shop-altar .artifact-pedestal::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 18px; background: linear-gradient(180deg,#32101f,#090509); clip-path: polygon(7% 0,93% 0,100% 100%,0 100%); border-bottom: 1px solid rgba(218,158,99,.2); }
.shop-altar .artifact-smoke { z-index: 4; bottom: 13%; pointer-events: none; }
.altar-relic { position: absolute; z-index: 3; left: 50%; top: 47%; width: 104px; height: 118px; transform: translate(-50%,-50%); filter: drop-shadow(0 14px 12px rgba(0,0,0,.62)); transition: transform .5s cubic-bezier(.16,.82,.22,1), filter .4s ease; }
.altar-offering:hover .altar-relic { transform: translate(-50%,-57%) scale(1.08); filter: drop-shadow(0 22px 18px rgba(0,0,0,.68)) drop-shadow(0 0 16px rgba(175,86,112,.26)); }
.altar-relic i,.altar-relic b { position: absolute; display: block; font-style: normal; }
.altar-relic--relations i { width: 63px; height: 82px; top: 13px; border: 4px double #b57455; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%,rgba(153,38,78,.22),transparent 58%); box-shadow: inset 0 0 18px rgba(241,179,120,.12), 0 0 12px rgba(125,40,114,.2); }
.altar-relic--relations i:first-child { left: 4px; transform: rotate(-12deg); }
.altar-relic--relations i:nth-child(2) { right: 4px; transform: rotate(12deg); }
.altar-relic--relations b { left: 50%; top: 48%; width: 33px; height: 33px; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid #e09274; border-radius: 5px; display: grid; place-items: center; color: #ffd3b1; font: 400 .65rem/1 var(--serif); background: radial-gradient(circle at 34% 28%,#e06d75,#851b49 55%,#280919); box-shadow: 0 0 22px rgba(197,58,101,.4); }
.altar-relic--relations b::first-letter { transform: rotate(-45deg); }
.altar-relic--choice b { left: 49px; top: 9px; width: 6px; height: 94px; border-radius: 4px; background: linear-gradient(90deg,#6c342f,#d48d5f 45%,#58262c); box-shadow: 0 5px 9px rgba(0,0,0,.5); }
.altar-relic--choice b::after { content: ""; position: absolute; left: -10px; bottom: -7px; width: 25px; height: 16px; border: 3px solid #a45e47; border-top: 0; border-radius: 0 0 16px 16px; }
.altar-relic--choice i { top: 17px; width: 52px; height: 21px; border: 1px solid #c07b54; background: linear-gradient(145deg,#401c28,#130a11); box-shadow: 0 5px 9px rgba(0,0,0,.45); }
.altar-relic--choice i:first-child { left: 4px; transform: rotate(-18deg); clip-path: polygon(0 50%,18% 0,100% 0,100% 100%,18% 100%); }
.altar-relic--choice i:nth-child(2) { right: 4px; top: 47px; transform: rotate(16deg); clip-path: polygon(0 0,82% 0,100% 50%,82% 100%,0 100%); }
.altar-relic--year { width: 124px; height: 124px; border: 4px double #ad6b4d; border-radius: 50%; background: radial-gradient(circle,#1b0b18 0 23%,#6f203e 24% 26%,#0d070d 27% 56%,#3d1728 58% 61%,#100810 62%); box-shadow: inset 0 0 25px rgba(189,86,105,.25),0 0 24px rgba(129,44,139,.18); }
.altar-relic--year i:first-child { inset: 13px; border: 1px solid rgba(230,166,105,.57); border-radius: 50%; transform: rotate(24deg); }
.altar-relic--year i:nth-child(2) { left: 58px; top: -9px; width: 4px; height: 138px; background: linear-gradient(transparent,#bd7551,transparent); transform: rotate(42deg); }
.altar-relic--year b { inset: 0; display: grid; place-items: center; color: #e6a56a; font: 400 2rem/1 var(--serif); text-shadow: 0 0 15px rgba(231,157,95,.7); }
.altar-relic--matrix { width: 106px; height: 126px; clip-path: polygon(50% 0,91% 26%,79% 87%,50% 100%,20% 87%,8% 26%); background: linear-gradient(120deg,rgba(244,178,119,.72),rgba(134,40,104,.65) 38%,rgba(37,9,53,.92) 68%,rgba(217,129,106,.55)); box-shadow: inset 0 0 26px rgba(255,218,179,.22); }
.altar-relic--matrix::before { content: ""; position: absolute; inset: 7px; clip-path: inherit; background: linear-gradient(140deg,rgba(244,219,211,.18),transparent 30%,rgba(0,0,0,.45)); }
.altar-relic--matrix i:first-child { left: 50%; top: 4px; width: 1px; height: 113px; background: rgba(255,216,176,.38); transform: rotate(18deg); }
.altar-relic--matrix i:nth-child(2) { left: 17px; right: 17px; top: 61px; height: 1px; background: rgba(255,216,176,.35); }
.altar-relic--matrix b { inset: 0; display: grid; place-items: center; color: #ffe6c9; font: 400 2rem/1 var(--serif); text-shadow: 0 0 13px rgba(255,194,136,.85); }
.altar-relic--shadow { width: 91px; height: 126px; border: 7px ridge #8a4c43; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 55% 34%,rgba(117,41,142,.32),transparent 25%),linear-gradient(145deg,#110713,#020204 60%,#391028); box-shadow: inset 0 0 20px #000,0 0 0 2px #32131f,0 0 20px rgba(105,28,121,.3); }
.altar-relic--shadow i { left: 50%; bottom: -24px; width: 46px; height: 28px; transform: translateX(-50%); border: 4px ridge #7e453f; border-top: 0; clip-path: polygon(28% 0,72% 0,100% 100%,0 100%); background: #1b0b14; }
.altar-relic--shadow b { inset: 0; display: grid; place-items: center; color: rgba(205,153,193,.42); font: 400 2.2rem/1 var(--serif); text-shadow: 0 0 15px rgba(128,48,148,.8); }
.altar-relic--gift { width: 120px; height: 91px; top: 51%; border: 1px solid #a76049; border-radius: 7px; background: linear-gradient(145deg,#8b2944,#3c0e25 54%,#6d1d37); box-shadow: inset 0 0 0 7px rgba(48,8,26,.3),0 12px 18px rgba(0,0,0,.55); }
.altar-relic--gift::before,.altar-relic--gift::after { content: ""; position: absolute; left: 12px; right: 12px; height: 12px; border: 1px solid #bb7452; background: linear-gradient(#d0a17b,#704037); }
.altar-relic--gift::before { top: -10px; transform: rotate(-4deg); }
.altar-relic--gift::after { bottom: -10px; transform: rotate(3deg); }
.altar-relic--gift i:first-child { left: 50%; top: -17px; width: 38px; height: 34px; transform: translateX(-50%); border: 2px solid #a4554e; border-radius: 50% 50% 0 0; }
.altar-relic--gift i:nth-child(2) { left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); background: linear-gradient(90deg,#7c283b,#d07962,#65192f); }
.altar-relic--gift b { left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%,-50%); border-radius: 50%; display: grid; place-items: center; color: #f1c19b; font: 600 .6rem/1 "Copperplate",serif; background: radial-gradient(circle at 35% 28%,#d25b63,#7c183a 62%,#31091d); border: 1px solid #d27c6b; }
.shop-altar .product-body { position: relative; z-index: 6; margin: -5px 6px 0; padding: 24px 21px 22px; border: 1px solid rgba(218,157,98,.18); border-radius: 5px 5px 15px 15px; text-align: center; background: linear-gradient(155deg,rgba(37,14,29,.97),rgba(8,5,9,.97)); box-shadow: 0 18px 28px rgba(0,0,0,.42),inset 0 0 24px rgba(111,42,145,.05); }
.shop-altar .product-body::before { content: ""; position: absolute; left: 18%; right: 18%; top: -5px; height: 8px; border: 1px solid rgba(218,157,98,.25); background: #2a101d; }
.shop-altar .product-meta { justify-content: center; flex-wrap: wrap; }
.shop-altar .price { width: 100%; font-size: .98rem; }

@media (max-width: 1050px) {
  .shop-altar .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .shop-altar .product-grid { grid-template-columns: 1fr; padding: 42px 12px 52px; }
  .shop-altar .product-art { max-height: 340px; }
}

/* Prominent lunar scroll instrument with a readable phase and progress ring. */
.moon-progress {
  top: auto;
  left: 13px;
  bottom: 76px;
  width: 86px;
  transform: none;
  gap: 9px;
  opacity: .76;
  filter: drop-shadow(0 0 18px rgba(215,153,91,.18));
}
.moon-progress.is-awake { opacity: 1; filter: drop-shadow(0 0 25px rgba(215,153,91,.34)); }
.moon-progress__orbit { width: 72px; height: 72px; border-color: rgba(225,169,108,.48); background: rgba(9,5,11,.82); box-shadow: 0 0 0 7px rgba(222,168,108,.025), inset 0 0 26px rgba(111,42,145,.18), 0 0 26px rgba(111,42,145,.16); backdrop-filter: blur(9px); }
.moon-progress__orbit::before { inset: -8px; border-style: solid; border-color: rgba(224,167,106,.18); box-shadow: inset 0 0 12px rgba(224,167,106,.08); }
.moon-progress__orbit::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from -90deg,#f0b779 var(--moon-fill),rgba(224,167,106,.08) 0); -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)); mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)); filter: drop-shadow(0 0 5px rgba(229,159,96,.52)); }
.moon-progress__orbit i { width: 47px; height: 47px; box-shadow: 0 0 22px rgba(229,159,91,.52), inset -4px -5px 11px rgba(76,21,50,.26); }
.moon-progress__orbit i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .28; background: radial-gradient(circle at 34% 67%,#744153 0 6%,transparent 7%),radial-gradient(circle at 67% 31%,#704254 0 4%,transparent 5%); mix-blend-mode: multiply; }
.moon-progress.phase-0 .moon-progress__orbit i::after { transform: translateX(0); }
.moon-progress.phase-1 .moon-progress__orbit i::after { transform: translateX(12px); }
.moon-progress.phase-2 .moon-progress__orbit i::after { transform: translateX(25px); }
.moon-progress.phase-3 .moon-progress__orbit i::after { transform: translateX(40px); }
.moon-progress.phase-4 .moon-progress__orbit i::after { transform: translateX(58px); }
.moon-progress__label { writing-mode: horizontal-tb; transform: none; max-width: 86px; padding: 5px 7px; border: 1px solid rgba(218,162,104,.17); border-radius: 999px; color: rgba(245,210,172,.82); background: rgba(10,5,11,.75); font-size: .49rem; line-height: 1.2; letter-spacing: .1em; text-align: center; white-space: normal; box-shadow: 0 7px 16px rgba(0,0,0,.3); }

@media (max-width: 820px) {
  .moon-progress { left: 9px; bottom: 66px; width: 76px; transform: none; opacity: .8; }
  .moon-progress__orbit { width: 64px; height: 64px; }
  .moon-progress__orbit i { width: 41px; height: 41px; }
  .moon-progress__label { display: block; max-width: 76px; font-size: .44rem; }
  .moon-progress.phase-1 .moon-progress__orbit i::after { transform: translateX(10px); }
  .moon-progress.phase-2 .moon-progress__orbit i::after { transform: translateX(22px); }
  .moon-progress.phase-3 .moon-progress__orbit i::after { transform: translateX(35px); }
  .moon-progress.phase-4 .moon-progress__orbit i::after { transform: translateX(51px); }
}

@media (max-width: 420px) {
  .moon-progress { display: grid; left: 7px; bottom: 60px; width: 65px; }
  .moon-progress__orbit { width: 54px; height: 54px; }
  .moon-progress__orbit i { width: 35px; height: 35px; }
  .moon-progress__label { max-width: 65px; padding-inline: 4px; }
  .moon-progress.phase-1 .moon-progress__orbit i::after { transform: translateX(9px); }
  .moon-progress.phase-2 .moon-progress__orbit i::after { transform: translateX(18px); }
  .moon-progress.phase-3 .moon-progress__orbit i::after { transform: translateX(29px); }
  .moon-progress.phase-4 .moon-progress__orbit i::after { transform: translateX(43px); }
}

/* Touch equivalent of the quill cursor: a sigil blooms under the finger. */
.touch-sigil { position: fixed; z-index: 850; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none; color: #f0bb7d; transform: translateZ(0); }
.touch-sigil i,.touch-sigil em { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border: 1px solid rgba(237,179,116,.72); border-radius: 50%; animation: touch-ring .86s cubic-bezier(.14,.72,.18,1) both; }
.touch-sigil em { width: 18px; height: 18px; margin: -9px; border-radius: 2px; transform: rotate(45deg); animation-name: touch-diamond; }
.touch-sigil b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 .7rem/1 var(--serif); text-shadow: 0 0 10px rgba(241,179,113,.9); animation: touch-star .72s ease-out both; }
.touch-sigil small { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #ffd398; box-shadow: 0 0 8px rgba(242,168,103,.9); animation: touch-spark .75s ease-out both; }
.touch-dust { position: fixed; z-index: 849; width: 4px; height: 4px; margin: -2px; border-radius: 50%; pointer-events: none; background: #f2bd7c; box-shadow: 0 0 10px rgba(228,151,95,.9); animation: touch-dust-fade .68s ease-out both; }
@keyframes touch-ring { 0% { opacity: .95; transform: scale(.25); } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes touch-diamond { 0% { opacity: .9; transform: rotate(0) scale(.3); } 100% { opacity: 0; transform: rotate(135deg) scale(3.2); } }
@keyframes touch-star { 0% { opacity: 0; transform: scale(.2) rotate(-45deg); } 32% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7) rotate(45deg); } }
@keyframes touch-spark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--spark-x),var(--spark-y)) scale(.15); } }
@keyframes touch-dust-fade { to { opacity: 0; transform: translate(var(--touch-drift-x),var(--touch-drift-y)) scale(.12); } }

@media (prefers-reduced-motion: reduce) {
  .touch-sigil,.touch-dust { display: none !important; }
}

/* Meaningful service cards: six restrained, story-specific tarot illustrations. */
.tarot-service-art {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 49%;
  width: 72%;
  height: 77%;
  padding: 7px;
  overflow: visible;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(226,168,108,.42);
  border-radius: 88px 88px 13px 13px / 44px 44px 13px 13px;
  color: #d99562;
  background:
    radial-gradient(circle at 50% 38%,rgba(113,36,128,.2),transparent 36%),
    linear-gradient(155deg,#21101e,#08060a 58%,#2e0c20);
  box-shadow: 0 18px 28px rgba(0,0,0,.64),inset 0 0 0 5px rgba(219,158,99,.025),inset 0 0 35px rgba(111,42,145,.08),0 0 20px rgba(111,42,145,.08);
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.45));
  transition: transform .55s cubic-bezier(.16,.82,.22,1),border-color .4s ease,filter .4s ease;
}
.altar-offering:hover .tarot-service-art { transform: translate(-50%,-55%) scale(1.045); border-color: rgba(239,185,125,.74); filter: drop-shadow(0 19px 14px rgba(0,0,0,.56)) drop-shadow(0 0 14px rgba(147,48,145,.2)); }
.tarot-service-art text { fill: rgba(235,184,130,.78); font-family: "Copperplate","Baskerville",Georgia,serif; font-size: 9px; letter-spacing: 3px; text-anchor: middle; }
.tarot-service-art .art-number { fill: #ffe2be; font-family: "Bodoni 72","Didot",Georgia,serif; font-size: 26px; letter-spacing: 0; }
.tarot-service-art .art-small-number { fill: #e5ad75; font-family: "Baskerville",Georgia,serif; font-size: 9px; letter-spacing: 0; }
.art-orbit,.art-rays,.art-thread,.art-land,.art-road,.art-zodiac,.art-zodiac-lines,.art-matrix-frame,.art-matrix-lines,.art-face-line,.art-thorns,.art-scroll,.art-scroll-edge,.art-writing,.art-ribbon { fill: none; stroke: #bd7552; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.art-rays { stroke: rgba(223,162,102,.6); stroke-width: 1; }
.art-orbit,.art-zodiac { stroke: rgba(221,161,101,.42); }
.art-zodiac--inner { stroke: rgba(144,55,151,.55); }
.art-zodiac-lines { stroke: rgba(216,157,98,.26); stroke-width: .9; }
.art-months circle { fill: #e0a46e; filter: drop-shadow(0 0 3px rgba(224,142,94,.75)); }
.art-figure { fill: rgba(84,20,53,.64); stroke: #b96d55; stroke-width: 1.1; }
.art-figure--right { fill: rgba(65,24,75,.63); }
.art-gem { fill: url(#none); stroke: #e18b71; stroke-width: 1.4; filter: drop-shadow(0 0 7px rgba(209,65,104,.7)); }
.art-star,.art-sun { fill: #d99a64; filter: drop-shadow(0 0 6px rgba(229,157,96,.64)); }
.art-moon { fill: rgba(91,25,65,.32); stroke: rgba(213,151,96,.46); }
.art-crescent { fill: #dda268; filter: drop-shadow(0 0 8px rgba(222,151,91,.5)); }
.art-road { stroke-width: 2; }
.art-road--left,.art-road--right { stroke: #8e365c; }
.art-traveler { fill: #160a15; stroke: #c87a58; }
.art-matrix-frame { stroke: #cd815a; stroke-width: 1.8; }
.art-matrix-lines { stroke: rgba(149,55,154,.68); }
.art-node { fill: #1a0b17; stroke: #d4885d; stroke-width: 1.2; }
.art-node--center { fill: rgba(113,28,70,.56); filter: drop-shadow(0 0 9px rgba(144,43,139,.48)); }
.art-eclipse { fill: rgba(9,5,11,.88); stroke: rgba(218,157,99,.48); stroke-width: 1.3; filter: drop-shadow(0 0 13px rgba(111,42,145,.3)); }
.art-face-light { fill: rgba(188,103,84,.3); stroke: #c67b59; }
.art-face-dark { fill: rgba(25,7,28,.94); stroke: #702747; }
.art-face-line { stroke: rgba(230,173,118,.58); }
.art-thorns { stroke: #8c3152; }
.art-scroll { fill: rgba(181,125,91,.16); stroke-width: 1.6; }
.art-scroll-edge { stroke: #d08a60; stroke-width: 2; }
.art-writing { stroke: rgba(210,157,108,.4); }
.art-ribbon { fill: rgba(114,27,59,.5); stroke: #be6c5a; }
.art-seal { fill: #821d3e; stroke: #dc806a; filter: drop-shadow(0 0 7px rgba(180,48,82,.5)); }
.art-monogram { fill: #f3c49d !important; font-size: 11px !important; letter-spacing: 1px !important; }

/* Site-wide antique typography: display, book text and engraved controls. */
:root {
  --serif: "Bodoni 72", Didot, "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
  --body-serif: "Iowan Old Style", Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --engraved: Copperplate, "Copperplate Gothic Light", Baskerville, Georgia, serif;
}
body { font-family: var(--body-serif); font-size: 1.02rem; letter-spacing: .008em; }
p,li,blockquote,small,label,input,textarea,select,.muted,.hero-note,.calc-note,.form-status,.cart-item,.cart-summary { font-family: var(--body-serif); }
h1,h2,h3,h4,h5,h6,.display,.section-title,.product-body h3,.calc-panel h2,.cart-head h2,.book-intro h2,.book-page__content,.story-content h2 { font-family: var(--serif); }
.main-nav a,.button,.filter-button,.eyebrow,.product-type,.card-link,.book-meta,.book-counter,.book-control,.field label,.footer-column h3,.contact-item strong,.meaning small,.feature span,.sound-toggle,.wax-seal-submit__text { font-family: var(--engraved); font-weight: 500; }
.main-nav a { letter-spacing: .075em; }
.button,.filter-button,.card-link { letter-spacing: .095em; }
.eyebrow,.product-type,.field label,.footer-column h3 { letter-spacing: .18em; }
.hero-copy > p:not(.eyebrow):not(.hero-note),.page-hero p,.section-heading > p,.product-body p,.story-content > p,.contact-list,.contact-form,.principle p,.feature small { font-size: 1rem; line-height: 1.72; }
.product-body h3 { letter-spacing: -.012em; line-height: 1.08; }
.product-body p { color: #d0c0cc; }
.field input,.field textarea { font-size: 1rem; letter-spacing: .015em; }
.field input::placeholder,.field textarea::placeholder { color: rgba(203,189,203,.55); font-style: italic; }
.site-footer,.cart-panel,.contact-form,.calc-panel { font-family: var(--body-serif); }
.book-page__paper,.book-page__content,.book-page__header,.book-page__marginalia,.book-page__number { font-family: "Iowan Old Style", Baskerville, "Palatino Linotype", Georgia, serif; }
.book-title-kicker,.book-title-author,.book-credit,.book-control { font-family: var(--engraved); }
.bat-gate__button,.bat-gate p { font-family: var(--engraved); }

/*
  Antique type system — deliberately applied to every text-bearing control and
  content node. The previous pass changed only inherited families; component
  rules could still make large parts of the site look contemporary.
*/
:root {
  --antique-text: "PT Serif", "Iowan Old Style", Baskerville, Palatino, Georgia, serif;
  --antique-display: "Bodoni 72 Poster", "Bodoni 72", Didot, "Iowan Old Style", Georgia, serif;
  --antique-caption: "PT Serif Caption", "Bodoni 72 Smallcaps", Baskerville, Georgia, serif;
  --antique-book: "Hoefler Text", "Iowan Old Style", Baskerville, Palatino, Georgia, serif;
  --antique-script: "Apple Chancery", "Snell Roundhand", "Iowan Old Style", Baskerville, Georgia, serif;
}

body,
body :where(p, li, blockquote, a, button, label, input, textarea, select, option, small, strong, em, span, figcaption) {
  font-family: var(--antique-text) !important;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 1.035rem;
  letter-spacing: .012em;
}

body :where(p, li, blockquote, small, label, input, textarea, select) {
  letter-spacing: .018em;
}

body :where(h1, h2, h3, h4, h5, h6),
.display,
.section-title,
.product-body h3,
.ritual-card h3,
.feature strong,
.principle strong,
.contact-item strong,
.meaning strong,
.price,
.calc-panel h2,
.cart-head h2,
.story-content h2,
.cta-band h2,
.book-intro h2 {
  font-family: var(--antique-display) !important;
  font-weight: 500;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 0 rgba(0,0,0,.72), 0 0 18px rgba(173,91,77,.055);
}

.display,
.section-title,
.page-hero h1,
.hero-copy h1 {
  letter-spacing: -.018em;
}

.display .accent,
.section-title .accent,
.page-hero .accent,
.hero-copy h1 span {
  font-family: var(--antique-script) !important;
  font-weight: 500;
  letter-spacing: -.025em;
  text-shadow: 0 1px 0 rgba(19,5,12,.9), 0 0 18px rgba(199,122,84,.12);
}

.main-nav a,
.button,
.filter-button,
.eyebrow,
.product-type,
.card-link,
.book-meta,
.book-counter,
.book-control,
.book-close,
.field label,
.footer-column h3,
.footer-bottom,
.feature > span,
.meaning small,
.book-title-kicker,
.book-title-author,
.book-credit span,
.wax-seal-submit__text,
.bat-gate p,
.bat-gate__button span,
.remove-item,
.toast {
  font-family: var(--antique-caption) !important;
  font-weight: 600;
  font-variant-caps: small-caps;
  letter-spacing: .105em;
}

.main-nav a {
  text-transform: none;
  font-size: .79rem;
  letter-spacing: .08em;
}

.eyebrow,
.product-type,
.field label,
.footer-column h3,
.book-title-kicker,
.book-title-author {
  letter-spacing: .17em;
}

.button,
.filter-button,
.card-link,
.book-control,
.book-close {
  letter-spacing: .105em;
}

.hero-copy > p:not(.eyebrow):not(.hero-note),
.page-hero p:not(.eyebrow),
.section-heading > p,
.story-content > p,
.product-body > p,
.principle p,
.feature small,
.footer-intro > p,
.calc-panel > p:not(.eyebrow),
.contact-form > p:not(.eyebrow),
.book-intro > p {
  font-family: var(--antique-book) !important;
  font-size: 1.02rem;
  line-height: 1.78;
  color: #d6c6d1;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

.hero-copy > p:not(.eyebrow):not(.hero-note)::first-letter,
.page-hero p:not(.eyebrow)::first-letter,
.section-heading > p::first-letter,
.story-content > p::first-letter,
.product-body > p::first-letter,
.principle p::first-letter,
.feature small::first-letter,
.footer-intro > p::first-letter,
.calc-panel > p:not(.eyebrow)::first-letter,
.book-intro > p::first-letter {
  font-family: var(--antique-display) !important;
  color: #dda06f;
  font-size: 1.32em;
  font-weight: 500;
  line-height: .8;
  text-shadow: 0 0 12px rgba(199,122,84,.24);
}

.quote {
  font-family: var(--antique-book) !important;
  font-style: italic;
  letter-spacing: .01em;
}

.field input,
.field textarea,
.field select,
.field input::placeholder,
.field textarea::placeholder {
  font-family: var(--antique-book) !important;
  font-size: 1.02rem;
}

.field input::placeholder,
.field textarea::placeholder {
  font-style: italic;
  letter-spacing: .02em;
}

.book-page__paper,
.book-page__content,
.book-page__header,
.book-page__marginalia,
.book-page__number,
.book-cover__kicker,
.book-cover strong,
.book-cover__author,
.book-cover__hint,
.book-credit strong,
.book-credit small {
  font-family: var(--antique-book) !important;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
}

.book-page__content::first-letter,
.book-page.is-title-page strong,
.book-title-moon {
  font-family: var(--antique-script) !important;
}

.brand-first {
  font-family: var(--antique-script) !important;
}

.brand-name strong {
  font-family: "Bodoni 72 Smallcaps", var(--antique-display) !important;
  font-variant-caps: small-caps;
}

.tarot-service-art text {
  font-family: var(--antique-caption) !important;
}

.tarot-service-art .art-number,
.tarot-service-art .art-small-number {
  font-family: var(--antique-display) !important;
}

@media (max-width: 820px) {
  .main-nav a {
    font-family: var(--antique-display) !important;
    font-variant-caps: normal;
    font-weight: 500;
    font-size: 1.75rem;
    letter-spacing: .005em;
  }
}

/*
  Fully decorative Cyrillic lettering. Unlike Bodoni and Apple Chancery,
  Luminari and Trattatello contain real Cyrillic glyphs, so Russian copy no
  longer falls back to a neutral serif.
*/
:root {
  --mystic-lettering: "Luminari", "Trattatello", "PT Serif", Georgia, serif;
  --mystic-heading: "Trattatello", "Luminari", "PT Serif", Georgia, serif;
}

body,
body :where(div, p, li, blockquote, a, button, label, input, textarea, select, option, small, strong, b, i, em, span, figcaption),
.book-page__paper,
.book-page__content,
.book-page__header,
.book-page__marginalia,
.book-page__number,
.book-cover__kicker,
.book-cover strong,
.book-cover__author,
.book-cover__hint,
.book-credit,
.book-control,
.book-close,
.toast {
  font-family: var(--mystic-lettering) !important;
  font-variant-caps: normal;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
}

body ::before,
body ::after {
  font-family: var(--mystic-lettering) !important;
}

.hero-sigil,
.portrait-seal {
  font-family: var(--mystic-lettering) !important;
  letter-spacing: .025em;
}

body .book-credit strong,
body .book-credit small,
body .book-cover__author,
body .book-cover__hint,
body .wax-cart-button > i,
body .booking-seal-open span,
body .booking-seal-open i {
  font-family: var(--mystic-lettering) !important;
}

body :where(h1, h2, h3, h4, h5, h6),
.display,
.section-title,
.product-body h3,
.ritual-card h3,
.feature strong,
.principle strong,
.contact-item strong,
.meaning strong,
.price,
.calc-panel h2,
.cart-head h2,
.story-content h2,
.cta-band h2,
.book-intro h2,
.book-page.is-title-page strong {
  font-family: var(--mystic-heading) !important;
  font-weight: 400;
  letter-spacing: .018em;
  line-height: 1.04;
}

.display .accent,
.section-title .accent,
.page-hero .accent,
.hero-copy h1 span,
.book-page__content::first-letter,
.book-title-moon,
.quote {
  font-family: var(--mystic-heading) !important;
}

.hero-copy > p:not(.eyebrow):not(.hero-note),
.page-hero p:not(.eyebrow),
.section-heading > p,
.story-content > p,
.product-body > p,
.principle p,
.feature small,
.footer-intro > p,
.calc-panel > p:not(.eyebrow),
.contact-form > p:not(.eyebrow),
.book-intro > p,
.hero-note,
.muted,
.calc-note,
.form-status,
.cart-item,
.cart-summary {
  font-family: var(--mystic-lettering) !important;
  font-size: 1.025rem;
  line-height: 1.7;
  letter-spacing: .018em;
}

.main-nav a,
.button,
.filter-button,
.eyebrow,
.product-type,
.card-link,
.book-meta,
.book-counter,
.book-control,
.book-close,
.field label,
.footer-column h3,
.footer-bottom,
.feature > span,
.meaning small,
.book-title-kicker,
.book-title-author,
.book-credit span,
.wax-seal-submit__text,
.bat-gate p,
.bat-gate__button span,
.remove-item {
  font-family: var(--mystic-lettering) !important;
  font-variant-caps: normal;
  font-weight: 400;
  letter-spacing: .075em;
  text-transform: none;
}

.button,
.filter-button,
.card-link,
.book-control,
.book-close {
  font-size: .88rem;
  letter-spacing: .055em;
}

.eyebrow,
.product-type,
.field label,
.footer-column h3 {
  font-size: .79rem;
  letter-spacing: .13em;
}

.hero-copy h1 {
  letter-spacing: .01em;
  line-height: .88;
}

.hero-copy h1 span {
  letter-spacing: .018em;
}

.brand-first {
  font-family: var(--mystic-heading) !important;
}

.brand-name strong {
  font-family: var(--mystic-lettering) !important;
  font-variant-caps: normal;
}

.tarot-service-art text,
.tarot-service-art .art-number,
.tarot-service-art .art-small-number {
  font-family: var(--mystic-lettering) !important;
}

@media (max-width: 820px) {
  .main-nav a {
    font-family: var(--mystic-heading) !important;
    font-size: 1.85rem;
    letter-spacing: .02em;
  }
}

/* Jeweled navigation: every destination is an individual antique plaque. */
@media (min-width: 821px) {
  .main-nav {
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(221,161,101,.26);
    border-radius: 16px 4px 16px 4px;
    background:
      linear-gradient(90deg,rgba(105,30,73,.11),transparent 28% 72%,rgba(105,30,73,.11)),
      linear-gradient(180deg,rgba(255,255,255,.035),rgba(9,5,11,.7));
    box-shadow: inset 0 0 0 3px rgba(217,156,99,.025), inset 0 0 28px rgba(111,42,145,.09), 0 8px 24px rgba(0,0,0,.22);
  }
  .main-nav a {
    padding: 10px 13px;
    border: 1px solid rgba(219,158,99,.12);
    border-radius: 10px 2px 10px 2px;
    background: linear-gradient(145deg,rgba(86,22,57,.17),rgba(11,6,12,.28));
    box-shadow: inset 0 0 14px rgba(111,42,145,.045);
  }
  .main-nav a:hover,
  .main-nav a.active {
    border-color: rgba(230,170,124,.46);
    background: radial-gradient(circle at 50% 120%,rgba(151,48,86,.3),transparent 68%),linear-gradient(145deg,rgba(91,25,62,.28),rgba(12,7,13,.46));
    box-shadow: inset 0 0 19px rgba(122,42,131,.16),0 0 18px rgba(204,120,83,.09);
  }
}

.menu-button {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(229,170,109,.48);
  box-shadow: inset 0 0 0 5px rgba(219,158,99,.035), inset 0 0 24px rgba(111,42,145,.2), 0 0 0 3px rgba(116,35,76,.12), 0 8px 24px rgba(0,0,0,.3);
}
.menu-button::after {
  content: "✦";
  position: absolute;
  right: -5px;
  top: -6px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(229,170,109,.42);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #e9ae76;
  font-size: .48rem;
  background: #210c1b;
  box-shadow: 0 0 13px rgba(207,91,108,.32);
  transition: transform .55s ease, color .35s ease, box-shadow .35s ease;
}
.menu-button:hover::after,
.menu-button.is-open::after {
  color: #ffe0b5;
  transform: rotate(180deg) scale(1.08);
  box-shadow: 0 0 18px rgba(227,137,107,.55);
}

@media (max-width: 820px) {
  .main-nav {
    padding: 116px 28px 72px;
    gap: 8px;
    border-left: 3px double rgba(226,166,105,.34);
    border-bottom: 1px solid rgba(226,166,105,.28);
    border-radius: 0 0 0 44px;
    background:
      radial-gradient(circle at 86% 11%,rgba(113,42,132,.52),transparent 26%),
      repeating-linear-gradient(135deg,rgba(222,163,104,.018) 0 1px,transparent 1px 13px),
      linear-gradient(155deg,rgba(31,11,31,.99),rgba(8,5,10,.99) 66%,rgba(33,8,24,.99));
    box-shadow: -34px 0 96px rgba(0,0,0,.78), inset 22px 0 75px rgba(111,42,145,.1), inset 0 0 0 8px rgba(221,160,101,.018);
  }
  .main-nav::before {
    content: "✦  Sofia Demchenko  ✦";
    left: 30px;
    right: 78px;
    top: 40px;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(226,166,105,.18);
    border-bottom: 1px solid rgba(226,166,105,.3);
    color: #edbd88;
    font-family: var(--mystic-lettering) !important;
    font-size: .77rem;
    letter-spacing: .13em;
    text-align: center;
    text-shadow: 0 0 13px rgba(214,126,91,.32);
  }
  .main-nav::after {
    content: "☾   ✦   ☽";
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    color: rgba(227,171,111,.52);
    font-size: .72rem;
    letter-spacing: .55em;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(111,42,145,.6);
  }
  .main-nav a {
    min-height: 64px;
    margin: 0;
    padding: 14px 52px 14px 54px;
    border: 1px solid rgba(224,164,103,.19);
    border-radius: 19px 4px 19px 4px;
    color: rgba(251,235,218,.88);
    font-size: 1.54rem;
    background:
      linear-gradient(90deg,rgba(111,27,70,.21),transparent 45%),
      linear-gradient(145deg,rgba(255,255,255,.025),rgba(9,5,11,.56));
    box-shadow: inset 0 0 0 3px rgba(221,160,101,.018), inset 0 0 22px rgba(111,42,145,.055), 0 8px 18px rgba(0,0,0,.16);
    transition: color .32s ease, transform .34s cubic-bezier(.16,.82,.22,1), border-color .32s ease, text-shadow .32s ease, box-shadow .32s ease, background .32s ease;
  }
  .main-nav a::before {
    content: "☾";
    left: 14px;
    top: 50%;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(224,164,103,.31);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(237,187,137,.78);
    font-size: .66rem;
    opacity: .72;
    transform: translateY(-50%);
    background: radial-gradient(circle,rgba(112,32,82,.46),rgba(14,7,15,.78));
    box-shadow: inset 0 0 10px rgba(111,42,145,.18),0 0 10px rgba(194,105,82,.08);
  }
  .main-nav a::after {
    content: "◇";
    position: absolute;
    right: 17px;
    top: 50%;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    color: rgba(222,166,108,.45);
    font-size: .72rem;
    opacity: .7;
    background: none;
    box-shadow: none;
  }
  .main-nav a:nth-of-type(2)::before { content: "✦"; }
  .main-nav a:nth-of-type(3)::before { content: "◆"; }
  .main-nav a:nth-of-type(4)::before { content: "☿"; }
  .main-nav a:nth-of-type(5)::before { content: "◇"; }
  .main-nav a:nth-of-type(6)::before { content: "☽"; }
  .main-nav a:hover,
  .main-nav a:focus-visible,
  .main-nav a.active {
    padding-left: 54px;
    color: #fff0df;
    transform: translateX(-6px);
    border-color: rgba(236,179,118,.62);
    background:
      radial-gradient(circle at 18% 50%,rgba(164,46,86,.34),transparent 34%),
      linear-gradient(145deg,rgba(105,27,69,.42),rgba(17,8,18,.72));
    text-shadow: 0 0 16px rgba(230,170,124,.35);
    box-shadow: inset 0 0 0 3px rgba(230,170,124,.035), inset 0 0 28px rgba(126,43,137,.2), 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(199,122,84,.09);
  }
  .main-nav a:hover::before,
  .main-nav a:focus-visible::before,
  .main-nav a.active::before {
    opacity: 1;
    color: #ffe0b5;
    transform: translateY(-50%) rotate(360deg) scale(1.08);
    border-color: rgba(242,189,133,.72);
    box-shadow: inset 0 0 12px rgba(139,44,132,.28),0 0 16px rgba(217,129,95,.28);
  }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after,
  .main-nav a.active::after {
    opacity: 1;
    transform: translateY(-50%) rotate(135deg) scale(1.15);
    color: #f0b77d;
  }
  .nav-magic-ring {
    right: -135px;
    top: 22%;
    width: 330px;
    height: 330px;
    opacity: .28;
  }
}

/* The cart action is a physical wax seal and opens the prepared request form. */
.cart-checkout-seal {
  position: relative;
  min-height: 66px;
  padding: 0 32px 0 82px;
  overflow: visible;
  border: 1px solid rgba(232,173,111,.52);
  border-radius: 8px 999px 999px 8px;
  background:
    linear-gradient(90deg,rgba(93,20,52,.82),rgba(51,12,38,.92) 52%,rgba(28,9,28,.96));
  box-shadow: inset 0 0 0 3px rgba(247,198,150,.035),inset 0 0 24px rgba(139,43,128,.13),0 12px 28px rgba(0,0,0,.34);
}
.cart-checkout-seal::after {
  display: none !important;
}
.cart-checkout-seal__mark {
  position: absolute;
  z-index: 3;
  left: -9px;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  border: 1px solid #e17b72;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f9ceb0;
  font-family: var(--mystic-lettering) !important;
  font-size: .82rem;
  letter-spacing: .05em;
  background:
    radial-gradient(circle at 34% 27%,#dc6469 0 7%,#a22a4a 25%,#671331 64%,#2b081a 100%);
  box-shadow: inset 0 0 0 8px rgba(70,8,30,.2),inset 0 0 17px rgba(255,191,145,.12),0 7px 15px rgba(0,0,0,.5),0 0 0 4px rgba(114,25,52,.22);
  transition: transform .35s ease,filter .35s ease;
}
.cart-checkout-seal__mark::after {
  content: "✦";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(250,207,171,.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255,220,186,.28);
  font-size: .55rem;
}
.cart-checkout-seal__text {
  position: relative;
  z-index: 2;
  font-family: var(--mystic-lettering) !important;
  font-size: 1rem;
  letter-spacing: .055em;
  text-transform: none;
}
.cart-checkout-seal__glint {
  position: absolute;
  inset: 5px 14px 5px 62px;
  border-top: 1px solid rgba(255,224,191,.13);
  border-bottom: 1px solid rgba(132,50,93,.24);
  border-radius: inherit;
  pointer-events: none;
}
.cart-checkout-seal:hover .cart-checkout-seal__mark,
.cart-checkout-seal:focus-visible .cart-checkout-seal__mark {
  transform: rotate(-9deg) scale(1.06);
  filter: brightness(1.14);
}
.cart-checkout-seal.is-sealing .cart-checkout-seal__mark {
  animation: cart-seal-pulse .72s ease both;
}
.cart-checkout-seal:disabled {
  opacity: .42;
  filter: grayscale(.28);
  cursor: not-allowed;
}
@keyframes cart-seal-pulse {
  0% { transform: none; }
  42% { transform: rotate(-12deg) scale(1.16); filter: brightness(1.35); }
  100% { transform: rotate(5deg) scale(.96); }
}

/* Full-screen orbital navigation: a ritual circle instead of stacked plaques. */
@media (max-width: 820px) {
  .main-nav {
    --orbit-size: min(64vmin, 470px);
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 50% 50%,rgba(123,26,101,.24) 0 4%,transparent 27%),
      radial-gradient(circle at 50% 50%,transparent 0 31%,rgba(222,151,92,.07) 31.25% 31.6%,transparent 32%),
      radial-gradient(circle at 50% 50%,transparent 0 43%,rgba(118,29,91,.11) 43.2% 43.55%,transparent 44%),
      linear-gradient(135deg,#06050c,#18081c 52%,#080610);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(.78);
    -webkit-backdrop-filter: blur(18px) saturate(.78);
    /* Keep the closed full-screen menu inside the viewport. The earlier
       drawer rule translated it beyond the right edge and doubled the
       document width on phones. Visibility now handles the closed state. */
    transform: none;
    pointer-events: none;
  }

  .main-nav.open { pointer-events: auto; }

  .main-nav::before {
    content: "SD";
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    z-index: 3;
    width: 110px;
    height: 110px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(239,190,128,.7);
    border-radius: 50%;
    color: #f3cba1;
    font-family: var(--display-font) !important;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    background:
      radial-gradient(circle at 35% 28%,rgba(255,220,171,.16),transparent 19%),
      radial-gradient(circle,#771d4c 0 7%,#4e123a 8% 45%,#1a091d 70% 100%);
    box-shadow:
      inset 0 0 0 6px rgba(9,4,13,.82),
      inset 0 0 0 8px rgba(225,162,96,.3),
      inset 0 0 32px rgba(235,80,129,.22),
      0 0 0 5px rgba(86,20,65,.42),
      0 0 42px rgba(183,51,132,.28),
      0 18px 35px rgba(0,0,0,.56);
    transform: translate(-50%,-50%) rotate(-4deg);
    opacity: 1;
  }

  .main-nav::after {
    content: "Sofia Demchenko";
    position: absolute;
    left: 50%;
    right: auto;
    top: calc(50% + 79px);
    bottom: auto;
    z-index: 3;
    width: max-content;
    padding: 0 28px 7px;
    border: 0;
    border-bottom: 1px solid rgba(229,166,104,.34);
    border-radius: 0;
    color: #edc696;
    font-family: var(--display-font) !important;
    font-size: 1.12rem;
    font-weight: 400;
    letter-spacing: .09em;
    text-transform: none;
    text-shadow: 0 0 18px rgba(228,103,160,.25);
    background: none;
    transform: translateX(-50%);
    opacity: .92;
  }

  .nav-magic-ring {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    z-index: 1;
    width: var(--orbit-size);
    height: var(--orbit-size);
    margin: calc(var(--orbit-size) / -2) 0 0 calc(var(--orbit-size) / -2);
    border: 1px solid rgba(231,172,111,.32);
    border-radius: 50%;
    opacity: .8;
    filter: drop-shadow(0 0 18px rgba(121,34,104,.3));
    transform: rotate(-8deg);
  }

  .nav-magic-ring::before,
  .nav-magic-ring::after {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(134,53,113,.34);
    border-radius: 50%;
    transform: rotate(45deg);
  }

  .nav-magic-ring::after {
    inset: 18%;
    border: 1px solid rgba(235,181,119,.17);
    border-radius: 0;
  }

  .nav-magic-ring i {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(228,170,111,.28);
    border-radius: 50%;
    color: rgba(244,196,142,.72);
    font-style: normal;
    font-size: .8rem;
    background: #130817;
    box-shadow: 0 0 18px rgba(134,35,110,.35);
  }

  .nav-magic-ring i:nth-child(1) { left: 50%; top: -15px; margin-left: -15px; }
  .nav-magic-ring i:nth-child(2) { right: -15px; top: 50%; margin-top: -15px; }
  .nav-magic-ring i:nth-child(3) { left: 50%; bottom: -15px; margin-left: -15px; }
  .nav-magic-ring i:nth-child(4) { left: -15px; top: 50%; margin-top: -15px; }

  .main-nav.open .nav-magic-ring {
    animation: orbit-ring-awake .9s cubic-bezier(.16,.8,.24,1) both,
      orbit-ring-spin 38s 1s linear infinite;
  }

  .main-nav a,
  .main-nav a.active {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: min(230px, 29vw);
    min-height: 54px;
    margin: 0;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    color: rgba(241,218,193,.86);
    font-family: var(--display-font) !important;
    font-size: clamp(1.08rem,2.2vw,1.48rem);
    font-weight: 400;
    letter-spacing: .035em;
    line-height: 1.05;
    text-align: center;
    text-transform: none;
    white-space: normal;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 2px 14px rgba(0,0,0,.9);
    opacity: 0;
    transform: translate(-50%,-50%);
    transition: color .3s ease,letter-spacing .35s ease,text-shadow .35s ease,filter .35s ease,transform .35s ease;
  }

  .main-nav a:nth-of-type(1) { left: 50%; top: 10%; }
  .main-nav a:nth-of-type(2) { left: 78%; top: 28%; }
  .main-nav a:nth-of-type(3) { left: 78%; top: 70%; }
  .main-nav a:nth-of-type(4) { left: 50%; top: 89%; }
  .main-nav a:nth-of-type(5) { left: 22%; top: 70%; }
  .main-nav a:nth-of-type(6) { left: 22%; top: 28%; }

  .main-nav a::before,
  .main-nav a::after {
    content: "✦";
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0 12px;
    border: 0;
    border-radius: 0;
    color: rgba(202,104,151,.52);
    font-size: .55em;
    line-height: 1;
    background: none;
    box-shadow: none;
    opacity: .8;
    transform: none;
    transition: color .3s ease,transform .4s ease,filter .3s ease;
  }

  .main-nav a::after { content: "✦"; }

  .main-nav a.active {
    color: #f1c796;
    text-shadow: 0 0 20px rgba(219,92,149,.48),0 2px 15px #000;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible,
  .main-nav a.active:hover {
    padding: 8px 24px;
    border: 0;
    color: #ffe1b9;
    letter-spacing: .075em;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0 10px rgba(255,184,126,.48),0 0 28px rgba(215,70,151,.46);
    filter: brightness(1.12);
    transform: translate(-50%,-50%) scale(1.07);
  }

  .main-nav a:hover::before,
  .main-nav a:hover::after,
  .main-nav a:focus-visible::before,
  .main-nav a:focus-visible::after {
    color: #f3b67d;
    filter: drop-shadow(0 0 7px rgba(239,112,165,.7));
    transform: rotate(135deg) scale(1.35);
  }

  .main-nav.open a {
    animation: orbit-item-in .68s cubic-bezier(.2,.72,.2,1) both;
  }

  .main-nav.open a:nth-of-type(1) { animation-delay: .08s; }
  .main-nav.open a:nth-of-type(2) { animation-delay: .14s; }
  .main-nav.open a:nth-of-type(3) { animation-delay: .2s; }
  .main-nav.open a:nth-of-type(4) { animation-delay: .26s; }
  .main-nav.open a:nth-of-type(5) { animation-delay: .32s; }
  .main-nav.open a:nth-of-type(6) { animation-delay: .38s; }

  .menu-button {
    z-index: 100;
  }

  @keyframes orbit-item-in {
    from { opacity: 0; filter: blur(9px) brightness(.55); }
    to { opacity: 1; filter: blur(0) brightness(1); }
  }

  @keyframes orbit-ring-awake {
    from { opacity: 0; filter: blur(14px); transform: rotate(-28deg) scale(.55); }
    to { opacity: .8; filter: blur(0) drop-shadow(0 0 18px rgba(121,34,104,.3)); transform: rotate(-8deg) scale(1); }
  }

  @keyframes orbit-ring-spin {
    from { transform: rotate(-8deg); }
    to { transform: rotate(352deg); }
  }
}

@media (max-width: 540px) {
  .main-nav { --orbit-size: min(72vmin, 310px); }
  .main-nav::before { width: 88px; height: 88px; font-size: 1.55rem; }
  .main-nav::after { top: calc(50% + 65px); font-size: .9rem; }
  .main-nav a,
  .main-nav a.active {
    width: 42vw;
    min-height: 46px;
    padding: 6px 8px;
    font-size: clamp(.94rem,4vw,1.12rem);
  }
  .main-nav a:nth-of-type(1) { top: 9%; }
  .main-nav a:nth-of-type(2) { left: 78%; top: 27%; }
  .main-nav a:nth-of-type(3) { left: 78%; top: 72%; }
  .main-nav a:nth-of-type(4) { top: 91%; }
  .main-nav a:nth-of-type(5) { left: 22%; top: 72%; }
  .main-nav a:nth-of-type(6) { left: 22%; top: 27%; }
}

.nav-focus-thread { display: none; }

/* Desktop navigation: a suspended constellation chain, never a row of plaques. */
@media (min-width: 821px) {
  .site-header {
    background:
      radial-gradient(ellipse at 68% 100%,rgba(103,28,87,.12),transparent 46%),
      linear-gradient(to bottom,rgba(8,6,11,.975),rgba(8,6,11,.9));
  }

  .site-header::before {
    content: "";
    position: absolute;
    left: 29%;
    right: 1%;
    bottom: -17px;
    height: 82px;
    pointer-events: none;
    opacity: .34;
    background:
      radial-gradient(ellipse at 18% 55%,rgba(111,43,124,.24),transparent 38%),
      radial-gradient(ellipse at 56% 42%,rgba(188,73,128,.14),transparent 36%),
      radial-gradient(ellipse at 87% 59%,rgba(93,33,109,.22),transparent 35%);
    filter: blur(17px);
    mix-blend-mode: screen;
    animation: desktop-nav-smoke 11s ease-in-out infinite alternate;
  }

  .header-inner {
    position: relative;
    z-index: 1;
    height: 154px;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 94px 60px;
    column-gap: 26px;
    row-gap: 0;
  }

  .header-inner > .brand {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }

  .header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .main-nav {
    position: relative;
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
    height: 60px;
    padding: 3px 10px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
  }

  .main-nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 2%;
    right: 2%;
    top: 10px;
    height: 38px;
    border-top: 1px solid rgba(231,174,112,.42);
    border-radius: 50% 50% 0 0;
    background:
      radial-gradient(circle at 50% 0,rgba(235,182,122,.42) 0 1px,transparent 2px),
      linear-gradient(90deg,transparent,rgba(122,37,96,.08) 18%,rgba(122,37,96,.16) 50%,rgba(122,37,96,.08) 82%,transparent);
    box-shadow: 0 -5px 24px rgba(109,35,104,.13);
    pointer-events: none;
    transition: border-color .45s ease,box-shadow .45s ease,filter .45s ease;
    animation: desktop-chain-breathe 6.8s ease-in-out infinite;
  }

  .main-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 23px;
    height: 23px;
    border: 1px solid rgba(244,187,125,.58);
    border-radius: 4px 9px 4px 9px;
    background:
      linear-gradient(135deg,rgba(255,224,183,.32),transparent 27%),
      linear-gradient(315deg,#35091f 0 18%,#9f2754 19% 50%,#5d1237 51% 78%,#180816 79%);
    box-shadow:
      inset 0 0 0 3px rgba(31,5,18,.48),
      inset 0 0 12px rgba(255,126,157,.22),
      0 0 15px rgba(225,91,129,.45),
      0 0 31px rgba(108,35,110,.38);
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
    animation: desktop-ruby-breathe 4.2s ease-in-out infinite;
  }

  .main-nav .nav-magic-ring {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    opacity: 1;
    overflow: visible;
    pointer-events: none;
    transform: none;
    filter: none;
    box-shadow: none;
  }

  .main-nav .nav-magic-ring::before {
    content: "";
    position: absolute;
    left: 2%;
    top: 9px;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255,225,180,.7);
    border-radius: 50%;
    background: #ffd8a8;
    box-shadow:
      0 0 7px 2px rgba(255,203,145,.68),
      -13px 1px 13px rgba(221,109,140,.38),
      -27px 2px 19px rgba(124,43,113,.18);
    opacity: 0;
    animation: desktop-chain-glint 8.4s cubic-bezier(.42,0,.58,1) 1.2s infinite;
  }

  .main-nav .nav-magic-ring::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 1px;
    height: 37px;
    background: linear-gradient(to bottom,rgba(232,177,115,.55),rgba(217,126,112,.24) 62%,transparent);
    box-shadow: 0 0 7px rgba(197,86,142,.22);
    transform-origin: top center;
    animation: desktop-pendant-sway 5.6s ease-in-out infinite;
  }

  .main-nav .nav-magic-ring i {
    display: none;
  }

  .main-nav .nav-focus-thread {
    position: absolute;
    z-index: 2;
    left: var(--thread-x,50%);
    top: var(--thread-y,55px);
    width: var(--thread-length,0px);
    height: 1px;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform-origin: left center;
    transform: rotate(var(--thread-angle,0rad)) scaleX(.1);
    background: linear-gradient(90deg,rgba(230,161,106,.74),rgba(218,91,141,.4) 52%,rgba(236,188,126,.72));
    box-shadow: 0 0 7px rgba(235,140,137,.38),0 0 16px rgba(114,36,108,.22);
    transition: width .42s cubic-bezier(.2,.72,.2,1),transform .42s cubic-bezier(.2,.72,.2,1),opacity .24s ease;
  }

  .main-nav .nav-focus-thread::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #efb777;
    box-shadow: 0 0 9px rgba(239,174,118,.72);
    opacity: .7;
  }

  .main-nav .nav-focus-thread::after {
    content: "✦";
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5px 0 0 -5px;
    display: grid;
    place-items: center;
    color: #ffe0b3;
    font-size: .42rem;
    text-shadow: 0 0 8px #f5a878,0 0 18px rgba(213,79,143,.8);
    opacity: 0;
  }

  .main-nav .nav-focus-thread.is-cast {
    opacity: .72;
    transform: rotate(var(--thread-angle,0rad)) scaleX(1);
  }

  .main-nav .nav-focus-thread.is-cast::after {
    animation: desktop-thread-spark 1.65s ease-in-out .36s infinite;
  }

  .main-nav a,
  .main-nav a.active {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    padding: 26px clamp(7px,1vw,15px) 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    color: rgba(229,211,191,.76);
    font-family: var(--mystic-heading) !important;
    font-size: clamp(.82rem,1vw,1.02rem);
    font-weight: 400;
    font-variant-caps: normal;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.9);
    transform: translateY(0);
    transition: color .3s ease,letter-spacing .32s ease,text-shadow .32s ease,filter .32s ease,transform .32s cubic-bezier(.2,.76,.2,1),opacity .32s ease;
  }

  .main-nav a:nth-of-type(1),
  .main-nav a:nth-of-type(6) { transform: translateY(7px); }
  .main-nav a:nth-of-type(2),
  .main-nav a:nth-of-type(5) { transform: translateY(2px); }
  .main-nav a:nth-of-type(3),
  .main-nav a:nth-of-type(4) { transform: translateY(-1px); }

  .main-nav a::before {
    content: "✦";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 2px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(225,166,106,.42);
    border-radius: 50%;
    color: rgba(235,186,132,.68);
    font-size: .4rem;
    background:
      radial-gradient(circle at 34% 28%,rgba(255,223,180,.17),transparent 25%),
      radial-gradient(circle,#54183f,#160918 72%);
    box-shadow: inset 0 0 6px rgba(190,68,126,.14),0 0 11px rgba(111,34,99,.2);
    opacity: .88;
    transform: translateX(-50%) rotate(0deg);
    transition: transform .5s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,filter .3s ease;
  }

  .main-nav a:nth-of-type(2)::before { content: "☾"; }
  .main-nav a:nth-of-type(3)::before { content: "◆"; }
  .main-nav a:nth-of-type(4)::before { content: "☿"; }
  .main-nav a:nth-of-type(5)::before { content: "◇"; }
  .main-nav a:nth-of-type(6)::before { content: "☽"; }

  .main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 3px;
    height: 1px;
    background: linear-gradient(90deg,transparent,#e1a36d 35%,#8d315c 50%,#e1a36d 65%,transparent);
    box-shadow: 0 0 9px rgba(209,91,143,.38);
    opacity: 0;
    transition: left .34s ease,right .34s ease,opacity .28s ease;
  }

  .main-nav a.active {
    color: #f2cda5;
    letter-spacing: .055em;
    text-shadow: 0 0 17px rgba(214,100,151,.35),0 2px 10px #000;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    padding-inline: clamp(7px,1vw,15px);
    border: 0;
    color: #ffe2bd;
    letter-spacing: .075em;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0 13px rgba(239,177,119,.4),0 0 24px rgba(202,73,142,.26);
    filter: brightness(1.12);
  }

  .main-nav a:nth-of-type(1):hover,
  .main-nav a:nth-of-type(6):hover,
  .main-nav a:nth-of-type(1):focus-visible,
  .main-nav a:nth-of-type(6):focus-visible { transform: translateY(2px); }
  .main-nav a:nth-of-type(2):hover,
  .main-nav a:nth-of-type(5):hover,
  .main-nav a:nth-of-type(2):focus-visible,
  .main-nav a:nth-of-type(5):focus-visible { transform: translateY(-3px); }
  .main-nav a:nth-of-type(3):hover,
  .main-nav a:nth-of-type(4):hover,
  .main-nav a:nth-of-type(3):focus-visible,
  .main-nav a:nth-of-type(4):focus-visible { transform: translateY(-6px); }

  .main-nav a:hover::before,
  .main-nav a:focus-visible::before,
  .main-nav a.active::before {
    color: #ffe0b9;
    border-color: rgba(242,190,135,.82);
    box-shadow: inset 0 0 8px rgba(215,92,147,.24),0 0 15px rgba(218,117,110,.42),0 0 28px rgba(126,39,111,.28);
    filter: brightness(1.18);
    transform: translateX(-50%) rotate(180deg) scale(1.14);
  }

  .main-nav a:hover::after,
  .main-nav a:focus-visible::after,
  .main-nav a.active::after {
    left: 13%;
    right: 13%;
    opacity: 1;
  }

  .main-nav:has(a:hover)::before,
  .main-nav:has(a:focus-visible)::before {
    border-top-color: rgba(249,197,139,.72);
    box-shadow: 0 -4px 20px rgba(221,119,124,.22),0 -10px 34px rgba(112,35,105,.18);
    filter: brightness(1.15);
  }

  .main-nav:has(a:hover) a:not(:hover),
  .main-nav:has(a:focus-visible) a:not(:focus-visible) {
    opacity: .48;
    filter: saturate(.55) brightness(.78);
  }

  @keyframes desktop-chain-breathe {
    0%,100% { opacity: .68; filter: brightness(.86); }
    50% { opacity: 1; filter: brightness(1.08); }
  }

  @keyframes desktop-chain-glint {
    0%,10% { left: 2%; top: 10px; opacity: 0; transform: scale(.5); }
    16% { opacity: .95; }
    49% { left: 49.6%; top: 1px; opacity: 1; transform: scale(1.18); }
    82% { opacity: .9; }
    90%,100% { left: 97%; top: 10px; opacity: 0; transform: scale(.55); }
  }

  @keyframes desktop-pendant-sway {
    0%,100% { transform: rotate(-1.4deg); opacity: .62; }
    50% { transform: rotate(1.4deg); opacity: .92; }
  }

  @keyframes desktop-ruby-breathe {
    0%,100% { filter: brightness(.9); box-shadow: inset 0 0 0 3px rgba(31,5,18,.48),inset 0 0 12px rgba(255,126,157,.18),0 0 13px rgba(225,91,129,.34),0 0 25px rgba(108,35,110,.28); }
    50% { filter: brightness(1.2); box-shadow: inset 0 0 0 3px rgba(31,5,18,.4),inset 0 0 14px rgba(255,172,183,.32),0 0 19px rgba(236,111,140,.58),0 0 42px rgba(127,40,116,.46); }
  }

  @keyframes desktop-thread-spark {
    0% { left: 0; opacity: 0; transform: scale(.5) rotate(0deg); }
    18% { opacity: 1; }
    76% { opacity: .92; }
    100% { left: calc(100% - 3px); opacity: 0; transform: scale(1.32) rotate(180deg); }
  }

  @keyframes desktop-nav-smoke {
    0% { transform: translate3d(-2.5%,3px,0) scaleX(.94); opacity: .22; }
    50% { opacity: .42; }
    100% { transform: translate3d(2.5%,-3px,0) scaleX(1.06); opacity: .3; }
  }
}

@media (min-width: 821px) and (max-width: 1050px) {
  .header-inner { column-gap: 18px; }
  .main-nav { padding-inline: 0; }
  .main-nav a,
  .main-nav a.active { padding-inline: 5px; font-size: .74rem; letter-spacing: .015em; }
  .main-nav a:hover,
  .main-nav a:focus-visible { padding-inline: 5px; letter-spacing: .03em; }
}

/* Language selector — a small enamelled reliquary rather than a generic dropdown. */
.language-switcher {
  position: relative;
  z-index: 95;
}

.language-switcher__trigger {
  min-width: 78px;
  height: 43px;
  padding: 0 12px 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ivory);
  border: 1px solid rgba(230,170,124,.3);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.08),transparent 32%),
    linear-gradient(145deg,rgba(37,19,40,.96),rgba(10,7,13,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.language-switcher__trigger:hover,
.language-switcher.is-open .language-switcher__trigger {
  transform: translateY(-1px);
  border-color: rgba(230,170,124,.72);
  box-shadow: inset 0 0 18px rgba(111,42,145,.18), 0 0 24px rgba(199,122,84,.12), 0 10px 26px rgba(0,0,0,.42);
}

.language-switcher__trigger:focus-visible,
.language-switcher__menu button:focus-visible {
  outline: 1px solid var(--copper-soft);
  outline-offset: 3px;
}

.language-switcher__code {
  min-width: 20px;
  font-family: var(--antique-caption) !important;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
}

.language-switcher__chevron {
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--copper-soft);
  border-bottom: 1px solid var(--copper-soft);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .28s ease;
}

.language-switcher.is-open .language-switcher__chevron {
  transform: translateY(2px) rotate(225deg);
}

.language-switcher__menu {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  width: 214px;
  padding: 10px;
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: 86% 0;
  border: 1px solid rgba(230,170,124,.28);
  border-radius: 17px;
  background:
    linear-gradient(135deg,transparent 14px,rgba(12,8,15,.985) 0) top left,
    radial-gradient(circle at 85% 0,rgba(111,42,145,.22),transparent 48%);
  box-shadow: 0 24px 60px rgba(0,0,0,.68), inset 0 0 35px rgba(111,42,145,.08);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.language-switcher__menu::before {
  content: "✦";
  position: absolute;
  top: -9px;
  right: 25px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--copper-soft);
  font-size: .55rem;
  border: 1px solid rgba(230,170,124,.38);
  background: #100a13;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(199,122,84,.18);
}

.language-switcher.is-open .language-switcher__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.language-switcher__menu button {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  color: #cfc0cd;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease, background .22s ease, padding-left .22s ease;
}

.language-switcher__menu button:hover,
.language-switcher__menu button[aria-checked="true"] {
  padding-left: 13px;
  color: var(--ivory);
  border-color: rgba(230,170,124,.18);
  background: linear-gradient(90deg,rgba(111,42,145,.2),rgba(199,122,84,.06));
}

.language-switcher__menu button[aria-checked="true"]::after {
  content: "✦";
  position: absolute;
  right: 10px;
  color: var(--copper-soft);
  font-size: .55rem;
  filter: drop-shadow(0 0 6px rgba(230,170,124,.55));
}

.language-switcher__menu button span:not(.language-flag) {
  font-family: var(--antique-caption) !important;
  font-size: .86rem;
  letter-spacing: .035em;
}

.language-switcher__menu button small {
  padding-right: 18px;
  color: #7f7180;
  font-family: var(--antique-caption) !important;
  font-size: .58rem;
  letter-spacing: .11em;
}

.language-flag {
  position: relative;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  overflow: hidden;
  border: 2px solid rgba(237,215,181,.72);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(105,65,75,.48), inset 0 0 6px rgba(0,0,0,.32), 0 3px 9px rgba(0,0,0,.42);
}

.language-flag::after {
  content: "";
  position: absolute;
  inset: 1px 3px 52% 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  filter: blur(1px);
}

.language-flag--ru {
  background: linear-gradient(to bottom,#f5f3ef 0 33.33%,#2458a6 33.33% 66.66%,#ba2438 66.66%);
}

.language-flag--uk {
  background: linear-gradient(to bottom,#176fc1 0 50%,#ffd33d 50%);
}

.language-flag--en {
  background: repeating-linear-gradient(
    to bottom,
    #b22234 0 7.7%,
    #fff 7.7% 15.4%
  );
}

.language-flag--en::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 56%;
  height: 54%;
  background-color: #3c3b6e;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.15px);
  background-position: 0 0;
  background-size: 5px 5px;
}

.language-flag--en::after {
  z-index: 2;
}

/* Studio signature at the very bottom of every public page. */
.footer-studio {
  padding-top: 30px;
  display: flex;
  justify-content: center;
}

.studio-credit {
  position: relative;
  min-width: min(100%, 390px);
  padding: 13px 17px 13px 13px;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 13px;
  color: var(--ivory);
  border: 1px solid rgba(230,170,124,.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 50%,rgba(157,45,88,.16),transparent 25%),
    linear-gradient(100deg,rgba(25,12,26,.78),rgba(8,6,11,.4));
  box-shadow: inset 0 0 24px rgba(111,42,145,.06), 0 13px 38px rgba(0,0,0,.26);
  isolation: isolate;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.studio-credit::before,
.studio-credit::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(230,170,124,.36));
}

.studio-credit::before { right: 100%; }
.studio-credit::after { left: 100%; transform: scaleX(-1); }

.studio-credit:hover {
  color: var(--ivory);
  transform: translateY(-3px);
  border-color: rgba(230,170,124,.56);
  box-shadow: inset 0 0 30px rgba(111,42,145,.14), 0 0 28px rgba(199,122,84,.1), 0 18px 42px rgba(0,0,0,.4);
}

.studio-credit__seal {
  position: relative;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230,170,124,.66);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#73294c,#2b1027 54%,#0b0710 82%);
  box-shadow: inset 0 0 0 4px rgba(6,4,8,.5), 0 0 16px rgba(151,48,103,.22);
}

.studio-credit__seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dotted rgba(230,170,124,.42);
  border-radius: 50%;
  animation: studio-seal-turn 16s linear infinite;
}

.studio-credit__seal i,
.studio-credit__seal b {
  position: absolute;
  color: #e5b894;
  font-family: var(--antique-display) !important;
  font-size: 1.18rem;
  font-style: normal;
  font-weight: 500;
  text-shadow: 0 0 8px rgba(230,170,124,.36);
}

.studio-credit__seal i { transform: translate(-5px,-1px); }
.studio-credit__seal b { transform: translate(6px,5px); }
.studio-credit__copy { min-width: 0; display: grid; gap: 1px; }
.studio-credit__copy small { color: #978696; font-size: .67rem; letter-spacing: .08em; white-space: nowrap; }
.studio-credit__copy strong {
  display: block;
  color: #f0d2b7;
  font-family: var(--antique-display) !important;
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 15px rgba(230,170,124,.14);
}

.studio-credit__instagram {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #bd8d7c;
  transition: color .3s ease, transform .3s ease, filter .3s ease;
}

.studio-credit__instagram svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.55; }
.studio-credit:hover .studio-credit__instagram { color: #f0c09e; transform: rotate(8deg) scale(1.12); filter: drop-shadow(0 0 8px rgba(230,170,124,.4)); }

@keyframes studio-seal-turn { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .language-switcher { z-index: 96; }
  .language-switcher__trigger { min-width: 60px; height: 40px; padding-inline: 6px 8px; gap: 6px; }
  .language-switcher__code { font-size: .6rem; min-width: 18px; }
  .language-switcher__chevron { display: none; }
  .language-switcher__menu {
    position: fixed;
    top: 76px;
    right: 12px;
    width: min(268px, calc(100vw - 24px));
    padding: 12px;
    gap: 8px;
  }
  .language-switcher__menu button {
    min-height: 58px;
    padding: 9px 12px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    border-color: rgba(230,170,124,.09);
    background: rgba(23,13,25,.42);
  }
  .language-switcher__menu button small { padding-right: 20px; }
  .language-switcher__menu .language-flag { width: 29px; height: 29px; flex-basis: 29px; }
  .header-actions { gap: 7px; }
  .studio-credit::before, .studio-credit::after { width: 20px; }
}

@media (max-width: 420px) {
  .language-switcher__trigger { min-width: 39px; width: 39px; padding: 0; }
  .language-switcher__code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .language-flag { width: 25px; height: 25px; flex-basis: 25px; }
  .studio-credit { min-width: 0; width: 100%; grid-template-columns: 43px 1fr 25px; gap: 10px; padding-right: 12px; }
  .studio-credit__seal { width: 43px; height: 43px; }
  .studio-credit__copy strong { font-size: 1rem; }
}

/* Responsive stability pass: keep the header controls, portrait and overlays
   inside the real viewport on both narrow phones and compact desktops. */
.header-actions { min-width: 0; }
.brand-mark {
  backface-visibility: visible;
  transform: translateZ(0);
  will-change: auto;
}

@keyframes logo-turn {
  0%, 100% { transform: translateZ(0) rotate(-1deg) scale(1); }
  50% { transform: translateZ(0) rotate(1deg) scale(1.022); }
}

@keyframes logo-turn-fast {
  from { transform: translateZ(0) rotate(0deg) scale(1); }
  to { transform: translateZ(0) rotate(360deg) scale(1.035); }
}

@media (min-width: 821px) {
  .hero-media img {
    object-position: 100% 44%;
    transform: scale(1.012) translate3d(var(--image-x, 0), var(--image-y, 0), 0);
  }
}

@media (min-width: 821px) and (max-width: 1050px) {
  .header-inner { column-gap: 14px; }
  .header-actions .button { display: inline-flex; min-height: 40px; padding-inline: 12px; font-size: .62rem; }
  .header-inner > .brand { gap: 9px; }
  .header-inner > .brand .brand-mark { width: 82px; height: 82px; }
  .header-inner > .brand .brand-name { min-width: 170px; }
  .header-inner > .brand .brand-first { font-size: 1.02rem; }
  .header-inner > .brand .brand-name strong { font-size: 1.16rem; }
}

@media (max-width: 820px) {
  .site-header .shell { width: min(calc(100% - 20px), 720px); }
  .header-inner { height: 98px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .header-inner > .brand { min-width: 0; gap: 9px; }
  .header-inner > .brand .brand-mark { width: 78px; height: 78px; }
  .header-inner > .brand .brand-name { min-width: 0; width: 172px; }
  .header-inner > .brand .brand-first { font-size: 1.02rem; }
  .header-inner > .brand .brand-name strong { font-size: 1.18rem; }
  .header-actions { gap: 6px; }
  .cart-button { min-width: 48px; width: 48px; height: 48px; }
  .menu-button { min-width: 54px; width: 54px; height: 54px; }
  .menu-button::after { right: -2px; top: -3px; }
  .hero-media { min-height: clamp(340px, 52vh, 500px); }
  .hero-media img {
    object-position: 100% 44%;
    transform: scale(1.005);
  }
  .language-switcher,
  .cart-button {
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
  }
  body.nav-open .language-switcher,
  body.nav-open .cart-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.94);
  }
}

@media (max-width: 520px) {
  .site-header .shell { width: calc(100% - 16px); }
  .header-inner { height: 92px; gap: 6px; }
  .header-inner > .brand { gap: 7px; }
  .header-inner > .brand .brand-mark { width: 56px; height: 56px; }
  .header-inner > .brand .brand-mark::after { transform-origin: 0 27px; }
  .header-inner > .brand .brand-name { width: min(124px, 34vw); }
  .header-inner > .brand .brand-first { margin-bottom: 2px; font-size: .78rem; }
  .header-inner > .brand .brand-name strong { font-size: .84rem; letter-spacing: .035em; }
  .header-inner > .brand .brand-name::after { bottom: -5px; }
  .header-actions { gap: 6px; }
  .language-switcher__trigger {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
  }
  .language-switcher__code {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .language-switcher__trigger .language-flag { width: 26px; height: 26px; flex-basis: 26px; }
  .cart-button { min-width: 45px; width: 45px; height: 45px; }
  .menu-button { min-width: 48px; width: 48px; height: 48px; }
  .menu-button::after { width: 16px; height: 16px; right: -1px; top: -2px; }
  .cart-count { right: -1px; top: -4px; }
  .hero-media { min-height: clamp(320px, 48vh, 440px); }
  .hero-media img { object-position: 100% 44%; transform: none; }
  .studio-credit {
    min-width: 0;
    width: 100%;
    grid-template-columns: 43px minmax(0, 1fr) 26px;
    gap: 10px;
    padding: 12px 13px 12px 12px;
  }
  .studio-credit__seal { width: 43px; height: 43px; }
  .studio-credit__copy strong {
    font-size: clamp(1.05rem, 4.4vw, 1.24rem);
    letter-spacing: .055em;
  }
}

@media (max-width: 360px) {
  .header-inner > .brand .brand-name { width: 104px; }
  .header-inner > .brand .brand-first { font-size: .68rem; }
  .header-inner > .brand .brand-name strong { font-size: .72rem; letter-spacing: .02em; }
}

/* Services reveal — an inset reliquary attached to the main constellation. */
.nav-services__trigger {
  appearance: none;
  -webkit-appearance: none;
  list-style: none;
  border: 0;
  cursor: pointer;
}

.nav-services__trigger::-webkit-details-marker { display: none; }

.nav-services__trigger i {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .32s ease;
}

.nav-services[open] .nav-services__trigger i {
  transform: rotate(225deg) translate(-1px,-1px);
}

.nav-submenu {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.nav-services[open] .nav-submenu {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

@media (min-width: 821px) {
  .main-nav > .nav-services {
    position: relative;
    z-index: 12;
    flex: 0 1 auto;
    min-width: 0;
    transform: translateY(-1px);
  }

  .main-nav .nav-services__trigger {
    position: relative;
    min-width: 0;
    padding: 26px clamp(7px,1vw,15px) 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(229,211,191,.76);
    font-family: var(--mystic-heading) !important;
    font-size: clamp(.82rem,1vw,1.02rem);
    font-weight: 400;
    letter-spacing: .035em;
    line-height: 1;
    white-space: nowrap;
    background: transparent;
    text-shadow: 0 2px 10px rgba(0,0,0,.9);
    transition: color .3s ease,letter-spacing .32s ease,text-shadow .32s ease,filter .32s ease,transform .32s cubic-bezier(.2,.76,.2,1);
  }

  .main-nav .nav-services__trigger::before {
    content: "✣";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 2px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(225,166,106,.42);
    border-radius: 50%;
    color: rgba(235,186,132,.68);
    font-size: .42rem;
    background: radial-gradient(circle at 34% 28%,rgba(255,223,180,.17),transparent 25%),radial-gradient(circle,#54183f,#160918 72%);
    box-shadow: inset 0 0 6px rgba(190,68,126,.14),0 0 11px rgba(111,34,99,.2);
    transform: translateX(-50%);
    transition: transform .5s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
  }

  .main-nav .nav-services__trigger:hover,
  .main-nav .nav-services__trigger:focus-visible,
  .nav-services[open] .nav-services__trigger {
    color: #ffe2bd;
    letter-spacing: .075em;
    text-shadow: 0 0 13px rgba(239,177,119,.4),0 0 24px rgba(202,73,142,.26);
    filter: brightness(1.12);
    transform: translateY(-5px);
  }

  .main-nav .nav-services__trigger:hover::before,
  .main-nav .nav-services__trigger:focus-visible::before,
  .nav-services[open] .nav-services__trigger::before {
    color: #ffe0b9;
    border-color: rgba(242,190,135,.82);
    box-shadow: inset 0 0 8px rgba(215,92,147,.24),0 0 15px rgba(218,117,110,.42),0 0 28px rgba(126,39,111,.28);
    transform: translateX(-50%) rotate(180deg) scale(1.14);
  }

  .main-nav .nav-submenu {
    position: absolute;
    left: 50%;
    top: 58px;
    z-index: 30;
    width: 210px;
    padding: 13px;
    border: 1px solid rgba(229,171,111,.42);
    clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
    background:
      linear-gradient(135deg,rgba(255,219,171,.08),transparent 25%),
      radial-gradient(circle at 50% -10%,rgba(139,40,104,.31),transparent 58%),
      #100811;
    box-shadow: inset 0 0 0 3px rgba(58,17,49,.55),0 18px 44px rgba(0,0,0,.62),0 0 28px rgba(115,34,101,.26);
    transform: translate(-50%,-9px) scale(.94);
    transform-origin: 50% 0;
    transition: opacity .24s ease,transform .3s cubic-bezier(.2,.75,.2,1),visibility .3s;
  }

  .main-nav .nav-submenu::before {
    content: "◆";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #d99675;
    font-size: .45rem;
    background: #160914;
    border: 1px solid rgba(229,171,111,.5);
    transform: translateX(-50%) rotate(45deg);
  }

  .main-nav .nav-services[open] .nav-submenu {
    transform: translate(-50%,0) scale(1);
  }

  .main-nav .nav-services:hover .nav-submenu {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translate(-50%,0) scale(1);
  }

  .main-nav .nav-services .nav-submenu a,
  .main-nav .nav-services .nav-submenu a.active {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 43px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(225,166,106,.16);
    color: #ecd0b2;
    font-family: var(--mystic-heading) !important;
    font-size: .98rem;
    letter-spacing: .055em;
    background: linear-gradient(90deg,transparent,rgba(113,31,91,.2),transparent);
    opacity: 1;
    transform: none;
    transition: color .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
  }

  .main-nav .nav-services .nav-submenu a::before,
  .main-nav .nav-services .nav-submenu a::after {
    content: "✦";
    position: static;
    width: auto;
    height: auto;
    margin: 0 10px;
    border: 0;
    color: rgba(225,151,112,.66);
    font-size: .52rem;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  .main-nav .nav-services .nav-submenu a:hover,
  .main-nav .nav-services .nav-submenu a:focus-visible {
    padding: 11px 14px;
    color: #ffe2bd;
    letter-spacing: .085em;
    border-color: rgba(235,181,119,.46);
    background: linear-gradient(90deg,rgba(110,30,89,.06),rgba(158,51,107,.26),rgba(110,30,89,.06));
    box-shadow: inset 0 0 20px rgba(128,35,105,.18),0 0 15px rgba(190,76,130,.12);
    transform: none;
  }
}

@media (max-width: 820px) {
  .main-nav > .nav-services {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: calc(50% + 125px);
    width: 168px;
    opacity: 0;
    transform: translate(-50%,-50%);
  }

  .main-nav.open > .nav-services {
    animation: orbit-item-in .68s cubic-bezier(.2,.72,.2,1) .44s both;
  }

  .main-nav .nav-services__trigger {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(234,180,119,.44);
    clip-path: polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
    color: #efc99e;
    font-family: var(--display-font) !important;
    font-size: 1rem;
    letter-spacing: .08em;
    background: linear-gradient(135deg,rgba(255,220,173,.08),transparent 28%),linear-gradient(90deg,#1b091b,#4a1238 50%,#1b091b);
    box-shadow: inset 0 0 0 3px rgba(10,5,12,.7),0 0 22px rgba(139,38,107,.28),0 12px 26px rgba(0,0,0,.44);
    text-shadow: 0 0 13px rgba(223,107,155,.27);
  }

  .main-nav .nav-services__trigger::before,
  .main-nav .nav-services__trigger::after {
    content: "✦";
    color: rgba(224,153,110,.72);
    font-size: .5rem;
  }

  .main-nav .nav-services__trigger:hover,
  .main-nav .nav-services__trigger:focus-visible,
  .nav-services[open] .nav-services__trigger {
    color: #ffe3bd;
    border-color: rgba(245,196,139,.72);
    filter: brightness(1.1);
  }

  .main-nav .nav-submenu {
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    width: 160px;
    padding: 5px;
    border: 1px solid rgba(232,177,117,.35);
    background: rgba(15,7,16,.96);
    box-shadow: inset 0 0 18px rgba(112,28,91,.25),0 14px 30px rgba(0,0,0,.55);
    transform: translate(-50%,-7px) scale(.94);
    transition: opacity .22s ease,transform .28s ease,visibility .28s;
  }

  .main-nav .nav-services[open] .nav-submenu {
    transform: translate(-50%,0) scale(1);
  }

  .main-nav .nav-services .nav-submenu a,
  .main-nav .nav-services .nav-submenu a.active,
  .main-nav .nav-services .nav-submenu a:hover,
  .main-nav .nav-services .nav-submenu a:focus-visible {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 38px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #f3d0a8;
    font-size: .93rem;
    letter-spacing: .06em;
    background: linear-gradient(90deg,transparent,rgba(123,34,96,.2),transparent);
    box-shadow: none;
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  .main-nav .nav-services .nav-submenu a::before,
  .main-nav .nav-services .nav-submenu a::after {
    content: "◆";
    position: static;
    width: auto;
    height: auto;
    margin: 0 8px;
    border: 0;
    color: rgba(220,139,116,.7);
    font-size: .46rem;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 540px) {
  .main-nav > .nav-services {
    top: calc(50% + 108px);
    width: 148px;
  }
  .main-nav .nav-services__trigger { min-height: 36px; padding: 6px 10px; font-size: .88rem; }
  .main-nav .nav-submenu { width: 146px; }
}

@media (max-height: 620px) and (max-width: 820px) {
  .main-nav > .nav-services { top: calc(50% + 90px); }
  .main-nav .nav-submenu { top: auto; bottom: calc(100% + 6px); transform-origin: 50% 100%; }
}