/* Candlelit Tarot website: the app's colours, pixel fonts and pixel frames (built by tools/build-site.mjs). */
@font-face { font-family: 'Jacquard 24'; src: url('/fonts/jacquard24.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'DotGothic16'; src: url('/fonts/dotgothic16-v2.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/silkscreen.woff2') format('woff2'); font-display: swap; }

:root {
  --night: #0a0223; --deep: #1a0632; --plum: #3d0c4f; --plum-hi: #5a1a6e; --lavender: #c9a9d6;
  --gold: #f5ad49; --gold-hi: #fbd16e; --cream: #fcecc3; --pink: #f296e2;
  --px: 3px; /* one art pixel */
  --gutter: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--cream); font: 17px/1.65 'DotGothic16', system-ui, sans-serif;
  background:
    url('/img/stars.png') repeat 0 0 / 288px 288px,
    radial-gradient(ellipse 120% 70% at 50% 0%, var(--plum) 0%, var(--deep) 45%, var(--night) 85%) fixed;
  background-color: var(--night);
  image-rendering: pixelated;
  overflow-x: hidden;
}
img, video { image-rendering: pixelated; max-width: 100%; }
p, li { text-wrap: pretty; }
a { color: var(--pink); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
strong { color: var(--gold-hi); font-weight: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--night); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }
.center { text-align: center; }
.small { font-size: 14px; color: var(--lavender); }

/* headings: the gothic pixel font from the app's title */
h1, h2, h3 { font-family: 'Jacquard 24', serif; font-weight: normal; letter-spacing: .5px; text-wrap: balance; }
h1 { font-size: clamp(42px, 7vw, 68px); line-height: 1; color: var(--gold-hi); margin: 8px 0 16px; text-shadow: 3px 3px 0 var(--night); }
h2 { font-size: clamp(32px, 4.6vw, 42px); line-height: 1.05; color: var(--gold); margin: 0 0 12px; text-shadow: 2px 2px 0 var(--night); }
h3 { font-size: 26px; line-height: 1.1; color: var(--gold-hi); margin: 18px 0 4px; }
.lead { font-size: 19px; color: var(--cream); }
.eyebrow { font: 13px/1 'Silkscreen', monospace; text-transform: uppercase; letter-spacing: 2px; color: var(--pink); margin: 0; display: flex; align-items: center; gap: 8px; }

/* pixel frames: nine-slice images, 4 art pixels per corner */
.panel {
  border: calc(var(--px) * 4) solid transparent;
  border-image: url('/img/frame.png') 4 fill / calc(var(--px) * 4) stretch;
  padding: 10px 14px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 4px 14px; font: 15px/1.1 'Silkscreen', monospace; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold-hi); text-decoration: none; cursor: pointer; background: none;
  border: calc(var(--px) * 4) solid transparent;
  border-image: url('/img/frame-btn.png') 4 fill / calc(var(--px) * 4) stretch;
  text-shadow: 2px 2px 0 var(--night);
}
.btn:hover, .btn:focus-visible { border-image-source: url('/img/frame-btn-hi.png'); color: var(--cream); }
.btn:active { transform: translateY(2px); }
.btn-sm { min-height: 40px; font-size: 12px; padding: 2px 8px; border-width: calc(var(--px) * 3); border-image-width: calc(var(--px) * 3); }
.btn[disabled] { opacity: .6; cursor: wait; }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: #0a0223e6; border-bottom: var(--px) solid var(--plum); backdrop-filter: blur(4px); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--gold-hi); font: 30px/1 'Jacquard 24', serif; white-space: nowrap; }
.logo img { width: 14px; height: 18px; }
.top nav { display: flex; align-items: center; gap: 16px; }
.top nav a:not(.btn) { color: var(--cream); text-decoration: none; font-size: 15px; }
.top nav a:not(.btn):hover { color: var(--gold-hi); text-decoration: underline; }
@media (max-width: 520px) {
  .logo { font-size: 24px; }
  .logo img { display: none; }
  .top nav { gap: 10px; }
  .top nav a:not(.btn) { font-size: 13px; }
}
.top nav a { white-space: nowrap; }
.top .short { display: none; }
@media (max-width: 520px) { .top .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .top .short { display: inline; } }

/* hero */
.hero { padding: 40px 0 32px; }
.hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero-text h1 { margin-top: 14px; }
.hero-note { margin-top: 8px; }
.hero-art { margin: 0; justify-self: center; text-align: center; }
.screen {
  width: min(100%, calc(270px * 1.5 + 24px), calc((100svh - 150px) * 9 / 16 + 24px)); min-width: 240px; padding: 0;
  border: calc(var(--px) * 4) solid transparent;
  border-image: url('/img/frame.png') 4 fill / calc(var(--px) * 4) stretch;
  box-shadow: 0 0 60px #f5ad4933, 8px 8px 0 #00000066;
}
.screen video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--deep); }
.hero-art figcaption { margin-top: 10px; }
@media (max-width: 820px) {
  .hero { padding-top: 24px; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; }
  .screen { width: min(100%, 360px); }
}

/* waitlist form */
.join { margin: 20px 0 0; }
.join-row { display: flex; gap: 10px; flex-wrap: wrap; }
.join input {
  flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 8px 14px; font: 17px 'DotGothic16', system-ui, sans-serif;
  color: var(--cream); background: var(--night); border: var(--px) solid var(--gold); border-radius: 0;
  box-shadow: inset 3px 3px 0 #00000080;
}
.join input::placeholder { color: #9b86b0; }
.join input:focus { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.join .btn { flex: 0 0 auto; }
.join-msg { margin: 10px 0 0; min-height: 1.4em; }
.join-msg.ok { color: var(--gold-hi); font-size: 16px; }
.join-msg.err { color: var(--pink); font-size: 16px; }
.join.done .join-row { display: none; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.center .join-row { justify-content: center; }
.join-box { max-width: 560px; }

/* sections */
.band { padding: 40px 0; }
.band.last { padding-bottom: 64px; }
.features { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.features li { margin: 0; }
.features .icon { width: auto; height: 48px; display: block; margin: 6px 0 2px; }
.features h3 { margin-top: 6px; }
.features p { margin: 4px 0 6px; font-size: 16px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .features { grid-template-columns: 1fr; } }

.luna { display: flex; gap: 28px; align-items: center; }
.luna-face { width: 160px; height: 160px; flex: 0 0 auto; border: var(--px) solid var(--gold); box-shadow: 6px 6px 0 #00000066; }
.honest { border-left: var(--px) solid var(--gold); padding-left: 12px; }
@media (max-width: 620px) { .luna { flex-direction: column; align-items: flex-start; gap: 16px; } .luna-face { width: 128px; height: 128px; } }

/* card tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 12px; margin: 20px 0; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--cream); text-align: center; font-size: 15px; line-height: 1.3; padding: 6px 2px; }
.tile .face { width: 128px; height: 192px; transition: transform .15s steps(3); filter: drop-shadow(4px 4px 0 #00000080); }
.tile:hover .face, .tile:focus-visible .face { transform: translateY(-6px); }
.tile:hover span { color: var(--gold-hi); }
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 14px 6px; }
  .tile { font-size: 13px; }
  .tile .face { width: 64px; height: 96px; }
}
@media (min-width: 400px) and (max-width: 560px) { .tile .face { width: 96px; height: 144px; } }
@media (prefers-reduced-motion: reduce) { .tile .face { transition: none; } }

/* FAQ */
.faq { border-bottom: var(--px) dashed var(--plum-hi); padding: 6px 0; }
.faq summary { cursor: pointer; padding: 10px 0; font-size: 18px; color: var(--gold-hi); list-style: none; display: flex; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; font-family: 'Silkscreen', monospace; color: var(--gold); width: 16px; flex: 0 0 auto; }
.faq[open] summary::before { content: '-'; }
.faq p { margin: 0 0 12px 26px; }

/* card index + card page */
.crumbs { font-size: 14px; color: var(--lavender); margin: 20px 0 6px; }
.crumbs a { color: var(--lavender); }
.jump, .toc { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0 24px; }
.jump a, .toc a {
  font: 12px/1 'Silkscreen', monospace; text-transform: uppercase; letter-spacing: 1px; color: var(--cream); text-decoration: none;
  padding: 10px 12px; background: var(--deep); border: 2px solid var(--plum-hi); min-height: 40px; display: inline-flex; align-items: center;
}
.jump a:hover, .toc a:hover { border-color: var(--gold); color: var(--gold-hi); }
.suit { padding: 24px 0 8px; scroll-margin-top: 80px; }
.cta { margin: 40px 0 24px; text-align: center; }
.cta .join-row { justify-content: center; }
.cta h2 { margin-top: 8px; }

.card-head { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start; margin: 12px 0 8px; }
.card-frame { padding: 12px; background: var(--deep); border: calc(var(--px) * 4) solid transparent; border-image: url('/img/frame.png') 4 fill / calc(var(--px) * 4) stretch; box-shadow: 0 0 50px #f5ad4926; }
.face.big { width: 192px; height: 288px; display: block; }
.card-intro h1 { margin: 10px 0 12px; }
.h1-sub { display: block; font-size: .5em; color: var(--lavender); margin-top: 6px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 16px 0 0; }
.facts div { border-top: 2px solid var(--plum-hi); padding-top: 6px; }
.facts dt { font: 11px/1.4 'Silkscreen', monospace; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.facts dd { margin: 2px 0 0; font-size: 15px; }
@media (max-width: 720px) {
  .card-head { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .card-intro { justify-self: stretch; }
  .face.big { width: 128px; height: 192px; }
}
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }
.sec { padding: 18px 0 6px; scroll-margin-top: 80px; max-width: 760px; }
.sec h3 { font-size: 24px; }
.rev-row { display: flex; gap: 20px; align-items: flex-start; }
.face.flip { transform: rotate(180deg); width: 64px; height: 96px; flex: 0 0 auto; margin-top: 16px; filter: drop-shadow(-4px -4px 0 #00000080); }
@media (max-width: 480px) { .rev-row .face.flip { display: none; } }
.yn { display: flex; gap: 14px; align-items: baseline; }
.yn-badge { font: 15px/1 'Silkscreen', monospace; text-transform: uppercase; padding: 8px 12px; border: var(--px) solid currentColor; flex: 0 0 auto; }
.yn-yes { color: var(--gold-hi); } .yn-no { color: var(--pink); } .yn-maybe { color: var(--lavender); }
.advice { font-size: 19px; color: var(--gold-hi); }
.symbols li, .questions li { margin: 8px 0; }
.luna-note { display: flex; gap: 16px; align-items: flex-start; margin: 28px 0 8px; max-width: 760px; }
.luna-note img { width: 64px; height: 64px; border: 2px solid var(--gold); flex: 0 0 auto; }
.luna-note p { margin: 4px 0; }
.note-title { font: 13px/1 'Silkscreen', monospace; text-transform: uppercase; letter-spacing: 1px; color: var(--pink); }
.disclaim { max-width: 760px; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0; }
.pager a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); padding: 8px 12px; background: var(--deep); border: 2px solid var(--plum-hi); max-width: 48%; }
.pager a:hover { border-color: var(--gold); }
.pager a[rel=next] { text-align: right; margin-left: auto; }
.pager small { display: block; font: 10px/1.6 'Silkscreen', monospace; text-transform: uppercase; color: var(--gold); }
.pager img { width: 32px; height: 48px; flex: 0 0 auto; }

/* plain pages (Safety, Privacy) */
.prose { padding-top: 28px; padding-bottom: 40px; }
.prose h2 { margin-top: 32px; }
.prose .sub { color: var(--lavender); }
.prose .help { border: 2px solid var(--gold); background: var(--deep); padding: 12px 16px; margin: 16px 0; box-shadow: 4px 4px 0 #00000066; }
.prose li { margin: 6px 0; }
.lost { padding: 60px var(--gutter); }
.lost img { width: 96px; height: 144px; }

/* footer */
.foot { border-top: var(--px) solid var(--plum); background: #0a0223cc; padding: 28px 0 16px; margin-top: 24px; }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-in > div { max-width: 460px; }
.foot-name { font: 28px/1 'Jacquard 24', serif; color: var(--gold-hi); margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.foot nav a { color: var(--cream); }
.copy { margin-top: 20px; }