/* Yuniverse — site styles. Tokens live in tokens.css (the reskin point). No inline styles anywhere (strict CSP). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip;background: var(--night); color: var(--ink); font: 400 var(--t-m)/1.6 var(--ui); text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--eye); outline-offset: 3px; border-radius: 6px; }   /* the cat is watching */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: var(--ink); color: var(--night); border-radius: var(--r-pill); }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.4rem; border-radius: var(--r-pill);
  font: 600 var(--t-s)/1 var(--ui); letter-spacing: .01em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .3s var(--spring); }
.btn--go { background: var(--ember); color: #fff; }
.btn--go:hover { background: var(--ember-2); transform: translateY(-2px); }
.btn--ghost { color: var(--ink); border-color: var(--line-2); background: rgba(9, 7, 13, .35); }
.btn--ghost:hover { border-color: var(--silver-dim); }

/* ---------- header ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.top__in { display: flex; align-items: center; gap: 1.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__cat { width: 34px; height: auto; }
.brand__word { width: 150px; height: auto; }
.nav { display: none; gap: 1.6rem; margin-left: auto; font-size: var(--t-s); }
.nav a { text-decoration: none; color: var(--ink-dim); padding: .4rem 0; }
.nav a:hover { color: var(--ink); }
.top .btn { margin-left: auto; min-height: 42px; padding: .6rem 1.1rem; }
@media (min-width: 960px) { .nav { display: flex; } .top .btn { margin-left: 0; } }

/* ---------- hero: the real sky ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; cursor: grab; touch-action: none; }
.hero__sky:active { cursor: grabbing; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--night) 8%, rgba(9, 7, 13, .7) 45%, transparent); }
.hero__in { display: grid; gap: 2rem; padding-bottom: clamp(1.5rem, 5vh, 3.5rem); pointer-events: none; }
.hero__in > * { pointer-events: auto; }
.hero h1 { font: 400 var(--t-hero)/.98 var(--display); letter-spacing: -.02em; max-width: 13ch; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero__lead { max-width: 46ch; color: var(--ink-dim); font-size: var(--t-l); margin-top: 1.1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero__side { display: grid; gap: 1rem; align-content: end; }
@media (min-width: 960px) { .hero__in { grid-template-columns: 1fr minmax(300px, 360px); align-items: end; } }
/* phones: the sky owns the top of the screen, the words come after it */
@media (max-width: 959px) {
  .hero { min-height: 0; padding-top: 56svh; }
  .hero__sky { inset: 0 0 auto 0; height: 76svh; }
  .hero::after { inset: 46svh 0 auto 0; height: 30svh; background: linear-gradient(to bottom, transparent, rgba(9, 7, 13, .75) 45%, var(--night)); }
  .top .btn { white-space: nowrap; min-height: 40px; padding: .5rem .9rem; font-size: var(--t-xs); }
  .brand__word { width: 118px; }
}

/* the lens switch: same sky, two ways of reading it */
.lens { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-pill); background: rgba(20, 15, 28, .78); border: 1px solid var(--line-2); position: relative; }
.lens input { position: absolute; opacity: 0; pointer-events: none; }
.lens label { position: relative; z-index: 1; display: grid; gap: .05rem; justify-items: center; min-height: 48px; padding: .45rem 1.1rem; border-radius: var(--r-pill); cursor: pointer; font-size: var(--t-xs); color: var(--ink-dim); transition: color .3s; }
.lens label b { font: 600 var(--t-s)/1.2 var(--ui); }
.lens__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--dusk-2); border: 1px solid var(--silver-dim); transition: transform .5s var(--ease), border-color .5s; }
.lens:has(#lens-story:checked) .lens__thumb { transform: translateX(100%); border-color: var(--gold-dim); }
.lens:has(#lens-sky:checked) label[for="lens-sky"], .lens:has(#lens-story:checked) label[for="lens-story"] { color: var(--ink); }
.lens:has(#lens-sky:checked) label[for="lens-sky"] b { color: var(--silver); }
.lens:has(#lens-story:checked) label[for="lens-story"] b { color: var(--gold); }
.lens:has(input:focus-visible) { outline: 2px solid var(--eye); outline-offset: 3px; }

/* the readout: measured facts, monospace numbers only */
.readout { padding: 1rem 1.1rem; border-radius: var(--r); background: rgba(20, 15, 28, .72); border: 1px solid var(--line); font-size: var(--t-s); }
.readout__place { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.readout__place b { font-weight: 600; }
.readout__place button { background: none; border: 0; color: var(--silver); font: 600 var(--t-xs)/1 var(--ui); cursor: pointer; padding: .5rem 0; min-height: 40px; text-decoration: underline; text-underline-offset: 3px; }
.readout__when { color: var(--ink-dim); font: var(--t-xs)/1.5 var(--data); margin-top: .2rem; }
.readout__live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--eye); margin-right: .45rem; vertical-align: middle; animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
.readout dl { margin: .8rem 0 0; display: grid; gap: .35rem; }
.readout dl div { display: flex; justify-content: space-between; gap: 1rem; }
.readout dt { color: var(--ink-dim); }
.readout dd { margin: 0; font: var(--t-xs)/1.6 var(--data); color: var(--silver); text-align: right; }
.readout dd i { font: italic var(--t-s)/1.4 var(--story); color: var(--gold); }
.readout__note { margin-top: .7rem; color: var(--ink-faint); font-size: var(--t-xs); }
[data-lens="sky"] .readout dd i, [data-lens="story"] .readout dd span { display: none; }

/* the guide only appears in the Story lens: it belongs to the told side of the sky */
/* she climbs onto the lens switch when the Story lens is on */
.hero__side { position: relative; }
.hero__side > * { position: relative; z-index: 1; }
.hero__side > .guide { position: absolute; z-index: 0; right: 1.2rem; bottom: calc(100% - 1.6rem); width: clamp(84px, 9vw, 120px); height: auto; opacity: 0; transform: translateY(40%) scale(.85); transform-origin: 50% 100%;
  transition: transform .8s var(--spring), opacity .4s; pointer-events: none; }
[data-lens="story"] .hero__side > .guide { opacity: 1; transform: none; }

/* ---------- chapters ---------- */
.chapter { padding: clamp(5rem, 14vw, 10rem) 0; position: relative; }
.chapter__q { font: italic 400 var(--t-2xl)/1.05 var(--story); max-width: 18ch; }
.chapter__q span { display: block; }
.chapter p.lead { color: var(--ink-dim); font-size: var(--t-l); max-width: 52ch; margin-top: 1.5rem; }
.dark-start { text-align: left; }
.dark-start .tiny-stars { display: flex; gap: 3.2rem; margin-bottom: 2.2rem; }
.dark-start .tiny-stars i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink); opacity: .7; }
.dark-start .tiny-stars i:nth-child(2) { opacity: .35; transform: translateY(14px); }

/* seven doors, each with its own gesture */
.doors { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 700px) and (max-width: 1099px) { .doors { grid-template-columns: repeat(2, 1fr); } .door:last-child { grid-column: span 2; } }
@media (min-width: 1100px) { .doors { grid-template-columns: repeat(4, 1fr); } .door--wide { grid-column: span 2; } }
.door { background: var(--dusk); min-height: 15rem; padding: 1.4rem; display: grid; grid-template-rows: 1fr auto; gap: 1.2rem; position: relative; }
.door a { text-decoration: none; display: grid; gap: .35rem; }
.door a::after { content: ""; position: absolute; inset: 0; }
.door h3 { font: 400 var(--t-xl)/1.1 var(--display); }
.door p { color: var(--ink-dim); font-size: var(--t-s); }
.door__lens { font-size: var(--t-xs); font-weight: 600; color: var(--gold); }
.door--fact .door__lens { color: var(--silver); }
.door:hover { background: var(--dusk-2); }
.door__art { position: relative; min-height: 6rem; display: grid; place-items: start; }
/* sky door: a slice of tonight's measured sky (drawn by home.js) */
.door__art canvas { width: 100%; height: 7rem; }
/* astrology door: the silver wheel turns, slowly, only when hovered */
.door__wheel { width: 7.5rem; opacity: .85; transition: transform 6s linear; }
.door:hover .door__wheel { transform: rotate(-30deg); }
/* tarot door: the card turns over */
.door__card { width: 4.6rem; aspect-ratio: 5 / 8; perspective: 600px; }
.door__card i { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; transition: transform .8s var(--ease); }
.door__card .back { background: repeating-linear-gradient(45deg, var(--hat) 0 6px, var(--dusk-2) 6px 12px); border: 1.5px solid var(--gold-dim); }
.door__card .face { background: var(--night); border: 1.5px solid var(--gold); transform: rotateY(180deg); display: grid; place-items: center; }
.door__card .face img { width: 70%; }
.door:hover .door__card .back, .door:focus-within .door__card .back { transform: rotateY(180deg); }
.door:hover .door__card .face, .door:focus-within .door__card .face { transform: rotateY(0); }
/* numbers door: a date reduces to one number (home.js) */
.door .door__num { font: 400 2.4rem/1 var(--display); color: var(--gold); letter-spacing: .05em; }
.door__num small { display: block; font: var(--t-xs)/1.4 var(--data); color: var(--ink-faint); letter-spacing: 0; margin-top: .4rem; }
/* hand door: lines trace themselves */
.door__hand path { stroke: var(--gold); stroke-width: 2; fill: none; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.6s var(--ease); }
.door__hand .palm { stroke: var(--line-2); stroke-dasharray: none; stroke-dashoffset: 0; }
.door:hover .door__hand path, .door.is-seen .door__hand path { stroke-dashoffset: 0; }
/* dreams door: the moon */
.door__moon { width: 4.5rem; }
/* personality door: three answers, one emerges */
.door__dots { display: flex; gap: .5rem; align-items: end; }
.door__dots i { width: 1.1rem; border-radius: 6px 6px 2px 2px; background: var(--line-2); transition: height .6s var(--spring), background .4s; }
.door__dots i:nth-child(1) { height: 1.6rem; } .door__dots i:nth-child(2) { height: 2.8rem; } .door__dots i:nth-child(3) { height: 1.2rem; }
.door:hover .door__dots i:nth-child(2) { height: 4.4rem; background: var(--gold); }

/* the connection: different traditions, one mind */
.connect { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .connect { grid-template-columns: 1.1fr 1fr; } }
.connect__art { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.connect__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: turn 240s linear infinite; opacity: .9; }
.connect__art .cat { inset: auto; left: 50%; top: 50%; width: 38%; height: auto; transform: translate(-50%, -46%); animation: none; opacity: 1; }
@keyframes turn { to { transform: rotate(-360deg); } }
.twolens { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 2.2rem; }
@media (min-width: 600px) { .twolens { grid-template-columns: 1fr 1fr; } }
.twolens div { background: var(--dusk); padding: 1.3rem; }
.twolens b { display: block; font-weight: 600; margin-bottom: .3rem; }
.twolens .sky b { color: var(--silver); } .twolens .story b { color: var(--gold); }
.twolens p { color: var(--ink-dim); font-size: var(--t-s); }

/* personal universe */
.universe { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .universe { grid-template-columns: 1fr 1fr; align-items: center; } }
.orbit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
/* each circle: the owner's illustration behind, a night scrim for the label, and the witch cat peeking in */
.orbit li { --art: none; position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-2); overflow: hidden; display: grid; place-items: start center; padding-top: 18%; text-align: center;
  background:
    url("/assets/img/brand/cat-320.webp") no-repeat 50% 112% / 44% auto,
    radial-gradient(ellipse 70% 34% at 50% 24%, rgba(9, 7, 13, .7), rgba(9, 7, 13, 0) 100%),
    var(--art) center / cover no-repeat,
    var(--dusk);
  transition: transform .5s var(--spring), border-color .3s; }
.orbit li:hover { transform: scale(1.04); border-color: var(--gold-dim); }
.orbit li span { position: relative; font: 400 clamp(.72rem, .6rem + .5vw, .95rem)/1.15 var(--display); color: var(--ink); letter-spacing: .02em; text-shadow: 0 1px 8px rgba(9, 7, 13, .95); padding: 0 .4rem; }
.orbit .orb--birth { --art: url("/assets/img/brand/galaxy-blue.webp"); }
.orbit .orb--chart { --art: url("/assets/img/brand/star-book.webp"); }
.orbit .orb--arch { --art: url("/assets/img/brand/crystal.webp"); }
.orbit .orb--num { --art: url("/assets/img/brand/planets.webp"); background-size: 44% auto, auto, auto 46%, auto; background-position: 50% 112%, center, 30% 58%, center; }
.orbit .orb--card { --art: url("/assets/img/brand/card-moon.webp"); }
.orbit .orb--hand { --art: url("/assets/img/brand/card-palm.webp"); }
.orbit .orb--dreams { --art: url("/assets/img/brand/moon.webp"); background-size: 44% auto, auto, 62% auto, auto; background-position: 50% 112%, center, 50% 62%, center; }
.orbit .orb--guide { --art: url("/assets/img/brand/wheel-720.webp"); }
.orbit li.core { --art: url("/assets/img/brand/galaxy-violet.webp"); border-color: var(--gold); background-size: 58% auto, auto, cover, auto; background-position: 50% 118%, center, center, center; }
.orbit li.core span { font: italic 400 clamp(1rem, .8rem + .8vw, 1.4rem)/1.1 var(--story); color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .orbit li:hover { transform: none; } }

.final { text-align: center; }
.final .chapter__q { margin: 0 auto; }
.final .hero__cta { justify-content: center; }
.final .cauldron { width: 7rem; margin: 0 auto 2rem; }

/* ---------- how it works ---------- */
.tone-sky { color: var(--silver); font-weight: 600; } .tone-story { color: var(--gold); font-weight: 600; }
.how__title { font: 400 var(--t-2xl)/1.05 var(--display); letter-spacing: .01em; max-width: 20ch; }
.how__steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 2.4rem; counter-reset: none; }
@media (min-width: 900px) { .how__steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.how__steps li { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.how__num { display: block; font: 400 2.6rem/1 var(--display); color: var(--gold); margin-bottom: .8rem; }
.how__steps h3 { font: 400 var(--t-xl)/1.15 var(--display); margin-bottom: .6rem; }
.how__steps p { color: var(--ink-dim); max-width: 42ch; }
.how__steps a { display: inline-block; margin-top: .9rem; color: var(--ink); font-weight: 600; font-size: var(--t-s); text-underline-offset: 4px; min-height: 24px; }
.today { margin-top: clamp(3rem, 7vw, 4.5rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: radial-gradient(120% 140% at 0% 0%, rgba(200, 200, 206, .07), transparent 50%), radial-gradient(120% 140% at 100% 100%, rgba(216, 168, 78, .08), transparent 50%), var(--dusk); }
.today__k { font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); }
.today__pair { display: grid; gap: 1.2rem; margin-top: 1rem; }
@media (min-width: 760px) { .today__pair { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.today__pair p { display: grid; gap: .3rem; }
.today__pair span { font-size: var(--t-xs); font-weight: 600; }
.today__sky span { color: var(--silver); } .today__story span { color: var(--gold); }
.today__sky b { font: 400 var(--t-xl)/1.2 var(--display); }
.today__story i { font: italic 400 var(--t-xl)/1.2 var(--story); color: var(--ink); }
.today__why { margin-top: 1.2rem; color: var(--ink-dim); max-width: 70ch; }

/* ---------- coming-later doors ---------- */
.door__text { display: grid; gap: .35rem; }
.door__soon { justify-self: start; margin-top: .4rem; font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); border: 1px dashed var(--line-2); border-radius: var(--r-pill); padding: .2rem .7rem; }
.door:has(.door__soon):hover { background: var(--dusk); }

/* ---------- the guide (tabs; every panel works without script too, see home.js) ---------- */
.guide { margin-top: 2.4rem; display: grid; gap: 1.6rem; }
@media (min-width: 960px) { .guide { grid-template-columns: 16rem 1fr; gap: 2.4rem; align-items: start; } }
.guide__tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 960px) { .guide__tabs { flex-direction: column; position: sticky; top: 2rem; } }
.guide__tabs button { min-height: 48px; padding: .6rem 1.1rem; text-align: left; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--ink-dim); font: 600 var(--t-s)/1.2 var(--ui); cursor: pointer; }
.guide__tabs button[aria-selected="true"] { color: var(--night); background: var(--gold); border-color: var(--gold); }
.guide__tabs button:hover:not([aria-selected="true"]) { border-color: var(--silver-dim); color: var(--ink); }
.guide__panel { padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--dusk); }
.guide__panel:focus-visible { outline: 2px solid var(--eye); outline-offset: 3px; }
.guide__what { font: italic var(--t-l)/1.5 var(--story); color: var(--ink); max-width: 64ch; }
.guide__cols { display: grid; gap: 1.6rem; margin: 1.6rem 0 1.8rem; }
@media (min-width: 760px) { .guide__cols { grid-template-columns: 1.15fr 1fr; gap: 2.4rem; } }
.guide__cols h3 { font: 400 var(--t-l)/1.2 var(--display); margin: 0 0 .7rem; }
.guide__cols h3:not(:first-child) { margin-top: 1.4rem; }
.guide__cols ol, .guide__cols ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--ink-dim); }
.guide__cols ol li::marker { color: var(--gold); font-family: var(--display); }
.guide__cols p { color: var(--ink-dim); }
.guide__cols a { color: var(--ink); }

/* ---------- birth time ---------- */
.bt { display: grid; gap: 1px; margin-top: 2.2rem; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 860px) { .bt { grid-template-columns: repeat(3, 1fr); } }
.bt__card { background: var(--dusk); padding: 1.5rem; }
.bt__card h3 { font: 400 var(--t-l)/1.2 var(--display); color: var(--gold); margin-bottom: .6rem; }
.bt__card p { color: var(--ink-dim); }

/* ---------- privacy + questions ---------- */
.privacy__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.2rem; max-width: 62rem; }
@media (min-width: 860px) { .privacy__list { grid-template-columns: 1fr 1fr; gap: 1.6rem 3rem; } }
.privacy__list li { color: var(--ink-dim); padding-left: 1.2rem; border-left: 2px solid var(--silver-dim); }
.privacy__list b { color: var(--ink); font-weight: 600; }
.faq__in { max-width: 60rem; }
.faq__in .how__title { margin-bottom: 1.6rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.1rem 0; min-height: 48px; font: 400 var(--t-l)/1.35 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--display); color: var(--gold); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--eye); outline-offset: 4px; border-radius: 6px; }
.faq details p { color: var(--ink-dim); padding: 0 0 1.2rem; max-width: 68ch; }
.faq details a { color: var(--ink); }
.how .wrap, .guide-sec .wrap, .birthtime .wrap, .privacy .wrap, .faq .wrap { position: relative; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 3rem 0 4rem; color: var(--ink-faint); font-size: var(--t-xs); }
.foot__in { display: grid; gap: 1.2rem; }
.foot a { color: var(--ink-dim); }

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