/* =========================================================
   Read page (Oct 2026): Beam cosmic desert, with the mascot
   Beam palette: midnight violet, deep purple, warm gold glow
   ========================================================= */
.read-page{--rd-ink:#1a1233;--rd-soft:#544d68;--rd-night:#0b0826;--rd-deep:#210052;--rd-gold:#e6c27a;--rd-violet:#7b4dff}
.read-page main{background:linear-gradient(180deg,#fbf8ff,#fdf8f4)}
.rd-eyebrow{margin:0 0 .9rem;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rd-gold)}
.rd-grad{background:linear-gradient(90deg,#f6d79a,#ffb38a 50%,#d79bff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero */
.rd-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,8vw,6rem);background:
  radial-gradient(60rem 22rem at 70% 105%,rgba(255,160,100,.35),transparent 70%),
  radial-gradient(40rem 30rem at 85% 30%,rgba(140,80,255,.35),transparent 70%),
  linear-gradient(180deg,var(--rd-night) 0%,#170d3f 55%,#2b1456 100%)}
.rd-stars{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1.5px 1.5px at 6% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 14% 62%,#ffffffb0 50%,transparent),radial-gradient(2px 2px at 24% 30%,#fff 50%,transparent),radial-gradient(1px 1px at 33% 80%,#ffffffa0 50%,transparent),radial-gradient(1.5px 1.5px at 41% 12%,#fff 50%,transparent),radial-gradient(1px 1px at 47% 52%,#ffffffb0 50%,transparent),radial-gradient(1px 1px at 55% 24%,#ffffffa0 50%,transparent),radial-gradient(2px 2px at 9% 88%,#fff 50%,transparent)}
.rd-hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:5rem;background:#fbf8ff;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -14px 40px -10px rgba(255,190,140,.55)}
.rd-hero__grid{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
@media (min-width:60rem){.rd-hero__grid{grid-template-columns:1.05fr .95fr}}
.rd-crumb ol{color:#c9bde6}
.rd-crumb a{color:#e8defc}
.rd-hero h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 1.2rem;color:#fff}
.rd-lead{font-size:clamp(1.05rem,.95rem + .4vw,1.2rem);line-height:1.65;color:#ddd3f2;max-width:34rem;margin:0}
.rd-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.rd-filter{font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-weight:600;backdrop-filter:blur(6px);transition:background .2s}
.rd-filter span{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;background:rgba(255,255,255,.16);font-size:.78rem}
.rd-filter:hover{background:rgba(255,255,255,.16)}
.rd-filter.is-on{background:linear-gradient(90deg,#f3cf8f,#ffb08a);color:#2a1456;border-color:transparent}
.rd-filter.is-on span{background:rgba(42,20,86,.15)}
.rd-filter:focus-visible{outline:3px solid #f3cf8f;outline-offset:3px}
.rd-hero__mascot{position:relative}
.rd-hero__mascot img{display:block;width:100%;height:auto;border-radius:32px;-webkit-mask-image:radial-gradient(75% 80% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(75% 80% at 50% 50%,#000 60%,transparent 100%)}

/* Featured */
.rd-section{padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,8vw,6rem)}
.rd-feature{display:grid;overflow:hidden;border-radius:30px;background:#fff;border:1px solid #ece2fb;box-shadow:0 30px 60px -40px rgba(60,30,110,.55);margin-bottom:3rem}
@media (min-width:52rem){.rd-feature{grid-template-columns:1.1fr 1fr}}
.rd-feature__img img{display:block;width:100%;height:100%;object-fit:cover;min-height:16rem}
.rd-feature__body{padding:clamp(1.6rem,4vw,2.8rem);display:flex;flex-direction:column;justify-content:center}
.rd-feature h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:.4rem 0 .8rem}
.rd-feature h3 a,.rd-card h3 a{color:var(--rd-ink);text-decoration:none}
.rd-feature h3 a:hover,.rd-card h3 a:hover{color:var(--rd-violet)}
.rd-feature p{color:var(--rd-soft);line-height:1.65;margin:0 0 1.4rem;font-size:1.08rem}
.rd-btn{align-self:flex-start;display:inline-flex;gap:.4rem;padding:.8rem 1.4rem;border-radius:999px;background:linear-gradient(90deg,#3a1478,#6b46ff);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 12px 26px -12px rgba(80,40,180,.7)}

/* Chips and meta */
.rd-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;font-size:.82rem;color:#7a7290}
.rd-chip{display:inline-block;padding:.22rem .65rem;border-radius:999px;font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.rd-chip--sleep{background:#ece8ff;color:#2b2a6b}
.rd-chip--mind{background:#f1e6ff;color:#4a1f8c}
.rd-chip--rec{background:#ffe9e4;color:#9a3a4a}
.rd-chip--feature{background:linear-gradient(90deg,#f3cf8f,#ffb08a);color:#3a1a2a}

/* Grid of cards */
.rd-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:40rem){.rd-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.rd-grid{grid-template-columns:repeat(3,1fr)}}
.rd-card{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#fff;border:1px solid #ece2fb;box-shadow:0 20px 40px -32px rgba(60,30,110,.6);transition:transform .25s,box-shadow .25s}
.rd-card:hover{transform:translateY(-3px);box-shadow:0 28px 50px -30px rgba(60,30,110,.6)}
.rd-card[hidden],.rd-feature[hidden]{display:none}
.rd-card__art{position:relative;display:block;height:8.5rem;overflow:hidden}
.rd-card__arc{position:absolute;left:50%;top:38%;width:150%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border-top:2px solid rgba(255,255,255,.85);box-shadow:0 -8px 30px -6px rgba(255,200,170,.8)}
.rd-card__glyph{position:absolute;left:1.2rem;bottom:1rem;width:2.4rem;height:2.4rem}
.rd-card__glyph svg{width:100%;height:100%}
.rd-card--sleep .rd-card__art{background:radial-gradient(60% 80% at 70% 110%,rgba(234,200,143,.55),transparent 70%),linear-gradient(160deg,#0a0f26,#231d4f)}
.rd-card--sleep .rd-card__glyph{color:#eac88f}
.rd-card--mind .rd-card__art{background:radial-gradient(60% 80% at 70% 110%,rgba(255,170,110,.6),transparent 70%),linear-gradient(160deg,#210052,#5a2a9a)}
.rd-card--mind .rd-card__glyph{color:#ffd59a}
.rd-card--rec .rd-card__art{background:radial-gradient(60% 80% at 70% 110%,rgba(255,170,140,.85),transparent 70%),linear-gradient(160deg,#8a6cff,#d48ad6 60%,#ffb79a)}
.rd-card--rec .rd-card__glyph{color:#fff}
.rd-card__body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.4rem}
.rd-card h3{font-size:1.18rem;line-height:1.3;letter-spacing:-.01em;margin:.7rem 0 .5rem}
.rd-card__body>p:not([class]){color:var(--rd-soft);line-height:1.6;margin:0 0 1.2rem;font-size:.97rem}
.rd-card__foot{margin:auto 0 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.88rem}
.rd-card__more{font-weight:700;color:var(--rd-violet);text-decoration:none}
.rd-card__app{color:#8a83a0}
.rd-card__app a{color:inherit}
.rd-empty{text-align:center;color:var(--rd-soft);margin-top:2rem}

/* Where to start */
.rd-start{position:relative;overflow:hidden;padding:clamp(4rem,8vw,6rem) 0;background:linear-gradient(180deg,#fdf8f4 0%,#f4eaff 45%,#ffe9df 100%)}
.rd-start::before{content:"";position:absolute;left:50%;top:55%;width:150%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border-top:2px solid rgba(255,255,255,.95);box-shadow:0 -10px 50px -10px rgba(255,170,200,.7)}
.rd-start__grid{position:relative;display:grid;gap:2.5rem;align-items:center}
@media (min-width:56rem){.rd-start__grid{grid-template-columns:.9fr 1.1fr}}
.rd-start__grid img{width:100%;height:auto;border-radius:28px;box-shadow:0 30px 60px -36px rgba(80,40,160,.6)}
.rd-start .rd-eyebrow{color:#7b4dff}
.rd-start h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.8rem);line-height:1.1;letter-spacing:-.03em;color:var(--rd-ink);margin:0 0 1.4rem}
.rd-start__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.rd-start__list a{display:flex;flex-direction:column;gap:.15rem;padding:1rem 3rem 1rem 1.3rem;position:relative;border-radius:18px;background:rgba(255,255,255,.82);border:1px solid #eadff8;text-decoration:none;transition:transform .2s}
.rd-start__list a::after{content:"\2192";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);color:#7b4dff;font-size:1.2rem}
.rd-start__list a:hover{transform:translateX(3px)}
.rd-start__list strong{color:var(--rd-ink)}
.rd-start__list span{color:var(--rd-soft);font-size:.9rem}
.rd-start__more{margin:1.4rem 0 0;color:var(--rd-soft)}