/* =====================================================================
   post.css · THE POST LOOK (28 Oct 2026)
   Ash: "please go through this blog post and update it using the
   appropriate tools that we have created inside the deck. please also
   update the blog styling to reflect the deck... and make this standard
   moving forward."
   ONE sheet for every post in the deck look. A post switches it on with
   two things: <link href="post.css" rel="stylesheet"/> after index.css,
   and the class "pd" on <body>. Nothing else on the page changes.
   The pieces are the deck's (index.css's DECK block, from pp_deck.py) and
   the readings and course pages': the glyph tile sliding behind; one
   sheet of recipe paper in the purple frame; the night-sky title card with
   the SNES twinkle and the clouds drifting along its foot; nes headings over the pink dashes
   (div3); rainyhearts at a reading size; bold in the deck's bitmap bold;
   the deck's tools in their own night-sky boxes, each named on a pink
   tag; the closing pitch on the important-note card under the yellow
   pencil; the codex links as tags.
   Every sprite at a whole-number size; no fades (hover and press snap).
   First worn by rising.html (push270).
   THE TITLE CARD TWINKLES (push272, Ash: "we need the snes twinkle star
   effect for the title background"): the header carries
   class="post-head codex-head dk-stars" data-stars="still" and the page
   loads js/chartstars.js: the deck's Star Road field, twinkling in place
   (no drift, Ash: "no moving.. too much drift"). Every post in this look
   does the same.
   ===================================================================== */

/* the glyph tile, sliding (index.css's glyphslide: whole tiles, no jump) */
body.pd{
  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.pd{ animation: none !important; } }

/* the page: one sheet of recipe paper in the purple frame */
body.pd article.post{
  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.pd .post-head{
  position: relative; overflow: visible;   /* the clouds hang over the card's foot onto the paper */
  padding: 30px 32px 108px;   /* back to its height (Ash 29 Oct: "can we undo that now?"; push302 had made it 93) */
  text-align: center;
  background: #2c1820 url("images/backgrounds/chartstars.png") repeat;
  border-bottom: 3px solid #c9a24e;
}
body.pd .post-head::after{
  /* THE CLOUDS' HEIGHT, THE STANDARD (Ash 28 Oct: "please adjust the cloud banner again. make sure its lower from now
     on", then "cloud strip needs to be about 5px lower"): 23px below the card's foot, hanging onto the paper, as on
     the readings and course pages (35px lower than first built). Every title card with the drifting clouds sits them here. */
  content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 82px; pointer-events: none; z-index: 1;
  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.pd .post-head::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.pd .post-head{ box-shadow: 0 5px 0 #c9a24e; }
/* the words over the sky; the twinkle canvas keeps its absolute placement under them */
body.pd .post-head > :not(.nkw-stars){ position: relative; z-index: 1; }
/* the kicker: wing, type and status as the course page's little tags */
body.pd .codex-kicker{ display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body.pd .codex-kicker > span{
  display: inline-block; margin: 0; padding: 3px 10px 2px;
  font-family: basiic, monospace; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #a33f86; background: #fbe3ec; border: 1px solid #e9a7c2; border-radius: 999px; box-shadow: none;
}
body.pd .codex-kicker .codex-status--ripe{ color: #5A3268; background: #f6ebbe; border-color: #c9a24e; }
body.pd .post-h1{
  margin: 0 0 12px; font-family: nes, monospace; font-size: 32px; font-weight: 400; line-height: 1.35;
  letter-spacing: 0; color: #fad761; text-shadow: 3px 3px 0 #5A3268; -webkit-text-stroke: 0;
}
body.pd .codex-subtitle{
  margin: 0 0 10px; font-family: rainyhearts, monospace; font-size: 22px; line-height: 1.4; color: #f6a5bd;
}
body.pd .codex-summary{
  margin: 0 auto 14px; max-width: 32em; font-family: rainyhearts, monospace; font-size: 19px; line-height: 1.5; color: #e7dcc6;
}
body.pd .post-head-meta{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
body.pd .codex-updated{ font-family: basiic, monospace; font-size: 13px; letter-spacing: .5px; color: #c3b59a; }
body.pd .post-head-meta .post-tag{
  padding: 3px 10px 2px; font-family: basiic, monospace; font-size: 12px; letter-spacing: 1px;
  color: #5A3268; background: #f6ebbe; border: 1px solid #c9a24e; border-radius: 999px;
}

/* ---- the words: rainyhearts at a reading size ---- */
body.pd .post-content{ padding: 30px 34px 30px; }
/* (only the post's own paragraphs: a tool's words keep the tool's colours. A post whose sections are runs,
   the paragraphs beside the meme tab's banner (natal-chart, push275), reads the same) */
body.pd .post-content > p, body.pd .post-content > .pp-run > p, body.pd .post-cta p{
  margin: 0 0 .95em; font-family: rainyhearts, monospace; font-size: 19px; line-height: 1.6; color: #4a2a5c;
}
body.pd .post-content > p.post-lede, body.pd .post-content > .pp-run > p.post-lede{ font-size: 21px; line-height: 1.55; color: #5A3268; }
/* no line under it in its box (Ash 29 Oct: "there is an extra divider inside the 1st paragraph box. remove plz"): index.css 20.3's dashed rule and extra room were for a lede with no box */
body.pd .post-content > .pp-run > p.post-lede{ border-bottom: 0; padding-bottom: 0; margin-bottom: .95em; }
/* THE TEXT'S TWO LEVELS (Ash 28 Oct: "I also just don't feel like there is enough contrast/variety in the text
   styling inside the blog. even the 'highlighted' works barely visually LOOK different than the text"; of four
   mockups she chose D). A bold word or phrase inside a sentence: rose #be4c62 in bitmap bold (no smeared bold), in
   paragraphs, lists and the closing card alike. A key line: a paragraph that is one bold line and nothing else
   (class pd-key, put on by post_keylines.py), or a key sentence marked pp-keyline (natal-chart): plum on the yellow
   marker, #fad761 at 85% across the lower half of the line, carried onto every line it wraps to. (Before: every bold
   was plum, a shade off the body ink, and any paragraph with a single bold word in it got a pale highlighter.) */
body.pd .post-content > p b, body.pd .post-content > p strong, body.pd .post-content > :is(ul, ol) b,
body.pd .post-content > .pp-run > p b, body.pd .post-content > .pp-run > :is(ul, ol) b, body.pd .post-cta b{
  font-weight: 400; color: #be4c62; text-shadow: 1px 0 0 currentColor;
}
body.pd .post-content > p.pd-key > b, body.pd .post-content > .pp-run > p.pd-key > b,
body.pd .post-content > .pp-run > p b.pp-keyline, body.pd .post-content > p b.pp-keyline{
  color: #5A3268; padding: 0 3px;
  background: linear-gradient(transparent 52%, rgba(250, 215, 97, .85) 52%, rgba(250, 215, 97, .85) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.pd .post-content > p a, body.pd .post-content > .pp-run > p a, body.pd .post-cta a{ color: #a33f86; text-shadow: 1px 0 0 currentColor; }
body.pd .post-content > p a:hover, body.pd .post-content > .pp-run > p a:hover, body.pd .post-cta a:hover{ color: #5A3268; }
body.pd .post-content > p .gloss, body.pd .post-content > .pp-run > p .gloss{ color: #a33f86; }

/* THE WORDS' BOX (Ash 28 Oct: "I feel like the purple rainy hearts text on the yellow background is hard to read..
   but I don't want to get rid of it. can we add a super translucent background around the text sections? I think I
   want the box to start below the heading of each section", then "A": a box around the words only, a tool breaks it).
   Every run of paragraphs (and lists) sits on a soft cream box: #fffdf6 at 55%, so the paper still shows through;
   10px corners; it starts under a heading (or under the title card, for the opening) and ends where a tool, the next
   heading or the closing card starts. It hugs the 680px reading width (18px of box either side of the words). Done
   on the paragraphs themselves, one continuous box, so a post needs no extra markup. A post built of runs (the meme
   tab's banner, natal-chart) boxes the run, its banner inside on the right. */
body.pd .post-content > :is(p, ul, ol):not(.codex-source){
  max-width: 716px; margin: 0 -18px; padding: 0 18px .95em;
  background: rgba(255, 253, 246, .55);
}
body.pd .post-content > :is(ul, ol){ padding-left: calc(18px + 1.4em); }
/* the first of a run: the box's top */
body.pd .post-content > :is(p, ul, ol):not(.codex-source):not(:is(p, ul, ol):not(.codex-source) + *){
  padding-top: 16px; border-top-left-radius: 10px; border-top-right-radius: 10px;
}
/* the last of a run: the box's foot, and the gap before what follows */
body.pd .post-content > :is(p, ul, ol):not(.codex-source):not(:has(+ :is(p, ul, ol):not(.codex-source))){
  padding-bottom: 14px; margin-bottom: 26px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
body.pd .post-content > .pp-run{
  margin: 0 -18px 26px; padding: 16px 38px 14px 18px; border-radius: 10px;   /* 38 on the right: the words stop 6px short of the banner (Ash 29 Oct: "let the text span a little further right"; was 46) */   /* 46px on the right: the banner and a little air */
  background: rgba(255, 253, 246, .55);
}
@media (max-width: 900px){
  body.pd .post-content > :is(p, ul, ol):not(.codex-source){ margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  body.pd .post-content > :is(ul, ol){ padding-left: calc(10px + 1.4em); }
  body.pd .post-content > .pp-run{ margin-left: -10px; margin-right: -10px; padding-left: 10px; }
}

/* THE GRADIENT BANNER AND THE MEME TAB, ON EVERY POST (Ash 28 Oct, from natal-chart: "there are gradient rainbow
   bars on the side with little tags inside? this is for memes. I want this in the style guide and incorporated into
   the other pages. If no meme, leave the tag off, but still block out with the gradient box"). Every run of a post's
   words is a block (.pp-run, put round the words by post_runs.py) with the banner down its right side, the box's full
   height: 26px, the P&P gradient, edged in gold. A run with a meme carries the pink tag on its banner instead (a
   button .pp-banner--tab with images/favicons/pinktag.gif, turned on its side): a click opens the meme in a Windows 98
   window to the banner's left, a click anywhere puts it away (js/memetab.js); about once a minute the tag flicks, four
   snapped frames, each tab at its own moment (--flick-at). Moved here from natal-chart's own style block, so every
   post has them. */
body.pd .post-content > .pp-run{ position: relative; display: flow-root; }
body.pd .pp-banner{
  position: absolute; right: 0; top: 4px; bottom: 6px; width: 26px; padding: 0; display: block;
  border: 1px solid #c9a24e; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #e8c0c8, #C7C4D9, #f6ebbe, #f2c0bf, #f5f4d6, #FFFFFA);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(0, 0, 0, .25);
}
body.pd .post-content > .pp-run > .pp-banner{ right: 6px; top: 10px; bottom: 10px; }
body.pd .pp-banner--tab{ cursor: pointer; }
body.pd .pp-banner--tab img{
  position: absolute; left: 50%; top: 50%; width: 62px; height: 13px;
  transform: translate(-50%, -50%) rotate(90deg); image-rendering: pixelated; transform-origin: 50% 50%;
  animation: pp-tagflick 67s steps(1, end) infinite; animation-delay: var(--flick-at, 0s);
}
body.pd .pp-banner--tab:hover{ filter: brightness(1.08); }
@keyframes pp-tagflick{
  0%, 97.4%   { transform: translate(-50%, -50%) rotate(90deg); }
  97.6%       { transform: translate(-52%, -50%) rotate(96deg) skewX(-6deg); }
  97.9%       { transform: translate(-49%, -50%) rotate(85deg) skewX(5deg); }
  98.2%       { transform: translate(-51%, -50%) rotate(93deg) skewX(-2deg); }
  98.5%, 100% { transform: translate(-50%, -50%) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce){ body.pd .pp-banner--tab img{ animation: none; } }
body.pd .pp-meme-win{
  position: absolute; right: 36px; top: 0; z-index: 6; width: min(560px, calc(100% - 44px));
  background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 3px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}
body.pd .pp-meme-win[hidden]{ display: none; }
body.pd .pp-meme-bar{
  display: flex; justify-content: space-between; align-items: center; padding: 3px 6px;
  background: linear-gradient(90deg, #e8c0c8, #C7C4D9, #f6ebbe, #f2c0bf, #f5f4d6, #FFFFFA); color: #4a2a5c;
  font-family: basiic, monospace; font-size: 12px; text-shadow: 0 1px 0 rgba(255, 253, 246, .6);
}
body.pd .pp-meme-x{
  display: inline-block; width: 16px; height: 14px; line-height: 12px; text-align: center;
  background: #c0c0c0; color: #000; border: 1px solid; border-color: #fff #404040 #404040 #fff; font-size: 12px;
}
body.pd .pp-meme-img{ display: block; width: 100%; height: auto; margin-top: 3px; }
/* THE MEMES IN THE WORDS (push320; Ash 29 Oct: "I think I want the memes embedded into the text and have the text
   wrap around. keep the vertical banner on the sides of paragraphs. when adding an image, give it a similar gradient
   frame. square, thin. the tag, keep the tag on the picture, and allow the picture to expand to the fullsize the way
   its displayed now."): a run with a meme shows it small at its top right, beside the banner, the words wrapping round
   it; a thin square frame of the banner's gradient, edged in gold; the pink tag across its top left corner, flicking as
   it did on the banner. A click opens the full-size window above, as before (.pp-meme-tab, js/memetab.js). The
   banner stays, plain. */
body.pd .pp-meme-thumb{
  float: right; position: relative; width: min(280px, 46%); margin: 6px 0 12px 20px; padding: 4px;   /* Ash: "a little larger" (was min(240px, 42%)) */
  border: 1px solid #c9a24e; border-radius: 0; cursor: pointer;
  background: linear-gradient(180deg, #e8c0c8, #C7C4D9, #f6ebbe, #f2c0bf, #f5f4d6, #FFFFFA);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(0, 0, 0, .25);
}
body.pd .pp-meme-thumb:hover{ filter: brightness(1.05); }
body.pd .pp-meme-thumb > .pp-meme-timg{ display: block; width: 100%; height: auto; }
body.pd .pp-meme-thumb > .pp-meme-tag{
  position: absolute; left: -6px; top: -6px; width: 62px; height: 13px; image-rendering: pixelated;   /* 1x: Ash, "make the tag smaller" (was 2x) */
  animation: pp-tagflick-flat 67s steps(1, end) infinite; animation-delay: var(--flick-at, 0s);
}
@keyframes pp-tagflick-flat{
  0%, 97.4%   { transform: none; }
  97.6%       { transform: translate(-2px, 0) rotate(6deg) skewX(-6deg); }
  97.9%       { transform: translate(1px, 0) rotate(-5deg) skewX(5deg); }
  98.2%       { transform: translate(-1px, 0) rotate(3deg) skewX(-2deg); }
  98.5%, 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce){ body.pd .pp-meme-thumb > .pp-meme-tag{ animation: none; } }
@media (max-width: 620px){ body.pd .pp-meme-thumb{ width: 50%; margin-left: 14px; } }   /* was 45% */
/* the words inside a run: lists as in the paragraphs; the closing card keeps its gap after a run */
body.pd .post-content > .pp-run > :is(ul, ol){ margin: 0 0 .95em; padding-left: 1.4em; }
body.pd .post-content > .pp-run + .post-cta{ margin-top: 50px; }

/* the headings: nes over the pink dashes, the favicon kept beside each */
body.pd .post-content > h2{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 42px 0 18px; padding: 0 0 12px; border: 0;
  font-family: nes, monospace; font-size: 17px; font-weight: 400; line-height: 1.6; letter-spacing: 0;
  color: #5A3268; text-shadow: none;
  background: url("images/dividers/div3.gif") repeat-x left bottom;
  background-size: 396px 2px; image-rendering: pixelated;
}
body.pd .post-content > h2 i{ font-style: normal; color: #a33f86; }
/* a favicon keeps the size its tag gives it (whole pixels: natal-chart's sunrise is 25x15); the post-emoji
   ones, which carry no size, at 20 */
body.pd .post-content > h2 img{ max-height: none; margin: 0; image-rendering: pixelated; flex: 0 0 auto; }
body.pd .post-content > h2 img.post-emoji{ width: 20px; height: 20px; }
body.pd .post-content > h2 img.post-emoji[src*="big-icons"]{ width: 32px; height: 32px; }
body.pd .post-content > p img.emo-inline, body.pd .post-content > .pp-run > p img.emo-inline{ vertical-align: -3px; image-rendering: pixelated; }
/* (a run used to reach down to the next heading and the heading gave up its gap; with the words' box the run
   ends above the heading, so the heading keeps its 42px) */

/* ---- the deck's tools in a post ----
   each in .pd-tool: a pink tag with the tool's name, then the tool as the
   deck draws it (its own night-sky box, its own buttons and cards) */
body.pd .pd-tool{ margin: 30px 0 34px; }
body.pd .pd-tool-tag{
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 4px 12px 3px;
  font-family: basiic, monospace; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #a33f86; background: #fbe3ec; border: 1px solid #e9a7c2; border-radius: 999px;
}
body.pd .pd-tool-tag::before{ content: "\25B6"; font-size: 10px; color: #c9a24e; }
body.pd .pd-tool .post-figure{ margin: 0; }
/* a tool whose foot is one panel (its buttons and notes) takes the full
   width under the wheel, not half of it */
body.pd .pd-tool .tw-foot > .tw-hb:only-child{ flex: 1 1 100%; width: 100%; max-width: none; }
/* THE HOVER BOX PINNED UNDER THE WHEEL, as on the homepage's sky this month (Ash 28 Oct: "the scrolling feature
   you added to the sky of the month on the homepage... where the lower part of the box starts covering the wheel.
   Can you go back to the posts and adjust the tools to do just that when inside the website?"). A tool's foot (its
   hover box, its buttons, its caption) sticks to the bottom of the screen while the tool is on screen, so a card is
   in sight while the wheel is pointed at; the wheel slides up from behind it, and past the tool it lets go. It never
   rises above the wheel's top (it stays inside the stage). The full width of the stage, the gold rule along its top,
   the (c) kept over it. A phone scrolls as before, as the homepage does. The deck's slides don't carry post.css. */
@media (min-width: 621px){
  body.pd .pd-tool .tw-stage > .tw-foot{
    position: sticky; bottom: 0; z-index: 6;
    margin: 9px -9px 0; padding: 10px 9px 22px;
    background: #2c1820; box-shadow: 0 -2px 0 #c9a24e;
  }
  body.pd .pd-tool .tw-stage > .tw-copy{ z-index: 7; }
  /* SHRUNK (Ash 28 Oct: "shrink"): inside a pinned box the reading text a size smaller, as the homepage's, so it
     takes less of the screen from the wheel: the cards, the resting line and the caption 20 and 19 to 17, the sky
     pressed flat's notes 17 to 15, the day wheel's clock 18 to 16. The pixel display faces keep their sizes (the
     house cards' memory hook stays grapesoda at 32, 2x), and so do the buttons. A box of cards or notes takes
     three fifths of the width and its caption two, so its words wrap less; a box of controls stays half and half. */
  body.pd .pd-tool .tw-stage > .tw-foot .tw-hb-d, body.pd .pd-tool .tw-stage > .tw-foot .tw-hb-rest, body.pd .pd-tool .tw-stage > .tw-foot p.tw-side{ font-size: 17px; }
  body.pd .pd-tool .tw-stage > .tw-foot .fl-notes{ font-size: 15px; }
  body.pd .pd-tool .tw-stage > .tw-foot .tw-clock{ font-size: 16px; }
  body.pd .pd-tool .tw-stage > .tw-foot .hw-hookw{ font-size: 32px; }
  body.pd .pd-tool .tw-stage > .tw-foot > .tw-hb:not(.tw-hb--ctl){ flex: 3 1 0; max-width: none; }
  body.pd .pd-tool .tw-stage > .tw-foot > .tw-hb:not(.tw-hb--ctl) + .tw-side{ flex: 2 1 0; }
}
/* THE HOUSE WHEEL'S CAPTION AS ONE LINE (Ash 28 Oct, rising: "the house wheel hoverbox is too tall. do something
   with that yellow background box, get it out of the way or smaller or smth and let the left box that has the bulk of
   the hover info grow"). The cream box becomes a plain line of words across the top of the foot, and the hover box
   under it takes the whole width, so its cards wrap less and the box is shorter. The house wheel on every post. */
body.pd .pd-tool .tw-stage > .tw-foot:has(.hw-keybox){ flex-direction: column; gap: 6px; }
body.pd .pd-tool .tw-stage > .tw-foot:has(.hw-keybox) > .tw-hb:not(.tw-hb--ctl){ flex: 0 0 auto; width: 100%; max-width: none; }
body.pd .pd-tool .tw-stage > .tw-foot:has(.hw-keybox) > .tw-hb:not(.tw-hb--ctl) + p.tw-side{
  order: -1; flex: 0 0 auto; min-height: 0; margin: 0; padding: 0 8px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font-size: 15px; line-height: 1.4; text-align: center; color: #e7dcc6;
}
/* ...and on a screen wide enough, each house card in two columns (the number, the hook and what fits under them on
   the left; the rest on the right), so a card is about 200px tall instead of 340 and the pinned box about 340 instead
   of 490. The card's lines keep their order, top to bottom, then across. */
@media (min-width: 700px){
  body.pd .pd-tool .tw-stage > .tw-foot:has(.hw-keybox) .tw-hb-c{ flex-direction: column; flex-wrap: wrap; max-height: 210px; align-content: flex-start; align-items: stretch; column-gap: 24px; }
  body.pd .pd-tool .tw-stage > .tw-foot:has(.hw-keybox) .tw-hb-c > *{ width: calc(50% - 12px); }
}
/* THE HOME TEAM'S PANEL IN TWO COLUMNS on a wide screen (sect, push277): the player, its two buttons and the party
   in power on the left, the two rosters, Mercury and its note on the right, so the pinned box is half as tall and the
   turning wheel stays in sight above it. A narrower screen keeps the one column. */
@media (min-width: 1100px){
  body.pd .pd-tool .tw-ctl:has(> .sc-rosters){
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto);
    grid-auto-flow: column; column-gap: 18px; align-content: start;
  }
  body.pd .pd-tool .tw-ctl:has(> .sc-rosters) > .dk-player{ margin-top: 10px; }
  body.pd .pd-tool .tw-ctl:has(> .sc-rosters) > .sc-rosters{ margin-top: 10px; }
}
/* (the page clips with overflow: clip, not hidden: hidden makes the article its own scroller and a pinned box
   would never pin; clip cuts the same edge and leaves the screen as the thing it pins to) */
body.pd article.post{ overflow: clip; }
body.pd .pd-tool figcaption{ font-family: rainyhearts, monospace; font-size: 17px; color: #6e6278; }

/* ---- the closing pitch: the deck's important-note card under the pencil ---- */
body.pd .post-cta{
  position: relative;
  margin: 50px 0 22px; padding: 30px 24px 16px;
  background: #fffdf6; border: 2px solid #c9a24e; border-radius: 9px;
  box-shadow: 4px 4px 0 #f6ebbe;
}
body.pd .post-cta::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.pd .post-cta .post-cta-line{
  margin: 0 0 12px; font-family: nes, monospace; font-size: 16px; line-height: 1.6; color: #5A3268;
}
body.pd .post-cta .post-cta-sub{ font-size: 18px; line-height: 1.55; }
/* places to go from here (push334; Ash 29 Oct, natal-chart: "no ad for the course, a closing paragraph and places to go from here", then "give places to go from here it's own frame inside the box"): a frame of its own inside the card, a dashed gold edge on a warmer cream, its label a gold pill sitting on the frame's top edge; the links one to a line, each with a gold star */
body.pd .post-cta .post-cta-frame{ position: relative; margin: 26px 0 8px; padding: 22px 18px 8px; background: #fff6e4; border: 2px dashed #c9a24e; border-radius: 8px; }
body.pd .post-cta .post-cta-go{ position: absolute; left: 14px; top: -13px; margin: 0; padding: 4px 12px 3px; font-family: nes, monospace; font-size: 12px; line-height: 1.4; letter-spacing: 1px; color: #5A3268; background: #fad761; border: 2px solid #c9a24e; border-radius: 999px; box-shadow: 2px 2px 0 #f6ebbe; }
body.pd .post-cta .post-cta-list{ margin: 0 0 6px; padding: 0; list-style: none; font-family: rainyhearts, monospace; font-size: 18px; line-height: 1.55; color: #4a2a5c; }
body.pd .post-cta .post-cta-list li{ position: relative; margin: 0 0 4px; padding-left: 1.3em; }
body.pd .post-cta .post-cta-list li::before{ content: "\2726"; position: absolute; left: 0; top: 0; color: #c9a24e; }
body.pd .codex-source{ font-family: basiic, monospace; font-size: 13px; letter-spacing: .4px; color: #7a6e96; }
body.pd .post-content > .codex-source b{ color: #a33f86; text-shadow: none; }

/* ---- the codex links at the foot: the labels as tags, the links as cream chips ---- */
body.pd .codex-foot{
  padding: 18px 34px 26px; background: transparent;
  background-image: url("images/dividers/div3.gif"); background-repeat: repeat-x; background-position: left top;
  background-size: 396px 2px;
}
body.pd .codex-strip{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; }
body.pd .codex-foot .codex-strip .codex-strip-label{
  flex: 0 0 auto; opacity: 1; min-width: 0; padding: 3px 10px 2px;
  font-family: basiic, monospace; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #a33f86; background: #fbe3ec; border: 1px solid #e9a7c2; border-radius: 999px;
}
body.pd .codex-strip-links{ display: flex; flex-wrap: wrap; gap: 8px; }
body.pd .codex-foot .codex-strip .codex-link{
  padding: 4px 11px 3px; font-family: rainyhearts, monospace; font-size: 17px; text-decoration: none;
  color: #5A3268; background: #fffdf6; border: 2px solid #c9a24e; border-radius: 6px; box-shadow: 2px 2px 0 #f6ebbe;
}
/* "see also" stays lighter than "goes deeper" (the codex's own order of weight) */
body.pd .codex-foot .codex-strip--also .codex-link{ border-color: #e6d49c; box-shadow: 2px 2px 0 #f9f1d8; }
body.pd .codex-foot .codex-strip .codex-strip-label::before{ color: #c9a24e; }
body.pd .codex-foot .codex-strip .codex-link:hover{ color: #a33f86; background: #fffaf0; box-shadow: 2px 2px 0 #f2c0bf; }

@media (max-width: 900px){
  body.pd .post-head{ padding: 22px 16px 98px; }   /* back to 98 (push302 had made it 83) */
  body.pd .post-h1{ font-size: 24px; }
  body.pd .post-content{ padding: 24px 16px 24px; }
  body.pd .post-content > h2{ font-size: 14px; }
  body.pd .codex-foot{ padding: 16px 16px 22px; }
  /* the three clocks one under another, each at a size to read */
  body.pd .pd-tool .tc-row{ grid-template-columns: minmax(0, 1fr); max-width: 340px; margin: 0 auto; }
}

/* THE HEADINGS IN ARCADE (push323; Ash 29 Oct: "can we get a slightly more standout header", "right now I feel like
   headers are the same color as the text?" (they were: plum #5A3268 over #4a2a5c words), then of four looks: "go with
   A. the pink. do the flicker to interlaced. have this occur more frequently that the the next thing... followed by a
   pulsing rainbow gradient across the text like in option c ... one pulse... and low frame rate. kinda like the style
   of the sailor moon logo on the sailor moon landing page."). Arcade Normal in hot pink with a plum pixel shadow, at
   16.346px so each of the font's pixels is 2 screen pixels. The words sit in a span (.pd-ht) filled through
   background-clip: the pink, with a band of the rainbow parked off to the left (a filter draws the shadow; a
   text-shadow would show through the clipped fill). Every 30 seconds they flicker to Arcade Interlaced, three snapped
   frames, a CRT losing sync; every 90 seconds the rainbow (option C's colours in ten flat bands, the Sailor Moon logo's
   hard bands) crosses them once, a step every 150ms, the logo's pace. Each heading at its own moment (--hd-at).
   Nothing moves for reduced motion. After every other heading rule, the phones' 14px included. */
@font-face{ font-family: arcadeN; src: url("fonts/ARCADE_N.ttf"); }
@font-face{ font-family: arcadeI; src: url("fonts/arcadei.ttf"); }
body.pd .post-content > h2{
  display: block; font-family: arcadeN, nes, monospace; font-size: 16.346px; line-height: 1.75; letter-spacing: 1px;
  color: #e0457b; text-shadow: 2px 2px 0 #5A3268;
}
body.pd .post-content > h2 > img{ display: inline-block; vertical-align: -2px; margin: 0 0 0 10px; }
/* as wide as the words (Ash 29 Oct: "can they be wider to let the header span further"): index.css 20.1 capped headings at 680px, the old measure for bare paragraphs; the words in their boxes run to the banner's lane, 28px in from the column's edge, so the heading does too, its dashes with it */
@media (min-width: 901px){ body.pd .post-content > h2{ max-width: calc(100% - 20px); } }   /* as the words (was 28) */
/* and no favicon left alone on a line: the last word goes down with it */
body.pd .post-content > h2{ text-wrap: pretty; }
@media (max-width: 900px){ body.pd .post-content > h2{ max-width: none; } }
body.pd .post-content > h2:has(> .pd-ht){ text-shadow: none; }
body.pd .post-content > h2 > .pd-ht{
  position: relative; left: 0; color: transparent; text-shadow: none;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #e591e1 0.0em 0.6em, #f292ca 0.6em 1.2em, #ff94b4 1.2em 1.8em, #fdaf93 1.8em 2.4em, #fbca72 2.4em 3.0em, #ddd872 3.0em 3.6em, #a2db93 3.6em 4.2em, #67deb4 4.2em 4.8em, #64ccd2 4.8em 5.4em, #61baf0 5.4em 6.0em), linear-gradient(#e0457b, #e0457b);
  background-size: 6em 100%, 100% 100%; background-repeat: no-repeat; background-position: -6em 0, 0 0;
  filter: drop-shadow(2px 2px 0 #5A3268);
  animation: pd-hflick 30s steps(1, end) infinite, pd-hrain 90s steps(24, end) infinite;   /* Ash: "too often" (were 12s and 36s) */
  animation-delay: var(--hd-at, 0s), var(--hd-at, 0s);
}
body.pd .post-content > h2 > .pd-ht i{ color: transparent; }
@keyframes pd-hflick{
  0%      { font-family: arcadeN, nes, monospace; left: 0; }
  50%     { font-family: arcadeI, nes, monospace; left: 2px; }
  50.37% { font-family: arcadeN, nes, monospace; left: 0; }
  50.67% { font-family: arcadeI, nes, monospace; left: 0; }
  51.03%, 100% { font-family: arcadeN, nes, monospace; left: 0; }
}
@keyframes pd-hrain{
  0%       { background-position: -6em 0, 0 0; }
  4%, 100% { background-position: calc(100% + 6em) 0, 0 0; }
}
@media (prefers-reduced-motion: reduce){ body.pd .post-content > h2 > .pd-ht{ animation: none; } }

/* THE FOOT IN THE STARS (push328; Ash 29 Oct: "I'd rather it be a list of topics / subjects mentioned in the post",
   "can this be both?", "use this background for the box you'll be placing these inside. style as needed.", then for
   the codex pages: "yes every codex page."): the foot a box of the twinkling starfield (images/backgrounds/bg26.gif,
   tiled at its own pixels), a gold edge, rounded 10. The labels pills: "in this post" and "in the posts" pink, "goes
   deeper" gold, "see also" lilac; the links cream keys, a post's topics and the posts edged in pink (a topic's hover
   gives the glossary's one-line meaning, js/glossary.js); pink under the pointer. Rows built by topics_build.py. */
body.pd .codex-foot{
  margin: 6px 18px 26px; padding: 16px 20px 12px; border: 2px solid #c9a24e; border-radius: 10px;
  background: #1c1220 url("images/backgrounds/bg26.gif") repeat; background-size: auto; image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
}
body.pd .codex-foot .codex-strip{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
body.pd .codex-foot .codex-strip .codex-strip-label{
  flex: 0 0 auto; padding: 3px 10px 2px; font-family: basiic, monospace; font-size: 12px; letter-spacing: 1.2px;
  text-transform: uppercase; color: #a33f86; background: #fbe3ec; border: 1px solid #e9a7c2; border-radius: 999px;
}
body.pd .codex-foot .codex-strip .codex-strip-label::before{ content: "\2726"; margin-right: 5px; color: #c9a24e; }
body.pd .codex-foot .codex-strip--deeper .codex-strip-label{ color: #5A3268; background: #fad761; border-color: #c9a24e; }
body.pd .codex-foot .codex-strip--deeper .codex-strip-label::before{ color: #a33f86; }
body.pd .codex-foot .codex-strip--also .codex-strip-label{ color: #5A3268; background: #e4dcf2; border-color: #b9a9d6; }
body.pd .codex-foot .codex-strip-links{ display: flex; flex-wrap: wrap; gap: 8px; }
body.pd .codex-foot .codex-strip .codex-link{
  display: inline-block; padding: 4px 11px 3px; font-family: rainyhearts, monospace; font-size: 17px; line-height: 1.2;
  text-decoration: none; color: #5A3268; background: #fffdf6; border: 2px solid #c9a24e; border-radius: 6px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}
body.pd .codex-foot .codex-strip--topics .codex-link, body.pd .codex-foot .codex-strip--posts .codex-link{ border-color: #f0459a; }
body.pd .codex-foot .codex-strip--also .codex-link{ border-color: #b9a9d6; }
body.pd .codex-foot .codex-strip .codex-link:hover{ color: #fffdf6; background: #f0459a; border-color: #fffdf6; }
body.pd .codex-foot .codex-strip .codex-link:active{ box-shadow: none; transform: translate(2px, 2px); }
@media (max-width: 900px){ body.pd .codex-foot{ margin: 6px 0 22px; padding: 14px 14px 10px; } }

/* THE WORDS IN SMALLTALK SANS (push336; Ash 29 Oct: "I'm not convinced rainy hearts is the best main font", then of
   rainyhearts, Smalltalk Sans and Minecraft side by side: "yes to all"). Smalltalk Sans PP (fonts/, a copy of Smalltalk
   Sans 10 with its own apostrophes; OFL, fonts/OFL-SmalltalkSansPP.txt) for the posts' words: 18px (the font draws on
   12 pixels to the em; 24, the crisp size, read far too big), the opening line 20px; a bold word in its real bold,
   rose as before, without the smeared shadow. rainyhearts stays for the small things: captions, the foot's chips. */
@font-face{ font-family: smalltalkpp; src: url("fonts/SmalltalkSansPP-Regular.ttf"); font-weight: 400; font-style: normal; }
@font-face{ font-family: smalltalkpp; src: url("fonts/SmalltalkSansPP-Bold.ttf"); font-weight: 700; font-style: normal; }
@font-face{ font-family: smalltalkpp; src: url("fonts/SmalltalkSansPP-Italic.ttf"); font-weight: 400; font-style: italic; }
body.pd .post-content > p, body.pd .post-content > .pp-run > p, body.pd .post-cta p,
body.pd .post-content > :is(ul, ol), body.pd .post-content > .pp-run > :is(ul, ol), body.pd .post-cta .post-cta-list{
  font-family: smalltalkpp, monospace; font-size: 18px; line-height: 1.6;
}
body.pd .post-content > p.post-lede, body.pd .post-content > .pp-run > p.post-lede{ font-size: 20px; }
body.pd .post-content > p b, body.pd .post-content > p strong, body.pd .post-content > :is(ul, ol) b,
body.pd .post-content > .pp-run > p b, body.pd .post-content > .pp-run > :is(ul, ol) b, body.pd .post-cta b{
  font-weight: 700; text-shadow: none;
}

/* A CAPITAL TO START (push338; Ash 29 Oct: "there isn't enough... paragraphs looking like paragraphs seperate from each
   other? ... like I'm use to seeing capitalized letters", then of three looks: "b please"). Each paragraph of a post
   opens on a landmark: its first letter a pink Arcade capital (the headings' face, 16.346px so its pixel is 2 screen
   pixels, a 1px plum shadow), made a capital by the style alone so the words stay lowercase; and the paragraphs sit a
   little further apart. Not the "source:" lines, not the closing card. */
body.pd .post-content > p:not(.codex-source), body.pd .post-content > .pp-run > p{ margin-bottom: 1.25em; }
body.pd .post-content > p:not(.codex-source)::first-letter, body.pd .post-content > .pp-run > p::first-letter{
  font-family: arcadeN, nes, monospace; font-size: 16.346px; font-weight: 400; color: #e0457b;
  text-transform: uppercase; text-shadow: 1px 1px 0 #5A3268; padding-right: 1px;
}

/* THE WORDS IN BASIIC (push339; Ash 29 Oct: "change the font to basicc. we have a fallback if needed."). The posts'
   words in basiic, with Smalltalk Sans PP behind it: it fills in the curly apostrophes and quotes basiic has no glyph
   for, and is the whole fallback if basiic's licence says no (a message to cinni is on the to-do list). 18px (basiic is
   16 pixels to the em: 16 is crisp but small for a long page, 24 far too big), the opening line 20px; bold words in the
   bitmap bold, a 1px shadow (basiic has no bold). The pink Arcade capitals stay. */
body.pd .post-content > p, body.pd .post-content > .pp-run > p, body.pd .post-cta p,
body.pd .post-content > :is(ul, ol), body.pd .post-content > .pp-run > :is(ul, ol), body.pd .post-cta .post-cta-list{
  font-family: basiic, smalltalkpp, monospace; font-size: 18px; line-height: 1.7;
}
body.pd .post-content > p.post-lede, body.pd .post-content > .pp-run > p.post-lede{ font-size: 20px; }
body.pd .post-content > p b, body.pd .post-content > p strong, body.pd .post-content > :is(ul, ol) b,
body.pd .post-content > .pp-run > p b, body.pd .post-content > .pp-run > :is(ul, ol) b, body.pd .post-cta b{
  font-weight: 400; text-shadow: 1px 0 0 currentColor;
}

/* BASIIC AT 24 (push341; Ash 29 Oct: "can we try basicc at size 24?"): the words 24px (one and a half of basiic's
   16-pixel em), line height 1.6; the opening line 24px too (its plum sets it apart); each paragraph's pink Arcade capital
   24.519px, 3 screen pixels to its pixel, to stand with the bigger words. */
body.pd .post-content > p, body.pd .post-content > .pp-run > p, body.pd .post-cta p,
body.pd .post-content > :is(ul, ol), body.pd .post-content > .pp-run > :is(ul, ol), body.pd .post-cta .post-cta-list{
  font-size: 24px; line-height: 1.6;
}
body.pd .post-content > p.post-lede, body.pd .post-content > .pp-run > p.post-lede{ font-size: 24px; }
body.pd .post-content > p:not(.codex-source)::first-letter, body.pd .post-content > .pp-run > p::first-letter{ font-size: 24.519px; }

/* ONE-LINE HEADINGS, A SUBTITLE UNDER (push343; Ash 29 Oct: "it feels a lot less impactful with the larger basicc
   font... i don't want to just ask the header to grow", "it would also be nice for the headers to only span one line").
   A long heading splits into its title (the Arcade line, one line on a computer) and a subtitle under it (.pd-sub):
   basiic 20px in plum, no flicker, no rainbow, no shadow; the heading's dashes run under both. And the paragraphs'
   first-letter capitals plum with a pale pink shadow, so the pink Arcade belongs to the headings alone. */
body.pd .post-content > h2 > .pd-sub{
  display: block; margin: 6px 0 0; font-family: basiic, smalltalkpp, monospace; font-size: 20px; line-height: 1.4;
  letter-spacing: 0; color: #5A3268; text-shadow: none; filter: none; animation: none;
}
body.pd .post-content > p:not(.codex-source)::first-letter, body.pd .post-content > .pp-run > p::first-letter{
  color: #5A3268; text-shadow: 1px 1px 0 #f2c0bf;
}

/* HEADINGS A SIZE UP (push344; Ash 29 Oct: "can we go slightly bigger header font now?"): the titles 24.519px (Arcade's
   pixel is 133 of its 1087 units), letter spacing 1px as before; the subtitles stay basiic 20px. */
body.pd .post-content > h2{ font-size: 24.519px; }
body.pd .post-content > h2 > .pd-sub{ font-size: 20px; }
/* the favicon glued to the last word (.pd-nw, nowrap), so it never wraps onto a line alone at any width. The words
   sit in .pd-tx pieces, which carry the fill, the rainbow and the plum shadow; the favicon sits outside them, so it
   takes no shadow (Ash: "no foreshaddow on favicons"). The flicker stays on the whole heading; the last word's rainbow
   runs just after the rest's, so the band still crosses once, left to right. */
body.pd .post-content > h2 .pd-nw{ white-space: nowrap; }
body.pd .post-content > h2 .pd-nw > img{ display: inline-block; margin: 0 0 0 10px; vertical-align: 2px; }
body.pd .post-content > h2 > .pd-ht{
  color: #e0457b; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none;
  animation: pd-hflick 30s steps(1, end) infinite; animation-delay: var(--hd-at, 0s);
}
body.pd .post-content > h2 .pd-tx{
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #e591e1 0.0em 0.6em, #f292ca 0.6em 1.2em, #ff94b4 1.2em 1.8em, #fdaf93 1.8em 2.4em, #fbca72 2.4em 3.0em, #ddd872 3.0em 3.6em, #a2db93 3.6em 4.2em, #67deb4 4.2em 4.8em, #64ccd2 4.8em 5.4em, #61baf0 5.4em 6.0em), linear-gradient(#e0457b, #e0457b);
  background-size: 6em 100%, 100% 100%; background-repeat: no-repeat; background-position: -6em 0, 0 0;
  filter: drop-shadow(2px 2px 0 #5A3268);
  animation: pd-hrain 90s steps(24, end) infinite; animation-delay: var(--hd-at, 0s);
}
body.pd .post-content > h2 .pd-nw > .pd-tx{ animation-delay: calc(var(--hd-at, 0s) + 3.6s); }
body.pd .post-content > h2 .pd-tx i{ color: transparent; }
@media (prefers-reduced-motion: reduce){ body.pd .post-content > h2 > .pd-ht, body.pd .post-content > h2 .pd-tx{ animation: none; } }
/* the meme pictures bigger still (Ash: "bigger meme thumbnail still"): up to 360px, half the box at most; on a phone
   the words would be squeezed beside it at this size, so there it takes the box's width, above the words */
body.pd .pp-meme-thumb{ width: min(360px, 48%); }
@media (max-width: 620px){ body.pd .pp-meme-thumb{ float: none; display: block; width: auto; max-width: 100%; margin: 8px 0 16px; } }
/* and the page title a step up too (Ash: "you the title get a set up too/"): Pixel NES is 10.24 pixels to the em, so
   40.96px is 4 screen pixels to its pixel (was 32, 3.125), the plum shadow one font pixel (4px); on a phone 30.72px, 3
   to its pixel (was 24) */
body.pd .post-h1{ font-size: 40.96px; text-shadow: 4px 4px 0 #5A3268; }
@media (max-width: 900px){ body.pd .post-h1{ font-size: 30.72px; text-shadow: 3px 3px 0 #5A3268; } }