/* ==========================================================================
   Lyla Bellatas — site styles
   Palette sampled from the Lyla Lenormand deck art, matching the app theme
   (see lyla-lenormand/src/constants/theme.ts).
   ========================================================================== */

:root {
  /* --- Brand palette (identical to the app) --- */
  --bg:             #1B1320;  /* near-black plum */
  --surface:        #2A1F33;  /* cards, panels */
  --surface-raised: #382A46;  /* hover / raised */
  --lilac:          #C9B3DC;  /* primary accent — the starburst dots */
  --violet:         #7B5EA7;  /* card illustrations */
  --aubergine:      #43273F;  /* the BELLATAS wordmark */
  --peach:          #F2C494;  /* sparing highlight — number badges */
  --text:           #F4EFF8;
  --text-dim:       #B4A3C4;
  --border:         rgba(201, 179, 220, 0.18);
  --border-strong:  rgba(201, 179, 220, 0.34);

  /* --- Official brand colors, from LylaBellatas_Identity.pdf ---
     PURPLE     C73 M97 Y41 K56
     MID PURPLE C74 M100 Y33 K15
     Used for brand moments (buttons, the readings wash). The palette above is
     sampled from the deck art and carries the text contrast. */
  --brand-purple: #1E0342;
  --brand-mid:    #380091;

  --serif: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1140px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 108px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--lilac); text-decoration: none; }
a:hover { color: var(--text); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

::selection { background: var(--violet); color: #fff; }

:focus-visible {
  outline: 2px solid var(--lilac);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- layout --- */
.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

section { position: relative; padding: 6.5rem 0; }

.section-head { max-width: 46rem; margin-bottom: 3.25rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peach);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}

.section-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.section-head p { color: var(--text-dim); font-size: 1.06rem; margin: 0; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--surface-raised); color: var(--text);
  padding: 0.75rem 1.25rem; border-radius: 8px; z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------ starburst - */
/* The dot mandala from the logo, reused as an ambient backdrop. */
.starburst {
  position: absolute;
  inset: auto;
  color: var(--lilac);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.starburst img { width: 100%; height: 100%; }

/* ------------------------------------------------------------- banner --- */
/* The logo was drawn as dark ink for a white page. Rather than recolor it and
   lose the artwork, the banner gives it the white ground it was made for. */
.site-banner {
  background: #FFFFFF;
  padding: 1.9rem 0 1.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.site-banner::after {                 /* hairline seam into the dark site */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-mid), transparent);
  opacity: 0.5;
}
.banner-logo { display: inline-block; line-height: 0; }
.banner-logo img {
  width: clamp(320px, 46vw, 620px);
  height: auto;
}

/* ------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(27, 19, 32, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 2rem;
  padding: 0.75rem 0;
}

.nav { display: flex; align-items: center; gap: 1.9rem; margin: 0 auto; }
.nav a {
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
  position: relative; padding: 0.35rem 0;
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--lilac);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

.socials { display: flex; gap: 0.95rem; align-items: center; }
.socials a { color: var(--text-dim); transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
.socials a:hover { color: var(--lilac); transform: translateY(-2px); }
.socials svg { width: 19px; height: 19px; display: block; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text);
  padding: 0.5rem 0.7rem; cursor: pointer;
}

/* ---------------------------------------------------- the corner sun ---- */
/* Her own wheel, carried into the corner of every section — the way she
   uses it in the slide deck. Brand guide: the wheel sits at 20% opacity. */
main > section {
  position: relative;
  isolation: isolate;
}
main > section::after {
  content: "";
  position: absolute;
  top: -70px; right: -90px;
  width: clamp(180px, 20vw, 300px); aspect-ratio: 1;
  background: url("/assets/img/sun-light.png") center / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
}
main > section:nth-of-type(even)::after {   /* alternate corners so it reads as rhythm */
  top: auto; right: auto;
  bottom: -70px; left: -90px;
}
.hero::after, .praise::after { content: none; }   /* these have their own artwork */

/* --------------------------------------------------------------- hero --- */
.hero {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}
.hero::before {                       /* violet bloom behind the type */
  content: "";
  position: absolute; top: -28%; left: 50%;
  width: 145vw; max-width: 1500px; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
              rgba(123, 94, 167, 0.40) 0%,
              rgba(123, 94, 167, 0.13) 38%,
              transparent 68%);
  pointer-events: none;
}
.hero .starburst {
  top: 46%; right: -14%; left: auto;
  width: min(560px, 74vw); aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.07;
}

/* The designer's original purple/gold smoke plate. It is painted on pure
   black, so `screen` drops the black out and leaves only the smoke glowing. */
.smoke {
  position: absolute;
  left: 0; right: 0; bottom: -4%;
  height: 82%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.smoke img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  mix-blend-mode: screen;          /* black plate drops out, smoke stays */
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 78%, transparent);
}

.hero .wrap { position: relative; z-index: 1; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

/* The logo leads the page — it is the identity, and it already carries
   "HEAT & HEART", so the tagline underneath supports it rather than competing. */
.hero-logo {
  margin: 0 0 1.6rem;
  line-height: 0;
}
.hero-logo img {
  width: clamp(300px, 34vw, 460px);
  height: auto;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, 0.55));
}

.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 1.3rem;
  text-wrap: balance;
}
.hero-tagline em {
  font-style: italic;
  color: var(--lilac);
}
.hero-lede {
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  color: var(--text-dim);
  max-width: 34rem;
  margin: 0 0 2.3rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* -------------------------------------------------------------- button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-primary {
  background: linear-gradient(135deg, var(--violet), #9A79C6);
  color: #fff;
  box-shadow: 0 6px 26px rgba(123, 94, 167, 0.38);
}
.btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(123, 94, 167, 0.52);
}
.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: rgba(201, 179, 220, 0.05);
}
.btn-ghost:hover {
  border-color: var(--lilac);
  background: rgba(201, 179, 220, 0.12);
  color: var(--text);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------- hero fan ---- */
.cover-fan {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 380px;
}
.cover-fan img {
  position: absolute;
  width: clamp(140px, 17vw, 190px);
  border-radius: 6px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.62);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.cover-fan img:nth-child(1) { transform: rotate(-12deg) translate(-60%, 14px); z-index: 1; }
.cover-fan img:nth-child(2) { transform: rotate(-4deg)  translate(-20%, -10px); z-index: 2; }
.cover-fan img:nth-child(3) { transform: rotate(4deg)   translate(20%, -10px); z-index: 3; }
.cover-fan img:nth-child(4) { transform: rotate(12deg)  translate(60%, 14px); z-index: 4; }
.cover-fan:hover img:nth-child(1) { transform: rotate(-15deg) translate(-74%, 4px); }
.cover-fan:hover img:nth-child(2) { transform: rotate(-5deg)  translate(-30%, -22px); }
.cover-fan:hover img:nth-child(3) { transform: rotate(5deg)   translate(30%, -22px); }
.cover-fan:hover img:nth-child(4) { transform: rotate(15deg)  translate(74%, 4px); }

/* ------------------------------------------------------------- praise --- */
.praise {
  padding: 4.5rem 0;
  border-block: 1px solid var(--border);
  background: rgba(42, 31, 51, 0.4);
  text-align: center;
}
.praise blockquote {
  margin: 0 auto;
  max-width: 48rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.7vw, 1.85rem);
  line-height: 1.42;
  color: var(--text);
}
.praise cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--peach);
}

/* ------------------------------------------- story inside an anthology -- */
.story {
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.2rem;
  border-left: 2px solid var(--violet);
  background: rgba(123, 94, 167, 0.09);
  border-radius: 0 10px 10px 0;
}
.story h4 {
  font-family: var(--serif);
  font-size: 1.08rem;
  margin: 0 0 0.5rem;
  color: var(--lilac);
}
.story h4 span {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.story p { font-size: 0.9rem !important; margin: 0 0 0.7rem !important; }
.story p:last-child { margin-bottom: 0 !important; }

/* --------------------------------------------------- review pull quote -- */
.review {
  margin: 0 0 1.3rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  padding-left: 0.9rem;
  border-left: 1px solid var(--border-strong);
}
.review span {
  display: block;
  margin-top: 0.45rem;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach);
}

/* -------------------------------------------------------------- about --- */
.about { background: linear-gradient(180deg, transparent, rgba(42, 31, 51, 0.55), transparent); }
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.portrait { position: relative; }
.portrait img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.portrait::after {                    /* lilac offset frame */
  content: "";
  position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  z-index: -1;
}
.about-body p { color: var(--text-dim); }
.about-body p:first-of-type {
  font-size: 1.22rem;
  color: var(--text);
  font-family: var(--serif);
  line-height: 1.5;
}
.about h3 {
  font-size: 1.3rem;
  margin-top: 2.5rem;
  color: var(--lilac);
}

/* A list of interests, not controls — so it must not look tappable.
   No pills, no borders, no fills: just typeset text with hairline separators. */
.passions {
  /* deliberately NOT flex — flex blockifies its children, and these need to
     flow and wrap as one continuous line of text */
  display: block;
  margin: 1.4rem 0 0; padding: 0; list-style: none;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--text-dim);
  line-height: 1.9;
}
.passions li { display: inline; }
.passions li + li::before {
  content: "·";
  margin: 0 0.6rem;
  color: var(--violet);
}
.passions-label {
  margin: 2.2rem 0 0;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--peach);
}

/* -------------------------------------------------------------- books --- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.book {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.book:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}
.book-cover { position: relative; overflow: hidden; background: var(--aubergine); }
.book-cover img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.book:hover .book-cover img { transform: scale(1.045); }

.book-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.book-series {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--peach); margin: 0 0 0.55rem;
}
.book h3 { font-size: 1.42rem; margin-bottom: 0.7rem; }
.book p { font-size: 0.95rem; color: var(--text-dim); margin: 0 0 1.3rem; }
.book .tagline {
  font-family: var(--serif); font-style: italic;
  color: var(--lilac); font-size: 1.02rem;
  margin-bottom: 1.4rem;
}
.buy { margin-top: auto; }
.buy-label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 0.6rem;
}
.buy-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buy-links a {
  font-size: 0.78rem; font-weight: 500;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  transition: all 0.25s var(--ease);
}
.buy-links a:hover {
  border-color: var(--lilac); color: var(--text);
  background: rgba(201, 179, 220, 0.1);
}

/* --------------------------------------------------------------- deck --- */
.deck { overflow: hidden; }
.deck::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(67, 39, 63, 0.5), transparent);
  pointer-events: none;
}
.deck .starburst {
  top: 50%; right: -18%;
  width: min(560px, 76vw); aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.08;
}
.deck .wrap { position: relative; z-index: 1; }
.deck-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.deck-body h2 { font-size: clamp(2.1rem, 4.4vw, 3rem); }
.deck-body p { color: var(--text-dim); }
.deck-body .lede { font-size: 1.14rem; color: var(--text); }

.card-fan {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 420px;
}
.card-fan img {
  position: absolute;
  width: clamp(130px, 17vw, 185px);
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.66);
  transition: transform 0.55s var(--ease);
}
.card-fan img:nth-child(1) { transform: rotate(-22deg) translate(-90%, 22px); }
.card-fan img:nth-child(2) { transform: rotate(-11deg) translate(-45%, -6px); }
.card-fan img:nth-child(3) { transform: rotate(0deg)   translate(0, -20px); z-index: 3; }
.card-fan img:nth-child(4) { transform: rotate(11deg)  translate(45%, -6px); }
.card-fan img:nth-child(5) { transform: rotate(22deg)  translate(90%, 22px); }
.card-fan:hover img:nth-child(1) { transform: rotate(-27deg) translate(-108%, 14px); }
.card-fan:hover img:nth-child(2) { transform: rotate(-13deg) translate(-54%, -14px); }
.card-fan:hover img:nth-child(3) { transform: rotate(0deg)   translate(0, -34px); }
.card-fan:hover img:nth-child(4) { transform: rotate(13deg)  translate(54%, -14px); }
.card-fan:hover img:nth-child(5) { transform: rotate(27deg)  translate(108%, 14px); }

/* ---------------------------------------------------- the witchy wash --- */
/* The bokeh/glow feeling from the reference wallpapers, generated with layered
   radial gradients instead of licensed stock art. Kept low-contrast and well
   behind the type — atmosphere, never competition. */
#readings {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(56, 0, 145, 0.55), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(123, 94, 167, 0.30), transparent 46%),
    radial-gradient(circle at 72% 88%, rgba(30, 3, 66, 0.85), transparent 52%),
    linear-gradient(180deg, transparent, rgba(30, 3, 66, 0.45), transparent);
}
#readings::before {                       /* drifting motes of light */
  content: "";
  position: absolute; inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(201, 179, 220, 0.28) 0 3px, transparent 4px),
    radial-gradient(circle at 34% 72%, rgba(242, 196, 148, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 61% 22%, rgba(201, 179, 220, 0.20) 0 4px, transparent 6px),
    radial-gradient(circle at 79% 58%, rgba(201, 179, 220, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 47% 44%, rgba(242, 196, 148, 0.16) 0 3px, transparent 5px),
    radial-gradient(circle at 90% 80%, rgba(201, 179, 220, 0.18) 0 3px, transparent 5px),
    radial-gradient(circle at 8% 66%, rgba(201, 179, 220, 0.16) 0 2px, transparent 4px);
  filter: blur(0.4px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.6%, -1.8%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  #readings::before { animation: none; }
}
#readings .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------- practices --- */
/* These ARE links, so they get real affordance: raised surface, hover lift,
   an arrow that moves. Unlike the interests list, the promise is honored. */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
}
.practice {
  display: flex; flex-direction: column;
  padding: 2rem 1.6rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.practice:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--surface-raised);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46);
  color: inherit;
}
.practice svg {
  width: 42px; height: 42px;
  color: var(--lilac);
  margin-bottom: 1.15rem;
  transition: color 0.35s var(--ease);
}
.practice:hover svg { color: var(--peach); }
.practice h3 { font-size: 1.32rem; margin-bottom: 0.5rem; }
.practice p {
  font-size: 0.9rem; color: var(--text-dim);
  margin: 0 0 1.3rem; flex: 1;
}
.practice .go {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lilac);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.practice .go::after {
  content: "→";
  transition: transform 0.35s var(--ease);
}
.practice:hover .go::after { transform: translateX(5px); }

/* ------------------------------------------------------------ filters --- */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 2.75rem;
}
.filter {
  font-family: var(--sans);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(201, 179, 220, 0.05);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.filter:hover { border-color: var(--border-strong); color: var(--text); }
.filter[aria-pressed="true"] {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}

/* -------------------------------------------------------------- posts --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
}
.post {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.post:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
  color: inherit;
}
.post-thumb {
  aspect-ratio: 16 / 9;
  background: var(--aubergine);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb svg { width: 52px; height: 52px; color: var(--lilac); opacity: 0.55; }
.post-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 0.7rem;
}
.post-meta time { color: var(--text-dim); font-weight: 500; letter-spacing: 0.08em; }
.post h3 { font-size: 1.28rem; margin-bottom: 0.6rem; }
.post p { font-size: 0.92rem; color: var(--text-dim); margin: 0; }
.post[hidden] { display: none; }

.empty-note {
  color: var(--text-dim);
  font-style: italic;
  padding: 2rem 0;
}

/* --------------------------------------------------- a single reading --- */
.reading { max-width: 44rem; }
.reading h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin-bottom: 0.6rem; }
.reading .post-meta { margin-bottom: 2rem; }
.reading > p { color: var(--text-dim); }
.reading h2 { font-size: 1.5rem; margin-top: 2.75rem; color: var(--lilac); }

.spread {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0 2.5rem;
}
.spread figure { margin: 0; }
.spread img {
  width: 100%; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}
.spread figcaption {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.spread figcaption strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.spread figcaption em {
  display: block; margin-top: 0.35rem;
  font-style: normal; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--peach);
}

.draft-note {
  margin: 2.5rem 0;
  padding: 1.2rem 1.4rem;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: rgba(123, 94, 167, 0.08);
  color: var(--text-dim);
  font-size: 0.92rem;
}
.draft-note strong { color: var(--peach); }


/* "the decks are for sale" — a plain, findable line, not a shouty banner */
.for-sale {
  margin: 1.8rem 0 0;
  padding: 0.95rem 1.15rem;
  border-left: 2px solid var(--peach);
  background: rgba(242, 196, 148, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  color: var(--text) !important;
}
.for-sale a {
  color: var(--peach);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.for-sale a:hover { color: var(--text); }


/* ----------------------------------------------------- app store badge -- */
.app-cta { margin-top: 2.2rem; }
.app-cta-label {
  margin: 0 0 0.85rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--peach);
}
.app-badge {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 1.4rem 0.7rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(201, 179, 220, 0.06);
  color: var(--text);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}
.app-badge:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: var(--lilac);
  background: rgba(201, 179, 220, 0.13);
}
.app-badge svg { width: 27px; height: 27px; flex-shrink: 0; }
.app-badge span {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--sans); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.app-badge small {
  font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1px;
}

/* ------------------------------------------------------------ signup ---- */
.signup { text-align: center; }
.signup-panel {
  position: relative;
  max-width: 42rem; margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(2.5rem, 5vw, 3.75rem);
  overflow: hidden;
}
.signup-panel .starburst {
  top: 50%; left: 50%;
  width: 420px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.06;
}
.signup-panel > * { position: relative; z-index: 1; }
.signup h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); }
.signup p { color: var(--text-dim); margin: 0 auto 2rem; max-width: 30rem; }

.field-row { display: flex; gap: 0.7rem; max-width: 30rem; margin-inline: auto; }
input[type="email"], input[type="text"], textarea {
  width: 100%;
  font-family: var(--sans); font-size: 0.97rem;
  color: var(--text);
  background: rgba(27, 19, 32, 0.75);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field-row input[type="email"] { border-radius: 999px; }
input::placeholder, textarea::placeholder { color: #7C6C8B; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--lilac);
  background: rgba(27, 19, 32, 0.95);
}
textarea { resize: vertical; min-height: 150px; }

/* ------------------------------------------------------------ contact --- */
.contact-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-form .field { margin-bottom: 1.1rem; }
.contact-form label {
  display: block; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.5rem;
}
.contact-aside p { color: var(--text-dim); }
.contact-aside .socials { margin-top: 1.5rem; gap: 1.2rem; }
.contact-aside .socials svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------- footer --- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 3.5rem 0 2.5rem;
  text-align: center;
}
.site-footer .brand { justify-content: center; margin-bottom: 1.6rem; }
.site-footer .brand { display: flex; justify-content: center; }
.site-footer .brand img { height: 124px; }
.site-footer .socials { justify-content: center; margin-bottom: 1.75rem; }
.footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.5rem; margin-bottom: 1.75rem;
}
.footer-nav a {
  font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
}
.footer-nav a:hover { color: var(--lilac); }
.copyright { font-size: 0.82rem; color: #7C6C8B; margin: 0; }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 940px) {
  .hero-inner, .about-grid, .deck-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-inner { gap: 3.5rem; }
  .about-grid { gap: 3rem; }
  .portrait { max-width: 340px; }
  .deck-grid { gap: 3rem; }
  .card-fan { order: -1; min-height: 330px; }
  .cover-fan { min-height: 320px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 4.5rem 0; }
  .wrap { width: calc(100% - 2.5rem); }

  .nav-toggle { display: block; }
  .site-header .socials { display: none; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(27, 19, 32, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
  .nav a::after { display: none; }

  .banner-logo img { width: min(420px, 88vw); }
  .site-footer .brand img { height: 96px; }
  .site-banner { padding: 1.4rem 0 1.2rem; }
  .field-row { flex-direction: column; }
  .book-grid { grid-template-columns: 1fr; }
}

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