/* ==========================================================================
   readings.css  -  the readings landing page
   ==========================================================================
   Keeps the right column (menu / about / player) - someone deciding on a
   reading benefits from the nav and Ash's face being right there.
   ========================================================================== */
.rd-frame{
  background:#FFFFFB; border:3px solid #5A3268;
  box-shadow:6px 6px 0 rgba(0,0,0,.30);
  margin-bottom:18px;
}
.rd-banner{
  padding:26px 28px 22px;
  background:linear-gradient(180deg,#f7f2f6,#FFFFFB);
  border-bottom:3px solid #C7C4D9;
}
.rd-kicker{
  margin:0 0 8px; font-family:basiic,monospace; font-size:12.5px;
  letter-spacing:1px; color:#7A6E96;
}
.rd-h1{
  margin:0 0 12px; font-family:basiic,monospace;
  font-size:clamp(20px,3.4vw,30px); color:#5A3268;
  text-shadow:2px 2px 0 #f6ebbe;
}
.rd-lede{
  margin:0; max-width:60ch; font-family:rainyhearts,monospace;
  font-size:17px; line-height:1.6; color:#524860;
}

/* ---- a reading ---- */
.rd-card{
  margin:22px 28px; padding:18px 20px;
  background:#FFFFFB; border:2px solid #a99fc0;
  box-shadow:4px 4px 0 rgba(90,50,104,.18);
}
.rd-card--feature{
  border:3px solid #5A3268;
  box-shadow:5px 5px 0 rgba(216,24,136,.25);
  background:linear-gradient(180deg,#fffdf4,#FFFFFB);
}
.rd-head{
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:2px dashed #C7C4D9;
}
.rd-icon{ width:32px; height:32px; image-rendering:pixelated; }
.rd-titles{ flex:1 1 200px; }
.rd-title{
  margin:0; font-family:basiic,monospace; font-size:19px; color:#5A3268;
}
.rd-hook{
  margin:5px 0 0; font-family:rainyhearts,monospace; font-size:16px;
  color:#d81888;
}
.rd-price{
  font-family:basiic,monospace; font-size:20px; color:#2e2838;
  padding:5px 11px; background:#f6ebbe; border:2px solid #5A3268;
  box-shadow:2px 2px 0 rgba(90,50,104,.3);
}
.rd-body{
  margin:0 0 16px; font-family:rainyhearts,monospace;
  font-size:16px; line-height:1.65; color:#2e2838;
}
.rd-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; }
.rd-h4{
  margin:0 0 7px; font-family:basiic,monospace; font-size:12.5px;
  letter-spacing:.4px; color:#7A6E96;
}
.rd-h4::before{ content:"\2726 "; color:#C7A8B8; }
.rd-list{ margin:0 0 4px; padding-left:18px; }
.rd-list li{
  font-family:rainyhearts,monospace; font-size:15px; line-height:1.55;
  margin-bottom:3px;
}
.rd-note{
  margin:0 0 14px; font-family:rainyhearts,monospace;
  font-size:15px; line-height:1.55; color:#524860;
}
.rd-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:2px dashed #C7C4D9;
}
.rd-len{ font-family:basiic,monospace; font-size:12px; color:#6e6278; }
.rd-book{
  font-family:basiic,monospace; font-size:14px; text-decoration:none;
  padding:9px 16px; color:#2e2838; background:#ffe14d;
  border:2px solid #5A3268; box-shadow:3px 3px 0 rgba(90,50,104,.35);
}
.rd-book:hover{ background:#fff08a; color:#d81888; }
.rd-book:active{ box-shadow:none; transform:translate(3px,3px); }
.rd-learn{
  font-family:basiic,monospace; font-size:12.5px;
  color:#0FA3A3; text-decoration:none;
}
.rd-learn:hover{ color:#d81888; text-decoration:underline; }

/* ---- helper + cta ---- */
.rd-help{
  margin:22px 28px; padding:16px 20px;
  background:#f7f2f6; border-left:5px solid #C7C4D9;
}
.rd-h2{
  margin:0 0 10px; font-family:basiic,monospace; font-size:15px; color:#5A3268;
}
.rd-help p{
  margin:0 0 10px; font-family:rainyhearts,monospace;
  font-size:16px; line-height:1.6;
}
.rd-help a{ color:#0FA3A3; }
.rd-help a:hover{ color:#d81888; }
.rd-cta{
  padding:24px 28px 28px; text-align:center;
  background:linear-gradient(180deg,#FFFFFB,#f7f2f6);
  border-top:3px solid #C7C4D9;
}
.rd-cta-line{
  margin:0 0 12px; font-family:basiic,monospace; font-size:16px; color:#5A3268;
}
.rd-cta-btn{
  display:inline-block; padding:14px 30px;
  font-family:basiic,monospace; font-size:18px; text-decoration:none;
  color:#2e2838; background:#ffe14d;
  border:3px solid #5A3268; box-shadow:4px 4px 0 rgba(90,50,104,.4);
}
.rd-cta-btn:hover{ background:#fff08a; color:#d81888; }
.rd-cta-btn:active{ box-shadow:none; transform:translate(4px,4px); }
.rd-cta-note{
  margin:12px 0 0; font-family:rainyhearts,monospace;
  font-size:14px; color:#6e6278;
}

/* homepage preview: the see-all line under the three packages */
.pkg-more{ margin:12px 0 0; }
.pkg-more a, .pkg-all a{
  font-family:basiic,monospace; font-size:12.5px;
  color:#0FA3A3; text-decoration:none;
}
.pkg-more a:hover, .pkg-all a:hover{ color:#d81888; text-decoration:underline; }
.pkg-all{ margin:14px 0 4px; text-align:center; }

@media (max-width:900px){
  .rd-cols{ grid-template-columns:1fr; }
  .rd-card{ margin:16px; padding:14px 16px; }
  .rd-banner{ padding:20px 16px 18px; }
  .rd-help{ margin:16px; }
}
.rd-home{ margin:18px 0 0; }

/* ---- MOBILE: buttons big enough to hit ---------------------------------- */
@media (max-width: 900px){
  .rd-foot{ gap: 10px; }
  .rd-book{
    flex: 1 1 auto; text-align: center;
    min-height: 48px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 15px;
  }
  .rd-learn{
    flex: 1 1 100%;
    min-height: 44px; display: inline-flex; align-items: center;
    font-size: 13.5px;
  }
  .rd-help a{
    display: inline-block; padding: 2px 0;
  }
  .rd-cta-btn{ min-height: 54px; display: inline-flex;
    align-items: center; justify-content: center; width: 100%;
    box-sizing: border-box; }
}

/* =====================================================================
   THE DECK LOOK (28 Oct 2026)
   Ash: "update the readings page to reflect our deck style. and the
   readings page is missing the furthest down scrolling background.. the
   one with the planet glyphs".
   The course deck's own pieces (index.css's DECK block, from pp_deck.py):
   a night-sky title card with the clouds drifting along its foot; recipe
   paper; cream cards edged in gold with an offset shadow; nes headings
   over the pink dashes (div3); rainyhearts at a reading size; Luna P for
   bullets; the yellow pencil on the "not sure which one?" card; the pink
   star sticker on the featured reading. Behind it all, the glyph tile
   sliding the way it does on the homepage and the posts.
   Every sprite at a whole-number size; no fades (hover and press snap).
   NOTE: build_readings.py is BEHIND this page (the dash pass and the
   wording edits were made here, not in readings_data.py), so this page
   and this sheet are the source. Do not rebuild it from the script.
   Appended LAST so it wins over the older rules above.
   ===================================================================== */

/* the glyph tile, sliding (index.css's glyphslide: whole tiles, no jump) */
body.rd{
  background-image: url("images/backgrounds/glyphtile.png"),
                    linear-gradient(#cce4ff, rgba(250, 250, 250, 0)) !important;
  background-repeat: repeat, no-repeat !important;
  background-color: transparent !important;
  background-attachment: scroll, scroll !important;
  animation: glyphslide 200s linear infinite !important;
}
@media (prefers-reduced-motion: reduce){ body.rd{ animation: none !important; } }

/* the page: one sheet of recipe paper in the purple frame */
body.rd .rd-frame{
  background: #fffaf0 url("images/backgrounds/recipepaper.png") repeat;
  background-size: 150px 150px;
  border: 3px solid #5A3268;
  box-shadow: 6px 6px 0 rgba(90, 50, 104, .35);
}

/* the title card: the deck's night sky, gold nes title, clouds drifting */
body.rd .rd-banner{
  position: relative;
  overflow: visible;      /* the clouds hang over the banner's foot onto the paper (Ash 28 Oct) */
  padding: 34px 32px 104px;   /* back to its height, as the posts' (Ash 29 Oct: "can we undo that now?"; push303 had made it 89) */
  text-align: center;
  background: #2c1820 url("images/backgrounds/chartstars.png") repeat;
  border-bottom: 3px solid #c9a24e;
}
body.rd .rd-banner::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -23px; height: 82px;   /* 35px lower than first built (Ash 28 Oct: "lowered about 20px", then "about 10px more", then "about 5px lower"), hanging onto the paper */
  pointer-events: none;
  background: url("images/dividers/div2.gif") repeat-x 0 0 / 694px 82px;
  image-rendering: pixelated;
  animation: dk-drift 90s steps(694) infinite;
}
@media (prefers-reduced-motion: reduce){ body.rd .rd-banner::after{ animation: none; } }
/* THE GOLD STRIP UNDER THE CLOUDS (push274, Ash: "there used to be a gold strip right below the cloud
   divider just poking out"). The cloud gif is solid for its top 64px and gappy for its last 18; the
   card's gold edge used to show through those gaps. With the clouds at -23px the edge sits behind the
   solid part, so a 5px gold shadow under the card puts the gold back in the gaps. If the clouds move,
   this offset is their bottom offset minus 18 (23 - 18 = 5). */
body.rd .rd-banner{ box-shadow: 0 5px 0 #c9a24e; }
body.rd .rd-kicker{
  position: relative; z-index: 1;
  margin: 0 0 14px; font-family: basiic, monospace; font-size: 14px;
  letter-spacing: 1.4px; text-transform: uppercase; color: #c3b59a;
}
body.rd .rd-h1{
  position: relative; z-index: 1;
  margin: 0 0 16px; font-family: nes, monospace; font-size: 32px; font-weight: 400;
  line-height: 1.4; color: #fad761; text-shadow: 3px 3px 0 #5A3268;
}
body.rd .rd-lede{
  position: relative; z-index: 1;
  margin: 0 auto; max-width: 32em; font-family: rainyhearts, monospace;
  font-size: 20px; line-height: 1.5; color: #e7dcc6;
}

/* a reading: a cream card edged in gold, the deck's quote-card shadow */
body.rd .rd-card{
  position: relative;
  margin: 34px 28px; padding: 20px 22px 16px;
  background: #fffdf6;
  border: 2px solid #c9a24e; border-radius: 9px;
  box-shadow: 4px 4px 0 #f2c0bf;
}
/* the featured one: a heavier edge, the yellow shadow, the pink star sticker
   stuck on its bottom-right corner (the top-left one sat on the planet icon) */
body.rd .rd-card--feature{
  border-width: 3px;
  box-shadow: 5px 5px 0 #f6ebbe, 5px 5px 0 2px #e3cf8a;
}
body.rd .rd-card--feature::before{
  content: "";
  position: absolute; right: -32px; bottom: -36px; width: 95px; height: 98px; z-index: 2;
  pointer-events: none; transform: rotate(12deg);
  filter: drop-shadow(2px 3px 0 rgba(90, 50, 104, .22));
  background: url("images/graphics/pinkstar-sticker.png") no-repeat center / contain;
}
body.rd .rd-head{
  align-items: center; gap: 14px;
  padding-bottom: 0; margin-bottom: 14px; border-bottom: 0;
}
/* the icons at 2x their native size (they were squeezed to 32px, which is
   1.6x for a 20px gif and smears it) */
body.rd .rd-icon{ width: 40px; height: 40px; image-rendering: pixelated; flex: 0 0 auto; }
body.rd .rd-icon[src$="coffee.gif"]{ width: 36px; height: 44px; }
body.rd .rd-title{
  margin: 0; padding-bottom: 9px;
  font-family: nes, monospace; font-size: 16px; font-weight: 400; line-height: 1.6; color: #5A3268;
  background: url("images/dividers/div3.gif") repeat-x left bottom;
  background-size: 396px 2px; image-rendering: pixelated;
}
body.rd .rd-hook{ margin: 7px 0 0; font-family: rainyhearts, monospace; font-size: 18px; color: #be4c62; }
body.rd .rd-price{
  font-family: basiic, monospace; font-size: 20px; color: #4a2a5c;
  padding: 6px 12px; background: #f6ebbe; border: 2px solid #5A3268;
  box-shadow: 3px 3px 0 #5A3268;
}
body.rd .rd-body{
  margin: 0 0 18px; font-family: rainyhearts, monospace;
  font-size: 19px; line-height: 1.5; color: #4a2a5c;
}
body.rd .rd-h4{
  margin: 0 0 8px; font-family: basiic, monospace; font-size: 13px;
  letter-spacing: 1.2px; text-transform: uppercase; color: #a33f86;
}
body.rd .rd-h4::before{ content: "\2726  "; color: #c9a24e; }
body.rd .rd-note{
  margin: 0 0 14px; font-family: rainyhearts, monospace;
  font-size: 18px; line-height: 1.45; color: #4a2a5c;
}
/* bullets: Luna P at its own size, beside each item's first line */
body.rd .rd-list{ list-style: none; margin: 0 0 4px; padding: 0; }
body.rd .rd-list li{
  position: relative; margin: 0 0 6px; padding-left: 24px;
  font-family: rainyhearts, monospace; font-size: 18px; line-height: 1.4; color: #4a2a5c;
}
body.rd .rd-list li::before{
  content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 21px;
  background: url("images/favicons/lunap.gif") no-repeat 0 0 / 14px 21px;
  image-rendering: pixelated;
}
/* the foot: the marching squares (div4tile: div4 with its missing 5px gap,
   so the tiles meet clean) across its top, then the length, the button and
   the codex link */
body.rd .rd-foot{
  margin-top: 16px; padding-top: 18px; border-top: 0;
  background: url("images/dividers/div4tile.gif") repeat-x left top;
  background-size: 360px 8px; image-rendering: pixelated;
}
body.rd .rd-len{ font-family: basiic, monospace; font-size: 13px; color: #7a6e96; }
/* the buttons: the homepage's yellow win98 button (the Big-3 yellow, a
   bevel in its own light and gold, the purple keyline, the 3px shadow) */
body.rd .rd-book,
body.rd .rd-cta-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: basiic, monospace; font-weight: 400; letter-spacing: 1px; text-decoration: none;
  color: #5A3268;
  background: linear-gradient(180deg, #fdf7dc 0%, #f6ebbe 55%, #f0dc98 100%);
  border: 2px solid #5A3268;
  box-shadow: inset 2px 2px 0 #fffcee, inset -2px -2px 0 #d9bf6a, 3px 3px 0 #5A3268;
}
body.rd .rd-book{ font-size: 16px; padding: 8px 16px; }
body.rd .rd-book:hover,
body.rd .rd-cta-btn:hover{ background: linear-gradient(180deg, #fffbea 0%, #faf1cc 55%, #f5e3a8 100%); color: #a33f86; }
body.rd .rd-book:active,
body.rd .rd-cta-btn:active{
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 0 #d9bf6a, inset -2px -2px 0 #fffcee, 1px 1px 0 #5A3268;
}
body.rd .rd-learn{ font-family: basiic, monospace; font-size: 13px; color: #a33f86; }
body.rd .rd-learn:hover{ color: #5A3268; }

/* "not sure which one?": the deck's important-note card, the yellow pencil
   lying across its top edge (300x17 drawn at 2x) */
body.rd .rd-help{
  position: relative;
  margin: 48px 28px 30px; padding: 30px 24px 14px;
  background: #fffdf6; border: 2px solid #c9a24e; border-left-width: 2px; border-radius: 9px;
  box-shadow: 4px 4px 0 #f6ebbe;
}
body.rd .rd-help::before{
  content: ""; position: absolute; left: 18px; top: -19px; width: 600px; max-width: calc(100% - 36px); height: 34px;
  background: url("images/dividers/yellowpencil.png") no-repeat 0 0 / 600px 34px; image-rendering: pixelated;
}
body.rd .rd-h2{
  margin: 0 0 12px; font-family: nes, monospace; font-size: 16px; font-weight: 400; line-height: 1.6; color: #5A3268;
}
body.rd .rd-help p{
  margin: 0 0 10px; font-family: rainyhearts, monospace; font-size: 18px; line-height: 1.5; color: #4a2a5c;
}
body.rd .rd-help a{ color: #a33f86; }
body.rd .rd-help a:hover{ color: #5A3268; }

/* the close: the winged hearts over it, the yellow button, home */
body.rd .rd-cta{
  padding: 64px 28px 30px; text-align: center; border-top: 0;
  background: url("images/dividers/wingheartsdiv.gif") repeat-x center 8px;
  background-size: 952px 48px; image-rendering: pixelated;
}
body.rd .rd-cta-line{ margin: 0 0 16px; font-family: nes, monospace; font-size: 16px; color: #5A3268; }
body.rd .rd-cta-btn{ font-size: 20px; padding: 12px 30px; }
body.rd .rd-cta-note{ margin: 14px 0 0; font-family: rainyhearts, monospace; font-size: 17px; color: #7a6e96; }

@media (max-width: 900px){
  body.rd .rd-banner{ padding: 24px 16px 96px; }   /* back to 96 (push303 had made it 81) */
  body.rd .rd-h1{ font-size: 24px; }
  body.rd .rd-card{ margin: 28px 14px; padding: 16px 14px 12px; }
  body.rd .rd-card--feature::before{ right: -10px; bottom: -30px; width: 63px; height: 65px; }
  body.rd .rd-help{ margin: 44px 14px 24px; }
  body.rd .rd-book{ min-height: 48px; }
  body.rd .rd-cta-btn{ width: 100%; box-sizing: border-box; min-height: 54px; }
}

/* ---- the labels and the key facts (Ash 28 Oct: "a little more styling
   around bold words and important info") ----
   each "what you get / best for / what i need" label a little tag; the
   session length a tag in the Big-3 yellow; the hook in the deck's bitmap
   bold; the links in the help card bold too */
body.rd .rd-h4{
  display: inline-block; margin: 0 0 10px; padding: 3px 12px 2px; font-size: 12px;
  background: #fbe3ec; border: 1px solid #e9a7c2; border-radius: 999px;
}
body.rd .rd-h4::before{ color: #c9a24e; }
body.rd .rd-len{
  padding: 4px 10px 3px; font-size: 13px; color: #5A3268;
  background: #f6ebbe; border: 1px solid #d9bf6a; border-radius: 999px;
}
body.rd .rd-hook{ text-shadow: 1px 0 0 currentColor; }
body.rd .rd-help a{ text-shadow: 1px 0 0 currentColor; }