/* ══════════════════════════════════════════════════════════════
   STELLAR SCOPIA · YOUR DESTINY, OUR STARS
   สองโลกในหน้าเดียว
   NYLA (ราตรี · เงินแสงจันทร์ · ม่วงลึก) ⇄ LYRA (รุ่งอรุณ · ทองคำเปลว · ฟ้าอ่อน)
   ทั้งหน้าเป็นโลกเดียวของสองพี่น้อง ปิดท้ายด้วยชั้นวางคอนเทนต์พรีเมียมที่คิดเงินผ่านบิลมือถือ
   ไม่มีนีออน ไม่มีไซเบอร์ — ใช้ผ้า หมึก ทองคำเปลว และแสงจริงจากภาพตัวละคร
   ══════════════════════════════════════════════════════════ */

:root, [data-oracle="lyra"] {
  --paper:   #F5EFE3;
  --paper-2: #FBF7EF;
  --card:    #FFFDF8;
  --rule:    #E1D2B8;
  --rule-soft:#EEE4D2;
  --ink:     #2A2431;
  --ink-2:   #776C72;
  --ink-3:   #A99C90;
  --leaf:    #B98D3C;          /* ทองคำเปลว */
  --hue:     #8FB8DE;          /* ฟ้ารุ่งอรุณ */
  --grain:   .045;
  --markop:  .5;
  --veil:    255,253,248;
}
[data-oracle="nyla"] {
  --paper:   #0C0B14;
  --paper-2: #13111E;
  --card:    #191627;
  --rule:    #322D4C;
  --rule-soft:#221E36;
  --ink:     #E8E5F2;
  --ink-2:   #9F99BC;
  --ink-3:   #6B6589;
  --leaf:    #BFC6DD;          /* เงินแสงจันทร์ */
  --hue:     #6E5FA6;          /* ม่วงลึก */
  --grain:   .075;
  --markop:  .42;
  --veil:    12,11,20;
}

:root {
  --w: min(1120px, 92vw);
  --e: cubic-bezier(.65,0,.35,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Noto Serif Thai", Georgia, serif;
  font-size: 16.5px; line-height: 1.85; overflow-x: hidden;
  transition: background-color 1s var(--e), color 1s var(--e);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  opacity: var(--grain); transition: opacity 1s var(--e);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
::selection { background: var(--hue); color: var(--paper); }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

.display { font-family: "Cormorant Garamond", "Noto Serif Thai", serif; font-weight: 300; line-height: 1.2; }
.thdisplay { font-family: "Noto Serif Thai", serif; font-weight: 300; }
.eyebrow {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3);
  transition: color 1s var(--e);
}
.num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.wrap { width: var(--w); margin-inline: auto; }

/* ══ HEADER ══ */
header.bar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(var(--veil), .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color 1s var(--e), border-color 1s var(--e);
}
.bar-in { width: var(--w); margin-inline: auto; display: flex;
  align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.mark { display: flex; align-items: baseline; gap: 11px; }
.mark b { font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: 22px; letter-spacing: .13em; }
.mark span { font-size: 10.5px; letter-spacing: .2em; color: var(--ink-3);
  font-family: "IBM Plex Mono", monospace; text-transform: uppercase; }
.purse { display: flex; align-items: center; gap: 7px; border: 1px solid var(--rule);
  padding: 6px 14px; font-size: 13px; color: var(--ink-2);
  transition: border-color 1s var(--e), color 1s var(--e); }
.purse .num { font-size: 14px; color: var(--ink); font-weight: 600; }
.purse i { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf);
  transition: background-color 1s var(--e); }

/* ══ ★ HERO : ผืนภาพสองซีก ══ */
.split { position: relative; display: flex; height: min(62vh, 560px); overflow: hidden;
  background: var(--paper-2); transition: background-color 1s var(--e); }
.half { position: relative; overflow: hidden; transition: flex-grow 1.2s var(--e); }
.half img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter 1.2s var(--e), transform 1.6s var(--e), opacity 1.2s var(--e); }
.half.n img { object-position: 52% 12%; }
.half.l img { object-position: 48% 10%; }
.half::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--veil),0) 42%, rgba(var(--veil),.55) 76%, rgba(var(--veil),1) 100%);
  transition: background 1s var(--e);
}
/* ซีกที่ไม่ได้ทำหน้าที่ ถอยไปเป็นเงา */
[data-oracle="lyra"] .half.n { flex: 34; }
[data-oracle="lyra"] .half.l { flex: 66; }
[data-oracle="nyla"] .half.n { flex: 66; }
[data-oracle="nyla"] .half.l { flex: 34; }
[data-oracle="lyra"] .half.n img { filter: grayscale(.55) brightness(.5); opacity: .75; }
[data-oracle="nyla"] .half.l img { filter: grayscale(.45) brightness(.72); opacity: .7; }

.half .tag {
  position: absolute; top: 22px; z-index: 3;
  font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: .34em;
  color: #fff; opacity: .55; transition: opacity 1s var(--e);
}
.half.n .tag { left: 22px; }
.half.l .tag { right: 22px; color: #2A2431; opacity: .5; }

/* เส้นรอยต่อ + จานสุริยุปราคา */
.seamline { position: absolute; top: 0; bottom: 0; width: 1px; z-index: 4;
  background: linear-gradient(to bottom, transparent, var(--leaf) 22%, var(--leaf) 74%, transparent);
  opacity: .55; transition: left 1.2s var(--e), background 1s var(--e); }
[data-oracle="lyra"] .seamline { left: 34%; }
[data-oracle="nyla"] .seamline { left: 66%; }

.eclipse { position: absolute; z-index: 6; top: 43%; transform: translate(-50%,-50%);
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  width: 120px; height: 120px; overflow: visible;
  transition: left 1.3s var(--e); }
[data-oracle="lyra"] .eclipse { left: 34%; }
[data-oracle="nyla"] .eclipse { left: 66%; }

/* แฉกรัศมี — เส้นสลักบาง ๆ ไม่ใช่แสงเรือง */
.rays { position: absolute; inset: -30px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(236,186,100,.9) 0 .9deg, rgba(236,186,100,0) .9deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 58%, #000 92%, transparent 97%);
          mask: radial-gradient(circle, transparent 0 55%, #000 58%, #000 92%, transparent 97%);
  animation: spin 110s linear infinite;
  transition: opacity 1.3s var(--e), transform 1s var(--e); }
@keyframes spin { to { transform: rotate(360deg); } }
.eclipse:hover .rays { transform: scale(1.05); }
[data-oracle="nyla"] .rays { opacity: .22; }

/* คราวน์รอบเงามืด — เห็นเฉพาะตอนบังเต็มดวง */
.corona { position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 0 58%,
    rgba(228,232,246,.5) 61%, rgba(228,232,246,.07) 76%, transparent 84%);
  opacity: 0; transition: opacity 1.3s var(--e); }
[data-oracle="nyla"] .corona { opacity: 1; }

.e-stage { position: absolute; inset: 0;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.42)); }

.sun { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 37% 33%,
    #F6DEA6 0%, #EBBE6B 38%, #D79A45 70%, #B0742F 100%);
  box-shadow: inset 0 0 14px rgba(150,95,30,.35);
  transform: translateX(0); z-index: 3;
  transition: transform 1.4s var(--e), z-index 0s .7s; }
/* ราตรี : จันทร์เลื่อนขึ้นหน้า บังอาทิตย์ไว้ 95% เหลือเสี้ยวทองด้านขวา */
[data-oracle="nyla"] .sun { transform: translateX(5%); z-index: 2; }

.moon { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 66% 36%,
    #F2F2F7 0%, #DADCE6 38%, #ADAFBE 72%, #7F8192 100%);
  box-shadow: inset 9px 6px 18px rgba(66,68,84,.5),
              inset -4px -4px 10px rgba(255,255,255,.22);
  transform: translateX(-5%); z-index: 2;
  transition: transform 1.4s var(--e), z-index 0s .7s; }
[data-oracle="nyla"] .moon { transform: translateX(0); z-index: 3; }
.cr { position: absolute; border-radius: 50%; background: rgba(128,130,148,.26);
  box-shadow: inset 2px 1px 3px rgba(84,86,102,.5), inset -1px -1px 1px rgba(255,255,255,.2); }
.cr.a { top: 24%; left: 20%; width: 21%; height: 21%; }
.cr.b { top: 55%; left: 46%; width: 15%; height: 15%; }
.cr.c { top: 62%; left: 26%; width: 13%; height: 13%; }
.cr.d { top: 36%; left: 52%; width: 9%; height: 9%; }
.cr.e { top: 16%; left: 44%; width: 7%;  height: 7%;  }

.e-cap { position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%);
  white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 9.5px;
  letter-spacing: .2em; color: rgba(255,255,255,.78);
  text-shadow: 0 1px 7px rgba(0,0,0,.75); }

/* ══ ชื่อโอราเคิล + วงเวทมนตร์ ══ */
.naming { position: relative; text-align: center; padding: 40px 0 8px; }
.circle-mark {
  position: absolute; left: 50%; top: 50%; width: 460px; height: 460px;
  transform: translate(-50%,-54%); pointer-events: none;
  object-fit: contain; opacity: var(--markop);
  animation: turn 150s linear infinite;
  transition: opacity 1s var(--e);
}
@keyframes turn { to { transform: translate(-50%,-54%) rotate(360deg); } }
.naming > *:not(.circle-mark) { position: relative; z-index: 2; }
.oname { margin: 0; font-size: clamp(50px, 11vw, 96px); letter-spacing: .16em;
  text-indent: .16em; }
.orole { margin: 4px 0 0; font-size: 13px; letter-spacing: .1em; color: var(--ink-2);
  transition: color 1s var(--e); }
.oquote { margin: 22px auto 0; max-width: 26ch; font-size: clamp(17px, 2.5vw, 20px);
  font-weight: 300; line-height: 1.8; }
.oquote em { font-style: normal; color: var(--leaf); transition: color 1s var(--e); }
.osub { margin: 12px 0 0; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 15px; color: var(--ink-3); transition: color 1s var(--e); }

/* ══ แผ่นคำอ่าน ══ */
.leaf { margin: 42px auto 0; max-width: 690px; background: var(--card);
  border: 1px solid var(--rule); padding: 0 clamp(18px,4vw,40px) 28px;
  transition: background-color 1s var(--e), border-color 1s var(--e); }
.leaf-head { display: flex; align-items: center; gap: 14px; padding: 18px 0 16px;
  border-bottom: 1px solid var(--rule-soft); transition: border-color 1s var(--e); }
.chibi { width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
  object-position: 50% 30%; flex: none; border: 1px solid var(--rule);
  transition: border-color 1s var(--e), opacity .5s; }
.leaf-head h4 { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: 19px; letter-spacing: .14em; }
.leaf-head p { margin: 0; font-size: 12px; color: var(--ink-3); transition: color 1s var(--e); }
.leaf-head .date { margin-left: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 24px; }
.chip { appearance: none; cursor: pointer; background: transparent; text-align: left;
  font-family: "Noto Serif Thai", serif; font-size: 13.5px; padding: 7px 14px 6px;
  color: var(--ink-2); border: 1px solid var(--rule); line-height: 1.35;
  transition: color .4s, border-color .4s, background-color .4s; }
.chip small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 8.5px;
  letter-spacing: .2em; opacity: .62; margin-top: 1px; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.reading { font-size: 17px; font-weight: 300; min-height: 130px; }
.reading p { margin: 0 0 14px; }
.reading .fade { animation: rise .65s var(--e) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.leaf-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  transition: border-color 1s var(--e); }
.linkish { appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font-family: "Noto Serif Thai", serif; font-size: 14px; color: var(--leaf);
  border-bottom: 1px solid currentColor; transition: color 1s var(--e), opacity .3s; }
.linkish:hover { opacity: .68; }

/* ══ รอยต่อสองโลก ══ */
.seam { width: var(--w); margin: 0 auto; padding: 62px 0 0; display: flex;
  align-items: center; gap: 18px; }
.seam hr { flex: 1; height: 0; border: 0; border-top: 1px solid var(--rule); margin: 0;
  transition: border-color 1s var(--e); }
.seam span { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .22em;
  color: var(--ink-3); text-transform: uppercase; transition: color 1s var(--e); }

/* ══ ภารกิจ — แถบบาง อยู่ในโลกโอราเคิล ══ */
.tasks { width: var(--w); margin: 30px auto 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px 28px; padding: 14px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transition: border-color 1s var(--e); }
.task { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 300;
  color: var(--ink-3); transition: color .5s; }
.tick { width: 13px; height: 13px; flex: none; border: 1px solid var(--ink-3);
  border-radius: 50%; transition: background-color .5s, border-color .5s; }
.task.done { color: var(--ink); }
.task.done .tick { background: var(--leaf); border-color: var(--leaf); }
.tasks .right { margin-left: auto; display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: var(--ink-2); transition: color 1s var(--e); }
.tasks .right .num { font-size: 17px; color: var(--ink); font-weight: 600; }

/* ══ ศาสตร์ของสองพี่น้อง ══ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.opanel { border: 1px solid var(--rule); background: var(--card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: opacity 1s var(--e), border-color 1s var(--e), background-color 1s var(--e); }
.ocase { background: var(--paper-2); border-bottom: 1px solid var(--rule);
  padding: 18px; display: grid; place-items: center; min-height: 360px;
  transition: background-color 1s var(--e), border-color 1s var(--e); }
.opic { max-width: 100%; max-height: 324px; width: auto; object-fit: contain; display: block;
  transition: filter 1s var(--e); }
[data-oracle="lyra"] .opanel.n, [data-oracle="nyla"] .opanel.l { opacity: .48; }
[data-oracle="lyra"] .opanel.n .opic { filter: grayscale(.6) brightness(.6); }
[data-oracle="nyla"] .opanel.l .opic { filter: grayscale(.5) brightness(.78); }
.obody { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.obody h4 { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: 27px; letter-spacing: .2em; }
.obody .en { margin: 1px 0 0; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 14px; color: var(--ink-3); transition: color 1s var(--e); }
.elems { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 15px 0 0; }
.elems li { font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: .2em;
  border: 1px solid var(--rule); padding: 3px 8px; color: var(--ink-3);
  transition: border-color 1s var(--e), color 1s var(--e); }
.svc { list-style: none; padding: 0; margin: 16px 0 0; font-size: 13.5px; font-weight: 300; }
.svc li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); line-height: 1.6;
  transition: border-color 1s var(--e); }
.svc li b { font-weight: 500; }
.ocall { margin: 18px 0 0; }

/* ══ การ์ดคอนเทนต์พรีเมียม ══ */
.prem { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; }
.pcard { border: 1px solid var(--rule); background: var(--card); padding: 20px 20px 22px;
  display: flex; flex-direction: column;
  transition: background-color 1s var(--e), border-color 1s var(--e), transform .3s var(--e); }
.pcard:hover { transform: translateY(-3px); }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pface { width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  object-position: 50% 28%; border: 1px solid var(--rule); flex: none;
  transition: border-color 1s var(--e); }
.pbadge { font-family: "IBM Plex Mono", monospace; font-size: 8.5px;
  letter-spacing: .2em; padding: 3px 9px; border: 1px solid var(--rule); color: var(--ink-3);
  transition: background-color .5s, color .5s, border-color .5s; }
[data-oracle="nyla"] .pbadge[data-o="nyla"],
[data-oracle="lyra"] .pbadge[data-o="lyra"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pcard h4 { margin: 14px 0 0; font-family: "Noto Serif Thai", serif; font-weight: 400;
  font-size: 19px; line-height: 1.4; }
.pdesc { margin: 8px 0 0; font-size: 13px; font-weight: 300; line-height: 1.7;
  color: var(--ink-2); transition: color 1s var(--e); }
.pget { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-soft);
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
  transition: border-color 1s var(--e), color 1s var(--e); }
.pfoot { margin-top: auto; padding-top: 18px; }
.pprice { display: flex; align-items: baseline; gap: 8px; }
.pprice .amt { font-family: "IBM Plex Mono", monospace; font-size: 25px; font-weight: 500; }
.pprice small { font-size: 11.5px; color: var(--ink-3); transition: color 1s var(--e); }
.pcta { width: 100%; margin-top: 12px; appearance: none; cursor: pointer;
  font-family: "Noto Serif Thai", serif; font-size: 13.5px; background: transparent;
  color: var(--ink); border: 1px solid var(--ink); padding: 10px 14px;
  transition: background-color .3s, color .3s, border-color 1s var(--e); }
.pcta:hover { background: var(--ink); color: var(--paper); }
.premnote { margin: 22px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.75;
  transition: color 1s var(--e); }

/* ══ TAROT ══ */
.section { width: var(--w); margin: 0 auto; padding: 66px 0 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sec-head h3 { margin: 6px 0 0; font-size: clamp(27px, 4vw, 36px); letter-spacing: .04em; }
.sec-head p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); max-width: 42ch;
  transition: color 1s var(--e); }
.spread { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; }
.tarot { perspective: 1200px; cursor: pointer; }
.tarot-in { position: relative; aspect-ratio: 3/5; transform-style: preserve-3d;
  transition: transform .9s var(--e); }
.tarot.flipped .tarot-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transition: background-color 1s var(--e), border-color 1s var(--e); }
.face.back { background: var(--paper-2); align-items: center; justify-content: center; overflow: hidden; }
.face.back img { width: 118%; opacity: .8;
  animation: turn 190s linear infinite; transform-origin: center; }
.face.front { transform: rotateY(180deg); background: var(--card); padding: 20px 18px;
  justify-content: space-between; }
.roman { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .2em;
  color: var(--leaf); transition: color 1s var(--e); }
.tname { font-family: "Noto Serif Thai", serif; font-weight: 300;
  font-size: clamp(18px,2.4vw,23px); margin: 10px 0 0; line-height: 1.35; }
.tsub { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 13px;
  color: var(--ink-3); margin: 3px 0 0; transition: color 1s var(--e); }
.tmean { font-size: 13.5px; font-weight: 300; color: var(--ink-2); line-height: 1.7;
  transition: color 1s var(--e); }
.tslot { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .2em;
  color: var(--ink-3); transition: color 1s var(--e); }

/* ══ ELYSA ══ */
.elysa { margin-top: 36px; border-top: 1px solid var(--leaf); border-bottom: 1px solid var(--rule);
  padding: 34px 0 32px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px;
  align-items: center; transition: border-color 1s var(--e); }
.elysa h3 { margin: 10px 0 0; font-size: clamp(28px,3.8vw,38px); letter-spacing: .18em; }
.elysa p { margin: 12px 0 0; font-size: 14.5px; font-weight: 300; color: var(--ink-2);
  max-width: 46ch; transition: color 1s var(--e); }
.price { text-align: right; }
.price .amt { font-family: "IBM Plex Mono", monospace; font-size: 34px; font-weight: 500; }
.price small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
  transition: color 1s var(--e); }
.btn-quiet { appearance: none; cursor: pointer; margin-top: 16px;
  font-family: "Noto Serif Thai", serif; font-size: 14.5px; background: var(--ink);
  color: var(--paper); border: 1px solid var(--ink); padding: 11px 26px;
  transition: background-color 1s var(--e), color 1s var(--e), opacity .25s; }
.btn-quiet:hover { opacity: .85; }

footer { width: var(--w); margin: 0 auto; padding: 46px 0 60px; font-size: 12px;
  color: var(--ink-3); line-height: 1.8; transition: color 1s var(--e); }
footer b { color: var(--ink-2); font-weight: 600; }
.ftagline { font-family: "Cormorant Garamond", serif; font-size: 15px; letter-spacing: .3em;
  color: var(--ink-2); margin: 0 0 18px; }

/* ══ SHEET ══ */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(10,9,16,.6);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--e); }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; z-index: 101; left: 50%; bottom: 0; transform: translate(-50%,100%);
  width: min(460px,100%); background: var(--card); border: 1px solid var(--rule);
  border-bottom: 0; padding: 26px 26px 30px;
  transition: transform .5s var(--e), background-color 1s var(--e); }
.sheet.on { transform: translate(-50%,0); }
.sheet h4 { font-family: "Noto Serif Thai", serif; font-weight: 300; font-size: 22px; margin: 12px 0 0; }
.sheet .rows { margin: 20px 0 0; border-top: 1px solid var(--rule-soft); }
.sheet .row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: 14px; color: var(--ink-2); }
.sheet .row b { color: var(--ink); font-weight: 600; }
.sheet .acts { display: flex; gap: 10px; margin-top: 22px; }
.sheet .acts .btn-quiet { flex: 1; margin: 0; text-align: center; }
.sheet .acts .alt { background: transparent; color: var(--ink); border-color: var(--rule); }
.sheet-note { font-size: 11.5px; color: var(--ink-3); margin: 14px 0 0; line-height: 1.65; }
.closex { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  display: grid; place-items: center; appearance: none; background: none; border: 0;
  cursor: pointer; color: var(--ink-2); font-size: 20px; }

#wipe { position: fixed; z-index: 95; pointer-events: none; border-radius: 50%;
  width: 10px; height: 10px; opacity: 0; }
#toast { position: fixed; z-index: 110; left: 50%; bottom: 26px; transform: translate(-50%,24px);
  background: var(--ink); color: var(--paper); font-family: "Mitr", sans-serif;
  font-size: 13px; padding: 10px 20px; border-radius: 999px; opacity: 0;
  transition: opacity .35s var(--e), transform .35s var(--e); }
#toast.on { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1000px) {
  .prem { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .split { height: 46vh; }
  .circle-mark { width: 310px; height: 310px; }
  .duo { grid-template-columns: 1fr; }
  .prem { grid-template-columns: 1fr; }
  .ocase { min-height: 300px; }
  .opic { max-height: 268px; }
  .spread { grid-template-columns: 1fr; gap: 12px; }
  .tarot-in { aspect-ratio: 16/7; }
  .face.back img { width: 60%; }
  .face.front { padding: 16px; }
  .elysa { grid-template-columns: 1fr; }
  .price { text-align: left; }
  .tasks .right { margin-left: 0; width: 100%; }
  .eclipse { width: 92px; height: 92px; }
  .rays { inset: -22px; }
  .corona { inset: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}