@charset "UTF-8";
  
:root {
  --lavender:#dcccf4;
  --purple:#9875d1;
  --deep:#392452;
  --silver:#c5c8d3;
  --paper:#f4f3f8;
  --ink:#201d29;
  --muted:#62586d;
  --line:#d5cedd;
  --serif:Georgia,"Times New Roman","Songti TC","Noto Serif TC",serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:16px;
  line-height:1.85}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.5}
h2 {
  font-size:clamp(1.8rem,3vw,2.6rem);
  letter-spacing:.08em}
h3 {
  font-size:1.4rem;
  letter-spacing:.04em}
p+p {
  margin-top:1.2rem}
:focus-visible {
  outline:3px solid #8254b2;
  outline-offset:6px}
.skip {
  position:fixed;
  top:-90px;
  background:white;
  padding:12px;
  z-index:20}
.skip:focus {
  top:8px}
.header {
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6%;
  background:#f4f3f8;
  position:relative;
  z-index:10;
  border-bottom:1px solid var(--line)}
.brand {
  font-family:var(--serif);
  font-size:2rem;
  line-height:1.1;
  letter-spacing:-.04em}
.brand span {
  display:block;
  font:10px/2 sans-serif;
  letter-spacing:.4em;
  margin-top:6px}
nav {
  display:flex;
  align-items:center;
  gap:2.5rem;
  font-size:.85rem}
nav a {
  padding:12px 0}
.nav-cta {
  border-bottom:1px solid #84748f}
.menu {
  border:1px solid var(--deep);
  background:transparent;
  padding:6px 14px;
  color:var(--deep);
  min-height:44px}
.hero {
  min-height:720px;
  position:relative;
  overflow:hidden;
  color:#f4f3f8;
  padding:94px 8% 32px;
  background:radial-gradient(ellipse at 72% 42%,#9470b488 0,transparent 40%),radial-gradient(ellipse at 80% 100%,#5c3674 0,transparent 65%),linear-gradient(125deg,#22152f,#392452 55%,#67507a)}
.hero:before,.connect:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:radial-gradient(#eee 1px,transparent 1px),radial-gradient(#e9d9ff 1px,transparent 1px);
  background-size:139px 137px,211px 197px;
  background-position:13px 22px,70px 100px}
.hero-copy {
  position:relative;
  z-index:2;
  max-width:650px}
.eyebrow {
  font-size:.68rem;
  letter-spacing:.22em;
  font-weight:600;
  margin-bottom:24px}
.hero .eyebrow {
  color:#e0d4ec}
h1 {
  font-size:clamp(2.8rem,5vw,4.7rem);
  line-height:1.42;
  letter-spacing:.12em;
  margin-bottom:26px}
h1 span {
  color:#dbc8f2}
.intro {
  color:#e0d6ea;
  font-size:1rem;
  line-height:2}
.button {
  display:inline-flex;
  gap:45px;
  justify-content:space-between;
  align-items:center;
  min-height:53px;
  padding:12px 24px;
  font-size:.85rem;
  transition:transform .2s,box-shadow .2s}
.silver {
  color:#332341;
  background:linear-gradient(115deg,#fff,#d5d2e1 48%,#eeedf4 76%,#c5c8d3);
  border:1px solid #eee8f5}
.hero .button {
  margin-top:32px}
.text-link {
  display:block;
  font-size:.78rem;
  width:fit-content;
  margin-top:20px;
  padding:7px 0;
  border-bottom:1px solid #9e8eae}
.hero-foot {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  margin-top:78px;
  padding-top:20px;
  border-top:1px solid #a898b94d;
  font-size:.65rem;
  letter-spacing:.12em;
  color:#dfd3ea}
.cosmos {
  position:absolute;
  width:530px;
  height:530px;
  right:5%;
  top:60px}
.orbit {
  position:absolute;
  border:1px solid #d3cddd80;
  border-radius:50%;
  inset:20px}
.o1 {
  border:1px solid #cec6dc88;
  box-shadow:0 0 60px #e5c7ff10,inset 0 0 40px #d5bbff14}
.o2 {
  inset:60px;
  border-style:dashed;
  opacity:.6}
.o3 {
  inset:105px;
  transform:rotate(-28deg) scaleX(1.35);
  border-color:#d5cadd70}
.axis {
  position:absolute;
  inset:0;
  border-top:1px solid #d0c6df50;
  top:50%;
  transform:rotate(-35deg)}
.planet {
  position:absolute;
  width:230px;
  height:230px;
  left:150px;
  top:150px;
  border-radius:50%;
  background:radial-gradient(circle at 28% 24%,#f2eff6 0,#c3b5d3 16%,#89749e 39%,#35253f 70%);
  box-shadow:inset -25px -15px 35px #180d2a,0 0 65px #d8b6ff35}
.north {
  position:absolute;
  top:0;
  left:49%;
  font:12px Georgia;
  color:#ddd0ec}
.spark {
  position:absolute;
  color:#ece8f4}
.s1 {
  top:60px;
  right:110px;
  font-size:38px}
.s2 {
  bottom:80px;
  left:36px;
  font-size:38px}
.s3 {
  right:40px;
  bottom:120px}
.orbit-caption {
  position:absolute;
  bottom:20px;
  right:10px;
  font:10px/1.7 Georgia;
  letter-spacing:.2em}
.orbit-caption i {
  font-size:23px;
  letter-spacing:0}
.ribbon {
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:19px 5%;
  color:#635374;
  background:#e7e0ef;
  font:10px Georgia;
  letter-spacing:.2em;
  gap:12px;
  border-bottom:1px solid #cec5d9}
.section {
  padding:100px 8%;
  scroll-margin-top:20px}
.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  background:#f4f3f8}
.italic {
  color:#79608d}
.about-copy {
  padding-top:30px;
  font-size:.9rem;
  color:var(--muted)}
.about-copy .lead {
  font-size:1.12rem;
  color:var(--deep);
  margin-bottom:24px}
.signature {
  display:block;
  text-align:right;
  font:italic 28px Georgia;
  color:#79608d;
  margin-top:28px}
.journal {
  background:#ebe7f0}
.section-head {
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:flex-end;
  margin-bottom:40px}
.section-head>p {
  font-size:.8rem;
  color:var(--muted)}
small {
  font-size:.72rem}
.articles {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px}
.art {
  height:250px;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  margin-bottom:24px}
.moon-art {
  background:radial-gradient(ellipse at 70% 80%,#79628e,transparent 65%),#30263d}
.moon-art div {
  width:150px;
  height:150px;
  border-radius:50%;
  box-shadow:inset 23px -9px 0 #e2dbe9;
  transform:rotate(-25deg)}
.moon-art span {
  position:absolute;
  color:#d1bddf;
  right:30px;
  top:20px;
  font-size:24px}
.connection-art {
  background:linear-gradient(130deg,#c4b4d4,#e5ddea)}
.connection-art div {
  width:140px;
  height:140px;
  border:1px solid #786489;
  border-radius:50%;
  position:absolute;
  top:44px;
  left:calc(50% - 110px)}
.connection-art div+div {
  left:calc(50% - 30px);
  border-color:#fff}
.art>span:last-child:not(:first-child) {
  letter-spacing:.2em}
.connection-art span,.chart-art span {
  font:9px Georgia;
  letter-spacing:.2em;
  position:absolute;
  bottom:22px}
.chart-art {
  background:radial-gradient(circle at 50% 50%,#9b7ab5,#4a355d);
  color:#e9d9f2}
.chart-art div {
  border:1px solid #c3b0d3;
  border-radius:50%;
  width:175px;
  height:175px;
  display:grid;
  place-items:center;
  font-size:50px;
  outline:1px dashed #bfaccd;
  outline-offset:-17px}
.category {
  font-size:.63rem;
  letter-spacing:.13em;
  color:#6a537d;
  margin-bottom:12px}
.articles h3 {
  margin-bottom:14px}
.articles article>p:not(.category) {
  font-size:.82rem;
  color:var(--muted);
  min-height:3.7em}
.articles details {
  border-bottom:1px solid #b8adbf;
  margin-top:22px;
  font-size:.85rem}
.articles summary {
  cursor:pointer;
  list-style:none;
  padding:10px 0;
  display:flex;
  justify-content:space-between;
  min-height:44px}
.articles details p {
  font-size:.87rem;
  padding:12px 0 20px;
  color:var(--muted)}
.readings {
  background:radial-gradient(ellipse at 0 100%,#665079 0,transparent 65%),#2d203b;
  color:#f4effa;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:12%}
.readings h2 {
  font-size:2.8rem}
.reading-title>p:not(.eyebrow) {
  margin:22px 0 30px;
  font-size:.9rem;
  color:#ddd1e8}
.reading-title small {
  display:block;
  color:#d5c9df;
  margin-top:20px}
.services article {
  display:flex;
  gap:22px;
  padding:26px 0;
  border-bottom:1px solid #897696}
.services article:first-child {
  padding-top:0}
.services article>span {
  font:italic 17px Georgia;
  color:#d8c6e7}
.services h3 {
  font-size:1.3rem;
  margin-bottom:12px}
.services p {
  font-size:.85rem;
  color:#ded3e8}
.services b {
  font-size:25px;
  font-weight:400;
  margin-left:auto}
.services .process {
  font-size:.7rem;
  margin-top:24px}
.future {
  background:#f4f3f8}
.future-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:40px}
.future-grid article {
  display:flex;
  gap:25px;
  padding-top:25px;
  border-top:1px solid var(--line)}
.future-icon {
  font:70px Georgia;
  color:#897397}
.future-grid p {
  font-size:.85rem;
  color:var(--muted);
  margin-top:9px}
.badge {
  font-size:.63rem;
  letter-spacing:.12em;
  padding:4px 9px;
  background:#e5deee;
  color:#594365;
  display:inline-block;
  margin-bottom:12px}
.connect {
  position:relative;
  text-align:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 60% 110%,#cfb5ed,transparent 70%),#e8e0f1}
.connect>* {
  position:relative}
.connect:before {
  opacity:.8}
.connect h2 {
  font-size:2.7rem}
.connect h2 span {
  color:#73518b}
.connect>p:not(.eyebrow) {
  font-size:.9rem;
  color:#5d4a6b;
  margin-top:20px}
.socials {
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:32px}
.socials a {
  border:1px solid #8e7b9e;
  padding:10px 25px;
  min-width:180px;
  font:18px Georgia;
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:center;
  min-height:50px}
.connect #social-status {
  font-size:.72rem;
  margin-top:24px}
footer {
  padding:45px 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px}
footer .brand {
  font-size:1.7rem}
footer p,footer small,.back {
  font-size:.7rem;
  color:var(--muted)}
.back {
  padding:12px 0}
.menu[hidden] {
  display:none}
@media(hover:hover) {
  a:hover,summary:hover {
  color:#8055a6}
.hero a:hover,.readings a:hover {
  color:#392452}
.hero .text-link:hover {
  color:#fff}
.button:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px #1c0d2d30}
.socials a:hover {
  background:#f4eff8}
nav a:hover {
  border-bottom:1px solid #8055a6}
}
@media(min-width:1500px) {
  .hero,.section {
  padding-left:max(8%,calc((100vw - 1280px)/2));
  padding-right:max(8%,calc((100vw - 1280px)/2))}
.cosmos {
  right:calc((100vw - 1320px)/2)}
}
@media(max-width:1100px) {
  .cosmos {
  right:-150px;
  opacity:.6}
.hero-copy {
  max-width:70%}
.section {
  padding:75px 6%}
.readings {
  gap:7%}
.art {
  height:210px}
.header {
  padding:0 5%}
nav {
  gap:1.5rem}
footer {
  flex-wrap:wrap}
}
@media(max-width:700px) {
  html {
  scroll-padding-top:20px}
.header {
  height:86px;
  flex-wrap:wrap}
.brand {
  font-size:1.65rem}
.brand span {
  font-size:9px}
.menu:not([hidden]) {
  display:block}
nav {
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  background:var(--paper);
  padding:15px 6%;
  position:absolute;
  top:86px;
  left:0;
  border-bottom:1px solid var(--line)}
nav[data-collapsed="true"] {
  display:none}
nav a {
  padding:12px}
.hero {
  min-height:830px;
  padding:55px 7% 24px}
.hero-copy {
  max-width:100%}
.hero .eyebrow {
  font-size:.57rem;
  letter-spacing:.13em}
h1 {
  font-size:2.8rem}
.intro {
  font-size:.9rem}
.cosmos {
  width:340px;
  height:340px;
  top:auto;
  bottom:35px;
  right:-60px;
  opacity:.75}
.planet {
  width:145px;
  height:145px;
  top:98px;
  left:98px}
.o2 {
  inset:43px}
.o3 {
  inset:70px}
.hero-foot {
  margin-top:205px;
  font-size:.58rem}
.hero-foot span:last-child {
  display:none}
.orbit-caption {
  display:none}
.ribbon {
  font-size:8px;
  overflow:hidden;
  white-space:nowrap;
  justify-content:center;
  gap:15px}
.ribbon span:last-child {
  display:none}
.section {
  padding:60px 7%}
.about,.readings {
  grid-template-columns:1fr;
  gap:35px}
.about-copy {
  padding-top:0}
.section-head {
  display:block}
.section-head>p {
  margin-top:20px}
.articles {
  grid-template-columns:1fr;
  gap:42px}
.art {
  height:260px}
.articles article>p:not(.category) {
  min-height:0}
.readings h2 {
  font-size:2.2rem}
.services article:first-child {
  padding-top:20px}
.future-grid {
  grid-template-columns:1fr;
  gap:28px}
.connect h2 {
  font-size:2rem}
.connect h2 span {
  display:block}
.socials {
  flex-direction:column;
  align-items:center}
.socials a {
  width:240px}
footer {
  display:grid;
  grid-template-columns:1fr auto;
  padding:35px 7%}
footer p {
  grid-column:1/-1}
footer small {
  grid-row:3;
  grid-column:1/-1}
.back {
  grid-column:2;
  grid-row:1}
.italic {
  display:block}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  transition:none!important;
  animation:none!important}
}
@media(forced-colors:active) {
  .silver {
  border:1px solid ButtonText}
.planet,.art {
  border:1px solid CanvasText}
}

/* Keep the full second headline line readable on narrow phones. */
@media(max-width:700px) {
  h1 {
  font-size:clamp(2rem,8.8vw,2.7rem);
  letter-spacing:.08em}
}

.button:active {
  transform:translateY(1px)}


/* Warm celestial palette, v0.2 */
:root { --pink: #edc5d4; --rose: #8b4661; --blush: #f6e9ed; }
.hero { background: radial-gradient(ellipse at 72% 48%,#b87f9c66,transparent 48%),radial-gradient(ellipse at 90% 100%,#8a527b,transparent 65%),linear-gradient(125deg,#22152f,#392452 55%,#67507a); }
h1 span { color:#f1cbdc; }
.galaxy { position:absolute; inset:80px -40px; border-radius:50%; transform:rotate(-30deg); background:radial-gradient(ellipse,#f1d2e44a, #cda5d32a 25%,transparent 64%); box-shadow:0 0 45px #efbadc20; }
.celestial-sun { position:absolute; right:4px; top:125px; color:#edd6df; font:62px Georgia; text-shadow:0 0 24px #f5bbcf88; }
.celestial-moon { position:absolute; left:38px; top:75px; color:#efe5f5; font:62px Georgia; transform:rotate(-20deg); }
.constellation { position:absolute; bottom:80px; left:140px; font-size:22px; color:#f0d9e8; letter-spacing:.2em; }
.about { background:linear-gradient(125deg,#f4f3f8 40%,#f7e9ed); }
.journal { background:linear-gradient(150deg,#eee6f1,#f2e5eb); }
.connection-art { background:linear-gradient(130deg,#c4b4d4,#edc5d4); }
.connect { background:radial-gradient(ellipse at 70% 100%,#e7b9cf,transparent 65%),linear-gradient(120deg,#e8e0f1,#f5e5eb); }
.ebooks { background:#faf5f6; }
.book-feature { display:grid; grid-template-columns:1fr 1.15fr; gap:9%; align-items:center; }
.book-scene { min-height:510px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:radial-gradient(ellipse at 30% 25%,#f5dbe7,transparent 70%),linear-gradient(140deg,#e4daec,#f5e6ec); padding:40px 25px 20px; }
.book-cover { position:relative; width:260px; min-height:360px; padding:28px; color:#f5e8f1; background:radial-gradient(ellipse at 80% 70%,#ad7593,transparent 65%),linear-gradient(140deg,#392452,#735274); box-shadow:-7px 4px 0 #e5d7e1,-10px 6px 0 #c3b2c6,14px 22px 32px #56314c33; border-left:6px solid #d6bbd066; transform:rotate(-6deg); }
.book-cover p:first-child { font:9px/1.7 Georgia; letter-spacing:.18em; }
.book-cover h3 { font-size:1.9rem; line-height:1.65; margin:18px 0; }
.book-cover p:not(:first-child) { font-size:.65rem; letter-spacing:.09em; }
.book-cover>span { display:block; margin-top:25px; font-size:.65rem; letter-spacing:.2em; }
.book-symbol { margin-top:20px; border-block:1px solid #ddc8dc80; padding:12px 0; font:40px Georgia; display:flex; justify-content:space-between; align-items:center; color:#e5d9e7; }
.book-symbol span { font-size:20px; }
.book-caption { margin-top:35px; font-size:.6rem; color:#68546d; letter-spacing:.15em; }
.book-info>.eyebrow { margin-top:18px; margin-bottom:12px; color:#78516e; }
.book-info h3 { font-size:2rem; margin-bottom:20px; }
.book-info>p:not(.eyebrow) { font-size:.88rem; color:#655364; }
.book-topics { padding:0 0 0 20px; margin:22px 0; color:#594b60; font-size:.87rem; line-height:2.1; }
.book-format { border-bottom:1px solid #d9cbd4; padding-bottom:18px; }
.book-price { display:flex; justify-content:space-between; align-items:center; padding:22px 0; gap:20px; font-size:.8rem; }
.book-price strong { font:26px Georgia; color:#73425b; }
.book-price strong span { font:18px -apple-system,sans-serif; }
.book-actions { display:flex; gap:12px; flex-wrap:wrap; }
.book-actions .button { gap:18px; flex:1; justify-content:center; white-space:nowrap; }
.preview-button { border:1px solid #8c718b; color:#523853; }
.buy-button { background:#73425b; color:white; border:1px solid #73425b; }
#purchase-status { margin-top:18px; font-size:.76rem; color:#655364; }
.ebook-preview { margin-top:45px; border-block:1px solid #c7b5c6; }
.ebook-preview summary { list-style:none; display:flex; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; font-size:.95rem; }
.preview-copy { max-width:680px; padding:15px 0 35px; margin:auto; color:#58485c; font-size:.93rem; }
.preview-copy h3 { font-size:1.65rem; margin-bottom:22px; }
.preview-copy blockquote { background:#f1e3ec; padding:24px; margin:25px 0; border-left:2px solid #a77692; }
.dice-teaser { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:40px; background:#eee7f3; }
.dice-teaser>div>p:not(.eyebrow) { font-size:.9rem; color:#63536f; }
.dice-teaser>span { font-size:70px; color:#80648d; }
@media(hover:hover) { .buy-button:hover { color:white; background:#5e3048; } .preview-button:hover { background:#f1e3ec; } }
@media(max-width:700px) { .book-feature { grid-template-columns:1fr; gap:35px; } .book-scene { min-height:450px; } .book-info h3 { font-size:1.7rem; } .book-actions { flex-direction:column; } .dice-teaser { grid-template-columns:1fr; gap:24px; } .dice-teaser>span { display:none; } .celestial-sun { top:80px; right:0; font-size:45px; } .celestial-moon { top:35px; left:22px; font-size:42px; } .constellation { bottom:50px; left:90px; font-size:16px; } }

/* Gem knowledge room: the same rose, lavender and silver visual family. */
.gems { background:linear-gradient(140deg,#f3edf6,#f8eef1 60%,#eee9f5); }
.gems-intro { max-width:740px; font-size:.95rem; color:#625269; }
.gem-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:38px 0 58px; }
.gem-principles article { border-top:1px solid #c8b7ca; padding-top:20px; }
.gem-principles article>span { font-size:.7rem; color:#785671; letter-spacing:.1em; }
.gem-principles h3 { font-size:1.25rem; margin:12px 0; }
.gem-principles p { font-size:.85rem; color:#625269; }
.gem-subhead { margin-bottom:25px; }
.gem-subhead p { font-size:.78rem; color:#67566d; margin-top:8px; }
.gem-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; align-items:start; }
.gem-art { height:180px; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 50% 65%,#dac8e5,#ebe4f2); }
.gem-facet { width:94px; height:125px; clip-path:polygon(50% 0,88% 25%,100% 70%,50% 100%,0 70%,12% 25%); background:conic-gradient(from 20deg at 50% 40%,#e8daf4,#9771b5,#d2b8e7,#73548b,#b898d2,#f0e7f7); transform:rotate(16deg); }
.gem-spark { position:absolute; right:22%; top:25px; font-size:30px; color:#715a81; }
.gem-aquamarine { background:radial-gradient(ellipse,#cfe7e8,#e8e5f1); }.gem-aquamarine .gem-facet { filter:hue-rotate(85deg); }
.gem-moonstone { background:radial-gradient(ellipse,#ece2df,#dcd8ec); }.gem-moonstone .gem-facet { background:conic-gradient(at 40% 40%,#e7edf2,#b9c6db,#fcf2eb,#bbc1d9,#e8e9f1); }
.gem-rose { background:radial-gradient(ellipse,#f2cfdc,#f6e7eb); }.gem-rose .gem-facet { background:conic-gradient(at 50% 40%,#fbe3ed,#d8a6be,#f0c4d7,#b87b9c,#e8b9d0,#fcebf1); }
.gem-citrine { background:radial-gradient(ellipse,#f2dfc4,#f4e9e6); }.gem-citrine .gem-facet { background:conic-gradient(at 50% 40%,#fff1cd,#d7aa66,#efce92,#ac7a42,#efd59b,#fff0ce); }
.gem-body { padding:22px 0 5px; }.gem-body h4 { font:1.5rem var(--serif); margin:12px 0; }.gem-mineral { font-size:.78rem; color:#625269; }.gem-symbol { font-size:.85rem; color:#7d4260; margin-top:14px; }
.gem-card details { margin-top:18px; border-block:1px solid #cbbdce; }.gem-card summary,.birthstone-guide summary,.gem-care summary { display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; list-style:none; min-height:50px; font-size:.85rem; }
.gem-card dl { font-size:.83rem; margin:0 0 18px; }.gem-card dt { font-weight:600; margin-top:18px; }.gem-card dd { margin:6px 0 0; color:#625269; }.gem-source { display:inline-block; font-size:.74rem; color:#6e4166; padding:10px 0; text-decoration:underline; text-underline-offset:4px; }
.birthstone-guide,.gem-care { margin-top:35px; border-block:1px solid #bda8c0; padding:8px 0; }.birthstone-guide>p { font-size:.83rem; color:#625269; margin:15px 0 24px; }.birthstone-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }.birthstone-list article { padding:15px 0; border-top:1px solid #d6c8d8; }.birthstone-list h4 { font:1.25rem var(--serif); margin:0 0 10px; }.birthstone-list p { font-size:.83rem; }.birthstone-list span { font-size:.75rem; color:#695570; }.gem-care ol { padding-left:22px; font-size:.88rem; color:#625269; }.gem-care li { padding:8px 0; }
.gem-future { margin-top:50px; background:#392b46; color:#f5eaf3; padding:38px; }.gem-future h3 { font-size:1.7rem; }.gem-future p:not(.eyebrow) { font-size:.88rem; color:#e0d0e0; margin-top:15px; }.gem-future-types { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }.gem-future-types span { border:1px solid #a98ca5; padding:8px 15px; font-size:.8rem; }.gem-future .gem-future-note { font-size:.76rem!important; }.gem-future a { color:#f3d9e8; }.gem-updated { font-size:.7rem; color:#67566d; margin-top:24px; }
@media(min-width:701px) and (max-width:1100px) { .header nav { gap:1rem; font-size:.77rem; } .gem-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .birthstone-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) { .gem-principles,.gem-grid { grid-template-columns:1fr; gap:28px; }.gem-principles { margin-bottom:40px; }.birthstone-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.gem-future { padding:28px 22px; }.gem-art { height:200px; } }

/* Supplied artwork is preserved; crop and blend are display styles only. */
.brand-with-logo { display:inline-flex; align-items:center; gap:14px; flex-shrink:0; }
.brand-with-logo .logo-crop { display:block; width:64px; height:64px; margin:0; overflow:hidden; position:relative; mix-blend-mode:multiply; flex:none; }
.logo-crop img { position:absolute; max-width:none; width:324px; height:405px; left:-130px; top:-276px; }
.brand .brand-wordmark { font:inherit; letter-spacing:inherit; margin:0; display:block; }
.brand-wordmark>span { display:block; font:10px/2 sans-serif; letter-spacing:.4em; margin-top:6px; }
.header nav { gap:1.45rem; }
.brand-signature { margin:35px 0 0; display:flex; align-items:center; gap:20px; border-top:1px solid #d5c5d4; padding-top:24px; }
.brand-seal { width:150px; flex:none; }
.brand-seal img { display:block; width:100%; height:auto; mix-blend-mode:multiply; filter:contrast(1.35); }
.brand-signature figcaption { color:#6b506a; font-size:.85rem; }
.brand-signature figcaption span { display:block; font:italic 14px/1.7 Georgia; margin-top:8px; }
.astro-dice { display:grid; grid-template-columns:1.1fr 1fr; gap:7%; align-items:center; color:#f7edf6; background:radial-gradient(ellipse at 90% 35%,#9c678e77,transparent 60%),linear-gradient(125deg,#2d203b,#513557); overflow:hidden; }
.dice-copy h2 { font-size:clamp(1.8rem,3vw,2.7rem); margin:20px 0 24px; }
.dice-copy h2 span { color:#f0c9dc; }
.dice-copy>p:not(.eyebrow) { color:#e3d3e5; font-size:.92rem; }
.dice-copy .badge { background:#edc5d425; border:1px solid #c49fb8; color:#f4dce9; }
.dice-keys { display:flex; flex-wrap:wrap; gap:10px 18px; margin:24px 0; font-size:.75rem; color:#f0d5e7; }
.dice-copy .dice-note { font-size:.77rem!important; margin-bottom:26px; max-width:440px; }
.dice-visual { min-height:350px; position:relative; }
.dice-orbit { position:absolute; width:320px; height:320px; border:1px solid #c9adc780; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 55px #dcaddf1c,inset 0 0 50px #deb8de18; }
.dice-orbit:after { content:""; position:absolute; inset:28px; border:1px dashed #c9adc75c; border-radius:50%; }
.astro-cube { position:absolute; width:124px; height:124px; border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,#faf1f8,#c7b9d8 55%,#9a85b3); color:#483153; border:1px solid #e2d5eb; box-shadow:8px 15px 25px #1c102f66,inset 3px 3px 7px #fff9; }
.astro-cube>span { font:52px Georgia; line-height:1; }
.astro-cube small { font:8px Georgia; letter-spacing:.18em; margin-top:12px; }
.cube-planet { left:calc(50% - 130px); top:22px; transform:rotate(-17deg); }
.cube-sign { left:calc(50% + 5px); top:112px; transform:rotate(16deg); background:linear-gradient(135deg,#f7e8ef,#d8b1c9 55%,#a47e9e); }
.cube-house { left:calc(50% - 115px); top:180px; transform:rotate(-9deg); }
.dice-star { position:absolute; top:25px; right:30px; font-size:38px; color:#e3d0e5; }
.dice-visual>p { position:absolute; bottom:-22px; width:100%; text-align:center; font:9px Georgia; letter-spacing:.24em; color:#e3d0e5; }
@media(min-width:701px) and (max-width:1200px) { .header nav { gap:.8rem; font-size:.73rem; }.header { padding:0 4%; }.header .brand { font-size:1.6rem; }.header .logo-crop { width:54px; height:54px; }.header .logo-crop img { width:274px; height:342.5px; left:-110px; top:-233px; } }
@media(max-width:700px) { .brand-with-logo { gap:10px; }.brand-with-logo .logo-crop { width:48px; height:48px; }.logo-crop img { width:243px; height:303.75px; left:-97.5px; top:-207px; }.header .brand { font-size:1.45rem; }.brand-wordmark>span { font-size:9px; }.header nav { gap:0; }.brand-signature { gap:14px; }.brand-seal { width:110px; }.brand-signature figcaption { font-size:.78rem; }.astro-dice { grid-template-columns:1fr; gap:35px; }.dice-visual { min-height:350px; }.dice-copy h2 { font-size:1.8rem; } }
@media(max-width:360px) { .header { padding:0 4%; }.header .brand { font-size:1.25rem; }.header .brand-wordmark>span { letter-spacing:.25em; }.menu { padding:6px 10px; } }
/* v0.5: compact introduction, about one third shorter. */
.hero { min-height:480px; padding-top:36px; padding-bottom:22px; }
.hero .eyebrow { margin-bottom:14px; }
.hero h1 { font-size:clamp(2.5rem,3.6vw,3.25rem); line-height:1.35; margin-bottom:16px; }
.hero .intro { line-height:1.7; }
.hero .button { margin-top:20px; min-height:48px; }
.hero .text-link { margin-top:10px; }
.hero-foot { margin-top:22px; padding-top:12px; }
.cosmos { top:-6px; transform:scale(.78); transform-origin:center; }
.header .logo-crop { width:72px; height:72px; }
.header .logo-crop img { width:365px; height:456.25px; left:-146px; top:-311px; }
@media(min-width:701px) and (max-width:1100px) { .header { height:auto; min-height:104px; padding-block:14px; flex-wrap:wrap; gap:12px; }.header nav { flex-wrap:wrap; gap:8px 20px; }.cosmos { right:-120px; }.hero-copy { max-width:70%; } }
@media(max-width:700px) { .hero { min-height:553px; padding:30px 7% 18px; }.hero h1 { font-size:clamp(1.8rem,8vw,2.3rem); line-height:1.35; }.hero .intro { font-size:.85rem; }.hero .eyebrow { font-size:.54rem; }.hero-foot { margin-top:140px; }.cosmos { width:340px; height:340px; top:auto; bottom:-50px; right:-90px; transform:scale(.65); opacity:.65; }.header .logo-crop { width:52px; height:52px; }.header .logo-crop img { width:263px; height:328.75px; left:-105px; top:-224px; } }

/* v0.6: reduce section footprint through spacing, not text scaling. */
.section { padding-top:64px; padding-bottom:64px; }
.section-head { margin-bottom:26px; gap:24px; }
.section .eyebrow { margin-bottom:16px; }
h2 { font-size:clamp(1.7rem,2.7vw,2.3rem); }
.about { gap:8%; }.about-copy { padding-top:10px; }.about-copy p+p { margin-top:14px; }
.brand-signature { margin-top:22px; padding-top:16px; }.brand-seal { width:118px; }
.articles { gap:24px; }.art { height:166px; margin-bottom:16px; }.moon-art div { width:116px; height:116px; }.chart-art div { width:128px; height:128px; font-size:38px; }.connection-art div { top:24px; width:116px; height:116px; }.articles h3 { font-size:1.25rem; margin-bottom:10px; }.articles details { margin-top:14px; }
.readings { gap:8%; }.readings h2 { font-size:2.2rem; }.reading-title>p:not(.eyebrow) { margin:16px 0 20px; }.services article { padding:18px 0; gap:16px; }.services h3 { margin-bottom:8px; }
.book-feature { gap:6%; }.book-scene { min-height:340px; padding:24px 18px 16px; }.book-cover { width:205px; min-height:280px; padding:20px; }.book-cover h3 { font-size:1.5rem; margin:12px 0; }.book-symbol { font-size:28px; padding:8px 0; margin-top:12px; }.book-cover>span { margin-top:16px; }.book-caption { margin-top:23px; }.book-info h3 { font-size:1.6rem; margin-bottom:12px; }.book-topics { margin:14px 0; }.book-price { padding:14px 0; }.ebook-preview { margin-top:28px; }.ebook-preview summary { padding:16px 0; }
.gem-principles { gap:24px; margin:24px 0 30px; }.gem-principles article { padding-top:14px; }.gem-principles h3 { margin:8px 0; }.gem-subhead { margin-bottom:18px; }.gem-grid { gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)); }.gem-card { display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:start; }.gem-art { height:108px; margin-top:4px; }.gem-facet { width:48px; height:70px; }.gem-spark { font-size:18px; right:7px; top:6px; }.gem-body { padding:0; min-width:0; }.gem-body .category { font-size:.6rem; overflow-wrap:anywhere; }.gem-body h4 { font-size:1.25rem; margin:8px 0; }.gem-mineral { line-height:1.7; }.gem-symbol { margin-top:8px; font-size:.8rem; }.gem-card details { margin-top:10px; }.gem-card summary { font-size:.78rem; gap:6px; }.gem-card details[open] { grid-column:1/-1; }.birthstone-guide,.gem-care { margin-top:22px; }.gem-future { margin-top:30px; padding:25px; }.gem-future h3 { font-size:1.45rem; }.gem-future-types { margin-top:16px; }
.dice-copy h2 { margin:14px 0 16px; font-size:2rem; }.dice-keys { margin:16px 0; }.dice-copy .dice-note { margin-bottom:18px; }
.dice-photo { margin:0; min-width:0; }.dice-photo>img { display:block; width:100%; height:260px; object-fit:cover; object-position:center 52%; border:1px solid #bd9c7980; }.dice-photo figcaption { font-size:.68rem; color:#e1cede; margin-top:8px; }.dice-legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }.dice-legend>div { padding:12px 6px; border:1px solid #af8d7799; background:linear-gradient(130deg,#30283d,#211b2c); display:grid; justify-items:center; gap:5px; text-align:center; }.dice-legend>div>span { font:28px Georgia; color:#e8c392; }.dice-legend strong { font-size:.8rem; font-weight:500; }.dice-legend small { font-size:.65rem; color:#e1cede; }
.connect h2 { font-size:2.2rem; }.socials { margin-top:22px; }footer { padding-top:30px; padding-bottom:30px; }
@media(max-width:1100px) and (min-width:701px) { .gem-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.book-feature { grid-template-columns:.85fr 1.15fr; }.book-actions { flex-direction:column; }.astro-dice { gap:4%; } }
@media(max-width:700px) { .section { padding-top:40px; padding-bottom:40px; }.hero { min-height:553px; }.about,.readings { gap:24px; }.section-head>p { margin-top:14px; }.articles { gap:28px; }.art { height:174px; }.connection-art div { top:28px; }.book-feature { gap:24px; }.book-scene { min-height:300px; }.book-cover { width:190px; min-height:260px; }.book-actions { flex-direction:column; }.gem-principles { gap:18px; }.gem-grid { grid-template-columns:1fr; gap:24px; }.gem-card { grid-template-columns:80px minmax(0,1fr); gap:16px; }.gem-art { height:115px; }.gem-future { padding:22px 18px; }.astro-dice { gap:24px; }.dice-photo>img { height:240px; }.dice-copy h2 { font-size:1.8rem; }.connect h2 { font-size:1.85rem; } }
@media(max-width:360px) { .gem-card { grid-template-columns:62px minmax(0,1fr); gap:12px; }.gem-art { height:94px; }.gem-facet { width:40px; height:60px; } }
.gem-foundations { border-block:1px solid #c8b7ca; margin:22px 0 28px; }
.gem-foundations>summary { display:flex; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; padding:14px 0; font-size:.85rem; }
.gem-foundations .gem-principles { margin:10px 0 24px; }
.gem-foundations .gem-principles article { border-top:0; }
.gem-aquamarine .gem-facet { filter:none; background:conic-gradient(at 50% 40%,#e9fcfa,#8bbec7,#c0e4ea,#588894,#b4dde8,#e1f6fa); }
.hero { min-height:400px; padding-top:24px; padding-bottom:16px; }
.hero h1 { font-size:clamp(2.3rem,3.2vw,2.8rem); margin-bottom:12px; }
.hero .eyebrow { margin-bottom:10px; }.hero .button { margin-top:14px; }.hero-foot { margin-top:14px; }
.cosmos { transform:scale(.66); top:-55px; }
@media(max-width:700px) { .hero { min-height:465px; padding-top:24px; }.hero h1 { font-size:clamp(1.8rem,8vw,2.3rem); }.hero-foot { margin-top:70px; }.cosmos { top:auto; bottom:-90px; right:-120px; transform:scale(.55); }.gem-foundations>summary { font-size:.8rem; } }
/* Home: a short gem gateway; knowledge now lives on gemstones.html. */
.gems-teaser { display:grid; grid-template-columns:1.3fr 1fr; gap:8%; align-items:center; }
.gems-teaser>div>p:not(.eyebrow) { margin-top:20px; color:#65536c; font-size:.92rem; }
.gem-entry { margin-top:24px; border:1px solid #8a6a94; color:#56365f; background:#faf4fa; }
.gems-teaser .gem-teaser-note { font-size:.75rem!important; }
.gem-teaser-art { display:flex; align-items:center; gap:12px; }
.gem-teaser-art .gem-art { flex:1; height:160px; }.gem-teaser-art .gem-art:nth-child(2) { margin-top:35px; }.gem-teaser-art .gem-facet { width:62px; height:94px; }
.dice-photo>img { object-fit:contain; background:#31283d; }
.dice-copy .dice-timeframe { margin-top:16px; font-size:.87rem; color:#f2d9e8; }
@media(max-width:700px) { .gems-teaser { grid-template-columns:1fr; gap:28px; }.gem-teaser-art { max-width:350px; width:100%; }.gem-teaser-art .gem-art { height:110px; }.gem-teaser-art .gem-facet { width:48px; height:70px; } }

.dice-design-pending{min-height:240px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#83608255,transparent 75%),#30243e;border:1px solid #b69abb66;color:#eedce9;text-align:center;padding:25px}.dice-design-pending>span{font-size:48px}.dice-design-pending p{font-family:var(--serif);font-size:1.1rem;margin-top:12px}.dice-design-pending small{margin-top:12px;letter-spacing:.2em}

.dice-photo>img.approved-dice-art { height:auto; aspect-ratio:2 / 1; object-fit:contain; background:#efe0e8; }

.about-copy { font-size:1rem; line-height:1.95; }.about-copy .lead { font-size:1.2rem; }.about { align-items:start; }

.julie-story { border-top:1px solid #d5c5d4; padding-top:24px; margin-top:26px; }.julie-story>.eyebrow { color:#765573; margin-bottom:16px; }.julie-story>p:not(.eyebrow) { font-size:.95rem; line-height:1.95; }

/* Approved brand artwork — 2026-10-28 */
.brand-with-logo{display:flex;align-items:center;gap:12px}.brand-icon{display:block;width:44px;height:44px;object-fit:cover;border-radius:50%;flex:none}.brand-seal-new{width:min(100%,320px)!important;height:auto!important;flex:none!important}.brand-seal-new img{display:block;width:100%!important;height:auto!important;object-fit:contain!important;transform:none!important;opacity:1!important}.brand-signature:has(.brand-seal-new){flex-wrap:wrap;gap:20px}.brand-wordmark{white-space:nowrap}@media(max-width:600px){.brand-icon{width:36px;height:36px}.brand-seal-new{width:240px!important}}

.dice-brand-art,.brand-seal-new img{mask-image:radial-gradient(ellipse 64% 64% at 50% 50%,#000 60%,transparent 100%)}

/* Compact bilingual signature: Chinese first, locally hosted script beneath. */
@font-face{font-family:JulieScript;src:url('brand/parisienne-regular.ttf') format('truetype');font-display:swap;font-style:normal;font-weight:400}
.brand-with-logo .brand-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.15}
.brand-with-logo .brand-name-zh{display:block;font-family:var(--sans),sans-serif;font-size:15px;font-weight:500;letter-spacing:.18em;margin:0;color:#493352}
.brand-with-logo .brand-name-en{display:block;font-family:JulieScript,'Snell Roundhand',cursive;font-size:27px;font-weight:400;letter-spacing:0;line-height:1.05;margin:0;color:#654571}
@media(max-width:600px){.brand-with-logo .brand-name-zh{font-size:13px}.brand-with-logo .brand-name-en{font-size:24px}}

/* Extended calligraphic wordmark, revision 2. */
@font-face{font-family:JulieExtended;src:url('brand/pinyon-script-regular.ttf') format('truetype');font-display:swap;font-style:normal;font-weight:400}
.brand-with-logo .brand-name-en{font-family:JulieExtended,'Snell Roundhand',cursive;font-size:32px;line-height:1.12;letter-spacing:.025em;transform:scaleX(1.08);transform-origin:left center;padding-right:10px}
.brand-with-logo .brand-wordmark{gap:4px;padding-right:10px}
@media(max-width:600px){.brand-with-logo .brand-name-en{font-size:29px}}

/* Header signature: single-line Chinese name centered beside the JS mark. */
.header .brand-with-logo,.dice-header .brand-with-logo{display:inline-flex;align-items:center;gap:12px}
.header .brand-with-logo .brand-wordmark,.dice-header .brand-with-logo .brand-wordmark{display:flex;flex-direction:row;align-items:center;gap:0;padding:0;line-height:1}
.header .brand-with-logo .brand-name-zh,.dice-header .brand-with-logo .brand-name-zh{margin:0;line-height:1.4;white-space:nowrap}
.header .brand-with-logo .brand-icon,.dice-header .brand-with-logo .brand-icon{display:block;flex-shrink:0}