/* Lunox · tarott.app — Velvet Nocturne design system */
:root{
  --ink:#0b0a16;
  --ink-2:#141129;
  --ink-3:#1d1838;
  --gold:#d8a44c;
  --gold-soft:#ecd3a2;
  --gold-pale:#fff5dc;
  --mist:#a9a3c9;
  --moon:#f4f0ff;
  --line:rgba(216,164,76,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background-color:var(--ink);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='50' cy='92' r='1'/%3E%3Ccircle cx='160' cy='34' r='1.4' fill='%23ffe9c4'/%3E%3Ccircle cx='256' cy='130' r='1'/%3E%3Ccircle cx='349' cy='50' r='1.2'/%3E%3Ccircle cx='386' cy='202' r='1' fill='%23ffe9c4'/%3E%3Ccircle cx='92' cy='269' r='1.3'/%3E%3Ccircle cx='197' cy='332' r='1'/%3E%3Ccircle cx='298' cy='286' r='1.2' fill='%23ffe9c4'/%3E%3Ccircle cx='25' cy='370' r='1'/%3E%3Ccircle cx='231' cy='218' r='1'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 800px at 80% 0%, #241d4b 0%, transparent 60%),
    radial-gradient(900px 700px at 0% 30%, #1a1436 0%, transparent 55%);
  color:var(--moon);
  font-family:"Jost",system-ui,sans-serif;
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--ink)}
img{max-width:100%;height:auto}
a{color:var(--gold-soft)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:10px 18px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
h1,h2,h3,blockquote{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500}

/* ---------- nav ---------- */
nav[aria-label="Main"]{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(11,10,22,.78);border-bottom:1px solid rgba(216,164,76,.14)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gold-pale)}
.brand img{width:34px;height:34px;border-radius:8px;box-shadow:0 0 0 1px rgba(216,164,76,.4)}
.brand span{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;letter-spacing:.06em}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--mist);text-decoration:none;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.nav-links a:hover,.nav-links a:focus{color:var(--gold-soft)}
.nav-cta{border:1px solid var(--gold);color:var(--gold-soft)!important;padding:8px 18px;border-radius:100px;transition:.3s}
.nav-cta:hover{background:var(--gold);color:var(--ink)!important}
@media(max-width:840px){
  .nav-links > a:not(.nav-cta){display:none}
  .lang-menu summary{padding:7px 10px}
}

/* ---------- shared bits ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--gold);font-size:13px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:22px;font-family:"Jost",sans-serif;font-weight:400}
.eyebrow:before,.eyebrow:after{content:"";height:1px;width:36px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow:after{background:linear-gradient(90deg,var(--gold),transparent)}
h1{font-size:clamp(42px,6vw,72px);line-height:1.05;letter-spacing:.01em}
h1 em{font-style:italic;color:var(--gold-soft)}
h2{font-size:clamp(32px,4vw,50px);line-height:1.12}
h2 em{font-style:italic;color:var(--gold-soft)}
.lead,.lead-center{font-size:19px;color:var(--mist);max-width:56ch}
.lead-center{margin:18px auto 36px;text-align:center}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.badge-link img{display:block;width:163px;height:54px;transition:transform .3s}
.badge-link:hover img{transform:translateY(-2px)}
.foot-brand .badge-link img,footer .badge-link img{width:120px;height:40px;margin-top:14px}
.proof{display:flex;flex-direction:column;gap:2px}
.stars-row{color:var(--gold);letter-spacing:3px;font-size:15px}
.stars-row.big{font-size:22px;letter-spacing:6px}
.proof small{color:var(--mist);font-size:13px}
.ghost-btn{display:inline-block;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);text-decoration:none;
  border:1px solid var(--gold);padding:14px 34px;border-radius:100px;transition:.3s;text-align:center}
.ghost-btn:hover{background:var(--gold);color:var(--ink)}
section{padding:100px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 60px}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head p{color:var(--mist);margin-top:16px;font-size:17px}

/* ---------- hero ---------- */
.hero{position:relative;padding:88px 0 110px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .lead{margin:24px 0 0}
.fan{position:relative;height:540px}
.fan a{position:absolute;display:block;border-radius:14px}
.fan .card{border-radius:14px;display:block;width:250px;height:auto;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(216,164,76,.35),0 0 40px rgba(216,164,76,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fan a:nth-of-type(1){left:4%;top:11%;transform:rotate(-11deg);z-index:1}
.fan a:nth-of-type(2){left:29%;top:2%;z-index:3}
.fan a:nth-of-type(2) .card{width:270px}
.fan a:nth-of-type(3){left:56%;top:12%;transform:rotate(12deg);z-index:2}
.fan:hover a:nth-of-type(1){transform:rotate(-15deg) translate(-12px,-8px)}
.fan:hover a:nth-of-type(2){transform:translateY(-14px)}
.fan:hover a:nth-of-type(3){transform:rotate(16deg) translate(12px,-8px)}
.fan .halo{position:absolute;left:50%;top:44%;width:520px;height:520px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(216,164,76,.14) 0%,transparent 60%);pointer-events:none}
@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding:56px 0 40px;text-align:center}
  .hero .lead{margin-inline:auto}
  .cta-row{justify-content:center}
  /* children are absolutely positioned, so the fan needs a definite width */
  .fan{height:420px;width:min(100%,440px);margin:0 auto;transform:scale(.8);transform-origin:top center}
}

/* ---------- ribbon ---------- */
.ribbon{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(216,164,76,.05),rgba(216,164,76,.02));overflow:hidden;padding:18px 0}
.ribbon-track{display:flex;gap:56px;width:max-content;animation:slide 36s linear infinite}
.ribbon span{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;font-style:italic;color:var(--gold-soft);white-space:nowrap;display:flex;align-items:center;gap:56px}
.ribbon span:after{content:"✦";font-style:normal;font-size:12px;color:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none}}

/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.feature{background:var(--ink-2);padding:44px 36px;transition:background .4s}
.feature:hover{background:var(--ink-3)}
.feature .sigil{font-size:26px;color:var(--gold);margin-bottom:18px;display:block}
.feature h3{font-size:26px;margin-bottom:10px}
.feature p{color:var(--mist);font-size:15px}
@media(max-width:880px){.features{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.features{grid-template-columns:1fr}}

/* ---------- card grids ---------- */
.arcana-row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px;margin-top:34px}
.arc-card{position:relative;border-radius:12px;overflow:hidden;text-decoration:none;display:block;
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(216,164,76,.25);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.arc-card img{width:100%;display:block;aspect-ratio:299/500;object-fit:cover}
.arc-name{position:absolute;inset-inline:0;bottom:0;padding:40px 12px 12px;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(11,10,22,.92));
  font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;color:var(--gold-pale);letter-spacing:.04em}
.arc-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px var(--gold),0 0 44px rgba(216,164,76,.18)}
.more{display:flex;justify-content:center;margin-top:44px}
@media(max-width:880px){.arcana-row{grid-template-columns:repeat(3,1fr)}.arcana-row .arc-card:nth-child(n+4){display:none}}
@media(max-width:560px){.arcana-row{grid-template-columns:repeat(2,1fr)}.arcana-row .arc-card:nth-child(3){display:none}
  .cards-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;counter-reset:step}
.step{text-align:center;padding-top:8px}
.step:before{counter-increment:step;content:counter(step,upper-roman);
  font-family:"Cormorant Garamond",Georgia,serif;font-size:64px;color:transparent;
  -webkit-text-stroke:1px var(--gold);display:block;margin-bottom:14px;opacity:.85}
.step h3{font-size:24px;margin-bottom:8px}
.step p{color:var(--mist);font-size:15px;max-width:30ch;margin:0 auto}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:36px}}

/* ---------- altar / quote / cta panel ---------- */
.altar{border:1px solid var(--line);border-radius:20px;padding:56px 44px;text-align:center;
  background:radial-gradient(600px 300px at 50% 0%,rgba(216,164,76,.09),transparent 70%),var(--ink-2)}
.altar blockquote{font-size:clamp(24px,3vw,34px);font-style:italic;line-height:1.35;max-width:26ch;margin:22px auto 18px;color:var(--gold-pale)}
.altar figcaption{color:var(--mist);font-size:14px;letter-spacing:.18em;text-transform:uppercase}
.altar h2{font-size:clamp(26px,3vw,38px)}
.altar p{color:var(--mist);margin-top:12px}
.altar .cta-row{justify-content:center}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:26px 4px;font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;color:var(--gold-pale)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"✦";color:var(--gold);font-size:13px;transition:transform .4s;flex:none}
.faq details[open] summary:after{transform:rotate(180deg) scale(1.2)}
.faq details p{padding:0 4px 26px;color:var(--mist);font-size:15.5px;max-width:64ch}

/* how-to variant: numbered lessons */
.howto{counter-reset:lesson}
.howto summary{gap:18px;justify-content:flex-start}
.howto summary:before{counter-increment:lesson;content:"0" counter(lesson);
  font-family:"Jost",sans-serif;font-size:13px;letter-spacing:.14em;color:var(--gold);
  border:1px solid var(--line);border-radius:100px;padding:5px 12px;flex:none}
.howto summary:after{margin-left:auto}
.howto details p{padding-left:66px}
@media(max-width:560px){.howto details p{padding-left:4px}}

/* ---------- finale ---------- */
.finale{text-align:center;position:relative;padding:120px 0 140px}
.finale.small{padding:60px 0 110px}
.finale .moon-disc{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(244,240,255,.10),rgba(244,240,255,.02) 55%,transparent 70%);
  box-shadow:0 0 120px rgba(216,164,76,.10);pointer-events:none}
.finale h2{font-size:clamp(36px,5vw,60px)}
.finale .cta-row{justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;background:rgba(11,10,22,.85)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr 1fr;gap:36px;margin-bottom:40px}
.foot-h{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-family:"Jost",sans-serif;font-weight:400}
footer a{display:block;color:var(--mist);text-decoration:none;font-size:14px;padding:4px 0}
footer a:hover{color:var(--gold-soft)}
footer .brand{display:inline-flex}
.foot-brand p{color:var(--mist);font-size:14px;max-width:34ch;margin-top:12px}
/* ---------- header language dropdown ---------- */
.lang-menu{position:relative}
.lang-menu summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  color:var(--mist);font-size:13px;letter-spacing:.14em;padding:8px 12px;
  border:1px solid rgba(216,164,76,.25);border-radius:100px;transition:.3s;user-select:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover{color:var(--gold-soft);border-color:var(--gold)}
.lang-menu[open] summary{color:var(--gold-soft);border-color:var(--gold)}
.lang-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:150px;z-index:60;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 20px 44px rgba(0,0,0,.55)}
.lang-panel a{display:block;padding:9px 14px;border-radius:9px;color:var(--mist);
  text-decoration:none;font-size:14px;letter-spacing:.04em;text-transform:none}
.lang-panel a:hover{background:var(--ink-3);color:var(--gold-soft)}
.lang-panel a[aria-current="true"]{color:var(--gold-soft)}
.lang-panel a[aria-current="true"]:after{content:"✦";color:var(--gold);font-size:10px;margin-left:8px}
.legal{border-top:1px solid rgba(216,164,76,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#6f6a8f;font-size:13px}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(11,10,22,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.sticky-cta a{display:flex;justify-content:center;align-items:center;background:var(--gold);color:var(--ink);
  text-decoration:none;font-weight:500;font-size:16px;padding:15px;border-radius:100px;letter-spacing:.04em}
@media(max-width:760px){.sticky-cta{display:block} footer{padding-bottom:110px}}

/* ---------- subpage scaffolding ---------- */
.page-head{padding:64px 24px 20px;text-align:left}
.page-head h1{font-size:clamp(38px,5vw,60px)}
.page-head .lead{margin-top:18px}
.crumbs{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:26px}
.crumbs a{color:var(--gold-soft);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--gold);font-size:10px;margin:0 6px}
.card-group{padding:54px 0}
.card-group h2{font-size:clamp(28px,3.4vw,40px)}
.group-desc{color:var(--mist);max-width:62ch;margin-top:8px}

/* ---------- card detail ---------- */
.card-hero{padding-top:64px}
.card-hero-grid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:56px;align-items:start;margin-top:10px}
.card-figure img{border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(216,164,76,.35),0 0 50px rgba(216,164,76,.10)}
.card-figure{position:sticky;top:90px}
.card-intro h1{font-size:clamp(40px,5vw,64px);margin-bottom:12px}
.chips{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.chips li{border:1px solid var(--line);color:var(--gold-soft);border-radius:100px;padding:6px 16px;font-size:13.5px;letter-spacing:.06em}
.meaning-block{padding:26px 0 4px}
.meaning-block h2{font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-family:"Jost",sans-serif;font-weight:400;margin-bottom:10px}
.meaning-block p{font-size:17.5px;color:var(--moon);max-width:58ch}
.meaning-block .meaning-lead{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;line-height:1.4;color:var(--gold-pale)}
.meaning-block.shadow p{color:var(--mist)}
.meaning-block .prompt{font-style:italic;color:var(--gold-soft)}
.in-app-note{margin-top:30px;padding:14px 18px;border-left:2px solid var(--gold);color:var(--mist);font-size:14px;background:rgba(216,164,76,.05)}
.card-cta{padding:70px 24px 20px}
.card-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;padding:56px 24px 90px}
.card-nav-link{display:flex;flex-direction:column;text-decoration:none;color:var(--gold-pale);gap:2px}
.card-nav-link small{color:var(--mist);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.card-nav-link span{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px}
.card-nav-link:hover span{color:var(--gold-soft)}
.card-nav-link.next{text-align:right;align-items:flex-end}
@media(max-width:820px){
  .card-hero-grid{grid-template-columns:1fr;gap:34px}
  .card-figure{position:static;max-width:300px;margin:0 auto}
  .card-nav{grid-template-columns:1fr 1fr}
  .card-nav .ghost-btn{grid-column:1/-1;order:3}
}

/* ---------- blog ---------- */
.posts-list{display:grid;gap:26px;padding:40px 24px 80px;max-width:900px}
.post-card{display:grid;grid-template-columns:150px 1fr;gap:26px;text-decoration:none;color:var(--moon);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--ink-2);transition:transform .35s,box-shadow .35s}
.post-card img{width:150px;height:100%;object-fit:cover}
.post-card-body{padding:26px 26px 26px 0}
.post-card time{color:var(--gold);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.post-card h2{font-size:clamp(22px,2.6vw,30px);margin:8px 0 10px;line-height:1.2}
.post-card p{color:var(--mist);font-size:15px}
.post-more{display:inline-block;margin-top:14px;color:var(--gold-soft);font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.post-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.5)}
@media(max-width:640px){.post-card{grid-template-columns:1fr}.post-card img{width:100%;height:150px;object-fit:cover;object-position:center 20%}.post-card-body{padding:22px}}

.post-hero{padding:26px 24px 6px}
.post-hero img{max-width:280px;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(216,164,76,.3);margin:0 auto;display:block}
.post-meta{color:var(--mist);font-size:14px;letter-spacing:.08em;margin-top:14px}
.post-body{padding-top:30px;padding-bottom:20px}
.post-body p{margin:0 0 22px;font-size:17.5px;color:var(--moon)}
.post-body h2{font-size:clamp(26px,3vw,36px);margin:44px 0 16px;color:var(--gold-pale)}
.post-body h3{font-size:22px;margin:30px 0 12px}
.post-body ul,.post-body ol{margin:0 0 22px 22px;color:var(--moon)}
.post-body li{margin-bottom:10px;font-size:16.5px}
.post-body a{color:var(--gold-soft)}
.post-body em{color:var(--gold-soft)}
.post-body blockquote{border-left:2px solid var(--gold);padding:6px 0 6px 22px;font-size:22px;font-style:italic;color:var(--gold-pale);margin:0 0 22px}
.more-posts{padding:40px 24px 100px}
.more-post{display:block;text-decoration:none;padding:18px 4px;border-bottom:1px solid var(--line)}
.more-post time{display:block;color:var(--gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.more-post span{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;color:var(--gold-pale)}
.more-post:hover span{color:var(--gold-soft)}

/* ---------- reveal (only when JS present) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- focus ---------- */
a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}