/* ==========================================================================
   course.css  -  the course landing page
   ==========================================================================
   Sibling of readings.css: same frame, same right column, different product.
   Where readings sells a session, this sells ten weeks - so it has to carry
   an arc, a fit test, and objections, which readings does not need.
   ========================================================================== */
.co-frame{
  background:#FFFFFB; border:3px solid #5A3268;
  box-shadow:6px 6px 0 rgba(0,0,0,.30);
  margin-bottom:18px;
}

/* ---- banner ---- */
.co-banner{
  padding:26px 28px 22px;
  background:linear-gradient(135deg,#f7f2f6,#fdf6fa 60%,#FFFFFB);
  border-bottom:3px solid #C7C4D9;
}
.co-kicker{
  margin:0 0 10px; font-family:basiic,monospace; font-size:12.5px;
  letter-spacing:1px; color:#d81888;
}
.co-h1{
  margin:0 0 10px; font-family:basiic,monospace;
  font-size:clamp(21px,3.6vw,32px); line-height:1.25; color:#5A3268;
  text-shadow:2px 2px 0 #f6ebbe;
}
.co-part{
  margin:0 0 12px; font-family:basiic,monospace; font-size:12.5px;
  color:#7A6E96;
}
.co-hook{
  margin:0; font-family:rainyhearts,monospace; font-size:18px;
  line-height:1.5; color:#2e2838; max-width:52ch;
}

/* ---- the facts strip ----
   The five things someone needs before they can even consider it. High on
   the page on purpose: nobody reads a syllabus before they know the price. */
.co-facts{
  list-style:none; margin:0; padding:16px 28px;
  background:#f7f2f6; border-bottom:2px solid #C7C4D9;
}
.co-facts li{
  display:flex; gap:12px; align-items:baseline;
  padding:5px 0; flex-wrap:wrap;
}
.co-k{
  flex:0 0 62px; font-family:basiic,monospace; font-size:11.5px;
  color:#7A6E96; text-transform:lowercase;
}
.co-v{
  flex:1 1 auto; font-family:rainyhearts,monospace; font-size:16px;
  color:#2e2838;
}
.co-alt{ font-size:14px; color:#6e6278; }

/* ---- blocks ---- */
.co-block{ padding:22px 28px 6px; }
.co-h2{
  margin:0 0 12px; font-family:basiic,monospace; font-size:15px;
  color:#5A3268; padding-bottom:8px; border-bottom:2px dashed #C7C4D9;
}
.co-p{
  margin:0 0 1em; font-family:rainyhearts,monospace;
  font-size:16.5px; line-height:1.7; color:#2e2838;
}
.co-note{
  margin:0 0 16px; font-family:rainyhearts,monospace;
  font-size:14.5px; line-height:1.6; color:#524860;
  padding:10px 14px; background:#f7f2f6; border-left:4px solid #C7C4D9;
}
.co-note a{ color:#0FA3A3; }

/* ---- fit test ----
   The "maybe not" column is the honest half and it is why people trust the
   yes column. A page that only says yes reads as a pitch. */
.co-fit{ display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; }
.co-list{ margin:0; padding-left:20px; }
.co-list li{
  font-family:rainyhearts,monospace; font-size:15.5px; line-height:1.6;
  margin-bottom:8px;
}
.co-list a{ color:#0FA3A3; }
.co-list--yes li::marker{ content:"\2726  "; color:#7A8C7E; }
.co-list--no li::marker{ content:"\00B7  "; color:#C7A8B8; }

/* ---- the ten weeks ---- */
.co-weeks{ list-style:none; margin:0; padding:0; counter-reset:none; }
.co-week{
  display:flex; gap:14px; align-items:flex-start;
  padding:13px 14px; margin-bottom:8px;
  background:#FFFFFB; border:2px solid #e4dfec;
  border-left:5px solid #C7C4D9;
}
.co-week:hover{ border-left-color:#d81888; background:#fffdf4; }
.co-num{
  flex:0 0 auto; font-family:basiic,monospace; font-size:15px;
  color:#FFFFFB; background:#5A3268;
  padding:5px 8px; line-height:1;
}
.co-wk-body{ flex:1 1 auto; min-width:0; }
.co-wk-title{
  margin:0 0 5px; font-family:basiic,monospace; font-size:14.5px;
  color:#5A3268; line-height:1.3;
}
.co-wk-blurb{
  margin:0 0 6px; font-family:rainyhearts,monospace;
  font-size:15px; line-height:1.55; color:#2e2838;
}
.co-wk-link{
  font-family:basiic,monospace; font-size:11.5px;
  color:#0FA3A3; text-decoration:none;
}
.co-wk-link:hover{ color:#d81888; text-decoration:underline; }

/* ---- faq ---- */
.co-faq{ margin:0; }
.co-faq dt{
  margin:0 0 4px; font-family:basiic,monospace; font-size:13px;
  color:#5A3268;
}
.co-faq dt::before{ content:"\2726 "; color:#C7A8B8; }
.co-faq dd{
  margin:0 0 15px; padding-left:16px;
  font-family:rainyhearts,monospace; font-size:15.5px; line-height:1.6;
  color:#2e2838; border-left:2px solid #f0ebf4;
}

/* ---- cta ---- */
.co-cta{
  margin-top:18px; padding:24px 28px 26px; text-align:center;
  background:linear-gradient(180deg,#FFFFFB,#f7f2f6);
  border-top:3px solid #C7C4D9;
}
.co-cta-line{
  margin:0 0 14px; font-family:basiic,monospace; font-size:13px;
  color:#7A6E96;
}
.co-cta-btn{
  display:inline-block; padding:15px 32px;
  font-family:basiic,monospace; font-size:17px; text-decoration:none;
  color:#2e2838; background:#ffe14d;
  border:3px solid #5A3268; box-shadow:4px 4px 0 rgba(90,50,104,.4);
}
.co-cta-btn:hover{ background:#fff08a; color:#d81888; }
.co-cta-btn:active{ box-shadow:none; transform:translate(4px,4px); }
.co-cta-note{
  margin:14px auto 0; max-width:44ch;
  font-family:rainyhearts,monospace; font-size:14px; color:#6e6278;
}
.co-home{ margin:20px 0 0; }

/* homepage box: the syllabus link */
.course-cta{
  display:inline-block; margin-top:10px; padding:9px 14px;
  font-family:basiic,monospace; font-size:12px; text-decoration:none;
  color:#2e2838; background:#ffe14d;
  border:2px solid #5A3268; box-shadow:2px 2px 0 rgba(90,50,104,.35);
}
.course-cta:hover{ background:#fff08a; color:#d81888; }
.course-cta:active{ box-shadow:none; transform:translate(2px,2px); }

@media (max-width:900px){
  .co-fit{ grid-template-columns:1fr; gap:14px; }
  .co-banner, .co-facts, .co-block{ padding-left:16px; padding-right:16px; }
  .co-cta{ padding:20px 16px 22px; }
  .co-cta-btn{ width:100%; box-sizing:border-box; min-height:54px;
    display:inline-flex; align-items:center; justify-content:center; }
  .co-week{ padding:11px; }
  .co-k{ flex:0 0 100%; }
}

/* ---- MOBILE: order + tap targets ----------------------------------------
   .co-frame is a new top-level block, so like every other one it needs a
   slot in index.css's mobile order scale or it lands above the menu.
   Same lesson as .rd-frame and .senshi-art. */
@media (max-width: 1249px){
  .co-frame{
    order: 4;
    width: 100%; max-width: 100%;
    margin: 12px 0 20px 0;
    box-sizing: border-box;
  }
}
@media (max-width: 900px){
  .co-wk-link{
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 4px 0;
    font-size: 12.5px;
  }
  .co-note a, .co-list a{
    display: inline-block; padding: 2px 0;
  }
  .co-week{ gap: 10px; }
  .co-num{ font-size: 13px; padding: 4px 6px; }
  .co-wk-title{ font-size: 14px; }
  .co-wk-blurb{ font-size: 14.5px; }
  .co-faq dt{ font-size: 12.5px; }
  .co-k{ font-size: 12px; }
}

/* =====================================================================
   THE DECK LOOK (28 Oct 2026), the readings page's sibling.
   Ash, looking at this page: "it needs updating too", after asking for
   the readings page "to reflect our deck style" and its missing glyph
   background. The same pieces as readings.css's block (index.css's DECK
   block, from pp_deck.py): the glyph tile sliding behind; recipe paper;
   the night-sky title card with the clouds drifting along its foot; nes
   headings over the pink dashes (div3); rainyhearts at a reading size;
   cream cards edged in gold with an offset shadow; Luna P bullets; the
   yellow pencil on the note card; the yellow win98 button. The facts
   wear a favicon each, as on the homepage's course.exe.
   Every sprite at a whole-number size; no fades (hover and press snap).
   NOTE: build_course.py's page template is BEHIND this page (wording
   edits were made here: the dash pass, the note and the closing line),
   so this page and this sheet are the source. course_data.py carries
   the same week 8 fix as the page.
   Appended LAST so it wins over the older rules above.
   ===================================================================== */

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

/* the page: one sheet of recipe paper in the purple frame */
body.co .co-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.co .co-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.co .co-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.co .co-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.co .co-banner{ box-shadow: 0 5px 0 #c9a24e; }
/* the words over the sky; the twinkle canvas (chartstars.js puts it first in the
   card, push272) keeps index.css's absolute placement under them */
body.co .co-banner > :not(.nkw-stars){ position: relative; z-index: 1; }
body.co .co-kicker{
  margin: 0 0 14px; font-family: basiic, monospace; font-size: 14px;
  letter-spacing: 1.4px; text-transform: uppercase; color: #f6a5bd;
}
body.co .co-h1{
  margin: 0 0 14px; font-family: nes, monospace; font-size: 32px; font-weight: 400;
  line-height: 1.4; color: #fad761; text-shadow: 3px 3px 0 #5A3268;
}
body.co .co-part{
  margin: 0 0 12px; font-family: basiic, monospace; font-size: 14px;
  letter-spacing: .6px; color: #c3b59a;
}
body.co .co-hook{
  margin: 0 auto; max-width: 30em; font-family: rainyhearts, monospace;
  font-size: 21px; line-height: 1.5; color: #e7dcc6;
}

/* the facts: a cream card edged in gold, a favicon at its native 20px
   beside each one (in CSS, so the page's words are untouched) */
body.co .co-facts{
  margin: 30px 28px 6px; padding: 12px 18px;
  background: #fffdf6; border: 2px solid #c9a24e; border-bottom-width: 2px; border-radius: 9px;
  box-shadow: 4px 4px 0 #f6ebbe;
}
body.co .co-facts li{ align-items: center; gap: 10px; padding: 5px 0; flex-wrap: nowrap; }
body.co .co-facts li::before{
  content: ""; flex: 0 0 20px; width: 20px; height: 20px;
  background: no-repeat center / 20px 20px; image-rendering: pixelated;
}
body.co .co-facts li:nth-child(1)::before{ background-image: url("images/favicons/pinkclock.gif"); }
body.co .co-facts li:nth-child(2)::before{ background-image: url("images/favicons/amethystcrystal.gif"); }
body.co .co-facts li:nth-child(3)::before{ background-image: url("images/favicons/moneybag.gif"); }
body.co .co-facts li:nth-child(4)::before{ background-image: url("images/favicons/key.gif"); }
body.co .co-facts li:nth-child(5)::before{ background-image: url("images/favicons/teachergrading.gif"); }
body.co .co-facts li:nth-child(6)::before{ background-image: url("images/favicons/pyramid.gif"); }
body.co .co-facts li:nth-child(7)::before{ background-image: url("images/favicons/diningroomtable.gif"); }
body.co .co-facts li:nth-child(8)::before{ background-image: url("images/favicons/camcorder.gif"); }
body.co .co-facts li:nth-child(9)::before{ background-image: url("images/favicons/starjar.gif"); }
body.co .co-k{
  flex: 0 0 112px; font-family: basiic, monospace; font-size: 13px;
  letter-spacing: 1.2px; text-transform: uppercase; color: #a33f86;
}
body.co .co-v{ font-family: rainyhearts, monospace; font-size: 19px; color: #4a2a5c; }
body.co .co-alt{ font-size: 16px; color: #7a6e96; }

/* the sections: nes headings over the pink dashes, prose at a reading size */
body.co .co-block{ padding: 28px 28px 6px; }
body.co .co-h2{
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 0;
  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.co .co-p{
  margin: 0 0 .9em; font-family: rainyhearts, monospace;
  font-size: 19px; line-height: 1.55; color: #4a2a5c;
}

/* the fit test: Luna P beside the yeses, a quiet dot beside the not-yets */
body.co .co-list{ list-style: none; margin: 0; padding: 0; }
body.co .co-list li{
  position: relative; margin: 0 0 8px; padding-left: 24px;
  font-family: rainyhearts, monospace; font-size: 18px; line-height: 1.45; color: #4a2a5c;
}
body.co .co-list li::marker{ content: none; }
body.co .co-list--yes 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;
}
body.co .co-list--no li{ color: #6e6278; }
body.co .co-list--no li::before{ content: "\2727"; position: absolute; left: 2px; top: 0; color: #c9a24e; }
body.co .co-list a{ color: #a33f86; }

/* the note over the ten weeks: the deck's important-note card, the
   yellow pencil (300x17 at 2x) lying across its top */
body.co .co-note{
  position: relative;
  margin: 34px 0 22px; padding: 26px 20px 14px;
  font-family: rainyhearts, monospace; font-size: 18px; line-height: 1.5; color: #4a2a5c;
  background: #fffdf6; border: 2px solid #c9a24e; border-left-width: 2px; border-radius: 9px;
  box-shadow: 4px 4px 0 #f6ebbe;
}
body.co .co-note::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.co .co-note a{ color: #a33f86; }

/* the ten weeks: each a cream card edged in gold; its number a little
   night-sky tile in the title card's gold */
body.co .co-week{
  gap: 16px; align-items: flex-start;
  margin: 0 0 12px; padding: 14px 16px;
  background: #fffdf6; border: 2px solid #c9a24e; border-left-width: 2px; border-radius: 9px;
  box-shadow: 3px 3px 0 #f2c0bf;
}
body.co .co-week:hover{ border-color: #c9a24e; background: #fffaf0; }
body.co .co-num{
  flex: 0 0 auto; padding: 8px 8px 6px;
  font-family: nes, monospace; font-size: 16px; line-height: 1; color: #fad761;
  background: #2c1820 url("images/backgrounds/chartstars.png") repeat;
  border: 2px solid #c9a24e; border-radius: 6px; text-shadow: 2px 2px 0 #5A3268;
}
body.co .co-wk-title{
  margin: 2px 0 6px; font-family: nes, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; color: #5A3268;
}
body.co .co-wk-blurb{
  margin: 0 0 6px; font-family: rainyhearts, monospace; font-size: 18px; line-height: 1.45; color: #4a2a5c;
}
body.co .co-wk-link{ font-family: basiic, monospace; font-size: 13px; color: #a33f86; }
body.co .co-wk-link:hover{ color: #5A3268; }

/* the questions */
body.co .co-faq dt{
  margin: 0 0 6px; font-family: basiic, monospace; font-size: 14px;
  letter-spacing: .6px; color: #a33f86;
}
body.co .co-faq dt::before{ content: "\2726  "; color: #c9a24e; }
body.co .co-faq dd{
  margin: 0 0 18px; padding-left: 18px;
  font-family: rainyhearts, monospace; font-size: 18px; line-height: 1.5; color: #4a2a5c;
  border-left: 2px dashed #f2c0bf;
}

/* the close: the winged hearts over it, the yellow button, home */
body.co .co-cta{
  margin-top: 10px; 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.co .co-cta-line{ margin: 0 0 16px; font-family: nes, monospace; font-size: 16px; color: #5A3268; }
body.co .co-cta-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 30px; font-family: basiic, monospace; font-size: 20px; 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.co .co-cta-btn:hover{ background: linear-gradient(180deg, #fffbea 0%, #faf1cc 55%, #f5e3a8 100%); color: #a33f86; }
body.co .co-cta-btn:active{
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 0 #d9bf6a, inset -2px -2px 0 #fffcee, 1px 1px 0 #5A3268;
}
body.co .co-cta-note{ margin: 14px auto 0; font-family: rainyhearts, monospace; font-size: 17px; color: #7a6e96; }

@media (max-width: 900px){
  body.co .co-banner{ padding: 24px 16px 96px; }   /* back to 96 (push303 had made it 81) */
  body.co .co-h1{ font-size: 24px; }
  body.co .co-facts{ margin: 24px 14px 4px; padding: 10px 12px; }
  body.co .co-facts li{ flex-wrap: wrap; }
  body.co .co-facts li{ row-gap: 2px; }
  body.co .co-k{ flex: 0 0 auto; }
  /* on a phone each fact's words sit on their own line, under its label */
  body.co .co-v{ flex: 1 0 100%; padding-left: 30px; box-sizing: border-box; }
  body.co .co-block{ padding: 22px 14px 4px; }
  body.co .co-cta-btn{ width: 100%; box-sizing: border-box; min-height: 54px; }
}

/* ---- the labels and the key facts (Ash 28 Oct: "can we use a larger
   font for the cohort titles? and a little more styling around bold
   words and important info") ----
   the week titles up a size (nes at 2x its 8px grid); each fact's label a
   little pink tag; the facts that decide it (the cost, the deposit, the
   start; their words wrapped in <b class="co-key"> on the page) in the
   deck's bitmap bold under a yellow highlighter; the questions as tags */
body.co .co-wk-title{ font-size: 16px; margin: 0 0 8px; }
body.co .co-num{ font-size: 16px; padding: 9px 9px 7px; }
body.co .co-k{
  flex: 0 0 auto; min-width: 116px; box-sizing: border-box; text-align: center;
  padding: 3px 8px 2px; font-size: 12px;
  background: #fbe3ec; border: 1px solid #e9a7c2; border-radius: 999px; color: #a33f86;
}
body.co .co-key{
  font-weight: 400; padding: 0 3px; text-shadow: 1px 0 0 currentColor; color: #5A3268;
  background: linear-gradient(transparent 50%, #f6ebbe 50%, #f6ebbe 90%, transparent 90%);
}
body.co .co-faq dt{
  display: inline-block; margin: 0 0 8px; padding: 4px 12px 3px;
  font-size: 14px; color: #5A3268;
  background: #fbe3ec; border: 1px solid #e9a7c2; border-radius: 999px;
}
body.co .co-faq dt::before{ color: #c9a24e; }
body.co .co-faq dd{ margin-left: 10px; }
body.co .co-note a,
body.co .co-list a{ text-shadow: 1px 0 0 currentColor; }
@media (max-width: 900px){
  body.co .co-wk-title{ font-size: 13px; }
  body.co .co-k{ min-width: 0; }
}

/* =====================================================================
   NATAL-CHART'S LOOK (push349; Ash 29 Oct: "please update course.html to match the new style and formatting of
   natal-chart. keep favicons and the divider at te bottom and the buttons at the bottom"). The posts' pieces
   (post.css), here for the course page's own classes: Arcade headings with the flicker and the rainbow, basiic words,
   plum Arcade capitals, a words' box with the gradient banner. The favicons, the winged hearts and the buttons as
   they were. The course page does not load post.css, so the fonts and the animations are declared here as well.
   Appended last so it wins.
   ===================================================================== */
@font-face{ font-family: arcadeN; src: url("fonts/ARCADE_N.ttf"); }
@font-face{ font-family: arcadeI; src: url("fonts/arcadei.ttf"); }
@font-face{ font-family: smalltalkpp; src: url("fonts/SmalltalkSansPP-Regular.ttf"); }

/* the title: crisp Pixel NES, 3 screen pixels to its pixel, on one line */
body.co .co-h1{ font-size: 30.72px; text-shadow: 3px 3px 0 #5A3268; }
body.co .co-hook{ font-family: basiic, smalltalkpp, monospace; font-size: 20px; line-height: 1.6; }

/* the facts: the words in basiic, the favicons as they were */
body.co .co-v{ font-family: basiic, smalltalkpp, monospace; font-size: 20px; line-height: 1.5; }
body.co .co-alt{ font-size: 16px; }

/* the headings, as the posts' */
body.co .co-h2{
  font-family: arcadeN, nes, monospace; font-size: 24.519px; line-height: 1.5; letter-spacing: 1px;
  color: #e0457b; text-shadow: none; text-wrap: pretty;
}
body.co .co-h2 > .pd-ht{ position: relative; left: 0; animation: pd-hflick 30s steps(1, end) infinite; animation-delay: var(--hd-at, 0s); }
body.co .co-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);
}
@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.co .co-h2 > .pd-ht, body.co .co-h2 .pd-tx{ animation: none; } }
/* "for you if" and "maybe not" one over the other, so each heading has the width for one line */
body.co .co-fit{ display: block; }
body.co .co-fit-col{ width: auto; max-width: none; margin: 0 0 22px; }

/* the intro: the words' box, its gradient banner down the right side, the words in basiic with a plum capital */
body.co .co-block:has(> .co-p){
  position: relative; margin: 28px 10px 6px; padding: 18px 38px 4px 18px; border-radius: 10px;
  background: rgba(255, 253, 246, .55);
}
body.co .co-block:has(> .co-p)::after{
  content: ""; position: absolute; right: 6px; top: 10px; bottom: 10px; width: 26px;
  border: 1px solid #c9a24e; border-radius: 4px;
  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.co .co-p{ margin: 0 0 1.25em; font-family: basiic, smalltalkpp, monospace; font-size: 24px; line-height: 1.6; color: #4a2a5c; }
body.co .co-p::first-letter{
  font-family: arcadeN, nes, monospace; font-size: 24.519px; color: #5A3268; text-transform: uppercase;
  text-shadow: 1px 1px 0 #f2c0bf; padding-right: 1px;
}

/* the lists, the note, the weeks, the questions: basiic */
body.co .co-list li{ font-family: basiic, smalltalkpp, monospace; font-size: 20px; line-height: 1.6; padding-left: 26px; }
body.co .co-note{ font-family: basiic, smalltalkpp, monospace; font-size: 20px; line-height: 1.6; }
body.co .co-wk-title{ font-size: 20.48px; line-height: 1.4; }
body.co .co-wk-blurb{ font-family: basiic, smalltalkpp, monospace; font-size: 20px; line-height: 1.6; }
body.co .co-wk-link{ font-size: 16px; }
body.co .co-faq dt{ font-size: 16px; }
body.co .co-faq dd{ font-family: basiic, smalltalkpp, monospace; font-size: 20px; line-height: 1.6; }

@media (max-width: 900px){
  body.co .co-h1{ font-size: 20.48px; text-shadow: 2px 2px 0 #5A3268; }
  body.co .co-block:has(> .co-p){ margin: 22px 4px 6px; padding: 14px 38px 2px 12px; }
  body.co .co-wk-title{ font-size: 15.36px; }
}