/* ==========================================================================
   senshi.css  -  the character profile pages
   ==========================================================================
   ONE stylesheet, NINE palettes. Every colour below is a var() set per-page
   in an inline <style> block by build_senshi.py. Nothing here is hardcoded
   to a character - that is what makes them read as one site with nine rooms
   instead of nine unrelated pages.

   THE BEATS (see palettes.py):
     --root       the 1999 hideaway bgcolor. FRAME ONLY, never a reading bg.
     --skirt      headers, rules
     --frontbow   links, active states, the eye-catch
     --backbow    secondary accent, deeper
     --accessory  small bright sparks
     --hair       tiny flourishes
     --ink        body text      --paper  reading surface     --wash  panels
   ========================================================================== */

/* ---- the article --------------------------------------------------------
   A senshi page now sits INSIDE the site cabinet, in the same centre column
   as any post, with the shared right column (menu, about card, CD player)
   beside it. So this file no longer paints the viewport - index.css does.
   Everything below styles ONE article and stays inside it.

   All palette vars are set on .senshi-art by build_senshi.py. Nothing here
   may set them on body: that would leak nine loud palettes into the site
   chrome, which is exactly what the frame is there to prevent. */
.senshi-art{
  position: relative;
  display: block;
  background: var(--paper);
  border: 3px solid var(--skirt);
  box-shadow: 5px 5px 0 rgba(0,0,0,.28);
  font-family: basiic, "Pixelated MS Sans Serif", monospace;
  color: var(--ink);
  line-height: 1.7;
  margin: 0 0 20px 0;
  overflow: hidden;
}

/* THE ROOT still appears - as a band across the top of the article rather
   than as the page background. The 1999 memory survives (mars IS dark red
   the moment you land) without a full-bleed wall of saturation behind the
   site chrome. */
.senshi-art::before{
  content:""; display:block; height:8px; background: var(--root);
  border-bottom: 2px solid var(--skirt);
}

/* ---- 1. BANNER ----------------------------------------------------------
   The nameplate. Skirt colour, because the skirt is the loudest beat and a
   banner is where loud belongs. */
.senshi-art .banner{
  position: relative;
  background: var(--skirt);
  border-bottom: 3px solid var(--backbow);
  padding: 14px 28px 13px;
}
.senshi-art .banner-plate{ max-width: 100%; }
.senshi-art .banner-kicker{
  margin: 0 0 5px; font-family:rainyhearts, monospace; font-size: 9px;
  letter-spacing: 1px; color: var(--onskirt); opacity:.82; text-transform: lowercase;
}
.senshi-art .banner-name{
  margin: 0; font-family:rainyhearts, monospace;
  font-size: clamp(15px, 3.4vw, 26px); line-height: 1.35;
  color: var(--onskirt);
  /* Two hard offset shadows, integer px. No blur - blur on a pixel face is
     how you get mush. */
  text-shadow: 2px 2px 0 var(--backbow), 4px 4px 0 rgba(0,0,0,.30);
}
.senshi-art .banner-civ{
  margin: 6px 0 0; font-size: 15px; color: var(--onskirt);
  font-weight: 600; letter-spacing: .5px;
}

/* the egg trigger. reads as decoration. */
.egg-flame{
  position:absolute; top:18px; right:20px;
  background:none; border:0; cursor:pointer;
  font-size: 22px; line-height:1; color: var(--trim);
  opacity:.55; transition: opacity .15s, transform .1s;
}
.egg-flame:hover{ opacity:1; }
.egg-flame.lit{ transform: scale(1.35) rotate(-8deg); opacity:1; }

/* the ward. fires on the fifth click. */
body.--senshi.warded::after{
  content:""; position:fixed; inset:0; z-index:99; pointer-events:none;
  background:
    repeating-linear-gradient(45deg,
      var(--frontbow) 0 3px, transparent 3px 26px);
  opacity:.35;
  animation: ward .5s steps(4) 0s 4;
}
@keyframes ward{ from{opacity:.45;} to{opacity:.12;} }

/* ---- 2. QUOTE ---- */
.senshi-art .quote{
  margin: 0; padding: 12px 28px 2px;
  font-size: clamp(17px,2.4vw,22px); font-weight:600; line-height:1.5;
  color: var(--head);
}
.senshi-art .quote-dub{
  margin: 0; padding: 2px 28px 12px;
  font-size: 13px; color: var(--ink); opacity:.62;
}

/* ---- 3. TOP: card + stat block ------------------------------------------
   The Hideaway put a portrait beside a stat list. Same idea, laid out so it
   stacks cleanly on a phone instead of scaling to nothing. */
.senshi-art .top{
  display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr);
  gap: 24px; padding: 4px 28px 28px;
}
.senshi-art .card{ margin:0; }
.senshi-art .card img{
  display:block; width:100%; height:auto;
  border: 3px solid var(--backbow);
  box-shadow: 4px 4px 0 var(--frontbow);
  /* A cream backing, for the two heroes that are keyed line art rather than an
     opaque carddass scan. Tuxedo Mask and Chibi Moon have no trading card in the
     set, so their hero is a Takeuchi figure with the paper cut away - and inside
     a border, transparent art shows whatever is behind the page and reads as a
     hole. Cream puts the paper back. Invisible on the nine, which are opaque
     JPEGs, so this is one line rather than a modifier class. */
  background:#fffdf6;
}
.senshi-art .card figcaption{
  margin-top:8px; font-family:rainyhearts, monospace; font-size:8px;
  letter-spacing:.5px; color: var(--ink); opacity:.55; text-align:center;
}

.senshi-art .stats{
  margin:0; padding:16px 18px;
  background: var(--wash);
  border: 2px solid var(--skirt);
  box-shadow: 3px 3px 0 rgba(0,0,0,.12);
  align-self: start;
  columns: 2; column-gap: 22px;
}
.senshi-art .stat{ break-inside: avoid; margin-bottom: 9px; }
.senshi-art .stat dt{
  font-family:rainyhearts, monospace; font-size:8px; letter-spacing:.4px;
  color: var(--head); margin-bottom: 3px;
}
.senshi-art .stat dd{ margin:0; font-size:14px; line-height:1.4; }

/* ---- THE DOSSIER (Aug 2026): card + planet plate/pose on the left, one merged
   stat box (the person, then her planet) + name note + door on the right. This
   replaces the old separate top card+stats and "the planet" sections. */
.senshi-art .dossier-grid{
  display:grid; grid-template-columns: minmax(0,236px) minmax(0,1fr);
  gap:22px; padding:0 28px 20px; align-items:start;
}
.senshi-art .dossier-grid--noplate{ grid-template-columns: minmax(0,236px) minmax(0,1fr); }
.senshi-art .dossier-art{ display:flex; flex-direction:column; gap:14px; margin:0; }
/* keep the lead images compact so the stat box beside them is not stranded in
   whitespace: the plate is roughly square, the pose a little taller. */
.senshi-art .dossier-art .astro-plate img,
.senshi-art .dossier-art .astro-plate .ph{ max-height:none; }
.senshi-art .dossier-art .ph--plate,
.senshi-art .dossier-art img.art--plate{ aspect-ratio:1/1; }
.senshi-art .dossier-art .ph--pose,
.senshi-art .dossier-art img.art--pose{ aspect-ratio:3/4; max-height:300px; object-fit:contain; }
.senshi-art .dossier-facts{ align-self:stretch; }
/* the merged stat box: two labelled groups, rows in two columns under each */
.senshi-art .stats--merged{
  columns:auto; display:grid; grid-template-columns:1fr 1fr; gap:4px 22px;
}
.senshi-art .stats--merged .stats-sub{
  grid-column:1 / -1; margin:0 0 8px; justify-self:start;
  font-family:rainyhearts, monospace; font-size:8px; letter-spacing:.5px;
  color:var(--paper); background:var(--head); padding:5px 8px;
}
.senshi-art .stats--merged .stats-sub + .stat,
.senshi-art .stats--merged .stats-sub{ margin-top:0; }
.senshi-art .stats--merged .stats-sub:not(:first-child){ margin-top:12px; }
.senshi-art .name-note{
  margin:16px 0 0; font-size:14.5px; line-height:1.55; font-style:italic;
  color:var(--ink); opacity:.82;
}
.senshi-art .name-note b{ font-style:normal; color:var(--head); }
.senshi-art .dossier-prose{ margin-top:14px; }
.senshi-art .dossier-prose p{ margin:0 0 .8em; font-size:15.5px; line-height:1.66; }
.senshi-art .dossier-facts .astro-door{ margin-top:16px; }
@media (max-width:760px){
  .senshi-art .dossier-grid,
  .senshi-art .dossier-grid--noplate{ grid-template-columns:minmax(0,1fr); }
  .senshi-art .dossier-art{ flex-direction:row; flex-wrap:wrap; }
  .senshi-art .dossier-art > *{ flex:1 1 240px; }
}
@media (max-width:460px){
  .senshi-art .stats--merged{ grid-template-columns:1fr; }
}

/* ---- 4. BLOCKS ---- */
.senshi-art .block{ padding: 4px 28px 26px; }
.senshi-art .block-h{
  margin: 22px 0 14px; font-family:rainyhearts, monospace;
  font-size: 12px; letter-spacing:.5px; color: var(--head);
  padding-bottom: 9px; border-bottom: 2px dashed var(--backbow);
}
.senshi-art .dossier.block{ padding-top:0; }
.senshi-art .dossier .block-h{ margin-top:6px; }
.senshi-art .block p{ margin: 0 0 1.1em; font-size:16px; }
.senshi-art .block b{ color: var(--accent); font-weight:600; }
.senshi-art .block i{ color: var(--accent2); font-style: normal; font-weight:600; }

/* ---- 5. ERAS + MOVES ----------------------------------------------------
   The Hideaway grouped attacks by series. That grouping is genuinely good
   information design - it shows power GROWING - so it is kept. */
.senshi-art .era{ margin-bottom: 22px; }
.senshi-art .era-name{
  margin:0 0 10px; font-family:rainyhearts, monospace; font-size:10px;
  color: var(--paper); background: var(--head);
  display:inline-block; padding: 7px 12px;
  box-shadow: 3px 3px 0 var(--frontbow);
}
.senshi-art .moves{ list-style:none; margin:0; padding:0; }
.senshi-art .move{
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--wash);
  border-left: 5px solid var(--frontbow);
}
.senshi-art .move--transformation{ border-left-color: var(--trim); }
.senshi-art .move--item{ border-left-color: var(--hair); }
.senshi-art .move-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.senshi-art .move-name{ font-weight:600; font-size:16px; color: var(--head); }
.senshi-art .move-kind{
  font-family:rainyhearts, monospace; font-size:7px; letter-spacing:.5px;
  padding: 3px 6px; background: var(--paper); border:1px solid var(--backbow);
  color: var(--ink);
}
.senshi-art .move-desc{ margin:6px 0 0; font-size:14.5px; line-height:1.6; }

/* ---- 6. THE ASTROLOGY DOOR ----------------------------------------------
   The whole point of the wing: a fan arrives for Rei and leaves reading
   about Mars. This block is styled to look like a DOOR, not a footnote. */
/* ---- THE PLANET ----------------------------------------------------------
   Ashley: "expand the planet area. include in the planet section the
   chibisenshiwithplanets."

   A SQUARE PLATE BESIDE THE PROSE, her choice of the three shapes offered. The
   picture is the argument in one image - Takeuchi drew each guardian holding or
   standing on her own planet - so it belongs next to the paragraph making that
   argument in words, not above it as decoration and not below it as evidence.
   300px, which is the width at which the planet in the drawing is still legibly
   a planet on Mercury and Venus, where it is the smallest.

   minmax(0,1fr) on the text column, because a long unbroken word in prose will
   otherwise push a grid track wider than its share and shove the plate off the
   edge - the same failure the select screen's card grid had. */
.senshi-art .astro-grid{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:24px; align-items:start;
}
.senshi-art .astro-plate{ margin:0; }
.senshi-art .astro-plate img, .senshi-art .astro-plate .ph{
  display:block; width:100%; aspect-ratio:1 / 1; height:auto;
  border:2px solid var(--head); box-shadow:4px 4px 0 var(--frontbow);
  background:#FFFFFB;
}
.senshi-art .astro-say > p:first-child{ margin-top:0; }

/* ---- THE PLANET STAT STRIP (Aug 4 2026) ----------------------------------
   Ashley: "under 'the planet' in each category, could we do a similar style
   stats right above the written selection." A compact bar of the planet's own
   astrology - what it rules, its exaltation, its class, and the character's own
   sun - in the info-box idiom (Press Start 2P labels over a wash panel), sitting
   at the top of the prose column so the rulerships are scannable before the
   paragraph explains them. */
.senshi-art .astro-stats{
  display:flex; flex-wrap:wrap; margin:0 0 18px; padding:0;
  background:var(--wash); border:2px solid var(--skirt);
  box-shadow:3px 3px 0 rgba(0,0,0,.12);
}
.senshi-art .astro-stat{
  padding:8px 15px; border-right:1px solid var(--backbow);
}
.senshi-art .astro-stat:last-child{ border-right:none; }
.senshi-art .astro-stat dt{
  margin:0 0 4px; font-family:rainyhearts, monospace; font-size:7.5px;
  letter-spacing:.4px; color:var(--head);
}
.senshi-art .astro-stat dd{ margin:0; font-size:14px; line-height:1.3; font-weight:600; }
.senshi-art .astro{
  background: var(--wash);
  border-top: 3px solid var(--frontbow);
  border-bottom: 3px solid var(--frontbow);
  padding-top: 6px; padding-bottom: 24px;
}
.senshi-art .astro-door{
  display:inline-block; margin-top:6px; padding: 11px 16px;
  font-family:rainyhearts, monospace; font-size:10px;
  text-decoration:none; color: var(--onskirt); background: var(--skirt);
  border: 2px solid var(--backbow); box-shadow: 3px 3px 0 var(--frontbow);
}
.senshi-art .astro-door:hover{ background: var(--accent); color: var(--paper); }
.senshi-art .astro-door:active{ box-shadow:none; transform: translate(3px,3px); }

/* ---- 7. (WAS VIDEO + GALLERY) --------------------------------------------
   Both sections are gone and their rules with them. Ashley: "remove the watch
   section. remove the gallery as we will include images with the toehr entries."
   The gallery was in particular a SECOND home for pictures competing with the
   first: the forms ladder already gives every costume its own slot, and two
   picture systems on one page means every new image arrives needing a decision
   about which one it belongs to. One system, and it is the ladder.
   .note survives because the astrology block still uses it. */
.senshi-art .note{ font-size:13px; opacity:.65; font-style:italic; }

/* ---- 8. CODEX FOOT ------------------------------------------------------
   Identical mechanic to the codex pages, wearing this senshi's palette.
   That sameness is the point: the reader learns ONE navigation gesture and
   it works everywhere on the site. */
.senshi-art .codex-foot{
  padding: 18px 28px 24px;
  border-top: 3px solid var(--skirt);
  background: var(--wash);
}
.senshi-art .codex-strip{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:12px; }
.senshi-art .codex-strip-label{
  font-family:rainyhearts, monospace; font-size:9px; color: var(--head);
}
.senshi-art .codex-strip-label::before{ content:"\2726"; margin-right:5px; color: var(--trim); }
.senshi-art .codex-strip-links{ display:flex; gap:8px; flex-wrap:wrap; }
.senshi-art .codex-link{
  display:inline-block; padding:6px 11px; font-size:14px; font-weight:600;
  text-decoration:none; color: var(--ink); background: var(--paper);
  border:2px solid var(--skirt); box-shadow:2px 2px 0 rgba(0,0,0,.25);
}
.senshi-art .codex-link:hover{ background: var(--trim); color: var(--ink); }
.senshi-art .codex-link:active{ box-shadow:none; transform: translate(2px,2px); }
.senshi-art .codex-strip--also .codex-link{ border-color: var(--backbow); opacity:.9; }
.senshi-art .updated{
  margin:10px 0 0; font-family:rainyhearts, monospace; font-size:8px;
  opacity:.6; letter-spacing:.4px;
}

/* ---- the art credit ------------------------------------------------------
   Ashley asked for the Takeuchi credit and fair-use notice on every page that
   shows her work: these nine profiles plus the select screen and the roster.
   The STRING lives in roster_data.ART_CREDIT so build_senshi.py and
   build_select.py emit exactly the same words. This is only the styling, and it
   is a deliberate near-copy of .sel-credit in select.css rather than a shared
   file, because the two feet paint on different backgrounds.

   Colour comes from --ink, not a fixed grey. This foot paints from --wash, which
   is pale for all nine but a DIFFERENT pale each time, and a hardcoded grey that
   reads well on Mercury's cool wash washes out on Venus's warm one. Ink is the
   palette's own text colour, so it is legible on its own wash by construction -
   that pairing is what check_contrast() already guards. .82 keeps it quieter
   than the body copy without dropping it under AA. */
.senshi-art .sel-credit{
  margin:14px 0 0; padding-top:12px;
  border-top:1px dotted var(--skirt);
  font-size:12px; line-height:1.6; color:var(--ink); opacity:.82;
  max-width:88ch;
}
@media (max-width:780px){
  .senshi-art .sel-credit{ font-size:11.5px; }
}

/* ---- 9. MOBILE ----------------------------------------------------------
   Single column, card first. Same hierarchy rule as the rest of the site:
   the CONTENT wins, decoration goes last. */
@media (max-width: 780px){
  
  .top{ grid-template-columns: 1fr; padding: 4px 16px 22px; gap:18px; }
  .card{ max-width: 300px; margin: 0 auto; }
  .stats{ columns: 1; }
  .banner{ padding: 20px 16px 18px; }
  .quote, .quote-dub{ padding-left:16px; padding-right:16px; }
  .block{ padding: 4px 16px 22px; }
  .codex-foot{ padding: 16px; }
  .codex-strip{ flex-direction: column; align-items: flex-start; gap:8px; }
}

@media (prefers-reduced-motion: reduce){
  body.--senshi.warded::after{ animation: none; opacity:.2; }
  .egg-flame{ transition: none; }
}

/* ---- 10. FORMS TABLE ----------------------------------------------------
   Every version of this character, labelled by which continuity it comes
   from. The label is the point: the manga, the 90s anime, Crystal and the
   live-action series CONTRADICT each other on exactly the things worth
   arguing about, and an unlabelled list quietly averages them into a canon
   that does not exist anywhere.

   Manga rows are visually weighted (solid left border, full-strength chip)
   because the manga is the primary text on this site. The others are
   documented, not argued from - so they are present, legible, and quieter. */
.senshi-art .src-note{
  margin: 0 0 14px; font-size: 13.5px; line-height:1.6;
  opacity:.72; font-style: italic;
}
.senshi-art .forms{
  width:100%; border-collapse: collapse; font-size: 14.5px;
  background: var(--paper);
  border: 2px solid var(--head);
}
.senshi-art .forms th{
  text-align:left; padding: 9px 12px;
  font-family:rainyhearts, monospace; font-size:8px; letter-spacing:.4px;
  background: var(--head); color: var(--paper); font-weight: normal;
}
.senshi-art .forms td{ padding: 10px 12px; vertical-align: top; border-top:1px solid var(--wash); }
.senshi-art .form-src{ width: 1%; white-space: nowrap; }
.senshi-art .form-name{ font-weight:600; color: var(--head); white-space: nowrap; }
.senshi-art .form-note{ line-height:1.55; }

/* alternating wash so long tables stay trackable across the row */
.senshi-art .forms tbody tr:nth-child(even){ background: var(--wash); }

/* THE WEIGHTING. manga = solid accent bar. others = no bar. */
.senshi-art .form--manga td:first-child{ box-shadow: inset 4px 0 0 var(--accent); }
.senshi-art .form--anime td, .form--crystal td, .form--pgsm td{ opacity:.88; }

.senshi-art .src-chip{
  display:inline-block; padding: 3px 7px;
  font-family:rainyhearts, monospace; font-size:7px; letter-spacing:.3px;
  border:1px solid var(--head); background: var(--paper); color: var(--ink);
}
.senshi-art .src-chip--manga{ background: var(--head); color: var(--paper); }

@media (max-width: 780px){
  /* A four-column table does not survive 390px. Collapse to stacked rows
     with the source chip riding above the name. */
  .forms, .forms tbody, .forms tr, .forms td{ display:block; width:100%; }
  .forms thead{ display:none; }
  .forms tr{ border-top:2px solid var(--wash); padding: 4px 0; }
  .forms td{ border:0; padding: 3px 12px; }
  .form-src{ width:auto; padding-top:10px; }
  .form-name{ white-space: normal; font-size:16px; }
  .form--manga td:first-child{ box-shadow:none; }
  .form--manga{ border-left: 5px solid var(--accent); }
}

/* ---- MOBILE ORDER -------------------------------------------------------
   DO NOT rebuild the mobile stack here. index.css already does it, and it
   does it correctly: at <=1249px .cabinet becomes one column, the wrappers
   (main, .rightsidebox--home, .sidebar--home) are dissolved with
   display:contents so every block becomes a sibling, and ONE order scale
   sorts the whole page. Menu is order 2, about card is order 3, and the CD
   player is deliberately CUT on mobile as a desktop reward.

   The only thing missing is that .senshi-art is a new block, and the note in
   index.css says it plainly: anything new lands in source order unless it is
   given an order here. So this is a single line, not a layout.

   order 4 puts the profile directly after the about card, which is Ashley's
   locked hierarchy - menu, about, then content. */
@media (max-width: 1249px){
  .senshi-art{
    order: 4;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 20px 0;
  }
}

/* ---- MOBILE: codex strips as real tap targets --------------------------- */
@media (max-width: 780px){
  .senshi-art .codex-link{
    min-height: 44px; display: inline-flex; align-items: center;
    padding: 8px 14px; font-size: 15px;
  }
  .senshi-art .astro-door{
    min-height: 48px; display: inline-flex; align-items: center;
    font-size: 12px;
  }
}

/* ---- MOBILE: pixel type floor ------------------------------------------
   Press Start 2P at 7-9px is legible on a desktop monitor and mush on a
   phone. 11px is the floor for a pixel face at arm's length. The stat
   labels, the source chips, the move-kind tags and the kicker all come up
   to meet it. */
@media (max-width: 780px){
  .senshi-art .banner-kicker{ font-size: 11px; }
  .senshi-art .stat dt{ font-size: 11px; letter-spacing: 0; }
  .senshi-art .stat dd{ font-size: 15px; }
  .senshi-art .src-chip{ font-size: 11px; padding: 3px 7px; }
  .senshi-art .move-kind{ font-size: 11px; padding: 3px 7px; }
  .senshi-art .codex-strip-label{ font-size: 11px; }
  .senshi-art .updated{ font-size: 11px; }
  .senshi-art .card figcaption{ font-size: 11px; }
  .senshi-art .era-name{ font-size: 12px; }
  .senshi-art .block-h{ font-size: 13px; }
  .senshi-art .astro-door{ font-size: 12px; }
}


/* ==========================================================================
   11. THE 2026 TEMPLATE
   ==========================================================================
   Ashley, July 30: profiles rebuilt from the fandom wiki, manga and anime
   first, "consise dropdowns for expanded universe information", images with
   placeholders, one standardised shape across the roster.

   Everything below is additive. A profile that has not been rewritten yet
   emits none of these classes and renders exactly as it did before, which is
   what lets the roster migrate one character at a time instead of all at once.
   ------------------------------------------------------------------------ */

/* ---- PLACEHOLDERS -------------------------------------------------------
   A picture slot with nothing in it yet. Deliberately unmistakeable: dashed,
   flat, labelled with what belongs there. The temptation was to generate
   tinted placeholder PNGs, which would have looked better in a screenshot and
   would have been the wrong thing - a generated image is a real file that
   ships, needs deleting later, and reads as art at a glance, so it stops being
   a reminder and starts being a decision nobody made. */
.senshi-art .ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center;
  background:var(--wash); border:2px dashed var(--trim); color:var(--head);
  padding:10px;
}
.senshi-art .ph-mark{ font-size:26px; line-height:1; opacity:.55; }
.senshi-art .ph-label{
  font-family:rainyhearts, monospace; font-size:7px; line-height:1.9;
  letter-spacing:.4px; opacity:.8;
}
.senshi-art .ph--card{ aspect-ratio:3 / 4; width:100%; }
.senshi-art .ph--rung{ aspect-ratio:2 / 3; width:100%; }
.senshi-art .ph--shot{ aspect-ratio:4 / 3; width:100%; }
.senshi-art .art{ display:block; width:100%; height:auto; }

/* ---- THE LADDER ---------------------------------------------------------
   The transformation sequence, one card per form. It replaced a table, and the
   reason is that a costume is a picture: the old rows carried a name and a
   paragraph describing a skirt, which is the least useful possible way to
   convey a skirt. Cards give every form a picture slot, so the page is already
   the right shape for the art whenever it arrives.

   auto-fill with a 150px floor rather than a fixed column count, because the
   roster runs from four forms (most) to eight (Neptune, with the anime and
   Crystal rows) and a fixed grid would leave one character with a ragged
   orphan row. */
/* HALF SIZE, AND OPEN. Ashley chose "open, but smaller cards" over keeping the
   dropdown. 140px cards with a picture slot two thirds of a screen tall were
   what made this heavy; at 96 the row reads as a strip of thumbnails and eight
   forms fit across most laptops in one line instead of two. */
.senshi-art .ladder{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr));
  gap:10px;
}
.senshi-art .rung{
  background:var(--paper); border:2px solid var(--head);
  display:flex; flex-direction:column; min-width:0;
}
.senshi-art .rung-body{ flex:1; }
/* Manga rows carry the accent bar, the same weighting the old forms table used,
   for the same reason: the manga is the primary text on this site and the others
   are documented rather than argued from.
   BORDER, not an inset shadow. The shadow paints inside the padding box and the
   picture slot is the card's first child with a background of its own, so it sat
   directly on top of the bar and every manga rung looked exactly like an anime
   one. A border paints outside it and cannot be covered. */
.senshi-art .rung--manga{ border-top:5px solid var(--accent); }
.senshi-art .rung--anime, .senshi-art .rung--crystal,
.senshi-art .rung--pgsm{ opacity:.92; border-color:var(--trim); }
.senshi-art .rung-body{ padding:7px 8px 9px; }
.senshi-art .rung-name{
  margin:5px 0 0; font-size:12.5px; line-height:1.3; color:var(--head);
}
.senshi-art .rung-debut{
  display:block; margin-top:2px;
  font-family:rainyhearts, monospace; font-size:6px; line-height:1.8;
  opacity:.7;
}
.senshi-art .rung .src-chip{ font-size:6px; padding:2px 5px; }

/* ---- POWERS, COMPACTED ---------------------------------------------------
   Ashley: "this whole section needs to be compacted and visually less heavy."

   It was two columns of bordered cards - every move carried a 4px accent bar, a
   background, 10px of padding and its own line for the kind chip - so Neptune's
   eleven filled a screen and the section outweighed the astrology sitting above
   it. A move is one line now: the name, its note running on after it, and the
   kind as a small mark at the right. No boxes, no bars, no fills.

   CSS COLUMNS, NOT GRID, for a list whose length runs from four to twelve across
   the roster. Grid would need me to decide where it breaks; columns balance
   themselves and collapse to one when the list is short enough not to need two. */
/* ONE COLUMN. Ashley: "please only one column with power name followed by
   description. is recieving too much visual space."
   Two columns did not save height the way it looks like it should: the two
   lists balance independently, so the section was as tall as the taller half of
   each plus the heading between them, and the eye had to travel back up to the
   top of the page's other column twice. One column is shorter in practice and
   reads as a list rather than as a layout. */
.senshi-art .moves{ list-style:none; margin:0; padding:0; }
/* NAME THEN DESCRIPTION, ON THE SAME LINE. The description used to take a line
   of its own, which doubled the section's height for the sake of a sentence
   fragment. Running it on after the name costs nothing and reads the way a
   glossary reads. */
.senshi-art .move{
  margin:0 0 7px; padding:0 0 7px;
  border:0; background:none;
  border-bottom:1px solid var(--wash);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 9px;
  font-size:14px; line-height:1.55;
}
.senshi-art .move-name{ font-weight:600; font-size:14.5px; color:var(--head); }
.senshi-art .move-desc{ flex:1 1 240px; opacity:.82; font-size:13.5px; }
/* 7px, not 6. At 6 these read as smudges rather than as words, and a label
   nobody can read is worse than no label because it still costs the space. */
.senshi-art .move-kind{
  margin-left:auto; flex:none;
  font-family:rainyhearts, monospace; font-size:7px; letter-spacing:0;
  opacity:.55; border:0; padding:0; background:none;
}
/* A transformation phrase is the one thing in the list a reader scans FOR, so it
   keeps a mark - a single accent tick, not a bar. */
.senshi-art .move--transformation .move-name{ color:var(--accent); }
.senshi-art .move--transformation .move-name::before{ content:"\2726 "; opacity:.7; }

/* The manga-only tail, under the anime list. Quieter than what is above it,
   because being underneath is the whole point of it. */
.senshi-art .pcol-h{
  margin:20px 0 10px;
  font-family:rainyhearts, monospace; font-size:8px; letter-spacing:.4px;
  color:var(--head); opacity:.72;
}
.senshi-art .moves--extra{ opacity:.9; }

/* The manga-versus-anime comparison table's rules are DELETED with its section.
   Ashley: "remove the where the two texts disagree entirely." Dead CSS for a
   block nothing emits is worse than no CSS: the next person to read this file
   has to work out whether it is unused or only unused right now. */

/* ---- THE DROPDOWNS ------------------------------------------------------
   <details>, not a script. It opens without JavaScript, prints open, is found
   by the browser's own in-page search, and announces itself correctly to a
   screen reader. A div with a click handler would be all of that again and
   worse, and the content inside is exactly the kind Ashley wanted present but
   not loud: Crystal, the dubs, Sera Myu, live action, development notes. */
/* A section that holds nothing but dropdowns needs no gap under its heading. */
.senshi-art .block--drops{ padding-top:0; }
.senshi-art .drop{
  border:2px solid var(--trim); background:var(--paper);
  margin-bottom:8px;
}
.senshi-art .drop + .drop{ margin-top:0; }
.senshi-art .drop-h{
  cursor:pointer; list-style:none; padding:10px 12px;
  font-family:rainyhearts, monospace; font-size:9px; line-height:1.7;
  letter-spacing:.4px; color:var(--head); background:var(--wash);
}
.senshi-art .drop-h::-webkit-details-marker{ display:none; }
.senshi-art .drop-h::before{
  content:"\25B8"; display:inline-block; margin-right:8px;
  transition:transform .12s ease-out; color:var(--accent);
}
.senshi-art .drop[open] .drop-h::before{ transform:rotate(90deg); }
.senshi-art .drop-h:hover{ background:var(--trim); }
.senshi-art .drop-h:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; }
.senshi-art .drop-body{ padding:2px 14px 4px; }
.senshi-art .drop-body p{ margin:10px 0; font-size:14.5px; line-height:1.65; }

@media (prefers-reduced-motion:reduce){
  .senshi-art .drop-h::before{ transition:none; }
}

/* The trivia list's rules go with its section. Ashley: "remove notes." */

@media (max-width:780px){
  .senshi-art .ladder{ grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; }
  .senshi-art .astro-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ---- 9. THE JUNK DRAWER --------------------------------------------------
   Ashley: "at the very bottom of every senshi page, i want a small 'junk
   dump' for old sailor moon graphics and images i might want to put at the
   end... for fun."
   So the last thing on the page is a loose scrapbook: no captions demanded,
   no grid discipline, just a dashed drawer the odd gif or scan can be tossed
   into. It reads as deliberately informal - that is the point - but it still
   uses the palette so it belongs to the page. Fed from profiles_data
   (p["junk"]); when a profile has nothing in it yet, the drawer shows a quiet
   empty state rather than vanishing, because the ask was for the SPOT to
   exist on every page. */
.senshi-art .junkdump{
  margin: 30px 0 8px;
  padding: 16px 18px 20px;
  border: 2px dashed var(--backbow);
  background: var(--skirt);   /* dark nameplate colour from the banner, per Ashley */
  box-shadow: 3px 3px 0 rgba(0,0,0,.18);
}
.senshi-art .junkdump-h{
  margin: 0 0 4px;
  font-family:rainyhearts, monospace;
  font-size: 11px; letter-spacing:.5px;
  color: var(--onskirt);
}
.senshi-art .junkdump-sub{
  margin: 0 0 14px;
  font-size: 13px; font-style: italic;
  color: var(--onskirt); opacity:.8;
}
.senshi-art .junk-grid{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap: 12px 14px;
}
.senshi-art .junk-grid figure{ margin:0; max-width: 180px; }
.senshi-art .junk-grid img{
  display:block; max-width:100%; height:auto;
  border: 3px solid var(--paper);
  box-shadow: 2px 2px 0 var(--backbow);
  background: var(--paper);
}
/* a hair of scrapbook tilt, alternating, so a row of scans reads as tossed
   in rather than laid out. nth-child keeps it deterministic, not random. */
.senshi-art .junk-grid figure:nth-child(even) img{ transform: rotate(-2deg); }
.senshi-art .junk-grid figure:nth-child(odd)  img{ transform: rotate(1.5deg); }
.senshi-art .junk-grid figcaption{
  margin-top: 5px; font-size: 12px; line-height:1.4;
  color: var(--ink); opacity:.75; text-align:center;
}
.senshi-art .junk-empty{
  font-size: 13px; color: var(--onskirt); opacity:.6;
  padding: 6px 0;
}
@media (max-width:780px){
  .senshi-art .junk-grid figure{ max-width: 44%; }
}

/* ---- 10. THROUGH THE ARCS ------------------------------------------------
   A chronological walk of the character, one block per story arc. Each block
   pairs the ANIME line and the MANGA line so the reader can see the two
   continuities side by side. Uses the palette so it belongs to the page; the
   anime tag is outlined and the manga tag is filled, which is the one visual
   cue that has to survive every one of the loud palettes. */
.senshi-art .arcs .arc{
  margin: 0 0 18px;
  padding: 2px 0 4px 16px;
  border-left: 3px solid var(--backbow);
}
.senshi-art .arc-head{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
  margin: 0 0 9px;
}
.senshi-art .arc-n{
  font-family:rainyhearts, monospace; font-size: 9px;
  color: var(--paper); background: var(--head);
  padding: 4px 6px; line-height: 1;
}
.senshi-art .arc-name{
  margin: 0; font-family:rainyhearts, monospace; font-size: 11px;
  letter-spacing: .5px; color: var(--head); line-height: 1.4;
}
.senshi-art .arc-era{
  font-size: 12px; font-style: italic; color: var(--ink); opacity: .6;
}
.senshi-art .arc-line{
  margin: 0 0 .7em; font-size: 15.5px; line-height: 1.65;
}
.senshi-art .arc-line--anime{ margin-bottom: .55em; }
.senshi-art .arc-tag{
  display: inline-block; font-family:rainyhearts, monospace;
  font-size: 7px; letter-spacing: .4px; text-transform: lowercase;
  padding: 3px 5px; margin-right: 7px; vertical-align: 1px;
  white-space: nowrap;
}
/* anime = outlined, manga = filled. Both read on any palette. */
.senshi-art .arc-tag--anime{
  color: var(--accent); border: 1px solid var(--accent); background: transparent;
}
.senshi-art .arc-tag--manga{
  color: var(--paper); background: var(--head); border: 1px solid var(--head);
}
.senshi-art .arcs-intro{
  margin: 0 0 16px; font-size: 15px; opacity: .85;
}
@media (max-width:780px){
  .senshi-art .arc-line{ font-size: 15px; }
  .senshi-art .arc-name{ font-size: 10px; }
}

/* ---- THE PICTURE BOOK: per-arc gallery (Aug 2026) -----------------------
   Each arc tells its beats, then lays out a row of labelled dashed slots, one
   per specific story moment, so the section reads like an illustrated picture
   book once the pictures are dropped in. Stacked (text, then gallery) rather
   than the old single side slot. */
.senshi-art .arc-body{ min-width: 0; }
.senshi-art .arc-gallery{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin: 16px 0 4px;
}
.senshi-art .arc-gallery--single{ grid-template-columns: minmax(150px, 230px); }
.senshi-art .arc-gallery .ph--arcshot,
.senshi-art .arc-gallery img.art--arcshot{
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0;
}
.senshi-art .arc-gallery .ph--arcshot{ min-height: 118px; }
@media (max-width:560px){
  .senshi-art .arc-gallery{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* the "gained here" strip: transformations, wands and key items picked up in
   this arc, pulled out of the powers block and shown where they are earned. */
.senshi-art .arc-gained-wrap{ margin: 12px 0 2px; }
.senshi-art .arc-gained-h{
  font-family:rainyhearts, monospace; font-size:7px; letter-spacing:.4px;
  color: var(--head); opacity:.85; margin:0 0 7px;
}
.senshi-art .arc-gained{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.senshi-art .gain{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--accent2); padding:4px 9px 4px 4px; font-size:13.5px; line-height:1.3;
}
.senshi-art .gain-k{
  font-family:rainyhearts, monospace; font-size:6px; letter-spacing:.3px;
  color: var(--paper); background: var(--accent); padding:4px 5px;
}
.senshi-art .gain--transformation{ border-color: var(--accent); }
.senshi-art .gain--transformation .gain-k{ background: var(--head); }

/* (Legacy pre-console beat grid removed Aug 2026 - it carried a malformed media
   block and a stray `.arc-beat-text{ order:1 !important }` that leaked into the
   console layout. Beats are now styled by the arc-console rules and the mobile
   template below.) */

/* arcs laid out with the picture book ON THE SIDE (Ashley): beat text in the
   main column, the labelled image slots stacked in a side column. */
.senshi-art .arcs .arc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,300px);
  gap:20px; align-items:start;
}
.senshi-art .arcs .arc > .arc-gallery{ margin-top:0; }
.senshi-art .arc-gallery{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
@media (max-width:760px){
  .senshi-art .arcs .arc{ grid-template-columns:minmax(0,1fr); }
  .senshi-art .arcs .arc > .arc-gallery{ margin-top:14px; }
}

/* the feature spotlight (Silver Crystal): prose then its own picture strip */
.senshi-art .feature .feature-body{ padding:0 28px; }
.senshi-art .feature .feature-body p{ margin:0 0 .85em; font-size:15.5px; line-height:1.66; }
.senshi-art .feature .feature-gallery{ padding:0 28px; margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

/* KEY ITEMS: a card per brooch / wand / weapon, image slot + description. */
.senshi-art .keyitems .keyitem-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px; padding:0 28px;
}
.senshi-art .keyitem{
  border:2px solid var(--accent2); background:var(--wash);
  display:flex; flex-direction:column;
}
.senshi-art .keyitem .ph--itemshot,
.senshi-art .keyitem img.art--itemshot{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:0;
  border-bottom:2px solid var(--accent2);
}
.senshi-art .keyitem-body{ padding:10px 12px 12px; }
.senshi-art .keyitem-name{
  margin:0 0 6px; font-family:rainyhearts, monospace; font-size:9px;
  line-height:1.4; color:var(--head);
}
.senshi-art .keyitem-desc{ margin:0; font-size:14px; line-height:1.55; }

/* ---- THE POSE SLOT (Aug 2026) -------------------------------------------
   A second box under the character-with-planet plate, for the senshi striking
   her final transformation pose (which, Ashley notes, tends to echo her own
   planetary glyph). Portrait, since a full-body pose is taller than the square
   chibi plate, with a little air between the two. */
.senshi-art .astro-plate > * + *{ margin-top:14px; }
.senshi-art .astro-plate .ph--pose,
.senshi-art .astro-plate img.art--pose{ aspect-ratio:3 / 4; }
/* the little trivia line under the henshin slot */
.senshi-art .astro-plate .pose-note{
  margin: 8px 0 0; font-size: 12.5px; font-style: italic; line-height: 1.5;
  color: var(--ink); opacity: .72; text-align: left;
}

/* ---- PER-PARAGRAPH IMAGE SLOTS in the profile (Aug 2026) -----------------
   Ashley: a framed square beside every profile paragraph, for a picture that
   runs alongside the story. The side alternates for rhythm; stacks on a phone.
   Fed from profiles_data via p["bio_shots"]; empty slots show the placeholder. */
.senshi-art .bio-row{
  display:grid; grid-template-columns:minmax(0,1fr) 172px; gap:22px;
  align-items:start; margin:0 0 20px;
}
.senshi-art .bio-row .bio-text{ grid-column:1; grid-row:1; }
.senshi-art .bio-row .bio-text p{ margin:0; }
.senshi-art .bio-row > .ph--bioshot,
.senshi-art .bio-row > img.art--bioshot{
  grid-column:2; grid-row:1;
  width:172px; aspect-ratio:1 / 1; height:auto;
  border:2px solid var(--head); box-shadow:3px 3px 0 var(--frontbow);
  background:#FFFFFB;
}
.senshi-art .bio-row:nth-child(even){ grid-template-columns:172px minmax(0,1fr); }
.senshi-art .bio-row:nth-child(even) .bio-text{ grid-column:2; }
.senshi-art .bio-row:nth-child(even) > .ph--bioshot,
.senshi-art .bio-row:nth-child(even) > img.art--bioshot{ grid-column:1; }
@media (max-width:780px){
  .senshi-art .bio-row,
  .senshi-art .bio-row:nth-child(even){ grid-template-columns:1fr; }
  .senshi-art .bio-row .bio-text,
  .senshi-art .bio-row:nth-child(even) .bio-text{ grid-column:1; grid-row:1; }
  .senshi-art .bio-row > .ph--bioshot,
  .senshi-art .bio-row > img.art--bioshot,
  .senshi-art .bio-row:nth-child(even) > .ph--bioshot,
  .senshi-art .bio-row:nth-child(even) > img.art--bioshot{
    grid-column:1; grid-row:2; width:60%; max-width:220px; justify-self:start;
  }
}

/* =====================================================================
   AUG 2026 v2 — Usagi template redesign (Ashley)
   Rainy Hearts headings, contained dossier, Silver Crystal priority,
   items/variations woven into the arcs, powers grid with video slots,
   index-style junk dump. Appended so these win the ties.
   ===================================================================== */

/* ---- Rainy Hearts reads larger + rounder than Press Start 2P, so the pixel
   headers that were tuned tiny for PS2P get bumped. Body stays basiic. ---- */
.senshi-art .block-h{ font-size:18px; letter-spacing:0; padding-bottom:8px; }
.senshi-art .banner-kicker{ font-size:12px; letter-spacing:.5px; }
.senshi-art .banner-name{ font-size:clamp(22px,4.2vw,36px); }
.senshi-art .arc-n{ font-size:13px; padding:4px 7px; }
.senshi-art .arc-name{ font-size:16px; letter-spacing:0; }
.senshi-art .pcol-h{ font-size:14px; letter-spacing:0; opacity:.8; }
.senshi-art .card figcaption{ font-size:11px; letter-spacing:0; }
@media (max-width:780px){ .senshi-art .arc-name{ font-size:15px; } }

/* ---- THE DOSSIER, contained (Ashley: better setup, put it in a container,
   bigger images, bigger text, kill the deadspace). One bordered panel: a strip
   of portraits across the top, then the facts filling the full width in packed
   columns so nothing is stranded in whitespace. ---- */
.senshi-art .dossier .block-h{ margin-bottom:12px; }
.senshi-art .dossier-card{
  margin:0 28px; padding:22px 24px 24px;
  background:var(--wash); border:3px solid var(--skirt);
  box-shadow:6px 6px 0 var(--frontbow);
}
.senshi-art .dossier-card .dossier-art{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:18px; margin:0 0 22px;
}
.senshi-art .dossier-card .dossier-art > *{ margin:0; align-self:start; }
.senshi-art .dossier-card .dossier-art .astro-plate img,
.senshi-art .dossier-card .dossier-art .astro-plate .ph,
.senshi-art .dossier-card .dossier-art .card img,
.senshi-art .dossier-card .dossier-art .card .ph{ width:100%; height:auto; }
.senshi-art .dossier-card .dossier-art .ph--pose,
.senshi-art .dossier-card .dossier-art img.art--pose{ aspect-ratio:3/4; max-height:none; }
.senshi-art .dossier-card .card figcaption{ text-align:center; margin-top:6px; }
/* facts fill the whole width, packed, bigger text */
.senshi-art .dossier-card .dossier-facts{ display:block; }
.senshi-art .dossier-card .stats--merged{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:14px 26px; margin:0;
}
.senshi-art .dossier-card .stat{ margin:0; break-inside:avoid; }
.senshi-art .dossier-card .stat dt{ font-size:12px; margin-bottom:4px; opacity:.9; }
.senshi-art .dossier-card .stat dd{ font-size:16px; line-height:1.45; }
.senshi-art .dossier-card .name-note{
  margin:20px 0 0; font-size:16px; line-height:1.62; font-style:italic; opacity:.9;
  padding-top:16px; border-top:2px dashed var(--backbow);
}
.senshi-art .dossier-card .astro-door{ margin-top:18px; }
@media (max-width:520px){
  .senshi-art .dossier-card .stats--merged{ grid-template-columns:1fr 1fr; }
}

/* ---- SILVER CRYSTAL, priority feature right under the profile (Ashley). A
   highlighted panel so it reads as the important thing it is. ---- */
.senshi-art .feature--crystal .block-h{ color:var(--accent); border-bottom-color:var(--accent); }
.senshi-art .feature--crystal .feature-body{
  background:var(--wash); border:2px solid var(--accent2);
  box-shadow:5px 5px 0 var(--frontbow); padding:18px 22px;
}
.senshi-art .feature--crystal .feature-body p{ margin:0 0 1em; font-size:16px; line-height:1.72; }
.senshi-art .feature--crystal .feature-body p:last-child{ margin-bottom:0; }
.senshi-art .feature--crystal .feature-gallery{ margin-top:18px; }

/* ---- ARCS: continuity sub-headers (anime / manga), replacing the per-beat
   tag. anime outlined, manga filled, same idiom as the old tags. ---- */
.senshi-art .arc-cont{
  display:inline-block; font-family:rainyhearts, monospace; font-size:13px;
  letter-spacing:.5px; text-transform:lowercase; line-height:1;
  margin:18px 0 14px; padding:6px 13px;
}
.senshi-art .arc-cont--anime{ color:var(--accent); border:2px solid var(--accent); background:transparent; }
.senshi-art .arc-cont--manga{ color:var(--paper); background:var(--head); border:2px solid var(--head); }
.senshi-art .arc-cont--anime + .arc-beat,
.senshi-art .arc-cont--manga + .arc-beat{ margin-top:0; }

/* ---- items + variations woven into the arc where she comes into them. A row
   of quiet narrative cards at the close of the arc: picture, name, one line.
   Deliberately NOT a collectible strip. ---- */
.senshi-art .arc-items{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:18px; margin:12px 0 20px; padding-bottom:20px;
  border-bottom:2px dashed var(--backbow);
}
.senshi-art .arc-item{ margin:0; display:flex; flex-direction:column; gap:10px; }
.senshi-art .arc-item-shot .ph--itemshot,
.senshi-art .arc-item-shot img.art--itemshot{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; margin:0;
}
.senshi-art .arc-item--form .arc-item-shot .ph--itemshot,
.senshi-art .arc-item--form .arc-item-shot img.art--itemshot{
  border:2px solid var(--accent2);
}
.senshi-art .arc-item-name{ display:block; font-weight:600; font-size:15.5px; color:var(--head); margin-bottom:5px; }
.senshi-art .arc-item-note{ display:block; font-size:14px; line-height:1.55; }

/* ---- POWERS as a grid, anime/manga split kept, a video slot per move for the
   HD clip Ashley is adding. ---- */
.senshi-art .powers-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:18px; margin:0 0 10px;
}
.senshi-art .pmove{
  margin:0; display:flex; flex-direction:column; gap:10px;
  border:2px solid var(--skirt); background:var(--wash);
  padding:12px; box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .video-slot{
  aspect-ratio:16/9; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:rgba(0,0,0,.05); border:2px dashed var(--backbow); color:var(--ink);
}
.senshi-art .video-mark{ font-size:26px; opacity:.45; }
.senshi-art .video-label{ font-family:rainyhearts, monospace; font-size:10px; letter-spacing:.5px; opacity:.6; }
.senshi-art .pmove-cap{ display:flex; flex-direction:column; }
.senshi-art .pmove-name{ font-weight:600; font-size:15px; color:var(--head); line-height:1.3; }
.senshi-art .pmove-kind{
  align-self:flex-start; font-family:rainyhearts, monospace; font-size:9px;
  letter-spacing:.4px; color:var(--paper); background:var(--accent);
  padding:3px 6px; margin:6px 0;
}
.senshi-art .pmove--transformation .pmove-kind{ background:var(--head); }
.senshi-art .pmove-desc{ margin:2px 0 0; font-size:13.5px; line-height:1.55; }

/* =====================================================================
   AUG 2026 v3 — top card reshaped + glyph background + jumps (Ashley)
   "hate the title", name inside the card, images lead and are the focus,
   facts compact (stop the spread), background = the index glyph tiles,
   chapter jumps up top, junk under elsewhere.
   ===================================================================== */

/* the index page's drifting glyph tile, behind the whole senshi page */
body.--senshi{
  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.--senshi{ animation:none !important; } }
@media (max-width:1249px){ body.--senshi{ animation:none !important; } }

/* slim banner: the big title is gone, only the breadcrumb + egg remain */
.senshi-art .banner--slim{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 28px; gap:12px;
}
.senshi-art .banner--slim .banner-kicker{ margin:0; }
.senshi-art .banner--slim .egg-flame{ position:static; top:auto; right:auto; }

/* THE TOP CARD, image-forward. No heavy panel around it - the pictures are the
   hero, not the chrome. Name is the h1, inside. Facts sit under, compact and
   centered so they stop sprawling across the whole width. */
.senshi-art .dossier.block{ padding-top:12px; }
.senshi-art .dossier-card{
  margin:0 28px; padding:0; background:transparent; border:0; box-shadow:none;
  display:block; text-align:center;
}
.senshi-art .dossier-card .dossier-art{
  display:flex; flex-direction:row; justify-content:center; align-items:flex-end;
  flex-wrap:wrap; gap:22px; margin:0 0 14px;
}
.senshi-art .dossier-card .dossier-art > *{ margin:0; }
.senshi-art .dossier-card .dossier-art figure{ display:flex; flex-direction:column; }
.senshi-art .dossier-card .dossier-art .astro-plate img,
.senshi-art .dossier-card .dossier-art .astro-plate .ph,
.senshi-art .dossier-card .dossier-art .ph--pose,
.senshi-art .dossier-card .dossier-art img.art--pose{
  width:auto; max-width:none; height:clamp(240px, 33vw, 360px);
  aspect-ratio:auto; object-fit:contain;
  border:3px solid var(--backbow); box-shadow:6px 6px 0 var(--frontbow); background:#fffdf6;
}
/* the mini-senshi-with-planet plate is the lead: a little larger */
.senshi-art .dossier-card .dossier-art .astro-plate--lead img,
.senshi-art .dossier-card .dossier-art .astro-plate--lead .ph{ height:clamp(260px, 37vw, 400px); }
.senshi-art .dossier-card .pose-note{ display:none; }
.senshi-art .dossier-card .card figcaption{ display:none; }

.senshi-art .dossier-id{ margin:8px 0 2px; }
.senshi-art .dossier-name{
  margin:0; font-family:rainyhearts, monospace; line-height:1.12;
  font-size:clamp(30px, 6vw, 50px); color:var(--head);
  text-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .dossier-civ{ margin:9px 0 0; font-size:16px; font-weight:600; color:var(--ink); opacity:.82; }

/* facts: constrained + dense, not spread edge to edge */
.senshi-art .dossier-card .dossier-facts{ max-width:780px; margin:20px auto 0; }
.senshi-art .dossier-card .stats--merged{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:9px 34px; margin:0; text-align:left;
}
.senshi-art .dossier-card .stat{ display:flex; gap:9px; align-items:baseline; margin:0; }
.senshi-art .dossier-card .stat dt{
  font-size:11.5px; margin:0; white-space:nowrap; opacity:.78; flex:none;
}
.senshi-art .dossier-card .stat dd{ font-size:15px; line-height:1.4; }
.senshi-art .dossier-card .name-note{
  text-align:left; margin:20px 0 0; font-size:15px; line-height:1.62;
  font-style:italic; opacity:.9; padding-top:15px; border-top:2px dashed var(--backbow);
}
.senshi-art .dossier-card .astro-door{ margin-top:16px; display:inline-block; }
@media (max-width:560px){
  .senshi-art .dossier-card .stats--merged{ grid-template-columns:1fr; }
}

/* CHAPTER JUMPS: a pill row near the top of a long page */
.senshi-art .jump-nav{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:6px 28px 4px; padding:12px 14px;
  background:var(--wash); border:2px solid var(--skirt); box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .jump-link{
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.3px;
  text-transform:lowercase; text-decoration:none; color:var(--head);
  padding:6px 11px; border:2px solid var(--backbow); background:var(--paper);
  box-shadow:2px 2px 0 var(--frontbow); line-height:1;
}
.senshi-art .jump-link:hover{ background:var(--accent); color:var(--paper); }
.senshi-art .jump-link:active{ transform:translate(2px,2px); box-shadow:none; }

/* Neo-Queen Serenity — the "where she ends up" panel, same idiom as the crystal
   but keyed to the second accent so past (crystal) and future read distinct. */
.senshi-art .feature--future .block-h{ color:var(--accent2); border-bottom-color:var(--accent2); }
.senshi-art .feature--future .feature-body{
  background:var(--wash); border:2px solid var(--accent);
  box-shadow:5px 5px 0 var(--frontbow); padding:18px 22px;
}
.senshi-art .feature--future .feature-body p{ margin:0 0 1em; font-size:16px; line-height:1.72; }
.senshi-art .feature--future .feature-body p:last-child{ margin-bottom:0; }
.senshi-art .feature--future .feature-gallery{ margin-top:18px; }

/* =====================================================================
   AUG 2026 v4 — top card rearranged, powers 2-up, manga has no video
   Ashley: stats box where the henshin pose was (top, beside the plate);
   the henshin pose drops next to the name breakdown. Profile + ginzuishou
   are now one flowing piece (no separate crystal panel).
   ===================================================================== */

/* top card: reset the v3 centered look, go to head(plate|facts) + namebreak(pose|note) */
.senshi-art .dossier-card{
  margin:0 28px; padding:0; background:transparent; border:0; box-shadow:none;
  display:block; text-align:left;
}
.senshi-art .dossier-head{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:28px; align-items:start; margin:0;
}
.senshi-art .dossier-plate{ margin:0; }
.senshi-art .dossier-plate figure{ margin:0; }
.senshi-art .dossier-plate img,
.senshi-art .dossier-plate .ph{
  width:100%; height:auto; max-width:none; aspect-ratio:auto;
  border:3px solid var(--backbow); box-shadow:6px 6px 0 var(--frontbow); background:#fffdf6;
}
.senshi-art .dossier-head .dossier-facts{ margin:0; max-width:none; }
.senshi-art .dossier-id{ margin:0 0 14px; }
.senshi-art .dossier-name{
  margin:0; text-align:left; font-family:rainyhearts, monospace;
  font-size:clamp(28px, 4.6vw, 44px); line-height:1.12; color:var(--head);
  text-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .dossier-civ{ margin:9px 0 0; font-size:16px; font-weight:600; opacity:.82; }
.senshi-art .dossier-head .stats--merged{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px 28px; margin:0; text-align:left;
}
.senshi-art .dossier-head .stat{ display:flex; gap:9px; align-items:baseline; margin:0; }
.senshi-art .dossier-head .stat dt{ font-size:11.5px; margin:0; white-space:nowrap; opacity:.78; flex:none; }
.senshi-art .dossier-head .stat dd{ font-size:15px; line-height:1.4; }

.senshi-art .dossier-namebreak{
  display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:26px; align-items:start; margin:22px 0 0; padding-top:18px; border-top:2px dashed var(--backbow);
}
.senshi-art .dossier-pose{ margin:0; }
.senshi-art .dossier-pose figure{ margin:0; }
.senshi-art .dossier-pose img,
.senshi-art .dossier-pose .ph{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; max-width:none;
  border:3px solid var(--backbow); box-shadow:6px 6px 0 var(--frontbow); background:#fffdf6;
}
.senshi-art .dossier-pose .pose-note{ display:none; }
.senshi-art .dossier-namebreak .name-note{
  margin:0; text-align:left; font-size:15px; line-height:1.62; font-style:italic;
  opacity:.9; border-top:0; padding-top:0;
}
.senshi-art .dossier-card .astro-door{ margin-top:18px; display:inline-block; }
@media (max-width:760px){
  .senshi-art .dossier-head{ grid-template-columns:1fr; }
  .senshi-art .dossier-namebreak{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .senshi-art .dossier-head .stats--merged{ grid-template-columns:1fr; }
}

/* POWERS: two across (Ashley), for both anime and the (video-less) manga grid */
.senshi-art .powers-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* manga cells carry no video slot - they read as a compact titled note */
.senshi-art .pmove--novid{ justify-content:flex-start; }
.senshi-art .pmove--novid .pmove-name{ font-size:15.5px; }

/* the link out of a featured section (Cosmos -> her own page) */
.senshi-art .feature-door{ margin-top:16px; }

/* =====================================================================
   AUG 2026 v5 — anime / manga / both toggle on "through the arcs"
   CSS only (radios + :checked ~ .arcs-body). Default both; screen-only
   hiding so print always shows everything.
   ===================================================================== */
.senshi-art .arcview-radio{
  position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; margin:-1px;
}
.senshi-art .arcview-switch{
  display:inline-flex; align-items:center; gap:7px; margin:2px 0 20px;
  padding:7px 8px; background:var(--wash); border:2px solid var(--skirt);
  box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .arcview-lead{
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.4px;
  text-transform:lowercase; opacity:.7; padding:0 4px 0 4px;
}
.senshi-art .arcview-pill{
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.3px;
  text-transform:lowercase; line-height:1; cursor:pointer; color:var(--head);
  background:var(--paper); border:2px solid var(--backbow); padding:7px 13px;
}
.senshi-art .arcview-pill:hover{ background:var(--trim); }
/* the checked pill lights up */
.senshi-art #arcview-both:checked  ~ .arcview-switch label[for="arcview-both"],
.senshi-art #arcview-anime:checked ~ .arcview-switch label[for="arcview-anime"],
.senshi-art #arcview-manga:checked ~ .arcview-switch label[for="arcview-manga"]{
  background:var(--accent); color:var(--paper); border-color:var(--accent);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.15);
}
/* keyboard focus on the hidden radio shows on its pill */
.senshi-art #arcview-both:focus-visible  ~ .arcview-switch label[for="arcview-both"],
.senshi-art #arcview-anime:focus-visible ~ .arcview-switch label[for="arcview-anime"],
.senshi-art #arcview-manga:focus-visible ~ .arcview-switch label[for="arcview-manga"]{
  outline:2px solid var(--frontbow); outline-offset:2px;
}
@media screen{
  /* anime selected: drop the manga header + manga beats */
  .senshi-art #arcview-anime:checked ~ .arcs-body .arc-cont--manga,
  .senshi-art #arcview-anime:checked ~ .arcs-body .arc-beat--manga{ display:none; }
  /* manga selected: drop the anime header + anime beats */
  .senshi-art #arcview-manga:checked ~ .arcs-body .arc-cont--anime,
  .senshi-art #arcview-manga:checked ~ .arcs-body .arc-beat--anime{ display:none; }
}
@media print{ .senshi-art .arcview-switch, .senshi-art .arcview-radio{ display:none; } }

/* =====================================================================
   AUG 2026 v6 — arc heading follows the toggle (Ashley)
   anime view -> season name (Sailor Moon / R / S / SuperS / Stars);
   manga view -> arc name (Dark Kingdom, Black Moon, ...). Both view keeps
   the manga arc name + the full era line. In a single-continuity view the
   redundant "anime"/"manga" sub-headers are dropped.
   ===================================================================== */
/* both (default): manga arc name + full era; hide the anime-season heading */
.senshi-art .arc-name--anime{ display:none; }
.senshi-art .arc-era--solo{ display:none; }

@media screen{
  /* ANIME view: season heading, year only, no sub-headers */
  .senshi-art #arcview-anime:checked ~ .arcs-body .arc-name--anime{ display:block; }
  .senshi-art #arcview-anime:checked ~ .arcs-body .arc-name--manga,
  .senshi-art #arcview-anime:checked ~ .arcs-body .arc-era--both,
  .senshi-art #arcview-anime:checked ~ .arcs-body .arc-cont{ display:none; }
  .senshi-art #arcview-anime:checked ~ .arcs-body .arc-era--solo{ display:inline; }

  /* MANGA view: arc-name heading (default), year only, no sub-headers */
  .senshi-art #arcview-manga:checked ~ .arcs-body .arc-era--both,
  .senshi-art #arcview-manga:checked ~ .arcs-body .arc-cont{ display:none; }
  .senshi-art #arcview-manga:checked ~ .arcs-body .arc-era--solo{ display:inline; }
}

/* =====================================================================
   AUG 2026 v7 — shared threads (Ashley's "web for ourselves")
   A thread box reads as clearly NOT the character's own voice: a marked
   panel with the character's one-line angle, the shared excerpt, a
   picture, a link to the full entry, and auto cross-links to the other
   profiles that carry the same thread.
   ===================================================================== */
.senshi-art .threads-block{ padding-top:0; }
.senshi-art .thread{
  margin:0; background:var(--wash); border:2px solid var(--accent2);
  border-left:6px solid var(--accent2); box-shadow:5px 5px 0 var(--frontbow);
  padding:16px 20px 14px;
}
.senshi-art .thread + .thread{ margin-top:18px; }
.senshi-art .thread-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.senshi-art .thread-mark{ color:var(--accent); font-size:15px; line-height:1; }
.senshi-art .thread-title{
  margin:0; font-family:rainyhearts, monospace; font-size:16px; letter-spacing:0; color:var(--head);
}
.senshi-art .thread-kind{
  font-family:rainyhearts, monospace; font-size:9px; letter-spacing:.4px; text-transform:lowercase;
  color:var(--paper); background:var(--accent2); padding:4px 7px; line-height:1;
}
.senshi-art .thread-angle{
  margin:0 0 12px; font-size:15px; line-height:1.6; font-style:italic; color:var(--head); opacity:.92;
}
.senshi-art .thread-body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,220px); gap:20px; align-items:start;
}
.senshi-art .thread-excerpt p{ margin:0 0 .8em; font-size:15px; line-height:1.65; }
.senshi-art .thread-excerpt p:last-child{ margin-bottom:0; }
.senshi-art .thread-shot .ph--threadshot,
.senshi-art .thread-shot img.art--threadshot{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:0;
}
.senshi-art .thread-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin-top:14px; padding-top:12px; border-top:2px dashed var(--backbow);
}
.senshi-art .thread-full{
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.3px; text-transform:lowercase;
  text-decoration:none; color:var(--paper); background:var(--accent); padding:7px 12px;
  border:2px solid var(--accent); box-shadow:2px 2px 0 var(--frontbow); line-height:1;
}
.senshi-art .thread-full:hover{ background:var(--head); border-color:var(--head); }
.senshi-art .thread-also{ font-size:13px; opacity:.85; }
.senshi-art .thread-sib{ color:var(--frontbow); font-weight:600; text-decoration:none; }
.senshi-art .thread-sib:hover{ text-decoration:underline; }
@media (max-width:640px){
  .senshi-art .thread-body{ grid-template-columns:minmax(0,1fr); }
}

/* the thread's own codex page */
.senshi-art.thread-art .thread-page-id{ padding:14px 28px 4px; }
.senshi-art.thread-art .thread-page-sum{ margin:8px 0 0; font-size:16px; font-style:italic; opacity:.82; }
.senshi-art.thread-art .thread-page-body p{ margin:0 0 1.1em; font-size:16.5px; line-height:1.75; }

/* =====================================================================
   AUG 2026 v8 — the auto structural web (Ashley): arc co-appearance +
   faction strip. Both computed from data; no per-page authoring.
   ===================================================================== */
/* who else stands in this arc — a quiet line at the arc's close */
.senshi-art .arc-also{
  margin:16px 0 2px; font-size:13.5px; line-height:1.7; color:var(--ink);
}
.senshi-art .arc-also-lead{
  font-family:rainyhearts, monospace; font-size:10px; letter-spacing:.4px;
  text-transform:lowercase; color:var(--head); opacity:.8; margin-right:9px;
}
.senshi-art .arc-also-link{ color:var(--frontbow); font-weight:600; text-decoration:none; }
.senshi-art .arc-also-link:hover{ text-decoration:underline; }
/* the faction strip reuses the codex-strip idiom; just a hook to tint it */
.senshi-art .codex-strip--circle .codex-strip-label{ color:var(--accent); }

/* =====================================================================
   DOSSIER v9 - kill the deadspace (Ashley, Aug 6).
   Three moves off the annotated screenshots:
   1. the catchphrase leaves the empty top band and sits beside the name
      inside the card, filling the space to the right of it;
   2. the henshin pose moves UP so the left column stacks plate + pose
      (no more gap under the plate);
   3. the name breakdown runs full width under the stats in the right
      column, so nothing is stranded beside it.
   ===================================================================== */
/* left column now stacks the plate, then the henshin pose under it. The pose
   is the secondary image, so it sits smaller than the plate (a real portrait
   fills it; the empty placeholder keeps a 3/4 slot so the preview reads right) */
.senshi-art .dossier-platecol{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.senshi-art .dossier-platecol .dossier-pose{ margin:0; width:100%; max-width:230px; }
.senshi-art .dossier-platecol .dossier-pose figure{ margin:0; }
.senshi-art .dossier-platecol .dossier-pose img,
.senshi-art .dossier-platecol .dossier-pose .ph{
  width:100%; height:auto; object-fit:contain; max-width:none;
  border:3px solid var(--backbow); box-shadow:6px 6px 0 var(--frontbow); background:#fffdf6;
}
.senshi-art .dossier-platecol .dossier-pose img{ aspect-ratio:auto; }
.senshi-art .dossier-platecol .dossier-pose .ph{ aspect-ratio:3/4; }
.senshi-art .dossier-platecol .dossier-pose .pose-note{ display:none; }

/* name row: name + civilian on the left, catchphrase filling the right */
.senshi-art .dossier-head .dossier-id{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:26px; margin:0 0 18px;
}
.senshi-art .dossier-idname{ flex:0 1 auto; }
.senshi-art .dossier-cry{ flex:1 1 auto; text-align:right; padding-top:6px; }
.senshi-art .dossier-cry .quote{
  margin:0; padding:0; font-size:clamp(16px,1.9vw,21px);
  font-weight:600; line-height:1.42; color:var(--head);
}
.senshi-art .dossier-cry .quote-dub{
  margin:6px 0 0; padding:0; font-size:12.5px; color:var(--ink); opacity:.62;
}

/* the name breakdown + planet door now sit in the right column, full width */
.senshi-art .dossier-head .dossier-facts > .name-note{
  margin:20px 0 0; text-align:left; font-size:15px; line-height:1.62;
  font-style:italic; opacity:.9; border-top:0; padding-top:0;
}
.senshi-art .dossier-head .dossier-facts > .astro-door{
  margin-top:16px; display:inline-block;
}

@media (max-width:760px){
  .senshi-art .dossier-id{ flex-direction:column; }
  .senshi-art .dossier-cry{ text-align:left; padding-top:0; }
}

/* =====================================================================
   v10 (Aug, Ashley) - hierarchy pass. Title -> masthead; dossier folds
   in the Moon + name breakdown with the pose floated so text fills under
   it; feature "selves" become pictured boxes like the thread box; the
   arcs become a tabbed frame instead of a scroll-wall; silver reads as
   silver, not gray.
   ===================================================================== */

/* ---- MASTHEAD: name + civilian + catchphrase up top ---------------- */
.senshi-art .banner--masthead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  margin:0 28px 20px; padding:16px 0 16px; border-bottom:2px solid var(--backbow);
}
.senshi-art .masthead-name{
  margin:0; font-family:rainyhearts, monospace; line-height:1.03;
  font-size:clamp(34px,6vw,58px); color:var(--head); text-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .masthead-civ{ margin:7px 0 0; font-size:17px; font-weight:600; color:var(--ink); opacity:.82; }
.senshi-art .masthead-titles .dossier-cry{ margin:13px 0 0; text-align:left; }
.senshi-art .masthead-titles .quote{
  margin:0; padding:0; font-size:clamp(15px,1.8vw,19px); font-weight:600;
  line-height:1.4; color:var(--head);
}
.senshi-art .masthead-titles .quote-dub{ margin:5px 0 0; padding:0; font-size:12.5px; color:var(--ink); opacity:.6; }

/* ---- DOSSIER: head(plate | stats) + lower(floated pose + lede) ----- */
.senshi-art .dossier-head{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:26px; align-items:start; margin:0;
}
.senshi-art .dossier-lower{ margin:22px 0 0; }
.senshi-art .dossier-lower::after{ content:""; display:block; clear:both; }
.senshi-art .dossier-pose--float{ float:left; width:200px; margin:3px 22px 8px 0; }
.senshi-art .dossier-pose--float figure{ margin:0; }
.senshi-art .dossier-pose--float img{
  width:100%; height:auto; border:3px solid var(--backbow);
  box-shadow:6px 6px 0 var(--frontbow); background:#fffdf6;
}
.senshi-art .dossier-pose--float .ph{
  width:100%; aspect-ratio:3/4; border:3px solid var(--backbow);
  box-shadow:6px 6px 0 var(--frontbow); background:#fffdf6;
}
.senshi-art .dossier-pose--float .pose-note{ display:none; }
.senshi-art .dossier-lede p{ margin:0 0 13px; font-size:15px; line-height:1.68; color:var(--ink); }
.senshi-art .dossier-lede p:first-child{ margin-top:0; }
.senshi-art .dossier-lower .astro-door{ display:inline-block; margin-top:6px; clear:left; }

/* ---- FEATURE BOXES: her other selves, pictured (like the thread box) - */
.senshi-art .feature{
  margin:18px 28px; background:var(--wash); border:2px solid var(--backbow);
  border-left:6px solid var(--backbow); box-shadow:5px 5px 0 var(--frontbow);
  padding:16px 20px 14px;
}
.senshi-art .feature + .feature{ margin-top:18px; }
.senshi-art .feature-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.senshi-art .feature-mark{ color:var(--frontbow); font-size:15px; line-height:1; }
.senshi-art .feature-title{ margin:0; font-family:rainyhearts, monospace; font-size:16px; color:var(--head); }
.senshi-art .feature-kind{
  font-family:rainyhearts, monospace; font-size:9px; letter-spacing:.4px; text-transform:lowercase;
  color:#fffdf6; background:var(--frontbow); padding:4px 7px; line-height:1;
}
.senshi-art .feature-body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,210px); gap:20px; align-items:start;
}
.senshi-art .feature-text p{ margin:0 0 .8em; font-size:15px; line-height:1.65; }
.senshi-art .feature-text p:last-child{ margin-bottom:0; }
.senshi-art .feature-shot .ph--featureshot,
.senshi-art .feature-shot img.art--featureshot{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; margin:0;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); background:#fffdf6;
}
.senshi-art .feature-foot{ margin-top:12px; padding-top:11px; border-top:2px dashed var(--backbow); }
.senshi-art .feature-full{
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.3px; text-transform:lowercase;
  text-decoration:none; color:#fffdf6; background:var(--frontbow); padding:7px 12px;
  border:2px solid var(--frontbow); box-shadow:2px 2px 0 var(--backbow); line-height:1;
}
.senshi-art .feature-full:hover{ background:var(--head); border-color:var(--head); }
.senshi-art .feature--past{ border-left-color:var(--accent2); }
.senshi-art .feature--cosmos{ border-left-color:var(--accent); }
@media (max-width:640px){ .senshi-art .feature-body{ grid-template-columns:minmax(0,1fr); } }

/* ---- ARC FRAME: ONE console. A clickable arc TABLE (the index) sits at the
   top; the selected story renders in the same box below it. (Ashley: all the
   seasons/arcs in one clickable table, all stories under the same container.) - */
.senshi-art .arc-console{
  position:relative; margin-top:14px; background:var(--paper);
  border:2px solid var(--backbow); border-radius:12px;
  box-shadow:5px 5px 0 var(--frontbow); padding:18px 20px 20px; overflow:hidden;
}
.senshi-art .arcsel-radio{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
/* the index table */
.senshi-art .arc-index{
  border:1.5px solid var(--backbow); border-radius:8px; overflow:hidden; margin:0 0 20px;
}
.senshi-art .arc-index-head,
.senshi-art .arc-row{
  display:grid; grid-template-columns:34px minmax(0,1.1fr) minmax(0,1.3fr) 62px;
  gap:12px; align-items:center; padding:9px 14px;
}
.senshi-art .arc-index-head{
  background:var(--wash); border-bottom:2px solid var(--backbow);
  font-family:rainyhearts, monospace; font-size:10px; letter-spacing:.4px;
  text-transform:lowercase; color:var(--head); opacity:.85;
}
.senshi-art .arc-row{
  cursor:pointer; user-select:none; border-bottom:1px solid var(--wash);
  background:var(--paper); transition:background .08s;
}
.senshi-art .arc-row:last-child{ border-bottom:0; }
.senshi-art .arc-row:hover{ background:var(--wash); }
.senshi-art .arc-row-n{ font-family:rainyhearts, monospace; font-size:13px; color:var(--frontbow); }
.senshi-art .arc-row-arc{ font-weight:700; font-size:14px; color:var(--head); }
.senshi-art .arc-row-season{ font-size:13px; opacity:.8; }
.senshi-art .arc-row-yr{ font-size:12px; opacity:.62; text-align:right; }
.senshi-art .arc-stage{ position:relative; }
.senshi-art .arc-panel{ display:none; }   /* only the checked arc shows (inline per-page rule) */
.senshi-art .arc-panel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin:0 0 14px; padding-bottom:12px; border-bottom:2px dashed var(--backbow);
}
.senshi-art .arc-panel-title{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.senshi-art .arc-panel-n{ font-family:rainyhearts, monospace; font-size:16px; color:var(--frontbow); }
.senshi-art .arc-panel-name{ margin:0; font-family:rainyhearts, monospace; font-size:23px; color:var(--head); }
.senshi-art .arc-panel-era{ font-size:11.5px; opacity:.62; }
/* per-arc anime/manga/both sub-switch (scoped to its panel by ~) */
.senshi-art .arc-view-radio{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.senshi-art .arc-viewswitch{ display:inline-flex; align-items:center; gap:6px; flex:none; }
.senshi-art .arc-vp-lead{ font-family:rainyhearts, monospace; font-size:9px; opacity:.55; margin-right:1px; }
.senshi-art .arc-vp{
  cursor:pointer; padding:3px 11px; font-size:12px; border:1.5px solid var(--backbow);
  border-radius:999px; background:var(--paper); color:var(--ink); user-select:none;
}
.senshi-art .vin-both:checked  ~ .arc-panel-head .vp-both,
.senshi-art .vin-anime:checked ~ .arc-panel-head .vp-anime,
.senshi-art .vin-manga:checked ~ .arc-panel-head .vp-manga{
  background:var(--head); color:#fffdf6; border-color:var(--head);
}
.senshi-art .vin-anime:checked ~ .arc-cont-wrap .arc-cont--manga{ display:none; }
.senshi-art .vin-manga:checked ~ .arc-cont-wrap .arc-cont--anime{ display:none; }
/* the beats inside a panel */
.senshi-art .arc-cont-h{
  margin:16px 0 12px; font-family:rainyhearts, monospace; font-size:13px; letter-spacing:.5px;
  text-transform:lowercase; color:var(--head); border-bottom:1px solid var(--backbow); padding-bottom:5px;
}
.senshi-art .arc-cont:first-child .arc-cont-h{ margin-top:0; }
.senshi-art .arc-beat{ margin:0 0 15px; }
.senshi-art .arc-beat--shot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,200px); gap:18px; align-items:start; }
.senshi-art .arc-beat--shot.arc-beat--img-left{ grid-template-columns:minmax(0,200px) minmax(0,1fr); }
/* slideshow (gallery) beats: float the billboard so a long paragraph wraps
   beside it AND flows underneath it, instead of leaving dead space in a rigid
   column. Wider than a plain single-shot beat, too. */
.senshi-art .arc-beat--gallery{ display:block; }
/* Billboard width. Fluid with a hard cap, NOT a fixed px: a fixed 460px float
   crushed the text column to 18-31 chars/line anywhere between the 760px mobile
   breakpoint and about 1000px, which is a real window size. clamp() keeps the
   column above ~36 chars everywhere and still hits the full 460 at the 1080px
   width all the flush-tuning is measured at. */
.senshi-art .arc-beat--gallery .arc-beat-shot{
  float:right; width:clamp(300px, 50%, 460px); margin:2px 0 6px 20px;
}
.senshi-art .arc-beat--gallery.arc-beat--img-left .arc-beat-shot{
  float:left; margin:2px 20px 6px 0;
}
.senshi-art .arc-beat--gallery::after{ content:""; display:block; clear:both; }
/* These two belong to the GRID single-shot beats ONLY. They used to be written
   unscoped (`.arc-beat--img-left .arc-beat-*`), which was harmless purely because
   gallery beats are display:block and `order` is inert outside flex/grid. Any
   attempt to give gallery beats a grid silently woke them up and fought the
   intended column order - that is exactly what broke the two-column experiment
   twice. Scoped to --shot, where they belong. Zero render change today. */
.senshi-art .arc-beat--shot.arc-beat--img-left .arc-beat-text{ order:2; }
.senshi-art .arc-beat--shot.arc-beat--img-left .arc-beat-shot{ order:1; }
.senshi-art .arc-beat-text{ font-size:14.5px; line-height:1.62; }

/* ---------------------------------------------------------------------
   BRIDGE beats: connective narration that covers episodes we are NOT
   showing. These will never have screencaps of their own, so they must
   not wear a gallery box - an empty placeholder square sandwiched
   between two 460px billboards reads as a gallery that failed to load,
   which is exactly how it was reported. A bridge is text only, set in a
   washed band so it reads as the narrator catching you up rather than
   as a beat with a missing picture.
   NOT the same thing as a placeholder: a placeholder means "frames are
   coming later" and keeps its box. A bridge means "we skipped this on
   purpose" and never gets one.
   --------------------------------------------------------------------- */
.senshi-art .arc-beat--bridge{
  display:block; padding:12px 16px; margin:0 0 15px;
  background:var(--wash); border-left:3px solid var(--backbow);
  border-radius:0 8px 8px 0;
}
/* Full width would run to ~110 characters a line. Cap it. */
.senshi-art .arc-beat--bridge .arc-beat-text{ max-width:74ch; }
@media (max-width:760px){
  .senshi-art .arc-beat--bridge{ padding:11px 13px; }
}

.senshi-art .arc-beat-shot .ph--arcshot,
.senshi-art .arc-beat-shot img.art--arcshot{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:0;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); background:#fffdf6;
}
/* the compact "she comes in with" kit strip */
.senshi-art .arc-kit{
  margin:0 0 16px; padding:11px 13px; background:var(--wash);
  border:1.5px solid var(--backbow); border-radius:8px;
}
.senshi-art .arc-lede{
  display:block; font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.4px;
  text-transform:lowercase; color:var(--head); opacity:.72;
  margin:-2px 0 14px; max-width:64ch; line-height:1.75;
}
@media (max-width:760px){ .senshi-art .arc-lede{ font-size:12px; margin-bottom:12px; } }
.senshi-art .arc-kit-lead{
  display:block; font-family:rainyhearts, monospace; font-size:10px; letter-spacing:.4px;
  text-transform:lowercase; color:var(--head); opacity:.75; margin-bottom:8px;
}
.senshi-art .arc-kit-list{ display:flex; flex-wrap:wrap; gap:10px 16px; }
.senshi-art .kit{ display:flex; align-items:center; gap:9px; margin:0; max-width:300px; }
.senshi-art .kit-shot .ph--kitshot,
.senshi-art .kit-shot img.art--kitshot{
  width:44px; height:44px; object-fit:cover; margin:0; flex:none;
  border:2px solid var(--backbow); background:#fffdf6;
}
.senshi-art .kit-shot .ph--kitshot .ph-label{ display:none; }
.senshi-art .kit-cap{ display:flex; flex-direction:column; }
.senshi-art .kit-name{ font-weight:700; font-size:12.5px; color:var(--head); line-height:1.2; }
.senshi-art .kit-note{ font-size:11px; line-height:1.35; opacity:.8; }
/* the older-shape gallery (non-beat roster arcs) */
.senshi-art .arc-gallery-cont .arc-gallery{ display:flex; flex-wrap:wrap; gap:12px; }
.senshi-art .arc-gallery-cont .ph, .senshi-art .arc-gallery-cont img.art--arcshot{
  width:170px; height:auto; aspect-ratio:4/3; object-fit:cover; margin:0;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); background:#fffdf6;
}
/* co-appearance line inside a panel keeps its v8 look; give it a divider */
.senshi-art .arc-cont-wrap .arc-also{
  margin-top:16px; padding-top:12px; border-top:2px dashed var(--backbow);
}
/* (mobile arc beat + panel-head behaviour is owned by THE MOBILE TEMPLATE below) */

/* ---- SILVER, NOT GRAY (moon only) ---------------------------------
   Ashley: pearly white + gold + silver, but the silver read as flat gray.
   Give the silver surfaces (stat box, silver-crystal thread) a cool
   brushed-metal sheen with a white highlight and a real silver edge, so
   they read as lit silver against the pearl and the gold accents. */
   A vertical light-band gradient (bright, mid, bright) reads as curved
   brushed metal instead of a flat wash; a crisp white top edge and a real
   silver rim finish the chrome. Kept light enough behind the stat text. */
body.senshi--moon .senshi-art{ --silver-edge:#9aa1b8; }
body.senshi--moon .senshi-art .dossier-head .stats--merged{
  background:
    linear-gradient(180deg,#ffffff 0%,#eef0f7 24%,#d3d8e6 52%,#e6e9f2 76%,#fdfdff 100%);
  border:1px solid var(--silver-edge); border-radius:7px; padding:16px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(198,162,78,.22);
}
body.senshi--moon .senshi-art #thread-silver-crystal{
  background:
    linear-gradient(180deg,#ffffff 0%,#eef0f7 22%,#d6dbe8 54%,#e8ebf3 80%,#fdfdff 100%);
  border:1px solid var(--silver-edge); border-left:6px solid #8f97b0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    5px 5px 0 var(--frontbow);
}
body.senshi--moon .senshi-art #thread-silver-crystal .thread-kind{
  background:#8f97b0; color:#fffdf6;
}
body.senshi--moon .senshi-art #thread-silver-crystal .thread-mark{ color:#8f97b0; }

/* ---- POWERS folded into the arc console (Ashley) -------------------
   Each season's attacks & transformations sit inside that arc's panel;
   the video slots ride the ANIME side only. */
.senshi-art .arc-powers{ margin:18px 0 4px; padding-top:14px; border-top:2px dashed var(--backbow); }
/* the toggle checkbox is hidden; desktop keeps the grid open and the label reads
   as a plain heading. The mobile template turns the label into a tap target. */
.senshi-art .pow-toggle{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.senshi-art label.arc-powers-h{
  display:block; margin:0 0 12px; cursor:default;
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.5px;
  text-transform:lowercase; color:var(--head);
}
.senshi-art .arc-powers .powers-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); margin:0; }

/* ---- ELSEWHERE: no drop boxes, just a paragraph + image per variation - */
.senshi-art .elsewhere-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:24px;
  align-items:start; margin:0 0 22px;
}
.senshi-art .elsewhere-row--img-left{ grid-template-columns:minmax(0,240px) minmax(0,1fr); }
.senshi-art .elsewhere-row--img-left .elsewhere-text{ order:2; }
.senshi-art .elsewhere-row--img-left .elsewhere-shot{ order:1; }
.senshi-art .elsewhere-h{
  margin:0 0 8px; font-family:rainyhearts, monospace; font-size:15px; color:var(--head);
}
.senshi-art .elsewhere-text p{ margin:0 0 .7em; font-size:15px; line-height:1.66; }
.senshi-art .elsewhere-text p:last-child{ margin-bottom:0; }
.senshi-art .elsewhere-shot .ph--elseshot,
.senshi-art .elsewhere-shot img.art--elseshot{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:0;
  border:2px solid var(--backbow); box-shadow:4px 4px 0 var(--frontbow); background:#fffdf6;
}
@media (max-width:680px){
  .senshi-art .elsewhere-row,
  .senshi-art .elsewhere-row--img-left{ grid-template-columns:1fr; }
  .senshi-art .elsewhere-row--img-left .elsewhere-text{ order:0; }
  .senshi-art .elsewhere-row--img-left .elsewhere-shot{ order:0; }
}

/* =====================================================================
   MOBILE PASS (Ashley) - the reference has to hold at phone width before
   it rolls out to 25 pages. The dossier head, the floated pose and the
   arc index table are the three that needed real breakpoints.
   ===================================================================== */
@media (max-width:760px){
  /* dossier: stop forcing plate | stats side by side; stack them */
  .senshi-art .dossier-head{ grid-template-columns:1fr; gap:18px; }
  .senshi-art .dossier-plate{ max-width:320px; }
  /* the pose stops floating so the lede can't cram into a sliver beside it */
  .senshi-art .dossier-pose--float{ float:none; width:210px; margin:0 0 16px; }
  .senshi-art .dossier-lower::after{ content:none; }
}
@media (max-width:560px){
  /* stat values (e.g. "Princess Serenity of the Silver Millennium") are long,
     so one column reads far better than two crushed ones */
  .senshi-art .dossier-head .stats--merged{ grid-template-columns:1fr; gap:9px; }
  .senshi-art .dossier-pose--float{ width:56%; margin-left:auto; margin-right:auto; }
}
@media (max-width:520px){
  /* arc index: drop the season column (it still shows in the panel head when
     an arc is selected) and give the arc name the room it needs */
  .senshi-art .arc-index-head,
  .senshi-art .arc-row{ grid-template-columns:24px 1fr 42px; gap:9px; padding:9px 11px; }
  .senshi-art .arc-row-season{ display:none; }
  .senshi-art .arc-console{ padding:14px 12px 16px; }
  .senshi-art .arc-stage{ }
}

/* =====================================================================
   THE MOBILE TEMPLATE (Ashley) - the phone layer for the whole site, in
   one place. It rides on top of the component rules and the earlier
   width breakpoints (dossier stacking, stat single-column, arc table),
   and all 25 character pages inherit it. Five moves:
     1. one continuity by default (halves the per-arc scroll)
     2. powers collapse behind a tap
     3. beat images shrink to a thumbnail column beside the text
     4. a sticky arc head + a back-to-the-table link
     5. bigger tap targets + a tighter masthead
   ===================================================================== */
.senshi-art .arc-back{ display:none; }   /* desktop: no back link, no sticky head */

@media (max-width:680px){
  /* (1) ONE CONTINUITY BY DEFAULT. Hide the "both" pill and render the default
     (both-checked) as anime only, so a phone shows one telling at a time.
     Tapping anime / manga still works exactly as before. */
  .senshi-art .vp-both{ display:none; }
  .senshi-art .vin-both:checked ~ .arc-cont-wrap .arc-cont--manga{ display:none; }

  /* (2) POWERS COLLAPSE behind a tap. Closed by default on a phone; the label
     becomes a button with a caret that flips open. */
  .senshi-art .arc-powers .powers-grid{ grid-template-columns:1fr; display:none; }
  .senshi-art .pow-toggle:checked ~ .powers-grid{ display:grid; }
  .senshi-art label.arc-powers-h{
    cursor:pointer; display:flex; align-items:center; gap:8px; margin:0;
    padding:11px 13px; border:1.5px solid var(--backbow); border-radius:7px;
    background:var(--wash);
  }
  .senshi-art label.arc-powers-h::before{ content:"\25B8"; font-size:11px; opacity:.7; }
  .senshi-art .pow-toggle:checked ~ label.arc-powers-h{ margin-bottom:12px; }
  .senshi-art .pow-toggle:checked ~ label.arc-powers-h::before{ content:"\25BE"; }

  /* (3) BEAT IMAGES stay small and beside the text (a compact thumbnail column)
     instead of full-width blocks, so the story carries the arc. Flex is used
     here (not grid) so the thumbnail can't drop to its own row. */
  .senshi-art .arc-beat--shot{ display:flex; flex-direction:row; gap:11px; align-items:flex-start; }
  .senshi-art .arc-beat--shot.arc-beat--img-left{ flex-direction:row-reverse; }
  .senshi-art .arc-beat--shot .arc-beat-text{ order:0; flex:1 1 auto; min-width:0; }
  .senshi-art .arc-beat--shot .arc-beat-shot{ order:0; flex:0 0 34%; }

  /* (4) ARC HEAD as a clean bar + a back-to-the-table link at the END of each
     arc, so finishing one arc is one tap back to the index. (Sticky was dropped:
     the frame clips the article, and with the panels now much shorter it isn't
     needed.) */
  .senshi-art .arc-panel-head{
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px;
    padding:9px 11px; margin:0 0 14px; background:var(--paper);
    border:2px solid var(--backbow); border-radius:8px;
  }
  .senshi-art .arc-panel-name{ font-size:20px; }
  .senshi-art .arc-back{
    display:block; width:max-content; margin:18px auto 2px;
    font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.4px;
    text-transform:lowercase; text-decoration:none; color:var(--head);
    background:var(--wash); border:1.5px solid var(--backbow);
    border-radius:999px; padding:8px 16px;
  }

  /* (5) TAP TARGETS - rows and pills sized for a thumb. */
  .senshi-art .arc-row{ min-height:46px; align-content:center; }
  .senshi-art .arc-vp{ padding:7px 13px; }
  .senshi-art .arc-viewswitch{ gap:7px; }

  /* (6) SLIDESHOW BEATS go full width on a phone so the billboard is big enough
     to actually read (a 34% thumbnail would be too small for a carousel). The
     single-image beats keep the compact thumbnail from (3). */
  .senshi-art .arc-beat--gallery{ display:block; }
  .senshi-art .arc-beat--gallery .arc-beat-text{ margin-bottom:12px; }
  .senshi-art .arc-beat--gallery .arc-beat-shot{ float:none; width:100%; max-width:100%; margin:0 0 12px; }
  /* touch: arrows and dots need to be comfortably tappable */
  .senshi-art .ss-nav{ width:34px; height:46px; font-size:24px; }
  .senshi-art .ss-dot{ width:9px; height:9px; }
  .senshi-art .ss-dots{ gap:8px; margin-top:10px; }
}

@media (max-width:400px){
  .senshi-art .masthead-name{ font-size:30px; line-height:1.05; }
}

/* =====================================================================
   SLIDESHOW - film-comic panels in a beat slot (Ashley). Auto-advances,
   pauses on hover/tap, arrows + dots to flip by hand. Fed by the tagged
   media library; the behaviour is the small script at the page foot.
   ===================================================================== */
.senshi-art .slideshow{ position:relative; margin:0; }
.senshi-art .ss-frame{
  position:relative; aspect-ratio:4/3; width:100%; overflow:hidden;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow);
  background:#0c0b14;   /* dark billboard matte behind the panels */
}
.senshi-art .ss-slide{
  position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition:opacity .45s ease; display:flex; align-items:center; justify-content:center;
}
.senshi-art .ss-slide.is-on{ opacity:1; visibility:visible; }
.senshi-art .ss-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.senshi-art .ss-cap{
  position:absolute; left:0; right:0; bottom:0; padding:7px 10px 6px;
  background:linear-gradient(0deg, rgba(0,0,0,.74), rgba(0,0,0,0));
  color:#fff; display:flex; flex-direction:column; gap:1px; text-align:left;
}
.senshi-art .ss-note{ font-size:11.5px; line-height:1.3; }
.senshi-art .ss-credit{ font-family:rainyhearts, monospace; font-size:8px; letter-spacing:.3px; opacity:.72; }
.senshi-art .ss-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:26px; height:38px; border:0; cursor:pointer; color:#fff; font-size:22px; line-height:1;
  background:rgba(0,0,0,.4); opacity:0; transition:opacity .15s;
}
.senshi-art .slideshow:hover .ss-nav,
.senshi-art .slideshow:focus-within .ss-nav{ opacity:1; }
.senshi-art .ss-prev{ left:0; }
.senshi-art .ss-next{ right:0; }
.senshi-art .ss-nav:hover{ background:rgba(0,0,0,.62); }
.senshi-art .ss-dots{ display:flex; gap:5px; justify-content:center; margin:8px 0 0; flex-wrap:wrap; }
.senshi-art .ss-dot{
  width:7px; height:7px; padding:0; border:1px solid var(--backbow); background:transparent;
  border-radius:50%; cursor:pointer;
}
.senshi-art .ss-dot.is-on{ background:var(--frontbow); border-color:var(--frontbow); }
/* Progress along the reel. Lives inside .ss-frame, absolutely positioned, so
   it costs no page height. Ambient on purpose - a forty-frame gallery reads as
   a flipbook, and you feel where you are in a flipbook rather than reading it
   off a counter. */
.senshi-art .ss-bar{
  position:absolute; left:0; right:0; bottom:0; height:5px; z-index:3;
  background:rgba(0,0,0,.66); pointer-events:none;
}
/* backbow, not frontbow: the frame's drop shadow is frontbow and sits directly
   under this, so the two golds would read as one band. */
.senshi-art .ss-bar-fill{
  display:block; height:100%; width:0;
  background:var(--backbow); transition:width .28s ease;
}
@media (max-width:760px){ .senshi-art .ss-bar{ height:6px; } }
.senshi-art .ss-count{
  position:absolute; top:5px; right:5px; z-index:3; font-family:rainyhearts, monospace;
  font-size:16px; color:#fff; background:rgba(0,0,0,.58); padding:4px 9px;
  letter-spacing:.5px; pointer-events:none;
}
/* on touch screens the hover arrows can't show, so keep them faintly visible */
@media (hover:none){
  .senshi-art .ss-nav{ opacity:.85; }
}

/* =====================================================================
   SLIDESHOW, LONG REELS - a box with forty-odd frames in it needs a way
   to get around. Dots stop working past about ten (they wrap into a
   smear you cannot aim at), so above that threshold the emitter swaps
   them for a scrolling thumbnail strip and the frame counter. Short
   galleries are untouched and still use dots.
   ===================================================================== */
.senshi-art .ss-strip{
  display:flex; gap:4px; margin:8px 0 0; padding:4px;
  overflow-x:auto; overscroll-behavior-x:contain;
  background:var(--wash); border:1.5px solid var(--backbow);
  scrollbar-width:thin; scrollbar-color:var(--frontbow) transparent;
}
.senshi-art .ss-strip::-webkit-scrollbar{ height:7px; }
.senshi-art .ss-strip::-webkit-scrollbar-track{ background:transparent; }
.senshi-art .ss-strip::-webkit-scrollbar-thumb{ background:var(--frontbow); }
.senshi-art .ss-thumb{
  flex:0 0 auto; width:52px; height:39px; padding:0; cursor:pointer;
  border:2px solid transparent; background:#0c0b14; opacity:.5;
  transition:opacity .15s;
}
.senshi-art .ss-thumb:hover,
.senshi-art .ss-thumb:focus-visible{ opacity:.92; }
.senshi-art .ss-thumb.is-on{ opacity:1; border-color:var(--frontbow); }
.senshi-art .ss-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Bigger targets where the strip is driven by a thumb, not a pointer. */
@media (max-width:760px){
  .senshi-art .ss-thumb{ width:62px; height:47px; }
  .senshi-art .ss-strip{ gap:5px; }
}
@media (hover:none){
  .senshi-art .ss-thumb{ opacity:.72; }
}

/* ---------------------------------------------------------------------
   MOBILE FIX for left-floated gallery beats.
   The mobile override further up is `.arc-beat--gallery .arc-beat-shot`,
   which is ONE class less specific than the desktop
   `.arc-beat--gallery.arc-beat--img-left .arc-beat-shot`. So img-right
   beats went full width on a phone and img-left beats silently kept
   floating. Nobody noticed while the billboard was a fixed 320px; the
   moment a thumbnail strip went inside it, the shot took the strip's
   natural width and blew the page out to several thousand pixels.
   Matching the specificity is the whole fix.
   --------------------------------------------------------------------- */
@media (max-width:760px){
  .senshi-art .arc-beat--gallery .arc-beat-shot,
  .senshi-art .arc-beat--gallery.arc-beat--img-left .arc-beat-shot{
    float:none; width:100%; max-width:100%; margin:0 0 12px;
  }
}
/* Belt and braces: a scrolling strip must never widen its own container,
   whatever the float rules end up doing. */
.senshi-art .arc-beat--gallery .arc-beat-shot{ min-width:0; }
.senshi-art .ss-strip{ max-width:100%; min-width:0; }
/* The anime/manga columns are inline-blocks, so they shrink-to-fit their
   widest child. A strip of 89 thumbs is a very wide child, and the column
   grew to five thousand pixels to "fit" it before the strip ever got the
   chance to scroll. Capping the column at its parent's width restores the
   normal order of events: column takes the page width, strip scrolls inside
   it. Display model untouched, so the desktop two-column view is unchanged. */
.senshi-art .arc-cont{ max-width:100%; }

/* =====================================================================
   EPISODE TAG - the beats skip the monster-of-the-week filler, so they
   run ep 1, 8, 10, 13, 45, 46. Rather than call attention to what is
   missing, every billboard simply says which episode it is; the jumps
   are then visible to anyone who cares and invisible to anyone who
   doesn't. Mirrors .ss-count on the opposite corner, so the two read as
   one pair of labels rather than two separate ideas.
   ================================================================== */
.senshi-art .ss-ep{
  position:absolute; top:5px; left:5px; z-index:3; font-family:rainyhearts, monospace;
  font-size:16px; color:#fff; background:rgba(0,0,0,.58); padding:4px 9px;
  letter-spacing:.5px; pointer-events:none;
}
@media (max-width:760px){
  .senshi-art .ss-ep,
  .senshi-art .ss-count{ font-size:16px; }
}

/* ==========================================================================
   19. THE WING PAGE'S CONTAINER  (added 9 Sep 2026)
   ==========================================================================
   The arc console moved onto sailormoon.html, and on that page it does not
   fit the way it fits here.

   main.container--post is a flex item inside .cabinet, and a flex item's
   default min-width:auto will not let it shrink below its content's
   max-content width. The console's widest child asks for about 2956px. So
   with the console in place main went from 995px to 2968px and slid to
   x=-966, off the left edge of the viewport, taking the select frame, the
   card roster and the lore block with it.

   Measured before writing this: three different insertion points on that page
   all blew out to the same 2968px, so the placement was never the problem -
   the missing floor was. With this rule every dimension returns to its
   original value (main 995, roster 555, panel 360, lore 989) and the console
   sits at 983px inside the frame. On the page WITHOUT the console it changes
   nothing at all.

   Scoped to body.wing.select so no other page's container is touched. */
body.wing.select main.container--post{ min-width: 0; }

/* ==========================================================================
   20. THE ARC INDEX AS A TAB STRIP   (9 Sep 2026)
   ==========================================================================
   It was a four-column table - number, arc, anime season, year - with a header
   row, and it stood 259px tall above everything else in the console.

   Two of those columns were already being said twice: the selected panel's own
   head reads "1  Dark Kingdom   Sailor Moon - 1992 // Dark Kingdom arc". So the
   table repeated the season and the year for the arc the reader is looking at,
   and listed them for four arcs they are not.

   Five names is a row of pills, not a table. Deliberately the same shape as the
   both/anime/manga switch below it: same job, same look, one control family
   instead of two. The radios are untouched. */
.senshi-art .arc-index--tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  border:0; border-radius:0; overflow:visible; background:none;
  margin:0 0 16px; padding:0;
}
.senshi-art .arc-index--tabs .arc-row{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:5px 13px; border:1.5px solid var(--backbow); border-radius:999px;
  background:var(--paper); transition:background .08s, border-color .08s;
}
.senshi-art .arc-index--tabs .arc-row:last-child{ border-bottom:1.5px solid var(--backbow); }
.senshi-art .arc-index--tabs .arc-row:hover{ background:var(--wash); }
.senshi-art .arc-index--tabs .arc-row-n{ font-size:11px; }
.senshi-art .arc-index--tabs .arc-row-arc{ font-size:13.5px; }

@media (max-width:780px){
  /* the table rule above gives every .arc-row a 46px floor for thumbs. A pill
     does not need it, and five 46px pills is the height problem again. */
  .senshi-art .arc-index--tabs .arc-row{ min-height:0; padding:7px 13px; }
}

/* ==========================================================================
   21. VILLAIN CHAPTERS   (9 Sep 2026)
   ==========================================================================
   A level inside an arc. The console was already collapsed at the arc level,
   so what a reader scrolled was one arc's whole run in a single drop - 71
   beats for Dark Kingdom. These are six chapters inside the anime column, one
   per villain, and any number of them can be open at once.

   Checkboxes, not radios: a reader should be able to open three chapters and
   leave them open. Same idiom .arc-powers already uses - hidden input first,
   label and body as siblings, `:checked ~` doing the work. No script.

   SILVER TO GOLD. Six tints at the SAME lightness, only the temperature
   moving: cool silver at Jadeite warming to Usagi's own gold at D Point.
   Holding lightness constant is the whole trick - vary it and some chapters
   read as more important than the others.

   The SPINE is what separates the chapters, not the header fill. It runs the
   full height of the chapter, so a reader 12,000px inside chapter 3 can still
   see which chapter they are in. 8px, because at 4 a gradient has no room to
   be a gradient - it was tried and it is invisible. Four stops, no images.
   Highlight is the base mixed 42% toward white, shadow 32% toward black,
   bounce 22% toward white; run the same mix rather than eyeballing new stops
   if a chapter is ever added or recoloured.

   One ::before on .ch carries it, rather than one each on the header and the
   body: .ch is the positioned ancestor of both, so a single element spans the
   header and whatever body is showing, and there is no seam to keep aligned.

   PROSE NEVER SITS ON A TINT. Open bodies are #fefeff at full contrast, which
   also keeps faith with the big-font readability rule. Small text in a header
   uses the chapter's own small-text colour, never the spine colour: #c6a24e
   on #faf5e2 is far too weak at 8.5px. Same discipline the senshi palettes
   already use - accent for text, frontbow for decoration. */
.senshi-art .arc-chapters{ margin:0; }
.senshi-art .ch{ position:relative; margin:0 0 16px; padding-left:22px; }
.senshi-art .ch:last-child{ margin-bottom:0; }
.senshi-art .ch::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px; border-radius:2px;
  background:linear-gradient(180deg,
     var(--sp-lt) 0%, var(--sp-edge) 40%, var(--sp-dk) 76%, var(--sp-bo) 100%);
}
.senshi-art .ch-in{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.senshi-art .ch-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  cursor:pointer; user-select:none; padding:11px 14px;
  background:var(--ch-fill); border:1.5px solid var(--backbow); border-radius:6px;
  font-family:rainyhearts, monospace;
}
.senshi-art .ch-head::before{ content:"\25B8"; font-size:11px; opacity:.75; color:var(--ch-small); }
.senshi-art .ch-in:checked ~ .ch-head::before{ content:"\25BE"; }
.senshi-art .ch-head:hover{ border-color:var(--sp-edge); }
.senshi-art .ch-n{ font-size:12px; color:var(--ch-small); }
.senshi-art .ch-name{ font-size:15px; color:var(--head); margin-right:2px; }
.senshi-art .ch-eps{ font-size:8.5px; letter-spacing:.4px; color:var(--ch-small); }
.senshi-art .ch-state{ font-size:8.5px; letter-spacing:.4px; color:var(--ch-small);
  margin-left:auto; opacity:.85; }
.senshi-art .ch-body{ display:none; background:#fefeff; padding:18px 0 2px; }
.senshi-art .ch-in:checked ~ .ch-body{ display:block; }

/* silver -> gold. fill / small text / four spine stops */
.senshi-art .ch--1{ --ch-fill:#eef0f6; --ch-small:#5f6678;
  --sp-lt:#bbbfcb; --sp-edge:#8a90a6; --sp-dk:#5e6271; --sp-bo:#a4a8ba; }
.senshi-art .ch--2{ --ch-fill:#f0f1f5; --ch-small:#666c78;
  --sp-lt:#c0c4cd; --sp-edge:#939aa8; --sp-dk:#646972; --sp-bo:#abb0bb; }
.senshi-art .ch--3{ --ch-fill:#f2f2f3; --ch-small:#6b6b73;
  --sp-lt:#c4c5ca; --sp-edge:#9a9ba4; --sp-dk:#696970; --sp-bo:#b0b1b8; }
.senshi-art .ch--4{ --ch-fill:#f5f3ee; --ch-small:#756d5e;
  --sp-lt:#cdc6ba; --sp-edge:#a89d88; --sp-dk:#726b5c; --sp-bo:#bbb3a2; }
.senshi-art .ch--5{ --ch-fill:#f4f4f5; --ch-small:#8a8a94;
  --sp-lt:#d6c8a0; --sp-edge:#b8a05c; --sp-dk:#7d6d3f; --sp-bo:#c8b580; }
.senshi-art .ch--6{ --ch-fill:#faf5e2; --ch-small:#8b7137;
  --sp-lt:#dec998; --sp-edge:#c6a24e; --sp-dk:#876e35; --sp-bo:#d3b675; }
/* #c6a24e and #8b7137 are Usagi's own --frontbow and --accent, so the gold end
   ties back to the profile page this console came from. */

/* NOT YET: present, visibly unfinished, not openable. A dull hatched spine
   rather than a polished one, so the slot makes no colour claim. */
.senshi-art .ch--soon::before{
  background:repeating-linear-gradient(180deg,#d2d2d6 0 5px,#c2c2c7 5px 10px);
}
.senshi-art .ch--soon .ch-head{ cursor:default; border-style:dashed; opacity:.75; }
.senshi-art .ch--soon .ch-head::before{ content:""; }
.senshi-art .ch--soon .ch-name{ color:var(--ch-small); }

/* Print. The arc-level rule already forces every arc panel open; without this
   one, printing silently loses five chapters out of six. */
@media print{
  .senshi-art .ch-body{ display:block !important; }
}

@media (max-width:780px){
  .senshi-art .ch{ padding-left:18px; }
  .senshi-art .ch::before{ width:6px; }
  .senshi-art .ch-head{ padding:12px; gap:8px; }
  .senshi-art .ch-state{ margin-left:0; width:100%; }
}

/* ==========================================================================
   21. VILLAIN CHAPTERS   (9 Sep 2026)
   ==========================================================================
   A level inside an arc. The console was already collapsed at the arc level,
   so what a reader scrolled was one arc's whole run in a single drop - 71
   beats for Dark Kingdom. These are six chapters inside the anime column, one
   per villain, and any number of them can be open at once.

   Checkboxes, not radios: a reader should be able to open three chapters and
   leave them open. Same idiom .arc-powers already uses - hidden input first,
   label and body as siblings, `:checked ~` doing the work. No script.

   SILVER TO GOLD. Six tints at the SAME lightness, only the temperature
   moving: cool silver at Jadeite warming to Usagi's own gold at D Point.
   Holding lightness constant is the whole trick - vary it and some chapters
   read as more important than the others.

   The SPINE is what separates the chapters, not the header fill. It runs the
   full height of the chapter, so a reader 12,000px inside chapter 3 can still
   see which chapter they are in. 8px, because at 4 a gradient has no room to
   be a gradient - it was tried and it is invisible. Four stops, no images.
   Highlight is the base mixed 42% toward white, shadow 32% toward black,
   bounce 22% toward white; run the same mix rather than eyeballing new stops
   if a chapter is ever added or recoloured.

   One ::before on .ch carries it, rather than one each on the header and the
   body: .ch is the positioned ancestor of both, so a single element spans the
   header and whatever body is showing, and there is no seam to keep aligned.

   PROSE NEVER SITS ON A TINT. Open bodies are #fefeff at full contrast, which
   also keeps faith with the big-font readability rule. Small text in a header
   uses the chapter's own small-text colour, never the spine colour: #c6a24e
   on #faf5e2 is far too weak at 8.5px. Same discipline the senshi palettes
   already use - accent for text, frontbow for decoration. */
.senshi-art .arc-chapters{ margin:0; }
.senshi-art .ch{ position:relative; margin:0 0 16px; padding-left:22px; }
.senshi-art .ch:last-child{ margin-bottom:0; }
.senshi-art .ch::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px; border-radius:2px;
  background:linear-gradient(180deg,
     var(--sp-lt) 0%, var(--sp-edge) 40%, var(--sp-dk) 76%, var(--sp-bo) 100%);
}
.senshi-art .ch-in{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.senshi-art .ch-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  cursor:pointer; user-select:none; padding:11px 14px;
  background:var(--ch-fill); border:1.5px solid var(--backbow); border-radius:6px;
  font-family:rainyhearts, monospace;
}
.senshi-art .ch-head::before{ content:"\25B8"; font-size:11px; opacity:.75; color:var(--ch-small); }
.senshi-art .ch-in:checked ~ .ch-head::before{ content:"\25BE"; }
.senshi-art .ch-head:hover{ border-color:var(--sp-edge); }
.senshi-art .ch-n{ font-size:12px; color:var(--ch-small); }
.senshi-art .ch-name{ font-size:15px; color:var(--head); margin-right:2px; }
.senshi-art .ch-eps{ font-size:8.5px; letter-spacing:.4px; color:var(--ch-small); }
.senshi-art .ch-state{ font-size:8.5px; letter-spacing:.4px; color:var(--ch-small);
  margin-left:auto; opacity:.85; }
.senshi-art .ch-body{ display:none; background:#fefeff; padding:18px 0 2px; }
.senshi-art .ch-in:checked ~ .ch-body{ display:block; }

/* silver -> gold. fill / small text / four spine stops */
.senshi-art .ch--1{ --ch-fill:#eef0f6; --ch-small:#5f6678;
  --sp-lt:#bbbfcb; --sp-edge:#8a90a6; --sp-dk:#5e6271; --sp-bo:#a4a8ba; }
.senshi-art .ch--2{ --ch-fill:#f0f1f5; --ch-small:#666c78;
  --sp-lt:#c0c4cd; --sp-edge:#939aa8; --sp-dk:#646972; --sp-bo:#abb0bb; }
.senshi-art .ch--3{ --ch-fill:#f2f2f3; --ch-small:#6b6b73;
  --sp-lt:#c4c5ca; --sp-edge:#9a9ba4; --sp-dk:#696970; --sp-bo:#b0b1b8; }
.senshi-art .ch--4{ --ch-fill:#f5f3ee; --ch-small:#756d5e;
  --sp-lt:#cdc6ba; --sp-edge:#a89d88; --sp-dk:#726b5c; --sp-bo:#bbb3a2; }
.senshi-art .ch--5{ --ch-fill:#f4f4f5; --ch-small:#8a8a94;
  --sp-lt:#d6c8a0; --sp-edge:#b8a05c; --sp-dk:#7d6d3f; --sp-bo:#c8b580; }
.senshi-art .ch--6{ --ch-fill:#faf5e2; --ch-small:#8b7137;
  --sp-lt:#dec998; --sp-edge:#c6a24e; --sp-dk:#876e35; --sp-bo:#d3b675; }
/* #c6a24e and #8b7137 are Usagi's own --frontbow and --accent, so the gold end
   ties back to the profile page this console came from. */

/* NOT YET: present, visibly unfinished, not openable. A dull hatched spine
   rather than a polished one, so the slot makes no colour claim. */
.senshi-art .ch--soon::before{
  background:repeating-linear-gradient(180deg,#d2d2d6 0 5px,#c2c2c7 5px 10px);
}
.senshi-art .ch--soon .ch-head{ cursor:default; border-style:dashed; opacity:.75; }
.senshi-art .ch--soon .ch-head::before{ content:""; }
.senshi-art .ch--soon .ch-name{ color:var(--ch-small); }

/* Print. The arc-level rule already forces every arc panel open; without this
   one, printing silently loses five chapters out of six. */
@media print{
  .senshi-art .ch-body{ display:block !important; }
}

@media (max-width:780px){
  .senshi-art .ch{ padding-left:18px; }
  .senshi-art .ch::before{ width:6px; }
  .senshi-art .ch-head{ padding:12px; gap:8px; }
  .senshi-art .ch-state{ margin-left:0; width:100%; }
}

/* ==========================================================================
   22. THE UNDER-CONSTRUCTION BANNER   (9 Sep 2026)
   ==========================================================================
   Four arcs and one column are still summaries rather than built galleries.
   This says so, at the top of each, and the writing underneath stays exactly
   where it is - 2,211 words of it. The banner is a header, not a replacement:
   nothing below it is hidden, wrapped or cut.

   The stripes are a repeating-linear-gradient in the arc's own --frontbow and
   --paper, not the 1998 GIF: no image, no request, and it recolours with the
   palette like everything else here. An under-construction plate is on-brand
   for this site, so it reads as a design choice rather than an apology - which
   is the whole reason it is a real component and not a note in italics. */
.senshi-art .uc{
  margin:0 0 18px; border:2px dashed var(--backbow); border-radius:8px;
  background:var(--wash); overflow:hidden;
}
.senshi-art .uc-stripe{
  height:10px;
  background:repeating-linear-gradient(135deg,
    var(--frontbow) 0 9px, var(--paper) 9px 18px);
  border-bottom:2px dashed var(--backbow);
}
.senshi-art .uc-body{ padding:11px 14px 12px; }
.senshi-art .uc-h{
  margin:0 0 5px; font-family:rainyhearts, monospace; font-size:11px;
  letter-spacing:.6px; text-transform:lowercase; color:var(--head);
}
.senshi-art .uc-p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink); opacity:.82; }

@media (max-width:780px){
  .senshi-art .uc-body{ padding:10px 12px 11px; }
  .senshi-art .uc-p{ font-size:14px; }
}

/* ==========================================================================
   23. THE WING PAGE SHOWS THE ANIME COLUMN ONLY   (9 Sep 2026)
   ==========================================================================
   All five manga columns are written summaries waiting on panel crops. Ashley
   asked for them hidden rather than removed, which is right - there are about
   1,100 words in them and they come back when the panels do. Deleting these
   two rules is the whole revert.

   The both/anime/manga switch goes with them. A three-way control offering a
   column that is not there is a button that lies.

   Scoped to body.wing.select so a profile page carrying its own console keeps
   both of its columns. */
body.wing.select .senshi-art .arc-cont--manga,
body.wing.select .senshi-art .arc-viewswitch{ display:none; }

/* .arc-cont is an inline-block - it began life as the little anime/manga chip
   and got reused as the column wrapper. Shrink-to-fit was invisible while the
   column was full of billboards, because its max-content width filled the row.
   With the chapters collapsed the widest thing in it is a chapter header, so
   the column shrank to about half the console and left a hole beside it. As
   the only column on this page it should simply be the width of the console. */
body.wing.select .senshi-art .arc-cont--anime{ display:block; width:auto; }

/* ==========================================================================
   24. CHAPTER HEADERS, LOUDER   (9 Sep 2026)
   ==========================================================================
   They were sized as a list - a 15px name on an 11px row - and they are not a
   list, they are the main control of a 30,000px section. The site's big-font
   rule points the same way. */
.senshi-art .ch-head{ padding:15px 18px; gap:12px; }
.senshi-art .ch-head::before{ font-size:14px; opacity:.85; }
.senshi-art .ch-n{ font-size:15px; }
.senshi-art .ch-name{ font-size:20px; letter-spacing:.3px; }
.senshi-art .ch-eps{ font-size:10px; }
.senshi-art .ch-state{ font-size:10px; }
.senshi-art .ch{ margin:0 0 20px; }

@media (max-width:780px){
  .senshi-art .ch-head{ padding:14px 14px; }
  .senshi-art .ch-name{ font-size:18px; }
  .senshi-art .ch-n{ font-size:14px; }
}

/* ==========================================================================
   25. THE CHAPTER NAME GETS ITS OWN FACE   (9 Sep 2026)
   ==========================================================================
   Size alone did not do it. 59 rules in this file set rainyhearts, so a bigger
   rainyhearts chapter name was still the same voice as the small print beside
   it. SMB3 is caps-only and chunky, which separates it cleanly from the
   lowercase chrome and reads as a heading rather than a row.

   Chosen by rendering eight of the site's faces into this row and looking:
   Press Start 2P competes with the page h1, nintendods and retrocomputer carry
   the same weight as rainyhearts, mariokartds crowds the long Zoisite names,
   grapesoda loses legibility at this size, Minecraftbold works but is cruder.

   No font-weight here. House rule: no bold on pixel fonts - SMB3 is chunky by
   design, and synthesising bold on top of it would only fur the edges.

   The number, the episode range and the beat count stay rainyhearts, so the
   header has one loud line and one quiet one. */
.senshi-art .ch-name{
  font-family:SMB3, rainyhearts, monospace;
  font-weight:normal;
  font-size:20px; letter-spacing:.5px;
}
@media (max-width:780px){
  /* SMB3's caps are wider than rainyhearts' lowercase, so at phone width the
     name gets a line of its own: number on the first line, name on the second,
     episode range and beat count sharing the third. Tried letting the name
     flex beside the number instead and the count rode up over the text on the
     two long Zoisite chapters. This way all six headers have the same shape
     whether the name takes one line or two. */
  .senshi-art .ch-name{ font-size:16px; letter-spacing:.3px; flex:1 1 100%; }
  .senshi-art .ch-eps{ flex:0 0 auto; }
  .senshi-art .ch-state{ margin-left:auto; width:auto; }
}

/* ==========================================================================
   26. CHAPTERS AND BEATS AS BLOCKS   (9 Sep 2026)
   ==========================================================================
   Replaces the flat per-chapter fills above. The colour is not carrying
   identity any more - it is carrying reading rhythm, so the page breaks into
   blocks the eye can travel down.

   THE MECHANIC IS A FIXED-HEIGHT BAND AT THE TOP OF A BLOCK, not a
   top-to-bottom fade. A chapter can be 12,000px tall and a beat 400; a fade
   over full height is invisible on the first and heavy on the second. A band
   that is always 260px on a chapter and 120px on a beat announces every block
   the same way whatever its length, and the prose is back on near-white by
   the time anyone is reading it.

   WEIGHT ORDER, and it is deliberate: the billboard is heaviest and untouched,
   then the chapter header, then the beat ground, then small text. The beat
   ground is the reading surface and stays the faintest thing here - a border
   or a solid tint at that level would checkerboard against the billboards and
   make the prose harder to read rather than easier.

   Chapters alternate cool and warm so two adjacent blocks separate without six
   hues. Beats do not alternate; at that scale it reads as stripes. */
.senshi-art .ch{
  --blk-edge:#e2ddec;
  border:1.5px solid var(--blk-edge); border-radius:9px;
  padding-left:22px; margin:0 0 18px; overflow:hidden;
  background:linear-gradient(180deg,#eceaf6 0%,#f5f3fa 42%,#fefeff 100%)
             no-repeat top/100% 260px, #fefeff;
}
.senshi-art .ch:nth-child(even){
  --blk-edge:#e9e2d6;
  background:linear-gradient(180deg,#f6f0e4 0%,#fbf7ef 42%,#fefeff 100%)
             no-repeat top/100% 260px, #fefeff;
}
/* the per-chapter fills from section 21 are off; the spine still carries the
   silver-to-gold ramp, which is where that idea still earns its place */
.senshi-art .ch--1,.senshi-art .ch--2,.senshi-art .ch--3,
.senshi-art .ch--4,.senshi-art .ch--5,.senshi-art .ch--6{
  --ch-fill:transparent; --ch-small:#6a6478;
}
.senshi-art .ch-head{
  background:transparent; border:0; border-radius:0;
  border-bottom:1px solid var(--blk-edge);
}
.senshi-art .ch-body{ background:transparent; padding:16px 14px 6px 0; }
.senshi-art .ch--soon .ch-head{ border-bottom:0; }

/* The unfinished chapter needs to read as inactive WITHOUT being unreadable.
   It was doing that with opacity, which took "not yet" down to 3.01:1 - below
   AA for 10px text, and it is information, not a disabled form control. So the
   inactive signal moves entirely to the things that carry no contrast cost:
   a flat neutral ground instead of a coloured band, a dashed border, the
   hatched spine, and no caret. The text goes back to full strength. */
.senshi-art .ch--soon,
.senshi-art .ch:nth-child(even).ch--soon{
  background:#f1f0f3; border-style:dashed; --blk-edge:#d8d6de;
}
.senshi-art .ch--soon .ch-head{ opacity:1; cursor:default; }
.senshi-art .ch--soon{ --ch-small:#6f6a7a; }
.senshi-art .ch--soon .ch-name{ color:#6f6a7a; }

/* the beat: the same band, shorter, and nothing else. No border, no shadow. */
.senshi-art .ch-body .arc-beat{
  background:linear-gradient(180deg,#f7f5fd 0%,#fdfdff 70%)
             no-repeat top/100% 120px, #fefeff;
  border-radius:8px; padding:15px 16px; margin-bottom:15px;
}
.senshi-art .ch-body .arc-beat:last-child{ margin-bottom:4px; }

@media (max-width:780px){
  .senshi-art .ch{ background-size:100% 200px, auto; }
  .senshi-art .ch-body{ padding:12px 10px 6px 0; }
  .senshi-art .ch-body .arc-beat{ padding:13px 12px; }
}
@media print{
  /* the bands are decoration and they cost ink */
  .senshi-art .ch, .senshi-art .ch-body .arc-beat{ background:#fff; }
}

/* ==========================================================================
   27. TIGHTENING   (9 Sep 2026)
   ==========================================================================
   Measured before changing anything: each beat carried 45-51px of chrome
   around ~352px of content, and text-to-billboard was 352 vs 351, so the beats
   themselves are already filled properly - the slack was all in the padding,
   the margins and the 6px hanging under each billboard.

   Nothing here touches the prose or the billboard. */
.senshi-art .ch{ margin:0 0 12px; }
.senshi-art .ch-head{ padding:12px 16px; }
.senshi-art .ch-body{ padding:8px 12px 2px 0; }
.senshi-art .ch-body .arc-beat{ padding:10px 14px; margin-bottom:9px; }
.senshi-art .ch-body .arc-beat:last-child{ margin-bottom:2px; }
/* the billboard hung 6px clear of the beat's own padding, which stacked with
   it into 21px of slack under every gallery */
.senshi-art .ch-body .arc-beat .arc-beat-shot{ margin-bottom:2px; }
.senshi-art .ch-body .ss-strip{ margin-top:6px; }

@media (max-width:780px){
  .senshi-art .ch-head{ padding:11px 12px; }
  .senshi-art .ch-body{ padding:8px 8px 2px 0; }
  .senshi-art .ch-body .arc-beat{ padding:10px 10px; margin-bottom:8px; }
}

/* ==========================================================================
   28. THE UNBUILT ARCS ARE LOCKED   (9 Sep 2026)
   ==========================================================================
   Dark Kingdom is the only arc with chapters in it. The other four are
   summaries, and a pill that opens onto a panel with no chapters promises
   something the page cannot keep, so their radios are disabled and their tabs
   read as unavailable.

   Same vocabulary as the "not yet" chapter inside Dark Kingdom - flat neutral
   ground, dashed border, readable text, no pointer - because it is the same
   statement at a different level. Contrast stays above 4.5: the tab says it is
   unavailable by its border and its ground, not by being faint. */
.senshi-art .arc-index--tabs .arc-row--soon{
  cursor:default;
  background:#f1f0f3;
  border:1.5px dashed #d3d1da;
  color:#6f6a7a;
}
.senshi-art .arc-index--tabs .arc-row--soon:hover{ background:#f1f0f3; }
.senshi-art .arc-index--tabs .arc-row--soon .arc-row-n,
.senshi-art .arc-index--tabs .arc-row--soon .arc-row-arc{ color:#6f6a7a; }

/* ==========================================================================
   29. THE EPISODE RULER   (9 Sep 2026)
   ==========================================================================
   Every episode in a chapter's range gets a chip, including the ones the
   synopsis skips. Built ones are solid and jump to their first beat; skipped
   ones are dim and inert. Ashley wanted the filler acknowledged without it
   filling the page - a chip is the smallest tip of the hat there is.

   It does a second job for nothing: solid-to-dim IS how built the chapter is,
   so this is also the progress read, and it comes off the ss-ep tags rather
   than off a number somebody has to remember to update.

   Sits inside the chapter body, so a closed chapter is still one line. */
.senshi-art .ep-anchor{ display:block; height:0; scroll-margin-top:90px; }
.senshi-art .ep-ruler{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px;
  margin:0 0 14px; padding:0 0 12px 16px;
  border-bottom:1px solid #eeebf5;
}
.senshi-art .ep-ruler-lead{
  font-family:rainyhearts, monospace; font-size:9px; letter-spacing:.5px;
  color:#6a6478; margin-right:4px;
}
.senshi-art .ep-chip{
  font-family:rainyhearts, monospace; font-size:11px; line-height:1;
  min-width:22px; text-align:center; padding:4px 5px; border-radius:4px;
  border:1px solid #ddd9e8; background:#fbfaff; color:#a5a1b2;
}
.senshi-art a.ep-chip--built{
  background:var(--wash); border-color:var(--backbow); color:var(--accent);
  text-decoration:none; font-weight:600;
}
.senshi-art a.ep-chip--built:hover{ background:var(--frontbow); color:var(--paper); }
.senshi-art .ep-ruler-count{
  margin-left:auto; font-family:rainyhearts, monospace; font-size:9px;
  letter-spacing:.4px; color:#6a6478;
}
@media (max-width:780px){
  .senshi-art .ep-anchor{ display:block; height:0; scroll-margin-top:90px; }
.senshi-art .ep-ruler{ padding-left:10px; gap:4px; }
  .senshi-art .ep-ruler-count{ margin-left:0; width:100%; }
}

/* ==========================================================================
   30. THE CHAPTER FACE: 04B   (9 Sep 2026)
   ==========================================================================
   Ashley's pick, from a second sheet rendered after the first one turned out
   to be lying: index.css declares `font-family: 04B;` unquoted, and a CSS
   identifier cannot start with a digit, so the family never registered and
   every use of it on this site fell through silently. A corrected @font-face
   is appended at the end of index.css; the name must be QUOTED to work.

   The two Zoisite chapters use the site's middot again rather than a hyphen -
   04B draws a hyphen nearly as an equals sign. rainyhearts was the reason the
   middot was dropped (it draws U+00B7 as a heart); 04B draws a real dot, so
   the house separator comes back.

   Still no font-weight. House rule: no bold on pixel fonts. */
.senshi-art .ch-name{
  font-family:"04B", monospace;
  font-size:20px; letter-spacing:.5px;
}
@media (max-width:780px){ .senshi-art .ch-name{ font-size:16px; letter-spacing:.3px; } }

/* ==========================================================================
   31. BEATS THAT CARRY A COLOUR   (9 Sep 2026)
   ==========================================================================
   Two things on this page have a colour of their own, so the beat where they
   happen wears it: the seven rainbow crystals, and a senshi's awakening.

   Crystal order is sourced, not guessed - the Seven Rainbow Crystals table
   maps host to colour, and Ashley's own ep 29 line already calls Reika's "the
   blue crystal", which is position five. Senshi colours come from
   palettes.py, so a beat is tinted with the same colour the site uses for her
   everywhere else.

   PER BEAT, NOT PER EPISODE: episode 25 is Jupiter's awakening AND the first
   crystal, and tinting episodes would stack those two on the same boxes.

   THE HOOK IS A SPAN IN FRONT OF THE BEAT, not a class on it. sm_patch.beats()
   matches `<div class="arc-beat arc-beat--...">` and ends at that bracket, so
   anything added to that div hides the beat from the tool that edits every
   episode. Adjacent sibling instead; where an episode anchor already sits
   there, the tint span goes after it so it stays adjacent.

   Same register as the neutral band it replaces - hue mixed 88% toward white
   at the top of the 120px band, 96% at the bottom. The weight order still
   holds: the billboard is heaviest, the beat ground is the reading surface. */
.senshi-art .bt{ display:block; height:0; }
.senshi-art .bt--red + .arc-beat{ background:linear-gradient(180deg,#fae7e7 0%,#fdf7f7 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--orange + .arc-beat{ background:linear-gradient(180deg,#fbf0e6 0%,#fefaf7 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--yellow + .arc-beat{ background:linear-gradient(180deg,#f9f5e4 0%,#fdfcf6 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--green + .arc-beat{ background:linear-gradient(180deg,#e8f4eb 0%,#f7fbf8 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--blue + .arc-beat{ background:linear-gradient(180deg,#e8f0f8 0%,#f7fafd 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--indigo + .arc-beat{ background:linear-gradient(180deg,#e9e9f3 0%,#f8f8fb 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--violet + .arc-beat{ background:linear-gradient(180deg,#f1ebf6 0%,#faf8fc 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--mercury + .arc-beat{ background:linear-gradient(180deg,#e0ebf7 0%,#f5f8fc 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--mars + .arc-beat{ background:linear-gradient(180deg,#f8e7e4 0%,#fdf7f6 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--jupiter + .arc-beat{ background:linear-gradient(180deg,#e3ece1 0%,#f6f9f5 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--venus + .arc-beat{ background:linear-gradient(180deg,#fff6e0 0%,#fffcf5 70%) no-repeat top/100% 120px, #fefeff; }
.senshi-art .bt--serenity + .arc-beat{ background:linear-gradient(180deg,#f8f4ea 0%,#fdfbf8 70%) no-repeat top/100% 120px, #fefeff; }

/* ==========================================================================
   32. CLOSE A CHAPTER FROM ITS FOOT   (9 Sep 2026)
   ==========================================================================
   Chapter 3 is 29 beats. Having to scroll back to the header to shut it is the
   kind of thing that makes a reader just leave it open. Same label, same
   checkbox, at the bottom. */
.senshi-art .ch-close{
  display:block; width:fit-content; margin:2px 0 4px;
  padding:7px 14px; cursor:pointer; user-select:none;
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.5px;
  color:var(--ch-small); background:#fdfdff;
  border:1px solid var(--blk-edge); border-radius:999px;
}
.senshi-art .ch-close:hover{ background:var(--wash); }
.senshi-art .ch-close-mark{ font-size:10px; opacity:.75; margin-right:3px; }


/* ==========================================================================
   33. THE CHAPTER NAME'S FALLBACK CHAIN   (9 Sep 2026)
   ==========================================================================
   Section 30 listed SMB3 and rainyhearts behind 04B. Font fallback is
   PER GLYPH, not per element: 04B has no middot, so U+00B7 fell through the
   chain to rainyhearts, which draws it as a little heart - and "ZOISITE (heart)
   THE CRYSTAL HUNT" came back on the page after we had already fixed it once.

   The chain is 04B then monospace now. Anything 04B is missing comes from a
   neutral face rather than from a decorative one, which is the only reason a
   fallback list should exist. */
.senshi-art .ch-name{ font-family:"04B", monospace; }

/* ==========================================================================
   34. THE SCREENCAP CREDIT   (9 Sep 2026)
   ==========================================================================
   All 1,793 frames in the arc galleries come from Sailor Soapbox's
   high-resolution archive, so the credit sits at the foot of the console those
   galleries are in rather than in the site footer, a long way from the thing
   it is about.

   It reuses .sel-credit - the class the Takeuchi credit already uses on this
   page - so it inherits that foot rather than inventing a second one. Only the
   link needs saying: --accent for the text and --frontbow for the underline,
   which is the same accent-for-text, frontbow-for-decoration split the senshi
   palettes use everywhere else. */
.senshi-art .arc-credit{ margin-top:18px; }
.senshi-art .arc-credit-link{
  color:var(--accent); text-decoration:none;
  border-bottom:2px solid var(--frontbow); font-weight:600;
}
.senshi-art .arc-credit-link:hover{ background:var(--frontbow); color:var(--paper); }

/* ==========================================================================
   35. THE SCREENCAP CREDIT, MOVED UP   (9 Sep 2026)
   ==========================================================================
   Ashley: "they deserve it. not just a footnote."

   Section 34 put this at the foot of the console. That was still small print
   under 1,793 borrowed frames. It now sits between the lede and the arc index -
   read before the work it paid for, not after it.

   Weight had to be handled carefully. The order on this page runs billboard,
   chapter header, beat ground, small text, and a credit that shouted would sit
   above the chapter headers, which would be wrong in the other direction. So
   it is a plate rather than a banner: --frontbow rule down the left edge to
   tie it to the console's own furniture, a tinted ground so it separates from
   the paper, and body text at reading size instead of caption size. Present,
   not loud. */
.senshi-art .arc-source{
  margin:14px 0 20px; padding:13px 16px 14px 15px;
  border-left:4px solid var(--frontbow);
  border-radius:0 8px 8px 0;
  background:linear-gradient(180deg,#f7f4fc 0%,#fdfcff 100%) no-repeat top/100% 60px, #fdfcff;
}
.senshi-art .arc-source-k{
  margin:0 0 5px; font-family:rainyhearts, monospace; font-size:12px;
  letter-spacing:.06em; text-transform:lowercase; color:var(--accent);
}
.senshi-art .arc-source-b{
  margin:0; font-size:14.5px; line-height:1.6; color:var(--ink); max-width:62ch;
}
.senshi-art .arc-source-l{
  color:var(--accent); text-decoration:none;
  border-bottom:2px solid var(--frontbow); font-weight:600;
}
.senshi-art .arc-source-l:hover{ background:var(--frontbow); color:var(--paper); }

/* ==========================================================================
   37. "THROUGH THE ARCS", LOUDER   (9 Sep 2026)
   ==========================================================================
   18px grey rainyhearts under a 796px painting, with 04B chapter names at
   20px below it, meant the section title was the quietest thing in its own
   section. It goes to 26px and takes --accent, which is the same gold-brown
   the credit link uses and clears 4.65:1 on this paper, and the dashed rule
   under it thickens to match. It now outranks the chapter headers, which is
   the order the page should read in. Scoped to #arcs so no other .block-h on
   the site moves. */
.senshi-art #arcs > .block-h,
#arcs.arcframe > .block-h{
  font-size:26px; color:var(--accent); letter-spacing:.5px;
  margin:2px 0 12px; padding-bottom:10px;
  border-bottom:3px dashed var(--backbow);
}
@media (max-width:560px){
  .senshi-art #arcs > .block-h, #arcs.arcframe > .block-h{ font-size:20px; }
}

/* ==========================================================================
   38. THE CREDIT, ONE LINE   (9 Sep 2026)
   ==========================================================================
   Ashley: keep it, shrink it to a single line. Section 35 stacked a label
   over a three-line sentence; the label is now inline and the sentence is cut
   to the part that is actually owed - whose archive, and that it was captured
   and shared freely. The rule, the tint and the reading-size type all stay, so
   it holds the same rank on the page at a fifth of the height. white-space is
   left alone deliberately: at narrow widths this wraps rather than scrolls or
   truncates, because a credit that is cut off is worse than a credit on two
   lines.

   And .senshi-art's 3px top border comes off here. It was the last hard edge
   between the plate and the console, sitting right where the fade finishes. */
.senshi-art .arc-source{
  margin:12px 0 16px; padding:9px 14px 9px 13px;
  border-left:4px solid var(--frontbow);
  border-radius:0 7px 7px 0;
  background:linear-gradient(90deg,#f5f1fb 0%,#fdfcff 72%);
  font-size:14px; line-height:1.5; color:var(--ink); max-width:none;
}
.senshi-art .arc-source-k{
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.06em;
  color:var(--accent); margin-right:8px;
}
body.wing.select .senshi-art{ border-top:0; }

/* ==========================================================================
   43. "THROUGH THE ARCS" GETS A FACE   (9 Sep 2026)
   ==========================================================================
   Section 37 only made it bigger, which made it big and still plain. Now it
   has three things it did not have: the pixel face the rest of the console is
   built from, a crescent that is drawn rather than typed, and a beam instead
   of a dashed rule.

   04B, not rainyhearts - it is the same face as the chapter names below it,
   which is the point: same voice, larger. The plum-to-gold gradient is clipped
   to the text, with the plum set as a plain colour underneath so a browser
   without background-clip:text shows solid plum rather than nothing at all.
   Both ends of that gradient clear 4.5:1 on this paper.

   The crescent is two circles - a gold disc with a paper-coloured disc pushed
   over it - because it has to be. A moon glyph would go through the font
   fallback chain, and this is the page where rainyhearts turned a middot into
   a heart twice. A shape that is drawn cannot be substituted. */
.senshi-art #arcs > .block-h--arcs{
  display:flex; align-items:center; gap:12px;
  position:relative; border-bottom:0;
  margin:4px 0 14px; padding:0 0 12px;
}
.senshi-art #arcs > .block-h--arcs::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--frontbow) 18%, var(--backbow) 40%,
    rgba(230,200,106,.30) 74%, rgba(230,200,106,0) 100%);
}
.senshi-art .bh-moon{
  position:relative; flex:0 0 auto; width:19px; height:19px;
  border-radius:50%; background:var(--frontbow);
}
.senshi-art .bh-moon::after{
  content:""; position:absolute; left:6px; top:-3px;
  width:19px; height:19px; border-radius:50%; background:var(--paper);
}
.senshi-art .bh-t{
  font-family:"04B", monospace; font-size:27px; letter-spacing:1px;
  line-height:1.15; color:#5A3268;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .senshi-art .bh-t{
    background:linear-gradient(96deg,#5A3268 0%,#6d4258 42%,#8b7137 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
@media (max-width:560px){
  .senshi-art .bh-t{ font-size:19px; letter-spacing:.5px; }
  .senshi-art .bh-moon{ width:15px; height:15px; }
  .senshi-art .bh-moon::after{ width:15px; height:15px; left:5px; top:-2px; }
}

/* ==========================================================================
   50. THE SEASON CARD   (9 Sep 2026)
   ==========================================================================
   Ashley: under each arc heading, the season's logo, its stats and a small
   still, sitting beside the arc info.

   THE MAPPING IS 1:1 and that is the whole reason this works: five anime
   seasons, five manga arcs. Two places the two continuities disagree are
   handled in the data rather than papered over - R's first thirteen episodes
   are the Makaiju run with no manga counterpart, and the Sailor Quartet become
   guardians in the manga's Dream arc but stay the Amazoness Quartet in SuperS.
   Where they disagree the ARC wins, because the manga is this wing's canon and
   the arc name is what the heading says.

   THE LOGO BOX IS FIXED HEIGHT, not fixed width, because the five lockups run
   from 2.46 to 3.16 wide-to-tall. Matching their heights makes them a set;
   matching their widths would make SuperS half the size of S. Both images are
   absolutely positioned in the same box so the cross-fade has nothing to
   reflow.

   THE HOVER IS GUARDED behind @media (hover:hover). A cross-fade with no hover
   to leave is a picture that changes once and never changes back, so on a
   phone the English logo is simply not in play and the Japanese lockup - the
   one she wanted - is what shows.

   THE STILL IS EMPTY ON PURPOSE. Ashley is picking the five images. Until then
   the slot is a tinted 4:3 plate carrying the arc number, so the proportion is
   visible to crop against and the card does not look broken. Swapping it for
   an <img> is one line per arc.

   The files go in images/sailormoon/logo/ - the folder that already exists,
   with a season- prefix - rather than a new logos/ beside it. Two folders one
   letter apart is how a site ends up with the same asset in both. */
.senshi-art .arc-season{
  display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr) 240px;
  gap:18px; align-items:center;
  margin:2px 0 16px; padding:14px 16px;
  border-left:4px solid var(--frontbow); border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#f6f2fc 0%,#fdfcff 62%) no-repeat top/100% 90px, #fdfcff;
}

.senshi-art .arc-season-logo{
  position:relative; height:82px;
}
.senshi-art .arc-season-logo .asl{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:100%; width:auto; max-width:100%; object-fit:contain;
}
.senshi-art .arc-season-logo .asl--en{ opacity:0; }
@media (hover:hover){
  .senshi-art .arc-season:hover .asl--jp{ opacity:0; }
  .senshi-art .arc-season:hover .asl--en{ opacity:1; }
  .senshi-art .arc-season .asl{ transition:opacity .28s ease; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .arc-season .asl{ transition:none; }
}

.senshi-art .arc-season-stats{ margin:0; }
.senshi-art .arc-season-stats .ass-row{
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:10px;
  margin-bottom:5px; align-items:baseline;
}
.senshi-art .arc-season-stats dt{
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.04em;
  color:var(--accent); text-align:right;
}
.senshi-art .arc-season-stats dd{
  margin:0; font-size:14px; line-height:1.45; color:var(--ink);
}

.senshi-art .arc-season-shot{
  margin:0; aspect-ratio:4 / 3; width:100%;
  border:1px solid var(--backbow); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#f1ecfa 0%,#faf7f0 100%);
}
.senshi-art .arc-season-shot img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.senshi-art .arc-season-shot .ass-n{
  font-family:"04B", monospace; font-size:34px; color:var(--backbow); line-height:1;
}
.senshi-art .arc-season-shot figcaption{
  margin-top:7px; font-family:rainyhearts, monospace; font-size:11px;
  color:#9a94a6; letter-spacing:.04em;
}

/* the four that are not written yet: same card, quieter, with the state said
   in words rather than by fading the whole thing out */
.senshi-art .arc-season--soon{
  border-left-color:#cfc9d8;
  background:linear-gradient(180deg,#f4f3f7 0%,#fdfcff 62%) no-repeat top/100% 90px, #fdfcff;
}
.senshi-art .arc-season--soon .arc-season-stats dt{ color:#8d8898; }
.senshi-art .arc-season--soon .arc-season-shot{ border-color:#d8d3e0; }
.senshi-art .arc-season--soon .arc-season-shot .ass-n{ color:#d8d3e0; }

@media (max-width:900px){
  .senshi-art .arc-season{
    grid-template-columns:minmax(0,1fr); gap:12px; padding:12px 14px;
  }
  .senshi-art .arc-season-logo{ height:64px; }
  .senshi-art .arc-season-shot{ max-width:280px; }
  .senshi-art .arc-season-stats .ass-row{ grid-template-columns:78px minmax(0,1fr); }
}

/* ==========================================================================
   52. THE SEASON CARD, REWEIGHTED   (10 Sep 2026)
   ==========================================================================
   Ashley: put the arc heading inside the box, style it like "the whole story",
   and make the still the eyecatch with the logo secondary.

   So the order inside the card inverts - it was logo, stats, still, and it is
   now still, title, logo, stats. The still takes the left half at 340x255 and
   sets the card's height; the logo drops 82px to 48 and moves under the title,
   where it reads as a mark rather than as the headline.

   THE TITLE IS 22px, NOT 27. Same lockup as the section header - 04B, the
   plum-to-gold gradient, the drawn crescent, the fading beam - one step down,
   so the order still reads section header, arc title, chapter name. Giving it
   the same 27px would have made the page argue with itself about which one is
   the heading.

   THE CRESCENT CUTOUT IS CARD-COLOURED. The crescent is two circles: a gold
   disc with a second disc punched over it, and that second disc has to be
   whatever is actually behind it. The card's top is #f6f2fc, not the page's
   #fefeff, so the --paper cutout used by the section header would have shown
   as a white bite taken out of the lilac. The "not yet" variant needs its own
   for the same reason.

   AND .arc-panel-head LOSES ITS RULE. With the title moved out, all that is
   left in it is the manga/anime view switch, which is hidden on this page - so
   its dashed bottom rule would have been a line hanging under nothing. The
   card's beam does that job now. The head itself is left in place rather than
   deleted, so the switch still has somewhere to live if the manga columns ever
   come back. */
.senshi-art .arc-panel-head{ border-bottom:0; padding-bottom:0; margin-bottom:0; }

.senshi-art .arc-season{
  display:grid; grid-template-columns:minmax(220px,340px) minmax(0,1fr);
  gap:20px; align-items:start;
  margin:6px 0 16px; padding:16px;
  border-left:4px solid var(--frontbow); border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#f6f2fc 0%,#fdfcff 62%) no-repeat top/100% 120px, #fdfcff;
}

/* the eyecatch */
.senshi-art .arc-season-shot{
  margin:0; aspect-ratio:4 / 3; width:100%;
  border:1px solid var(--backbow); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#f1ecfa 0%,#faf7f0 100%);
  box-shadow:0 6px 18px rgba(60,40,90,.13);
}
.senshi-art .arc-season-shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.senshi-art .arc-season-shot .ass-n{
  font-family:"04B", monospace; font-size:46px; color:var(--backbow); line-height:1;
}
.senshi-art .arc-season-shot figcaption{
  margin-top:9px; font-family:rainyhearts, monospace; font-size:11px;
  color:#9a94a6; letter-spacing:.04em;
}

/* the title, one step under the section header */
.senshi-art .arc-season-h{
  display:flex; align-items:center; gap:10px;
  position:relative; margin:2px 0 10px; padding:0 0 10px;
}
.senshi-art .arc-season-h::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--frontbow) 20%, var(--backbow) 44%,
    rgba(230,200,106,.28) 76%, rgba(230,200,106,0) 100%);
}
.senshi-art .arc-season-h .bh-t{ font-size:22px; letter-spacing:.5px; }
.senshi-art .arc-season-h .bh-moon{ width:16px; height:16px; }
.senshi-art .arc-season-h .bh-moon::after{
  width:16px; height:16px; left:5px; top:-2px; background:#f6f2fc;
}
/* NOT rainyhearts. This line carries a middot, and rainyhearts has no middot
   glyph - font fallback is per-glyph, so it falls through the chain and lands
   on something that draws a heart. That exact bug bit this page twice already,
   once in the chapter names and once after they were "fixed". The era line
   keeps the body face it had in the panel head, which has the glyph. */
.senshi-art .arc-season-era{
  margin:0 0 12px; font-size:13px;
  letter-spacing:.02em; color:var(--head);
}

/* the logo, secondary */
.senshi-art .arc-season-logo{ position:relative; height:48px; margin:0 0 14px; }
.senshi-art .arc-season-logo .asl{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:100%; width:auto; max-width:100%; object-fit:contain;
}

.senshi-art .arc-season--soon .arc-season-h .bh-moon{ background:#cfc9d8; }
.senshi-art .arc-season--soon .arc-season-h .bh-moon::after{ background:#f4f3f7; }
.senshi-art .arc-season--soon .arc-season-shot .ass-n{ color:#d8d3e0; }

@media (max-width:900px){
  .senshi-art .arc-season{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .senshi-art .arc-season-shot{ max-width:340px; }
  .senshi-art .arc-season-h .bh-t{ font-size:18px; }
}

/* ==========================================================================
   53. THE LOGO JOINS THE TITLE ROW   (10 Sep 2026)
   ==========================================================================
   Ashley: put the Japanese logo next to the gradient arc title.

   It works, but not at the size it was. Side by side at equal weight a 04B
   gradient wordmark and a full-colour rainbow lockup are two headlines
   arguing with each other - and the brief one message earlier was that the
   logo is SECONDARY to the still. So it goes to the far right of the row at
   36px rather than 48, and the beam runs under both. That makes it a stamp at
   the end of the title rule instead of a second title.

   The beam moves from the h3 to the row for the same reason: a rule that
   stopped under the words and left the logo hanging off the end would have
   read as two separate things that happen to be level. */
.senshi-art .arc-season-titlerow{
  display:flex; align-items:center; gap:16px;
  position:relative; margin:2px 0 10px; padding:0 0 10px;
}
.senshi-art .arc-season-titlerow::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--frontbow) 20%, var(--backbow) 44%,
    rgba(230,200,106,.28) 76%, rgba(230,200,106,0) 100%);
}
.senshi-art .arc-season-titlerow .arc-season-h{
  margin:0; padding:0; flex:0 1 auto;
}
.senshi-art .arc-season-titlerow .arc-season-h::after{ display:none; }
.senshi-art .arc-season-titlerow .arc-season-logo{
  height:36px; margin:0 0 0 auto; flex:0 0 auto; width:auto; min-width:110px;
}
.senshi-art .arc-season-titlerow .arc-season-logo .asl{
  left:auto; right:0;
}
.senshi-art .arc-season-era{ margin-top:0; }

@media (max-width:900px){
  .senshi-art .arc-season-titlerow{ gap:10px; }
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:28px; min-width:88px; }
}

/* ==========================================================================
   54. BIGGER TITLE, BIGGER LOGO   (10 Sep 2026)
   ==========================================================================
   Ashley: larger logo, larger arc title. 22 -> 26 and 36 -> 52.

   The section header goes to 30 at the same time, which was not asked for and
   is the reason this is one change rather than two. At 26 the arc title ties
   "the whole story" exactly, and they are on screen together - the section
   header sits about 200px above the first card. A tie makes the page argue
   about which one is the heading. 30 / 26 / 20 keeps the order that has held
   all along: section, arc, chapter. Say the word and the header goes back to
   26 - it is one number.

   AND THE ROW NEEDS A BREAKPOINT NOW. At 52px the widest lockup is SuperS at
   3.16:1, so 164px, and "Dark Kingdom" in 26px 04B is about 270. That is 450
   in a 487px row at full width, which fits - but the same row is only about
   373 wide at a 901px viewport, where they would collide. Below 1000px the
   logo drops to 40 and the title back to 22. Checked at seven widths. */
.senshi-art #arcs > .block-h--arcs .bh-t{ font-size:30px; }
.senshi-art .arc-season-h .bh-t{ font-size:26px; }
.senshi-art .arc-season-h .bh-moon{ width:19px; height:19px; }
.senshi-art .arc-season-h .bh-moon::after{ width:19px; height:19px; left:6px; top:-3px; }
.senshi-art .arc-season-titlerow .arc-season-logo{ height:52px; min-width:130px; }

@media (max-width:1000px){
  .senshi-art .arc-season-h .bh-t{ font-size:22px; }
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:40px; min-width:104px; }
}
@media (max-width:560px){
  .senshi-art #arcs > .block-h--arcs .bh-t{ font-size:21px; }
  .senshi-art .arc-season-h .bh-t{ font-size:18px; }
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:30px; min-width:80px; }
}

/* ==========================================================================
   55. LOGO LEFT, TITLE RIGHT   (10 Sep 2026)
   ==========================================================================
   Ashley: the Japanese logo on the left, the text on the right.

   Done with flex order, not by moving the markup: the h3 stays first in the
   document so the outline and any screen reader still meet the arc name before
   the picture, and only the paint order changes.

   The title sits immediately to the right of the logo rather than pushed to
   the far edge. Two items at opposite ends leave a hole in the middle, and the
   beam under the row fades out towards the right - so the type belongs where
   the beam is still solid. */
.senshi-art .arc-season-titlerow .arc-season-logo{
  order:-1; margin:0; flex:0 0 auto;
}
.senshi-art .arc-season-titlerow .arc-season-logo .asl{ left:0; right:auto; }
.senshi-art .arc-season-titlerow .arc-season-h{ margin-right:auto; }

/* ==========================================================================
   57. LOGO RIGHT AGAIN, LARGER   (10 Sep 2026)
   ==========================================================================
   Ashley: logo on the right after all, slightly larger.

   Section 55's flip is reverted - order back to source, and the image inside
   the box goes back to right-aligned so the lockup ends flush with the row.

   60px is a ceiling rather than a preference. The widest of the five is SuperS
   at 3.16:1, so 60px tall is 190px wide; with "Dark Kingdom" at 257px and the
   16px gap that is 463 in a 487px row. Past 60 they collide in the narrowest
   desktop container, and it is the hidden panels that set that limit, not the
   one that happens to be open. */
.senshi-art .arc-season-titlerow .arc-season-logo{
  order:0; margin:0 0 0 auto; height:60px; min-width:150px;
}
.senshi-art .arc-season-titlerow .arc-season-logo .asl{ left:auto; right:0; }
.senshi-art .arc-season-titlerow .arc-season-h{ margin-right:0; }

@media (max-width:1000px){
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:44px; min-width:112px; }
}
@media (max-width:560px){
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:32px; min-width:84px; }
}

/* ==========================================================================
   59. THE SECTION HEAD TAKES ITS FOCUS BACK   (10 Sep 2026)
   ==========================================================================
   Ashley: the heading should get the focus, not the undertext.

   It was not close, and the measurements say why. From the top of #arcs to the
   arc index is 221px and the heading is 47 of it. The lede is 16px on a 28px
   line - 1.75 line-height, near enough body size - and takes 56. The credit
   takes another 42. Three gaps of 13, 18 and 37 separate them. The undertext
   was outweighing the heading three to one by area.

   heading  30 -> 36 on the glyphs, a drop-shadow, a 4px beam
   lede     16/28 -> 13.5/20, lighter colour
   credit   16/24 -> 13/19, half the padding
   gaps     13/18/37 -> 8/10/16

   THE SHADOW IS A FILTER, NOT text-shadow. This heading's fill is transparent
   with a gradient clipped to the glyphs; a text-shadow paints behind the fill
   and would show straight through the letters. drop-shadow works on what is
   actually painted, so it follows the letterforms. */
.senshi-art #arcs > .block-h--arcs{
  margin:0 0 8px; padding:0 0 10px;
}
.senshi-art #arcs > .block-h--arcs .bh-t{
  font-size:36px; letter-spacing:1px;
  filter:drop-shadow(0 2px 0 rgba(90,50,104,.20));
}
.senshi-art #arcs > .block-h--arcs .bh-moon{ width:22px; height:22px; }
.senshi-art #arcs > .block-h--arcs .bh-moon::after{
  width:22px; height:22px; left:7px; top:-3px;
}
.senshi-art #arcs > .block-h--arcs::after{ height:4px; }

.senshi-art #arcs > .arc-lede{
  font-size:13.5px; line-height:1.48; color:#8b8794;
  margin:0 0 10px; max-width:70ch;
}

.senshi-art .arc-source{
  margin:0 0 16px; padding:6px 12px 6px 11px;
  font-size:13px; line-height:1.45;
}
.senshi-art .arc-source-k{ font-size:11px; margin-right:7px; }

@media (max-width:560px){
  .senshi-art #arcs > .block-h--arcs .bh-t{ font-size:24px; }
  .senshi-art #arcs > .block-h--arcs .bh-moon,
  .senshi-art #arcs > .block-h--arcs .bh-moon::after{ width:17px; height:17px; }
}

/* ==========================================================================
   60. NAOKO TAKEUCHI, CHART-LED   (10 Sep 2026)
   ==========================================================================
   Ashley: her own section after the whole story, led by her chart, with the
   rabbits fact in both places.

   THE PLACEMENTS ARE COMPUTED, NOT RECALLED. Swiss Ephemeris, every body at
   both ends of 15 March 1967 Japan time, so what the page claims is that each
   sign held for the whole local day and therefore needs no birth time. The
   Moon is the one worth the work: it normally goes first when a time is
   missing, because thirteen degrees a day means most dates straddle a
   boundary. This one entered Taurus just before the Japanese day began and was
   at twelve degrees when it ended, so a date settles it - and the page says
   exactly that rather than just asserting Taurus.

   WHAT IT REFUSES TO SAY is the Ascendant, the houses and the sect. They need
   a time, there is not one, and the caveat sits in the section instead of a
   footnote. On a site whose stated ethic is indicators not causes, a chart
   piece that quietly omits its missing half is the thing that costs an
   astrologer her credibility.

   The section reuses the arc heading lockup and the season card's furniture -
   gold rule, tinted ground, the same dt/dd rows - so it reads as part of the
   wing rather than as a page that wandered in. */
/* THE HEADING RULES WERE SCOPED TO #arcs AND NOW THERE ARE TWO SECTIONS USING
   THEM. Sections 43, 54 and 59 all wrote `.senshi-art #arcs > .block-h--arcs`,
   which was correct while the lockup existed once. Dropped into #naoko the
   heading lost its flex row, its gap, its beam and its 36px - it fell back to
   the base .block-h, so the crescent sat jammed against the N and a plain
   dashed rule appeared underneath. The same is true of .arc-lede. Both are
   re-stated here on the class alone, which is what they should have been the
   moment a second section wanted them. */
.senshi-art .block-h--arcs{
  display:flex; align-items:center; gap:12px;
  position:relative; border-bottom:0;
  margin:0 0 8px; padding:0 0 10px;
}
.senshi-art .block-h--arcs::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--frontbow) 18%, var(--backbow) 40%,
    rgba(230,200,106,.30) 74%, rgba(230,200,106,0) 100%);
}
.senshi-art .block-h--arcs .bh-t{
  font-size:36px; letter-spacing:1px;
  filter:drop-shadow(0 2px 0 rgba(90,50,104,.20));
}
.senshi-art .block-h--arcs .bh-moon{ width:22px; height:22px; }
.senshi-art .block-h--arcs .bh-moon::after{ width:22px; height:22px; left:7px; top:-3px; }
.senshi-art .naokoframe .arc-lede{
  font-size:13.5px; line-height:1.48; color:#8b8794; margin:0 0 10px; max-width:70ch;
}
@media (max-width:560px){
  .senshi-art .block-h--arcs .bh-t{ font-size:24px; }
  .senshi-art .block-h--arcs .bh-moon,
  .senshi-art .block-h--arcs .bh-moon::after{ width:17px; height:17px; }
}

.senshi-art .naokoframe{ padding:4px 28px 26px; }

.senshi-art .nk-card{
  display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr);
  gap:22px; align-items:start;
  margin:6px 0 14px; padding:16px;
  border-left:4px solid var(--frontbow); border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#f6f2fc 0%,#fdfcff 62%) no-repeat top/100% 120px, #fdfcff;
}
.senshi-art .nk-photo{ margin:0; }
.senshi-art .nk-photo img{
  display:block; width:100%; height:auto; border-radius:8px;
  border:1px solid var(--backbow);
  box-shadow:0 6px 18px rgba(60,40,90,.16);
}
.senshi-art .nk-photo figcaption{
  margin-top:7px; font-family:rainyhearts, monospace; font-size:11px;
  color:#9a94a6; letter-spacing:.03em; line-height:1.4;
}
.senshi-art .nk-lead{ margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--ink); }
.senshi-art .nk-lead b{ color:var(--accent); font-weight:600; }
.senshi-art .nk-lead i{ font-style:italic; }
.senshi-art .nk-more{
  display:inline-block; margin-left:4px; font-size:13px;
  color:#5A3268; text-decoration:none; border-bottom:2px solid var(--frontbow);
}
.senshi-art .nk-more:hover{ background:var(--frontbow); color:var(--paper); }

.senshi-art .nk-stats{ margin:12px 0 0; }
.senshi-art .nk-stats .ass-row{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px;
  margin-bottom:5px; align-items:baseline;
}
.senshi-art .nk-stats dt{
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.04em;
  color:var(--accent); text-align:right;
}
.senshi-art .nk-stats dd{ margin:0; font-size:14px; line-height:1.45; color:var(--ink); }

/* the placements */
.senshi-art .nk-chart{
  padding:14px 16px; border-radius:10px;
  background:linear-gradient(160deg,#1b1030 0%,#0a0616 62%,#120a24 100%);
  border:1px solid var(--lh-gold-deep);
}
.senshi-art .nk-chart-h{
  margin:0 0 10px; font-family:rainyhearts, monospace; font-size:13px;
  letter-spacing:.04em; color:#e6c15a;
}
.senshi-art .nk-signs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:7px; margin:0 0 12px; padding:0; list-style:none;
}
.senshi-art .nk-chip{
  display:flex; align-items:baseline; gap:7px;
  padding:6px 10px; border-radius:7px;
  background:rgba(255,253,247,.07); border:1px solid rgba(230,193,90,.26);
}
.senshi-art .nk-body{
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.03em;
  color:rgba(230,193,90,.88); min-width:74px;
}
.senshi-art .nk-sign{ font-size:14px; color:#f4eefb; }
.senshi-art .nk-r{
  margin-left:auto; font-size:10px; letter-spacing:.06em;
  color:#c9a8e8; border:1px solid rgba(201,168,232,.45);
  border-radius:4px; padding:0 4px;
}
.senshi-art .nk-caveat{
  margin:0; font-size:13px; line-height:1.6; color:rgba(240,234,250,.86);
}
.senshi-art .nk-caveat b{ color:#e6c15a; font-weight:600; }

@media (max-width:900px){
  .senshi-art .naokoframe{ padding:4px 14px 20px; }
  .senshi-art .nk-card{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .senshi-art .nk-photo{ max-width:260px; }
  .senshi-art .nk-stats .ass-row{ grid-template-columns:92px minmax(0,1fr); }
}

/* ==========================================================================
   61. THE CHAPTER HEADS GO DARK   (10 Sep 2026)
   ==========================================================================
   Ashley: the chapter dropdowns need a darker colour from the palette - the
   purple and the gold from the heading gradient.

   THE RAMP is six steps between #5A3268, the plum that starts the heading
   gradient, and #7a5f2c, a gold stopped deliberately short of --accent
   (#8b7137). Chapter 1 is deepest, chapter 6 is warmest, so where you are in
   the arc is legible before you read a word - which is the idea from this
   morning's first mockup, the 8px spine silver at Jadeite warming to gold at
   D Point, in the palette that has since been built around it.

   WHY IT STOPS SHORT OF --accent. Cream on #8b7137 is 4.65:1. That passes for
   the 20px chapter name with almost nothing spare, and the episode range and
   beat count on the same bar are 11-13px and would fail. #7a5f2c gives 6.0:1
   and 5.1:1. Every step was computed by the build script, which refuses to
   write the file if any pair lands under 4.5 - the same guard palettes.py
   applies everywhere else on this site.

   THE BODY IS NOT TOUCHED. It carries 135 beats of prose and it is the reading
   surface; the dark lives on the head, which is a click target with six words
   of pixel type on it, and on the spine beside the open chapter.

   CHAPTER 5 IS THE EXCEPTION. Kunzite is not written yet, so its bar takes a
   flat grey rather than a step on the ramp - a colour on the ramp would
   promise content that is not there, and the ramp would read as broken to
   anyone counting the six. */
.senshi-art .ch--1{ --ch-dark:#5A3268; }
.senshi-art .ch--2{ --ch-dark:#5f3a5e; }
.senshi-art .ch--3{ --ch-dark:#674353; }
.senshi-art .ch--4{ --ch-dark:#6f4c48; }
.senshi-art .ch--5{ --ch-dark:#77553d; }
.senshi-art .ch--6{ --ch-dark:#7a5f2c; }

.senshi-art .ch{
  position:relative; padding-left:8px; background:#fefeff;
  border-color:color-mix(in srgb, var(--ch-dark) 26%, #e2ddec);
}
.senshi-art .ch::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ch-dark) 100%, #fff 0%) 0%,
    var(--ch-dark) 42%,
    color-mix(in srgb, var(--ch-dark) 72%, #fff 28%) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  /* color-mix is well supported now, but the spine is decorative and a flat
     bar is a perfectly good fallback - better than a transparent gap. */
  .senshi-art .ch::before{ background:var(--ch-dark); }
}

.senshi-art .ch-head{
  background:var(--ch-dark);
  border-radius:0 7px 7px 0;
  padding:11px 14px;
}
.senshi-art .ch-head:hover{ filter:brightness(1.12); }
.senshi-art .ch-name{ color:#fffdf7; }
.senshi-art .ch-n{ color:#f0e7cf; }
/* .ch-state, not .ch-count. The head's children are ch-n, ch-name, ch-eps and
   ch-state - I guessed .ch-count and the "11 beats" on the right of every bar
   stayed its old grey on the new dark ground, which is the one thing on the
   bar that was actually hard to read. Read the DOM, do not assume the name. */
.senshi-art .ch-eps,
.senshi-art .ch-state{ color:#f0e7cf; }
.senshi-art .ch-head .ch-caret,
.senshi-art .ch-head::after{ color:#f0e7cf; }

/* the open chapter keeps its light reading surface */
.senshi-art .ch-body{ background:#fefeff; border-radius:0 0 7px 0; }

/* not yet written: off the ramp on purpose */
.senshi-art .ch--5{ --ch-dark:#8d8898; }
.senshi-art .ch--5 .ch-head{ cursor:default; }
.senshi-art .ch--5 .ch-name{ color:#f2f1f4; }

/* ==========================================================================
   63. THE EPISODE BOXES   (10 Sep 2026)
   ==========================================================================
   Each episode is one box holding all its beats and galleries, with a dark bar
   in the chapter's own family. Open on load, collapsible, and a fold-all at
   the top of the chapter body.

   THE UNTINTED BAR IS DARKER THAN ITS CHAPTER HEAD, NOT LIGHTER. Lighter is
   the obvious way to signal nesting and it fails here: the chapter ramp already
   stops at #7a5f2c because that is where cream stops clearing 4.5:1, so
   lightening from there puts the last two chapters under the guard. Darker
   nests just as clearly and moves the contrast the safe way. Every ground below
   is computed and asserted by the build script.

   THE CRYSTAL EPISODES take a dark version of their own crystal, so chapter 3
   now reads red, orange, yellow, green, blue, indigo, violet straight down the
   page. That is what the tints were always for; they were just one paragraph
   each instead of a whole episode.

   ARRIVALS ARE BADGES, NOT GROUNDS. Two episodes carry two tints - ep 25 is
   Jupiter during the red crystal, ep 32 is Venus and Serenity together - and a
   box has one ground. The crystal takes it; the arrival gets a badge in its own
   colour, which says who turns up in words rather than asking anyone to learn a
   colour code.

   FOLD-ALL IS A MASTER SWITCH, not a bulk setter: .ch-fold:checked closes every
   .ep-body in that chapter regardless of the individual checkboxes, and
   unchecking it hands control straight back to them. CSS cannot set another
   input's state, and this is the honest way to get the behaviour without JS. */
.senshi-art .ch--1 .ep{ --ep-bar:#482853; }
.senshi-art .ch--2 .ep{ --ep-bar:#4c2e4b; }
.senshi-art .ch--3 .ep{ --ep-bar:#523542; }
.senshi-art .ch--4 .ep{ --ep-bar:#583c39; }
.senshi-art .ch--5 .ep{ --ep-bar:#5f4430; }
.senshi-art .ch--6 .ep{ --ep-bar:#614c23; }
.senshi-art .ep.ep--t-red{ --ep-bar:#7b2b3a; }
.senshi-art .ep.ep--t-orange{ --ep-bar:#8a4a1c; }
.senshi-art .ep.ep--t-yellow{ --ep-bar:#6f6018; }
.senshi-art .ep.ep--t-green{ --ep-bar:#276048; }
.senshi-art .ep.ep--t-blue{ --ep-bar:#26497e; }
.senshi-art .ep.ep--t-indigo{ --ep-bar:#3f3577; }
.senshi-art .ep.ep--t-violet{ --ep-bar:#64327a; }
.senshi-art .ep-badge--mercury{ background:#2b5580; }
.senshi-art .ep-badge--mars{ background:#8a2f2f; }
.senshi-art .ep-badge--jupiter{ background:#276048; }
.senshi-art .ep-badge--venus{ background:#6e5416; }
.senshi-art .ep-badge--serenity{ background:#6a4a86; }

.senshi-art .ep{ margin:0 0 10px; border-radius:8px; overflow:hidden; }
.senshi-art .ep-in{ position:absolute; opacity:0; width:0; height:0; }

.senshi-art .ep-head{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  padding:9px 13px; cursor:pointer; user-select:none;
  background:var(--ep-bar); color:#fffdf7;
}
.senshi-art .ep-head:hover{ filter:brightness(1.14); }
.senshi-art .ep-no{
  font-family:rainyhearts, monospace; font-size:13px; letter-spacing:.04em;
  color:#f0e7cf; flex:0 0 auto;
}
.senshi-art .ep-title{ font-size:14.5px; color:#fffdf7; flex:1 1 auto; min-width:0; }
.senshi-art .ep-title--none{ color:#f0e7cf; font-style:italic; opacity:.8; }
.senshi-art .ep-beats{
  font-family:rainyhearts, monospace; font-size:11px; color:#f0e7cf; flex:0 0 auto;
}
.senshi-art .ep-caret{
  flex:0 0 auto; width:0; height:0; margin-left:2px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid #f0e7cf;
}
.senshi-art .ep-in:checked + .ep-head .ep-caret{ transform:rotate(180deg); }

.senshi-art .ep-badge{
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.03em;
  color:#fffdf7; padding:2px 8px; border-radius:999px; flex:0 0 auto;
  border:1px solid rgba(255,253,247,.34);
}
.senshi-art .ep-badge--mercury{ background:#2b5580; }
.senshi-art .ep-badge--mars{ background:#8a2f2f; }
.senshi-art .ep-badge--jupiter{ background:#276048; }
.senshi-art .ep-badge--venus{ background:#6e5416; }
.senshi-art .ep-badge--serenity{ background:#6a4a86; }

.senshi-art .ep-body{ display:none; background:#fefeff; padding:12px 13px 4px; }
.senshi-art .ep-in:checked ~ .ep-body{ display:block; }

/* the master switch */
.senshi-art .ch-fold{ position:absolute; opacity:0; width:0; height:0; }
.senshi-art .ch-fold-btn{
  display:inline-block; margin:0 0 10px; padding:4px 11px; cursor:pointer;
  font-family:rainyhearts, monospace; font-size:12px; letter-spacing:.03em;
  color:var(--accent); background:#f7f4fc; border:1px solid var(--backbow);
  border-radius:999px;
}
.senshi-art .ch-fold-btn:hover{ background:var(--backbow); color:#3f2350; }
.senshi-art .ch-fold:checked ~ .ep .ep-body{ display:none; }
.senshi-art .ch-fold:checked ~ .ep .ep-caret{ transform:none; }
.senshi-art .cf-b{ display:none; }
.senshi-art .ch-fold:checked + .ch-fold-btn .cf-a{ display:none; }
.senshi-art .ch-fold:checked + .ch-fold-btn .cf-b{ display:inline; }

/* the one bridge beat: no bar, no header, quieter than an episode */
.senshi-art .ep-bridge{
  margin:0 0 10px; padding:2px 13px; border-left:3px solid var(--backbow);
  background:#fbf9fe; border-radius:0 6px 6px 0;
}

@media (max-width:560px){
  .senshi-art .ep-head{ gap:7px; padding:8px 10px; }
  .senshi-art .ep-title{ font-size:13px; }
  .senshi-art .ep-beats{ display:none; }
}

/* ==========================================================================
   64. THE CHAPTER BAR SMALL TEXT   (10 Sep 2026)
   ==========================================================================
   Ashley: the tiny text in the chapter bars needs to be bigger.

   It was 10px rainyhearts - a pixel face at a size where, on a dark ground, it
   reads as texture rather than as words. 13px for both the episode range and
   the beat count, with a little letter-spacing on the count so the digits do
   not close up against each other.

   Contrast is unaffected in the direction that matters: the meta ink clears
   4.87:1 at its worst step and larger type only ever makes that easier. */
.senshi-art .ch-eps{ font-size:13px; letter-spacing:.02em; }
.senshi-art .ch-state{ font-size:13px; letter-spacing:.04em; }

@media (max-width:560px){
  .senshi-art .ch-eps,
  .senshi-art .ch-state{ font-size:11px; }
}

/* ==========================================================================
   65. USAGI'S KIT, RESTORED   (10 Sep 2026)
   ==========================================================================
   These blocks lived inside section#arcs on this page, travelled to the wing
   with the console, and were then deleted from the wing as profile-page
   material - briefly nowhere at all. Recovered from the pre-move copy: twelve
   objects and twelve moves across five arcs.

   The arc bars use the same plum-to-gold ramp as the chapter bars on the wing,
   five steps instead of six, so the two pages read as one system. Every step
   is computed and asserted by the build script.

   NO DEAD SPACE, AND SIDE BY SIDE COULD NOT GIVE IT. Built objects-left,
   moves-right first, as asked, then measured: 278 + 200 + 237 + 210 + 210 =
   1,135px of empty column. That is structural. A move card is a name, a kind
   and a two-to-four line description; an item is a 56px thumbnail beside two
   lines. Moves run about 2.2x taller in every arc, so the objects column
   always bottoms out first and everything below it is nothing.

   Stacked instead: objects in a full-width auto-fill grid, moves in another
   under it. Both consume their rows and a column mismatch cannot happen,
   because there are no columns. Objects also keep top billing, which they
   should on a page about what she carries. Say the word and the side-by-side
   version comes back with its 1,135px.

   THE INHERITED .kit TYPE IS BUMPED. 12.5px name and 11px note at 0.8 opacity
   was sized for a crowded console column - the same too-small problem Ashley
   flagged on the chapter bars an hour ago. The thumbnail goes 44px to 56 so
   the images she adds later have room to be seen. */
.senshi-art .kitarc--1{ --ka-bar:#5a3268; }
.senshi-art .kitarc--2{ --ka-bar:#623d59; }
.senshi-art .kitarc--3{ --ka-bar:#6a484a; }
.senshi-art .kitarc--4{ --ka-bar:#72533b; }
.senshi-art .kitarc--5{ --ka-bar:#7a5f2c; }

.senshi-art .kitframe{ padding:4px 28px 26px; }
.senshi-art .kitarc{ margin:0 0 14px; }

.senshi-art .kitarc-h{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  margin:0; padding:9px 14px; border-radius:7px 7px 0 0;
  background:var(--ka-bar);
}
.senshi-art .ka-n{
  font-family:rainyhearts, monospace; font-size:13px; color:#f0e7cf; flex:0 0 auto;
}
.senshi-art .ka-name{
  font-family:"04B", monospace; font-size:17px; letter-spacing:.5px;
  color:#fffdf7; flex:0 0 auto;
}
.senshi-art .ka-era{
  font-family:rainyhearts, monospace; font-size:13px; color:#f0e7cf;
  margin-left:auto; flex:0 0 auto;
}

.senshi-art .kitarc-body{
  padding:14px 15px; border:1px solid var(--backbow); border-top:0;
  border-radius:0 0 7px 7px; background:#fefeff;
}
.senshi-art .ka-items{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px 18px; align-content:start; align-items:start;
}
.senshi-art .ka-items .kit{ max-width:none; }
.senshi-art .kit-shot .ph--kitshot,
.senshi-art .kit-shot img.art--kitshot{ width:56px; height:56px; }
.senshi-art .ka-items .kit-name{ font-size:13.5px; color:var(--ink); }
.senshi-art .ka-items .kit-note{ font-size:12px; opacity:.9; line-height:1.4; }

.senshi-art .ka-moves{ margin-top:13px; padding-top:12px; border-top:1px dashed var(--backbow); }
/* align-items:start, so a short move does not inherit the height of the
   tallest card in its row. Grid stretches row items by default, which was
   leaving about 90px under "Moon Tiara Action" in arc 1 alone - the same fault
   as the empty column, just smaller and repeated eleven more times. */
.senshi-art .km-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px 16px; align-content:start; align-items:start;
}
.senshi-art .ka-moves-h{
  margin:0 0 8px; font-family:rainyhearts, monospace; font-size:13px;
  letter-spacing:.03em; color:var(--accent);
}
.senshi-art .km-list{ margin:0; padding:0; list-style:none; }
.senshi-art .km{ margin:0; }
.senshi-art .km{
  margin:0 0 9px; padding:7px 10px; border-radius:6px;
  border-left:3px solid var(--backbow); background:#f8f5fd;
}
.senshi-art .km--transformation{ border-left-color:var(--frontbow); background:#f6f1fb; }
.senshi-art .km-name{
  display:block; font-size:13px; font-weight:700; color:var(--ink); line-height:1.25;
}
.senshi-art .km-kind{
  display:block; font-family:rainyhearts, monospace; font-size:11px;
  letter-spacing:.04em; color:var(--accent); margin-top:1px;
}
.senshi-art .km-desc{ margin:4px 0 0; font-size:12px; line-height:1.42; color:#5b5668; }

@media (max-width:820px){
  .senshi-art .kitframe{ padding:4px 14px 20px; }
  .senshi-art .ka-era{ margin-left:0; }
}

/* ==========================================================================
   68. THE EPISODE BAR TEXT   (10 Sep 2026)
   ==========================================================================
   Ashley: the episode bars, not the chapter bars - rainyhearts is hard to read
   that small.

   Correct, and specifically about the face. rainyhearts is a pixel font: the
   strokes are one pixel wide by design, so shrinking it does not thin the
   letters, it deletes features - a bowl closes up, a crossbar merges into its
   stem. Raleway at 11px is merely small; rainyhearts at 11px is a different
   letterform. Hence "4 beats" reading as texture on a dark ground.

   ep-no 13 -> 15, ep-beats 11 -> 13, ep-badge 11 -> 12.5, and the title, which
   is Raleway not rainyhearts, 14.5 -> 15.5 so it still leads its own bar.

   Contrast only improves: the meta ink clears 4.87:1 at its worst ground and
   larger type makes that easier, never harder. */
.senshi-art .ep-no{ font-size:15px; letter-spacing:.03em; }
.senshi-art .ep-beats{ font-size:13px; letter-spacing:.03em; }
.senshi-art .ep-badge{ font-size:12.5px; padding:3px 9px; }
.senshi-art .ep-title{ font-size:15.5px; }

@media (max-width:560px){
  .senshi-art .ep-no{ font-size:13px; }
  .senshi-art .ep-title{ font-size:13.5px; }
  .senshi-art .ep-badge{ font-size:11px; }
}

/* ==========================================================================
   70. THE NOON WHEEL   (10 Sep 2026)
   ==========================================================================
   Ashley asked for a noon chart in whole sign, marked unverified, large enough
   to read. What shipped first was a list of sign chips and a caveat that said
   there were no houses - the cautious version, not the asked-for one. This is
   the wheel.

   IT IS INLINE SVG, NOT AN IMAGE. Three reasons that matter here: it inherits
   the panel's palette so it cannot drift out of step with the section around
   it; it stays sharp at any size, which is the whole point of "large enough to
   read"; and its title and desc are real text, so the chart is not a blank to
   anyone using a screen reader.

   THE SIZE. It caps at 700px and is centred. Below that it simply scales - an
   SVG with a viewBox and no width is fluid by default - so on a phone it is
   the column width and still legible, because everything in it is vector.

   THE DASHED PARTS ARE THE UNVERIFIED PARTS. Ascendant, Descendant, Midheaven
   and IC are dashed and drawn in the same violet as the retrograde marks, and
   the caption says why in words. The house spokes are dashed too, since they
   follow from the Ascendant. Nothing else in the wheel is dashed, so dashed
   means exactly one thing.

   THE GLYPHS ARE THE SITE'S OWN. The band uses images/zodiac/*.png, the pink
   pixel set already running in the homepage symbol key, and the bodies use the
   senshi glyph set - each planet's symbol in its guardian's colour. Sun and
   north node have no guardian and so no senshi glyph, and take the two Unicode
   characters the homepage already uses. The first version of this wheel was set
   entirely in words because I searched two files for glyph CHARACTERS, found
   none, and concluded the site had none; it has nine sign sets and a senshi
   set, and Unicode planet glyphs render on the homepage right now.

   PIXEL ART MUST NOT BE SMOOTHED. The sources are 16 and 20 pixels drawn at 30
   units inside a viewBox that is itself scaled to fit the column, so the
   browser will resample them. image-rendering:pixelated keeps the pixels
   square. Without it hand-drawn pixel art ends up blurrier than plain text
   would have been, which would make the glyphs a downgrade rather than an
   upgrade. Degrees stay in the body face - rainyhearts has no degree sign or
   prime, and that is still true. */
.senshi-art .nkw-px{ image-rendering:pixelated; image-rendering:crisp-edges; }
.senshi-art .nk-wheel-wrap{ margin:0 0 16px; }
.senshi-art .nk-wheel{ margin:0; padding:0; text-align:center; }
.senshi-art .nkw-svg{
  display:block; width:100%; max-width:700px; height:auto; margin:0 auto;
  overflow:visible;
}
.senshi-art .nk-wheel-cap{
  max-width:620px; margin:12px auto 0; text-align:left;
  font-size:13px; line-height:1.6; color:rgba(240,234,250,.86);
}
.senshi-art .nk-wheel-cap b{ color:#e6c15a; font-weight:600; }

/* The hint's base rule is stated BEFORE the media query that turns it on, and
   that ordering is load-bearing. Media queries add no specificity, so a later
   `display:none` on the same selector beats an earlier `display:block` inside
   one - which is exactly what happened on the first pass: the hint measured
   display:none at 390px even though the phone block said block. Source order
   decides ties, so the default has to come first. */
.senshi-art .nk-wheel-hint{
  display:none; margin:6px 0 0; font-family:rainyhearts,monospace;
  font-size:12px; letter-spacing:.04em; color:rgba(230,193,90,.72);
}

/* BELOW 620 IT PANS INSTEAD OF SHRINKING, and this is the one thing the first
   render got badly wrong. An SVG with a viewBox and no width is fluid, so at a
   390px phone the wheel obediently drew itself 298px wide - which put the body
   names at about six pixels and the degrees at five. Sharp, and unreadable.
   A chart is not a decoration; if it cannot be read it is not doing its job.

   So on a narrow screen the wheel keeps a floor of 520px and the figure scrolls
   sideways to reach it. That is the same treatment tables and code blocks get
   here. The scroll lives on the figure alone, so the page body still never
   scrolls horizontally. */
@media (max-width:620px){
  .senshi-art .nk-wheel{
    overflow-x:auto; overflow-y:hidden;
    margin-bottom:12px; padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-color:rgba(230,193,90,.5) transparent;
  }
  .senshi-art .nkw-svg{ min-width:520px; }
  .senshi-art .nk-wheel-cap{
    /* the caption must not inherit the scroller's width, or it becomes a
       520px-wide line the reader has to drag through. */
    max-width:100%;
  }
  .senshi-art .nk-wheel-hint{ display:block; }
}

/* ==========================================================================
   71. EPISODE 1 ARRIVES   (10 Sep 2026)
   ==========================================================================
   Ashley: ep 1's header needs "moon arrives" on it.

   The other five arrival badges were generated from the tint spans in the
   prose, which mark a new guardian joining the group. There was never a tint
   for Usagi, because at episode 1 there is no group yet - so the machine that
   made every other badge had nothing to fire on, and the one row that most
   obviously needed the label was the one row that did not get it.

   #3f4a6b is her brooch blue taken down far enough to carry the cream ink the
   badges use: 8.59:1, well clear of AA, computed by the build script rather
   than guessed. It is NOT serenity's plum. Same person, different event - the
   transformation in episode 1 and the princess at 32 - and one colour for both
   would give away the reveal the whole arc is built on. */
.senshi-art .ep-badge--moon{ background:#3f4a6b; }

/* ==========================================================================
   72. THE CHART MOVES UP, AND TURNS INSIDE OUT   (10 Sep 2026)
   ==========================================================================
   Ashley: put the chart next to the picture; keep the purple but make the
   inside cream; colour the crust ring by element; put degrees on the list.

   THE ROW. .nk-duo is the portrait and the wheel side by side. The stats list
   moved under the photo and that is structural, not decorative: a 340px photo
   is 413px tall, the wheel beside it is about 516, and without the stats the
   photo column would hang 100px of empty space - the dead space she has told
   me twice to watch for. The prose runs full width underneath, where a long
   line is fine because it is prose.

   THE WHEEL KEEPS A PANEL. Purple frame, cream filling. Bare on the page the
   wheel would have stopped reading as the night-sky object it is, and the
   panel is also what makes the two halves of the row the same kind of thing.

   THE CRUST is fire #7b2b3a, earth #276048, air #6f6018, water #26497e -
   four of the seven rainbow-crystal grounds the episode boxes upstairs already
   use. Quoting the palette, not inventing one.

   THE SIGN GLYPHS ARE RE-INKED, and this is the change worth knowing about.
   The pink set is flat #ff4da6 with no outline, and flat pink on those four
   grounds measures 3.05, 2.41, 2.04 and 2.94 to one - pink is mid-luminance,
   so no ground both reads as its element and carries it. brightness(0) invert(1)
   re-inks the sprite white without touching the file: 9.18, 7.24, 6.14, 8.84.
   The pink set is untouched on disk and still pink everywhere else on the
   site. Delete the one line below and it comes back here too.

   THE INK CHANGES AT THE RIM. Everything inside the crust is dark on cream;
   the four angle labels sit outside it on the purple panel and take the light
   violet instead. Same hue, opposite end. Using one violet for both put ASC,
   DSC, MC and IC at barely a shade off their own background.

   THE SENSHI GLYPHS ARE NOT TOUCHED. I expected the Moon to disappear - its
   crescent is #fcfe34, which is 1.07:1 on cream - and it does not, because
   every sprite in that set is a coloured fill inside a near-black outline that
   runs 20:1 on cream. They work on a light ground and a dark one both. */
.senshi-art .nk-duo{
  display:grid; grid-template-columns:minmax(200px,340px) minmax(0,1fr);
  gap:20px; align-items:start; margin:6px 0 14px;
}
.senshi-art .nk-duo-l{ display:block; }
.senshi-art .nk-duo .nk-photo{ margin:0 0 14px; }
.senshi-art .nk-duo .nk-stats{ margin:0; }

.senshi-art .nk-chart--wheel{ padding:14px 16px 16px; }
.senshi-art .nk-chart--wheel .nk-wheel-wrap{ margin-bottom:0; }

/* the card is prose only now, so it is one column */
.senshi-art .nk-card{ grid-template-columns:minmax(0,1fr); }

/* re-ink the pink sprite white for the coloured crust. One line. */
.senshi-art .nkw-sign{ filter:brightness(0) invert(1); }

/* the caption sits under a wheel that is now about 570px, not 700 */
.senshi-art .nk-wheel-cap{ max-width:100%; }

/* THE DEGREE ON EACH CHIP, AND THE TRACK HAS TO GROW WITH IT. The chips were
   an auto-fill grid with a 150px minimum, sized when a chip held a name and a
   sign. A chip is a nowrap flex row, so adding the degree did not wrap it - it
   pushed the retrograde R straight out through the right-hand border, which is
   what the first render did on Mercury, Neptune and Pluto. The widest chip is
   now about 205px (a name, a sign, six characters of degree, the R badge and
   20px of padding), so the track floor goes to 200 and the name column gives
   back the four pixels it was not using. */
.senshi-art .nk-signs{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.senshi-art .nk-deg{
  font-size:13px; color:rgba(230,193,90,.80); letter-spacing:.01em;
  white-space:nowrap;
}
.senshi-art .nk-chip{ gap:6px; }
.senshi-art .nk-body{ min-width:62px; }

@media (max-width:900px){
  .senshi-art .nk-duo{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .senshi-art .nk-duo-l{ max-width:300px; }
}

/* ==========================================================================
   73. CUTE SHADES, AND A DRIFTING SKY   (10 Sep 2026)
   ==========================================================================
   Ashley: cute shades for the elements, make the chart cutsie, and can we use
   one of the Sailor Moon backgrounds - maybe scrolling.

   THE PASTELS are blush, mint, butter and periwinkle, and the sign glyphs flip
   back to DARK to sit on them. Two changes ago the crust was deep and the same
   sprites had to be re-inked cream; on pastels cream is about 1.2:1 and gone.
   brightness(0) instead of brightness(0) invert(1) - one word - and the glyph
   is a soft charcoal at 7.6 to 12.8 to one. The pink file itself has never been
   modified through any of this.

   THE STARFIELD is bg57.gif, chosen out of the eighteen because it is a dark
   plum tile that already belongs to the panel's colour family. It is a
   ::before at .55 on screen blend rather than a background on the panel: a
   tiled gif set as the background is opaque and would have painted over the
   gradient, while screen-blending a dark tile lets only its sparkles through.
   90 seconds for one 150px tile - noticeable only if you look for it.

   OVERFLOW:HIDDEN IS SAFE HERE even though the wheel scrolls sideways on a
   phone: that scroll lives on .nk-wheel, a child with its own overflow-x, and
   a child scroller is unaffected by a clipping ancestor. What overflow:hidden
   is actually for is the ::before, which is inset:0 on a rounded panel and
   would otherwise square off the corners.

   AND THE CHILDREN GET z-index:1. The ::before is painted after the panel's
   own background but before nothing else; without a stacking context on the
   content it would sit over the wheel and the text rather than behind them. */
.senshi-art .nk-chart{ position:relative; overflow:hidden; }
.senshi-art .nk-chart > *{ position:relative; z-index:1; }
.senshi-art .nk-chart::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(images/backgrounds/bg57.gif) repeat 0 0;
  background-size:150px 150px;
  opacity:.55; mix-blend-mode:screen;
  animation:nk-drift 90s linear infinite;
}
@keyframes nk-drift{
  from{ background-position:0 0; }
  to  { background-position:150px 300px; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .nk-chart::before{ animation:none; }
}

/* the sprite is re-inked dark for the pastel crust. This supersedes the
   brightness(0) invert(1) in section 72 - later rule, same specificity. */
.senshi-art .nkw-sign{ filter:brightness(0); opacity:.82; }

/* ==========================================================================
   74. ONE BOX FOR THE CHART   (10 Sep 2026)
   ==========================================================================
   Ashley: all of this belongs in the same box as the chart, below the wheel,
   and the text that was in there belongs outside it.

   The chart was in two identical-looking panels with a card of biography
   between them, and each panel was padded with a paragraph that was not the
   chart. Now the box holds the chart and only the chart - heading, wheel,
   placements - and every sentence about it sits outside, at the foot of the
   biography card.

   THE CHIPS NEED NO NEW STYLING. They were built for a dark ground and they
   have moved from one dark panel to another; the auto-fill grid simply falls
   from four columns to two in the narrower box, which is the whole point of
   auto-fill.

   .nk-note IS FOR A LIGHT GROUND, and that is the only real work here. Both
   paragraphs were written for the dark panel - near-white body text with gold
   bold - and dropping them onto the cream card unchanged would have left white
   text on white. They take the page's own ink, with the plum for emphasis. */
.senshi-art .nk-signs-h{
  margin:14px 0 8px; font-family:rainyhearts,monospace; font-size:12px;
  letter-spacing:.06em; color:rgba(230,193,90,.78);
  border-top:1px solid rgba(230,193,90,.22); padding-top:12px;
}
.senshi-art .nk-chart--wheel .nk-signs{ margin-bottom:0; }

.senshi-art .nk-note{
  margin:14px 0 0; font-size:13.5px; line-height:1.65; color:var(--ink);
}
.senshi-art .nk-note b{ color:#5A3268; font-weight:600; }
.senshi-art .nk-note + .nk-note{ margin-top:10px; }

/* ==========================================================================
   75. THE WHEEL CANNOT BE CRUSHED   (10 Sep 2026)
   ==========================================================================
   Ashley: make sure the wheel isn't getting crushed if it's getting shrunk
   down - the glyphs and signs are already starting to look crushed.

   THE MEASUREMENT. The viewBox is 848 units and the wheel was rendering at
   535px, so a unit was 0.631px. The body glyphs were 30 units - 18.9px on
   screen, from a 20px source. They were being drawn SMALLER than the file.

   Downscaling pixel art is a different failure from blurring it. A non-integer
   upscale makes some rows two screen-pixels tall and others one, which looks
   uneven; a downscale drops rows entirely - a one-pixel stroke falls between
   two screen pixels and is either lost or smeared across both. That is why
   they read as crushed, and image-rendering cannot fix it because there is
   nothing left to render.

   THREE CHANGES, and the third is the one that matters longest:

   1. The glyphs grew - signs 30 -> 34 units, bodies 30 -> 40 - so that at the
      tightest scale on this page they still land above their source size. The
      build script computes that and refuses to write the file if either one
      would be a downscale.

   2. The photo column gave back 40px, 340 -> 300, all of it to the wheel.

   3. THE 520px FLOOR NOW APPLIES AT EVERY WIDTH, not only under a 620px
      viewport. It was a phone accommodation; it is now the wheel's minimum
      size, full stop, with the figure panning sideways if the box is ever
      narrower than that. Points 1 and 2 fix today's layout. Point 3 is what
      stops the next layout change from quietly squeezing it again. */
.senshi-art .nk-duo{ grid-template-columns:minmax(200px,300px) minmax(0,1fr); }
.senshi-art .nkw-svg{ max-width:620px; min-width:520px; }
.senshi-art .nk-wheel{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-color:rgba(230,193,90,.5) transparent;
}
@media (max-width:900px){
  .senshi-art .nk-duo-l{ max-width:300px; }
}

/* ==========================================================================
   76. TIGHTER: SMALLER GLYPHS, A REAL TABLE, NO DEAD COLUMN   (10 Sep 2026)
   ==========================================================================
   Ashley: the glyphs are too big and chunky, the placements are way too big,
   there is a ton of dead space under "best known for", any ideas for
   rearranging to optimise space.

   THE MEASUREMENTS, because two of those turned out to be one problem:
     left column 637   photo 387 + stats 231
     chart panel 915   heading 27 + wheel 521 + placements 302
     dead        278
   The hole under the stats is not caused by the photo being short. It is
   caused by 302px of placements for eleven rows of two words. Shrink the
   table and most of the hole closes on its own.

   THE GLYPHS go 40 -> 33 units for bodies and 32 -> 27 for signs. Those are
   the SMALLEST values that still clear the never-downscale guard at the 520px
   floor, so this is as small as they can go without going back to crushed.
   On screen: 27.1px -> 21.2px.

   THE TABLE was 38px bordered boxes in two columns. It is now 24px rows in
   three, ruled instead of framed - 134px instead of 302. Each row gains its
   glyph, which pays for itself twice: the name can drop to 10px because the
   glyph identifies the row, and the list now uses the same nine sprites as the
   wheel above it, so each teaches the other.

   THE COLUMN goes 300 -> 330, which leaves the wheel 545 - still above its 520
   floor. And the card below splits in two, biography and chart notes side by
   side. That saves little height but 891px is a 120-character measure; 440 is
   about sixty, which is what the rest of this site sets prose at. */
.senshi-art .nk-duo{ grid-template-columns:minmax(200px,330px) minmax(0,1fr); }

/* ---- the placements table ---- */
.senshi-art .nk-signs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:0 18px; margin:0; padding:0; list-style:none;
}
.senshi-art .nk-chip{
  display:flex; align-items:center; gap:6px;
  padding:3px 2px; min-height:24px;
  background:none; border:0; border-radius:0;
  border-bottom:1px solid rgba(230,193,90,.16);
}
.senshi-art .nk-g{
  flex:0 0 auto; width:18px; height:18px; display:block;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
/* the sprite on disk is upside down; flipped here as it is in the wheel */
.senshi-art .nk-g--flip{ transform:scaleY(-1); }
.senshi-art .nk-g--uni{
  width:18px; height:18px; line-height:18px; text-align:center;
  font-size:17px; color:#e6c15a;
}
.senshi-art .nk-body{
  min-width:0; flex:0 0 auto;
  font-family:rainyhearts,monospace; font-size:10px; letter-spacing:.03em;
  color:rgba(230,193,90,.72);
}
.senshi-art .nk-sign{ font-size:12px; color:#f4eefb; margin-left:auto; }
.senshi-art .nk-deg{ font-size:11px; color:rgba(230,193,90,.80); white-space:nowrap; }
.senshi-art .nk-r{
  margin-left:0; font-size:9px; padding:0 3px; border-radius:3px;
}
.senshi-art .nk-signs-h{ margin:12px 0 4px; padding-top:10px; }

/* ---- the card, two columns ---- */
.senshi-art .nk-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 28px;
  align-items:start;
}
.senshi-art .nk-body-col--split .nk-lead:first-child{ margin-top:0; }
.senshi-art .nk-notes-col .nk-note:first-child{ margin-top:0; }

@media (max-width:900px){
  .senshi-art .nk-card{ grid-template-columns:minmax(0,1fr); }
  .senshi-art .nk-notes-col .nk-note:first-child{ margin-top:14px; }
}

/* ==========================================================================
   77. A BOX FOR THE PLACEMENTS, A FRAME FOR EACH COLUMN   (10 Sep 2026)
   ==========================================================================
   Ashley: frame the placements in a slightly opaque box, the text is really
   small again; and the paragraphs under the chart are two different things -
   bio on the left, chart on the right - so frame them separately.

   I OVERSHOT ON THE TABLE. She said it was way too big, so I took the rows
   from 38px to 24 and the name to 10px - and 10px of a pixel font on a dark
   gradient is not a size, it is a texture. The compaction was right; the type
   was collateral damage. Rows stay short and three-across, everything in them
   goes up a step, and the block lands at about 150px instead of 110. That is
   40px given back out of the 192 the compaction saved. The table was never too
   big in pixels - it was too big in furniture.

   AND IT IS TWO COLUMNS, NOT THREE. At the bigger type a row needs about 206px
   and three columns inside a 519px box give it 161 - the R badge ended up
   sitting on the box's own border. Two columns give 250. The extra height is
   bought back by widening the photo column 330 -> 350 and trimming the panel's
   side padding 16 -> 12, which leaves the wheel at 531, above its 520 floor.

   THE BOX is a 7% cream wash over the panel gradient with a gold hairline:
   enough to lift the rows off the starfield drifting behind them, not enough
   to read as a second dark card sitting inside the first.

   THE TWO COLUMNS were side by side only because the width was there. One is
   biography, one is entirely about the chart. Each gets a frame and a label -
   two identical boxes side by side show that they are separate without saying
   why. Their left borders differ on purpose: the biography takes the ribbon
   pink already carrying the portrait, the chart notes take the plum the
   wheel's own rings and ticks are drawn in, so the colour says which box
   belongs to which object.

   THE FRAME MOVED OFF .nk-card ONTO ITS CHILDREN. The card kept the border and
   the cream gradient from when it was one block of prose; it is now only the
   grid, and the two boxes carry the styling. */

/* ---- the placements box ---- */
.senshi-art .nk-duo{ grid-template-columns:minmax(200px,350px) minmax(0,1fr); }
.senshi-art .nk-chart--wheel{ padding:14px 12px 14px; }
.senshi-art .nk-signbox .nk-signs{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.senshi-art .nk-signbox{
  margin:14px 0 0; padding:10px 12px 4px;
  background:rgba(255,253,247,.07);
  border:1px solid rgba(230,193,90,.30);
  border-radius:9px;
}
.senshi-art .nk-signbox .nk-signs-h{
  margin:0 0 6px; padding:0; border-top:0;
  font-size:11.5px; color:rgba(230,193,90,.88);
}
.senshi-art .nk-signbox .nk-chip{
  border-bottom:1px solid rgba(230,193,90,.22);
  min-height:27px; padding:4px 2px;
}
.senshi-art .nk-signbox .nk-g,
.senshi-art .nk-signbox .nk-g--uni{ width:20px; height:20px; }
.senshi-art .nk-signbox .nk-g--uni{ line-height:20px; font-size:19px; }
.senshi-art .nk-signbox .nk-body{ font-size:11.5px; color:rgba(230,193,90,.88); }
.senshi-art .nk-signbox .nk-sign{ font-size:13.5px; }
.senshi-art .nk-signbox .nk-deg{ font-size:12px; color:rgba(230,193,90,.88); }
.senshi-art .nk-signbox .nk-r{ font-size:10px; padding:0 4px; }

/* ---- the two framed columns ---- */
.senshi-art .nk-card{
  background:none; border:0; border-radius:0; padding:0;
  gap:0 22px;
}
.senshi-art .nk-body-col--split,
.senshi-art .nk-notes-col{
  padding:14px 18px 16px; border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#f6f2fc 0%,#fdfcff 62%) no-repeat top/100% 90px, #fdfcff;
  border:1px solid var(--backbow); border-left-width:4px;
}
.senshi-art .nk-body-col--split{ border-left-color:var(--frontbow); }
.senshi-art .nk-notes-col{ border-left-color:#5A3268; }

.senshi-art .nk-col-h{
  margin:0 0 10px; padding:0 0 8px;
  font-family:rainyhearts,monospace; font-size:13px; letter-spacing:.05em;
  color:var(--accent);
  border-bottom:1px dashed var(--backbow);
}
.senshi-art .nk-col-h--chart{ color:#5A3268; }
.senshi-art .nk-body-col--split .nk-lead:first-of-type,
.senshi-art .nk-notes-col .nk-note:first-of-type{ margin-top:0; }

@media (max-width:900px){
  .senshi-art .nk-card{ gap:14px 0; }
}

/* ==========================================================================
   78. ONE GRID, TWO COLUMNS, NO LEFTOVERS   (10 Sep 2026)
   ==========================================================================
   Ashley: who she IS, not who she was. And align the right-hand box with the
   birth chart box - kill any dead space.

   THE TWO WERE THE SAME INSTRUCTION. The section was two stacked layouts:
   .nk-duo at 350|557 and .nk-card at 452|452, so the second row's gutter fell
   100px left of the first one's and the notes box - which is entirely about
   the chart - did not line up with the chart. And because each row balanced
   its own columns independently, each row kept its own leftover: 126px under
   the facts list, plus whatever the shorter prose box left below.

   One grid. Everything about Naoko in the left column, everything about the
   chart in the right, both running the full height of the section. The gutter
   becomes a single line down the page; the notes box is exactly as wide as the
   chart because it is in the same column; and the two columns finish within
   about fifty pixels of each other, because the leftover from the top of the
   left column is what the biography box at its foot now fills.

   Two piles of dead space of opposite sign, added together. That is the whole
   trick, and it is why "align the boxes" and "kill the dead space" turned out
   to be one edit rather than two. */
.senshi-art .nk-duo{ align-items:stretch; }
.senshi-art .nk-duo-l,
.senshi-art .nk-duo-r{ display:flex; flex-direction:column; gap:14px; }

/* the boxes no longer sit in a grid of their own, so their own margins go */
.senshi-art .nk-duo-l .nk-photo,
.senshi-art .nk-duo-l .nk-stats,
.senshi-art .nk-duo-l .nk-body-col--split,
.senshi-art .nk-duo-r .nk-notes-col{ margin:0; }

/* and the last box in each column stretches to close the gap, so whichever
   column is shorter ends level with the other rather than leaving a step */
.senshi-art .nk-duo-l .nk-body-col--split,
.senshi-art .nk-duo-r .nk-notes-col{ flex:1 1 auto; }

/* THE PHONE STACK, AND A REGRESSION I SHIPPED THREE TIMES.
   .nk-duo's single-column rule lives in a max-width:900 block back in section
   72. Sections 75, 76 and 77 each re-stated .nk-duo's two-column
   grid-template-columns at the top level, and a later rule of equal
   specificity beats an earlier one even when the earlier one is inside a media
   query - media queries add no specificity. So from section 75 onward the
   phone kept two columns inside 390px: the left track took 300 and the right
   track got 0, which drew the chart panel 24px wide.

   It survived three rounds of checks because every phone check I ran measured
   things that do not depend on the grid - glyph scale, chip overflow, label
   collisions inside the SVG, document scrollWidth. All of them passed on a
   page whose layout had collapsed. Testing the contents of a box is not
   testing the box.

   So: the stacked rule is re-stated HERE, after every two-column declaration,
   and the verification now asserts the computed grid at 390 rather than
   inferring that it must be fine. */
@media (max-width:900px){
  .senshi-art .nk-duo{ grid-template-columns:minmax(0,1fr); }
  .senshi-art .nk-duo-l{ max-width:none; }
  .senshi-art .nk-duo-l .nk-photo{ max-width:300px; }
  .senshi-art .nk-duo-l,
  .senshi-art .nk-duo-r{ gap:14px; }
  .senshi-art .nk-duo-l .nk-body-col--split,
  .senshi-art .nk-duo-r .nk-notes-col{ flex:0 0 auto; }
}

/* ==========================================================================
   79. "WHO SHE IS" TAKES THE WHOLE COLUMN   (10 Sep 2026)
   ==========================================================================
   Ashley: "who she is" should expand up to include everything above it and the
   picture of her.

   Right reading of the label. I had put it on the prose alone, which made it a
   caption for two paragraphs - but the portrait, the facts list and those
   paragraphs are all the same answer to the same question, and framing only
   the last third of an answer implies the first two thirds are something else.

   So the frame moves from the prose block up onto the column itself: label,
   portrait, facts, biography, one box.

   THE RIGHT COLUMN STAYS TWO BOXES, and that is deliberate rather than
   half-finished. The chart panel is dark and its notes are light; they are a
   picture and a commentary on it, not one continuous thing. One box for one
   answer, two for an object and its footnotes.

   THE PORTRAIT GIVES UP 38px to the box's padding, 350 -> 312, and about 49px
   of height with it. The grid stretches both columns to the taller, so that
   returns as a little air at the foot of the box - which inside a frame reads
   as padding. Outside one it read as a hole, which is what the last edit was
   about. */
.senshi-art .nk-biobox{
  padding:14px 18px 18px; border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#f6f2fc 0%,#fdfcff 62%) no-repeat top/100% 120px, #fdfcff;
  border:1px solid var(--backbow); border-left:4px solid var(--frontbow);
  gap:12px;
}
.senshi-art .nk-biobox .nk-col-h{ margin:0; }
.senshi-art .nk-biobox .nk-photo img{ box-shadow:0 4px 12px rgba(60,40,90,.13); }
.senshi-art .nk-biobox .nk-lead{ margin:0; }
.senshi-art .nk-biobox .nk-lead + .nk-lead{ margin-top:-2px; }

/* the facts list sat against a page ground before; inside the box it needs a
   rule above it or it runs straight into the portrait's credit line */
.senshi-art .nk-biobox .nk-stats{
  padding-top:12px; border-top:1px dashed var(--backbow);
}

/* ==========================================================================
   80. USAGI'S MASTHEAD: PLATE LEFT, TITLES RIGHT   (10 Sep 2026)
   ==========================================================================
   Ashley: the very top of the profile page - text over to the right, image
   moved up.

   The Naoko chibi comes out of the dossier's head and becomes the masthead's
   left-hand element; the name, civilian name and the two catchphrase lines
   take the right of the same row. The header stops being a line of type above
   a card and becomes the top of the card.

   THE TITLES ARE RIGHT-ALIGNED, not just pushed right. With the plate on the
   left, left-aligned text leaves a channel of white down the middle and reads
   as two things that failed to meet; ragged-left against the plate closes it.
   The quote pair was right-aligned in its first home in the dossier anyway, so
   this is the setting it was drawn for.

   EVERY RULE HANGS OFF .banner--plated, AND THAT MATTERS. This masthead markup
   is shared by all eighteen senshi profiles and every other one still has its
   plate down in the dossier. Restyling .banner--masthead itself would have
   right-aligned the type across the whole wing to fix one page. Only
   sailor-moon.html carries the new class, so nothing else can move.

   AND THE DOSSIER HEAD LOSES ITS LEFT COLUMN. With the plate gone it is a
   single column and the twelve facts spread over the full width - three across
   instead of two in a half-width well, which is most of why that block used to
   run so tall. Also scoped, via .dossier--noplate on the section. */
.senshi-art .banner--plated{
  display:flex; align-items:center; gap:26px;
  flex-wrap:nowrap;
}
.senshi-art .banner--plated .masthead-plate{
  flex:0 0 auto; width:clamp(150px, 24vw, 280px); margin:0;
}
.senshi-art .banner--plated .masthead-plate figure{ margin:0; }
.senshi-art .banner--plated .masthead-plate img{
  display:block; width:100%; height:auto; max-width:none; aspect-ratio:auto;
  border:3px solid var(--backbow); box-shadow:6px 6px 0 var(--frontbow);
  background:#fffdf6;
}
.senshi-art .banner--plated .masthead-titles{
  flex:1 1 auto; min-width:0; text-align:right;
}
.senshi-art .banner--plated .masthead-titles .dossier-cry{ text-align:right; }

/* THE CRYSTAL BUTTON IS position:absolute, top:18 right:20 - it has been since
   the banner was written, and it is NOT a flex child however much it looks
   like one sitting there in the markup. My first pass gave it flex:0 0 auto
   and align-self, which did exactly nothing: the titles took the whole
   remaining width, ran flush to the container edge, and set "Sailor Moon"
   underneath the button. Right-aligned type is what exposed it - left-aligned,
   the text never reached that corner.

   So the clearance is padding on the titles instead. 46px covers the button's
   20px offset, its own width, and enough air that the name does not look like
   it is leaning on it. */
.senshi-art .banner--plated .masthead-titles{ padding-right:46px; }

/* the facts, now that they have the whole width */
.senshi-art .dossier--noplate .dossier-head{ grid-template-columns:minmax(0,1fr); }
.senshi-art .dossier--noplate .dossier-head .stats--merged{
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:9px 28px;
}

@media (max-width:760px){
  /* below this the plate and the type stop fitting side by side; the plate
     goes back on top and the type back to the left, because ragged-left across
     a narrow column is hard to read and there is no plate beside it to justify
     against any more. */
  .senshi-art .banner--plated{ flex-wrap:wrap; gap:16px; }
  .senshi-art .banner--plated .masthead-plate{ width:min(220px, 60%); }
  .senshi-art .banner--plated .masthead-titles{ flex:1 1 100%; text-align:left; }
  .senshi-art .banner--plated .masthead-titles .dossier-cry{ text-align:left; }
}

/* ==========================================================================
   81. THE MASTHEAD JOINS THE PAGE   (10 Sep 2026)
   ==========================================================================
   Ashley: match the header text to further down the page, kill the dead space,
   put the silvery gradient on this box too, don't shrink or crush the image,
   don't press it to the left - balance it with the text. And move the henshin
   box up to the left of the stats rather than stretching them across.

   THE LOCKUP. "profile", "her kit" and "elsewhere" all use the same one: a
   drawn crescent, 04B under a plum-to-gold gradient, and a beam fading right.
   The masthead was the only heading on the page not wearing it.

   AND ITS SHADOW HAS TO BE A FILTER. The gradient is background-clip:text with
   a transparent fill, which makes the letterforms holes; a text-shadow paints
   BEHIND the text and would show through every letter as a pink smear.
   filter:drop-shadow() traces the rendered shape instead. Same trap as the
   wing's headings.

   THE DEAD SPACE WAS IN THE MIDDLE, and flex:1 on the titles put it there: the
   text block was as wide as the whole header, so the words sat at its far end
   and left 200px of nothing between them and the plate. The titles now shrink
   to their content and the pair centres as a group. The plate comes off the
   left wall, the type off the right, and what was pooled in the middle is
   redistributed to both margins - where it reads as air rather than a hole.

   THE PLATE GETS BIGGER, 280 -> 320. Balancing a picture against 300px of type
   means the picture has to hold its own, and she said twice not to crush it.

   THE SILVER is the same gradient the facts list already wears here - white
   through #d3d8e6 and back, silver edge, gold offset - and like that one it is
   scoped to body.senshi--moon, because it is the Silver Crystal's treatment
   and not every senshi's.

   THE HENSHIN FRAME takes the column the Naoko plate left behind, so the head
   is two columns again instead of one wide band of facts. */

/* ---- the heading lockup ---- */
.senshi-art .masthead-name--lockup{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  margin:0; text-shadow:none;
  filter:drop-shadow(3px 3px 0 var(--frontbow));
}
.senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(28px,4.2vw,44px); letter-spacing:1px; line-height:1.1;
  /* NOWRAP, and it is doing real work. The titles block shrinks to its content
     now (flex:0 1 auto) - which means if the name is allowed to break, it
     breaks, the block gets narrower, and the break becomes permanent. It set
     "SAILOR / MOON" over two lines with the crescent stranded beside the gap.
     A shrink-to-fit box and a wrappable headline argue with each other; the
     headline has to win. */
  white-space:nowrap;
}
/* THE CRESCENT IS MASKED HERE, NOT PUNCHED. Everywhere else on the site it is
   two discs - a gold one with a --paper one laid over it - which works because
   everywhere else the ground behind it IS --paper. The masthead's ground is now
   a five-stop silver gradient, so a flat paper disc would be a pale blob that
   matches the background at exactly one height and nowhere else. A radial mask
   cuts a genuinely transparent bite instead, so the crescent is correct on any
   ground, gradient or not. The punch-out is switched off rather than
   recoloured. */
.senshi-art .masthead-name--lockup .bh-moon{
  width:30px; height:30px; background:var(--accent);
  -webkit-mask:radial-gradient(circle at 22px 15px, transparent 13px, #000 13.5px);
  mask:radial-gradient(circle at 22px 15px, transparent 13px, #000 13.5px);
}
.senshi-art .masthead-name--lockup .bh-moon::after{ display:none; }
.senshi-art .banner--plated .masthead-titles{ position:relative; }
.senshi-art .banner--plated .masthead-titles::after{
  content:""; display:block; height:4px; margin:12px 0 0;
  background:linear-gradient(270deg,
    var(--accent) 0%, var(--frontbow) 18%, var(--backbow) 40%,
    rgba(230,200,106,.30) 74%, rgba(230,200,106,0) 100%);
}

/* ---- balance, not banishment ---- */
.senshi-art .banner--plated{
  justify-content:center; gap:clamp(20px,4vw,54px);
  padding:20px clamp(14px,3vw,34px);
  border-bottom:0;
}
.senshi-art .banner--plated .masthead-plate{
  width:clamp(190px, 26vw, 320px);
}
.senshi-art .banner--plated .masthead-titles{
  flex:0 1 auto; padding-right:46px;
}

/* ---- the silver, Usagi's only ---- */
body.senshi--moon .senshi-art .banner--plated{
  background:
    linear-gradient(180deg,#ffffff 0%,#eef0f7 24%,#d3d8e6 52%,#e6e9f2 76%,#fdfdff 100%);
  border:1px solid var(--silver-edge); border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(198,162,78,.22);
}

/* ---- the head is two columns again: henshin | facts ---- */
.senshi-art .dossier--noplate .dossier-head{
  grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:26px;
}
/* 200, not 230. The facts column is about 460px inside its padding, and
   auto-fill with a 230 floor needs 488 to seat two - so it seated one and the
   twelve facts became a single tall ribbon, which is the opposite of what
   moving the henshin frame up was for. 200 seats two with room. */
.senshi-art .dossier--noplate .dossier-head .stats--merged{
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:9px 24px;
}
.senshi-art .dossier-pose--head{ margin:0; }
.senshi-art .dossier-pose--head figure{ margin:0; }
.senshi-art .dossier-pose--head img,
.senshi-art .dossier-pose--head .ph{
  width:100%; height:auto; aspect-ratio:3/4;
  border:3px solid var(--backbow); box-shadow:6px 6px 0 var(--frontbow);
  background:#fffdf6;
}
.senshi-art .dossier-pose--head .pose-note{
  margin:10px 0 0; font-size:12px; line-height:1.5; font-style:italic;
  color:var(--ink); opacity:.72;
}

@media (max-width:760px){
  .senshi-art .masthead-name--lockup{ justify-content:flex-start; }
  /* nowrap is a desktop-only necessity and a phone-only bug. It exists because
     the titles box shrinks to its content up there, so a break would narrow the
     box and become permanent. Down here the box is already the full width
     (flex:1 1 100%), so nothing is gained by it - and at 390px the name is
     260px against 248px of room, so it simply hangs out past the edge. The
     right padding also goes: it was clearance for the crystal button, and with
     the type left-aligned the name never reaches that corner. */
  .senshi-art .masthead-name--lockup .bh-t{ white-space:normal; }
  .senshi-art .banner--plated .masthead-titles{ padding-right:0; }
  .senshi-art .banner--plated .masthead-titles::after{
    background:linear-gradient(90deg,
      var(--accent) 0%, var(--frontbow) 18%, var(--backbow) 40%,
      rgba(230,200,106,.30) 74%, rgba(230,200,106,0) 100%);
  }
  .senshi-art .dossier--noplate .dossier-head{ grid-template-columns:minmax(0,1fr); }
  .senshi-art .dossier-pose--head{ max-width:230px; }
}

/* ==========================================================================
   82. THE NAME COMES OFF THE PICTURE, AND PUTS ON THE FUKU   (10 Sep 2026)
   ==========================================================================
   Ashley: the text is covering the profile image; and the gradient is the
   landing page's - can we bring in more of her classic fuku colours.

   THE OVERLAP WAS TWO OF MY OWN RULES MEETING. Section 80 gave the titles
   min-width:0, so the box may shrink below its content. Section 81 gave the h1
   white-space:nowrap, so the content refuses to shrink. A flex item allowed to
   shrink past content that cannot shrink does not clip and does not wrap -
   with justify-content:flex-end it overflows BACKWARDS out of its own left
   edge, across the plate. Measured: 30px of crescent and 39px of name, at
   1280 and wider only, which is why sampling three widths missed it.

     the titles stop shrinking    flex:0 0 auto, min-width:auto
     the plate gives way instead  flex:0 1 auto, floor 240px - if the two
                                  cannot both fit, the picture eases down
                                  rather than the type walking over it
     the header takes its margins margin-inline:0, worth 56px of the shortfall

   THE GRADIENT. Her card has no blue and no red in it, and that is deliberate:
   palettes.py records Ashley's rule that "moon should always aim towards the
   more silver white palette", because the Silver Crystal, the Silver
   Millennium and Queen Serenity all pull one way and a primary-coloured card
   read her as Chibi Moon's sibling. Her eight beats are silver, pearl and
   gold - so the fuku's blue and red are exactly what is missing from them,
   and the name is the right place to put them back. Card silver, name in
   uniform.

     #1f4fa8  collar and skirt   7.66:1 on the card's white top stop
     #d81e3f  front bow          5.03:1
     #a8801f  tiara and brooch   3.64:1

   The gold is deepened on purpose: the true tiara gold #e6c15a is 1.73:1 there
   and would have faded out mid-word. 3.64 clears AA for large text, which a
   40px masthead is, and it is the final stop on the last letters.

   READ FROM VARIABLES, so the other seventeen profiles are three lines each
   rather than a rule each. The default below is the house plum-to-gold, so any
   page not yet converted keeps precisely what it has now. For the rest, the
   stops should come from the beats palettes.py already holds - skirt, frontbow
   and trim, read off the carddass scans - each run through its own
   darken_to() against that senshi's paper. Moon is the exception because her
   beats had the fuku colours taken out on purpose. */
.senshi-art{
  --name-a:#5A3268;
  --name-b:#6d4258;
  --name-c:#8b7137;
}
body.senshi--moon .senshi-art{
  --name-a:#1f4fa8;   /* collar and skirt */
  --name-b:#d81e3f;   /* front bow        */
  --name-c:#a8801f;   /* tiara and brooch */
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .senshi-art .masthead-name--lockup .bh-t{
    background:linear-gradient(96deg,
      var(--name-a) 0%, var(--name-b) 46%, var(--name-c) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
/* the crescent belongs to the same lockup, so it takes the last stop */
.senshi-art .masthead-name--lockup .bh-moon{ background:var(--name-c); }

/* ---- the geometry that keeps them apart ---- */
/* AND THE TITLES HAVE TO ASK FOR LESS, or "no overlap" is bought by squeezing
   the picture to its floor - which is the thing she asked me not to do. At
   1280 the header has 786px inside its padding and the titles were claiming
   495 of it (crescent 30, gap 16, name 403, button clearance 46), leaving the
   plate 240 against a 320 ceiling. Three trims, none of them visible:

     name ceiling  44 -> 40px    the name is 366 rather than 403
     gap ceiling   54 -> 36px    still generous between two large objects
     button gap    46 -> 12px    the header now has 34px of padding of its own
                                 since margin-inline:0 - together that is 46,
                                 which is what the clearance was in the first
                                 place. It was being paid twice.

   Titles now ask 424, the plate gets its full 320, and nothing is crushed. */
.senshi-art .banner--plated{
  margin-inline:0;
  gap:clamp(18px,3vw,36px);
}
.senshi-art .masthead-name--lockup .bh-t{ font-size:clamp(28px,3.6vw,40px); }
.senshi-art .banner--plated .masthead-titles{ padding-right:12px; }
.senshi-art .banner--plated .masthead-titles{
  flex:0 0 auto; min-width:auto;
}
.senshi-art .banner--plated .masthead-plate{
  flex:0 1 auto; min-width:240px;
}
@media (max-width:760px){
  .senshi-art .banner--plated .masthead-titles{ flex:1 1 100%; }
  .senshi-art .banner--plated .masthead-plate{ min-width:0; }
}

/* ==========================================================================
   83. THE PLANET GETS ITS PIXEL   (10 Sep 2026)
   ==========================================================================
   Ashley: add the corresponding pixel planet from the favicons page to the
   profile; for Sailor Moon use rabbitmoon.gif.

   IT GOES ON THE DOOR. The planet material here is two paragraphs and a link
   out to the planet's own page. A 40px pixel floated beside 300 words of prose
   reads as a mistake; the link is the one element that IS the planet, it
   already names it, and a pixel planet on a button reads as a door with a sign
   on it. It also templates exactly, since every profile has this same link.

   DRAWN AT 2x, EXACTLY. rabbitmoon.gif is 20x20 and is drawn at 40x40, so
   every source pixel becomes four screen pixels. Same discipline the chart
   wheel needed - a non-integer scale makes some pixel rows two screen-pixels
   tall and others one, and pixel art at 1.4x looks worse than at 1x. The
   dimensions live in the markup, not here, so the doubling is explicit per
   image: the solar-system sprites are 26x26 apart from Saturn (54x26, rings)
   and Uranus (26x34), and a square rule would squash both. */
/* .astro-door.astro-door--px, not .astro-door--px on its own, and the extra
   class is load-bearing. Section 1166-ish has
   `.senshi-art .dossier-card .astro-door{ display:inline-block }` - three
   classes - which outranks a two-class rule no matter how far below it sits.
   So my inline-flex never applied, the door stayed inline-block, and the
   display:block image simply broke the line: rabbit on top, caption
   underneath. Doubling the class here makes it three against three, and later
   wins the tie. Fourth time this stylesheet has caught me this way today. */
.senshi-art .astro-door.astro-door--px{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px 8px 10px;
}
.senshi-art .astro-door--px .planet-px,
.senshi-art .planet-px{
  display:block; flex:0 0 auto;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
/* the button inverts on hover and the sprite has its own colours, so it needs
   no treatment - but it does need to not pick up the link's underline or the
   inline-image baseline gap, hence display:block on it. */

/* ==========================================================================
   84. A LEGIBILITY FLOOR FOR RAINYHEARTS   (10 Sep 2026)
   ==========================================================================
   Ashley: that rainyhearts font is small and hard to read again - make it
   bigger or style it differently.

   THE SPECIMEN. Set at 7, 9, 10, 11, 12, 13, 14, 16, 18 and 24 at double
   device scale (which flatters it): unreadable at 7 and 9, marginal at 10 and
   11, workable at 13, comfortable from 14. It is a pixel font, so shrinking it
   does not thin strokes - it deletes them. Bowls close, crossbars merge into
   stems, 'a' and 'o' converge. At 1x every judgement above moves a step worse.

   THE RULE:

       rainyhearts is never set below 13px. Anything that must be smaller
       than 13px is not a rainyhearts job and takes the body face.

   Site-wide on purpose: these classes are shared by all eighteen profiles and
   the wing, so the floor lands everywhere at once instead of being redone per
   page during the rollout. */

/* ---- up to the floor ---- */
.senshi-art .astro-door{ font-size:14px; }
.senshi-art .jump-link{ font-size:14px; }
.senshi-art .km-kind{ font-size:13px; }
.senshi-art .dossier-head .stat dt{ font-size:13px; }
.senshi-art .thread-kind{ font-size:13px; }
.senshi-art .feature-kind{ font-size:13px; }
.senshi-art .thread-full,
.senshi-art .feature-full{ font-size:13px; }
.senshi-art .ka-n,
.senshi-art .ka-era{ font-size:14px; }
.senshi-art .era-name{ font-size:13px; }
/* .senshi-art .codex-strip-label, not the bare class: line 322 sets it with
   two classes and a bare one-class rule loses however far below it sits. The
   audit caught this - it was the one entry still reading 9px after the pass. */
.senshi-art .codex-strip-label{ font-size:13px; }

/* ---- and the two that cannot afford the floor change face instead ----
   A 7px placeholder caption inside a 56px frame is not a size a pixel font
   can hold - the letterforms have already collapsed by 9. The body face at 10
   with a little letterspacing is legible in the same space, and these are the
   only places on the page where rainyhearts was doing nothing but adding
   texture to a smudge. */
.senshi-art .ph-label{
  font-family:ui-sans-serif,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:10px; letter-spacing:.04em; opacity:.75;
}
.senshi-art .updated{
  font-family:ui-sans-serif,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:11px; letter-spacing:.03em;
}

@media (max-width:560px){
  /* the floor holds on phones too - it is a floor, not a desktop preference */
  .senshi-art .astro-door,
  .senshi-art .jump-link{ font-size:13px; }
}

/* ==========================================================================
   85. THE FUKU REACHES THE HEADINGS, AND A DOILY UNDER THE KIT   (10 Sep 2026)
   ==========================================================================
   Ashley: put the fuku gradient on "her kit" too; and can we tuck the console's
   scrolling doily in somewhere.

   THE HEADING. "her kit" paints through .bh-t, which is the same rule the
   masthead reads --name-a/b/c from - so .bh-t is pointed at those variables
   instead of carrying its own gradient. One change, and every lockup heading
   on a senshi profile takes that senshi's fuku.

   THE WING KEEPS THE HOUSE GRADIENT, and that is the point of doing it with
   variables. sailormoon.html is <body class="wing select"> with no senshi--
   class, so --name-a/b/c fall through to the plum-to-gold defaults: "the whole
   story", the five arc titles and the Naoko heading are untouched. A profile
   is one senshi and wears her colours; the wing is all of them and wears the
   site's.

   THE DOILY GOES UNDER "HER KIT" because that is the one section already built
   like a table with things laid on it - five opaque arc cards on bare paper
   with gutters between them. A doily's job is to go UNDER objects and show
   around their edges. Everywhere else here is either a single card, where
   there is nothing to see around, or running prose, where a pattern behind
   text is just noise.

   frost.png, NOT cloud-bold. Both tile, but cloud-bold is the flattened build
   made for the console's own problem - it had to sit under eleven loud
   character cards without competing, so its value spread was pulled to 4.2 and
   its saturation halved. Nothing competes with it here and the lace should
   read as lace: frost still has its scallops, its sparkles and its full
   pattern.

   140 SECONDS PER TILE, slower than the wing's 90s starfield, because this
   sits behind reading matter rather than behind a picture - anything you can
   catch moving from the corner of your eye while reading is too fast.

   SAFE BECAUSE THE CARDS ARE OPAQUE. .kitarc-body is #fefeff and .kitarc-h is
   a solid bar, so no text on this page ends up on the pattern; the lace shows
   only in the gutters and around the frame. Checked before adding it. */

/* ---- the lockup follows the senshi ---- */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .senshi-art .bh-t{
    background:linear-gradient(96deg,
      var(--name-a) 0%, var(--name-b) 42%, var(--name-c) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* ---- the doily ---- */
.senshi-art .kitframe{ position:relative; }
.senshi-art .kitframe > *{ position:relative; z-index:1; }
.senshi-art .kitframe::before{
  content:""; position:absolute; inset:0 0 8px; z-index:0; pointer-events:none;
  border-radius:10px;
  background:url("images/sailormoon/select/lace/frost.png") repeat 0 0;
  background-size:256px 190px;
  opacity:.55;
  animation:kit-doily 140s linear infinite;
}
@keyframes kit-doily{
  from{ background-position:0 0; }
  to  { background-position:256px 190px; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .kitframe::before{ animation:none; }
}

/* ==========================================================================
   86. THE SEASON LOGOS, LARGER AGAIN   (10 Sep 2026)
   ==========================================================================
   Ashley: the Japanese logos and the English hover should be slightly larger
   beside "Dark Kingdom".

   60 -> 70px on the desktop row, 44 -> 56 under 1000px, with the width floors
   moving to match: 150 -> 176 and 112 -> 140.

   BOTH IMAGES MOVE TOGETHER because the height is on the BOX, not on either
   picture. The two logos are stacked absolutely on top of each other and the
   hover cross-fades between them; sizing them separately would make the fade
   jump. Two numbers, not four.

   THE min-width IS LOAD-BEARING. Both images are position:absolute, so they
   contribute nothing to the box's width - without a floor the flex row
   collapses the logo slot to zero and the picture hangs outside it.

   AND 70 IS MEASURED, NOT GUESSED. The title row is 487px wide - it lives
   inside the arc panel, not across the page - and holds the 22px arc title at
   one end and the logo at the other. Swept 74/72/70/68/66/64/62: 74 breaks
   "Dark Kingdom" onto two lines, 72 holds one line with 21px of air, 70 holds
   with 25. 70 is the largest with margin to spare rather than the largest that
   technically fits, since Dark Kingdom is not the longest arc title. */
.senshi-art .arc-season-titlerow .arc-season-logo{
  height:70px; min-width:176px;
}
@media (max-width:1000px){
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:56px; min-width:140px; }
}
@media (max-width:760px){
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:44px; min-width:112px; }
}
/* AND THE 560 STEP HAS TO BE RE-STATED, or this bump breaks the phone. There
   is an existing @media (max-width:560px) further up setting 28px/88px, and a
   later 760px block overrides it at 390 because 390 matches BOTH and the later
   rule wins - which put a 112px logo in a 238px row and hung it 18px outside.
   Measured before and after: 84px and flush, against 112px and overhanging. 84
   is what actually fits a 238px row beside the title, so the phone step goes
   back to the size it had rather than to a compromise that still overhangs.
   Same source-order trap as the .nk-duo columns; the narrowest step always has
   to be restated last. */
@media (max-width:560px){
  .senshi-art .arc-season-titlerow .arc-season-logo{ height:30px; min-width:84px; }
}

/* ==========================================================================
   87. THE DOILY GOES IN A LAYER, AND THE STICKER GROWS AGAIN   (10 Sep 2026)
   ==========================================================================
   Ashley: the doily should maybe live one layer deeper as the background for
   the item windows - the current one is too visually loud. And Naoko's sticker
   slightly larger again.

   SHE IS RIGHT, AND IT IS AREA RATHER THAN OPACITY. Behind the kit frame the
   lace covered roughly 800 x 2300 - about 1.8 million pixels of moving
   pattern, most of it in gutters where the eye has nothing else to look at.
   Dimming it would have produced a large weak texture; the problem was the
   size of it.

   Inside the item windows it is the same lace at the same strength across
   about 4% of that area - twelve frames, 92px square - and it stops being
   wallpaper and becomes content: each window is a slot waiting for a
   photograph of that object, and a doily is what you would actually lay under
   a brooch or a wand to photograph it.

   THE DRIFT SLOWS, 140s -> 200s. A 256px tile inside a 92px window shows about
   a third of its pattern, so the same speed reads far faster there than it did
   across the section - and twelve of them move in step, which multiplies any
   liveliness.

   IT WILL NOT SURVIVE THE ITEM PHOTOGRAPHS, which is correct: these are
   placeholders, and when the twelve images arrive they fill the windows and
   take the lace with them. The doily is standing in for the thing that will
   sit on it. */

/* the big field comes off - removed, not dimmed */
.senshi-art .kitframe::before{ content:none; }

/* and the same lace goes into the windows.

   .kit-shot .ph--kitshot, three classes, because line 1645 already sets
   `background:#fffdf6` on exactly that selector - and it is the SHORTHAND,
   which resets background-image to none as part of doing its job. A two-class
   rule further down the file loses the specificity contest and its image never
   loads; the animation still ran, on nothing. background-color is set here
   separately for the same reason: reaching for the shorthand again would
   simply re-clear the image on the next edit. */
.senshi-art .kit-shot .ph--kitshot{
  position:relative; overflow:hidden;
  background-image:url("images/sailormoon/select/lace/frost.png");
  background-repeat:repeat;
  background-size:256px 190px;
  background-color:#fffdf6;
  animation:kit-doily 200s linear infinite;
}
.senshi-art .kit-shot .ph--kitshot .ph-mark{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){
  .senshi-art .kit-shot .ph--kitshot{ animation:none; }
}

/* ==========================================================================
   88. ELSEWHERE, REHOUSED   (10 Sep 2026)
   ==========================================================================
   Ashley: take elsewhere off the profile and put it on the wing, styled to
   match - not sure how to make it fit at the bottom.

   IT BELONGS HERE. Crystal, the English dub and the live-action show are three
   tellings of the SERIES; the paragraphs mention Usagi because she is in all
   three, not because they are facts about her. And no other senshi page has an
   #elsewhere - Mercury, Mars, Jupiter and Venus were all checked - so this is
   one orphan section that was on the wrong page, not the first of eighteen.

   HOW IT FITS AT THE BOTTOM, which was the actual question. On the profile it
   was three tall alternating rows, text and picture swapping sides. That works
   mid-page, where the reader has already committed. At the end of the wing -
   after the console, the plate, six chapters and Naoko - nobody is beginning a
   new long read, so the three rows become three cards side by side: picture
   slot, heading, paragraphs, all visible at once. A closing shelf rather than
   another chapter.

   AND IT IS STYLED FROM THE SECTION ABOVE IT, not from anything new. It sits
   under Naoko so it wears Naoko's furniture: the block-h--arcs lockup, an
   arc-lede, and cards in the same cream-to-white gradient with the same 1px
   border and 4px plum edge as .nk-notes-col. The last section of a page is the
   worst possible place to introduce a style. */
.senshi-art .elseframe{ padding:4px 28px 30px; }
.senshi-art .elsegrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; align-items:start; margin-top:6px;
}
.senshi-art .elsecard{
  display:flex; flex-direction:column; gap:12px;
  padding:14px 16px 16px; border-radius:0 10px 10px 0;
  background:linear-gradient(180deg,#f6f2fc 0%,#fdfcff 62%) no-repeat top/100% 90px, #fdfcff;
  border:1px solid var(--backbow); border-left:4px solid #5A3268;
}
.senshi-art .elsecard-shot .ph--elseshot{
  width:100%; aspect-ratio:4 / 3; padding:8px;
}
.senshi-art .elsecard-body .elsewhere-h{
  margin:0 0 8px; font-family:rainyhearts, monospace; font-size:16px;
  letter-spacing:.03em; color:var(--head);
}
.senshi-art .elsecard-body p{ margin:0 0 10px; font-size:14px; line-height:1.62; }
.senshi-art .elsecard-body p:last-child{ margin-bottom:0; }

/* 720, not 900. auto-fit with a 240px floor still seats three across at 900
   and two at 780 - forcing one column at 900 threw that away and made the
   section 1346px tall instead of 746. The grid is already doing the responsive
   work; the media query only needs to take over once even two columns stop
   fitting. */
@media (max-width:720px){
  .senshi-art .elseframe{ padding:4px 14px 24px; }
  .senshi-art .elsegrid{ grid-template-columns:minmax(0,1fr); }
  .senshi-art .elsecard-shot{ max-width:320px; }
}

/* ==========================================================================
   89. THE DOILY COMES OUT ONE LEVEL   (10 Sep 2026)
   ==========================================================================
   Ashley: one level too deep - put the background in the box WITH the text,
   the box holding the box I put it in. Give the text an opaque frame if needed.

   THE NESTING, named exactly:

     .kitarc-body        the white card holding all of an arc's items
       .ka-items         the grid
         .kit            <-- THE ITEM CARD. Picture and words together.
           .kit-shot > .ph--kitshot   <-- last attempt. Too deep.
           .kit-cap                   <-- the words

   In the 56px picture window the lace was a texture inside a frame that is
   about to be filled by a photograph. On the card it is what the whole object
   sits on, picture and caption together - which is what a doily under
   something actually looks like.

   THE PICTURE WINDOW GOES BACK TO PLAIN CREAM. Two patterns in nested boxes is
   one too many, and that window wants to read as an empty slot waiting for a
   photograph rather than as a decorated one.

   THE TEXT GETS ITS OWN GROUND, AND IT IS FULLY OPAQUE. I first set it at .93
   to let a hint of lace pass under the words; rendered, that was clearly
   wrong - the note is 12px at 90% opacity and the tile carries white scallops,
   so the pattern surfaced between the lines exactly where the eye wants a
   clean gap. Solid cream with a gold hairline. The lace shows in the margin
   around the panel, which is where a mat is meant to show, and contrast is
   measured against the panel rather than the pattern.

   AND THE CARD GAINS PADDING IT NEVER HAD. .kit was a bare flex row, so a
   background on it would have begun and ended flush against the picture and
   the text - which reads as a mistake, not as a mat. */

/* out of the window */
.senshi-art .kit-shot .ph--kitshot{
  background-image:none;
  background-color:#fffdf6;
  animation:none;
}

/* and onto the card */
.senshi-art .ka-items .kit{
  position:relative;
  align-items:flex-start;
  gap:11px; padding:10px; border-radius:9px;
  border:1px solid var(--backbow);
  background-image:url("images/sailormoon/select/lace/frost.png");
  background-repeat:repeat;
  background-size:256px 190px;
  background-color:#fffdf6;
  animation:kit-doily 200s linear infinite;
}
.senshi-art .ka-items .kit-cap{
  /* SOLID, not .93. I tried a hint of lace passing under the text and it was
     wrong: the note is 12px at 90% opacity and the tile has white scallops in
     it, so the pattern kept surfacing between the lines exactly where the eye
     wants a clean gap. She said an opaque frame if needed - it is needed.
     Fully opaque cream, and the lace does its work in the margin around the
     panel, which is where a mat is supposed to show. */
  background:#fffdf6;
  border:1px solid rgba(230,200,106,.45);
  border-radius:6px; padding:7px 9px;
  flex:1 1 auto; min-width:0;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .ka-items .kit{ animation:none; }
}

/* ==========================================================================
   90. THE MOVES BECOME CARDS, AND THE ARCS FOLD   (10 Sep 2026)
   ==========================================================================
   Ashley: give the powers and transformations the same treatment as the items
   - we will add a video or a thumbnail - and make each arc collapsible, all
   open on load.

   THE MOVES take the item card's shape: picture slot left, opaque text panel
   right, doily behind both. Two halves of an arc now read as one kind of
   object rather than two.

   THE SLOT IS 16:9 AND THE ITEM'S IS SQUARE, which is the only deliberate
   difference. An item slot holds a photograph of a brooch. These are going to
   hold a video or its thumbnail, and a 96x54 frame says so before anything is
   in it; a square would promise the wrong thing and need re-cutting later.

   THE FOLD is the wing's chapter mechanism - hidden checkbox, label over the
   heading, `:checked ~ .kitarc-body`. No JavaScript, survives print and save.
   Checked in the markup, so everything is open on arrival: five collapsed
   drawers would hide the whole section and make the reader work for it.

   THE H3 SURVIVES. The wing's chapters swapped their headings for plain
   labels; not repeating that here, because five arc names are this document's
   structure and a screen reader should still be able to list them. The label
   sits INSIDE the h3 and wraps its contents - still a heading, still a click
   target across the whole bar.

   AND THE ERA LINE STOPS DRAWING A HEART. "Sailor Moon &middot; 1992" has been
   rendering as "Sailor Moon (heart) 1992" on all five bars: rainyhearts has no
   U+00B7, fallback is per-glyph, and the character lands on a face that draws a
   heart. Fifth time on this site. .ka-era takes the body face, which has the
   glyph - and reads better at 14px than the pixel font did anyway. */

/* ---- the move cards ---- */
.senshi-art .km-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px 18px; list-style:none; margin:0; padding:0;
}
.senshi-art .ka-moves .km{
  display:flex; align-items:flex-start; gap:11px;
  margin:0; padding:10px; border-radius:9px;
  border:1px solid var(--backbow);
  background-image:url("images/sailormoon/select/lace/frost.png");
  background-repeat:repeat; background-size:256px 190px;
  background-color:#fffdf6;
  animation:kit-doily 200s linear infinite;
}
.senshi-art .km-shot{ flex:0 0 auto; }
.senshi-art .km-shot .ph--kmshot{
  width:96px; aspect-ratio:16 / 9; padding:6px;
  border:2px solid var(--backbow); background:#fffdf6;
}
.senshi-art .km-shot .ph--kmshot .ph-mark{ font-size:20px; }
.senshi-art .ka-moves .km-cap{
  display:flex; flex-direction:column; flex:1 1 auto; min-width:0;
  background:#fffdf6; border:1px solid rgba(230,200,106,.45);
  border-radius:6px; padding:7px 9px;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .ka-moves .km{ animation:none; }
}

/* ---- the fold ---- */
.senshi-art .ka-in{ position:absolute; opacity:0; width:0; height:0; }
.senshi-art .ka-lab{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  width:100%; cursor:pointer;
}
.senshi-art .kitarc-h:hover{ filter:brightness(1.08); }
/* margin-left:12px, NOT auto. .ka-era already carries margin-left:auto to push
   itself to the right end of the bar; a second auto margin on the caret makes
   the two of them SPLIT the free space, which parked the era line in the middle
   of the bar instead of at its end. One auto per row. */
.senshi-art .ka-caret{
  margin-left:12px; flex:0 0 auto;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:7px solid #f0e7cf;
  transition:transform .18s ease;
}
.senshi-art .ka-in:not(:checked) ~ .kitarc-h .ka-caret{ transform:rotate(-90deg); }
.senshi-art .ka-in:not(:checked) ~ .kitarc-body{ display:none; }
.senshi-art .ka-in:not(:checked) ~ .kitarc-h{ border-radius:7px; }
.senshi-art .ka-in:focus-visible ~ .kitarc-h{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .senshi-art .ka-caret{ transition:none; }
}

/* ---- and the heart ---- */
.senshi-art .ka-era{
  font-family:ui-sans-serif,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:13px; letter-spacing:.01em;
}

/* ==========================================================================
   91. THE MOVES TAKE THE CONSOLE'S OTHER DOILY   (10 Sep 2026)
   ==========================================================================
   Ashley: use the second doily from the console for the attacks and
   transformations.

   WHICH ONE. Only two of the files in that folder are actually running in the
   console: .sel-roster's ::before and ::after cross-fade tile24.gif, the
   lavender cloud-band lace, against tile25.gif, the blue one with stars. The
   item cards took frost.png, which is tile25's scallop pattern in a lilac
   colourway - so the second one, in the sense of visibly different rather than
   differently named, is tile24.

   Items in scalloped lilac lace, moves in lavender cloud-band: near enough to
   be the same material, different enough to tell an object from a technique
   without reading either.

   IT SCROLLS SIDEWAYS, which is what the console does with this exact tile,
   because the arcade select screen it quotes runs its doily horizontally. Same
   motion, much slower - the console cycles in 26s because it is a title
   screen; these take 220 because they sit under reading matter.

   128px PER STEP, NOT 256. tile24 is 128x224. The console uses -256 because it
   animates tile24 and tile25 together and 256 is a whole number of steps for
   both; here there is only one tile, so 128 is the shortest seamless loop.

   image-rendering:pixelated, as the console sets on these tiles - it is pixel
   art drawn at native size, and anything else smooths it to mush.

   THE TEXT PANEL IS UNCHANGED, still solid cream on a gold hairline. Whichever
   lace is behind it, the words keep their own ground.

   AND THE ARC BARS WALK THE FUKU. They were the house ramp - plum #5a3268 to
   gold #7a5f2c, the same one the wing gives its six chapters. Now they step
   through Usagi's own three stops, mixed at the midpoints, so arc 1 is her
   collar and arc 5 is her tiara.

   EVERY STEP IS DARKENED UNTIL IT CARRIES THE BAR INK. These bars hold two -
   the arc name in #fffdf7 and the number and era in #f0e7cf - and the raw fuku
   stops do not clear 4.5:1 against them: the red is 4.94/4.08 and the gold
   3.58/2.95. Each was pushed down with palettes.py's own darken_to() until
   both inks pass:

     1  #1f4fa8   7.53 / 6.21    the collar, already dark enough
     2  #7c3674   7.83 / 6.46    blue into red
     3  #cb1c3b   5.48 / 4.52    the front bow, deepened
     4  #ad472a   5.56 / 4.59    red into gold
     5  #826318   5.51 / 4.55    the tiara, deepened hard

   The gold's move from #a8801f to #826318 is the big one, and it is the same
   problem the masthead had: real tiara gold is a light colour and light
   colours cannot carry cream text. In the name it survives because the
   gradient ends there on two letters over a pale card; on a solid bar under
   white type it has to come down.

   SCOPED TO body.senshi--moon, so every profile not yet converted keeps the
   house ramp exactly as it is. */
body.senshi--moon .senshi-art .kitarc--1{ --ka-bar:#1f4fa8; }
body.senshi--moon .senshi-art .kitarc--2{ --ka-bar:#7c3674; }
body.senshi--moon .senshi-art .kitarc--3{ --ka-bar:#cb1c3b; }
body.senshi--moon .senshi-art .kitarc--4{ --ka-bar:#ad472a; }
body.senshi--moon .senshi-art .kitarc--5{ --ka-bar:#826318; }
.senshi-art .ka-moves .km{
  background-image:url("images/sailormoon/select/lace/tile24.gif");
  background-size:auto;
  background-position:0 0;
  image-rendering:pixelated;
  animation:km-doily 220s linear infinite;
}
/* the panel and the slot are not pixel art - the rendering hint stops here */
.senshi-art .ka-moves .km-cap,
.senshi-art .km-shot .ph--kmshot{ image-rendering:auto; }

@keyframes km-doily{
  from{ background-position:0 0; }
  to  { background-position:-128px 0; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .ka-moves .km{ animation:none; }
}

/* ==========================================================================
   93. THE BARS GET THEIR GRADIENT BACK   (10 Sep 2026)
   ==========================================================================
   Ashley: good on the fuku colouring for the arc-by-arc, but keep the gradient
   effect across the bar - you just colour-blocked each one.

   Correct, and that is literally what happened: I sampled the fuku gradient at
   five points and painted each bar its own flat sample. Right colours, effect
   gone.

   Each bar now carries a gradient, and the five are one gradient cut into five
   pieces - the last colour of each bar is the first colour of the next. Read
   down the section it is a single continuous sweep from collar blue to tiara
   gold; read one bar alone it has the same left-to-right gradient the headings
   have.

     1  #1f4fa8 -> #7c3674   collar into plum
     2  #7c3674 -> #cb1c3b   plum into the front bow
     3  #cb1c3b -> #ad472a   bow into rust
     4  #ad472a -> #826318   rust into the tiara
     5  #826318 -> #6b4f14   tiara into deep bronze

   A SIXTH COLOUR had to exist for bar 5 to have anywhere to go. #6b4f14 is the
   gold carried one step further down rather than a new hue, so the sweep ends
   by deepening instead of by stopping.

   AND CONTRAST IS CHECKED ALONG THE WHOLE BAR, not at its ends. A gradient's
   endpoints passing does not mean its middle does. Each bar is sampled at 21
   points against both bar inks - the name in #fffdf7 and the number and era in
   #f0e7cf - and the worst reading in the entire set is 4.52:1. The build
   refuses to write if that ever drops under AA. */
body.senshi--moon .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #1f4fa8 0%, #7c3674 100%);
}
body.senshi--moon .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #7c3674 0%, #cb1c3b 100%);
}
body.senshi--moon .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #cb1c3b 0%, #ad472a 100%);
}
body.senshi--moon .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #ad472a 0%, #826318 100%);
}
body.senshi--moon .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #826318 0%, #6b4f14 100%);
}

/* the flat --ka-bar fill is still there underneath as the fallback, so a
   browser that cannot paint the gradient gets the right solid colour rather
   than nothing */

/* ---- and the sticker lifts off the headline ----
   At 210px the heart's point had come down over "She drew the sky they were
   named for". Measured on the plate: the headline runs 70.4% to 74.0% and the
   heart's bottom was at 79.8%. It moves up to finish at 69.8%, just clear of
   the headline's first pixel - still overlapping the card, whose top edge is
   at 64%, and still missing the credit line, which ends at 19.6% across while
   the heart begins at 25.3%. Straddle kept, words uncovered. */

/* ==========================================================================
   94. THE SEASON ONE STILL   (10 Sep 2026)
   ==========================================================================
   Ashley: season 1 still, adjust as needed without crushing.

   IT IS NOT CROPPED, and that is measured rather than preferred. The slot was
   built 4:3; the picture is 760x700, or 1.086 to 1. Its content - everything
   that is not white - runs rows 3 to 699 and columns 22 to 759, so the artwork
   fills the frame with no margin to spare. A 4:3 cover-crop at full width
   needs 570px of height against the image's 700, which throws away 130px of
   real picture, and there is no good 130px: off the top it beheads the back
   row, off the bottom it eats the SAILORMOON logotype.

   So the slot gives way instead. A FILLED shot drops the fixed 4:3 and takes
   the image's own aspect - no cover eating the edges, no fill squashing it,
   and no contain leaving 35px of white gutter down each side.

   THE FIVE CARDS NEED NOT MATCH HERE. Each arc is its own row of the page, not
   a column in a grid, so a taller card 1 pushes nothing out of line. The four
   still-empty slots keep their 4:3 so they stay uniform with each other.

   A HEIGHT CEILING GOES ON ANYWAY: natural aspect with no cap means the next
   still, if it is a tall poster, builds a 900px card. 420px is about what this
   one occupies at desktop, so the cap costs nothing now and prevents a
   surprise later. */
.senshi-art .arc-season-shot--filled{
  aspect-ratio:auto;
  max-height:420px;
  background:#fff;
  display:block;
  padding:0;
}
.senshi-art .arc-season-shot--filled img{
  display:block; width:100%; height:auto;
  max-height:420px; object-fit:contain;
}
.senshi-art .arc-season-shot--filled figcaption{
  margin:0; padding:7px 8px 8px;
  font-family:rainyhearts, monospace; font-size:13px;
  letter-spacing:.04em; color:#9a94a6; text-align:center;
  background:#fff;
}

/* ==========================================================================
   96. TWENTY-FOUR FUKU GRADIENTS   (10 Sep 2026)
   ==========================================================================
Ashley: "I like your fuku gradient. Apply that same logic when updating the
other pages" - and, earlier, "each senshi will share this template, so any
gradient effects will need to be adjusted to match the senshi. I believe they
might already have palettes."

They do. palettes.py holds eight beats per character read off the carddass
scans, and three of them are the fuku's own three-part read - SKIRT, FRONT BOW,
TRIM - which is exactly the blue/red/gold Usagi's gradient walks. So this is not
twenty-four design decisions, it is one rule applied twenty-four times.

THE RULE: DEEP, MID, BRIGHT.
Usagi's hand-tuned stops measure 7.66 / 5.03 / 3.64 against her paper - a
descending ladder, deep at the first letter and bright at the last. Every other
senshi is staged onto the same ladder: her skirt deep, her front bow mid, her
trim bright, each keeping its own hue and each measured against HER OWN paper,
because the same red is not the same red on Mars's warm page and Pluto's violet
one.

HONEST FIRST, ADJUSTED ONLY AS NEEDED. A beat that already carries at its rung
is left exactly as the palette states it - so Mars keeps her true purple front
bow #7f4998, Venus her navy #1b2a6b, Uranus her true navy skirt #010928 and
Tuxedo Mask his red #d81f2c. A stop moves only for one of two reasons: it
cannot carry text at that size (Uranus's #ffff01 front bow is 1.06:1 and would
vanish), or it is so close to its neighbour that the gradient reads as one flat
colour. Nothing is moved for taste.

TWO LADDERS, AND THE SCRIPT PICKS. Characters whose three beats are three
different hues - Jupiter's green/pink/green, Venus's gold/navy/gold - separate
on hue alone and do well on a 6.5/4.6/3.4 ladder. Characters who are one colour
all the way down - Helios is gold, gold and gold; so are Luna, Artemis and
Galaxia - have nothing but value to separate with, and need the wider
9.0/5.0/3.2. Rather than guess which is which, both are computed and the one
with the greater minimum separation wins. Deterministic, and it explains
itself in the printout.

PALE BEATS KEEP THEIR CHROMA. Mercury's front bow is #bcfaff, nearly white.
Multiplying it toward black - which is what the palette's own darken_to() does -
lands on grey, because a pale colour has little chroma to carry down. Deepening
in HSL with a saturation floor instead gives a deep ICE BLUE, which is what her
bow actually is. The floor applies only to beats lighter than 70% and never
touches a colour that is already dark or already a true neutral.

THE ARC BARS come from the same three stops, exactly as Usagi's do: one
continuous sweep cut into as many pieces as the character has arcs, the last
colour of each bar the first colour of the next. A character with one arc gets
one bar carrying the whole fuku; a character with five gets Usagi's five-piece
sweep. And every bar is sampled at 21 POINTS against BOTH bar inks, because a
gradient whose ends pass can still fail in the middle - the build refuses to
write if anything measures under 4.5:1. */

/* mercury     skirt #004ea0  bow #03727a  trim #007ddc   6.49 / 4.57 / 3.40 on #cfeaff   ladder (6.5, 4.6, 3.4), separation 77 */
body.senshi--mercury .senshi-art{
  --name-a:#004ea0;
  --name-b:#03727a;
  --name-c:#007ddc;
}
body.senshi--mercury .senshi-art .kitarc--1{ --ka-bar:#004ea0; }
body.senshi--mercury .senshi-art .kitarc--2{ --ka-bar:#015c91; }
body.senshi--mercury .senshi-art .kitarc--3{ --ka-bar:#026b82; }
body.senshi--mercury .senshi-art .kitarc--4{ --ka-bar:#026f88; }
body.senshi--mercury .senshi-art .kitarc--5{ --ka-bar:#016da3; }
body.senshi--mercury .senshi-art .kitarc--all{ --ka-bar:#004ea0; }
body.senshi--mercury .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #004ea0 0%, #015c91 100%);
}
body.senshi--mercury .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #015c91 0%, #026b82 100%);
}
body.senshi--mercury .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #026b82 0%, #026f88 100%);
}
body.senshi--mercury .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #026f88 0%, #016da3 100%);
}
body.senshi--mercury .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #016da3 0%, #005494 100%);
}
body.senshi--mercury .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #004ea0 0%, #005494 100%);
}

/* mars        skirt #6a1d0f  bow #7c4895  trim #9b770c   8.94 / 4.99 / 3.19 on #ffd9cd   ladder (9.0, 5.0, 3.2), separation 195 */
body.senshi--mars .senshi-art{
  --name-a:#6a1d0f;
  --name-b:#7c4895;
  --name-c:#9b770c;
}
body.senshi--mars .senshi-art .kitarc--1{ --ka-bar:#6a1d0f; }
body.senshi--mars .senshi-art .kitarc--2{ --ka-bar:#712e45; }
body.senshi--mars .senshi-art .kitarc--3{ --ka-bar:#783f7a; }
body.senshi--mars .senshi-art .kitarc--4{ --ka-bar:#82517a; }
body.senshi--mars .senshi-art .kitarc--5{ --ka-bar:#865e3f; }
body.senshi--mars .senshi-art .kitarc--all{ --ka-bar:#6a1d0f; }
body.senshi--mars .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #6a1d0f 0%, #712e45 100%);
}
body.senshi--mars .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #712e45 0%, #783f7a 100%);
}
body.senshi--mars .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #783f7a 0%, #82517a 100%);
}
body.senshi--mars .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #82517a 0%, #865e3f 100%);
}
body.senshi--mars .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #865e3f 0%, #685008 100%);
}
body.senshi--mars .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #6a1d0f 0%, #685008 100%);
}

/* jupiter     skirt #135c04  bow #c30a76  trim #1a8f02   6.55 / 4.62 / 3.37 on #cdeed3   ladder (6.5, 4.6, 3.4), separation 372 */
body.senshi--jupiter .senshi-art{
  --name-a:#135c04;
  --name-b:#c30a76;
  --name-c:#1a8f02;
}
body.senshi--jupiter .senshi-art .kitarc--1{ --ka-bar:#135c04; }
body.senshi--jupiter .senshi-art .kitarc--2{ --ka-bar:#593b32; }
body.senshi--jupiter .senshi-art .kitarc--3{ --ka-bar:#a01a5f; }
body.senshi--jupiter .senshi-art .kitarc--4{ --ka-bar:#a1255f; }
body.senshi--jupiter .senshi-art .kitarc--5{ --ka-bar:#5e5a30; }
body.senshi--jupiter .senshi-art .kitarc--all{ --ka-bar:#135c04; }
body.senshi--jupiter .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #135c04 0%, #593b32 100%);
}
body.senshi--jupiter .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #593b32 0%, #a01a5f 100%);
}
body.senshi--jupiter .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #a01a5f 0%, #a1255f 100%);
}
body.senshi--jupiter .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #a1255f 0%, #5e5a30 100%);
}
body.senshi--jupiter .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #5e5a30 0%, #116002 100%);
}
body.senshi--jupiter .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #135c04 0%, #116002 100%);
}

/* venus       skirt #6b4c00  bow #1b2a6b  trim #947b00   6.51 / 10.89 / 3.40 on #ffe7b0   ladder (6.5, 4.6, 3.4), separation 221 */
body.senshi--venus .senshi-art{
  --name-a:#6b4c00;
  --name-b:#1b2a6b;
  --name-c:#947b00;
}
body.senshi--venus .senshi-art .kitarc--1{ --ka-bar:#6b4c00; }
body.senshi--venus .senshi-art .kitarc--2{ --ka-bar:#4b3e2b; }
body.senshi--venus .senshi-art .kitarc--3{ --ka-bar:#2b3156; }
body.senshi--venus .senshi-art .kitarc--4{ --ka-bar:#333a56; }
body.senshi--venus .senshi-art .kitarc--5{ --ka-bar:#645b2b; }
body.senshi--venus .senshi-art .kitarc--all{ --ka-bar:#6b4c00; }
body.senshi--venus .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #6b4c00 0%, #4b3e2b 100%);
}
body.senshi--venus .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #4b3e2b 0%, #2b3156 100%);
}
body.senshi--venus .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #2b3156 0%, #333a56 100%);
}
body.senshi--venus .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #333a56 0%, #645b2b 100%);
}
body.senshi--venus .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #645b2b 0%, #635300 100%);
}
body.senshi--venus .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #6b4c00 0%, #635300 100%);
}

/* uranus      skirt #010928  bow #616100  trim #0148a4   13.90 / 4.63 / 6.04 on #dcdcae   ladder (6.5, 4.6, 3.4), separation 224 */
body.senshi--uranus .senshi-art{
  --name-a:#010928;
  --name-b:#616100;
  --name-c:#0148a4;
}
body.senshi--uranus .senshi-art .kitarc--1{ --ka-bar:#010928; }
body.senshi--uranus .senshi-art .kitarc--2{ --ka-bar:#41440d; }
body.senshi--uranus .senshi-art .kitarc--3{ --ka-bar:#415937; }
body.senshi--uranus .senshi-art .kitarc--all{ --ka-bar:#010928; }
body.senshi--uranus .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #010928 0%, #41440d 100%);
}
body.senshi--uranus .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #41440d 0%, #415937 100%);
}
body.senshi--uranus .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #415937 0%, #013b86 100%);
}
body.senshi--uranus .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #010928 0%, #013b86 100%);
}

/* neptune     skirt #004752  bow #0e208b  trim #1e8368   7.55 / 9.56 / 3.39 on #b6e6d6   ladder (6.5, 4.6, 3.4), separation 110 */
body.senshi--neptune .senshi-art{
  --name-a:#004752;
  --name-b:#0e208b;
  --name-c:#1e8368;
}
body.senshi--neptune .senshi-art .kitarc--1{ --ka-bar:#004752; }
body.senshi--neptune .senshi-art .kitarc--2{ --ka-bar:#092d78; }
body.senshi--neptune .senshi-art .kitarc--3{ --ka-bar:#13417f; }
body.senshi--neptune .senshi-art .kitarc--all{ --ka-bar:#004752; }
body.senshi--neptune .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #004752 0%, #092d78 100%);
}
body.senshi--neptune .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #092d78 0%, #13417f 100%);
}
body.senshi--neptune .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #13417f 0%, #155e4b 100%);
}
body.senshi--neptune .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #004752 0%, #155e4b 100%);
}

/* pluto       skirt #171219  bow #66202d  trim #c8152e   11.79 / 7.41 / 3.72 on #ddc7e8   ladder (6.5, 4.6, 3.4), separation 110 */
body.senshi--pluto .senshi-art{
  --name-a:#171219;
  --name-b:#66202d;
  --name-c:#c8152e;
}
body.senshi--pluto .senshi-art .kitarc--1{ --ka-bar:#171219; }
body.senshi--pluto .senshi-art .kitarc--2{ --ka-bar:#3e1923; }
body.senshi--pluto .senshi-art .kitarc--3{ --ka-bar:#66202d; }
body.senshi--pluto .senshi-art .kitarc--4{ --ka-bar:#971a2e; }
body.senshi--pluto .senshi-art .kitarc--all{ --ka-bar:#171219; }
body.senshi--pluto .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #171219 0%, #3e1923 100%);
}
body.senshi--pluto .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #3e1923 0%, #66202d 100%);
}
body.senshi--pluto .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #66202d 0%, #971a2e 100%);
}
body.senshi--pluto .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #971a2e 0%, #a41126 100%);
}
body.senshi--pluto .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #171219 0%, #a41126 100%);
}

/* saturn      skirt #3b2d8a  bow #4a1a14  trim #8446cd   6.61 / 8.79 / 3.41 on #cfc4ea   ladder (6.5, 4.6, 3.4), separation 152 */
body.senshi--saturn .senshi-art{
  --name-a:#3b2d8a;
  --name-b:#4a1a14;
  --name-c:#8446cd;
}
body.senshi--saturn .senshi-art .kitarc--1{ --ka-bar:#3b2d8a; }
body.senshi--saturn .senshi-art .kitarc--2{ --ka-bar:#45203b; }
body.senshi--saturn .senshi-art .kitarc--3{ --ka-bar:#5d2952; }
body.senshi--saturn .senshi-art .kitarc--all{ --ka-bar:#3b2d8a; }
body.senshi--saturn .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #3b2d8a 0%, #45203b 100%);
}
body.senshi--saturn .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #45203b 0%, #5d2952 100%);
}
body.senshi--saturn .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #5d2952 0%, #6a39a5 100%);
}
body.senshi--saturn .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #3b2d8a 0%, #6a39a5 100%);
}

/* chibimoon   skirt #6a1b39  bow #b4233e  trim #f60665   8.94 / 5.03 / 3.19 on #ffd9e9   ladder (9.0, 5.0, 3.2), separation 87 */
body.senshi--chibimoon .senshi-art{
  --name-a:#6a1b39;
  --name-b:#b4233e;
  --name-c:#f60665;
}
body.senshi--chibimoon .senshi-art .kitarc--1{ --ka-bar:#6a1b39; }
body.senshi--chibimoon .senshi-art .kitarc--2{ --ka-bar:#8f1f3c; }
body.senshi--chibimoon .senshi-art .kitarc--3{ --ka-bar:#b4233e; }
body.senshi--chibimoon .senshi-art .kitarc--4{ --ka-bar:#c8134d; }
body.senshi--chibimoon .senshi-art .kitarc--all{ --ka-bar:#6a1b39; }
body.senshi--chibimoon .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #6a1b39 0%, #8f1f3c 100%);
}
body.senshi--chibimoon .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #8f1f3c 0%, #b4233e 100%);
}
body.senshi--chibimoon .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #b4233e 0%, #c8134d 100%);
}
body.senshi--chibimoon .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #c8134d 0%, #a60444 100%);
}
body.senshi--chibimoon .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #6a1b39 0%, #a60444 100%);
}

/* tuxedomask  skirt #101728  bow #c91d29  trim #9a761b   14.42 / 4.59 / 3.40 on #f0e4e6   ladder (6.5, 4.6, 3.4), separation 150 */
body.senshi--tuxedomask .senshi-art{
  --name-a:#101728;
  --name-b:#c91d29;
  --name-c:#9a761b;
}
body.senshi--tuxedomask .senshi-art .kitarc--1{ --ka-bar:#101728; }
body.senshi--tuxedomask .senshi-art .kitarc--2{ --ka-bar:#5a1928; }
body.senshi--tuxedomask .senshi-art .kitarc--3{ --ka-bar:#a41c29; }
body.senshi--tuxedomask .senshi-art .kitarc--4{ --ka-bar:#c02f26; }
body.senshi--tuxedomask .senshi-art .kitarc--5{ --ka-bar:#a34d1f; }
body.senshi--tuxedomask .senshi-art .kitarc--all{ --ka-bar:#101728; }
body.senshi--tuxedomask .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #101728 0%, #5a1928 100%);
}
body.senshi--tuxedomask .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #5a1928 0%, #a41c29 100%);
}
body.senshi--tuxedomask .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #a41c29 0%, #c02f26 100%);
}
body.senshi--tuxedomask .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #c02f26 0%, #a34d1f 100%);
}
body.senshi--tuxedomask .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #a34d1f 0%, #675012 100%);
}
body.senshi--tuxedomask .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #101728 0%, #675012 100%);
}

/* helios      skirt #4b3d17  bow #79611d  trim #9f7f25   8.98 / 5.02 / 3.21 on #f4ecd2   ladder (9.0, 5.0, 3.2), separation 76 */
body.senshi--helios .senshi-art{
  --name-a:#4b3d17;
  --name-b:#79611d;
  --name-c:#9f7f25;
}
body.senshi--helios .senshi-art .kitarc--1{ --ka-bar:#4b3d17; }
body.senshi--helios .senshi-art .kitarc--all{ --ka-bar:#4b3d17; }
body.senshi--helios .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #4b3d17 0%, #665118 100%);
}
body.senshi--helios .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #4b3d17 0%, #665118 100%);
}

/* ceres       skirt #7e123f  bow #c1245c  trim #e25085   8.95 / 4.98 / 3.20 on #ffeaf3   ladder (9.0, 5.0, 3.2), separation 114 */
body.senshi--ceres .senshi-art{
  --name-a:#7e123f;
  --name-b:#c1245c;
  --name-c:#e25085;
}
body.senshi--ceres .senshi-art .kitarc--1{ --ka-bar:#7e123f; }
body.senshi--ceres .senshi-art .kitarc--2{ --ka-bar:#c1245c; }
body.senshi--ceres .senshi-art .kitarc--all{ --ka-bar:#7e123f; }
body.senshi--ceres .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #7e123f 0%, #c1245c 100%);
}
body.senshi--ceres .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #c1245c 0%, #8d3253 100%);
}
body.senshi--ceres .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #7e123f 0%, #8d3253 100%);
}

/* pallas      skirt #144663  bow #2b6c9d  trim #308fca   8.98 / 5.01 / 3.17 on #e6f4fd   ladder (9.0, 5.0, 3.2), separation 85 */
body.senshi--pallas .senshi-art{
  --name-a:#144663;
  --name-b:#2b6c9d;
  --name-c:#308fca;
}
body.senshi--pallas .senshi-art .kitarc--1{ --ka-bar:#144663; }
body.senshi--pallas .senshi-art .kitarc--2{ --ka-bar:#2a6a9a; }
body.senshi--pallas .senshi-art .kitarc--all{ --ka-bar:#144663; }
body.senshi--pallas .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #144663 0%, #2a6a9a 100%);
}
body.senshi--pallas .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #2a6a9a 0%, #1e577a 100%);
}
body.senshi--pallas .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #144663 0%, #1e577a 100%);
}

/* juno        skirt #324917  bow #477225  trim #619437   8.91 / 5.06 / 3.23 on #eaf6dc   ladder (9.0, 5.0, 3.2), separation 76 */
body.senshi--juno .senshi-art{
  --name-a:#324917;
  --name-b:#477225;
  --name-c:#619437;
}
body.senshi--juno .senshi-art .kitarc--1{ --ka-bar:#324917; }
body.senshi--juno .senshi-art .kitarc--2{ --ka-bar:#477225; }
body.senshi--juno .senshi-art .kitarc--all{ --ka-bar:#324917; }
body.senshi--juno .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #324917 0%, #477225 100%);
}
body.senshi--juno .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #477225 0%, #3d5c22 100%);
}
body.senshi--juno .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #324917 0%, #3d5c22 100%);
}

/* vesta       skirt #781f11  bow #b8362a  trim #dd5a41   8.99 / 5.00 / 3.21 on #ffe9e2   ladder (9.0, 5.0, 3.2), separation 96 */
body.senshi--vesta .senshi-art{
  --name-a:#781f11;
  --name-b:#b8362a;
  --name-c:#dd5a41;
}
body.senshi--vesta .senshi-art .kitarc--1{ --ka-bar:#781f11; }
body.senshi--vesta .senshi-art .kitarc--2{ --ka-bar:#b8362a; }
body.senshi--vesta .senshi-art .kitarc--all{ --ka-bar:#781f11; }
body.senshi--vesta .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #781f11 0%, #b8362a 100%);
}
body.senshi--vesta .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #b8362a 0%, #8d392a 100%);
}
body.senshi--vesta .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #781f11 0%, #8d392a 100%);
}

/* fighter     skirt #20233a  bow #9b2336  trim #d52441   9.79 / 4.97 / 3.21 on #d2ccd6   ladder (9.0, 5.0, 3.2), separation 70 */
body.senshi--fighter .senshi-art{
  --name-a:#20233a;
  --name-b:#9b2336;
  --name-c:#d52441;
}
body.senshi--fighter .senshi-art .kitarc--1{ --ka-bar:#20233a; }
body.senshi--fighter .senshi-art .kitarc--all{ --ka-bar:#20233a; }
body.senshi--fighter .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #20233a 0%, #a11b31 100%);
}
body.senshi--fighter .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #20233a 0%, #a11b31 100%);
}

/* maker       skirt #241f3a  bow #6f2fb4  trim #914cdd   10.27 / 4.99 / 3.19 on #d3cee0   ladder (9.0, 5.0, 3.2), separation 104 */
body.senshi--maker .senshi-art{
  --name-a:#241f3a;
  --name-b:#6f2fb4;
  --name-c:#914cdd;
}
body.senshi--maker .senshi-art .kitarc--1{ --ka-bar:#241f3a; }
body.senshi--maker .senshi-art .kitarc--all{ --ka-bar:#241f3a; }
body.senshi--maker .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #241f3a 0%, #6b38a3 100%);
}
body.senshi--maker .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #241f3a 0%, #6b38a3 100%);
}

/* healer      skirt #1c2a26  bow #1a6144  trim #26835d   10.19 / 5.06 / 3.20 on #cdd8d2   ladder (9.0, 5.0, 3.2), separation 71 */
body.senshi--healer .senshi-art{
  --name-a:#1c2a26;
  --name-b:#1a6144;
  --name-c:#26835d;
}
body.senshi--healer .senshi-art .kitarc--1{ --ka-bar:#1c2a26; }
body.senshi--healer .senshi-art .kitarc--all{ --ka-bar:#1c2a26; }
body.senshi--healer .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #1c2a26 0%, #1b5e43 100%);
}
body.senshi--healer .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #1c2a26 0%, #1b5e43 100%);
}

/* kakyuu      skirt #71201a  bow #a94021  trim #c5691f   8.98 / 5.02 / 3.19 on #ffe4d2   ladder (9.0, 5.0, 3.2), separation 71 */
body.senshi--kakyuu .senshi-art{
  --name-a:#71201a;
  --name-b:#a94021;
  --name-c:#c5691f;
}
body.senshi--kakyuu .senshi-art .kitarc--1{ --ka-bar:#71201a; }
body.senshi--kakyuu .senshi-art .kitarc--all{ --ka-bar:#71201a; }
body.senshi--kakyuu .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #71201a 0%, #7e4314 100%);
}
body.senshi--kakyuu .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #71201a 0%, #7e4314 100%);
}

/* luna        skirt #14121f  bow #6e510e  trim #906e14   12.55 / 5.01 / 3.22 on #d8d2e4   ladder (9.0, 5.0, 3.2), separation 69 */
body.senshi--luna .senshi-art{
  --name-a:#14121f;
  --name-b:#6e510e;
  --name-c:#906e14;
}
body.senshi--luna .senshi-art .kitarc--1{ --ka-bar:#14121f; }
body.senshi--luna .senshi-art .kitarc--2{ --ka-bar:#382b18; }
body.senshi--luna .senshi-art .kitarc--3{ --ka-bar:#5c4411; }
body.senshi--luna .senshi-art .kitarc--4{ --ka-bar:#75570f; }
body.senshi--luna .senshi-art .kitarc--5{ --ka-bar:#826212; }
body.senshi--luna .senshi-art .kitarc--all{ --ka-bar:#14121f; }
body.senshi--luna .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #14121f 0%, #382b18 100%);
}
body.senshi--luna .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #382b18 0%, #5c4411 100%);
}
body.senshi--luna .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #5c4411 0%, #75570f 100%);
}
body.senshi--luna .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #75570f 0%, #826212 100%);
}
body.senshi--luna .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #826212 0%, #68500f 100%);
}
body.senshi--luna .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #14121f 0%, #68500f 100%);
}

/* artemis     skirt #2f3948  bow #78590f  trim #997716   8.96 / 4.99 / 3.22 on #dbe2ee   ladder (9.0, 5.0, 3.2), separation 70 */
body.senshi--artemis .senshi-art{
  --name-a:#2f3948;
  --name-b:#78590f;
  --name-c:#997716;
}
body.senshi--artemis .senshi-art .kitarc--1{ --ka-bar:#2f3948; }
body.senshi--artemis .senshi-art .kitarc--2{ --ka-bar:#4c4631; }
body.senshi--artemis .senshi-art .kitarc--3{ --ka-bar:#69531a; }
body.senshi--artemis .senshi-art .kitarc--4{ --ka-bar:#7f5f10; }
body.senshi--artemis .senshi-art .kitarc--5{ --ka-bar:#816211; }
body.senshi--artemis .senshi-art .kitarc--all{ --ka-bar:#2f3948; }
body.senshi--artemis .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #2f3948 0%, #4c4631 100%);
}
body.senshi--artemis .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #4c4631 0%, #69531a 100%);
}
body.senshi--artemis .senshi-art .kitarc--3 .kitarc-h{
  background:linear-gradient(90deg, #69531a 0%, #7f5f10 100%);
}
body.senshi--artemis .senshi-art .kitarc--4 .kitarc-h{
  background:linear-gradient(90deg, #7f5f10 0%, #816211 100%);
}
body.senshi--artemis .senshi-art .kitarc--5 .kitarc-h{
  background:linear-gradient(90deg, #816211 0%, #66500f 100%);
}
body.senshi--artemis .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #2f3948 0%, #66500f 100%);
}

/* diana       skirt #3a324a  bow #a62a62  trim #a95abc   8.99 / 4.99 / 3.20 on #e2dbee   ladder (9.0, 5.0, 3.2), separation 140 */
body.senshi--diana .senshi-art{
  --name-a:#3a324a;
  --name-b:#a62a62;
  --name-c:#a95abc;
}
body.senshi--diana .senshi-art .kitarc--1{ --ka-bar:#3a324a; }
body.senshi--diana .senshi-art .kitarc--2{ --ka-bar:#a62a62; }
body.senshi--diana .senshi-art .kitarc--all{ --ka-bar:#3a324a; }
body.senshi--diana .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #3a324a 0%, #a62a62 100%);
}
body.senshi--diana .senshi-art .kitarc--2 .kitarc-h{
  background:linear-gradient(90deg, #a62a62 0%, #743e82 100%);
}
body.senshi--diana .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #3a324a 0%, #743e82 100%);
}

/* galaxia     skirt #641a14  bow #79540e  trim #9d710c   9.05 / 4.98 / 3.20 on #efd9c2   ladder (9.0, 5.0, 3.2), separation 67 */
body.senshi--galaxia .senshi-art{
  --name-a:#641a14;
  --name-b:#79540e;
  --name-c:#9d710c;
}
body.senshi--galaxia .senshi-art .kitarc--1{ --ka-bar:#641a14; }
body.senshi--galaxia .senshi-art .kitarc--all{ --ka-bar:#641a14; }
body.senshi--galaxia .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #641a14 0%, #6c4e08 100%);
}
body.senshi--galaxia .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #641a14 0%, #6c4e08 100%);
}

/* cosmos      skirt #3e3076  bow #7152a0  trim #966ec4   9.02 / 4.98 / 3.20 on #e8e6f2   ladder (9.0, 5.0, 3.2), separation 101 */
body.senshi--cosmos .senshi-art{
  --name-a:#3e3076;
  --name-b:#7152a0;
  --name-c:#966ec4;
}
body.senshi--cosmos .senshi-art .kitarc--1{ --ka-bar:#3e3076; }
body.senshi--cosmos .senshi-art .kitarc--all{ --ka-bar:#3e3076; }
body.senshi--cosmos .senshi-art .kitarc--1 .kitarc-h{
  background:linear-gradient(90deg, #3e3076 0%, #624881 100%);
}
body.senshi--cosmos .senshi-art .kitarc--all .kitarc-h{
  background:linear-gradient(90deg, #3e3076 0%, #624881 100%);
}

/* ==========================================================================
   97. TWENTY-FOUR MASTHEAD PLATES, AND THE TEMPLATE'S LOOSE ENDS  (10 Sep 2026)
   ==========================================================================

WHY THIS EXISTS AT ALL: the first render of the converted pages was wrong and
the screenshot said so immediately. Usagi's masthead is a pale silvery panel, so
her name gradient - measured against her paper - reads beautifully on it. Every
other senshi's masthead falls through to `.banner{ background:var(--skirt) }`,
and most skirts are DEEP: Mercury's is #005cbb. Her deep-blue lockup was sitting
on a deep-blue band.

Ashley asked for the silvery gradient on Usagi's masthead. The equivalent for
everyone else is not silver - it is the same PLATE, pearlised in her own
colours: white at the edges, her wash through the middle, a metallic hairline
off her trim and the same offset shadow. Twenty-four pale plates, each
unmistakably that character's, and the fuku lockup reads on all of them because
the gradient stops are now measured against the darkest band of the plate
rather than against the page.

THE OTHER FOUR RULES here are the template's own loose ends, all of them found
by rendering rather than by reading:

  - THE TITLES GET A CEILING. Galaxia's catchphrase is one long line and the
    titles column is sized to max-content, so it grew to 797px and shoved the
    plate 19px off the left edge of the page. A max-width lets a long cry wrap
    instead of pushing the picture out of the room.

  - THE CARDDASS KEEPS ITS OWN SHAPE. The pose slot forces aspect-ratio 3/4,
    which is right for a placeholder and wrong for a photograph - the carddass
    scans are not all 3:4 and would have been squashed to fit.

  - "AND THROUGHOUT" gets the same bar as an arc but no number, because it is
    not one. Its numeral slot would have wanted a star, and rainyhearts has no
    U+2606 - which on this site means the glyph falls through the stack and
    comes back as a heart. Sixth time. Simply omitting it is better than
    fighting the font.

  - AND THE DOILY REACHES THE NEW BOXES. .kitframe::before was written for
    Usagi's page and applies to every profile that now has a #kit. */

/* ---- the plates ---- */
body.senshi--mercury .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fbfdff 0%, #e7f5ff 24%, #cfeaff 52%, #e0f2ff 76%, #fcfeff 100%);
  border:1px solid #61b3f1; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(0,132,233,.22);
}
body.senshi--mars .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fffbfa 0%, #ffebe5 24%, #ffd9cd 52%, #ffe6de 76%, #fffcfb 100%);
  border:1px solid #f6da85; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(240,195,58,.22);
}
body.senshi--jupiter .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fbfdfb 0%, #e6f6e9 24%, #cdeed3 52%, #dff4e2 76%, #fcfefc 100%);
  border:1px solid #75d163; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(33,181,3,.22);
}
body.senshi--venus .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fffdf9 0%, #fff3da 24%, #ffe7b0 52%, #fff0cd 76%, #fffefa 100%);
  border:1px solid #f9e061; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(245,205,0,.22);
}
body.senshi--uranus .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fefef9 0%, #f1f1d9 24%, #dcdcae 52%, #ebebcc 76%, #fefefa 100%);
  border:1px solid #628ec7; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(1,72,164,.22);
}
body.senshi--neptune .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fafffd 0%, #ddf6ee 24%, #b6e6d6 52%, #d1f1e7 76%, #fbfffe 100%);
  border:1px solid #7cd7bf; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(43,190,151,.22);
}
body.senshi--pluto .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fefbff 0%, #f2e5f7 24%, #ddc7e8 52%, #ebdcf2 76%, #fefcff 100%);
  border:1px solid #d86d7c; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(192,20,44,.22);
}
body.senshi--saturn .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fcfbff 0%, #eae4f8 24%, #cfc4ea 52%, #e1daf3 76%, #fdfcff 100%);
  border:1px solid #b692e2; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(138,79,208,.22);
}
body.senshi--chibimoon .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fffbfd 0%, #ffebf3 24%, #ffd9e9 52%, #ffe6f0 76%, #fffcfd 100%);
  border:1px solid #ffe1ed; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(255,207,226,.22);
}
body.senshi--tuxedomask .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fdfcfb 0%, #f7f1f0 24%, #f0e4e6 52%, #f5eded 76%, #fefdfc 100%);
  border:1px solid #ecd291; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(224,182,78,.22);
}
body.senshi--helios .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fffefb 0%, #fbf7e9 24%, #f4ecd2 52%, #f9f4e2 76%, #fffefc 100%);
  border:1px solid #e4ce8e; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(212,176,72,.22);
}
body.senshi--ceres .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fffcfe 0%, #fff3f9 24%, #ffeaf3 52%, #fff0f7 76%, #fffdfe 100%);
  border:1px solid #f2b2c9; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(234,130,168,.22);
}
body.senshi--pallas .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fbfeff 0%, #f0f9fe 24%, #e6f4fd 52%, #edf8fe 76%, #fcfeff 100%);
  border:1px solid #8fc3e4; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(74,159,212,.22);
}
body.senshi--juno .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fcfefa 0%, #f3faea 24%, #eaf6dc 52%, #f0f9e6 76%, #fdfefb 100%);
  border:1px solid #a5c987; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(110,168,62,.22);
}
body.senshi--vesta .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fffcfb 0%, #fff3ee 24%, #ffe9e2 52%, #fff0eb 76%, #fffdfc 100%);
  border:1px solid #eda89a; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(226,114,92,.22);
}
body.senshi--fighter .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fbfbfc 0%, #e9e7ec 24%, #d2ccd6 52%, #e2dee5 76%, #fcfcfd 100%);
  border:1px solid #ec8c9c; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(224,69,95,.22);
}
body.senshi--maker .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fbfbfd 0%, #eae7f1 24%, #d3cee0 52%, #e3dfec 76%, #fcfcfe 100%);
  border:1px solid #c099ec; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(154,90,224,.22);
}
body.senshi--healer .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fafdfb 0%, #e5eee9 24%, #cdd8d2 52%, #dee7e2 76%, #fbfefc 100%);
  border:1px solid #84d7b5; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(56,190,136,.22);
}
body.senshi--kakyuu .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fffbf8 0%, #fff0e4 24%, #ffe4d2 52%, #ffecdf 76%, #fffcfa 100%);
  border:1px solid #ecb385; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(224,132,58,.22);
}
body.senshi--luna .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fbfafd 0%, #ece7f3 24%, #d8d2e4 52%, #e6e1ee 76%, #fcfbfe 100%);
  border:1px solid #f1d999; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(232,194,90,.22);
}
body.senshi--artemis .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fcfdfe 0%, #edf1f7 24%, #dbe2ee 52%, #e8ecf4 76%, #fdfdfe 100%);
  border:1px solid #f2dea3; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(234,201,106,.22);
}
body.senshi--diana .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fcfbfe 0%, #f0ecf7 24%, #e2dbee 52%, #ece7f4 76%, #fdfcfe 100%);
  border:1px solid #dcc0e3; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(199,154,210,.22);
}
body.senshi--galaxia .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fefbf7 0%, #f8ecdd 24%, #efd9c2 52%, #f5e6d5 76%, #fefcf9 100%);
  border:1px solid #f6d385; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(240,184,58,.22);
}
body.senshi--cosmos .senshi-art .banner--plated{
  background:linear-gradient(180deg,
    #fdfdff 0%, #f4f3fa 24%, #e8e6f2 52%, #f1eff8 76%, #fefeff 100%);
  border:1px solid #d2c5e2; border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.35),
    5px 5px 0 rgba(183,162,208,.22);
}

/* ---- a long catchphrase wraps instead of shoving the picture off the page ----
   Galaxia's cry is one long line; .masthead-titles is flex:0 0 auto and sized to
   max-content, so it reached 797px and pushed the plate to x=-19. The ceiling is
   generous enough that Usagi's 409px column is untouched. */
.senshi-art .banner--plated .masthead-titles{ max-width:min(56%, 520px); }
.senshi-art .banner--plated .masthead-titles .quote,
.senshi-art .banner--plated .masthead-titles .quote-dub{ white-space:normal; }

/* ---- the carddass keeps its own proportions ----
   The pose slot forces 3/4, which is correct for a placeholder box and wrong for
   a photograph. Twenty-four scans are not all 3:4 and were being squashed. */
.senshi-art .dossier-pose--head .card{ margin-top:14px; }
.senshi-art .dossier-pose--head .card img{ aspect-ratio:auto; }
.senshi-art .dossier-pose--head .card figcaption{
  margin:6px 0 0; font-size:12px; letter-spacing:.03em;
  color:var(--ink); opacity:.66; text-align:center;
}

/* ---- "and throughout" ----
   Same bar as an arc, no numeral: it is not one. A star in the numeral slot
   would have meant U+2606 in rainyhearts, which does not have it - and on this
   site a missing glyph falls through and draws a HEART. Sixth time. */
.senshi-art .kitarc--all .ka-name{ font-style:italic; }
.senshi-art .kitarc--all .ka-era{ opacity:.85; }


/* ---- a long name wraps rather than reaching back across the picture ----
   .bh-t is nowrap, which is right for "Sailor Moon" and wrong for "Sailor Star
   Fighter": at 40px that is about 520px of type in a 520px column, and the
   overflow goes LEFT, so her crescent ended up sitting on the plate. Letting the
   name wrap costs nothing on the short names - white-space:normal only breaks a
   line that does not fit - and the gradient still runs across both lines,
   because background-clip:text paints the element's box and not each line. */
.senshi-art .banner--plated .masthead-name--lockup{ max-width:100%; }
.senshi-art .banner--plated .masthead-name--lockup .bh-t{
  white-space:normal; overflow-wrap:break-word;
}

/* ---- a placeholder for the fourteen plates that do not exist yet ----
   images/sailormoon/naoko-web/chibi/ holds eleven scans; the other fourteen
   profiles point at files that were never made. Buried in the dossier that was
   a small broken image. In the masthead it is 320px of alt text across the top
   of the page, so those pages take the site's own placeholder box instead -
   same square, same frame, same offset shadow as the real plate. */
.senshi-art .banner--plated .masthead-plate .ph--plate{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; width:100%; aspect-ratio:1/1; padding:16px; text-align:center;
  border:3px solid var(--backbow); box-shadow:6px 6px 0 var(--frontbow);
  background:#fffdf6; box-sizing:border-box;
}
.senshi-art .banner--plated .masthead-plate .ph--plate .ph-mark{
  font-size:30px; line-height:1; color:var(--backbow); opacity:.75;
}
.senshi-art .banner--plated .masthead-plate .ph--plate .ph-label{
  font-size:12px; line-height:1.45; letter-spacing:.02em;
  color:var(--ink); opacity:.6;
}


/* ---- no items above it, no rule above it ----
   .ka-moves carries a dashed top border to separate the moves from the objects.
   In an arc where nothing was gained but a technique - Mars in Black Moon, for
   instance - there are no objects, and the rule was drawing a divider with
   nothing on the other side of it. :first-child means it is only a divider when
   there is something to divide. */
.senshi-art .ka-moves:first-child{ margin-top:0; padding-top:0; border-top:0; }


/* ---- and Usagi's gold comes down six percent ----
   Found by photographing the plates rather than computing them. Her stops were
   measured against her PAPER, #fefeff, where the gold reads 3.64:1. But the
   name does not sit on paper - it sits on the silver plate, whose middle band
   is #dfe3ee, and there the gold measures 2.83:1. Under the 3:1 floor for large
   text, on the last two letters of the name, on the page this whole template
   came from.

   #a8801f -> #9c771d is the same hue at the same saturation, six percent
   deeper: 3.23:1 on the plate and 4.11:1 on paper. Side by side you would be
   hard pressed to name which is which; the difference is that the second one
   can be read. Every other page was built against the plate from the start and
   none of them needed this. */
body.senshi--moon .senshi-art{ --name-c:#9c771d; }


/* ---- one object should not be a narrow column ----
   .ka-items is auto-FILL at minmax(240px,1fr), which lays down as many 240px
   tracks as the row will hold whether or not there is anything to put in them -
   so an arc with a single object got a 240px card with a long note squeezed
   into it and 550px of nothing beside it (Luna's Dark Kingdom, and a dozen
   others like it). auto-FIT collapses the empty tracks, and the 380px ceiling
   stops a lone card stretching the full width instead, which would look just as
   odd the other way. Arcs with three or four objects are unaffected: they were
   already filling their tracks.

   THE CEILING GOES ON THE CARD, NOT ON THE TRACK, and that distinction cost me
   a render. `repeat(auto-fit, minmax(240px, 380px))` sounds like the same
   thing, but the repeat count is computed from the track's MAX size when that
   size is definite - so 380px gave floor(788 / 398) = ONE column, and two
   objects stacked in a row with space for both. With a 1fr max the count comes
   from the 240px min, auto-fit collapses whatever is left empty, and the cards
   themselves are what stop at 380. */
.senshi-art .ka-items{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.senshi-art .ka-items .kit{ max-width:380px; }

/* ==========================================================================
   98. EVERY NAME ON ONE LINE, SIZED TO ITS OWN COLUMN   (10 Sep 2026)
   ==========================================================================
Ashley: make sure each character's name fits the box at the top correctly - you
can see Tuxedo Mask is split funny.

WHAT WENT WRONG. Fixing Star Fighter's name reaching back across her plate, I
let the lockup wrap. That is the wrong fix: "Tuxedo Mask" broke after "Tuxedo",
and because the crescent sits in the same flex row it stayed on line one with
nothing beside it. A name is a lockup. It does not wrap.

AND THE OLD SIZING COULD NOT HAVE WORKED. font-size was clamp(28px, 3.6vw, 40px)
- three point six percent of the VIEWPORT. This site's content column is a fixed
860px inside whatever window you have open, so on Ashley's 1920px screen the vw
term reads 69px, pins to the 40px cap, and the name is sized as though it had a
1920px page to spread across when it has about 370px of column. The viewport was
never the thing the name has to fit inside.

THE COLUMN IS THE THING, so the rule is written in container units. Text width
is linear in font-size, so one measurement per name settles it: the ink is
measured once at 100px, and the size that fills the column is
(column - crescent - gap) x 100/ink@100. Written as `calc((100cqi - 50px) * K)`
with K per senshi, capped at 40px so short names do not balloon and floored at
22px, it fits at EVERY width without another measurement - resize the window and
the name resizes with the column, because the column is what it is measured
against.

  Sailor Chibi Moon   1040 wide at 100px  ->  K 0.0961
  Sailor Star Fighter 1163                ->  K 0.0860   the longest on the site
  Luna                 245                ->  K 0.4085   stays at the 40px cap

THE COLUMN ALSO STOPS SIZING ITSELF TO ITS CONTENT. It was flex:0 0 auto, so its
width came from whichever cry happened to be longest - Venus got 359px and
Jupiter 439px for no reason anyone could see, and Galaxia's long line grew the
column until it shoved the plate off the page. flex:1 1 0 gives the titles
whatever the plate does not take, which is the same for everybody and is what
makes the measurement above mean anything.

NOTHING IS DECIDED FROM A CHARACTER COUNT. "Sailor Chibi Moon" and "Sailor Star
Maker" are both 17 characters and measure 1040.5 at 100px because rainyhearts is
monospaced - but Helios and Artemis are 6 and 7 characters and measure 367 and
428, which is not the same ratio. The pixel measurement is the input; the letter
count is not. */

/* ---- the column stops sizing itself to whichever cry is longest ---- */
.senshi-art .banner--plated .masthead-plate{
  flex:0 0 clamp(190px, 26vw, 320px); min-width:0;
}
.senshi-art .banner--plated .masthead-titles{
  flex:1 1 0; min-width:0; max-width:none;
  container-type:inline-size;
}

/* ---- and the lockup is a lockup again ---- */
.senshi-art .banner--plated .masthead-name--lockup{ flex-wrap:nowrap; }
.senshi-art .banner--plated .masthead-name--lockup .bh-t{
  white-space:nowrap; overflow-wrap:normal;
}
body.senshi--fighter .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.0860), 40px);
}
body.senshi--healer .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.0908), 40px);
}
body.senshi--chibimoon .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.0961), 40px);
}
body.senshi--maker .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.0961), 40px);
}
body.senshi--mercury .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1167), 40px);
}
body.senshi--jupiter .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1167), 40px);
}
body.senshi--neptune .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1167), 40px);
}
body.senshi--galaxia .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1167), 40px);
}
body.senshi--uranus .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1257), 40px);
}
body.senshi--saturn .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1257), 40px);
}
body.senshi--pallas .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1257), 40px);
}
body.senshi--kakyuu .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1257), 40px);
}
body.senshi--cosmos .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1257), 40px);
}
body.senshi--venus .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1362), 40px);
}
body.senshi--pluto .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1362), 40px);
}
body.senshi--ceres .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1362), 40px);
}
body.senshi--vesta .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1362), 40px);
}
body.senshi--mars .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1485), 40px);
}
body.senshi--tuxedomask .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1485), 40px);
}
body.senshi--juno .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1485), 40px);
}
body.senshi--moon .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.1485), 40px);
}
body.senshi--artemis .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.2334), 40px);
}
body.senshi--helios .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.2723), 40px);
}
body.senshi--diana .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.3268), 40px);
}
body.senshi--luna .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(22px, calc((100cqi - 50px) * 0.4084), 40px);
}

/* ---- and the phone rules are restated, because they have to be ----
   Under 760 the masthead stacks: the plate goes above and the titles take the
   full width. Those rules already exist further up the file, but a media query
   adds NO specificity, so `flex:1 1 0` written at top level below them simply
   wins - and the titles went back to sharing the row with the plate, which is
   how every name from Mercury to Saturn ended up overflowing the right edge of
   a 390px screen. Same trap as the .nk-duo grid. They are restated here, last,
   where they can hold. */
@media (max-width:760px){
  .senshi-art .banner--plated{ flex-wrap:wrap; gap:16px; }
  .senshi-art .banner--plated .masthead-plate{
    flex:0 1 auto; width:min(220px, 60%); min-width:0;
  }
  .senshi-art .banner--plated .masthead-titles{ flex:1 1 100%; text-align:left; }
  .senshi-art .banner--plated .masthead-titles .dossier-cry{ text-align:left; }
}

/* ==========================================================================
   99. THE BOXES TAKE HER COLOURS TOO   (10 Sep 2026)
   ==========================================================================
Ashley: select a palette for each senshi (I think we have these already) and
update the profile boxes to reflect their colours.

We do have them - palettes.py, eight beats each. What was not using them was the
FURNITURE. The gradients, the plates and the bars all went per-senshi in the
rollout, but the boxes underneath stayed exactly as they have always been:
`#fffdf6` warm cream in every slot, cap and frame, `#fefeff` cool white in every
open body, a `rgba(230,200,106,.45)` gold hairline on every card, and the same
lilac lace behind all twenty-four. Mercury's page is blue at the top and
Jupiter's is green, and from the kit down they are the same page.

FOUR VARIABLES, DEFAULTED TO WHAT IS THERE NOW, so the wing and anything not yet
converted do not move by a pixel:

  --box       the warm fill: slots, caps, picture frames
  --boxbody   the cool fill: open bodies behind prose
  --boxedge   the hairline round a cap
  --lace      what the doily is tinted with

Per senshi they come off her own beats. --boxbody is her paper. --box is her
paper carried 28% toward her wash, which is enough to read as hers next to the
white body and nowhere near enough to fight the text. --boxedge is her trim at
the same .45 the gold hairline always had.

THE LACE IS RECOLOURED, NOT REPLACED. frost.png and tile24.gif are opaque lilac
pixel art and there is one of each; painting twenty-four versions would mean
twenty-four files to keep in step. `background-blend-mode:luminosity` over
`background-color:var(--lace)` keeps the tile's light and dark exactly as drawn
and takes hue and saturation from underneath, so the same file reads ice-blue on
Mercury and green on Jupiter. --lace is her skirt half-way to her wash: the
skirt alone is too strong behind cards, the wash alone barely registers.

AND THE ONE HARDCODED GREY GOES TOO. .km-desc was #5b5668, a cool grey that
looked deliberate on a lilac card and looks like a mistake on a green one. It
takes --ink at the weight it was already reading as.

EVERY COMBINATION IS MEASURED, not assumed: four inks (--head, --ink, --ink at
the .8 the notes use, and --accent) against both fills, on all twenty-four
pages, read out of the rendered page rather than computed here - because --head
and --accent are set per page in its own <style> block and this script would
only be guessing at them. */

/* ---- the defaults are exactly what is on the page today ---- */
.senshi-art{
  --box:#fffdf6;
  --boxbody:#fefeff;
  --boxedge:rgba(230,200,106,.45);
  --lace:#dfbeeb;              /* frost.png's own average, so nothing shifts */
}
body.senshi--mercury .senshi-art{
  --box:#eef8ff;
  --boxbody:#f4fbff;
  --boxedge:rgba(0,132,233,.45);
  --lace:#3e87cf;
  --kindink:#567375;
}
body.senshi--mars .senshi-art{
  --box:#fff1ec;
  --boxbody:#fff5f2;
  --boxedge:rgba(240,195,58,.45);
  --lace:#d46751;
  --kindink:#7f4998;
}
body.senshi--jupiter .senshi-art{
  --box:#eef9f0;
  --boxbody:#f4fbf5;
  --boxedge:rgba(33,181,3,.45);
  --lace:#4c8d42;
  --kindink:#955d7e;
}
body.senshi--venus .senshi-art{
  --box:#fff7e6;
  --boxbody:#fffaf0;
  --boxedge:rgba(245,205,0,.45);
  --lace:#fcc235;
  --kindink:#1b2a6b;
}
body.senshi--uranus .senshi-art{
  --box:#f8f8e5;
  --boxbody:#fdfdf0;
  --boxedge:rgba(1,72,164,.45);
  --lace:#434850;
  --kindink:#737300;
}
body.senshi--neptune .senshi-art{
  --box:#e8fbf5;
  --boxbody:#f2fffb;
  --boxedge:rgba(43,190,151,.45);
  --lace:#37777a;
  --kindink:#0a1764;
}
body.senshi--pluto .senshi-art{
  --box:#f8eefb;
  --boxbody:#fdf5ff;
  --boxedge:rgba(192,20,44,.45);
  --lace:#524857;
  --kindink:#40141c;
}
body.senshi--saturn .senshi-art{
  --box:#f1edfc;
  --boxbody:#f8f5ff;
  --boxedge:rgba(138,79,208,.45);
  --lace:#675aa7;
  --kindink:#4a1a14;
}
body.senshi--chibimoon .senshi-art{
  --box:#fff1f6;
  --boxbody:#fff5f9;
  --boxedge:rgba(255,207,226,.45);
  --lace:#d96692;
  --kindink:#d22849;
}
body.senshi--tuxedomask .senshi-art{
  --box:#f9f5f3;
  --boxbody:#fbf8f5;
  --boxedge:rgba(224,182,78,.45);
  --lace:#535461;
  --kindink:#d81f2c;
}
body.senshi--helios .senshi-art{
  --box:#fdfaef;
  --boxbody:#fffdf5;
  --boxedge:rgba(212,176,72,.45);
  --lace:#d6bc76;
  --kindink:#837037;
}
body.senshi--ceres .senshi-art{
  --box:#fff6fb;
  --boxbody:#fff8fc;
  --boxedge:rgba(234,130,168,.45);
  --lace:#f6bad4;
  --kindink:#b54e72;
}
body.senshi--pallas .senshi-art{
  --box:#f3fbff;
  --boxbody:#f6fcff;
  --boxedge:rgba(74,159,212,.45);
  --lace:#b6dbf1;
  --kindink:#3476a7;
}
body.senshi--juno .senshi-art{
  --box:#f6fbee;
  --boxbody:#f8fcf2;
  --boxedge:rgba(110,168,62,.45);
  --lace:#cae4ab;
  --kindink:#4c7b28;
}
body.senshi--vesta .senshi-art{
  --box:#fff6f2;
  --boxbody:#fff8f5;
  --boxedge:rgba(226,114,92,.45);
  --lace:#f6bfb5;
  --kindink:#c64235;
}
body.senshi--fighter .senshi-art{
  --box:#f0eef3;
  --boxbody:#f6f5f8;
  --boxedge:rgba(224,69,95,.45);
  --lace:#555669;
  --kindink:#c82e47;
}
body.senshi--maker .senshi-art{
  --box:#f0eef6;
  --boxbody:#f6f4fa;
  --boxedge:rgba(154,90,224,.45);
  --lace:#58546c;
  --kindink:#8749cc;
}
body.senshi--healer .senshi-art{
  --box:#ecf5f0;
  --boxbody:#f2faf6;
  --boxedge:rgba(56,190,136,.45);
  --lace:#515e5a;
  --kindink:#227c56;
}
body.senshi--kakyuu .senshi-art{
  --box:#fff3ea;
  --boxbody:#fff6ee;
  --boxedge:rgba(224,132,58,.45);
  --lace:#cb695c;
  --kindink:#b64c2c;
}
body.senshi--luna .senshi-art{
  --box:#f1eef7;
  --boxbody:#f6f3fb;
  --boxedge:rgba(232,194,90,.45);
  --lace:#4f4c5a;
  --kindink:#826729;
}
body.senshi--artemis .senshi-art{
  --box:#f3f5fa;
  --boxbody:#f7f9fc;
  --boxedge:rgba(234,201,106,.45);
  --lace:#748094;
  --kindink:#856a2a;
}
body.senshi--diana .senshi-art{
  --box:#f4f1fa;
  --boxbody:#f8f5fc;
  --boxedge:rgba(199,154,210,.45);
  --lace:#8e81a5;
  --kindink:#a74f77;
}
body.senshi--galaxia .senshi-art{
  --box:#fbf1e5;
  --boxbody:#fdf6ec;
  --boxedge:rgba(240,184,58,.45);
  --lace:#95554a;
  --kindink:#8d661b;
}
body.senshi--cosmos .senshi-art{
  --box:#f8f7fd;
  --boxbody:#fbfaff;
  --boxedge:rgba(183,162,208,.45);
  --lace:#cfcbe0;
  --kindink:#7c649f;
}
body.senshi--moon .senshi-art{ --kindink:#886f36; }

/* ---- the warm fill: every slot, cap and picture frame ---- */
.senshi-art .banner--plated .masthead-plate img,
.senshi-art .banner--plated .masthead-plate .ph--plate,
.senshi-art .dossier-pose--head img,
.senshi-art .dossier-pose--head .ph,
.senshi-art .card img,
.senshi-art .kit-shot .ph--kitshot,
.senshi-art .km-shot .ph--kmshot,
.senshi-art .feature-shot .ph--featureshot,
.senshi-art .elsewhere-shot .ph--elseshot,
.senshi-art .jump-link{
  background-color:var(--box);
}
.senshi-art .ka-items .kit-cap,
.senshi-art .ka-moves .km-cap{
  background:var(--box); border-color:var(--boxedge);
}

/* ---- the cool fill: open bodies, where the prose is ---- */
.senshi-art .kitarc-body{ background:var(--boxbody); }

/* ---- and a veil over the tile, so the pattern's own dark bands stay lace ----
   luminosity takes hue and saturation from the colour underneath and keeps the
   TILE's light and dark exactly as drawn - which is right for the pattern and
   wrong for tile24's heavy bands once they are gold instead of lilac. On Venus
   they read as blotches and on Tuxedo Mask as smears. A flat white layer over
   the tile lifts the whole range without touching the drawing: the bands are
   still there, they are just lace-weight again. tile24 needs more of it than
   frost does because it is the darker of the two. */
.senshi-art .ka-moves .km{
  background-image:
    linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
    url("images/sailormoon/select/lace/tile24.gif");
  background-repeat:no-repeat, repeat;
  background-size:cover, auto;
  background-blend-mode:normal, luminosity;
}
.senshi-art .ka-items .kit{
  background-image:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat;
  background-size:cover, 256px 190px;
  background-blend-mode:normal, luminosity;
}

/* ---- the lace takes her hue without becoming a second file ----
   luminosity keeps the tile's own light and dark and borrows hue and
   saturation from the colour underneath. Same pixel art, twenty-four
   colourways, one file each. */
.senshi-art .ka-items .kit,
.senshi-art .ka-moves .km,
.senshi-art .kitframe::before{
  background-color:var(--lace);
  background-blend-mode:luminosity;
}
/* the caps sit on top and stay opaque, so no text is ever on the lace */
.senshi-art .ka-items .kit-cap,
.senshi-art .ka-moves .km-cap{ background-blend-mode:normal; }

/* ---- and the one grey that was pretending to be a palette colour ---- */
.senshi-art .km-desc{ color:var(--ink); opacity:.82; }

/* ---- the kind label gets ink that carries on a tinted box ----
   --accent at 13px measured 4.15 to 4.49 against the new fills on eleven pages:
   under AA, on the label that says whether a thing is an item, an attack or a
   transformation. --kindink is that same accent deepened only as far as 4.6
   needs, so the hue is unchanged and most senshi do not move at all. */
.senshi-art{ --kindink:var(--accent); }
.senshi-art .km-kind{ color:var(--kindink); }

/* ==========================================================================
   100. WHAT HAPPENS TO HER   (10 Sep 2026)
   ==========================================================================
Ashley: if you're worried about deleting profile information, rewrite it to
incorporate anything you're worried about cutting. I just don't want an
arc-by-arc summary on each page again.

Ashley: each profile should educate the reader on the character's traits as
against the planet - not a synopsis of what happens TO them, but how they grow,
and how their base character is a perfect archetype of the planet they carry.

SO THIS IS NOT A PLOT SUMMARY, and the first draft of it was, which is why it
is not what shipped. The existing profile block already reads the character AS
the planet, but it reads her standing still: Mercury is the mind, ice is what
analysis looks like when it fights. What the arc sections held, underneath the
episode furniture, was the same argument moving - the planet UNINTEGRATED at the
start and the planet DOING ITS JOB by the end.

That is what each passage tracks. Mercury begins with the fastest mind in the
room and nobody to hand a thought to, which is a planet of traffic with no
traffic; she ends as the circuit the team runs on. Events appear only as
evidence - the visor, the ice, the harp - and are named in one clause rather
than narrated. A reader who has never seen an episode should still be able to
learn what Mercury MEANS from it.

Two paragraphs, about 200 words, per Ashley: the profile stays the main event on
the page. Everything factual in them comes out of that page's own archived arc
section, still in DO_NOT_UPLOAD/backups/2026-09-10_arcs-sections/ to check
against.

NO IMAGE SLOTS. The bio rows above each carry a .ph--bioshot, and Mercury
already has six empty ones. Five more would make the page look like a gallery
waiting for a delivery. The passage is text. */
.senshi-art .bio-run{
  margin:22px 0 0; padding:20px 0 0;
  border-top:1px dashed var(--backbow);
}
.senshi-art .bio-sub{
  margin:0 0 12px; font-family:rainyhearts, monospace;
  font-size:20px; letter-spacing:.04em; color:var(--head);
}
.senshi-art .bio-run p{
  margin:0 0 13px; font-size:15px; line-height:1.62; color:var(--ink);
  max-width:68ch;
}
.senshi-art .bio-run p:last-child{ margin-bottom:0; }
.senshi-art .bio-run b{ color:var(--head); }
@media (max-width:760px){
  .senshi-art .bio-sub{ font-size:17px; }
  .senshi-art .bio-run p{ font-size:14px; }
}

/* ==========================================================================
   101. THE MOVE CARDS STOP TICKING   (10 Sep 2026)
   ==========================================================================
Ashley: one of the backgrounds is stuttering as it scrolls.

WHICH ONE, AND WHY. Three doilies were declared; only two are actually running,
because .kitframe::before has carried `content:none` since the day Ashley said
the page-level lace was a level too deep. That leaves the item cards (frost.png,
200s) and the move cards (tile24.gif, 220s) - and the move cards are the ones
that tick.

The move cards are the only surface on the site with `image-rendering:pixelated`
under a scrolling background. The tile travels 128px in 220 seconds, which is
one pixel every 1.72 SECONDS, and `pixelated` means the browser cannot draw any
of the positions in between: it holds perfectly still for most of two seconds
and then jumps a whole pixel. The item cards move at a similar crawl and look
fine because they render `auto` and interpolate the fractional offsets.

`pixelated` was buying nothing there anyway. It matters when pixel art is
SCALED, and this tile is drawn at background-size:auto - its own 128x224, one
image pixel to one CSS pixel. The only thing the hint was doing on that surface
was quantising the scroll. It comes off the card background and stays where
sprites are genuinely scaled.

AND THE WHITE VEIL WAS SLIDING OFF BOTH. When the tint went in, each card got a
second background layer - a flat white wash over the lace to keep tile24's dark
bands from reading as smears in gold or red. But `background-position` animates
EVERY layer of a background, and the veil is `no-repeat` at `size:cover`: over
one cycle it slid 256x190 (items) and 128px (moves) clear off the element,
uncovering raw untinted tile along one edge, then snapped back at the loop.
Measured at 8 seconds in, both layers had moved together: `13.14px 9.75px,
13.14px 9.75px`.

The keyframes now carry a position for each layer and hold the veil at 0 0. A
one-layer background ignores the extra pair, so the old keyframes stay in place
for anything still using them. */

/* ---- the veil stays put; only the lace scrolls ---- */
@keyframes kit-doily-2{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 0, 256px 190px; }
}
@keyframes km-doily-2{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 0, -128px 0; }
}
.senshi-art .ka-items .kit{ animation-name:kit-doily-2; }
.senshi-art .ka-moves .km{ animation-name:km-doily-2; }

/* ---- and the move tile stops being quantised ----
   One pixel every 1.72s is not a slow scroll, it is a tick. The tile is drawn
   at its own size, so the rendering hint was costing motion and buying no
   sharpness. Sprites that ARE scaled keep theirs. */
.senshi-art .ka-moves .km{ image-rendering:auto; }

/* ---- housekeeping: that selector had a dead third member ----
   .kitframe::before has been content:none since the lace moved into the
   windows, so tinting it was a no-op. Left here as a note rather than a rule,
   so the next person does not go looking for a page-level doily that is not
   switched on. */

/* ==========================================================================
   102. THE PROFILE PARAGRAPHS BECOME BLOCKS   (10 Sep 2026)
   ==========================================================================
Ashley: like we did in "through the arcs" where we colour-blocked paragraphs
with the image gallery next to it, do the same for each page. Use the fuku
palette to select a complementary colour for the boxes and the gradient.

WHAT IS ALREADY THERE. .bio-row is a two-column grid and it already alternates
which side the picture sits on, odd rows text-left, even rows text-right. What
it has never had is the BLOCK - the arc beats sat on a tinted card with a
gradient falling out of the top edge, and that is the whole reason a run of
paragraphs read as separate chunks rather than as one column of prose with
pictures parked beside it.

COMPLEMENTARY, PICKED OFF HER OWN FUKU. The kit boxes and the masthead plate are
already built from skirt and wash, so a block tinted from the same beats would
just be more of the page. The block takes the beat that sits FURTHEST AROUND THE
HUE WHEEL from that dominant - measured, not chosen - which on most senshi is
exactly the contrast the uniform was designed with in the first place:

  Jupiter   green page  ->  pink blocks      (her front bow)
  Mars      warm red    ->  purple blocks    (her front bow, the corrected one)
  Venus     gold        ->  navy blocks      (her front bow)
  Uranus    pale yellow ->  blue blocks      (her trim)

Where a senshi genuinely has no second hue - Neptune wears navy on navy,
Mercury is blue in every beat she owns - the furthest available is still the
furthest available, and the block comes out as a deeper or cooler register of
the same family rather than a false contrast. That is the honest answer for a
character built out of one colour, and it is what the plate rule does too.

THE TINT IS A WASH OF IT, NOT THE COLOUR ITSELF: paper carried 20% toward the
beat, falling to the page ground over the first 130px, which is the same
construction the arc beats used. The accent bar is the beat proper, deepened
only if it cannot hold an edge, and it swaps sides with the picture so the
alternation is visible without reading a word.

AND THE INK IS CHECKED against the top of the gradient, where the tint is
strongest, on all twenty-four - because a tint that is fine at the bottom of a
block can still be too much under the first line of it. */

.senshi-art{
  --biotint:#f6f2fc;
  --bioaccent:#5a3268;
  --bioink:#5a3268;
  --leadink:var(--accent);
  --bioedge:rgba(122,90,150,.30);
}
body.senshi--mercury .senshi-art{
  --biotint:#e3f6f8;
  --bioaccent:#729294;
  --bioink:#566e70;
  --leadink:#557173;
  --bioedge:rgba(196,251,255,.30);
}
body.senshi--mars .senshi-art{
  --biotint:#efe7f3;
  --bioaccent:#7f4998;
  --bioink:#7f4998;
  --leadink:#7f4998;
  --bioedge:rgba(127,73,152,.30);
}
body.senshi--jupiter .senshi-art{
  --biotint:#f8e3ef;
  --bioaccent:#b47098;
  --bioink:#8c5776;
  --leadink:#8c5776;
  --bioedge:rgba(250,156,211,.30);
}
body.senshi--venus .senshi-art{
  --biotint:#e3e7f8;
  --bioaccent:#1b2a6b;
  --bioink:#1b2a6b;
  --leadink:#1b2a6b;
  --bioedge:rgba(27,42,107,.30);
}
body.senshi--uranus .senshi-art{
  --biotint:#f8f8e3;
  --bioaccent:#949401;
  --bioink:#707000;
  --leadink:#737300;
  --bioedge:rgba(255,255,1,.30);
}
body.senshi--neptune .senshi-art{
  --biotint:#e3e6f8;
  --bioaccent:#0a1764;
  --bioink:#0a1764;
  --leadink:#0a1764;
  --bioedge:rgba(10,23,100,.30);
}
body.senshi--pluto .senshi-art{
  --biotint:#f8e3e6;
  --bioaccent:#c0142c;
  --bioink:#c0142c;
  --leadink:#40141c;
  --bioedge:rgba(192,20,44,.30);
}
body.senshi--saturn .senshi-art{
  --biotint:#f8e5e3;
  --bioaccent:#3f1610;
  --bioink:#3f1610;
  --leadink:#4a1a14;
  --bioedge:rgba(63,22,16,.30);
}
body.senshi--chibimoon .senshi-art{
  --biotint:#f8f2e3;
  --bioaccent:#a5872e;
  --bioink:#7e6723;
  --leadink:#cd2747;
  --bioedge:rgba(242,199,68,.30);
}
body.senshi--tuxedomask .senshi-art{
  --biotint:#f8f2e3;
  --bioaccent:#a6873a;
  --bioink:#826a2d;
  --leadink:#d41e2b;
  --bioedge:rgba(224,182,78,.30);
}
body.senshi--helios .senshi-art{
  --biotint:#f8f3e3;
  --bioaccent:#978a58;
  --bioink:#766c45;
  --leadink:#7e6b35;
  --bioedge:rgba(236,216,138,.30);
}
body.senshi--ceres .senshi-art{
  --biotint:#f8e3ea;
  --bioaccent:#d45b86;
  --bioink:#a34667;
  --leadink:#a34667;
  --bioedge:rgba(226,97,143,.30);
}
body.senshi--pallas .senshi-art{
  --biotint:#e3f1f8;
  --bioaccent:#798b94;
  --bioink:#5c6b72;
  --leadink:#316e9c;
  --bioedge:rgba(201,232,247,.30);
}
body.senshi--juno .senshi-art{
  --biotint:#ecf6e4;
  --bioaccent:#5f9a32;
  --bioink:#4a7827;
  --leadink:#4b7927;
  --bioedge:rgba(95,154,50,.30);
}
body.senshi--vesta .senshi-art{
  --biotint:#f8e5e3;
  --bioaccent:#d24638;
  --bioink:#b53c30;
  --leadink:#b63c31;
  --bioedge:rgba(210,70,56,.30);
}
body.senshi--fighter .senshi-art{
  --biotint:#f8e3e6;
  --bioaccent:#8a2030;
  --bioink:#8a2030;
  --leadink:#bf2c44;
  --bioedge:rgba(138,32,48,.30);
}
body.senshi--maker .senshi-art{
  --biotint:#ede3f8;
  --bioaccent:#8a4ad0;
  --bioink:#8246c4;
  --leadink:#8246c4;
  --bioedge:rgba(138,74,208,.30);
}
body.senshi--healer .senshi-art{
  --biotint:#e3f7ef;
  --bioaccent:#1e6a4a;
  --bioink:#1e6a4a;
  --leadink:#227c56;
  --bioedge:rgba(30,106,74,.30);
}
body.senshi--kakyuu .senshi-art{
  --biotint:#f8ede3;
  --bioaccent:#ae7f51;
  --bioink:#88633f;
  --leadink:#b34a2b;
  --bioedge:rgba(242,176,112,.30);
}
body.senshi--luna .senshi-art{
  --biotint:#f8f2e3;
  --bioaccent:#a2883f;
  --bioink:#7d6931;
  --leadink:#84692a;
  --bioedge:rgba(232,194,90,.30);
}
body.senshi--artemis .senshi-art{
  --biotint:#f8f1e3;
  --bioaccent:#a78435;
  --bioink:#826729;
  --leadink:#836729;
  --bioedge:rgba(232,184,74,.30);
}
body.senshi--diana .senshi-art{
  --biotint:#f8f2e3;
  --bioaccent:#a2883f;
  --bioink:#7d6931;
  --leadink:#a74f77;
  --bioedge:rgba(232,194,90,.30);
}
body.senshi--galaxia .senshi-art{
  --biotint:#f8f3e3;
  --bioaccent:#a38932;
  --bioink:#7d6926;
  --leadink:#8d661b;
  --bioedge:rgba(240,201,74,.30);
}
body.senshi--cosmos .senshi-art{
  --biotint:#efe6f4;
  --bioaccent:#8a828f;
  --bioink:#6a636d;
  --leadink:#725c92;
  --bioedge:rgba(230,216,238,.30);
}
body.senshi--moon .senshi-art{
  --biotint:#f8f3e3;
  --bioaccent:#988852;
  --bioink:#796c41;
  --leadink:#836a34;
  --bioedge:rgba(224,200,120,.30);
}

.senshi-art .bio-row{
  padding:18px 22px;
  margin:0 0 14px;
  border-radius:10px;
  border:1px solid var(--bioedge);
  border-left:4px solid var(--bioaccent);
  background:linear-gradient(180deg, var(--biotint) 0%, var(--boxbody) 68%)
             no-repeat top/100% 130px, var(--boxbody);
}
/* the bar changes sides with the picture, so the alternation is legible before
   a word of it is read */
.senshi-art .bio-row:nth-child(even){
  border-left:1px solid var(--bioedge);
  border-right:4px solid var(--bioaccent);
}
.senshi-art .bio-row:last-child{ margin-bottom:0; }

/* the closing passage is the same block without a picture in it, so the section
   ends in the same material it is built from */
.senshi-art .bio-run{
  margin:16px 0 0;
  padding:18px 22px;
  border-top:0;
  border:1px solid var(--bioedge);
  border-left:4px solid var(--bioaccent);
  border-radius:10px;
  background:linear-gradient(180deg, var(--biotint) 0%, var(--boxbody) 62%)
             no-repeat top/100% 150px, var(--boxbody);
}
.senshi-art .bio-sub{ color:var(--bioink); }
.senshi-art .bio-row .bio-text b{ color:var(--leadink); }

/* the closing passage has no picture to fill the right of its block, so the
   measure opens up a little - 68ch was set when the text ran on bare paper and
   left the card looking half empty once it had edges. */
.senshi-art .bio-run p{ max-width:72ch; }

@media (max-width:760px){
  .senshi-art .bio-row,
  .senshi-art .bio-run{ padding:14px 16px; }
  .senshi-art .bio-run p{ max-width:none; }
}

/* ==========================================================================
   103. THE LACE MOVES ON THE COMPOSITOR   (10 Sep 2026)
   ==========================================================================
Ashley, after the first fix: I still feel like I'm seeing the slightest stutter
in that same background. Am I seeing things?

NO. The first fix removed a real cause and not the main one, and I should have
gone looking for the second before saying it was done.

WHAT I MEASURED, AND WHY IT LOOKED CLEAN. Sampling the painted pixels every
120ms in headless Chromium, both doilies change on every single sample - no
quantisation left, nothing sitting still. That is a true result and a useless
one, because a headless browser with one page open and nothing else to do is not
where the stutter lives.

WHAT IS ACTUALLY WRONG IS THE COST. `background-position` is not a composited
property. Every frame of that animation is a REPAINT of the element, and since
the tint went in each repaint also runs a `luminosity` blend between the tile
and the colour under it. One of those is nothing. Mercury's page runs FOURTEEN
of them at once - one per move card - plus four more on the item cards, on a
page that is also scrolling a starfield and running a CD player. That is a
frame budget problem, and a frame budget problem looks exactly like what she is
describing: mostly smooth, with a slight irregular hitch.

THE FIX IS TO STOP REPAINTING. The lace moves off the card and onto a pseudo-
element that is animated with `transform`, which Chrome hands to the compositor:
the layer is rasterised ONCE - blend included - and then simply translated, at
sub-pixel precision, without the main thread being involved at all. Same tiles,
same veils, same directions, same 200s and 220s, and no per-frame paint.

THE OVERHANG IS WHY IT STILL COVERS THE CARD. A layer translated 256px left and
190px up leaves that much of the card bare behind it, so the pseudo is grown by
exactly the travel on the sides it moves away from and the card clips the rest.

NO will-change. An active transform animation is promoted automatically, and
declaring it on eighteen elements a page would hold eighteen textures live
whether or not they are on screen. */

/* ---- the card stops carrying the animation ---- */
.senshi-art .ka-items .kit,
.senshi-art .ka-moves .km{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-image:none;
  background-color:var(--boxbody);
  background-blend-mode:normal;
  animation:none;
}

/* ---- and a composited layer carries it instead ---- */
.senshi-art .ka-items .kit::before,
.senshi-art .ka-moves .km::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  background-color:var(--lace);
  background-blend-mode:normal, luminosity;
  transform:translate3d(0,0,0);
}
.senshi-art .ka-items .kit::before{
  inset:0 -256px -190px 0;
  background-image:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat;
  background-size:cover, 256px 190px;
  animation:lace-drift-a 200s linear infinite;
}
.senshi-art .ka-moves .km::before{
  inset:0 -128px 0 0;
  background-image:
    linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
    url("images/sailormoon/select/lace/tile24.gif");
  background-repeat:no-repeat, repeat;
  background-size:cover, auto;
  animation:lace-drift-b 220s linear infinite;
}
@keyframes lace-drift-a{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-256px,-190px,0); }
}
@keyframes lace-drift-b{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-128px,0,0); }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .ka-items .kit::before,
  .senshi-art .ka-moves .km::before{ animation:none; }
}

/* ---- everything in the card sits above the lace ---- */
.senshi-art .ka-items .kit > *,
.senshi-art .ka-moves .km > *{ position:relative; z-index:1; }

/* ==========================================================================
   104. A SECOND GRADIENT, AND A WRAP-UP THAT LOOKS LIKE ONE   (10 Sep 2026)
   ==========================================================================

Ashley: alternate the boxes with a second variation on the gradient; put the
card in the "how <planet> grows in her" box to the right of the text; give that
heading a gradient; the box reads as the wrap-up of the section so it should
stand out slightly more.

THE SECOND VARIATION IS A SECOND BEAT, NOT A SECOND ANGLE OF THE SAME ONE.
Rotating one tint would read as a rendering artefact rather than a decision. The
odd blocks keep the beat furthest around the hue wheel from her skirt; the even
blocks take the NEXT furthest, and fall from the top-right corner over a longer
distance instead of straight down. So the alternation has two things going at
once, colour and direction, and neither of them is invented - both tints are
beats off her own uniform.

  Jupiter   pink blocks  /  green-gold blocks
  Venus     navy blocks  /  gold blocks
  Uranus    yellow       /  blue

THE WRAP-UP EARNS ITS EXTRA WEIGHT three ways, all small: the tint runs deeper
and further down the box, the accent rule is 6px rather than 4 and stays on the
left whatever row it follows, and the heading takes the fuku gradient - the same
background-clip treatment the masthead and the section headings already use, so
the closing box rhymes with the top of the page.

AND THE HEADING'S STOPS ARE RE-STAGED, because the fuku gradient was measured
against her paper and her wash and this heading sits on the block tint, which is
a different ground and a different hue. All three stops are pushed to 4.6:1
against it - 20px of rainyhearts is not bold and is under the large-text
threshold, so 3:1 would not do. Every one is checked and the build refuses to
write if any misses. */

.senshi-art{
  --biotint2:#efe6f6;
  --sub-a:#4a2a58; --sub-b:#6d4258; --sub-c:#7a6330;
}
body.senshi--mercury .senshi-art{
  --biotint2:#cff1f4;
  --sub-a:#0055ac;
  --sub-b:#4f696b;
  --sub-c:#006fc4;
}
body.senshi--mars .senshi-art{
  --biotint2:#f8f2e3;
  --sub-a:#972a16;
  --sub-b:#7f4998;
  --sub-c:#7d651e;
}
body.senshi--jupiter .senshi-art{
  --biotint2:#f4cfe5;
  --sub-a:#145e04;
  --sub-b:#7d4e69;
  --sub-c:#167702;
}
body.senshi--venus .senshi-art{
  --biotint2:#f8f4e3;
  --sub-a:#694b00;
  --sub-b:#1b2a6b;
  --sub-c:#766200;
}
body.senshi--uranus .senshi-art{
  --biotint2:#e3ecf8;
  --sub-a:#010928;
  --sub-b:#6b6b00;
  --sub-c:#0148a4;
}
body.senshi--neptune .senshi-art{
  --biotint2:#cfd5f4;
  --sub-a:#004752;
  --sub-b:#0a1764;
  --sub-c:#1a725b;
}
body.senshi--pluto .senshi-art{
  --biotint2:#f4cfd5;
  --sub-a:#171219;
  --sub-b:#40141c;
  --sub-c:#c0142c;
}
body.senshi--saturn .senshi-art{
  --biotint2:#f3d5d0;
  --sub-a:#3b2d8a;
  --sub-b:#4a1a14;
  --sub-c:#824ac4;
}
body.senshi--chibimoon .senshi-art{
  --biotint2:#f4ebcf;
  --sub-a:#9d2954;
  --sub-b:#c12543;
  --sub-c:#7f6771;
}
body.senshi--tuxedomask .senshi-art{
  --biotint2:#f4e9cf;
  --sub-a:#101728;
  --sub-b:#c21c28;
  --sub-c:#826a2d;
}
body.senshi--helios .senshi-art{
  --biotint2:#f4eccf;
  --sub-a:#645427;
  --sub-b:#756331;
  --sub-c:#7f6a2b;
}
body.senshi--ceres .senshi-art{
  --biotint2:#f4cfdc;
  --sub-a:#664653;
  --sub-b:#95405e;
  --sub-c:#915168;
}
body.senshi--pallas .senshi-art{
  --biotint2:#cfe8f4;
  --sub-a:#445763;
  --sub-b:#2d6791;
  --sub-c:#346f94;
}
body.senshi--juno .senshi-art{
  --biotint2:#e0f1d3;
  --sub-a:#4b583c;
  --sub-b:#446f24;
  --sub-c:#4d762b;
}
body.senshi--vesta .senshi-art{
  --biotint2:#f4d3cf;
  --sub-a:#664944;
  --sub-b:#a8382d;
  --sub-c:#9e5040;
}
body.senshi--fighter .senshi-art{
  --biotint2:#f4cfd5;
  --sub-a:#20233a;
  --sub-b:#af283e;
  --sub-c:#b3374c;
}
body.senshi--maker .senshi-art{
  --biotint2:#e1d0f3;
  --sub-a:#241f3a;
  --sub-b:#7941b7;
  --sub-c:#7e4ab8;
}
body.senshi--healer .senshi-art{
  --biotint2:#d1f2e4;
  --sub-a:#1c2a26;
  --sub-b:#1e6f4e;
  --sub-c:#247a57;
}
body.senshi--kakyuu .senshi-art{
  --biotint2:#f4e1cf;
  --sub-a:#9c2d24;
  --sub-b:#a44428;
  --sub-c:#985a27;
}
body.senshi--luna .senshi-art{
  --biotint2:#f4eacf;
  --sub-a:#14121f;
  --sub-b:#796026;
  --sub-c:#7d6931;
}
body.senshi--artemis .senshi-art{
  --biotint2:#f4e9cf;
  --sub-a:#48566e;
  --sub-b:#796026;
  --sub-c:#7a6937;
}
body.senshi--diana .senshi-art{
  --biotint2:#f4eacf;
  --sub-a:#5d4f76;
  --sub-b:#98486c;
  --sub-c:#7f6386;
}
body.senshi--galaxia .senshi-art{
  --biotint2:#f4ebcf;
  --sub-a:#6e1c16;
  --sub-b:#815c19;
  --sub-c:#866720;
}
body.senshi--cosmos .senshi-art{
  --biotint2:#e5d6ed;
  --sub-a:#52505b;
  --sub-b:#6a5688;
  --sub-c:#6e617d;
}
body.senshi--moon .senshi-art{
  --biotint2:#f4ebcf;
  --sub-a:#555558;
  --sub-b:#77612f;
  --sub-c:#796c41;
}

/* ---- the alternate block: second beat, falling from the other corner ---- */
.senshi-art .bio-row:nth-child(even){
  background:linear-gradient(200deg, var(--biotint2) 0%, var(--boxbody) 60%)
             no-repeat top right/100% 168px, var(--boxbody);
}

/* ---- the wrap-up ---- */
.senshi-art .bio-run{
  border-left:6px solid var(--bioaccent);
  background:linear-gradient(180deg, var(--biotint) 0%, var(--boxbody) 78%)
             no-repeat top/100% 210px, var(--boxbody);
  box-shadow:0 1px 0 rgba(0,0,0,.03), 0 6px 18px -12px rgba(0,0,0,.35);
}
.senshi-art .bio-run-body{
  display:grid; grid-template-columns:minmax(0,1fr) 208px; gap:22px;
  align-items:start;
}
.senshi-art .bio-run-shot{ margin:0; }
.senshi-art .bio-run-shot .card{ margin:0; }
.senshi-art .bio-run-shot .card img,
.senshi-art .bio-run-shot .card .ph{
  display:block; width:100%; height:auto; aspect-ratio:auto;
  border:2px solid var(--head); box-shadow:3px 3px 0 var(--bioaccent);
  background:var(--box);
}
.senshi-art .bio-run-shot .card .ph{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/4; box-sizing:border-box;
}
.senshi-art .bio-run-shot .card figcaption{
  margin:7px 0 0; font-size:11.5px; letter-spacing:.03em;
  color:var(--ink); opacity:.7; text-align:center;
}
/* the passage no longer has to hold the whole width on its own */
.senshi-art .bio-run p{ max-width:none; }

/* ---- and the heading takes the fuku, re-staged for this ground ---- */
.senshi-art .bio-sub{ color:var(--sub-a); }
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .senshi-art .bio-sub{
    display:inline-block;
    background:linear-gradient(96deg,
      var(--sub-a) 0%, var(--sub-b) 46%, var(--sub-c) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

@media (max-width:760px){
  .senshi-art .bio-run-body{ grid-template-columns:1fr; gap:14px; }
  .senshi-art .bio-run-shot{ width:min(220px,62%); }
}


/* ==========================================================================
   105. THE OUTER FOUR GO DARKER   (10 Sep 2026)
   ==========================================================================
Ashley, on Pluto: "the fuku gradient is great. the color pink for the rest of
the profile is not. please find a darker more complementary color instead of
including the pinkish hue. draw from the fuku gradient."
Ashley, on Saturn: "the purple is fine, it's just kinda light... I like the
darker profiles for the outer senshi."

WHAT WENT WRONG. Section 102's tint routine took the most SATURATED beat of
each fuku and lifted it to L=0.93. For an inner senshi that is right - Mars's
red gives a warm rose, Jupiter's green a pale mint. For Pluto it took the
trim, #c8152e, and a bright crimson lifted to 93% lightness is candy pink.
Her uniform is black and garnet; the crimson is a hem stripe. Saturn's took
#4a1a14, the dark red of her bow, and returned peach - on a page whose boxes
and masthead are violet.

THE RULE FOR THE OUTER FOUR is different, then: the tint comes from the DARK
anchor of the fuku, not the loud one, and it stops at L=0.855 rather than
0.93. Same construction - a wash at the head of the block fading into paper -
but a wash you can name.

Every ink is measured against the darkest painted band, which is the tint at
0% of that gradient, and the script refuses to write below 4.5:1. */
body.senshi--pluto .senshi-art{
  --biotint:#e2c4df;
  --biotint2:#dcc8e3;
  --bioaccent:#5c2038;
  --bioink:#4c1c30;
  --leadink:#241320;
  --bioedge:rgba(92,32,56,.34);
  --box:#eee0ed;
  --boxbody:#f6f1f6;
  --boxedge:rgba(92,32,56,.45);
  --lace:#453546;
  --kindink:#4c1c30;
}
body.senshi--saturn .senshi-art{
  --biotint:#d1c1e8;
  --biotint2:#cac7e6;
  --bioaccent:#5a3aa8;
  --bioink:#43277e;
  --leadink:#2e1c58;
  --bioedge:rgba(90,58,168,.34);
  --box:#e5ddf1;
  --boxbody:#f3f0f7;
  --boxedge:rgba(132,70,205,.45);
  --lace:#5a4d94;
  --kindink:#43277e;
}
body.senshi--uranus .senshi-art{
  --biotint:#ebe4bf;
  --biotint2:#c5d4e7;
  --bioaccent:#5c5c00;
  --bioink:#4d4d00;
  --leadink:#1b2140;
  --bioedge:rgba(97,97,0,.34);
  --box:#f2efdc;
  --boxbody:#f8f7f0;
  --boxedge:rgba(1,72,164,.45);
  --lace:#3c4249;
  --kindink:#4d4d00;
}
body.senshi--neptune .senshi-art{
  --biotint:#c3e4e8;
  --biotint2:#c6cbe7;
  --bioaccent:#0f5c58;
  --bioink:#0d4f4c;
  --leadink:#0a1764;
  --bioedge:rgba(30,131,104,.34);
  --box:#ddf1ee;
  --boxbody:#f0f7f6;
  --boxedge:rgba(43,190,151,.45);
  --lace:#31696c;
  --kindink:#0d4f4c;
}


/* ==========================================================================
   106. THE CHART GOES INSIDE THE PROFILE BOX   (10 Sep 2026)
   ==========================================================================
   Ashley: "wrap naoko's bio under the birth chart box to kill the deadspace.
   maybe the answer is to put the birth chart inside the profile box making it
   the main wrap?"

   THE MEASUREMENT FIRST. The chart box is 1293px tall. The bio column, after
   the rewrite, is 2311. .nk-duo is align-items:stretch, so the right column
   was stretched to 2311 with 1018px of nothing under the chart. Section 77
   had solved the same problem in the other direction, when the LEFT column
   was the short one; a longer biography did not break that fix so much as
   turn it inside out. Two columns of unequal content have dead space by
   construction - the only choice is which side it lands on.

   So the columns go, and her instinct is the fix. The chart is now a float
   inside the profile box, sitting straight after the "who she is" heading:
   the portrait and the stats occupy the 307px channel beside it - the same
   width they had as a column, so neither has to be redrawn - and the prose
   runs down that channel and then carries on underneath once it clears the
   chart's bottom edge. There is no second column left to be empty.

   THE MEASURE IS CAPPED at 62 characters. This is the one cost of the wrap:
   below the float the box is 886px wide, and 886px of 15px text is about 120
   characters a line, roughly double what anyone can track back to the start
   of. The cap leaves a ragged right margin under the chart, which is a
   typographic margin and not dead space - it is not inside a box that had to
   stretch to reach it.

   THE FLOAT IS DECLARED BEFORE the content that wraps it, because that is how
   floats work: a float only affects line boxes that come after it in the
   source. Hence the move in the HTML rather than a CSS-only reorder.

   Scoped to #naoko - id beats the .senshi-art class pairs it is overriding,
   and the wheel exists on no other page. */
#naoko .nk-duo,
#naoko .nk-duo--single{
  display:block; grid-template-columns:none; gap:0; align-items:initial;
}
#naoko .nk-duo-l{
  display:block; max-width:none; gap:0;
  overflow:hidden;            /* the box wraps its own float */
}
#naoko .nk-duo-r{
  display:block; float:right; width:557px;
  margin:0 0 20px 22px; gap:0;
}
#naoko .nk-duo-r .nk-notes-col{ flex:0 1 auto; }

/* flex gap paid for the vertical rhythm; it is a block box now, so the
   children get their margins back */
/* THE PORTRAIT NEEDS AN EXPLICIT WIDTH, and this is the one thing a float
   layout does not do for you. Block boxes are not shortened by a float - only
   the LINE boxes inside them are - so as a full-width block the figure ran
   under the chart and scaled its 440x535 image up to 886px. It gets the 300px
   it had as a column member, which also puts it in the channel rather than
   across it. */
#naoko .nk-duo-l .nk-photo{ margin:0 0 14px; width:300px; max-width:100%; }
#naoko .nk-duo-l .nk-photo img{ width:100%; height:auto; }
#naoko .nk-duo-l .nk-stats{ margin:0 0 16px; max-width:62ch; }
#naoko .nk-duo-l .nk-lead{ margin:0 0 14px; max-width:62ch; }
#naoko .nk-duo-l .nk-lead:last-child{ margin-bottom:0; }
#naoko .nk-col-h{ margin:0 0 12px; }

/* THE PHONE, STATED LAST, for the reason section 77 wrote out at length: a
   later top-level rule of equal specificity beats an earlier one inside a
   media query, because media queries add no specificity. Everything above is
   #naoko-scoped, so the override has to be #naoko-scoped too - and it has to
   come after. Below 900px the float would leave a 30px channel, so it stops
   being a float and becomes a block above the prose. */
@media (max-width:900px){
  #naoko .nk-duo-r{
    float:none; width:auto; margin:0 0 18px;
  }
  #naoko .nk-duo-l .nk-lead{ max-width:none; }
  #naoko .nk-duo-l .nk-photo{ max-width:300px; }
}


/* ==========================================================================
   109. WHAT THE CHART CAN AND CANNOT TELL YOU   (10 Sep 2026)
   ==========================================================================
   Ashley: the details are right but a paragraph is not the way to show them -
   what can safely be assumed, and what is reliable working information.

   The old two paragraphs were making the same argument twice: these parts of
   the chart are solid whatever the hour, these parts are waiting on a birth
   time. Written as prose the reader has to hold both halves in their head and
   sort them. Drawn as two facing columns they sort themselves, and the point
   lands before a word is read.

   GREEN AND PURPLE, and green appears nowhere else in this box, which is why
   it can carry "confirmed" without being mistaken for decoration. 6.3:1 for
   the solid headings and 9.9:1 for the open ones against the #fdfcff the
   notes column paints; the row tints are light enough that #33323e body ink
   stays above 11:1 on both.

   A CONTAINER QUERY, not a media query. This block lives inside the chart,
   which is a 533px float at desktop and a full-width block below 900 - so the
   thing that decides whether two columns fit is the COLUMN's width, not the
   window's. container-type:inline-size on the notes column and the ledger
   stacks at 430px of its own width, which is right at every viewport rather
   than at the two or three I would otherwise have checked.

   THE RODDEN CHIP is the one piece of vocabulary an astrologer looks for
   first, and it is a free lesson for everyone else: X is the standard code
   for a date with no time of birth. It links to rodden-rating.html, which
   already exists. */
#naoko .nk-notes-col{ container-type:inline-size; }

#naoko .nk-rodden{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:9px;
  margin:0 0 14px;
}
#naoko .nk-rodden-chip{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:4px 9px; border-radius:999px; text-decoration:none;
  background:linear-gradient(180deg,#fffaea 0%,#f6e2ad 100%);
  border:1.5px solid #8b7137;
  font-family:"Press Start 2P",monospace; font-size:8px; letter-spacing:.4px;
  color:#5A3268;
}
#naoko .nk-rodden-chip:hover{ background:#fffdf6; border-color:#5A3268; }
#naoko .nk-rodden-k{ opacity:.78; }
#naoko .nk-rodden-v{
  font-size:10px; padding:1px 5px; border-radius:4px;
  background:#5A3268; color:#f6e2ad;
}
#naoko .nk-rodden-t{ font-size:12.5px; line-height:1.5; color:#4a4657; }

#naoko .nk-ledger{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; }
@container (max-width:430px){ #naoko .nk-ledger{ grid-template-columns:1fr; } }

#naoko .nk-led{ border-radius:9px; padding:11px 12px 9px; }
#naoko .nk-led--solid{ background:#eef6f1; border:1px solid rgba(30,107,79,.26); }
#naoko .nk-led--open { background:#f4eff7; border:1px solid rgba(90,50,104,.24); }
#naoko .nk-led-h{
  margin:0 0 9px; padding:0 0 7px;
  font-family:rainyhearts,monospace; font-size:13px; letter-spacing:.04em;
  line-height:1.35; font-weight:400;
}
#naoko .nk-led--solid .nk-led-h{ color:#1e6b4f; border-bottom:1px dashed rgba(30,107,79,.34); }
#naoko .nk-led--open  .nk-led-h{ color:#5A3268; border-bottom:1px dashed rgba(90,50,104,.30); }

#naoko .nk-led-list{ list-style:none; margin:0; padding:0; }
#naoko .nk-led-row{
  display:grid; grid-template-columns:19px minmax(0,1fr); gap:8px;
  align-items:start; padding:7px 0;
}
#naoko .nk-led-row + .nk-led-row{ border-top:1px solid rgba(51,50,62,.09); }
#naoko .nk-led-mark{
  width:19px; height:19px; line-height:18px; text-align:center; border-radius:50%;
  font-family:"Press Start 2P",monospace; font-size:8px;
}
#naoko .nk-led-row--solid .nk-led-mark{ background:#1e6b4f; color:#eef6f1; }
#naoko .nk-led-row--open  .nk-led-mark{ background:#5A3268; color:#f4eff7; }
#naoko .nk-led-body{ display:block; min-width:0; }
#naoko .nk-led-what{
  display:block; font-size:13px; line-height:1.4; font-weight:700; color:#33323e;
}
#naoko .nk-led-why{
  display:block; margin-top:3px;
  font-size:12px; line-height:1.55; color:#4a4657;
}

/* the practical answer, which is the question a visitor actually has */
#naoko .nk-led-use{
  margin:14px 0 0; padding:11px 13px;
  font-size:13px; line-height:1.6; color:#33323e;
  background:#fdf7e8; border-left:4px solid #c6a24e; border-radius:0 8px 8px 0;
}
#naoko .nk-led-use b{ color:#5A3268; }
#naoko .nk-led-foot{
  margin:11px 0 0; padding-top:9px;
  border-top:1px dashed rgba(90,50,104,.22);
  font-size:11.5px; line-height:1.55; color:#6b6577;
}


/* ==========================================================================
   112. THE SMALL PRINT ON A PHONE   (11 Sep 2026)
   ==========================================================================
   From a site-wide audit at 390/768/1440. Three things on all 25 profile
   pages were under any reasonable floor, and all three are rainyhearts, which
   is the site's SMALL pixel face - its ink is about 1.0x the em, where Press
   Start 2P is nearer 1.15x and Raleway 1.25x. So a number that looks survivable
   in the stylesheet is not survivable on glass.

     .rung .src-chip   6px  -> 10px   (8 per page: "manga", "anime", "act")
     .rung-debut       6px  -> 10px   (8 per page: "Act 2", "ep 10")
     .drop-h           9px  -> 12px   (a <summary> - it is a CONTROL, and it
                                       was the smallest text on the page)

   The chips live in the rung ladder, which is a fixed-height row, so the
   padding comes down as the type goes up and the row keeps its height. The
   drop heading gains a little vertical padding instead, because at 9px it was
   also a 30px tap target and the guidance floor is 44. */
.senshi-art .rung .src-chip{ font-size:10px; padding:1px 5px; letter-spacing:.2px; }
.senshi-art .rung-debut{ font-size:10px; line-height:1.35; opacity:.78; }
.senshi-art .drop-h{ font-size:12px; padding:12px 12px; line-height:1.55; }


/* ==========================================================================
   113. THE NAMES, REFITTED TO THE REAL FONT   (11 Sep 2026)
   ==========================================================================
   Every coefficient below was previously fitted while 04B was failing to
   load, so it was fitted against the browser fallback monospace. With the
   face registered (see index.css) 04B turns out to be far wider - "Sailor
   Mercury" is 472px of ink at 40px where the fallback was 352 - and 21 of
   the 25 names overran their banner on a phone.

   Re-derived by measurement, not by eye: each name was rendered at a 40px
   probe in the real face, its ink width divided by 40 to give px-of-ink
   per px-of-font-size, and K set to 0.94/ratio. The 0.94 is what keeps the
   last letter off the edge instead of exactly on it. The 50px allowance
   for the moon glyph and its gap goes to 56px, which is what the lockup
   actually measures. */
body.senshi--fighter .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0596), 40px);
}
body.senshi--healer .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0617), 40px);
}
body.senshi--maker .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0649), 40px);
}
body.senshi--chibimoon .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0682), 40px);
}
body.senshi--mercury .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0797), 40px);
}
body.senshi--neptune .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0800), 40px);
}
body.senshi--jupiter .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0825), 40px);
}
body.senshi--galaxia .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0828), 40px);
}
body.senshi--cosmos .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0858), 40px);
}
body.senshi--kakyuu .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0862), 40px);
}
body.senshi--saturn .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0862), 40px);
}
body.senshi--uranus .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0862), 40px);
}
body.senshi--pallas .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0870), 40px);
}
body.senshi--ceres .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0935), 40px);
}
body.senshi--venus .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0935), 40px);
}
body.senshi--vesta .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0935), 40px);
}
body.senshi--pluto .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0940), 40px);
}
body.senshi--tuxedomask .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.0974), 40px);
}
body.senshi--mars .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.1016), 40px);
}
body.senshi--moon .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.1016), 40px);
}
body.senshi--juno .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.1022), 40px);
}
body.senshi--artemis .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.1628), 40px);
}
body.senshi--helios .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.1948), 40px);
}
body.senshi--diana .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.2335), 40px);
}
body.senshi--luna .senshi-art .masthead-name--lockup .bh-t{
  font-size:clamp(20px, calc((100cqi - 56px) * 0.2725), 40px);
}

/* ---- and on a phone the long names wrap instead of shrinking   (11 Sep 2026) ----
   Two names still overran at 390 after the refit - "Sailor Star Fighter" and
   "Sailor Star Healer" - because they had hit the clamp floor and the floor
   was still too wide for a 266px channel. The choice there is between type so
   small it stops being a title and a second line.

   A second line, obviously. white-space:normal only does anything to a name
   that does not fit; every name that fits on one line is unaffected, so this
   is a strictly better failure mode than shrinking. Section 56's nowrap was
   protecting against overflow going LEFT, which happens because the lockup is
   justified flex-end - but below 900px it is already flex-start, so a wrapped
   line grows to the right into empty space.

   With wrapping available the floor goes back up to 26px: a name that needs
   two lines is better read at 26 than squeezed onto one at 20. */
@media (max-width:900px){
  .senshi-art .banner--plated .masthead-name--lockup .bh-t{
    white-space:normal; overflow-wrap:break-word;
  }
  .senshi-art .masthead-name--lockup .bh-t{ min-height:0; }
  body.senshi--fighter .senshi-art .masthead-name--lockup .bh-t,
  body.senshi--healer  .senshi-art .masthead-name--lockup .bh-t,
  body.senshi--maker   .senshi-art .masthead-name--lockup .bh-t,
  body.senshi--chibimoon .senshi-art .masthead-name--lockup .bh-t{
    font-size:clamp(26px, calc((100cqi - 56px) * 0.0682), 40px);
  }
}


/* ==========================================================================
   114. THE VIDEO SLOT IN A MOVE CARD   (12 Sep 2026)
   ==========================================================================
   A move card can now carry footage. The slot has three states and the CSS
   has to make all three sit in the SAME BOX, because the card is in a grid
   with its siblings and a state change must not reflow the row:

     [data-state="embed"]    poster + play triangle
     [data-state="playing"]  the iframe
     [data-state="stills"]   frame gallery, arrows, dots

   Everything is pinned to one 4:3 stage (640x484 is the source shape of the
   frames, which is 1.322; 4/3 is 1.333 and the 0.8% difference is invisible),
   so switching states never moves the card below it.

   Colours come from the senshi palette vars, so this one block styles the
   slot on all 25 profiles and each one comes out in its own character's
   colours without a per-character rule anywhere. */

.senshi-art .km-vid{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  border:2px solid var(--sen-edge, #2b3a52);
  border-radius:4px;
  overflow:hidden;
  background:var(--sen-box, #10202f);
  container-type:inline-size;
}

/* ---- the poster + play button ---- */
.senshi-art .kmv-play{
  display:block; width:100%; height:100%;
  padding:0; margin:0; border:0; cursor:pointer;
  background:none; position:relative;
}
.senshi-art .kmv-poster{
  display:block; width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.92) brightness(.86);
  transition:filter .25s ease, transform .5s ease;
}
.senshi-art .kmv-play:hover .kmv-poster,
.senshi-art .kmv-play:focus-visible .kmv-poster{
  filter:saturate(1.05) brightness(1);
  transform:scale(1.02);
}
.senshi-art .kmv-tri{
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border-radius:50%;
  background:rgba(12,18,30,.62);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 2px 14px rgba(0,0,0,.42);
  transition:background .2s ease, transform .2s ease;
}
.senshi-art .kmv-tri::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0;
  border-left:19px solid #fff;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  transform:translateX(3px);
}
.senshi-art .kmv-play:hover .kmv-tri,
.senshi-art .kmv-play:focus-visible .kmv-tri{
  background:var(--sen-accent, #2f6fb0);
  transform:scale(1.08);
}

/* ---- the iframe, once asked for ---- */
.senshi-art .kmv-frame-wrap{ position:absolute; inset:0; }
.senshi-art .kmv-iframe{ width:100%; height:100%; border:0; display:block; }

/* ---- the stills gallery ---- */
.senshi-art .kmv-stage{ position:absolute; inset:0; }
.senshi-art .kmv-frame{
  width:100%; height:100%; object-fit:cover; display:block;
}
.senshi-art .kmv-count{
  position:absolute; top:6px; right:8px;
  font-family:"rainyhearts", monospace; font-size:10px;
  color:#fff; background:rgba(10,16,26,.68);
  padding:2px 6px; border-radius:3px; letter-spacing:.4px;
}
.senshi-art .kmv-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:44px; padding:0; cursor:pointer;
  border:0; border-radius:3px;
  background:rgba(10,16,26,.5); color:#fff;
  font-size:13px; line-height:1;
  opacity:.55; transition:opacity .18s ease, background .18s ease;
}
.senshi-art .kmv-arrow:hover,
.senshi-art .kmv-arrow:focus-visible{
  opacity:1; background:var(--sen-accent, #2f6fb0);
}
.senshi-art .kmv-arrow--prev{ left:4px; }
.senshi-art .kmv-arrow--next{ right:4px; }

/* the caption and dots sit BELOW the fixed stage, outside the 4:3 box, so
   the slot needs to not clip them - hence the wrapper is the .km-vid and the
   overflow:hidden above applies only to the media. Re-open it here. */
.senshi-art .km-vid[data-state="stills"]{
  aspect-ratio:auto; overflow:visible; border:0; background:none;
}
.senshi-art .km-vid[data-state="stills"] .kmv-stage{
  position:relative; inset:auto;
  aspect-ratio:4 / 3;
  border:2px solid var(--sen-edge, #2b3a52);
  border-radius:4px; overflow:hidden;
}
.senshi-art .kmv-cap{
  margin:7px 0 0; font-family:"rainyhearts", monospace;
  font-size:12px; line-height:1.45;
  color:var(--sen-ink, #1a2b3d);
}
.senshi-art .kmv-dots{
  display:flex; flex-wrap:wrap; gap:5px; margin-top:7px;
}
.senshi-art .kmv-dot{
  width:11px; height:11px; padding:0; cursor:pointer;
  border:1px solid var(--sen-edge, #2b3a52);
  border-radius:50%; background:transparent;
  transition:background .16s ease, transform .16s ease;
}
.senshi-art .kmv-dot:hover{ transform:scale(1.2); }
.senshi-art .kmv-dot[aria-selected="true"]{
  background:var(--sen-accent, #2f6fb0);
}
.senshi-art .kmv-note{
  margin:6px 0 0; font-family:"rainyhearts", monospace;
  font-size:10px; line-height:1.4; opacity:.72;
  color:var(--sen-ink, #1a2b3d);
}

/* ---- the "show me the frames" escape hatch under the embed ---- */
.senshi-art .kmv-swap{
  position:absolute; left:6px; bottom:6px;
  font-family:"rainyhearts", monospace; font-size:10px;
  padding:3px 7px; cursor:pointer;
  color:#fff; background:rgba(10,16,26,.6);
  border:1px solid rgba(255,255,255,.34); border-radius:3px;
  opacity:.72; transition:opacity .18s ease, background .18s ease;
}
.senshi-art .kmv-swap:hover,
.senshi-art .kmv-swap:focus-visible{
  opacity:1; background:var(--sen-accent, #2f6fb0);
}
.senshi-art .km-vid[data-state="stills"] .kmv-swap{ display:none; }

/* ---- no JS at all: the noscript link is all there is ---- */
.senshi-art .kmv-nojs{
  display:flex; align-items:center; justify-content:center;
  position:absolute; inset:0; text-align:center; padding:14px;
  font-family:"rainyhearts", monospace; font-size:12px; line-height:1.5;
}

/* A move card carrying video is wider than a caption-only one, so it takes a
   row to itself. Note .km-shot is `flex:0 0 auto` (section 4977) - it shrink-
   wraps its child and will NOT accept a width of its own, so the size has to
   be set on .km-vid directly. grid-column is inert if .km-list is flex and
   flex-basis is inert if it is grid; both are declared so the card claims its
   own row either way. */
/* MEASURED, not guessed: .km-list is a GRID - `374px 374px` at 1280 and a
   single `304px` column at 390 - and each .km is a flex row of shot + caption.
   So the card claims its row with grid-column, and the sizing below is a flex
   problem inside that row.

   .km-shot is `flex:0 0 auto` (section 4977), which shrink-wraps its child. A
   `max-width:100%` on .km-vid would then resolve against a parent whose width
   came FROM .km-vid - circular, settling at the full 430px even on a 390px
   phone, where it overruns without registering as document overflow because an
   ancestor clips it. Going the other way (flex:1 1 auto + min-width:0) let it
   collapse to 4px instead, because nothing was holding the width up.

   What works is a basis with a cap at both ends: 430px preferred, allowed to
   shrink (min-width:0 defeats the min-content floor), never larger. Plus wrap
   on the row, so at 304px the shot drops to its own line at full column width
   instead of fighting the caption for space. */
.senshi-art .km--vid{ grid-column:1 / -1; flex-basis:100%; flex-wrap:nowrap; }
/* flex:0 0, not 1 1. Given any shrink factor the caption wins the negotiation
   and squeezes the slot - measured at 283px on a 766px row, with the caption
   taking 450. The slot is the point of this card, so it does not yield. */
.senshi-art .km--vid .km-shot{ flex:0 0 430px; min-width:0; max-width:430px; }
.senshi-art .km--vid .km-vid{ width:100%; }

/* Wrap ONLY where the row is genuinely too narrow to hold both. Left wrapping
   at every width, the caption dropped under a 430px slot on a 766px row and
   left half the card empty; and a slot that refuses to shrink would overrun a
   304px phone column, so here it becomes a full-width block instead. Media
   queries add no specificity, so this has to stay below the rules it
   overrides - which it does, being the end of the sheet. Do not hoist it. */
@media (max-width: 900px){
  .senshi-art .km--vid{ flex-wrap:wrap; }
  .senshi-art .km--vid .km-shot{ flex:1 1 100%; max-width:100%; }
}

@container (max-width: 340px){
  .senshi-art .kmv-tri{ width:46px; height:46px; }
  .senshi-art .kmv-tri::after{ border-left-width:14px; border-top-width:9px; border-bottom-width:9px; }
}


/* ==========================================================================
   115. THE VIDEO SLOT AS A TILE   (13 Sep 2026)
   ==========================================================================
   Section 114 gave the video card its own full-width row with the caption
   beside it. That spends a lot of vertical space per clip and leaves the
   right-hand half of a 766px row mostly empty. This section makes the slot a
   self-contained TILE instead:

     - it sits in the normal 374px grid cell, so two clips sit side by side
     - EVERY piece of text moves inside the picture: the move description,
       the frame caption, the counter, the dots. Nothing hangs below.
     - on a pointer device the description slides out of the way on hover so
       the art is unobstructed; on touch it simply stays put.

   THE TAP-TARGET TRAP, WHICH THIS SITE HAS ALREADY HIT ONCE
   Section 97 exists because the Naoko sticker sat over "what is sailor moon?"
   and made it untappable on every phone - elementFromPoint returned the
   sticker, not the control. An overlay that "moves away on hover" is the same
   bug waiting to happen, because touch has no hover: the caption would sit
   over the play button forever. Two things prevent it here:

     1. the play button fills the whole tile, so any tap anywhere plays
     2. the caption is pointer-events:none, so taps pass straight through it

   Never give the caption a background that needs to be clicked, and never
   make the play target smaller than the tile.

   State comes from data-vstate on the <li>, mirrored up from the slot by
   moves.js, because the caption is a SIBLING of .km-vid and CSS cannot reach
   a parent from a child. */

/* ---- two per row: undo 114's full-row span ---- */
.senshi-art .km--vid{
  grid-column:auto;
  flex-basis:auto;
  position:relative;
}
.senshi-art .km--vid .km-shot{
  flex:1 1 auto; width:100%; max-width:none;
}

/* ---- the stills state goes back inside a fixed 4:3 box ----
   114 let it grow (aspect-ratio:auto; overflow:visible) so the caption and
   dots could sit underneath. They are overlaid now, so the box is fixed again
   and the two states are exactly the same size - which is the point: a card
   that changes state must not reflow the grid row it sits in. */
.senshi-art .km--vid .km-vid[data-state="stills"]{
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:2px solid var(--sen-edge, #2b3a52);
  border-radius:4px;
  background:var(--sen-box, #10202f);
}
.senshi-art .km--vid .km-vid[data-state="stills"] .kmv-stage{
  position:absolute; inset:0;
  border:0; border-radius:0;
}

/* ---- the shared scrim: a readable floor under any overlaid text ---- */
.senshi-art .km--vid .km-cap,
.senshi-art .km--vid .kmv-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  margin:0; padding:26px 11px 9px;
  background:linear-gradient(to top,
    rgba(8,14,24,.93) 0%, rgba(8,14,24,.82) 46%, rgba(8,14,24,0) 100%);
  color:#fff;
  pointer-events:none;           /* taps fall through to the play button */
  transition:transform .28s ease, opacity .28s ease;
}

/* the move description, over the poster */
.senshi-art .km--vid .km-cap{
  display:block; border:0; border-radius:0;
}
.senshi-art .km--vid .km-cap .km-name{
  display:block; color:#fff;
  font-size:13px; line-height:1.25; margin:0 0 1px;
}
.senshi-art .km--vid .km-cap .km-kind{
  display:inline-block; color:#fff; opacity:.72;
  font-size:9.5px; letter-spacing:.6px; margin:0 0 3px;
}
.senshi-art .km--vid .km-cap .km-desc{
  margin:0; color:#fff; opacity:.93;
  font-size:11.5px; line-height:1.42;
}

/* slide it out of the way when the reader is actually looking.
   Pointer devices only - `hover:hover` keeps this away from touch, where the
   caption must stay visible because there is no hover to trigger it. */
@media (hover:hover){
  .senshi-art .km--vid[data-vstate="embed"]:hover .km-cap,
  .senshi-art .km--vid[data-vstate="embed"]:focus-within .km-cap{
    transform:translateY(100%);
    opacity:0;
  }
}
/* while the iframe is up the caption would sit over YouTube's own controls */
.senshi-art .km--vid[data-vstate="playing"] .km-cap{ display:none; }

/* ---- stills state: frame caption takes the scrim, move name goes up top ---- */
.senshi-art .km--vid[data-vstate="stills"] .km-cap{
  top:0; bottom:auto;
  padding:8px 11px 20px;
  background:linear-gradient(to bottom,
    rgba(8,14,24,.9) 0%, rgba(8,14,24,.72) 52%, rgba(8,14,24,0) 100%);
}
.senshi-art .km--vid[data-vstate="stills"] .km-cap .km-kind,
.senshi-art .km--vid[data-vstate="stills"] .km-cap .km-desc{ display:none; }

.senshi-art .km--vid .kmv-cap{
  padding:24px 11px 22px;
  font-size:11.5px; line-height:1.4; color:#fff;
}
.senshi-art .km--vid .kmv-note{ display:none; }   /* no room, and it is chrome */

/* dots ride along the bottom edge, on top of the scrim */
.senshi-art .km--vid .kmv-dots{
  position:absolute; left:11px; right:11px; bottom:7px; z-index:4;
  margin:0; gap:4px;
}
.senshi-art .km--vid .kmv-dot{
  width:8px; height:8px;
  border-color:rgba(255,255,255,.62);
}
.senshi-art .km--vid .kmv-dot[aria-selected="true"]{
  background:#fff; border-color:#fff;
}

/* counter clears the top scrim that now holds the move name */
.senshi-art .km--vid .kmv-count{ top:auto; bottom:7px; right:9px; z-index:4; }

/* ---- the escape hatch: out of the corner the scrim now owns ---- */
.senshi-art .km--vid .kmv-swap{
  left:auto; right:6px; top:6px; bottom:auto; z-index:5;
  opacity:0; transition:opacity .2s ease, background .2s ease;
}
@media (hover:hover){
  .senshi-art .km--vid:hover .kmv-swap,
  .senshi-art .km--vid:focus-within .kmv-swap{ opacity:.9; }
}
@media (hover:none){
  .senshi-art .km--vid .kmv-swap{ opacity:.85; }
}

/* ---- phone: the grid is one column anyway, so the tile just gets wider ----
   Type comes up slightly because the scrim is over busy artwork and 11.5px
   white on animation cels is the floor, not a target. Media queries add no
   specificity - this stays last. */
@media (max-width: 900px){
  .senshi-art .km--vid{ flex-wrap:wrap; }
  .senshi-art .km--vid .km-shot{ flex:1 1 100%; max-width:100%; }
  .senshi-art .km--vid .km-cap .km-name{ font-size:14px; }
  .senshi-art .km--vid .km-cap .km-desc{ font-size:12.5px; }
  .senshi-art .km--vid .kmv-cap{ font-size:12.5px; }
}


/* ==========================================================================
   116. THE SWAP GOES BOTH WAYS   (13 Sep 2026)
   ==========================================================================
   Section 114 hides .kmv-swap in the stills state, which was right when the
   swap only travelled one direction. It now has a return leg, so the hide has
   to be narrowed to the OUTBOUND button only - otherwise the reader who taps
   "view the frames instead" is stranded there with no way back to the video.

   moves.js only builds the return button when the probe found a live video,
   so a genuinely dead embed still shows no route back. Nothing here needs to
   test for that. */
.senshi-art .km-vid[data-state="stills"] .kmv-swap--back{
  display:inline-flex; align-items:center;
}

/* It sits top-right, where the outbound one sits, and stays visible rather
   than appearing on hover: in the stills state it is the only way out, and a
   control you have to discover by hovering is not a way out on a phone. */
.senshi-art .km--vid .kmv-swap--back{
  right:6px; top:6px; left:auto; bottom:auto;
  opacity:.9;
}
@media (hover:hover){
  .senshi-art .km--vid:hover .kmv-swap--back,
  .senshi-art .km--vid:focus-within .kmv-swap--back{ opacity:1; }
}


/* ==========================================================================
   117. MOVES THAT OUTLIVE THEIR ARC   (13 Sep 2026)
   ==========================================================================
   Most of the roster keeps using an attack long after the arc it debuted in -
   Shine Aqua Illusion arrives in R and is still in service most of the way
   through SuperS. The page is organised BY ARC, so the obvious move is to
   repeat the card in every arc it appears in. Don't: that is three copies of
   the same eight images, three tiles to keep in sync, and three places to
   forget when a caption changes. It is exactly the duplication the site's own
   Rule of Three note warns about.

   Instead the card stays in the arc where the move DEBUTS, and carries its
   run as data. Where it debuts is a fact about the story; how long it lasts
   is a fact about the move, so it belongs on the card.

   Only add .km-span to a move that actually outlives its arc. A move that
   appears once and is never seen again should have no span at all - silence
   means "just here", and a label on every card would make the ones that
   matter invisible. */
.senshi-art .km-span{
  display:inline-block;
  margin-left:7px;
  font-family:"rainyhearts", monospace;
  font-size:9.5px;
  letter-spacing:.5px;
  padding:1px 6px;
  border-radius:2px;
  border:1px solid var(--sen-edge, #2b3a52);
  opacity:.8;
  vertical-align:1px;
}

/* over a video tile the scrim is dark, so the chip flips to light-on-dark */
.senshi-art .km--vid .km-cap .km-span{
  color:#fff;
  border-color:rgba(255,255,255,.45);
  opacity:.85;
}
/* the stills state shows only the name in its top scrim - the span would
   crowd a 352px-wide strip, and the frame caption is the useful text there */
.senshi-art .km--vid[data-vstate="stills"] .km-cap .km-span{ display:none; }

@media (max-width: 900px){
  .senshi-art .km-span{ font-size:10px; }
}


/* ==========================================================================
   118. THE MANGA-ONLY SWITCH   (13 Sep 2026)
   ==========================================================================
   Moves that exist only in the manga are HIDDEN, not deleted. The ask was to
   drop them "for now", and a deletion is not a "for now" - the descriptions
   are written, they are the only copy, and getting them back would mean
   rewriting rather than reverting.

   Each such card carries .km--manga. To bring every one of them back on every
   profile, comment out the rule below. That is the whole reversal.

   SPECIFICITY, measured not assumed: the first attempt at this was
   `.senshi-art .km--manga` (0,2,0) and it did nothing, because section 90's
   `.senshi-art .ka-moves .km` (0,3,0) sets display:flex and outranks it no
   matter how far down the sheet it sits. Being last only breaks TIES. So the
   selector below is (0,4,0) - one notch above the rule it has to beat, with
   room to spare if another .ka-moves .km rule lands later.

   display:none rather than visibility or opacity, because .km-list is a grid:
   a hidden-but-present card would still hold its cell, leaving a hole in the
   run and knocking the two-up tiles out of pairing. */
.senshi-art .ka-moves .km.km--manga{ display:none; }


/* ==========================================================================
   119. HER KIT, OUT OF THE ARCS   (13 Sep 2026)
   ==========================================================================
   The items used to live inside arc 1's ka-items block, which filed a
   permanent thing under a temporary heading: she carries the visor from her
   first episode to her last, so "Dark Kingdom" was never the right label for
   it. Transformations and attacks stay in the arcs, because those genuinely
   do belong to a season.

   The wand is the case that made this worth doing. It is ONE object at three
   stages, and while the stages sat in three different arcs the upgrade path -
   the actual interesting fact - was invisible. Now it is a single entry that
   cycles, so the three sprites are read as one thing changing rather than
   three unrelated props. */

.senshi-art .kb-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.senshi-art .kb{
  display:flex; gap:13px; align-items:flex-start;
  padding:13px 14px;
  border:2px solid var(--sen-edge, #2b3a52);
  border-radius:5px;
  background:var(--sen-body, #f4f9fd);
}
.senshi-art .kb-shot{
  flex:0 0 auto; width:92px;
  display:flex; align-items:center; justify-content:center;
  align-self:center;
}
.senshi-art .kb-cap{ min-width:0; }
.senshi-art .kb-name{
  display:block; font-size:13px; line-height:1.3; margin-bottom:4px;
  color:var(--sen-ink, #1a2b3d);
}
.senshi-art .kb-note{
  margin:0; font-family:"rainyhearts", monospace;
  font-size:12px; line-height:1.5;
  color:var(--sen-ink, #1a2b3d);
}

/* ---- the sprites ----
   image-rendering:pixelated, and an INTEGER scale: the markup ships width and
   height at exactly 2x natural size per the site's integer-only pixel rule.
   A fitted or 1.5x scale lands sample boundaries between source pixels and
   the edges go furry, which on 40px-wide art is the whole of the art. */
.senshi-art .kit-sprite{
  display:block; margin:0 auto;
  image-rendering:pixelated;
  max-width:100%; height:auto;
  border:0; background:none;
  filter:drop-shadow(0 2px 3px rgba(10,20,35,.26));
}
.senshi-art .kb-cycle{ cursor:pointer; }
.senshi-art .kb-cycle .kb-frame[hidden]{ display:none; }

/* ---- the wand's per-stage caption ---- */
.senshi-art .kb--wand{ grid-column:1 / -1; }
.senshi-art .kb-stages{ margin-top:9px; }
.senshi-art .kb-stage[hidden]{ display:none; }
.senshi-art .kb-stage{
  border-left:3px solid var(--sen-accent, #2f6fb0);
  padding:1px 0 1px 9px;
}
.senshi-art .kb-stage-n{
  display:inline-block; font-size:12px; line-height:1.3;
  color:var(--sen-ink, #1a2b3d);
}
.senshi-art .kb-stage-era{
  display:inline-block; margin-left:7px;
  font-family:"rainyhearts", monospace; font-size:9.5px; letter-spacing:.5px;
  padding:1px 6px; border-radius:2px;
  border:1px solid var(--sen-edge, #2b3a52); opacity:.8;
  vertical-align:1px;
}
.senshi-art .kb-stage-d{
  margin:4px 0 0; font-family:"rainyhearts", monospace;
  font-size:11.5px; line-height:1.5; opacity:.92;
  color:var(--sen-ink, #1a2b3d);
}

/* ---- dots ---- */
.senshi-art .kb-dots{ display:flex; gap:6px; margin-top:9px; }
.senshi-art .kb-dot{
  width:11px; height:11px; padding:0; cursor:pointer;
  border:1px solid var(--sen-edge, #2b3a52);
  border-radius:50%; background:transparent;
  transition:background .16s ease, transform .16s ease;
}
.senshi-art .kb-dot:hover{ transform:scale(1.2); }
.senshi-art .kb-dot[aria-selected="true"]{ background:var(--sen-accent, #2f6fb0); }

/* The wand shot must clear the WIDEST sprite at full 2x - the Crystal Change
   Rod is 72px natural, so 144px shown, and a 92px column was squeezing it to
   1.28x. A fractional scale on 72px-wide pixel art is exactly the blur the
   integer rule exists to prevent, and it was landing on the most detailed of
   the three. The column is sized to the art; the art is never sized to the
   column. */
.senshi-art .kb--wand .kb-shot{ width:150px; }

@media (max-width: 700px){
  .senshi-art .kb{ padding:11px; gap:11px; }
  .senshi-art .kb-shot{ width:76px; }
  .senshi-art .kb-note, .senshi-art .kb-stage-d{ font-size:12.5px; }

  /* 150px of shot plus a caption does not fit a 280px card, so the wand
     stacks instead of shrinking - keeping 2x rather than trading it for a
     side-by-side that neither half has room for. */
  .senshi-art .kb--wand{ flex-direction:column; align-items:center; }
  .senshi-art .kb--wand .kb-shot{ width:auto; }
  .senshi-art .kb--wand .kb-cap{ width:100%; }
}


/* ==========================================================================
   120. VARIATIONS OFF, BUST, JUNK DRAWER   (13 Sep 2026)
   ==========================================================================
   THE VARIATIONS SWITCH
   Hidden, not deleted, for the same reason as the manga cards in 118: "for
   now" has to be a one-line reversal and the ladders are written content.
   Every profile except Usagi, Chibi Moon and Tuxedo Mask carries
   .variations--off; comment the rule out to bring all 22 back at once.

   Specificity is #id + class deliberately. Nothing currently sets display on
   #variations, so a plain class would work today - but this is a section-level
   kill switch and it must not quietly stop working the next time a .block
   rule lands further down the sheet. Cheap insurance on a rule whose failure
   mode is silent. */
.senshi-art #variations.variations--off{ display:none; }

/* ---- the bust beside the planet reading ----
   Floated so the prose closes around it. It is the person, sitting next to
   the argument about how the planet shows up in her - the one section that
   claims the two are the same thing, and the only illustration it needs. */
.senshi-art .bio-bust{
  float:right;
  width:150px; height:auto;
  margin:0 0 10px 16px;
  shape-outside:margin-box;
  filter:drop-shadow(0 3px 6px rgba(10,20,35,.22));
}
@media (max-width: 620px){
  /* a 150px float in a ~280px column leaves the text in a gutter, so it
     stops floating and centres instead */
  .senshi-art .bio-bust{
    float:none; display:block; margin:4px auto 12px; width:132px;
  }
}

/* ---- kit art that is a picture rather than a sprite ----
   These downscale, so they must NOT be pixelated: nearest-neighbour on the
   way DOWN drops pixels and aliases hard. Smoothing is right here and wrong
   for the wands, which is why they are separate classes. */
.senshi-art .kb-art{
  display:block; max-width:100%; height:auto;
  border-radius:3px;
  border:1px solid var(--sen-edge, #2b3a52);
}
.senshi-art .kb-cycle .kb-art{ cursor:pointer; }
.senshi-art .kb-cycle .kb-art[hidden]{ display:none; }
/* the visor pair and the computer are wide, so those entries take a full row
   and give the picture room instead of squeezing it into a 92px column */
.senshi-art .kb:has(.kb-art){ grid-column:1 / -1; }
.senshi-art .kb:has(.kb-art) .kb-shot{ width:auto; max-width:300px; }

/* ---- the junk drawer ---- */
.senshi-art .junk-row{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end;
  justify-content:center;
}
.senshi-art .junk-gif{
  display:block;
  image-rendering:pixelated;      /* shown at natural size, so this is safe */
  filter:drop-shadow(0 2px 3px rgba(10,20,35,.2));
}
.senshi-art .junk-note{
  margin:14px 0 0; text-align:center;
  font-family:"rainyhearts", monospace;
  font-size:11px; line-height:1.5; opacity:.75;
  color:var(--sen-ink, #1a2b3d);
}


/* ==========================================================================
   121. THREE MORE SWITCHES, AND AN HONEST EMPTY   (13 Sep 2026)
   ==========================================================================
   Same discipline as 118 and 120: switched off, not deleted, so every one of
   these is a one-line reversal and no written copy is lost.

   .kitarc--off      "and throughout" - the catch-all arc. Its Super Computer
                     and Communicator were duplicates of kit entries, and the
                     kit box is now their proper home. Note it still contains
                     Sailor Planet Attack and the two Galactica moves, which
                     is why this hides rather than deletes.
   .jump-link--off   the nav link to #variations. A link to a display:none
                     target is worse than no link: it scrolls nowhere and
                     looks broken. It goes wherever the section goes.

   Element+class specificity on the section switch. Nothing sets display on
   .kitarc today, so a bare class would do - but a kill switch whose failure
   mode is "the thing you hid is still visible" is worth over-specifying. */
.senshi-art section.kitarc--off{ display:none; }
.senshi-art a.jump-link--off{ display:none; }

/* ---- an arc with nothing new in it ----
   Infinity gains no moves: she carries the Star Power Stick and Shine Aqua
   Illusion straight through. An empty <ul> would render as an unexplained
   gap, which reads as a page still under construction. Saying so outright is
   information - it tells the reader the season genuinely added nothing, which
   is a real fact about the story rather than a hole in the site. */
.senshi-art .ka-none{
  margin:0; padding:9px 12px;
  font-family:"rainyhearts", monospace;
  font-size:12px; line-height:1.5;
  color:var(--sen-ink, #1a2b3d); opacity:.8;
  border-left:3px solid var(--sen-edge, #2b3a52);
  background:var(--sen-body, #f4f9fd);
  border-radius:0 3px 3px 0;
}


/* ==========================================================================
   122. THE BUST AS THE FOCAL POINT   (13 Sep 2026)
   ==========================================================================
   The carddass is gone from the wrap-up, and the bust takes the column it
   vacated. That column was 208px and built for a bordered card; a transparent
   cut-out wants neither the border nor the box shadow, and it wants more room,
   because it is now the thing the section is looking at rather than a stamp
   in the corner.

   The earlier float (section 120) is overridden rather than edited out - the
   rule still governs any profile that has not been through this pass yet, so
   this one is scoped to .bio-run-shot and beats it on specificity (0,3,0 to
   0,2,0) only where the bust has actually been re-seated. */
.senshi-art .bio-run-body{ grid-template-columns:minmax(0,1fr) 260px; }

.senshi-art .bust-figure{ margin:0; }
.senshi-art .bio-run-shot .bio-bust{
  float:none;
  width:100%; height:auto;
  margin:0;
  border:0; background:none; box-shadow:none;
  filter:drop-shadow(0 5px 10px rgba(10,20,35,.26));
}
.senshi-art .bust-cap{
  margin:8px 0 0; text-align:center;
  font-family:"rainyhearts", monospace;
  font-size:11.5px; letter-spacing:.03em;
  color:var(--sen-ink, #1a2b3d); opacity:.72;
}

@media (max-width: 860px){
  /* single column below here (section 7320 already collapses the grid), so
     the bust centres at a size that does not swallow the passage */
  .senshi-art .bio-run-shot{ width:min(230px, 60%); margin:0 auto; }
}

/* ---- art in a move card ----
   .km-shot is a 96px slot built for the placeholder tile. A 182px sprite
   needs it to give way. This is anime line art rather than pixel art, so it
   downscales smoothly and must NOT be pixelated - the opposite call from the
   wand sprites, which is why they are separate classes. */
.senshi-art .km-art{
  display:block;
  width:100%; height:auto;
  border:0; background:none;
  filter:drop-shadow(0 2px 4px rgba(10,20,35,.24));
}
.senshi-art .km-shot:has(.km-art){ width:108px; flex:0 0 108px; }


/* ==========================================================================
   123. THE POSE INSIDE THE STATS BOX   (13 Sep 2026)
   ==========================================================================
   REJECTED ALTERNATIVE, recorded so it is not tried again: replacing the
   float with an explicit 3-column grid (picture | facts | facts) to pack the
   short values two-up. It made both problems worse. Three columns leaves the
   fact columns at 175px, which turns "name meaning" into an eight-line ribbon
   and "school" into four; and because seven grid rows of wrapped text stack
   far taller than a 271px picture, the left column emptied out from the
   caption down to "her planet" - a bigger hole than the one it was closing.
   A float is right here precisely because text reflows to full width the
   moment it clears the image, which no grid track will do.
   ==========================================================================
   The henshin frame now sits INSIDE the light-blue facts panel with the rows
   running around it, rather than in a column of its own beside it. That kills
   the dead space the two-column version left - measured at 434px of empty
   column under the picture, because the facts always run longer than a 4:3
   image is tall.

   WHY THE STATS HAD TO STOP BEING A GRID
   .stats--merged was display:grid, and grid items do not interact with floats
   at all - the rows would have sat straight on top of the picture. Normal
   flow was not enough on its own either: a float only shortens LINE boxes,
   not block boxes, so leaving .stat as a block (or flex) row would have run
   every row underneath the float instead of beside it.

   So the chain is: dl goes to block flow, .stat goes to block, and dt/dd go
   INLINE. Only then is there a line box to shorten, and only then does the
   text actually wrap. This is the same trap that scaled the portrait wrong
   back in the chart work - "it is in normal flow" is not the same as "it
   wraps".

   The cost is that a long value no longer hangs indented under its own label;
   it wraps back to the left edge like ordinary prose. That is the trade for
   real wrapping, and at these lengths it reads fine. */
.senshi-art .dossier--noplate .dossier-head{
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
}

.senshi-art .dossier--noplate .dossier-head .stats--merged{
  display:block;                    /* was grid - see above */
}
.senshi-art .dossier--noplate .dossier-head .stat{
  display:block;                    /* was flex */
  margin:0 0 7px;
}
.senshi-art .dossier--noplate .dossier-head .stat dt,
.senshi-art .dossier--noplate .dossier-head .stat dd{
  display:inline;                   /* the whole point: line boxes to shorten */
  margin:0;
}
.senshi-art .dossier--noplate .dossier-head .stat dt{ margin-right:7px; }
/* The sub-heading chips were computing to 58px wide and 307px tall - a text
   chip is neither - and the result was "the person" sitting ON TOP of the
   pose caption instead of beside it. Chased upstream far enough to know it is
   leftover grid sizing (justify-self / grid-column) going strange once the dl
   stopped being a grid, then stopped chasing and set the box explicitly.

   inline-block is the operative choice: an inline-level box sits on the
   SHORTENED line box next to a float, which puts "the person" to the right of
   the picture. A plain block would keep full width and slide underneath it. */
.senshi-art .dossier--noplate .dossier-head .stats-sub{
  display:inline-block;
  width:auto; height:auto; min-height:0;
  max-width:none;
  float:none; clear:none;
  vertical-align:top;
  margin:0 0 10px;
  padding:4px 10px;
  line-height:1.4;
}
/* the second one ("her planet") comes after the float has ended, so it wants
   its own line rather than trailing the last value */
.senshi-art .dossier--noplate .dossier-head .stats-sub:not(:first-of-type){
  display:block; width:fit-content; margin-top:16px;
}

/* ---- the float itself ---- */
.senshi-art .dossier-pose--inbox{
  float:left;
  width:320px;
  margin:2px 22px 12px 0;
  shape-outside:margin-box;
}
.senshi-art .dossier-pose--inbox figure{ margin:0; }
.senshi-art .dossier-pose--inbox .astro-plate img.art--pose,
.senshi-art .dossier-pose--inbox .astro-plate .ph--pose{
  /* (0,4,1) - clears .senshi-art .astro-plate img.art--pose at (0,3,1),
     which forces 3/4 on a landscape frame. Being last in the file only
     settles ties. */
  aspect-ratio:auto;
  width:100%; height:auto; max-width:none;
  margin:0; display:block; object-fit:contain;
}
.senshi-art .dossier-pose--inbox .pose-note{
  display:block; margin:8px 0 0;
  font-size:11.5px; line-height:1.5; font-style:italic;
  color:var(--ink); opacity:.72; text-align:center;
}

@media (max-width: 620px){
  /* a 250px float in a ~280px box leaves one word per line, so it stops
     floating and centres above the rows */
  .senshi-art .dossier-pose--inbox{
    float:none; width:min(260px, 78%); margin:0 auto 14px;
  }
  .senshi-art .dossier-pose--inbox .pose-note{ text-align:center; }
}

/* ==========================================================================
   124. LANDSCAPE ART IN A MOVE CARD   (13 Sep 2026)
   ==========================================================================
   .km-shot:has(.km-art) is 108px, which suits the portrait visor sprite it
   was written for. The HUD frame is 360x200 - landscape - and at 108px wide
   it renders 108x60, too small to read as anything. A wide image needs a wide
   slot, so it declares itself rather than the slot guessing from the file.

   Capped at 168px rather than given the row: these cards sit two-up and the
   caption still needs somewhere to go. */
.senshi-art .km-shot:has(.km-art--wide){ width:168px; flex:0 0 168px; }


/* ==========================================================================
   125. THE PLANET FACTS, OUT OF THE DOSSIER   (13 Sep 2026)
   ==========================================================================
   "her planet" was a second heading plus four stacked rows at the foot of the
   person box - about 175px of height carrying 169px of ink inside a 742px box.
   Stacked full-width rows holding two-word values waste nearly the whole line,
   and that was the bulk of the dead space.

   They now sit under "how Mercury shines through", where the planet argument
   already lives, as one wrapping run of chips: same facts, roughly a fifth of
   the height, and beside the writing that actually uses them.

   Two of the three Virgos went with it. "sun sign" stays in the person box
   because it is a fact about Ami; "exalted" and "Ami's sun" were the same word
   a second and third time. */
.senshi-art .planet-facts{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:6px 10px;
  margin:0 0 14px; padding:0;
}
.senshi-art .planet-facts li{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:3px 10px;
  border:1px solid var(--sen-edge, #2b3a52);
  border-radius:3px;
  background:var(--sen-body, #f4f9fd);
}
.senshi-art .planet-facts .pf-k{
  font-family:"rainyhearts", monospace;
  font-size:10px; letter-spacing:.4px; opacity:.75;
  white-space:nowrap;
}
.senshi-art .planet-facts .pf-v{
  font-size:13.5px; line-height:1.3;
  color:var(--sen-ink, #1a2b3d);
}


/* ==========================================================================
   126. VITALS IN THE MASTHEAD   (13 Sep 2026)
   ==========================================================================
   MEASURED FIRST: the banner is 362px tall, but its height is set entirely by
   the 320px art plate. The titles column beside it held only 155px of content
   inside a 322px content box - about 167px of vertical slack sitting empty,
   because align-items:center parks the name block in the middle and leaves
   air above and below it.

   So the four identity rows move up here and the banner does NOT get taller.
   The page gets shorter by the full height they were occupying in the dossier,
   which is the rare change that costs nothing.

   It is also the right home for them on the merits: the banner is already the
   nameplate - name, civilian name, the cry - and japanese name, birthday, sun
   sign and blood type are the same kind of fact. What is left in the person
   box is the characterful stuff: name meaning, school, iq, likes, dislikes,
   dream.

   Chips rather than rows, matching .planet-facts, so a short value costs a
   chip instead of a whole line. */
.senshi-art .banner .vitals{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:6px 8px;
  margin:12px 0 0; padding:0;
}
.senshi-art .banner .vitals li{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:3px 9px;
  border:1px solid var(--sen-edge, #2b3a52);
  border-radius:3px;
  background:rgba(255,255,255,.42);
}
.senshi-art .banner .vitals .vt-k{
  font-family:"rainyhearts", monospace;
  font-size:9.5px; letter-spacing:.4px; opacity:.72;
  white-space:nowrap;
}
.senshi-art .banner .vitals .vt-v{
  font-size:12.5px; line-height:1.3;
  color:var(--sen-ink, #1a2b3d);
}

@media (max-width: 700px){
  /* the banner stacks below here and has no slack to spend, so the chips
     tighten rather than adding rows to it */
  .senshi-art .banner .vitals{ gap:5px 6px; margin-top:10px; }
  .senshi-art .banner .vitals li{ padding:2px 7px; }
  .senshi-art .banner .vitals .vt-v{ font-size:12px; }
}


/* ==========================================================================
   127. THE LAST 34px   (13 Sep 2026)
   ==========================================================================
   After the vitals moved to the masthead the dossier was 34px short of
   clearing the fold at 1280x900. Rather than cut a seventh fact - the six
   left all earn their place - the gap comes out of leading, which nobody
   reads as missing.

   Six rows at 3px each, the sub-heading margin, the caption gap and the head
   gap: about 40px, for a 34px need. Deliberately not tighter than that; below
   roughly 4px between rows the list stops reading as separate facts. */
.senshi-art .dossier--noplate .dossier-head{ gap:12px; }
.senshi-art .dossier--noplate .dossier-head .stat{ margin:0 0 4px; }
.senshi-art .dossier--noplate .dossier-head .stats-sub{ margin:0 0 6px; }
.senshi-art .dossier-pose--inbox .pose-note{ margin-top:6px; }
.senshi-art .dossier-pose--inbox{ margin-bottom:8px; }


/* ==========================================================================
   128. POSE LEFT, FACTS RIGHT   (13 Sep 2026)
   ==========================================================================
   The float goes away and the box becomes two honest columns: picture left,
   every fact in a run down the right. No more rows wrapping under the picture
   halfway through the list.

   This failed the first time it was tried (section 123's rejected note) and
   works now for one reason: there are six rows instead of sixteen. Back then
   the facts ran 722px against a 286px picture and left 436px of empty column;
   now they run about 330px against the same picture, so the two sides finish
   within ~45px of each other and there is nothing left to strand.

   That is worth remembering as a rule rather than a fix: a two-column split is
   only right when the columns are within shouting distance of the same height.
   Cut the content first, then choose the layout - doing it the other way round
   is what produced the dead space twice.

   The picture is placed explicitly at column 1 row 1; everything else is
   forced to column 2 and auto-places down it. Column 1 rows 2+ simply stay
   empty, which is the intent. */
.senshi-art .dossier--noplate .dossier-head .stats--merged{
  display:grid;
  grid-template-columns:320px minmax(0, 1fr);
  column-gap:26px;
  row-gap:0;
  align-items:start;
}
.senshi-art .dossier-pose--inbox{
  float:none;
  grid-column:1;
  /* SPAN, not row 1. Placed on a single row the picture makes row 1 its own
     height (284px) and every fact lands BELOW it instead of beside it - the
     box measured 476px when the two columns should have made it 284. Spanning
     lets column 2 fill down the side of the picture, which is the whole point
     of two columns. span 20 is just "more rows than this box will ever have". */
  grid-row:1 / span 20;
  width:100%; margin:0;
}
.senshi-art .dossier--noplate .dossier-head .stats-sub,
.senshi-art .dossier--noplate .dossier-head .stat{
  grid-column:2;
}
/* the chip no longer needs to ride a shortened line box - it heads its column */
.senshi-art .dossier--noplate .dossier-head .stats-sub{
  display:inline-block; width:fit-content;
  margin:0 0 8px;
}

@media (max-width: 760px){
  /* one column: picture over the facts */
  .senshi-art .dossier--noplate .dossier-head .stats--merged{
    grid-template-columns:minmax(0, 1fr);
  }
  .senshi-art .dossier-pose--inbox{
    grid-column:1; grid-row:auto;
    width:min(300px, 82%); margin:0 auto 12px;
  }
  .senshi-art .dossier--noplate .dossier-head .stats-sub,
  .senshi-art .dossier--noplate .dossier-head .stat{ grid-column:1; }
}


/* ==========================================================================
   129. THE BIO, SIX ROWS TO TWO   (13 Sep 2026)
   ==========================================================================
   .bio-text p is margin:0 (section 889), which was right when every row held
   a single paragraph. The condensed rows hold two, and without a gap they run
   together into one wall. Only the second paragraph needs the space. */
.senshi-art .bio-row .bio-text p + .bio-p2{ margin-top:12px; }


/* ==========================================================================
   130. THE POSE CAPTION, ON THE PICTURE   (13 Sep 2026)
   ==========================================================================
   The caption used to sit under the frame and cost about 66px of column. It
   now rides the bottom of the picture on a scrim, which reads better and buys
   the height back - the same treatment the video tiles already use, so the
   page keeps one vocabulary for "words over a still".

   The figure is the positioning context, not .dossier-pose--inbox, because
   the caption should hug the IMAGE rather than the column: at narrow widths
   the column is wider than the picture and the scrim would hang past it.

   Inset by 3px on the sides and bottom so the scrim sits inside the image's
   own 3px border instead of painting over it.

   White on rgba(8,14,24,.88) clears 4.5:1 comfortably, which matters because
   these frames are bright - a translucent scrim over pale animation cels is
   exactly where overlaid captions usually fail. */
.senshi-art .dossier-pose--inbox figure{ position:relative; }

.senshi-art .dossier-pose--inbox .pose-note{
  position:absolute;
  left:3px; right:3px; bottom:3px;
  margin:0;
  padding:22px 11px 9px;
  text-align:left;
  font-size:11.5px; line-height:1.45; font-style:italic;
  color:#fff; opacity:1;
  background:linear-gradient(to top,
    rgba(8,14,24,.88) 0%, rgba(8,14,24,.74) 52%, rgba(8,14,24,0) 100%);
  border-radius:0 0 2px 2px;
  pointer-events:none;
}

@media (max-width: 760px){
  .senshi-art .dossier-pose--inbox .pose-note{
    font-size:12px; padding:20px 10px 8px;
  }
}


/* ==========================================================================
   131. THE LEDE AND THE DOOR, INSIDE THE BOX   (13 Sep 2026)
   ==========================================================================
   The name paragraph and the "read the Mercury page" button used to live in
   .dossier-lower, a separate block under the facts panel with its own margins.
   They now sit inside the panel as a full-width tail beneath the picture and
   the facts, which removes that block's spacing entirely.

   The wrapper is a <div> on purpose: a <dl> only permits dt, dd, div and
   script-supporting elements, so dropping the bare <a> in as a direct child
   would have been invalid markup. The div is legal and carries both.

   grid-column:1 / -1 sends it across both tracks. It lands below the picture
   because the picture explicitly spans rows 1-20 and a full-width item cannot
   overlap an explicitly placed one - the empty rows in between collapse to
   zero, so "row 21" is simply the bottom of whichever column ran longer. */
.senshi-art .dossier--noplate .dossier-head .dossier-tail{
  grid-column:1 / -1;
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--sen-edge, #2b3a52);
}
.senshi-art .dossier-tail .dossier-lede p{ margin:0; }

/* Button left, paragraph right, side by side - which also buys back the ~90px
   the button was costing when it sat underneath.

   order:-1 rather than reordering the markup. The DOM keeps paragraph-then-
   link so a screen reader gets the content before an invitation to leave the
   page; only the painting order flips. That is a deliberate (and small)
   visual/focus mismatch on one element - worth it here, not a habit to spread. */
.senshi-art .dossier-tail{
  display:flex; align-items:flex-start; gap:20px;
}
.senshi-art .dossier-tail .astro-door{
  order:-1;
  flex:0 0 auto;
  margin-top:0;
}
.senshi-art .dossier-tail .dossier-lede{ flex:1 1 auto; min-width:0; }

@media (max-width: 700px){
  /* stacked, and the link goes back under the text where it reads naturally */
  .senshi-art .dossier-tail{ flex-direction:column; gap:12px; }
  .senshi-art .dossier-tail .astro-door{ order:0; }
}


/* ==========================================================================
   132. THE CARD: HIERARCHY, FRAME, AND THE NAV INSIDE IT   (13 Sep 2026)
   ==========================================================================
   Five things at once, all of them about the same box.

   1. THE BUTTON GOES BACK RIGHT. Section 131 flipped it left with order:-1 and
      noted the cost: painting order no longer matched DOM order. Undone, so
      that mismatch is gone and the markup and the eye agree again. order:0
      rather than deleting 131's rule, because 131 stays readable as the record
      of what was tried.

   2. TYPE HIERARCHY. Everything in the box was set within a few points of
      everything else, so nothing led. The ladder is now: section chip (13px
      rainyhearts, reversed out of --head) > value (15.5px body) > label (12px
      rainyhearts, 72% ink) > the name paragraph (14.5px). "the person" was
      8px, which is below the size rainyhearts was drawn for - at 8px its
      pixel stems drop below one device pixel and it goes muddy rather than
      small. 13px is the first size it is honest at.

   3. A REAL FRAME. The henshin still was carrying the generic plate treatment
      (2px border, 4px shadow). It is the only picture in the box and it should
      look chosen: cream mat, 3px --head border, a --frontbow ring outside
      that, and a hard --skirt drop. The drop reaches 11px right and down, well
      inside the 26px column gap, so it never touches the facts.

   4. THE CHAPTER NAV MOVES IN. It used to be its own bordered, shadowed panel
      directly under the card - a second box saying the same thing as the box
      above it. Inside, it loses the panel entirely and becomes a plain row of
      chips under a rule. The rule is the divider; the card's own bottom edge
      is what separates all of this from the profile section, so there is no
      second line there.

   5. Section 130 (the caption on the scrim) is now DEAD CODE - the figcaption
      it styled has been removed from the markup. Left in place rather than
      deleted: it is a working recipe for words-over-a-still and the video
      tiles use the same idea, so it is worth keeping legible. */

/* ---- 1. the door, right again ---- */
.senshi-art .dossier-tail .astro-door{ order:0; }

/* ---- 2. the ladder ---- */
.senshi-art .dossier--noplate .dossier-head .stats-sub{
  font-size:13px; letter-spacing:.6px;
  padding:5px 11px; line-height:1.35;
}
.senshi-art .dossier--noplate .dossier-head .stat dt{
  font-size:12px; opacity:.72;
}
.senshi-art .dossier--noplate .dossier-head .stat dd{
  font-size:15.5px; line-height:1.5;
}
.senshi-art .dossier-tail .dossier-lede p{
  font-size:14.5px; line-height:1.62;
}
.senshi-art .dossier-tail .astro-door{ font-size:13px; }

/* ---- 3. the frame ---- */
.senshi-art .dossier-pose--inbox .astro-plate{
  padding:6px;
  background:#fffdf6;
  border:3px solid var(--head);
  box-shadow:
    0 0 0 2px var(--frontbow),      /* thin ring, hugging the border */
    9px 9px 0 2px var(--skirt);     /* the hard drop */
}
.senshi-art .dossier-pose--inbox .astro-plate img.art--pose{
  /* (0,4,1) - the plate's own 2px/--head border and 4px shadow would double
     up inside the new frame. A hairline is enough to seat a pale cel. */
  border:1px solid rgba(0,0,0,.16);
  box-shadow:none;
}

/* ---- 4. the nav, inside ---- */
.senshi-art .dossier--noplate .dossier-head .jump-nav{
  margin:4px 0 0; padding:14px 0 0;
  background:none; border:0; box-shadow:none;
  border-top:2px solid var(--skirt);
  justify-content:flex-start;
  gap:8px;
}

/* ---- 6. the vitals, with weight and glyphs ----
   They were deliberately faint when they moved into the masthead - a
   translucent white chip with a hairline. That was right when they were
   filling slack; it is wrong now that they are the identity block. Solid
   paper, the --head border the rest of the card uses, and the house 2px hard
   shadow, so they read as objects rather than as a caption.

   The glyphs are the site's own 16px zodiac and 20px senshi pixel sets, drawn
   at native size inside a shared 20px slot so the two different sizes still
   line up down the row. pixelated, and never scaled to a non-integer. */
.senshi-art .banner .vitals{ gap:8px 9px; margin-top:14px; }
.senshi-art .banner .vitals li{
  padding:5px 11px; gap:8px;
  border:2px solid var(--head);
  background:var(--paper);
  box-shadow:2px 2px 0 var(--frontbow);
}
.senshi-art .banner .vitals .vt-k{ font-size:11px; opacity:.8; }
.senshi-art .banner .vitals .vt-v{ font-size:14px; }
.senshi-art .vitals .vt-gly{
  width:auto; height:auto; max-width:none;
  margin-right:7px; vertical-align:-4px;
  image-rendering:pixelated; image-rendering:crisp-edges;
}

@media (max-width: 760px){
  .senshi-art .dossier-pose--inbox .astro-plate{
    box-shadow:0 0 0 2px var(--frontbow), 6px 6px 0 2px var(--skirt);
  }
  .senshi-art .dossier--noplate .dossier-head .jump-nav{
    justify-content:center;
  }
}


/* ==========================================================================
   133. TRANSFORMATIONS LEFT, ATTACKS RIGHT   (13 Sep 2026)
   ==========================================================================
   Ashley: "transformations should always be oriented to the left, attacks to
   the right... per season." So the two-up run stops being a plain flow of
   cards and becomes two meaning-bearing columns, the same two in every arc on
   every profile. Once that holds, a reader can compare seasons by scanning
   straight down a column instead of reading each card's kind label.

   auto-fill goes away. minmax(260px,1fr) gave two columns at desktop widths
   but that was a coincidence of the container; a column that only sometimes
   exists cannot carry meaning. Two explicit tracks, always.

   grid-auto-flow:dense is load-bearing, not a tidy-up. Sparse placement never
   moves the cursor backwards, so an attack placed in column 2 pushes a later
   transformation down to row 2 of column 1 - which is exactly arc 4's shape
   before the markup was re-sorted, and would come back the moment any profile
   lists an attack first. Dense backfills the empty cell instead.

   The markup is sorted as well, so this is belt and braces on purpose: the
   CSS fixes the picture, the source order fixes what a screen reader says.

   A season with attacks and no transformation leaves column 1 empty. That is
   the intended reading - "nothing new to transform with this arc" - and it is
   the same statement .ka-none makes in words when a season has neither. */
.senshi-art .ka-moves .km-list{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-flow:row dense;
}
.senshi-art .ka-moves .km.km--item{   grid-column:1; }
.senshi-art .ka-moves .km.km--attack{ grid-column:2; }

@media (max-width: 640px){
  /* one column on a phone: two 130px cards side by side is worse than the
     lost alignment, and the kind label is still on every card. */
  .senshi-art .ka-moves .km-list{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ka-moves .km.km--item,
  .senshi-art .ka-moves .km.km--attack{ grid-column:1; }
}


/* ==========================================================================
   134. THE TWO KEYS   (13 Sep 2026)
   ==========================================================================
   Ashley asked whether the profiles should carry a second section - "how Virgo
   and Gemini shine through" - beside the planet one. One section doing the job
   properly rather than two: a planet is only ever expressed through a sign, so
   splitting them into separate readings would say the same thing twice and
   still not delineate anything.

   Instead the section opens with the planet's two domiciles side by side. Hers
   is lit; the other is greyed and labelled as the half she is missing, which
   for Ami is not a technicality - the Gemini side IS her arc. She starts with
   Mercury's speed and none of its traffic, and the team is what supplies it.

   This structure holds across the roster, which is why it is worth building
   rather than writing per profile: Ami/Virgo, Minako/Libra, Rei/Aries,
   Makoto/Sagittarius, Hotaru/Capricorn - each girl is her own planet in one of
   its two signs, with the other one sitting there unclaimed. The Sun and Moon
   rule one sign each, so Usagi's card is a single key, not a pair; the outer
   planets get their modern rulership the same way.

   The off card is greyed with opacity and a dashed edge rather than a
   different colour: it has to read as "the same kind of thing, not switched
   on", and any second colour in a palette this saturated reads as a second
   category instead. Still at 4.6:1 against the card, checked, because it is
   real copy and not decoration. */
.senshi-art .twokeys{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin:0 0 16px;
}
.senshi-art .tk{
  padding:12px 14px 13px;
  border:2px solid var(--head);
  background:var(--paper);
  box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .tk--off{
  border-style:dashed;
  border-color:var(--accent);
  background:transparent;
  box-shadow:none;
  opacity:.82;
}
.senshi-art .tk-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 8px;
}
.senshi-art .tk-gly{
  width:auto; height:auto; max-width:none;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.senshi-art .tk-sign{
  font-family:rainyhearts, monospace; font-size:16px; letter-spacing:.4px;
  color:var(--head);
}
.senshi-art .tk-role{
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.4px;
  padding:3px 9px;
  color:var(--onskirt); background:var(--skirt);
}
.senshi-art .tk--off .tk-role{
  color:var(--ink); background:transparent;
  border:1px solid var(--accent);
}
.senshi-art .tk-body{
  margin:0; font-size:14px; line-height:1.55; color:var(--ink);
}

@media (max-width: 700px){
  .senshi-art .twokeys{ grid-template-columns:minmax(0, 1fr); gap:10px; }
}


/* ==========================================================================
   135. THE FUKU BAR, SCROLLING   (13 Sep 2026)
   ==========================================================================
   Ashley: "its a lovely divider, while not scroll the colors? Can the scroll be
   ala 16bit style with a 32 frame rate and slight pixeling" - and then: match
   the bar under "her kit" and any other like it to the same thing.

   So there is now ONE bar. The masthead divider under the vitals and every
   .block-h--arcs beam were already the same five-stop gradient written out
   twice; they are now the same animated definition, and a new bar anywhere on
   a profile gets it by adding the selector here rather than by copying stops.

   WHY IT IS A REPEATING GRADIENT AND NOT THE OLD ONE. A single left-to-right
   ramp cannot scroll: slide it and the ends walk into view. A repeating tile
   can loop forever, so the ramp is rebuilt as a 96px tile that runs
   a -> b -> c -> b -> a and therefore meets itself seamlessly at the join.

   THE PIXELING IS HARD STOPS, NOT A FILTER. image-rendering does nothing to a
   CSS gradient - it only governs how a raster is resampled. The chunky look
   has to be built in, so the ramp is quantised into twelve 8px bands with
   color-mix() supplying the in-between steps. Twelve bands is the fewest that
   still reads as a colour ramp rather than a candy stripe; at eight it stopped
   looking like her fuku.

   THE FALLBACK IS AUTOMATIC. A browser without color-mix() throws the whole
   background declaration away as invalid and keeps the smooth five-stop
   gradient from the earlier sections, which is exactly the right degradation:
   the bar is still there, still her colours, just not moving.

   THE FRAME RATE. steps(32) across a 96px tile is a 3px jump, and 3s per tile
   makes that about eleven jumps a second at 32px/s of apparent travel. Read
   literally, "32 frame rate" would be a one-second loop, which at this size
   reads as a flicker in the corner of the eye rather than as scrolling - so
   32 is the step COUNT and the loop is slow. Easy to change: it is one
   duration.

   THE MASK KEEPS THE OLD SHAPE. The original bar faded out towards its end,
   and that fade is what made it a divider rather than a rule. The tile is
   uniform, so the fade moves to a mask over the top - colours scroll
   underneath, the bar still dissolves at the same place.

   Motion is off entirely under prefers-reduced-motion. A permanently moving
   element at the top of every page is precisely what that setting is for. */
.senshi-art{
  --fuku-a2: color-mix(in srgb, var(--name-a) 66%, var(--name-b));
  --fuku-a1: color-mix(in srgb, var(--name-a) 33%, var(--name-b));
  --fuku-b2: color-mix(in srgb, var(--name-b) 66%, var(--name-c));
  --fuku-b1: color-mix(in srgb, var(--name-b) 33%, var(--name-c));
  --fuku-tile:
    repeating-linear-gradient(90deg,
      var(--name-a)  0px  8px,
      var(--fuku-a2)  8px 16px,
      var(--fuku-a1) 16px 24px,
      var(--name-b)  24px 32px,
      var(--fuku-b2) 32px 40px,
      var(--fuku-b1) 40px 48px,
      var(--name-c)  48px 56px,
      var(--fuku-b1) 56px 64px,
      var(--fuku-b2) 64px 72px,
      var(--name-b)  72px 80px,
      var(--fuku-a1) 80px 88px,
      var(--fuku-a2) 88px 96px);
  --fuku-fade:
    linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.42) 80%,
                    rgba(0,0,0,0) 100%);
}

@keyframes fuku-scroll{
  from{ background-position:0 0; }
  to  { background-position:96px 0; }
}

.senshi-art #arcs > .block-h--arcs::after,
.senshi-art .block-h--arcs::after,
.senshi-art .banner--plated .masthead-titles::after{
  background:var(--fuku-tile);
  background-size:96px 100%;
  -webkit-mask-image:var(--fuku-fade);
          mask-image:var(--fuku-fade);
  animation:fuku-scroll 3s steps(32, end) infinite;
}

@media (prefers-reduced-motion: reduce){
  .senshi-art #arcs > .block-h--arcs::after,
  .senshi-art .block-h--arcs::after,
  .senshi-art .banner--plated .masthead-titles::after{ animation:none; }
}


/* ==========================================================================
   136. THE BAR, SMOOTH AGAIN - THE FRAME RATE IS THE OLD-SCHOOL PART
   ==========================================================================
   Section 135 read "16bit" as "quantise the colour". Wrong axis. Ashley: "I
   don't want chunky pixel look, but rather old school framerate and styleing."
   So the twelve hard 8px bands go and the original five-stop ramp comes back;
   what stays stepped is the movement.

   That is the honest reading of the reference too. A 16-bit console did not
   posterise its gradients - the Mode 7 skies and the scrolling water bands in
   those games were as smooth as the palette allowed. What dates them is that
   the scroll advanced a few pixels per frame at a fixed low rate, so the flow
   pulses instead of gliding. Colour smooth, motion stepped.

   TWELVE FRAMES A SECOND, which is the cel-animation rate those games were
   imitating: steps(48) across four seconds. The tile is 320px, so each frame
   moves about 6.7px and the ramp travels 80px/s. Slow enough to be a texture
   in the corner of the eye; stepped enough that you can see it is not CSS
   smoothness.

   THE TILE IS A PALINDROME so it can loop. accent -> frontbow -> backbow ->
   gold and then back down the same stops, which means the join at 320px is
   accent meeting accent and there is no seam to spot. The stop positions in
   the first half are the original percentages (18 / 40 / 74) scaled up, so the
   bar still has the proportions it always had - it just repeats now.

   The gold keeps its low alpha from the original. It was never a solid stop;
   it read as a warm tint over the page, and at full strength it takes over the
   bar. The mask from 135 still does the fade at the end. */
.senshi-art{
  --fuku-tile:
    repeating-linear-gradient(90deg,
      var(--accent)                 0px,
      var(--frontbow)              43px,
      var(--backbow)               96px,
      rgba(230,200,106,.45)       160px,
      var(--backbow)              224px,
      var(--frontbow)             277px,
      var(--accent)               320px);
}

@keyframes fuku-scroll{
  from{ background-position:0 0; }
  to  { background-position:320px 0; }
}

.senshi-art #arcs > .block-h--arcs::after,
.senshi-art .block-h--arcs::after,
.senshi-art .banner--plated .masthead-titles::after{
  background-size:320px 100%;
  animation:fuku-scroll 4s steps(48, end) infinite;
}


/* ==========================================================================
   137. HER STOCK INTRODUCTION   (13 Sep 2026)
   ==========================================================================
   The dub gag came out of the masthead; this is what goes in its place - the
   self-introduction the manga wiki records as her catchphrase, in the wiki's
   own English because that page carries the translation and not the Japanese.

   It is NOT styled like .quote-dub was. The dub line was a joke about the
   localisation and was set at 60% ink to say so; this one is the character
   naming herself and what she fights for, which is the second most important
   sentence in the banner after the henshin cry. So it keeps the smaller size
   but comes back up to 78% and takes an italic - quieter than the cry, not
   apologetic about being there.

   max-width in ch rather than px: it is one long sentence and the titles
   column is fluid, so the measure is what needs holding, not the pixel width.
   Around 52 characters keeps it to two lines at desktop and stops it running
   the full width of the banner, where a line that long stops being a quote and
   starts being a paragraph. */
.senshi-art .masthead-titles .quote-intro{
  margin:7px 0 0; padding:0;
  max-width:52ch;
  font-size:12.5px; line-height:1.5; font-style:italic;
  color:var(--ink); opacity:.78;
}
.senshi-art .banner--plated .masthead-titles .quote-intro{ white-space:normal; }

@media (max-width: 700px){
  .senshi-art .masthead-titles .quote-intro{ max-width:none; font-size:12px; }
}


/* ==========================================================================
   138. THE JUNK DRAWER GETS THE DOILY   (13 Sep 2026)
   ==========================================================================
   Two changes, both Ashley's: the drawer moves up above the "goes deeper"
   foot, and it takes the same lace the kit cards use - doily underneath, the
   gifs in a semi-opaque box on top of it.

   THE MOVE IS THE RIGHT ORDER ANYWAY. The codex foot is the page's exit: the
   deeper links, the last-updated line, the rights notice. Anything below that
   is below the door. The drawer is content, however informal, so it belongs
   inside the page and the foot goes last.

   THE LACE IS THE SAME LAYER AS .ka-items .kit - same file, same 256x190 tile,
   same lace-drift-a at 200s - so the two patterned areas on the page drift
   together instead of at two speeds. Copied as a ::before with the same
   inset:0 -256px -190px 0 overhang, which is what lets the tile translate a
   full period without a bald corner appearing at the bottom right.

   IT IS AT .34, WHICH IS LOWER THAN ANYWHERE ELSE ON THE PAGE. The kit cards
   put this lace on cream; the drawer is a dark --skirt panel, and pale
   scallops at full strength on navy is not a doily, it is a lace curtain lit
   from behind. A third of the way up it reads as texture in the ground, which
   is what it is for.

   THE SEMI-OPAQUE BOX IS THE SECOND LAYER SHE ASKED FOR, and it earns its
   place beyond the look: old web gifs are mostly transparent or white-matted,
   and they were sitting straight on navy, which is the one ground that makes
   a white-matted gif look like a mistake. Cream at 72% gives them something to
   sit on while the lace still passes through.

   72% and not opaque, deliberately - the opposite call from .kit-cap, which
   had to be solid because text was surfacing through the scallops. Nothing in
   this box is type. */
.senshi-art .junkdump{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.senshi-art .junkdump > *{ position:relative; z-index:1; }

.senshi-art .junkdump::before{
  content:"";
  position:absolute; z-index:0; pointer-events:none;
  inset:0 -256px -190px 0;
  background-image:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat;
  background-size:cover, 256px 190px;
  background-color:var(--lace);
  background-blend-mode:normal, luminosity;
  opacity:.34;
  transform:translate3d(0,0,0);
  animation:lace-drift-a 200s linear infinite;
}

/* WHILE I WAS IN HERE: the note under the drawer was 4a-ink on navy - it is
   set in var(--sen-ink) with a dark fallback, on a --skirt panel, so it has
   been sitting at roughly 1.5:1 since the drawer was built. Not something she
   asked for; it was just visible the moment the box above it got lighter.
   It takes --onskirt, the same ink the heading and sub already use. */
.senshi-art .junk-note{ color:var(--onskirt); opacity:.72; }

.senshi-art .junk-row{
  background:rgba(255,253,246,.72);
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  padding:16px 18px;
}

@media (prefers-reduced-motion: reduce){
  .senshi-art .junkdump::before{ animation:none; }
}


/* ==========================================================================
   139. THE CHAPTER LINKS, SPANNING   (13 Sep 2026)
   ==========================================================================
   Ashley: centred, at the bottom of the box, "large enough to span the box",
   bigger font. Section 132 put them in the box; this makes them the row of
   controls she is describing rather than four chips huddled at the left.

   flex:1 1 0 IS THE WHOLE TRICK, and the 0 basis matters. With the default
   `auto` basis each link starts at its own text width and grows by the same
   SHARE of the leftover space, so "through the arcs" stays visibly wider than
   "profile" forever. A zero basis throws the text width away before
   distributing, so all four finish identical - which is what "span the box"
   looks like when the labels are different lengths.

   THE HIDDEN LINK COSTS NOTHING. .jump-link--off (variations, whose section
   is switched off) is display:none, so it is not a flex item and the four
   that remain divide the full width. Turn variations back on for a character
   who has them and it becomes five equal links with no other change.

   13px -> 16px. These are now the largest rainyhearts on the page after the
   headings, which is right: they are the only navigation on a page this long,
   and they were being read as decoration at 13.

   BELOW 640 the basis goes to 140px so they wrap two-and-two instead of
   squeezing four 70px buttons onto a phone. Same rule, different basis - the
   layout is not re-specified. */
.senshi-art .dossier--noplate .dossier-head .jump-nav{
  gap:10px;
  justify-content:center;
}
.senshi-art .dossier--noplate .dossier-head .jump-link{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  font-size:16px;
  padding:11px 10px;
  line-height:1.15;
}

@media (max-width: 640px){
  .senshi-art .dossier--noplate .dossier-head .jump-link{
    flex:1 1 140px;
    font-size:15px;
  }
}


/* ==========================================================================
   140. THE MASTHEAD COLUMN, AND THE FUKU AS TRIM   (13 Sep 2026)
   ==========================================================================
   Ashley: the top box was designed before things were taken out of it and put
   into it, and the heading has not been re-thought since. Two problems,
   measured rather than felt.

   ONE: EVERYTHING WAS RIGHT-ALIGNED. Name, civilian name, cry, introduction
   and the chips all sat flush right in a 428px column, with the art plate a
   hard left edge 36px away. So the block had a ragged edge facing the picture
   and a straight edge facing nothing, and five items of five different lengths
   gave the eye no margin to come back to. Left-aligned, the column has one
   spine running down it that starts where the plate ends. This costs no height
   at all and is the larger of the two fixes.

   TWO: NOTHING LED. Measured at 1280 the ladder ran name 28.7 / civ 17 /
   cry 19 / intro 12.5 - the name only 1.5x the cry, and the civilian name
   sitting just below it in the same body face. Three items at roughly the same
   volume, which is what "the heading could be better" looks like from outside.
   It is now:

     name   28.7   untouched, and see the note below
     cry    19     unchanged; it was always right
     civ    13     rainyhearts, tracked, 72% - a label, not a second title
     intro  12.5   unchanged

   The civilian name going DOWN is the counter-intuitive half and the one that
   does the work. It is the caption to the name, and at 17px in the body face
   it was reading as a competing headline.

   Net height: nothing. The banner measures 362 before and after, and the plate
   is untouched at 320 - she likes the image at the size it is.

   THE CRY GETS THE FUKU AS A LEFT RULE. This is the "use that gradient more"
   thread: 3px, her own stops, vertical. It marks the quote as quoted without
   an indent or a typographic device, and it is the same trim vocabulary as the
   bar under the vitals.

   AND A 3px CAP ON THE CARDS. The person box, the kit entries and the two key
   cards each take a hairline of her fuku across the top edge. Trim, not fill -
   the answer to "can we use the gradient more" that does not put warm colour
   underneath text and force every contrast ratio to be re-checked.

   THE CAPS DO NOT ANIMATE. The bars scroll because there are two of them on a
   page and they read as one moving accent. A dozen cards each scrolling their
   own top edge is a page that will not sit still, so the caps take the same
   colours frozen. --fuku-tile at 320px in a card 700px wide shows a bit over
   two periods, which reads as a ramp rather than as a stripe. */

/* ---- 1. one spine ---- */
.senshi-art .banner--plated .masthead-titles,
.senshi-art .banner--plated .masthead-titles .masthead-name--lockup,
.senshi-art .banner--plated .masthead-titles .masthead-civ,
.senshi-art .banner--plated .masthead-titles .dossier-cry,
.senshi-art .banner--plated .masthead-titles .quote,
.senshi-art .banner--plated .masthead-titles .quote-intro{
  text-align:left;
}
.senshi-art .banner--plated .masthead-titles .masthead-name--lockup{
  justify-content:flex-start;
}

/* ---- 2. the ladder ---- */
/* THE NAME IS NOT TOUCHED, and that is a finding rather than a shrug. Every
   character already has her own line in this stylesheet sizing the name by
   container width - Mercury's is calc((100cqi - 56px) * 0.0797) - so the
   headline is auto-fitted to fill its column on one line without wrapping.
   Enlarging it means either wrapping "Sailor Mercury" onto two lines or
   narrowing the column, and the column has no slack left now the vitals live
   in it. I set a clamp here first and measured no change; the per-senshi rule
   was doing its job. So the heading reads better by moving what is UNDER it,
   not by growing it. */
.senshi-art .banner--plated .masthead-titles .masthead-civ{
  margin:4px 0 0;
  font-family:rainyhearts, monospace;
  font-size:13px; letter-spacing:.8px; line-height:1.3;
  color:var(--ink); opacity:.72;
}
.senshi-art .banner--plated .masthead-titles .dossier-cry{
  margin:11px 0 0;
  padding-left:12px;
  /* NOT border-image. `border-image: <tile> 1 / 3px` sets the image width on
     all four edges regardless of border-width, so the first attempt drew a
     complete 3px box around the quote instead of a rule down its left side.
     A background does exactly one edge and nothing else.

     The tile itself is horizontal, and squeezed into a 3px-wide strip it
     collapses to one flat colour, so the rule gets its own vertical ramp off
     the same stops. */
  background:linear-gradient(180deg,
      var(--accent) 0%, var(--frontbow) 32%, var(--backbow) 58%,
      rgba(230,200,106,.65) 100%) left top / 3px 100% no-repeat;
}

/* ---- 3. the cap ---- */
.senshi-art .dossier-card,
.senshi-art .kb,
.senshi-art .tk{
  position:relative;
}
.senshi-art .dossier-card::before,
.senshi-art .kb::before,
.senshi-art .tk::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--fuku-tile);
  background-size:320px 100%;
  pointer-events:none;
  z-index:2;
}

@media (max-width: 700px){
  .senshi-art .banner--plated .masthead-titles .dossier-cry{ padding-left:10px; }
}


/* ==========================================================================
   141. THE STICKER WALL   (13 Sep 2026)
   ==========================================================================
   Ashley: "let the junk drawer grow, and don't shrink anything placed inside
   it. it's a silly sticker wall."

   So the constraint inverts. Everywhere else on this site an image is told to
   fit its container; here the container is told to fit the images. A sticker
   wall that resizes its stickers is a gallery, and a gallery is the opposite
   of what she is describing.

   WHAT WAS ACTUALLY SHRINKING THEM. Nothing in the drawer - the site-wide
   `img{max-width:100%}`. It has not fired yet because the five gifs in there
   are small, but the first 600px scan she drops in would have been squeezed
   to the row width without a word. max-width:none turns that off inside the
   drawer and nowhere else, and flex:0 0 auto stops a crowded row compressing
   them instead.

   THE CLIP HAD TO GO, AND THAT MEANT REDOING THE LACE. Section 138 gave the
   drawer overflow:hidden, because the doily layer is deliberately oversized -
   inset:0 -256px -190px 0 - so it can translate a full tile without a bald
   corner appearing. Height was never the problem: the drawer is height:auto
   and grows with its content whatever overflow says. Width is: a sticker
   wider than the drawer would have been quietly cut off at the edge, which
   is exactly the failure she would hit first and hardest.

   A ::before cannot clip itself - overflow governs an element's children, and
   this one has none - so the fix is to stop needing the overhang. The layer
   goes back to inset:0 and drifts by BACKGROUND-POSITION rather than by
   transform, which moves the tile inside a box that never leaves the drawer.
   Slightly cheaper to composite too, though that is not why.

   No max-width on the row and no ceiling on the wall. Drop in something
   enormous and it will be enormous - correct here, wrong anywhere else. */
@keyframes lace-drift-bg{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 0, 256px 190px; }
}
.senshi-art .junkdump{ overflow:visible; }
.senshi-art .junkdump::before{
  inset:0;
  transform:none;
  animation:lace-drift-bg 200s linear infinite;
}
/* A sticker wider than the drawer has to go somewhere. It must not shrink,
   and with the clip gone it would otherwise spill past the drawer and give
   the whole PAGE a horizontal scrollbar - measured: a 900px sticker in an
   820px drawer pushed the document 80px wide. overflow-x:auto keeps the
   overflow inside the box and hands it a scrollbar of its own, so the
   sticker stays full size, the page stays put, and the wall just scrolls.
   Wrapping still handles every normal case; this only engages when one
   item alone is wider than the row. */
.senshi-art .junk-row{ overflow-x:auto; }
.senshi-art .junk-row > li{ flex:0 0 auto; max-width:none; }
/* max-width only. width:auto/height:auto was the first attempt and it was
   wrong in a way that would have bitten her later: it overrides the width
   and height ATTRIBUTES on the img, so a sticker she deliberately sized up
   in the markup would snap back to its intrinsic pixels. Turning off the
   site-wide max-width is the entire fix; whatever the markup asks for is
   then what it gets. */
.senshi-art .junk-gif{ max-width:none; }

@media (prefers-reduced-motion: reduce){
  .senshi-art .junkdump::before{ animation:none; }
}


/* ==========================================================================
   142. THE DIGNITIES STRIP   (13 Sep 2026)
   ==========================================================================
   Under "how <planet> shines through", where the old planet chips used to sit:
   domicile, detriment, exaltation, fall, sect, nature and joy, generated from
   astro-notes/planet-notes.json rather than typed per page.

   It is deliberately QUIETER than the vitals chips in the masthead, which
   share its shape. Those are identity - who she is - and they are solid paper
   with a 2px border and a hard shadow so they read as objects. These are
   reference: a reader looks something up in them and goes back to the prose.
   Same chip vocabulary, one weight down - hairline border, no shadow - so the
   page does not end up with two rows of equally loud chips saying different
   kinds of thing.

   THE SIGN VALUES CARRY THE PIXEL GLYPH, at 16px native alongside the sign's
   name. Not instead of the name: a glyph strip is a quiz for anyone who has
   not memorised twelve symbols, and the audience for this site includes people
   three weeks into their first class.

   A MODERN BODY GETS A SENTENCE, NOT AN EMPTY STRIP. Uranus, Neptune and Pluto
   have no domicile, exaltation, sect or joy in the tradition, and the generator
   emits .dg-none saying exactly that instead of a row of blanks or - worse -
   modern values dressed in traditional labels. That sentence is the whole
   reason the strip is worth having on those three pages.

   .twokeys--one is the Moon and the asteroids: one card, full width, no
   greyed partner, because the Moon rules a single sign and an asteroid rules
   nothing. A lone card in a two-column grid would sit in the left half with a
   hole beside it that means nothing. */
.senshi-art .dignities{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:6px 8px;
  margin:0 0 16px; padding:0;
}
.senshi-art .dignities li{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 10px;
  border:1px solid var(--backbow);
  border-radius:3px;
  background:var(--paper);
}
.senshi-art .dignities .dg-k{
  font-family:rainyhearts, monospace;
  font-size:10.5px; letter-spacing:.4px; opacity:.7;
  white-space:nowrap;
}
.senshi-art .dignities .dg-v{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; line-height:1.3; color:var(--ink);
}
.senshi-art .dignities .dg-gly{
  width:auto; height:auto; max-width:none;
  margin-right:2px; vertical-align:-3px;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.senshi-art .dg-none{
  margin:0 0 16px; padding:9px 12px;
  border-left:3px solid var(--accent);
  background:var(--paper);
  font-size:13.5px; line-height:1.5; color:var(--ink);
}

/* ---- the keys, now at the foot of the section ---- */
.senshi-art .twokeys{ margin:18px 0 0; }
.senshi-art .twokeys--one{ grid-template-columns:minmax(0, 1fr); }

@media (max-width: 700px){
  .senshi-art .dignities{ gap:5px 6px; }
  .senshi-art .dignities li{ padding:3px 8px; }
}


/* ==========================================================================
   143. A LITTLE DEPTH, OUTSIDE THE BOXES   (13 Sep 2026)
   ==========================================================================
   Ashley: "not so much within the boxes... a few places that look especially
   flat." So nothing here changes what is inside a card. Two things change
   around them.

   WHY NOT A DROP SHADOW. The obvious move is a soft blurred shadow under each
   card, and it would be wrong for this site: every shadow already on these
   pages is a hard offset with zero blur - 3px 3px 0 on the chips, the buttons,
   the jump links, the drawer. One blurred shadow anywhere makes every hard one
   look like a mistake. So the depth is built the way a 16-bit interface built
   it: a 1px light edge along the top of a panel and a darker line under it, so
   the panel reads as raised by exactly one pixel.

   THE GROUND GETS A GRADIENT. The page behind the cards is a single flat wash
   the whole way down, which is most of the flatness - a card cannot look
   raised off a surface that has no surface. A very slight vertical ramp, about
   4% of value from top to bottom, is enough for the eye to read a plane. It is
   deliberately below the threshold where anyone would call it a gradient.

   Held to two changes on purpose. She said the littlest more, and the failure
   mode here is a page where everything is slightly embossed. */
.senshi-art .bio-row,
.senshi-art .dossier-card,
.senshi-art .elsecard,
.senshi-art .kitarc{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 0 rgba(43,58,82,.09);
}

.senshi-art{
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,0) 22%,
    rgba(43,58,82,.045) 100%);
}

/* the strip needed air once it moved under the keys */
.senshi-art .twokeys + .dignities{ margin:16px 0 0; }


/* ==========================================================================
   144. PICTURE AND PARAGRAPH: THE TEXT WRAPS   (13 Sep 2026)
   ==========================================================================
   Standing rule, Ashley: "I expect text to wrap around any box that is
   'picture and paragraph' ... allow the box grow or shrink if the picture is
   swapped out." So this is not a fix to one row, it is the house rule for the
   pattern, and anything built after it follows.

   THREE THINGS HAD TO CHANGE TOGETHER, and leaving any one out does nothing.

   1. THE ROW STOPS BEING A GRID. Grid items ignore floats completely - a
      floated child of a grid container just sits in its cell. Every one of
      these rows was a two-column grid, which is precisely why nothing has
      ever wrapped. They go to block flow.

   2. THE PICTURE MOVES FIRST IN THE SOURCE. A float only shortens the line
      boxes that come after it. With the picture written after the paragraph,
      the first paragraph renders full width and the picture drops below it -
      which looks like the float "not working" and is actually correct
      behaviour. The markup is reordered rather than papered over with CSS.

   3. THE SIZE COMES OFF THE PICTURE. No fixed column, no percentage width on
      the image: width:auto and height:auto, so a swapped-in picture brings its
      own dimensions and the row grows or shrinks around it. The only limit is
      max-width, which stops a wide scan taking the whole column and leaving a
      one-word rag down the side - at 46% the text still has a readable measure
      next to it.

   PLACEHOLDERS ARE THE EXCEPTION, because an empty div has no intrinsic size
   to take. They get a default 4:3 box purely so there is something to lay out
   against; the moment a real picture replaces one, rule 3 takes over.

   The row needs a clearfix. A float does not extend its parent, so without one
   a short paragraph beside a tall picture leaves the picture hanging out of
   the bottom of its own tinted panel.

   Below 700 the float goes away entirely. Wrapping text around a picture in a
   300px column gives you four words a line down one side, which is worse than
   no wrap at all. */

/* ---- 1. block flow, and a clearfix ---- */
.senshi-art .bio-row,
.senshi-art .bio-run-body{
  display:block;
}
.senshi-art .bio-row::after,
.senshi-art .bio-run-body::after{
  content:""; display:block; clear:both;
}

/* ---- 2. the float, alternating sides ---- */
.senshi-art .bio-row > .bio-shot,
.senshi-art .bio-run-body > .bio-run-shot{
  float:right;
  width:auto; max-width:min(46%, 380px);
  margin:2px 0 14px 24px;
}
.senshi-art .bio-row:nth-child(even) > .bio-shot{
  float:left;
  margin:2px 24px 14px 0;
}

/* ---- 3. the picture brings its own size ---- */
.senshi-art .bio-shot img,
.senshi-art .bio-run-shot img,
.senshi-art .bio-run-shot .bust-figure,
.senshi-art .bio-run-shot .bio-bust{
  display:block;
  width:auto; height:auto; max-width:100%;
  float:none; margin:0;
}
/* an empty placeholder has no size of its own to take */
.senshi-art .bio-shot .ph--bioshot{
  width:280px; max-width:100%; aspect-ratio:4 / 3;
  height:auto;
}

@media (max-width: 700px){
  .senshi-art .bio-row > .bio-shot,
  .senshi-art .bio-row:nth-child(even) > .bio-shot,
  .senshi-art .bio-run-body > .bio-run-shot{
    float:none; max-width:none;
    width:min(300px, 82%); margin:0 auto 14px;
  }
}


/* ==========================================================================
   145. EVERY TELLING, AND THE STORY THAT IS HERS ALONE   (13 Sep 2026)
   ==========================================================================
   Ashley: "elsewhere" makes the anime the default and everything else a
   detour, which is not how she wants these pages to read. The section is now
   "every telling" - the landing page's own word, with no telling promoted -
   and the 90s anime has a drop in it like all the others. The anchor stays
   #elsewhere so the jump link and any existing link still land.

   EACH DROP TAKES A PICTURE, and it follows rule 144: the picture is first in
   the source, it floats, the prose wraps around it, and its size comes off
   the picture rather than off a column. Manga panels are the ones she wants
   here first; these are placeholders sized 4:3 until they arrive.

   THE SOLO THREAD reuses the shared-thread furniture from sailor-moon.html
   with one class changed. .thread--solo drops the "also carried by" line -
   there is nobody to name, and that absence is the entire point of the box:
   she is the only guardian with a story to herself. The kind label says so
   rather than leaving the reader to notice. */
.senshi-art .tell-shot{
  float:right;
  width:auto; max-width:min(44%, 320px);
  margin:0 0 12px 20px;
}
.senshi-art .tell-shot .ph--tellshot{
  width:260px; max-width:100%; aspect-ratio:4 / 3; height:auto;
}
.senshi-art .tell-shot img{
  display:block; width:auto; height:auto; max-width:100%;
}
.senshi-art .drop-body::after{ content:""; display:block; clear:both; }

/* ---- the solo thread ---- */
.senshi-art .thread-body{
  display:block;                    /* was a grid; rule 144 again */
}
.senshi-art .thread-body::after{ content:""; display:block; clear:both; }
.senshi-art .thread-body > .thread-shot{
  float:right;
  width:auto; max-width:min(42%, 340px);
  margin:0 0 14px 22px;
}
.senshi-art .thread-body > .thread-shot .ph--threadshot{
  width:300px; max-width:100%; aspect-ratio:4 / 3; height:auto;
}
.senshi-art .thread--solo .thread-kind{
  background:var(--skirt); color:var(--onskirt);
}

@media (max-width: 700px){
  .senshi-art .tell-shot,
  .senshi-art .thread-body > .thread-shot{
    float:none; max-width:none;
    width:min(300px, 82%); margin:0 auto 12px;
  }
}


/* ==========================================================================
   146. THE PANEL MOVES OUT ONE LEVEL, AND THE HIGHLIGHT   (13 Sep 2026)
   ==========================================================================
   Ashley: the chapter links should be INSIDE the box, under the Mizuno
   paragraph and the button. They already were, in the markup - and that was
   the whole trouble. .dossier-card and .dossier-head are both transparent;
   the pale panel with the blue border was painted by the <dl> itself. The nav
   is a sibling of the dl, so it sat on the page ground below the panel and
   read as a separate strip no matter what the DOM said.

   Nothing moves in the markup. The panel moves out one level, from the dl to
   .dossier-head, and the dl goes transparent. Everything in the head - the
   picture, the facts, the tail, the nav - is now on one surface.

   The nav keeps its rule, which is now a divider INSIDE a panel rather than a
   line floating between two things, and it does the job it was drawn for.

   The dossier's trailing space comes down too, so the profile heading sits up
   against the box instead of 26px below it, which is what she was really
   describing.

   ---- THE TEXT HIGHLIGHT ----
   Nothing on the site set ::selection, so dragging over Mercury's page gave
   the browser's grey. It takes --frontbow with --ink on top: her own bow
   colour, the brightest stop in the fuku, and dark text over it rather than
   white - measured 13.6:1 for Mercury, where white on it would have been 1.3
   and unreadable. Scoped to .senshi-art so a senshi page highlights in her own
   colours and the rest of the site keeps the browser default.

   ROLLOUT NOTE: --frontbow is light for every senshi I have checked, but this
   pairs dark ink with it on all 25 sight-unseen. Spot-check the darker
   palettes - Pluto, Saturn, Uranus - when the rollout runs. */
.senshi-art .dossier--noplate .dossier-head{
  background:var(--wash);
  border:2px solid var(--head);
  box-shadow:3px 3px 0 rgba(0,0,0,.12),
             inset 0 1px 0 rgba(255,255,255,.9);
  padding:16px 18px;
}
.senshi-art .dossier--noplate .dossier-head .stats--merged{
  background:none; border:0; box-shadow:none; padding:0;
}
.senshi-art .dossier--noplate .dossier-head .jump-nav{
  margin:14px 0 0; padding:14px 0 0;
}
.senshi-art .dossier--noplate .dossier-card{ padding-bottom:0; }
.senshi-art .dossier--noplate{ padding-bottom:8px; }
.senshi-art .dossier + .block .block-h{ margin-top:10px; }

.senshi-art ::selection{
  background:var(--frontbow);
  color:var(--ink);
}


/* ==========================================================================
   147. RAINYHEARTS IS TOO SMALL, EVERYWHERE   (13 Sep 2026)
   ==========================================================================
   Ashley named two places - the stat labels beside the henshin picture and the
   chips in the top box - and the honest answer is that it is the whole label
   family, so all of it moves together rather than two spots getting fixed and
   the rest staying unreadable.

   IT WAS TWO PROBLEMS STACKED, and the size was the smaller one. Rainyhearts
   is a pixel face: its stems are one pixel wide and they hold up until the
   grid it was drawn on stops landing on device pixels, which is somewhere
   around 13-14px. Every one of these labels was under that. THEN they were
   dimmed - .7 to .8 opacity - so a one-pixel stem was being drawn at 70%
   strength as well as at the wrong size. Dimming is how you make a label
   secondary in a normal typeface; on a pixel font it is how you make it
   disappear.

   So each one goes up in size AND up in opacity, and stays secondary by being
   smaller than its value rather than by being faded:

     "the person" chip   13   -> 15
     stat labels         12   -> 14      .72 -> .92
     masthead chips      11   -> 13.5    .80 -> .95
     civilian name       13   -> 15      .72 -> .88
     dignity labels      10.5 -> 13      .70 -> .92
     key role chips      11   -> 12.5

   The dignity labels were the worst of them at 10.5px and 70%, which is under
   half the ink the face needs. She did not name that strip; it is the same
   bug.

   The banner is measured after this, not assumed - it had no vertical slack
   left once the vitals moved into it. */
.senshi-art .dossier--noplate .dossier-head .stats-sub{ font-size:15px; }
.senshi-art .dossier--noplate .dossier-head .stat dt{ font-size:14px; opacity:.92; }
.senshi-art .banner .vitals .vt-k{ font-size:13.5px; opacity:.95; }
.senshi-art .banner--plated .masthead-titles .masthead-civ{ font-size:15px; opacity:.88; }
.senshi-art .dignities .dg-k{ font-size:13px; opacity:.92; }
.senshi-art .tk-role{ font-size:12.5px; }


/* ==========================================================================
   148. THE DIGNITIES BECOME A PLATE   (13 Sep 2026)
   ==========================================================================
   Ashley: keep the information, redesign it - "it looks like buttons and
   nothing looks really organized."

   She is right about why. Seven chips in a wrapping row is the same shape as
   the vitals in the masthead and the same shape as a row of jump links, so the
   eye read them as things to press. Worse, a wrapping row has no columns: the
   labels landed wherever the previous value happened to end, so nothing lined
   up with anything and the strip had no internal order at all.

   IT IS NOW A PLATE, and the two things that fix it are the grid and the
   grouping.

   THE GRID. Every row is label | value on the same 96px track, so seven
   labels form one straight edge and seven values another. That alignment is
   most of what "organized" means here; it is what a spec plate or a card in a
   reference book does and it is why those are scannable.

   THE GROUPING. The seven are not one list, they are two kinds of fact.
   DIGNITY is where the planet stands in the zodiac - domicile, exaltation,
   detriment, fall - and it is ordered strong to weak rather than in the order
   the data happened to be in. CONDITION is what the planet is like - sect,
   nature, joy. Splitting them into two headed columns halves the length of the
   plate and tells the reader which question each row answers.

   The header bar is the same reversed rainyhearts as "the person" in the box
   above, so the page has one way of saying "this is a labelled thing" instead
   of inventing a second. Dotted rules between rows, solid under the group
   headings: the dots are light enough to guide the eye across a wide gap
   without drawing a table.

   One column below 620, where a 96px label track plus a value plus a second
   column stops fitting. */
.senshi-art .dgplate{
  margin:18px 0 0;
  border:2px solid var(--head);
  background:var(--paper);
  box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .twokeys + .dgplate{ margin-top:18px; }

.senshi-art .dgplate-h{
  margin:0; padding:6px 12px;
  font-family:rainyhearts, monospace;
  font-size:13px; letter-spacing:.6px;
  color:var(--onskirt); background:var(--head);
}
.senshi-art .dgplate-cols{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 26px;
  padding:13px 15px 14px;
}
.senshi-art .dgset-h{
  margin:0 0 6px; padding-bottom:5px;
  font-family:rainyhearts, monospace;
  font-size:12.5px; letter-spacing:.5px;
  color:var(--head); opacity:.85;
  border-bottom:1px solid var(--backbow);
}
.senshi-art .dglist{ margin:0; }
.senshi-art .dg-row{
  display:grid; grid-template-columns:96px minmax(0, 1fr);
  gap:10px; align-items:baseline;
  padding:5px 0;
  border-bottom:1px dotted var(--backbow);
}
.senshi-art .dg-row:last-child{ border-bottom:0; padding-bottom:0; }
.senshi-art .dg-row dt{
  margin:0;
  font-family:rainyhearts, monospace;
  font-size:13px; letter-spacing:.3px;
  color:var(--head); opacity:.92;
}
.senshi-art .dg-row dd{
  margin:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 12px;
  font-size:14px; line-height:1.35; color:var(--ink);
}

@media (max-width: 620px){
  .senshi-art .dgplate-cols{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .senshi-art .dg-row{ grid-template-columns:88px minmax(0, 1fr); }
}


/* ==========================================================================
   149. THE DOILY, IN TWO MORE PLACES   (13 Sep 2026)
   ==========================================================================
   Ashley wants more of the lace. The constraint is the one already written
   into section 88: a doily goes UNDER objects and shows around their edges.
   Put it behind running prose and it surfaces between the lines exactly where
   the eye wants a clean gap, which is why the page-level field was switched
   off and why .kit-cap had to go fully opaque.

   So it goes behind the two places on a profile that are made of separate
   opaque panels with real gutters between them, and nowhere else:

     .threads-block   one card on a mat - the most literal doily on the page
     #elsewhere       five drops with 10px between them; lace in the gutters

   NOT behind .bio-row, .dossier-head or .dgplate. Those are surfaces with
   type sitting directly on them, and adding lace under them is the mistake
   section 88 already made and undid once.

   Same tile, same 200s period as the kit cards and the junk drawer, so every
   patterned area on the page drifts as one thing. It drifts by
   background-position rather than by transform, which is what lets the layer
   sit at inset:0 and not need the overhang - and so the container does not
   need overflow:hidden, and nothing inside it can be clipped.

   .18 and .22 - lower than the kit cards, because these sit on the page's own
   pale ground rather than on cream, and the same lace reads much louder
   there. Measured against the drops' own background rather than guessed: at
   .3 the pattern was visible THROUGH the panel edges. */
.senshi-art .threads-block,
.senshi-art #elsewhere{
  position:relative;
  isolation:isolate;
  padding:16px 18px 18px;
  border:1px solid var(--backbow);
}
.senshi-art .threads-block > *,
.senshi-art #elsewhere > *{ position:relative; z-index:1; }

.senshi-art .threads-block::before,
.senshi-art #elsewhere::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat;
  background-size:cover, 256px 190px;
  background-color:var(--lace);
  background-blend-mode:normal, luminosity;
  animation:lace-drift-bg 200s linear infinite;
}
.senshi-art .threads-block::before{ opacity:.22; }
.senshi-art #elsewhere::before{ opacity:.18; }

/* the objects on the mat have to be opaque or the lace comes through them */
.senshi-art #elsewhere .drop{ background:var(--paper); }
.senshi-art .threads-block .thread{ background:var(--paper); }

@media (prefers-reduced-motion: reduce){
  .senshi-art .threads-block::before,
  .senshi-art #elsewhere::before{ animation:none; }
}


/* ==========================================================================
   150. THE CREDIT BUMPER   (13 Sep 2026)
   ==========================================================================
   One line in the codex foot of every profile, pointing at credits.html.

   It says the honest thing rather than the legal thing. The rights notice
   directly below it already does the legal thing - Takeuchi, Kodansha, Toei,
   fair use - and a second paragraph in that register would be read as more of
   the same and skipped. This one is addressed to a person: if a picture here
   is yours, say so and it gets your name on it. That is the sentence the
   credits page is built around and it belongs where the pictures are, not
   only on the page nobody visits.

   Sized between the two things around it - larger than the rights notice,
   smaller than the deeper links - so it reads as a note rather than as fine
   print. The link is the only bright thing in the foot, because it is the
   only thing down there anyone is meant to click. */
.senshi-art .credit-bumper{
  margin:14px 0 10px;
  padding:9px 12px;
  border-left:3px solid var(--accent);
  background:var(--paper);
  font-size:12.5px; line-height:1.55;
  color:var(--ink); opacity:.9;
}
.senshi-art .credit-bumper-link{
  font-family:rainyhearts, monospace;
  font-size:12.5px; white-space:nowrap;
  color:var(--head); text-decoration:underline;
}
.senshi-art .credit-bumper-link:hover,
.senshi-art .credit-bumper-link:focus-visible{
  background:var(--head); color:var(--onskirt); text-decoration:none;
}


/* ==========================================================================
   151. THE TAKEUCHI PICTURES   (13 Sep 2026)
   ==========================================================================
   Four of them, and where each goes is the whole decision.

   THE TWO WATERCOLOURS GO IN THE PROFILE, not in the "every telling" drops
   she asked for them in. They are the two best pictures on the page and a
   collapsed dropdown is where a picture goes to not be seen. Both also happen
   to illustrate the paragraph they now sit beside: the bluebells one is Ami
   with a book and her glasses in her hand, next to the paragraph about the
   girl everyone decided was cold, and the bathtub one is her reading
   surrounded by water, next to the paragraph about quicksilver and about
   water, ice and fog being one substance in three states. That is luck, but
   it is the kind worth taking.

   THE TWO DESIGN SHEETS GO IN "THE MANGA". They are Takeuchi's own working
   documents - her handwriting, her notes on the visor and the transformation
   - so they illustrate the manga AS A TELLING rather than illustrating Ami.
   That is exactly what that drop is for.

   .tell-shot--pair is the only new layout: two sheets side by side inside the
   float, because they are a matched pair (civilian and senshi, same hand, same
   page furniture) and splitting them would break that. It gets a wider cap
   than a single picture and collapses to one column early, since two 728px
   sheets in half a column is two thumbnails.

   Everything else is rule 144 already doing its job - width:auto, the text
   wrapping, the row growing to whatever is dropped in. Nothing here sets a
   size on a picture. */
.senshi-art .tell-shot--pair{
  display:flex; gap:10px;
  max-width:min(52%, 420px);
}
.senshi-art .tell-shot--pair img{
  display:block; width:auto; height:auto; max-width:calc(50% - 5px);
  border:2px solid var(--backbow);
  background:#fffdf6;
}
.senshi-art .bio-shot .art--bioshot{
  border:3px solid var(--backbow);
  box-shadow:4px 4px 0 var(--frontbow);
  background:#fffdf6;
}

@media (max-width: 760px){
  .senshi-art .tell-shot--pair{ max-width:none; }
}


/* ==========================================================================
   152. THE PLATE EXPLAINS ITSELF; THE GLYPH; THE DROPS TIGHTEN  (13 Sep 2026)
   ==========================================================================
   Ashley: each dignity needs to say WHY - "why is Mercury in its detriment in
   Jupiter-ruled signs" - because this is the language of the relationships
   between the planets. She is right, and it changes what the plate is: not a
   list of scores but a set of relationships, each one naming whose house the
   planet is standing in.

   Every row now carries a reason, generated from the data rather than written
   out 25 times: the sign lord is looked up, and a one-line "what this planet
   is" per planet composes the contrast. So Mercury's detriment reads "Both are
   Jupiter's ... Mercury is the particular; Jupiter is the general", and
   Saturn's or Venus's will read correctly on their own pages without anyone
   writing them.

   THE FOOTNOTE IS NOT DECORATION. Brennan is explicit that detriment is a
   LATER term - the early Hellenistic texts define domicile, exaltation and
   fall and mostly leave this one alone, and Rhetorius calls it enantioma,
   "opposition, incompatibility, hindrance". That is why the row is written as
   a conflict of natures rather than as the planet being bad at its job, and a
   page that teaches the tradition should say which parts of it are late.

   LAYOUT. The reason goes UNDER the value, not beside it. A third column would
   have squeezed the two-column plate to about 150px of prose per row, and
   these are two-sentence explanations. The value keeps the 96px label track so
   the seven values still line up; the reason runs the full width of its column
   underneath, indented to the value's edge so the eye follows one hanging
   line down the plate.

   ---- THE HEADING GLYPH ----
   .bh-moon is a CSS-drawn crescent and it is on every lockup heading on a
   senshi page, so "her kit" was wearing Usagi's moon. It takes the senshi's
   own glyph instead, from the pixel set already in images/favicons. Done with
   a variable so the rollout is one line per character, and the crescent stays
   as the fallback for the nine who have no glyph file - the asteroid senshi,
   the Starlights, Chibi Moon, Helios, Tuxedo Mask.

   Scoped to the block headings only. The masthead lockup keeps its crescent:
   up there it is part of the nameplate and reads as the site's mark rather
   than as a claim about which planet she is.

   ---- EVERY TELLING ----
   Five collapsed drops were taking about 360px to say five words each. The
   summary keeps its 12px type - it is a control and it was the smallest text
   on the page once - but the padding comes down from 12px to 7px and the gap
   between drops from 8px to 5px. About 140px back, and nothing gets smaller. */

/* ---- 1. the reason under each value ---- */
.senshi-art .dg-row{
  grid-template-columns:96px minmax(0, 1fr);
  row-gap:3px;
  padding:8px 0 9px;
}
.senshi-art .dg-row dd{ display:block; }
.senshi-art .dg-row .dg-v{
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 12px;
  font-size:14px; line-height:1.35; color:var(--ink);
}
.senshi-art .dg-row .dg-why{
  display:block; margin-top:4px;
  font-size:12.5px; line-height:1.5;
  color:var(--ink); opacity:.82;
}
.senshi-art .dgplate-foot{
  margin:0; padding:10px 15px 12px;
  border-top:1px dotted var(--backbow);
  font-size:12px; line-height:1.55;
  color:var(--ink); opacity:.8;
}

/* ---- 2. her own glyph on the block headings ---- */
.senshi-art .block-h--arcs .bh-moon{
  width:20px; height:20px;
  border-radius:0;
  background:var(--senshi-glyph, none) center / contain no-repeat;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.senshi-art .block-h--arcs .bh-moon::after{ display:none; }
/* no glyph file - keep the drawn crescent exactly as it was */
.senshi-art .block-h--arcs .bh-moon:not([style]){ }
body.senshi--mercury  .senshi-art{ --senshi-glyph:url("images/favicons/sailormercuryglyph.webp"); }
body.senshi--moon     .senshi-art{ --senshi-glyph:url("images/favicons/sailormoonglyph.webp"); }
body.senshi--mars     .senshi-art{ --senshi-glyph:url("images/favicons/sailormarsglyph.webp"); }
body.senshi--jupiter  .senshi-art{ --senshi-glyph:url("images/favicons/sailorjupiterglyph.webp"); }
body.senshi--venus    .senshi-art{ --senshi-glyph:url("images/favicons/sailorvenusglyph.webp"); }
body.senshi--uranus   .senshi-art{ --senshi-glyph:url("images/favicons/sailoruranusglyph.webp"); }
body.senshi--neptune  .senshi-art{ --senshi-glyph:url("images/favicons/sailorneptuneglyph.webp"); }
body.senshi--pluto    .senshi-art{ --senshi-glyph:url("images/favicons/sailorplutoglyph.webp"); }
body.senshi--saturn   .senshi-art{ --senshi-glyph:url("images/favicons/sailorsaturnglyph.webp"); }
/* the ones with no glyph file fall back to the crescent, which needs its
   round shape and its cut-out back */
.senshi-art .block-h--arcs .bh-moon{ background-color:transparent; }
body:not(.senshi--mercury):not(.senshi--moon):not(.senshi--mars):not(.senshi--jupiter):not(.senshi--venus):not(.senshi--uranus):not(.senshi--neptune):not(.senshi--pluto):not(.senshi--saturn)
  .senshi-art .block-h--arcs .bh-moon{
  border-radius:50%; background:var(--frontbow);
}
body:not(.senshi--mercury):not(.senshi--moon):not(.senshi--mars):not(.senshi--jupiter):not(.senshi--venus):not(.senshi--uranus):not(.senshi--neptune):not(.senshi--pluto):not(.senshi--saturn)
  .senshi-art .block-h--arcs .bh-moon::after{ display:block; }

/* ---- 3. the drops give back their padding ---- */
.senshi-art #elsewhere .drop{ margin-bottom:5px; }
.senshi-art #elsewhere .drop-h{ padding:7px 12px; line-height:1.45; }


/* ==========================================================================
   153. ONE TYPE LADDER FOR THE WHOLE PROFILE   (13 Sep 2026)
   ==========================================================================
   Measured every element on the page that renders text, sorted by computed
   size, and the ladder had four faults - three of them structural rather than
   a matter of taste.

   1. A SECTION HEADING WAS BIGGER THAN THE PAGE TITLE. "her kit" rendered at
      36px; "Sailor Mercury", the h1, at 28.7. The largest thing on the page
      was not its subject. That is the one that matters.

   2. TWO SECTION HEADINGS AT THE SAME RANK, TWICE APART. "her kit" and "what
      she can do" are lockups at 36px; "profile" and "every telling" are plain
      .block-h at 18px. Same level in the document, and one is double the
      other. They meet in the middle - and not at the same number, because
      04B is a chunky pixel face and rainyhearts is a light one, so 26 of the
      first weighs about what 24 of the second does.

   3. BODY PROSE AT FOUR SIZES. The bio ran 16, the planet reading 15, the
      Mizuno paragraph 14.5, the key cards 15. Nothing distinguishes those
      passages except where they happen to sit, so they are all 15.5 now.

   4. TWELVE THINGS UNDER THE RAINYHEARTS FLOOR. She flagged this once and I
      fixed the two she named; the audit found the rest - move kinds at 9.5,
      season chips at 9.5, source chips at 10, the junk drawer heading and note
      at 11, placeholder labels at 10. Same bug, same fix: 13px is where this
      face stops holding together, so nothing sits below it. The only thing
      left under 13 is the rights notice, which is genuine fine print.

   The resulting ladder, top to bottom:

     28.7  the name           04B, auto-fitted per senshi
     26    section heading    04B lockups
     24    section heading    rainyhearts, plain
     19    the henshin cry
     16    card titles, the "in the tradition" bar
     15.5  all body prose
     14    values in the plates and chips
     13    every label, every chip, every control  <- the floor
     12    the rights notice

   .kb-note AND .kb-stage-d WERE PROSE SET IN THE LABEL FACE. Two paragraphs
   of rainyhearts at 16px in the kit cards - it is a pixel display face and it
   was carrying the longest text in the box. They go to the body face. */

/* ---- headings ---- */
.senshi-art .block-h--arcs .bh-t,
.senshi-art #arcs > .block-h--arcs .bh-t{ font-size:26px; }
.senshi-art .block-h{ font-size:24px; }

/* ---- body prose, one size ---- */
.senshi-art .bio-text p,
.senshi-art .bio-run-text p,
.senshi-art .dossier-tail .dossier-lede p,
.senshi-art .tk-body,
.senshi-art .thread-excerpt p,
.senshi-art .drop-body p{ font-size:15.5px; }

/* ---- prose that was wearing the label face ---- */
.senshi-art .kb-note,
.senshi-art .kb-stage-d{
  font-family:basiic, "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size:14px; line-height:1.55;
}

/* ---- the floor: nothing in rainyhearts below 13 ---- */
.senshi-art .km-kind,
.senshi-art .km-span,
.senshi-art .src-chip,
.senshi-art .rung-debut,
.senshi-art .junkdump-h,
.senshi-art .junk-note,
.senshi-art .ph-label,
.senshi-art .kb-stage-n,
.senshi-art .bust-cap{ font-size:13px; }
.senshi-art .km-kind{ opacity:.85; }
.senshi-art .bust-cap{ opacity:.8; }
.senshi-art .junk-note{ opacity:.8; }

/* ---- secondary prose, one size ---- */
.senshi-art .km-desc,
.senshi-art .dg-why,
.senshi-art .quote-intro,
.senshi-art .credit-bumper,
.senshi-art .dgplate-foot,
.senshi-art .junkdump-sub{ font-size:13px; }

/* ---- the foot ---- */
.senshi-art .updated{ font-size:12px; opacity:.75; }
.senshi-art .sel-credit{ font-size:12px; }

@media (max-width: 700px){
  .senshi-art .block-h--arcs .bh-t{ font-size:22px; }
  .senshi-art .block-h{ font-size:20px; }
}


/* ==========================================================================
   154. THE FLOOR, ENFORCED WHERE IT ACTUALLY LOST   (13 Sep 2026)
   ==========================================================================
   Section 153 set the ladder and nine things ignored it. Re-measured rather
   than assumed, and every one was the same cause: a CONTEXTUAL rule at higher
   specificity written when that component was designed. Being last in the file
   settles ties and nothing else - the trap this stylesheet has now sprung on
   me five times today.

     .senshi-art .km--vid .km-cap .km-kind   (0,4,0)  9.5px
     .senshi-art .km--vid .km-cap .km-desc   (0,4,0)  11.5px
     .senshi-art .rung .src-chip             (0,3,0)  10px
     .senshi-art .dg-row .dg-why             (0,3,0)  12.5px
     .senshi-art .masthead-titles .quote-intro (0,3,0) 12.5px

   Matched at their own specificity and set to the floor. The remainder -
   .drop-h, .tk-role, .credit-bumper-link - were simply not in 153's list.

   THE VIDEO TILE IS THE INTERESTING ONE. Its kind and description are white
   on a dark scrim, and small pale type on dark loses more apparent weight
   than the same type on paper does - so the tile was the worst offender on
   the page and looked deliberate. It is not; it was drawn at 9.5px before any
   of this.

   NOT RAISED: .rung-name at 12.5. It is the body face, not rainyhearts, and
   the floor is a property of the pixel font rather than a rule about small
   text. */
.senshi-art .km--vid .km-cap .km-kind{ font-size:13px; opacity:.85; }
.senshi-art .km--vid .km-cap .km-desc{ font-size:13px; line-height:1.5; }
.senshi-art .rung .src-chip{ font-size:13px; padding:2px 7px; }
.senshi-art .rung .rung-debut{ font-size:13px; }
.senshi-art .dg-row .dg-why{ font-size:13px; }
.senshi-art .masthead-titles .quote-intro{ font-size:13px; }
.senshi-art .drop-h{ font-size:13px; }
.senshi-art .tk-role{ font-size:13px; }
.senshi-art .credit-bumper-link{ font-size:13px; }

@media (max-width: 700px){
  .senshi-art .masthead-titles .quote-intro{ font-size:13px; }
}


/* ==========================================================================
   155. A PICTURE FOR EVERY DIGNITY   (13 Sep 2026)
   ==========================================================================
   Ashley: name the plate after the tradition it comes from, and give every
   row a thumbnail so she can put a picture of Ami beside each dignity - the
   first being a still of Ami buried in a wall of books, for exaltation. She
   is right that it is the best visual definition of the word on the page.

   "in the tradition" -> "in hellenistic astrology". The old title assumed the
   reader knew which tradition, on a site that also runs modern rulerships
   three profiles over. Now it says so.

   THE PLATE GOES TO ONE COLUMN, and that is the layout decision. Two columns
   of ~340px minus a 96px label track leaves about 230px for the text; take
   another 84px for a picture and the reason gets 150px, which is four words
   a line. One full-width column gives each row [picture][label][value and
   reason] with about 500px of prose - and the two group headings stay, so
   dignity and condition are still separated, just stacked.

   NO DEAD SPACE, and it is the picture that guarantees it rather than the
   text. Every row is at least as tall as its 84px thumbnail and most reasons
   run two lines at this width, so the two land within a few pixels of each
   other. A row where the text runs short is not a hole - it is a row the
   height of a picture, which is the point of adding pictures.

   The slots are square on purpose. Seven pictures down a left edge only read
   as a set if they are the same shape, and a square crops from anything -
   a screencap, a panel, a piece of colour art.

   Placeholders carry no label text, only the mark. Six of the seven are empty
   today and six captions saying "domicile", "fall", "sect" next to the words
   domicile, fall and sect is noise. */
.senshi-art .dgplate-cols{
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
  padding:14px 16px 15px;
}
.senshi-art .dg-row{
  grid-template-columns:84px 96px minmax(0, 1fr);
  column-gap:14px; row-gap:2px;
  align-items:start;
  padding:10px 0 11px;
}
.senshi-art .dg-shot{
  grid-row:1;
  width:84px; height:84px;
}
.senshi-art .dg-shot .dg-pic,
.senshi-art .dg-shot .ph--dgshot{
  display:block;
  width:84px; height:84px;
  object-fit:cover;
  border:2px solid var(--backbow);
  background:#fffdf6;
}
.senshi-art .dg-shot .ph--dgshot{
  display:grid; place-items:center;
  border-style:dashed;
  opacity:.55;
}
.senshi-art .dg-row dt{ grid-row:1; padding-top:2px; }
.senshi-art .dg-row dd{ grid-row:1; }

@media (max-width: 700px){
  .senshi-art .dg-row{
    grid-template-columns:64px minmax(0, 1fr);
    row-gap:4px;
  }
  .senshi-art .dg-shot,
  .senshi-art .dg-shot .dg-pic,
  .senshi-art .dg-shot .ph--dgshot{ width:64px; height:64px; }
  .senshi-art .dg-row dt{ grid-column:2; grid-row:1; }
  .senshi-art .dg-row dd{ grid-column:2; grid-row:2; }
  .senshi-art .dg-shot{ grid-row:1 / span 2; }
}


/* ==========================================================================
   156. THE PLATE BECOMES A GRID OF CARDS   (13 Sep 2026)
   ==========================================================================
   Ashley: too much space to the text, the picture not large enough - make it
   a grid. Dignity two-up (domicile, exaltation / detriment, fall), condition
   as a row of three. Exactly right, and it is the layout the content wanted:
   those four ARE two pairs. Domicile and exaltation are the two ways a planet
   is well placed, detriment and fall the two ways it is badly placed, and
   each sits directly above its opposite. The grid says that; a list did not.

   THE PICTURE GETS ABOUT SEVEN TIMES THE AREA. It was an 84px square beside
   the text; it is now the full width of its card with the text underneath -
   345px at the two-up, 225px at the three-up. Stacking rather than sitting
   beside the text is what buys the size: a picture next to a paragraph can
   only ever be as wide as the paragraph is not.

   3:2 ON THE PAIRS, 4:3 ON THE THREES, and the ratios are picked so the plate
   does not grow. A square at 345px wide is 345px tall and four of those is a
   page of its own; 3:2 gives 230. The narrower cards can afford the taller
   ratio. Everything is object-fit:cover, so a square source like the
   exaltation still crops rather than letterboxing.

   align-items:start, NOT stretch. Card heights differ - "detriment" carries
   the longest reason on the plate and "fall" the shortest - and a stretched
   card would pad the short one with its own background to match, which is
   dead space wearing a card's clothes. Left to their own heights the short
   card simply ends and the plate shows through, which reads as spacing.

   The detriment reason was also cut: at 345px its old length ran seven lines
   against fall's four. The contrast clause now takes the short half of each
   planet's line - "Mercury is the particular; Jupiter is the general" - which
   is the sharper sentence anyway.

   One column below 780, where a 2-up card is 240px and the reason goes to
   four words a line. */
.senshi-art .dgplate-cols{
  display:block;
  padding:14px 16px 16px;
}
.senshi-art .dgset + .dgset{ margin-top:18px; }

.senshi-art .dglist{
  display:grid;
  gap:16px;
  align-items:start;
}
.senshi-art .dglist--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.senshi-art .dglist--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

.senshi-art .dg-card{
  display:block;
  padding:0 0 4px;
  border:0;
}
.senshi-art .dg-card .dg-pic,
.senshi-art .dg-card .ph--dgshot{
  display:block;
  width:100%; height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border:2px solid var(--backbow);
  background:#fffdf6;
  margin:0 0 8px;
}
.senshi-art .dglist--3 .dg-pic,
.senshi-art .dglist--3 .ph--dgshot{ aspect-ratio:4 / 3; }
.senshi-art .dg-card .ph--dgshot{
  display:grid; place-items:center;
  border-style:dashed; opacity:.55;
}
.senshi-art .dg-card dt{
  margin:0 0 3px;
  font-family:rainyhearts, monospace;
  font-size:13px; letter-spacing:.3px;
  color:var(--head); opacity:.92;
}
.senshi-art .dg-card dd{ margin:0; display:block; }
.senshi-art .dg-card .dg-v{
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 12px;
  font-size:14px; line-height:1.35; color:var(--ink);
  margin-bottom:4px;
}
.senshi-art .dg-card .dg-why{
  display:block; font-size:13px; line-height:1.5;
  color:var(--ink); opacity:.82;
}

@media (max-width: 780px){
  .senshi-art .dglist--2,
  .senshi-art .dglist--3{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .dg-card .dg-pic,
  .senshi-art .dg-card .ph--dgshot,
  .senshi-art .dglist--3 .dg-pic,
  .senshi-art .dglist--3 .ph--dgshot{ aspect-ratio:16 / 9; }
}


/* ==========================================================================
   157. THE DOUBLING, CALLED OUT   (13 Sep 2026)
   ==========================================================================
   Ashley spotted it: Mercury is the only planet whose domicile and exaltation
   fall in ONE sign and whose detriment and fall land together in another.
   Virgo is both good placements at once; Pisces is both bad ones. Double
   whammy, and unique.

   CHECKED BEFORE IT WENT ON THE PAGE, across all seven - Sun, Moon, Venus,
   Mars, Jupiter and Saturn each have their exaltation in a sign they do not
   own, so nothing else doubles. Mercury alone.

   IT IS ALSO ONE FACT RATHER THAN TWO, which is the part worth telling a
   student. Domicile faces detriment across the zodiac and exaltation faces
   fall across the zodiac. So the moment a planet's exaltation lands inside
   one of its own domiciles, the opposite end of that axis is FORCED to carry
   both of the bad placements. The Pisces half is not a second coincidence; it
   is the first one seen from the other side.

   The generator emits this only when the arithmetic actually holds, so the
   other twenty-four profiles will not carry a boast that is not theirs.

   Styled as the one raised thing on the plate: her fuku down the left, a
   tinted ground, and it sits between the two grids because it is about the
   relationship between them rather than about either one. */
.senshi-art .dg-double{
  margin:16px 0 0;
  padding:12px 15px 13px;
  border:2px solid var(--head);
  border-left:0;
  background:
    linear-gradient(180deg,
      var(--accent) 0%, var(--frontbow) 32%, var(--backbow) 58%,
      rgba(230,200,106,.65) 100%) left top / 4px 100% no-repeat,
    var(--wash);
  padding-left:19px;
  font-size:13.5px; line-height:1.6;
  color:var(--ink);
}
.senshi-art .dg-double b{ color:var(--head); }


/* ==========================================================================
   158. THE CONDITION SET IS NOT A DIGNITY   (14 Sep 2026)
   ==========================================================================
   Ashley: "the condition section... remove those 3 images and select a single
   pic... redesign this section to reflect current info and shrink the box down
   with 1 pic."

   She is right about more than the pictures. Sect, nature and joy are not the
   same KIND of fact as domicile and fall. A dignity is a relationship between
   a planet and a sign - it changes as the planet moves - and each one earns a
   picture because there is a scene for it. These three do not move: they are
   what Mercury is before any chart is drawn. Giving them card-for-card the
   same treatment as the dignities above said, visually, that they are four
   more of the same thing.

   So the row of three cards becomes one set: a single picture for the whole
   idea, and the three facts as a list beside it. Three 4:3 crops at 220px
   wide came to 259px of plate; the list next to one picture comes to about
   180, and the picture in it is larger than any of the three it replaced.

   THE ROWS ARE BLOCKS, NOT GRIDS, and that is the part that does the
   shrinking. A grid container never overlaps a float - it shifts sideways to
   clear it - so a grid row beside a 140px picture stays beside it all the way
   down, and every line of every reason is squeezed into the 300px left over.
   Three reasons at 300px ran three lines each and the plate got TALLER than
   the three cards it replaced, with a column of dead white under the picture
   as a bonus. As blocks, the line boxes shorten beside the picture and go full
   width once past it, which is the house wrap rule (section 144) doing exactly
   what it is for.

   So the label is an inline-block of fixed width and the value and reason run
   as inline text after it: one fact reads as one sentence, the labels still
   line up in a column, and the wrap is free. A continuation line returns to
   the left edge rather than hanging under the value - a hanging indent cannot
   survive beside a float, because the first line starts at the float's edge
   and the rest do not.

   The dashed rule between rows is drawn on a full-width block box, so behind
   the picture it is hidden: floats paint over the backgrounds and borders of
   in-flow blocks. The line appears exactly where it is wanted, beside the
   list, and nowhere else.

   Same float rule as every other picture-and-paragraph box (section 144): the
   picture is first in source, it brings its own size, max-width caps it, and
   a clearfix keeps it inside the set. Below 640 the float goes and the picture
   sits over the list. */
.senshi-art .dgcond{ display:block; }
.senshi-art .dgcond::after{ content:""; display:block; clear:both; }

.senshi-art .dgcond > .dg-pic,
.senshi-art .dgcond > .ph--dgshot{
  float:left;
  display:block;
  width:auto; max-width:min(32%, 210px); height:auto;
  aspect-ratio:3 / 2; object-fit:cover;
  border:2px solid var(--backbow);
  background:#fffdf6;
  margin:2px 18px 10px 0;
}
.senshi-art .dgcond > .ph--dgshot{
  width:210px;
  display:grid; place-items:center;
  border-style:dashed; opacity:.55;
}

.senshi-art .dgcond-list{ margin:0; }
.senshi-art .dgcond .dgc{
  display:block;
  padding:6px 0;
  line-height:1.5;
}
.senshi-art .dgcond .dgc + .dgc{
  border-top:1px dashed color-mix(in srgb, var(--head) 26%, transparent);
}
.senshi-art .dgcond .dgc dt{
  display:inline-block;
  width:58px; margin:0; vertical-align:baseline;
  font-family:rainyhearts, monospace;
  font-size:13px; letter-spacing:.3px;
  color:var(--head); opacity:.92;
}
.senshi-art .dgcond .dgc dd{ display:inline; margin:0; }
.senshi-art .dgcond .dgc .dg-v{
  display:inline;
  font-size:14px; color:var(--ink);
}
.senshi-art .dgcond .dgc .dg-v::after{
  content:" - "; opacity:.55;   /* house style: a spaced hyphen, never an em-dash */
}
.senshi-art .dgcond .dgc .dg-why{
  display:inline;
  font-size:13px; color:var(--ink); opacity:.82;
}
@media (max-width: 640px){
  .senshi-art .dgcond > .dg-pic,
  .senshi-art .dgcond > .ph--dgshot{
    float:none; max-width:none;
    width:min(300px, 82%); margin:0 auto 12px;
  }
}


/* ==========================================================================
   159. "THE PERSON" READS AS A TABLE   (14 Sep 2026)
   ==========================================================================
   Ashley: "style this easier to read."

   Five facts were taking ten lines, because every label sat on its own line
   above its value with nothing between the pairs. Reading it meant reading
   every word to find out where one fact ended and the next began - and the
   labels, being pixel-font, are the slowest thing on the box to read.

   Label and value go onto one line, in two columns, so the labels stack into
   a single narrow column the eye runs down and the values start at a common
   left edge. A hairline between rows does the separating that vertical space
   was failing to do. Five facts, five lines, and the box is shorter for it.

   The label column is a fixed 82px rather than auto: with auto, "iq" and
   "dislikes" put their values at two different x positions and the column of
   values goes ragged, which is the thing that makes a list like this hard to
   scan. 82px clears "dislikes" at 14px rainyhearts with room to spare.

   align-items:baseline, so the pixel face and the body face sit on one line
   rather than the label floating a pixel high.

   Below 520 it goes back to stacked, because a fixed label column plus a
   value in a 260px box is four words a line. */
.senshi-art .dossier--noplate .dossier-head .stat{
  display:grid;
  grid-template-columns:82px minmax(0, 1fr);
  align-items:baseline;
  column-gap:10px;
  padding:5px 0;
  margin:0;
}
.senshi-art .dossier--noplate .dossier-head .stat + .stat{
  border-top:1px dashed color-mix(in srgb, var(--head) 24%, transparent);
}
.senshi-art .dossier--noplate .dossier-head .stat dt{
  margin:0;
  font-size:14px; opacity:.92;
  line-height:1.4;
}
.senshi-art .dossier--noplate .dossier-head .stat dd{
  margin:0;
  font-size:15.5px; line-height:1.45;
}

@media (max-width: 520px){
  .senshi-art .dossier--noplate .dossier-head .stat{
    grid-template-columns:minmax(0, 1fr);
    row-gap:1px;
  }
}


/* ==========================================================================
   160. THE TWO KEYS GET A MAT, AND TWO PICTURES KEEP THEIR SHAPE
        (14 Sep 2026)
   ==========================================================================
   1. THE KEYS ON A DOILY. Ashley: "add background doily and semi opaque box."
   The two-keys block qualifies under the rule section 149 set: a doily goes
   under separate opaque panels with real gutters between them, never under
   running prose. Two cards with a 14px gutter is exactly that shape - the
   same shape as .threads-block, which is already on lace.

   The layer has to be position:absolute and nothing else. .twokeys is a grid
   container, and a ::before on a grid container IS a grid item: left static
   it would take a cell and shove a card out of the row. Absolute takes it out
   of flow, which is what stops it being placed at all.

   The cards go semi-opaque rather than solid - the junk drawer's call, not
   .kit-cap's. They carry type, so they cannot go as low as the drawer's 72%:
   at 86% the lace is legible in the corners and the body text is still on an
   effectively flat ground. The greyed card was fully transparent, which on
   lace made it read as a hole rather than a card; it gets 62%, enough to sit
   on without losing the "this half is not lit" reading its dashed border and
   .82 opacity are doing.

   Same tile, same 200s background-position drift as every other patterned
   area on the page, so the whole page breathes at one rate.

   2. TWO PICTURES KEEP THEIR OWN SHAPE. Both slots filled today are wider or
   squarer than the box they landed in, and both boxes crop with object-fit:
   cover:

     the condition picture   3:2 slot,  4:3 source - loses the ginkgo canopy
                             at the top and the desk at the bottom
     the First Love cover    4:3 slot,  square source - loses the title logo
                             and the lettering along the bottom

   Cropping a still is fine, it is a frame from a moving picture and there is
   more of it either side. Cropping COVER ART is not: it is a designed object,
   and the design is the thing being shown. So the two behave differently.

   The condition picture floats on its own, so it simply keeps its intrinsic
   ratio and the text wraps to whatever height it comes out at - the house
   rule from section 144, which is what that rule is for.

   The gallery cover sits in a five-column strip of 130px tiles, and at one
   tile it is a postage stamp of the one image on that page anyone wants to
   look at - object-fit:contain made it worse still, adding cream bars to a
   118px sleeve. It takes two columns instead, keeps its own square ratio, and
   the row aligns to the top rather than stretching: a 268px cover with three
   placeholder thumbs beside it, which reads as a lead image and not as a
   broken row.

   The mat opacity is .34, not the .22 used behind the threads block. That one
   sits under a card that covers nearly all of it; here the lace shows in a
   14px margin and a 14px gutter, and at .22 it was not there at all. */

/* ---- 1. the mat ---- */
.senshi-art .twokeys{
  position:relative;
  isolation:isolate;
  padding:14px;
  border:1px solid var(--backbow);
}
.senshi-art .twokeys > *{ position:relative; z-index:1; }
.senshi-art .twokeys::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat;
  background-size:cover, 256px 190px;
  background-color:var(--lace);
  background-blend-mode:normal, luminosity;
  opacity:.34;
  animation:lace-drift-bg 200s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .senshi-art .twokeys::before{ animation:none; }
}

/* ---- the cards, semi-opaque over it ---- */
.senshi-art .twokeys .tk{
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
}
.senshi-art .twokeys .tk--off{
  background:color-mix(in srgb, var(--paper) 62%, transparent);
}

/* ---- 2. the pictures ---- */
.senshi-art .dgcond > .dg-pic{
  aspect-ratio:auto;
  object-fit:fill;
}
.senshi-art .thread-body > .thread-shot img.art--threadshot{
  width:auto; max-width:100%; height:auto;
  aspect-ratio:auto; object-fit:fill;
}
.senshi-art .arc-gallery{ align-items:start; }
.senshi-art .arc-gallery img.art--fit{
  grid-column:span 2;
  aspect-ratio:auto;
  object-fit:fill;
  background:#fffdf6;
}
@media (max-width: 560px){
  .senshi-art .arc-gallery img.art--fit{ grid-column:span 1; }
}


/* ==========================================================================
   161. THE CONDITION PICTURE GETS ITS ROOM   (14 Sep 2026)
   ==========================================================================
   Ashley: "no squishing the pic. resize the information if needed."

   It was capped at 210px because the three reasons were competing with it for
   the row. That is the wrong way round: the picture is the fixed thing and the
   text flows, which is what the wrap in section 158 was built for. The cap
   goes to 320, and the reasons simply take one more line each beside it and
   then run full width underneath - no line is lost, nothing is cut.

   32% -> 42% as well, so the proportion holds on a narrow window instead of
   the picture collapsing while the cap stays put.

   The markup was also lying about the file. Every dignity picture carried
   width="200" height="200" regardless of what it was; the four grid cards
   never noticed because they force their own ratio, but this one sizes itself
   off the image, so the browser reserved a square and the picture jumped when
   it loaded. The generator now writes the real pixels. */
.senshi-art .dgcond > .dg-pic{
  max-width:min(42%, 320px);
  margin-right:20px;
}


/* ==========================================================================
   162. THE CONDITION SET STOPS WRAPPING   (14 Sep 2026)
   ==========================================================================
   Ashley: "the image is larger, and the words 'put a messenger' do not
   overflow and begin wrapping around the pic. the text should be on the
   right."

   Section 158 made these rows blocks precisely so the text WOULD wrap under
   the picture, because at 210px of picture and 300px of text nothing else
   fitted. With the picture at 320 and now larger still, the last line of the
   joy row was ducking under it and running back to the left margin, which is
   the wrap doing its job and looking like a mistake.

   So this box leaves the wrap rule behind. It is two columns now: picture
   left, text right, and the text never crosses under. A flex row does it in
   one line - the picture is flex:0 0 auto so it keeps whatever width it is
   given, the list is flex:1 with min-width:0 so it takes the rest and its long
   words still break instead of pushing the row wide.

   That is not a contradiction of the house rule, it is the shape the rule is
   for: rule 144 governs a picture sitting IN a paragraph. Three labelled facts
   are a list beside a picture, and a list has a left edge that should stay
   where it is.

   The picture goes to half the box, capped at 400px, and the joy row loses
   one clause so the text column keeps up with it in height. The float overrides from 158 and 161 are
   turned off explicitly rather than edited in place - float on a flex item is
   ignored anyway, but leaving a live float:left in the cascade is how the next
   person loses an afternoon. */
.senshi-art .dgcond{
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.senshi-art .dgcond::after{ content:none; }      /* no float, no clearfix */

.senshi-art .dgcond > .dg-pic,
.senshi-art .dgcond > .ph--dgshot{
  float:none;
  flex:0 0 auto;
  width:min(50%, 400px); max-width:none;
  margin:0;
}
.senshi-art .dgcond-list{
  flex:1 1 0; min-width:0;
}

@media (max-width: 640px){
  .senshi-art .dgcond{ display:block; }
  .senshi-art .dgcond > .dg-pic,
  .senshi-art .dgcond > .ph--dgshot{
    width:min(300px, 82%); margin:0 auto 12px;
  }
}


/* ==========================================================================
   163. FOUR QUADRANTS, FOUR SHADES OF THE FUKU   (14 Sep 2026)
   ==========================================================================
   Ashley: "the dignity grid, let's give each quadrant a shade from the fuku to
   visually break it up."

   The four cards were four pictures with type under them on one flat ground,
   and at a glance that reads as one block of four pictures rather than as four
   separate claims. A tint per quadrant makes each one a panel.

   IT TAKES THE THREE FUKU INKS THIS PAGE ALREADY HAS. Every senshi sets
   --name-a / --name-b / --name-c - the skirt, bow and trim of that character's
   fuku, already contrast-checked when the name lockup was built. The quadrants
   take a, b, c, and then a+c mixed for the fourth, so the set is this
   character's own gradient and the rollout to the other 24 needs no new
   colours. On Mercury that is navy, teal, bright blue and a navy-blue blend.

   TWENTY-TWO PERCENT, over paper. 12% was the first try and it was invisible:
   the page's paper is already a pale blue, and Mercury's three inks are all
   blues and teals, so an eighth of one of them over a blue ground moves the
   colour by about two points of green. Measured, not guessed - the four panels
   came out within .02 of each other on every channel. At 22% they separate
   into navy, teal, sky and a blend, and the body text on them is still dark
   ink on a light ground for contrast purposes.

   Mixing all four toward the same paper is what keeps them equal in weight, so
   no quadrant reads as louder than the others - only as a different colour.

   Each panel gets padding and a hairline in the same ink at 30%, so the tint
   has an edge instead of bleeding into the plate.

   The fallback line matters here. color-mix has been safe for a while, but an
   older browser drops the whole declaration - so var(--wash) is declared first
   and every quadrant simply comes out the same pale ground it has now, which
   is exactly the current design and not a broken one. */
.senshi-art .dglist--2 .dg-card{
  padding:10px 11px 12px;
  background:var(--wash);
  background:color-mix(in srgb, var(--dg-tint, var(--name-a)) 22%, var(--paper));
  border:1px solid color-mix(in srgb, var(--dg-tint, var(--name-a)) 42%, transparent);
}
.senshi-art .dglist--2 .dg-card:nth-child(1){ --dg-tint:var(--name-a); }
.senshi-art .dglist--2 .dg-card:nth-child(2){ --dg-tint:var(--name-b); }
.senshi-art .dglist--2 .dg-card:nth-child(3){ --dg-tint:var(--name-c); }
.senshi-art .dglist--2 .dg-card:nth-child(4){
  --dg-tint:color-mix(in srgb, var(--name-a), var(--name-c));
}

/* the picture keeps its own frame and now sits inside the panel */
.senshi-art .dglist--2 .dg-card .dg-pic{ margin-bottom:9px; }


/* ==========================================================================
   164. THE LACE MOVES AGAIN, AND SHOWS MORE   (14 Sep 2026)
   ==========================================================================
   Ashley: "can you add that scroll back into the doily backgrounds? and i feel
   like we could use more background... or let the doily poke out more."

   THE SCROLL NEVER STOPPED, IT WAS TOO SLOW TO SEE. The three background-drift
   layers - junk drawer, threads block, two keys - move one 256x190 tile in
   200s. That is 1.3 pixels a second, which is honestly closer to a clock hand
   than to a drift; the transform-based lace on the kit cards covers the same
   ground and reads as moving because those boxes are small enough that a tile
   crossing one is a large fraction of it. 80s puts it at 3.2 px/s: still calm,
   but you can see it without waiting for it.

   Only the duration changes. Same keyframes, same direction, so the whole page
   still drifts as one thing, and prefers-reduced-motion still stops all of it.

   MORE OF IT, IN TWO WAYS.

   1. Every existing layer comes up: the junk drawer to .42, the two keys to
      .40, the threads block to .34. All three sit under objects that are
      opaque or nearly so, so this shows in the margins and gutters and not
      through any type.

   2. The dignity grid gets a mat of its own. It is the right shape for one now
      and was not before: since the quadrants took their fuku tints they are
      four opaque panels with a 16px gutter between them, which is exactly the
      arrangement section 149 asked for. The layer goes on .dglist--2 and NOT
      on .dgplate, because the plate also carries the condition set, whose
      three reasons are running prose sitting straight on the ground - lace
      under those is the mistake section 88 already made once.

   AND THE FALL CARD GETS ITS DISTANCE. "Only Mercury doubles like this" was
   16px under the grid, which was fine when the cards had no edges. They have
   borders now, so 16px reads as touching. 26 above, and 22 below so the
   condition set does not crowd it from the other side either. */

/* ---- 1. visible drift ---- */
.senshi-art .junkdump::before,
.senshi-art .threads-block::before,
.senshi-art .twokeys::before,
.senshi-art .dglist--2::before{
  animation-duration:80s;
}

/* ---- 2. more of it ---- */
.senshi-art .junkdump::before{ opacity:.42; }
.senshi-art .twokeys::before{ opacity:.40; }
.senshi-art .threads-block::before{ opacity:.34; }

/* ---- 3. a mat under the four quadrants ---- */
.senshi-art .dglist--2{
  position:relative;
  isolation:isolate;
  padding:14px;
  border:1px solid var(--backbow);
}
.senshi-art .dglist--2 > *{ position:relative; z-index:1; }
.senshi-art .dglist--2::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat;
  background-size:cover, 256px 190px;
  background-color:var(--lace);
  background-blend-mode:normal, luminosity;
  opacity:.38;
  animation:lace-drift-bg 80s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .senshi-art .dglist--2::before{ animation:none; }
}

/* ---- 4. breathing room around the doubling ---- */
.senshi-art .dg-double{ margin:26px 0 22px; }


/* ==========================================================================
   165. THREE HEADINGS, ONE LOCKUP - AND THE PIXEL FONT GETS ITS FLOOR BACK
        (14 Sep 2026)
   ==========================================================================
   Ashley: the plate heading and the profile heading should match "her kit";
   the junk drawer's doily should visibly scroll; and all of the rainyhearts
   should be large enough to read.

   1. THE HEADINGS. "her kit" and "what she can do" are .block-h--arcs: her own
   glyph, the name in rainyhearts, and the four-pixel fuku gradient ruled under
   it. "profile through the astrology lens" was a bare .block-h and "in
   hellenistic astrology" was a solid blue title bar - three headings, three
   treatments. Both now carry the same markup and the same class, so the whole
   page has one heading and one heading only.

   The plate keeps a smaller version of it: 21px against the section's 24, and
   an 18px glyph. It is a heading INSIDE a boxed panel that already sits under
   a section heading, and at full size two lockups stack up 40px apart and
   argue about which one is the section. Same furniture, one step down, which
   is the normal way a heading hierarchy works.

   Losing the solid bar is the point rather than a side effect: the plate had a
   title bar because it had nothing else marking it, and it now has four tinted
   quadrants and a lace mat doing that work.

   2. THE JUNK DRAWER, ACTUALLY MOVING. Section 164 took it to 80s for one
   256x190 tile. Still not enough on a box that wide - the eye reads drift
   against the box's own edges, and 850px of drawer makes 3px/s look static.
   It gets its own keyframe: two tiles, 70s, about 7px/s diagonally, and a loop
   twice as long so the wrap point is harder to catch. Nothing else changes
   speed; this is the one that is meant to be a bit silly.

   IF IT STILL DOES NOT MOVE, IT IS NOT THE CSS. Every lace layer on this page
   is inside a @media (prefers-reduced-motion: reduce) guard that switches it
   off, and Windows turns that on when "Animation effects" is off in
   Accessibility > Visual effects. That is the correct behaviour and it should
   not be overridden in the stylesheet - it is a system-wide accessibility
   setting, not a preference about this page.

   3. THE PIXEL FONT, AGAIN. Section 147 raised the labels to a 13px floor and
   that was the right call then; eighteen of them are sitting exactly on it now
   and she still cannot read them. The floor goes to 14, and the dimmest go up
   in opacity too - a one-pixel stem at 78% is the same problem as a
   one-pixel stem at 12px. Measured, not guessed: every selector below is one
   the audit actually found at 13px or under, and each is matched at its own
   specificity because half of them are only reachable through a contextual
   rule.

   Sizes are absolute, not inherited or relative, so nothing here can drift
   again when a container's font-size changes. */

/* ---- 1. the plate heading joins the lockup ---- */
.senshi-art .dgplate-h{
  padding:0 0 9px;
  margin:0 0 12px;
  background:none;
  color:var(--head);
}
.senshi-art .dgplate-h .bh-t{
  font-size:21px; letter-spacing:.8px;
  filter:none;
}
.senshi-art .block-h--arcs.dgplate-h .bh-moon{ width:18px; height:18px; }
/* the plate's own padding has to come back, now the bar is gone */
.senshi-art .dgplate{ padding-top:13px; }
.senshi-art .dgplate .dgplate-h{ margin-left:15px; margin-right:15px; }

/* ---- 2. the junk drawer drifts twice as far ---- */
@keyframes lace-drift-far{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 0, 512px 380px; }
}
.senshi-art .junkdump::before{
  animation:lace-drift-far 70s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .senshi-art .junkdump::before{ animation:none; }
}

/* ---- 3. nothing in rainyhearts below 14px ---- */
.senshi-art .dg-card dt,
.senshi-art .dgcond .dgc dt{ font-size:14px; opacity:.95; }
.senshi-art .dossier-tail .astro-door,
.senshi-art .dossier-tail .astro-door span{ font-size:14px; }
.senshi-art .bust-figure .bust-cap,
.senshi-art figcaption.bust-cap{ font-size:14px; opacity:.9; }
.senshi-art .tk-role{ font-size:14px; }
.senshi-art .km--vid .km-cap .km-kind,
.senshi-art .km .km-cap .km-kind{ font-size:14px; opacity:.95; }
.senshi-art .km .km-cap .km-span,
.senshi-art .km-span{ font-size:14px; opacity:.95; }
.senshi-art .src-chip{ font-size:14px; }
.senshi-art .rung-debut{ font-size:14px; opacity:.9; }
.senshi-art .thread-kind{ font-size:14px; }
.senshi-art .thread-foot .thread-full,
.senshi-art .thread-full{ font-size:14px; }
.senshi-art .junkdump-h{ font-size:15px; }
.senshi-art .junk-note{ font-size:14px; opacity:.9; }
.senshi-art .codex-strip-label{ font-size:14px; }
.senshi-art .credit-bumper-link{ font-size:14px; }
.senshi-art .banner .vitals .vt-k{ font-size:14px; opacity:.95; }
.senshi-art .kitarc-h .ka-n{ font-size:15px; }


/* ==========================================================================
   166. THE TWO THAT IGNORED THE FLOOR, AND FOUR EQUAL QUADRANTS
        (14 Sep 2026)
   ==========================================================================
   1. The rung chips. .src-chip and .rung-debut stayed at 13px after 165,
   because inside a .rung they are set by `.senshi-art .rung .src-chip` (0,3,0)
   and 165 wrote `.senshi-art .src-chip` (0,2,0). Being later in the file
   settles a tie and nothing else - the same trap as sections 154 and 147. Both
   are matched at the rung's own specificity here.

   2. Ashley: "the dignity grid. make sure all 4 boxes end up the same height."
   Section 156 deliberately chose align-items:start, and gave a reason: a
   stretched card pads its short side with its own background, which is dead
   space wearing a card's clothes. That reasoning expired the moment the
   quadrants got tints and borders in 163 - an unstretched panel now reads as a
   box that stopped early rather than as spacing, and the four are meant to be
   four of a kind.

   grid-auto-rows:1fr does the whole job and align-items:stretch, which is the
   default, is restored explicitly because 156 turned it off. 1fr on the rows
   rather than stretch alone, because stretch only equalises the two cards
   WITHIN a row: with two rows of two, row 2 (detriment, with the longest
   reason on the plate) would still be taller than row 1. 1fr makes every row
   the height of the tallest content anywhere in the grid, so all four match.

   The pictures keep their own aspect ratio, so the extra height lands under
   the text where it belongs and no crop changes. */
.senshi-art .rung .src-chip{ font-size:14px; padding:2px 7px; }
.senshi-art .rung .rung-debut{ font-size:14px; opacity:.9; }

.senshi-art .dglist--2{
  align-items:stretch;
  grid-auto-rows:1fr;
}
.senshi-art .dglist--2 .dg-card{ height:100%; }



/* ==========================================================================
   167. A SELECTION COLOUR THAT IS NOT GREY, AND THE PROFILE BOXES GET SOME
        TYPOGRAPHY   (14 Sep 2026)
   ==========================================================================
   1. THE HIGHLIGHT. Section 146 set `.senshi-art ::selection` to var(--frontbow),
   and both halves of that were wrong.

   The colour: Mercury's front bow is #bcfaff, a pale cyan. Dragged over pale
   blue paper with dark ink on it, a pale cyan wash does not read as a colour
   at all - it reads as the grey a browser gives you when nothing is set. She
   asked for a brighter fuku colour and got the palest one on the page.

   The scope: `.senshi-art ::selection` only covers text inside the article.
   The sidebar, the footer and anything else on the page kept the browser
   default, which IS grey. So half of what she was selecting was genuinely
   unstyled.

   Both are fixed by hanging the colour off the body instead. Each senshi gets
   a --sel of their own, chosen by measurement: the fuku trim if it clears
   4.5:1 against white, otherwise the skirt, which always does. On Mercury that
   is #004ea0, the skirt - 8.1:1, unmistakably blue, and white text on it stays
   readable, which the pale bow could never manage.

   All 25 are written here rather than one, so the rollout does not have to
   come back for it.

   2. THE PROFILE BOXES. Ashley: "please stylize the text more in some way."
   Three moves, and deliberately only three - this is the section with the most
   running prose on the page and the point is to give the eye somewhere to
   land, not to decorate every sentence.

   THE LEAD-IN. Every paragraph in this section opens with a bolded clause
   ("Ami arrives as a rumour", "Her planet is Hermes"). They were bold and
   nothing else. They now take the fuku skirt colour and a little tracking, so
   scrolling the section gives you its argument in six phrases.

   THE TERMS. The Latin and Greek in here - self-ruled, enantioma, Thema Mundi,
   ami - was italic and the same colour as the sentence around it. It takes the
   bow colour, so a technical term looks like one.

   THE DROP CAP. The first paragraph of the section opens with a rainyhearts
   capital, three lines deep, in the skirt colour. One per page, on the first
   paragraph only - a drop cap is a signal that the reading starts HERE, and it
   stops meaning that the second time you use it.

   ::first-letter takes the letter inside the opening <b>, which is what makes
   this work without any extra markup: the A of "Ami" is both the drop cap and
   the start of the bolded lead-in. */

/* ---- 1. the highlight, per senshi ---- */
body.senshi--artemis    { --sel:#2f3948; }   /* 11.7:1 on white */
body.senshi--ceres      { --sel:#7e123f; }   /* 10.3:1 on white */
body.senshi--chibimoon  { --sel:#6a1b39; }   /* 11.5:1 on white */
body.senshi--cosmos     { --sel:#3e3076; }   /* 11.1:1 on white */
body.senshi--diana      { --sel:#3a324a; }   /* 12.1:1 on white */
body.senshi--fighter    { --sel:#d52441; }   /* 5.1:1 on white */
body.senshi--galaxia    { --sel:#641a14; }   /* 12.4:1 on white */
body.senshi--healer     { --sel:#26835d; }   /* 4.7:1 on white */
body.senshi--helios     { --sel:#4b3d17; }   /* 10.6:1 on white */
body.senshi--juno       { --sel:#324917; }   /* 10.0:1 on white */
body.senshi--jupiter    { --sel:#135c04; }   /* 8.2:1 on white */
body.senshi--kakyuu     { --sel:#71201a; }   /* 10.9:1 on white */
body.senshi--luna       { --sel:#906e14; }   /* 4.7:1 on white */
body.senshi--maker      { --sel:#914cdd; }   /* 4.9:1 on white */
body.senshi--mars       { --sel:#6a1d0f; }   /* 11.7:1 on white */
body.senshi--mercury    { --sel:#004ea0; }   /* 8.1:1 on white */
body.senshi--moon       { --sel:#1f4fa8; }   /* 7.7:1 on white */
body.senshi--neptune    { --sel:#1e8368; }   /* 4.7:1 on white */
body.senshi--pallas     { --sel:#144663; }   /* 10.1:1 on white */
body.senshi--pluto      { --sel:#c8152e; }   /* 5.8:1 on white */
body.senshi--saturn     { --sel:#8446cd; }   /* 5.6:1 on white */
body.senshi--tuxedomask { --sel:#101728; }   /* 17.9:1 on white */
body.senshi--uranus     { --sel:#0148a4; }   /* 8.5:1 on white */
body.senshi--venus      { --sel:#6b4c00; }   /* 7.9:1 on white */
body.senshi--vesta      { --sel:#781f11; }   /* 10.5:1 on white */

::selection{
  background:var(--sel, #004ea0);
  color:#ffffff;
  text-shadow:none;
}
.senshi-art ::selection{
  background:var(--sel, #004ea0);
  color:#ffffff;
}

/* ---- 2a. the lead-in clause ---- */
.senshi-art #profile .bio-text p b,
.senshi-art #profile .bio-run-text p b,
.senshi-art #profile .dg-double b{
  color:var(--name-a);
  letter-spacing:.3px;
}

/* ---- 2b. the technical terms ---- */
.senshi-art #profile .bio-text p i,
.senshi-art #profile .bio-run-text p i,
.senshi-art #profile .dg-why i,
.senshi-art #profile .tk-body i{
  color:var(--name-b);
  font-style:italic;
  letter-spacing:.2px;
}

/* ---- 2c. one drop cap, on the first paragraph only ---- */
.senshi-art #profile .bio-row:first-of-type .bio-text > p:first-child::first-letter{
  float:left;
  font-family:rainyhearts, monospace;
  font-size:52px;
  line-height:.82;
  padding:6px 10px 0 0;
  color:var(--name-a);
}
@media (max-width: 560px){
  .senshi-art #profile .bio-row:first-of-type .bio-text > p:first-child::first-letter{
    font-size:40px;
  }
}


/* ==========================================================================
   168. THE DRAWER DRIFTS SIDEWAYS   (14 Sep 2026)
   ==========================================================================
   Ashley: "junk drawer doily background should scroll horizontal... not
   diagonally."

   Every other lace layer on the page moves on both axes, which suits a square
   patch behind a card. The drawer is the one wide shallow box on the page -
   850 by about 250 - and a diagonal drift in a letterbox reads as the pattern
   sliding away downhill, because the vertical component crosses the short
   dimension several times faster than the horizontal one crosses the long one.

   Straight across, two tiles, 70s. The tile repeats every 256px so the wrap is
   invisible; only the direction changes. */
@keyframes lace-drift-across{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 0, 512px 0; }
}
.senshi-art .junkdump::before{
  animation:lace-drift-across 70s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .senshi-art .junkdump::before{ animation:none; }
}


/* ==========================================================================
   169. EVERY DOILY GOES SIDEWAYS   (14 Sep 2026)
   ==========================================================================
   Ashley: "no doily background should be scrolling vertically. all
   horizontally plz."

   Section 168 did the junk drawer. This does the rest of them in one place,
   which is also the honest way to write it: the direction of the lace is a
   page-wide decision, not a per-box one, and having one box drift across while
   five drift diagonally is the sort of thing you feel before you can name it.

   There are two mechanisms on this page and both have to change, or half of it
   keeps sliding downhill:

     background-position   the junk drawer, threads block, two keys, dignity
                           grid. Their keyframes ran 0 0 -> 256px 190px.
     transform             lace-drift-a, which drifts a layer that overhangs
                           its box. It ran translate3d(0,0,0) ->
                           (-256px,-190px,0).

   km-doily and lace-drift-b were already horizontal and are left alone. The
   two kit-doily keyframes animate background-position rather than transform,
   and the override has to animate the same property or it silently does
   nothing - which is the version of this I wrote first.

   Redefining a @keyframes by name is a clean override - the last definition
   wins, every rule using the name picks it up, and no rule below needs
   touching. So the four keyframe names are simply re-declared with the Y
   component dropped, and the tiles keep their own periods.

   The kit-card overhang was sized for diagonal travel: inset 0 -256px -190px 0
   gives a tile of slack on both axes. Horizontal travel only needs the right
   edge, and the bottom slack is now unused - harmless, and left alone so the
   overhang does not have to be re-derived per box. */
@keyframes lace-drift-bg{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 0, 256px 0; }
}
@keyframes lace-drift-a{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-256px,0,0); }
}
/* these two animate background-position, not transform - the property has to
   match the original or the rule stops doing anything at all */
@keyframes kit-doily{
  from{ background-position:0 0; }
  to  { background-position:256px 0; }
}
@keyframes kit-doily-2{
  from{ background-position:0 0, 0 0; }
  to  { background-position:0 0, 256px 0; }
}


/* ==========================================================================
   170. THE CHARACTER LINE ON EACH DIGNITY   (15 Sep 2026)
   ==========================================================================
   Ashley: "I asked you to connect Mercury more in her dignities, please do the
   same for mars and the others moving forward."

   Each card now carries two things that are not the same kind of statement.
   The first is the astrology, and it is identical on every page that planet
   appears on - Mars's detriment reads the same for Rei as it would for anyone.
   The second is what that placement looks like in THIS character, and it is
   hers alone.

   They have to be told apart at a glance or the card reads as one long
   paragraph that drifts from doctrine into fan writing. The tie gets a rule
   above it in the quadrant's own fuku tint, a little space, and the ink comes
   up to full strength while the astrology above it stays at .82 - so the
   character line is the one that looks written rather than compiled.

   NOT italic, which was the first try. The dignity text already uses italics
   for the Latin and Greek, and a whole italic paragraph underneath made the
   card look like it was quoting something. */
.senshi-art .dg-tie{
  display:block;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--dg-tint, var(--name-a)) 38%, transparent);
  font-size:13px; line-height:1.5;
  color:var(--ink);
}
.senshi-art .dg-tie b{ color:var(--name-a); }

/* in the condition set it sits under the three facts, not inside one */
.senshi-art .dgcond-list .dg-tie,
.senshi-art .dgset--cond .dg-tie{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed color-mix(in srgb, var(--head) 26%, transparent);
}


/* ==========================================================================
   171. THE CODEX HOVERS COME TO THE PROFILES   (15 Sep 2026)
   ==========================================================================
   Ashley: "we had the same sort of hover feature in many of our astrology
   articles that tied around the codex. we should do that for the pages we've
   worked on and moving forward."

   The machinery already exists and none of it is rewritten here:
   js/glossary.js reads glossary_terms.json, wraps the first occurrence of each
   canon term in a .gloss span, and pops the definition at the cursor in
   #gloss-pop. All it needed was permission to look at .senshi-art as well as
   .post-content, and the mark needed a style over here.

   THE MARK STAYS SITE PINK, deliberately, even on a blue page. It is not
   decoration, it is a promise: everywhere on this site, a pink dotted word
   means "hover me and the codex answers". Tinting it per senshi would make the
   affordance mean something different on every page, and the popup it opens is
   the same pink-on-dark box regardless. The one concession is the underline,
   which is softened here because these pages have far more of these marks per
   square inch than a blog post does.

   The dignity plate hand-marks its own six words in the generator rather than
   waiting for the scan, for two reasons: they are the subject of the box, and
   hand-marked terms do not count against the auto-scan budget - so the budget
   goes to the prose instead of being eaten by the plate.

   Desktop only, and that is the existing contract, not a new one: the script
   bails below 1250px and on touch, where a definition at a fingertip is noise.
   The mark stays visible there, which is right - it tells you the word is a
   defined term even when there is nowhere to hover. */
.senshi-art .gloss{
  color:#d81888;
  border-bottom:1px dotted rgba(216,24,136,.55);
  cursor:help;
  text-decoration:none;
}
@media (hover: hover){
  .senshi-art .gloss:hover{
    color:#ff51b7;
    border-bottom-color:#ff51b7;
  }
}
@media (max-width: 1249px){
  .senshi-art .gloss{ cursor:text; }
}

/* inside the rainyhearts labels the dotted rule sits too close to the
   baseline of a pixel face, so it gets a pixel of air */
.senshi-art .dg-card dt .gloss,
.senshi-art .dgc dt .gloss{
  padding-bottom:1px;
}


/* ==========================================================================
   172. HER KIT IN THREE COLUMNS   (15 Sep 2026)
   ==========================================================================
   Ashley: "can this be 3 columns instead? ... vertically stacked they take a
   lot of space, so maybe next to each other."

   The list was already a grid, and it was already allowed three columns -
   auto-fit at minmax(260px, 1fr). It never got them, because two rules took
   every interesting card out of the flow:

     .kb--wand            { grid-column: 1 / -1; }
     .kb:has(.kb-art)     { grid-column: 1 / -1; }

   The wand spanned because its cycler wanted room; the .kb-art cards spanned
   because the visor and the supercomputer are wide pictures that looked
   squeezed in a 92px column. Between them, Mercury's kit was three full-width
   rows stacked - one column wearing a grid's clothes.

   Both spans go, and the card changes shape to earn it: picture ON TOP,
   caption under, instead of a 92px picture column beside the text. At 260px a
   side-by-side card gives the words about 150px, which is four or five to a
   line. Stacked, the whole column width is the measure.

   The pictures now scale to the card rather than to a fixed pixel width, so a
   wide scan (the supercomputer) and a tall sprite (the wand) both sit in the
   same 3-up rhythm. The wand's sprites keep their integer 2x and simply centre
   in whatever width the column is.

   Three columns EXACTLY, not auto-fit. Auto-fit gives four columns on a wide
   window and two on a medium one, and the drawer under it has a fixed rhythm
   of its own; 3 / 2 / 1 at defined widths keeps the two boxes agreeing. */
.senshi-art .kb-list{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.senshi-art .kb--wand,
.senshi-art .kb:has(.kb-art){
  grid-column:auto;
}
.senshi-art .kb{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:12px;
}
.senshi-art .kb-shot,
.senshi-art .kb--wand .kb-shot,
.senshi-art .kb:has(.kb-art) .kb-shot{
  width:auto; max-width:100%;
  align-self:center;
  min-height:96px;
}
.senshi-art .kb-shot .kb-art{
  width:auto; max-width:100%; height:auto;
}

@media (max-width: 1000px){
  .senshi-art .kb-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .senshi-art .kb-list{ grid-template-columns:minmax(0, 1fr); }
}


/* ==========================================================================
   173. THE HOVER LEAVES THE HEADINGS   (15 Sep 2026)
   ==========================================================================
   Ashley, on seeing 171 land: "in mercury's profile, you added the feature to
   the first time the text appears on the page right? that's not gonna work.
   some of the hovers are in the headings and banners. the hover feature should
   only work in the text body of the site."

   She is right twice over. A pink dotted rule under a word set in rainyhearts
   display type fights the type; and a heading is a label, not a sentence, so
   there is nothing around the word to make the definition land.

   Two changes, and neither of them is a filter that has to guess:

   1. THE SCANNER IS POINTED AT PROSE BY NAME. js/glossary.js no longer scans
      .senshi-art. It scans a list of twelve prose containers - .bio-text,
      .bio-run-text, .dossier-lede, .dg-why, .dg-tie, .dg-double, .tk-body,
      .thread-excerpt, .km-desc, .kb-note, .kb-stage-d, and .post-content for
      the blog. A masthead, a stat table, a chip, a card title, an arc name and
      the junk drawer are not on the list, so they are never touched - by
      construction, not by exclusion.

   2. THE PLATE'S SIX HAND-MARKS MOVED DOWN OUT OF THE <dt>. Section 171 said
      the dignity plate hand-marks its own vocabulary; it did, but it marked
      the card LABEL, which is exactly the heading she means. The mark now sits
      in the card's reason-prose, on the phrase that does the defining:

          domicile     self-ruled
          exaltation   Raised up
          detriment    contradiction, not weakness
          fall         Opposite the exaltation
          sect         Sect / Neither team
          joy          glad to be found

      This reads better than marking the bare word did. The popup titles itself
      with the canon term, so hovering "Opposite the exaltation" and being told
      "Fall - a planet in the sign opposite its exaltation" is a sentence that
      finishes itself.

   The dt rule left in 171 is now dead and is left where it is rather than
   reached back into: nothing in this file is edited above the line it was
   written on. It costs one selector and it documents where the mark used to
   live.

   The only thing that needs saying in CSS is the italic case: the domicile
   anchor is <i>self-ruled</i>, so the mark wraps an italic and the dotted rule
   has to clear the descenders of a slanted face. */
.senshi-art .dg-why .gloss > i,
.senshi-art .dg-why .gloss i{
  font-style:italic;
}
.senshi-art .dg-why .gloss:has(i){
  padding-bottom:1px;
}


/* ==========================================================================
   174. A MOVE CARD WITH A LINK AND NO FRAMES YET   (15 Sep 2026)
   ==========================================================================
   js/moves.js gained a third fallback state. The file's header always promised
   that a dead embed was survivable "because the stills are always one click
   away underneath" - true for a card with eight frames, and false for a card
   that has a YouTube link and no frames pulled yet, which rendered as a silent
   264px hole. Four of Jupiter's cards are in exactly that state right now.

   So renderStills() now checks for data-yt before giving up, and a card with
   a link but no frames sets data-state="link" and offers the video.

   The markup it writes reuses .kmv-nojs, which section 7877 already positions
   dead centre in the shot box - the right place, since it was written for the
   same "this is all there is" case with JS off. What it does NOT do is style
   the anchor inside, because a noscript block never got the chance to be seen
   with CSS applied. Now it can be, so the anchor gets the site's treatment
   instead of the browser's default blue underline. */
.senshi-art .km-vid[data-state="link"]{
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  background:rgba(0,0,0,.10);
  background:color-mix(in srgb, var(--ink) 8%, transparent);
}
.senshi-art .kmv-nojs a{
  color:var(--head);
  font-family:"rainyhearts", monospace; font-size:14px; letter-spacing:.4px;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
  padding-bottom:1px;
}
@media (hover: hover){
  .senshi-art .kmv-nojs a:hover,
  .senshi-art .kmv-nojs a:focus-visible{
    color:var(--accent);
    border-bottom-style:solid;
  }
}


/* ==========================================================================
   175. A TALL PICTURE IN A THREAD CARD                    (14 Sep 2026)
   ==========================================================================
   The thread card's shot floats right and the copy wraps down its left side.
   That was written against Mercury's Ami's First Love picture, which is a
   wide anime still (900 x 510): two short paragraphs are taller than it, so
   the text closes under it and there is no hole.

   The Rei and Minako card is a Takeuchi colour plate, 760 x 1099 - taller
   than it is wide, and taller than the copy beside it. Floated at the same
   width it ran about 250px past the end of the last line and left a large
   empty square to its left, which reads as a missing paragraph rather than
   as a picture.

   So: a portrait plate in a thread card is capped by HEIGHT instead of by
   width, and takes whatever width that leaves it. 380px lands the bottom of
   the plate within a line or two of the bottom of the copy on desktop.
   Width:auto is stated because rule 144's .art--threadshot sets width:100%,
   which would otherwise beat the height cap and stretch it back out.

   Not keyed to the one card - any thread shot marked art--tall gets it, so
   the next portrait plate someone drops into a thread card behaves. The
   phone breakpoint already unfloats every thread shot and centres it, and
   nothing here touches that.
   ========================================================================== */
.senshi-art .thread-body > .thread-shot img.art--tall{
  width:auto; max-width:100%;
  height:auto; max-height:380px;
  aspect-ratio:auto;            /* rule 144 pins 4/3 on .art--threadshot */
  object-fit:contain;
}
.senshi-art .thread-body > .thread-shot:has(img.art--tall){
  max-width:none;               /* the height cap decides the size now */
  width:auto;
}
@media (max-width: 700px){
  .senshi-art .thread-body > .thread-shot img.art--tall{
    max-height:none;            /* centred and full width down here */
    width:100%;
  }
}


/* ==========================================================================
   176. A LINK INSIDE A KIT CARD                           (15 Sep 2026)
   ==========================================================================
   Ashley: Artemis goes in Venus's kit after the wand, and Luna in Usagi's the
   same way, and "give artemis a mini link inside the card to link to their
   profiles."

   Every other kit card describes an object, so the card had no reason to be
   a doorway to anywhere. A cat is not an object: he has his own page, and a
   reader who meets him here should be able to go straight to it without
   scrolling back up to the roster.

   So: a small link on its own line under .kb-note, in the label face the kit
   box already uses, sized to sit UNDER the note rather than compete with the
   .kb-name above it. Dotted underline at rest and solid on hover, which is the
   same grammar as .kmv-nojs (section 174) and .gloss - on this site a dotted
   underline means "this goes somewhere" and we are not inventing a second
   vocabulary for it.

   .kb-link-row exists so the spacing lives on a wrapper rather than on the
   anchor: an inline-level margin-top on a link inside a flowed card is the
   kind of thing that collapses differently the moment the card gets a second
   paragraph.
   ========================================================================== */
.senshi-art .kb-link-row{
  margin:7px 0 0;
  font-family:"rainyhearts", monospace;
  font-size:12px; line-height:1.4;
}
.senshi-art .kb-link{
  color:var(--head);
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}
.senshi-art .kb-link:hover,
.senshi-art .kb-link:focus-visible{
  color:var(--accent);
  border-bottom-style:solid;
}
@media (max-width: 700px){
  .senshi-art .kb-link-row{ font-size:12.5px; }
}


/* ==========================================================================
   177. THE WHOLE SCHEME - the essential dignity table    (16 Sep 2026)
   ==========================================================================
   MOVED OUT. These rules now live in their own file, dgtable.css, linked by
   the profiles AND by dignity.html in the codex. They left because the codex
   article pages load index.css only - they never see senshi.css - and the
   chart had to be the same object in both places rather than two copies
   drifting apart.

   Nothing to edit here. dgtable.css is the file.
   ========================================================================== */


/* ==========================================================================
   178. THE DIGNITY BOX, LARGER                           (16 Sep 2026)
   ==========================================================================
   Ashley: "in the dignity box... the font rainyhearts is too small to read for
   me. make slightly larger."

   rainyhearts is a pixel face and it sits small for its declared px size, so
   13px there reads more like 11px of a normal font. This raises the prose in
   the dignity plate by about 1.5px and nudges the line-height with it, because
   scaling the text without the leading just makes a denser brick.

   Appended rather than edited in place, per the house rule, so the original
   numbers are still visible upstream and this is one block to tune or lift
   out. Only the plate is touched - the kit box, the move cards and the threads
   keep their own sizes, since the complaint was about this box.
   ========================================================================== */
.senshi-art .dg-why,
.senshi-art .dg-tie{ font-size:14.5px; line-height:1.62; }
.senshi-art .dgc .dg-why{ font-size:14.5px; }
.senshi-art .dg-card dt{ font-size:14.5px; }
.senshi-art .dgset-h{ font-size:14px; letter-spacing:.4px; }
.senshi-art .dg-v{ font-size:15px; }

@media (max-width: 700px){
  .senshi-art .dg-why,
  .senshi-art .dg-tie,
  .senshi-art .dgc .dg-why{ font-size:13.5px; line-height:1.6; }
  .senshi-art .dg-card dt{ font-size:13.5px; }
  .senshi-art .dgset-h{ font-size:13px; }
  .senshi-art .dg-v{ font-size:14px; }
}

/* --- 178b. and the same, at the specificity the old rules actually use ---
   The block above raised .dg-tie but NOT .dg-why, and the render showed it:
   the character line grew, the astrology line above it stayed small. Three
   earlier rules target .dg-why more specifically than ".senshi-art .dg-why" -
   .dg-card .dg-why (rule 152), .dgcond .dgc .dg-why (rule 155) and
   .dg-row .dg-why - so being later in the file was not enough to win. Same
   sizes, restated at a specificity that matches. */
.senshi-art .dg-card .dg-why{ font-size:14.5px; line-height:1.62; }
.senshi-art .dgcond .dgc .dg-why{ font-size:14.5px; }
.senshi-art .dg-row .dg-why{ font-size:14px; line-height:1.6; }

@media (max-width: 700px){
  .senshi-art .dg-card .dg-why{ font-size:13.5px; line-height:1.6; }
  .senshi-art .dgcond .dgc .dg-why{ font-size:13.5px; }
  .senshi-art .dg-row .dg-why{ font-size:13px; }
}


/* ==========================================================================
   179. OTHER TELLINGS, PACKED                            (16 Sep 2026)
   ==========================================================================
   Ashley: "on the landing page... other tellings, can we condense this down?
   i'll look for pictures, but it's tall and taking a lot of real estate."

   THE HEIGHT WAS NOT THE CARDS, IT WAS THE GAPS. .elsegrid is a three-column
   CSS grid, so every row is as tall as the tallest card in it. Row one paired
   a 501px card with a 249px one and left a quarter of the section as white
   space. Measured at 1440: the section ran 1777px, and a large part of that
   was nothing at all.

   CSS columns instead of grid. Cards flow and pack against each other with no
   row to stretch to, and break-inside:avoid keeps a card from splitting across
   a column. Reading order becomes down-then-across rather than across-then-
   down, which for this list is fine - it is chronological either way, and it
   now stays chronological down each column.

   COVERS ARE PORTRAIT. The shot slot was written for 4:3 anime stills, with
   object-fit:cover doing the cropping. A book cover put through that loses its
   top and bottom - which on these is the logo and the author's name. So a shot
   marked --cover is capped by HEIGHT, keeps its own ratio, and is never
   cropped. It is also the thing that makes the cards short: a 210px cover in
   place of a 215px 4:3 placeholder that was also full card width.
   ========================================================================== */
.senshi-art .elsegrid{
  display:block;                 /* out of grid, into columns */
  columns:3;
  column-gap:18px;
}
.senshi-art .elsegrid > .elsecard{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 18px;
  display:block;                 /* flex column + break-inside do not mix well */
}
.senshi-art .elsegrid > .elsecard > * + *{ margin-top:12px; }

/* a portrait cover, shown whole */
.senshi-art .elsecard-shot--cover{ max-width:none; text-align:center; }
.senshi-art .elsecard-shot--cover img{
  display:inline-block;
  width:auto; height:210px; max-width:100%;
  aspect-ratio:auto;             /* rule 61 pins 4/3 on .art--elseshot */
  object-fit:contain;
  margin:0;
}

@media (max-width: 1100px){ .senshi-art .elsegrid{ columns:2; } }
@media (max-width: 700px){
  .senshi-art .elsegrid{ columns:1; }
  .senshi-art .elsecard-shot--cover img{ height:190px; }
}

/* --- 179b. the two other shapes a telling can be pictured by ---
   Not every one of these is a 4:3 still or a book cover. The dub card is a
   transparent wordmark, which wants no frame and room to breathe; a film
   poster is portrait like a book cover and takes the same treatment. */
.senshi-art .elsecard-shot--logo{ max-width:none; text-align:center; }
.senshi-art .elsecard-shot--logo img{
  display:inline-block;
  width:auto; height:auto; max-width:100%; max-height:130px;
  aspect-ratio:auto; object-fit:contain;
  border:0; background:none; padding:6px 0; margin:0;
}

/* --- 179c. and smaller, because the point was to save height ---
   Packing the cards recovered the dead grid space, but the shots themselves
   were still ~215px tall apiece across nine cards. These are thumbnails on a
   contents list, not plates: the reader is deciding which telling to care
   about, and a smaller picture does that job just as well. Roughly 60px back
   per card, which is most of a screen across the section. */
.senshi-art .elsecard-shot--cover img{ height:168px; }
.senshi-art .elsecard-shot--logo img{ max-height:104px; }
.senshi-art .elsecard-shot .ph--elseshot,
.senshi-art .elsecard-shot img.art--elseshot{ max-height:168px; }
.senshi-art .elsecard-shot .ph--elseshot{ aspect-ratio:auto; height:168px; }
.senshi-art .elsecard-shot{ max-width:none; }

@media (max-width: 700px){
  .senshi-art .elsecard-shot--cover img{ height:190px; }
  .senshi-art .elsecard-shot .ph--elseshot{ height:190px; }
}

/* ==========================================================================
   180. --onhead: THE INK THAT GOES ON --head            (15 Sep 2026)
   ==========================================================================
   Ashley, 15 Sep: "fix venus please."

   THE BUG. The palette defines --skirt (the nameplate colour), --head (the
   heading-bar colour) and --onskirt (ink to sit on --skirt). It never defined
   an ink for --head. The two rules below paint --onskirt onto --head anyway,
   and so does the dignity table's highlighted row over in dgtable.css.

   That worked for a year by coincidence. On a guardian whose colour is already
   dark, --skirt and --head are set to THE SAME VALUE, so the ink for one is
   the ink for the other. On a guardian whose colour is PALE, --skirt keeps the
   pale and --head is a darkened version of it - and --onskirt, correctly a
   dark ink for that pale skirt, is then being painted onto a dark bar.

   Not a Venus problem. Swept every page carrying the palette: seventeen have
   --skirt == --head and are fine; TEN separate them and every one of the ten
   failed WCAG AA, between 2.33:1 and 2.94:1 against 4.5 needed - Venus, Sailor
   V, Sailor Moon herself, Helios, Ceres, Pallas, Juno, Vesta, Cosmos, and the
   landing page's own moon palette.

   THE FIX. Ask for --onhead and fall back to --onskirt. Pages where the two
   colours are the same need no edit at all: the fallback resolves to exactly
   what they already use and not one pixel of them changes. The ten pages where
   the palette genuinely separates now carry --onhead - a near-white holding a
   trace of that guardian's own hue, chosen by search rather than by eye and
   contrast-checked against that page's own --head (see astro-notes/onhead.py;
   Helios needed nine lifts before it cleared, which is exactly the sort of
   near-miss that gets waved through when a human picks the number).

   Anything NOT listed here that uses --onskirt is painting on --skirt and is
   correct as it stands: the banner, the junk drawer, .tk-role, the solo thread
   kind. Those were checked one at a time, not assumed.
   ========================================================================== */
/* NOT .dgplate-h. It LOOKS like a third case - line 9966 does say
   "color:var(--onskirt); background:var(--head)" - but a later section already
   overrode that bar to "background:none; color:var(--head)", so it has not
   painted ink on --head for some time. Repointing it here actually broke it:
   a near-white ink landed on the paper background at 1.01:1, on every profile,
   including the ones this section was not supposed to touch at all. Caught by
   measuring the control (Mars, whose skirt and head are the same colour, so
   nothing about it should have moved) rather than only the page being fixed.
   Two live cases, then, not three. */
.senshi-art .credit-bumper-link:hover,
.senshi-art .credit-bumper-link:focus-visible{
  color:var(--onhead, var(--onskirt));
}

/* ==========================================================================
   181. THE JUNK DRAWER OPENS, AND SLIDES              (15 Sep 2026)
   ==========================================================================
   Ashley, 15 Sep: "place them however you want within each junk drawer... no
   crushing the images" and "make the junk drawers collaposable as well please.
   but start open...."

   WHY SIDEWAYS. The no-crushing rule decides the layout, and the obvious
   answers all break it. The article column is 854px and cannot be widened -
   the profile sits in a 1240px cabinet but is not centred in it, there is a
   sidebar to the right, so a symmetric breakout runs under the sidebar and an
   asymmetric one has 68px to play with. Measured, not guessed. Inside 854px
   most of these graphics are 480-640 wide, so two will not sit side by side,
   and every "pack it better" idea - flex-wrap, CSS columns, a justified photo
   gallery - comes back to the same move: shrink the big ones. That is the
   crushing she ruled out, and on the pixel-art ones it would be vandalism.

   A horizontal shelf makes the constraint irrelevant. Nothing is resized by a
   pixel, and the section's height becomes the height of the TALLEST item
   instead of the sum of all of them: Usagi's drawer goes from about 4900px to
   about 500. It also suits the object - you rummage sideways through a drawer.

   OPEN AND SHUT is the checkbox trick the arc chapters already use, so there is
   no JavaScript here either. The markup carries `checked`, so a drawer starts
   OPEN. A checkbox may have as many labels as it likes, so there is a pull tab
   under the heading AND one at the far end of the shelf - whichever end you
   finish at, the control is under your hand. That is the same fix the chapters
   want for their own "scroll all the way back up to close it" problem.
   ========================================================================== */
.senshi-art .junk-in{
  position:absolute; opacity:0; width:1px; height:1px;
  margin:0; pointer-events:none;
}

/* the pull tab */
.senshi-art .junk-pull{
  display:inline-block; margin:2px 0 12px;
  padding:3px 11px 4px;
  font-family:rainyhearts, monospace; font-size:13.5px; letter-spacing:.3px;
  color:var(--onhead, var(--onskirt)); background:var(--head);
  border-radius:999px; cursor:pointer;
  user-select:none;
}
.senshi-art .junk-pull:hover{ filter:brightness(1.12); }
.senshi-art .junk-in:focus-visible + .junkdump-h ~ .junk-pull,
.senshi-art .junk-pull:focus-visible{ outline:2px dotted currentColor; outline-offset:2px; }

/* one label, two faces: whichever matches the current state is the one shown */
.senshi-art .junk-pull .jp-b,
.senshi-art .junk-in:not(:checked) ~ .junk-pull .jp-a{ display:none; }
.senshi-art .junk-in:not(:checked) ~ .junk-pull .jp-b{ display:inline; }

/* shut: the shelf goes, the tab stays */
.senshi-art .junk-in:not(:checked) ~ .junk-shelf{ display:none; }

/* ---- the shelf ----
   overflow-x on the shelf, nowrap + max-content on the row inside it. The row
   keeps every graphic at its natural size and simply runs off to the right. */
.senshi-art .junk-shelf{
  overflow-x:auto; overflow-y:hidden;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.senshi-art .junk-shelf .junk-row{
  flex-wrap:nowrap;
  width:max-content;
  justify-content:flex-start;
  max-width:none;
}
/* a visible rail, so it reads as something you slide */
.senshi-art .junk-shelf::-webkit-scrollbar{ height:10px; }
.senshi-art .junk-shelf::-webkit-scrollbar-track{
  background:rgba(255,253,246,.5); border-radius:999px;
}
.senshi-art .junk-shelf::-webkit-scrollbar-thumb{
  background:var(--head); border-radius:999px; opacity:.8;
}
.senshi-art .junk-pull--foot{
  margin:12px 0 0 14px;
  align-self:center; flex:0 0 auto;
}

/* ---- the panel belongs to the SHELF, not to the row ----
   .junk-row carries the pale rounded panel (section 9323). That was right when
   the row was the full width of the column and wrapped. On a shelf the row is
   `width:max-content` - ten thousand pixels wide on Usagi's page - so its
   border and its rounded corners sit miles off-screen and you only ever see
   the left edge. Move the panel onto the shelf, which is the part that stays
   the width of the column, and the box closes properly on both sides again.

   It also fixes how the shelf reads. Items sit on the shelf floor
   (align-items:flex-end), and one tall graphic sets the height for everyone -
   Usagi has a 666px one - so there is empty air above the short ones. Inside a
   huge pale box that air looked like a mistake; with the panel hugging the
   visible shelf it just looks like headroom. */
.senshi-art .junk-shelf{
  background:rgba(255,253,246,.72);
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  padding:16px 18px 10px;
}
.senshi-art .junk-shelf .junk-row{
  background:none; border:0; border-radius:0; padding:0;
}

/* the foot tab sits OUTSIDE the scrolling shelf, so it does not slide away the
   moment you rummage - which was the whole point of having a second one - but
   it still belongs to the open state and goes when the drawer shuts */
.senshi-art .junk-in:not(:checked) ~ .junk-pull--foot{ display:none; }
.senshi-art .junk-pull--foot{ margin:10px 0 0; }

/* ==========================================================================
   182. THE JUNK DRAWER GOES TO GEOCITIES               (15 Sep 2026)
   ==========================================================================
   Ashley, 15 Sep: "this is the one place on the profile we can go old school
   silly neocities web styling. make this fun just like the golden geocities
   days. it should look a little.... unpolished?"

   So this section deliberately breaks the rules the rest of senshi.css keeps.
   Everything else on a profile is measured, aligned and quiet. This is a pile
   of stuff in a drawer, and it should look like somebody tipped it out.

   The vocabulary, all of it period-correct and all of it done with the site's
   own assets rather than imported nostalgia:
     - nothing is straight. Six rotations and six vertical nudges cycle on
       nth-child, so the scatter never visibly repeats but is fully
       deterministic - no JavaScript, no inline styles, same every load.
     - things OVERLAP. Negative margins pull items over their neighbours by
       different amounts, and z-index alternates so the overlap is uneven
       rather than a neat shingle.
     - white photo borders and a hard offset shadow, the way every 90s fan page
       framed a scan.
     - a ridge border on the box. `ridge` is the most 1997 line in CSS and it
       has no business anywhere else on this site.
     - a real divider gif from images/dividers under the heading.
     - the pull tab is a beveled `outset` button in ALL CAPS.

   WHAT IT DOES NOT BREAK. Nothing is resized - the no-crushing rule still
   holds, every graphic sits at its natural size. Rotation is a transform, so
   it costs no pixels either. The drawer still opens and shuts, it still starts
   open, and it is still keyboard-reachable.

   CLIPPING: .junkdump carries overflow:hidden (section 9293) and the shelf
   clips its own overflow-y so the horizontal scroll behaves. Rotated items
   stick out past their boxes, so the shelf gets real vertical padding to give
   the tilt somewhere to go. Without it the corners get sliced off and it just
   looks broken rather than messy.
   ========================================================================== */

/* ---- the box ---- */
.senshi-art .junkdump{
  border:6px ridge var(--backbow);
  box-shadow:5px 5px 0 rgba(0,0,0,.25);
}
.senshi-art .junkdump-h{
  font-size:15px; letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:1px 1px 0 rgba(0,0,0,.35);
}
/* a real divider gif, because of course */
.senshi-art .junkdump-sub{
  padding-bottom:10px;
  background:url("images/dividers/div3.gif") left bottom repeat-x;
}

/* ---- the pull tab as a 1997 button ---- */
.senshi-art .junk-pull{
  border:3px outset var(--backbow);
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:12.5px;
  padding:4px 12px 5px;
}
.senshi-art .junk-pull:active{ border-style:inset; }

/* ---- the shelf: a drawer liner, not a gallery wall ---- */
.senshi-art .junk-shelf{
  border:4px ridge rgba(255,255,255,.65);
  border-radius:0;
  padding:26px 22px 30px;          /* room for the tilt to stick out into */
  background:
    url("images/backgrounds/bg21.png") repeat,
    rgba(255,253,246,.72);
}
.senshi-art .junk-shelf .junk-row{ align-items:center; gap:0; }

/* ---- the scatter ----
   Six-step cycles on rotation, vertical nudge, overlap and stacking order. Six
   because it is coprime with nothing here and so never lines up into a visible
   pattern; deterministic because CSS nth-child is, which means the pile looks
   thrown but renders identically every time. */
.senshi-art .junk-shelf .junk-row > li{
  position:relative;
  margin-left:-14px;
  transition:transform .12s ease, filter .12s ease;
}
.senshi-art .junk-shelf .junk-row > li:first-child{ margin-left:0; }

.senshi-art .junk-shelf .junk-row > li:nth-child(6n+1){ transform:rotate(-3.5deg) translateY(6px);  z-index:3; }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+2){ transform:rotate(2.5deg)  translateY(-9px); z-index:6; margin-left:-26px; }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+3){ transform:rotate(-1.5deg) translateY(11px); z-index:2; margin-left:-8px; }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+4){ transform:rotate(4deg)    translateY(-4px); z-index:5; margin-left:-30px; }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+5){ transform:rotate(-2.5deg) translateY(-12px);z-index:4; margin-left:-12px; }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+6){ transform:rotate(1.5deg)  translateY(8px);  z-index:7; margin-left:-22px; }

/* pick one up and it straightens out and comes to the front */
@media (hover: hover){
  .senshi-art .junk-shelf .junk-row > li:hover{
    transform:rotate(0deg) translateY(-6px) !important;
    z-index:20 !important;
    filter:drop-shadow(0 6px 6px rgba(10,20,35,.35));
  }
}

/* ---- the white photo border ---- */
.senshi-art .junk-shelf .junk-gif{
  border:5px solid #fffdf6;
  box-shadow:3px 3px 0 rgba(10,20,35,.38);
  filter:none;                      /* the li carries the lift shadow instead */
  background:#fffdf6;
}

/* ---- shut, but not quite ----
   Ashley asked for a sliver poking out of a closed drawer. The shelf keeps its
   contents and is simply clipped; overflow-x goes to hidden while shut so a
   stray scrollbar cannot appear on a 46px sliver. */
.senshi-art .junk-in:not(:checked) ~ .junk-shelf{
  display:block;
  max-height:46px;
  overflow:hidden;
  padding-top:14px; padding-bottom:0;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent);
  mask-image:linear-gradient(to bottom, #000 55%, transparent);
}

/* ---- 182b. the furniture ----
   The site's own old-web assets, picked by looking at them rather than by
   filename. desk.gif is a pixel computer desk and makes a perfect page mascot;
   dv11 is a moon/sun/star band that repeats cleanly at any width; div4 is a row
   of tiny squares, quiet enough not to fight dv11; the stamps are the classic
   badge strip along the foot of a personal page.

   THE COUNTER COUNTS. A hit counter is the most GeoCities object there is, but
   an invented number would be a fake record, so this one shows the real number
   of graphics in that drawer, rendered as odometer digits. */
.senshi-art .junk-head{ display:flex; align-items:flex-start; gap:12px; }
.senshi-art .junk-head-t{ flex:1 1 auto; min-width:0; }
.senshi-art .junk-mascot{
  flex:0 0 auto; image-rendering:pixelated;
  transform:rotate(-4deg);
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25));
}

/* the odometer */
.senshi-art .junk-count{
  margin:4px 0 6px;
  display:flex; align-items:center; gap:7px;
  font-family:rainyhearts, monospace; font-size:13px;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--onskirt); opacity:.85;
}
.senshi-art .junk-count .jc-n{ display:inline-flex; gap:2px; }
.senshi-art .junk-count .jc-n b{
  display:inline-block; min-width:18px; padding:3px 0 4px;
  text-align:center; font-weight:400; font-size:18px;
  color:#8cff8c; background:#0b0b12;
  border:2px inset #6a6a7a;
  text-shadow:0 0 4px rgba(140,255,140,.7);
}

/* the divider band under the sub-line, replacing the thin one from 182 */
.senshi-art .junkdump-sub{
  padding-bottom:16px;
  background:url("images/dividers/dv11.png") left bottom repeat-x;
  background-size:auto 22px;
}

/* tape holding each thing down */
.senshi-art .junk-shelf .junk-row > li::before{
  content:"";
  position:absolute; z-index:2;
  left:50%; top:-9px; width:46px; height:17px;
  transform:translateX(-50%) rotate(-6deg);
  /* white tape on a white photo border is no tape at all - the first pass was
     invisible. Real sticky tape is warm, faintly yellow and slightly cloudy. */
  background:linear-gradient(105deg, rgba(255,231,150,.62), rgba(255,246,206,.5));
  border-left:1px solid rgba(214,180,90,.55);
  border-right:1px solid rgba(214,180,90,.55);
  box-shadow:0 1px 3px rgba(10,20,35,.22);
  pointer-events:none;
}
.senshi-art .junk-shelf .junk-row > li:nth-child(2n)::before{
  transform:translateX(-50%) rotate(7deg); width:38px;
}
.senshi-art .junk-shelf .junk-row > li:nth-child(3n)::before{
  left:22%; transform:rotate(-14deg); width:52px;
}

/* the badge strip, on a little rule of its own */
.senshi-art .junk-stamps{
  margin:14px 0 0; padding-top:12px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:url("images/dividers/div4tile.gif") left top repeat-x;
}
.senshi-art .junk-stamps img{
  image-rendering:pixelated;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:2px 2px 0 rgba(0,0,0,.25);
}
.senshi-art .junk-stamps img:nth-child(1){ transform:rotate(-2deg); }
.senshi-art .junk-stamps img:nth-child(3){ transform:rotate(2.5deg); }

/* ---- 182c. the buttons scroll, and the dividers stop colliding ----
   Ashley, 15 Sep: "for the stamps on the bottom, use the same button scroll
   that is on the homepage" and "make sure the dividers are not overlapping".

   THE BUTTONS. index.html's rotator script already ships on every profile page
   and already bails on its first line when #random-button-marquee is absent.
   So the drawer only had to provide the markup and the idle script woke up.
   Markup copied from index.html verbatim, <marquee> and all, so there is one
   implementation to keep in step rather than two.

   THE DIVIDERS. The first pass hung both bands off `background` on an element
   that also holds text - dv11 under .junkdump-sub, div4 over the badge strip.
   A background paints inside the padding box, so the band and the line box are
   sharing space and the only thing keeping them apart is a padding value: get
   the text length, the font or the wrap wrong and the moon-and-stars runs
   straight through the words. It was already touching.

   Both are now their own block via ::after / ::before, with a stated height and
   real margins. A block cannot overlap its sibling text: the box model
   guarantees the separation instead of a padding number hoping for it. */
.senshi-art .junkdump-sub{
  padding-bottom:0;
  background:none;                /* the band is a block of its own now */
}
.senshi-art .junkdump-sub::after{
  content:"";
  display:block; height:22px;
  margin:12px 0 4px;
  background:url("images/dividers/dv11.png") left center repeat-x;
  background-size:auto 22px;
}

.senshi-art .junk-stamps-wrap{
  margin:16px 0 0;
  padding:0;
  max-width:100%;
  overflow:hidden;
}
.senshi-art .junk-stamps-wrap::before{
  content:"";
  display:block; height:4px;
  margin:0 0 12px;
  background:url("images/dividers/div4tile.gif") left center repeat-x;
}
.senshi-art .junk-stamps-wrap marquee{ display:block; }
.senshi-art .junk-stamps-wrap img{
  image-rendering:pixelated;
  vertical-align:middle;
  border:1px solid rgba(255,255,255,.5);
}

/* ==========================================================================
   182d. STICKERS ARE NOT PHOTOGRAPHS, AND ONE SCROLLBAR IS ENOUGH
   ==========================================================================
   Ashley, 15 Sep: "anything that is obviously a small .gif, don't make them
   look like taped photos... treat them like stickers. place them onto the graph
   paper. consider the size and shape of everything when placing the images...
   it should be very intentionally designed... to look like it wasn't", plus
   "why 2 horizontal scroll bars?" and "if you resize some of the rectangle
   ones, you might be able to stack two on top of each other".

   THE TWO SCROLLBARS. .junk-row had picked up overflow-x:auto, so the row was a
   scroll container sitting inside the shelf, which is also one - and the row
   overflowed itself by five pixels, enough to draw a second bar. Two bars, one
   of which moved almost nothing. The shelf is the scroller; the row is not.

   STICKER OR PHOTO is decided per file by whether the image actually has
   transparent pixels (see astro-notes/junk_class.py), not by size or by
   extension. A cut-out sprite has no rectangle to frame, so a white border
   round it is just a white box round a cat. An opaque screencap or scan IS a
   rectangle, and a photo border and a piece of tape are exactly what that
   wants. 23 stickers, 72 photos.

   THE PACKING. The row now flows in COLUMNS at the height of the shelf's own
   tallest item (--shelf-h, written into the markup per page). Short things
   stack two and three deep into the air beside a tall thing instead of leaving
   it empty. That is the "consider the size and shape of everything" part done
   by the box model rather than by hand-placing ninety-five images - and it is
   what makes the pile look arranged without anybody arranging it.
   ========================================================================== */

/* one scroller, not two */
.senshi-art .junk-shelf .junk-row{ overflow:visible; }

/* ---- columns, at the height of the tallest thing on this shelf ---- */
.senshi-art .junk-shelf .junk-row{
  display:flex;
  flex-flow:column wrap;
  align-content:flex-start;
  align-items:flex-start;
  height:var(--shelf-h, 432px);
  gap:0;
}
/* NO VERTICAL PADDING ON THE ITEM. The li's padding is part of its layout box,
   so 9px top and bottom made a 227px photo occupy 245px and two of them could
   not share a 470px column - which is exactly why the first run produced
   eighteen columns of one item each. Spacing between stacked items is the
   row-gap instead, which is a number the packing maths can actually see.
   Rotation is a transform and does not need padding to have room. */
.senshi-art .junk-shelf .junk-row{ gap:16px 0; }
.senshi-art .junk-shelf .junk-row > li{
  margin:0 0 0 -10px;
  padding:0 12px;
}
.senshi-art .junk-shelf .junk-row > li:first-child{ margin-left:0; }

/* ---- PHOTOS: framed, taped, tilted ---- */
.senshi-art .junk-gif--photo{
  border:5px solid #fffdf6;
  box-shadow:3px 3px 0 rgba(10,20,35,.38);
  background:#fffdf6;
}

/* ---- STICKERS: stuck straight onto the graph paper ----
   No frame, no tape, no white. Just the shape, a soft shadow so it sits ON the
   paper rather than in it, and a livelier tilt - a sticker gets slapped down,
   a photograph gets placed. */
.senshi-art .junk-gif--sticker{
  border:0; background:none; box-shadow:none;
  filter:drop-shadow(2px 3px 2px rgba(10,20,35,.34));
}
/* tape belongs to photographs only */
.senshi-art .junk-shelf .junk-row > li:has(.junk-gif--sticker)::before{ content:none; }

/* stickers tilt harder and tuck in tighter */
.senshi-art .junk-shelf .junk-row > li:has(.junk-gif--sticker){ padding:6px 4px; }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+1):has(.junk-gif--sticker){ transform:rotate(-9deg)  translate(6px, 4px); }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+2):has(.junk-gif--sticker){ transform:rotate(7deg)   translate(-4px, -6px); }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+3):has(.junk-gif--sticker){ transform:rotate(-5deg)  translate(10px, 8px); }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+4):has(.junk-gif--sticker){ transform:rotate(11deg)  translate(-8px, 2px); }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+5):has(.junk-gif--sticker){ transform:rotate(-12deg) translate(4px, -5px); }
.senshi-art .junk-shelf .junk-row > li:nth-child(6n+6):has(.junk-gif--sticker){ transform:rotate(6deg)   translate(-6px, 7px); }

/* nothing may sit on top of a graphic: right-click and Save Image has to reach
   it. The tape is already pointer-events:none; this is belt and braces, and a
   note to whoever adds an overlay here next. */
.senshi-art .junk-shelf .junk-row > li::before{ pointer-events:none; }
.senshi-art .junk-gif{ pointer-events:auto; }

/* ---- 182e. the counter wears the fuku ----
   Ashley, 15 Sep: "love the tiny counter for junk draw items. match each
   counter to the fuku gradient and keep the retro style numbers."

   The digits stay an odometer - inset bezel, monospace, a glow behind the
   figure - because that is the retro part and it is the whole joke. What
   changes is the colour, and it changes BY ITSELF on every page: the box is a
   gradient from that guardian's --skirt down into near-black, the bezel takes
   her --frontbow, and the digits glow in her --trim, which on this site is the
   tiara-and-trim colour. So Mars reads red-into-black with gold figures and
   Mercury blue-into-black with cyan, with no per-page work and nothing to keep
   in step - it is her own palette, already declared at the top of her page.

   The gradient stops at 72% rather than running the full height, so the bottom
   of each digit sits on true black and the figure stays legible. A fuku
   gradient that ran all the way would put a mid-tone behind the thin strokes
   at the bottom of an 8 and turn it into a smudge. */
/* MEASURED, NOT EYEBALLED. The first pass put raw --skirt at the top of the
   gradient with raw --trim on it, and five of the ten profiles came out under
   3:1 - Venus was gold-on-gold at 1.19 and Usagi cream-on-silver at 1.41.
   A counter you cannot read is not retro, it is broken.
   So the fuku colour is darkened into the box rather than used neat, and the
   trim is lifted toward white for the figures. Both keep their hue, so it is
   still unmistakably her palette; the worst page now clears 3:1. The
   plain-colour declarations above each color-mix are the fallback for anything
   that does not support it. */
.senshi-art .junk-count .jc-n b{
  color:#dfe6ff;
  color:color-mix(in srgb, var(--trim, #8cff8c) 68%, #ffffff);
  background:#0b0b12;
  background:linear-gradient(180deg,
              color-mix(in srgb, var(--skirt, #1b1b28) 38%, #06060c) 0%,
              #06060c 74%);
  border:2px inset var(--frontbow, #6a6a7a);
  text-shadow:0 0 5px currentColor, 0 1px 0 rgba(0,0,0,.9);
}
.senshi-art .junk-count .jc-l{ color:var(--onskirt); }

/* ---- 182f. why the columns would not stack ----
   Two layout costs the packing maths could not see, and between them every
   column came back holding exactly one item:

   1. AN INLINE IMAGE CARRIES A DESCENDER. .junk-gif is an <img>, which is
      inline by default, so the line box around it added ~14px that belongs to
      text metrics and not to the picture. A 225px photo occupied 239px.
   2. A BORDER IS LAYOUT. The white photo frame was a real 5px border on each
      side, so it added another 10px to the box.

   Together that turned a 225px half-height photo into a 249px item, and two of
   those plus a 16px gap do not fit in a 470px column. Hence eighteen columns of
   one.

   Now the image is a block (no line box) and the white frame is a box-shadow
   spread rather than a border (paints, costs no layout). The item's height is
   the picture's height, full stop, which is the only way the arithmetic in
   junk_scrapbook.py can be trusted. */
.senshi-art .junk-shelf .junk-gif{ display:block; }
.senshi-art .junk-gif--photo{
  border:0;
  box-shadow:0 0 0 5px #fffdf6, 4px 5px 0 rgba(10,20,35,.34);
}

/* ---- 182g. specificity, and a crush I had not noticed ----
   Section 182 styles `.senshi-art .junk-shelf .junk-gif` - three classes. The
   sticker/photo rules in 182d were written as `.senshi-art .junk-gif--photo`,
   two classes, so they lost, and the 5px border stayed on EVERYTHING.

   That is not only why nothing stacked. The site sets box-sizing:border-box, so
   a real border eats into the box the width/height attributes describe: a 225px
   photo was being painted at 215, and 10px narrower too. Every framed picture
   in these drawers has been rendering very slightly squashed, which is the one
   thing this whole section is supposed not to do. Caught by printing
   img.height against img.naturalHeight rather than by looking at it.

   Both fixed by matching specificity and by making the frame a box-shadow
   spread: a shadow paints and costs no layout, so the image renders at its true
   size and the item's height is exactly the picture's height. */
.senshi-art .junk-shelf .junk-gif--photo{
  border:0;
  background:#fffdf6;
  box-shadow:0 0 0 5px #fffdf6, 4px 5px 0 rgba(10,20,35,.34);
}
.senshi-art .junk-shelf .junk-gif--sticker{
  border:0; background:none; box-shadow:none;
  filter:drop-shadow(2px 3px 2px rgba(10,20,35,.34));
}

/* ==========================================================================
   183. THE JOYS WHEEL - MOVED OUT                       (15 Sep 2026)
   ==========================================================================
   The wheel's rules used to live here. They now live in dgtable.css, beside
   the dignity table and the sect strip, because planetary-joys.html carries
   the wheel too and codex article pages load index.css and nothing else.

   Do not add .senshi-art .jw-* rules back into this file. They would have
   higher specificity than the ones in dgtable.css and would silently win on
   the four profiles, so a change made in dgtable.css would appear to work on
   the codex page and do nothing on the profiles. Edit dgtable.css.
   ========================================================================== */

/* ==========================================================================
   184. THE FOUR DIGNITY WORDS, NOW LINKS                (15 Sep 2026)
   ==========================================================================
   The dignity plate used to explain domicile, exaltation, detriment and fall
   on the profile itself - 108 words per page of definition that was word for
   word the same on all four. dignity.html is ripe now and says all of it at
   length, so the plate keeps only what it says about THIS guardian and the
   four terms became links out.

   They are still .gloss, so they keep the pink dotted mark and the glossary
   hover fires exactly as before. The only thing that has to change is the
   cursor: .gloss sets cursor:help, which was right for a word you could only
   hover and is a small lie about a word you can now click. Hover also goes
   solid rather than only brightening, so a pointing device gets the usual
   "this is a link" answer.

   Specificity: .senshi-art .dg-term is (0,2,0), the same as .senshi-art
   .gloss, and it is LATER in the file, so it wins on order. That is on
   purpose and it is why this section sits at the end where new sections go -
   if it were moved above section 170 the cursor would silently revert.
   ========================================================================== */
.senshi-art .dg-term{ cursor:pointer; }
@media (hover: hover){
  .senshi-art .dg-term:hover{ border-bottom-style:solid; }
}
@media (max-width: 1249px){
  /* the glossary script bails below 1250px, so here the mark means only
     "there is a page about this word" - which is still true, and clickable. */
  .senshi-art .dg-term{ cursor:pointer; }
}

/* ==========================================================================
   185. A PICTURE SLOT THAT IS NOT A BROKEN IMAGE      (15 Sep 2026)
   ==========================================================================
   Ashley: "if a section looks thin, give it space for a picture of the
   character. I can find one."

   So a card with no art yet ships a SLOT rather than padding its paragraph out
   to fill the space or pointing at a file that does not exist. It takes the
   same 3:2 box .dg-pic takes, so the card is already the right height and
   dropping the real picture in later changes nothing about the layout.

   It is a div, not an img, on purpose: a broken img shows the browser's own
   error glyph and reads as a bug, and an img with no src is invalid. The
   role/aria-label pair means a screen reader says something honest about it
   instead of reading out the placeholder text as if it were a caption.
   ========================================================================== */
/* SPECIFICITY, and it bit on the first render. .senshi-art .dg-card .dg-pic is
   (0,3,0) and sets display, background and border; .senshi-art .dg-pic--slot is
   (0,2,0) and loses to it, so the slot came out as a plain white box with its
   two lines of text side by side instead of stacked. Matching the card in the
   selector is what makes the flex column, the dashed edge and the hatch land. */
.senshi-art .dglist--2 .dg-card .dg-pic--slot{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:6px;
  aspect-ratio:3 / 2; width:100%;
  box-sizing:border-box;
  padding:10px;
  border:2px dashed var(--backbow);
  border-radius:2px;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 9px,
      color-mix(in srgb, var(--backbow) 24%, transparent) 9px 18px);
  text-align:center;
}
.senshi-art .dg-card .dg-slot-t{
  font-family:rainyhearts, monospace;
  font-size:13px; line-height:1.5; letter-spacing:.4px;
  color:var(--head); opacity:.85;
}
.senshi-art .dg-card .dg-slot-s{
  font-family:rainyhearts, monospace;
  font-size:11px; letter-spacing:.3px;
  color:var(--ink); opacity:.55;
}

/* ==========================================================================
   186. HER SUN, IN THE DOSSIER                        (15 Sep 2026)
   ==========================================================================
   The "her key" / "the other domicile" cards came out of the profile: every
   domicile dignity card already names her sun sign and contrasts her planet's
   two houses, so the pair was saying it twice a screen apart. The one fact
   that was NOT on the domicile card is the bare sun sign - and that is a fact
   about the person rather than about the chart, so it went up to the dossier
   as one more stat beside school and partner.

   It is the first LINK ever to appear in a stat value, and it arrived styled
   in browser-default blue with an underline, against a row of plain ink
   values. These two rules put it back in the site's own idiom: same colour as
   the text around it, dotted rule underneath, accent on hover - the same
   treatment .gloss and .dgt-lnk already use.
   ========================================================================== */
.senshi-art .stat dd a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}
.senshi-art .stat dd a:hover,
.senshi-art .stat dd a:focus-visible{
  color:var(--accent);
  border-bottom-style:solid;
}
.senshi-art .stat-gly{
  vertical-align:-2px; margin-right:5px;
  image-rendering:pixelated;
}

/* ==========================================================================
   187. THE GALLERY DOTS CLEAR THE FRAME               (15 Sep 2026)
   ==========================================================================
   Ashley: "the circles for the gallery under profile through the astrology
   lens are being blocked by the frame."

   Measured, and she is exactly right. The painting carries
   box-shadow: 4px 4px 0 #1b2a6b - a hard offset shadow, no blur - so it paints
   a solid navy bar four pixels BELOW the image's own box. The dots inherited
   margin:0 from somewhere further up the sheet rather than the 9px the kit
   boxes get, so their top edge sat at exactly the image's bottom edge: 1678px
   to 1678px. The shadow was landing on the top four pixels of both circles.

   14px of clearance, which is the 4px of shadow plus a normal gap - and they
   are centred under the picture rather than hugging its left corner, because
   as a gallery control that is where a reader looks for them. Inside .bio-gal
   only: the kit boxes' dots sit under small sprites with no offset shadow and
   are fine where they are.
   ========================================================================== */
.senshi-art .bio-gal .kb-dots{
  margin:14px 0 0;
  justify-content:center;
}

/* ==========================================================================
   188. HER PLANET AND THEIRS                          (15 Sep 2026)
   ==========================================================================
   The one piece of astrology that gets MORE guardian-specific the more of it
   you add, because it only exists when there are five of them: which other
   girl's houses her planet is standing in. Venus and Mars are in each other's
   detriment; Mercury and Jupiter likewise; Venus and Mercury are a see-saw, as
   are Mars and Jupiter; and the Moon - who on this site is Usagi - is exalted
   in a house of Venus's while Mars falls in hers.

   Every pairing is derived from the dignity data at build time in
   astro-notes/planet_pairs.py, including the one that is an ABSENCE: Mars and
   Mercury have no relationship in the scheme at all, and the build asserts
   that before letting the page say so.

   A .dg-row is a 96px label against the rest, which fits "domicile" and
   "exaltation" and does not fit "Makoto &middot; Jupiter". 132px here, and it
   collapses to stacked rows on a phone like the other lists do.
   ========================================================================== */
.senshi-art .dglist--pairs .dg-row{
  grid-template-columns:132px minmax(0, 1fr);
}
.senshi-art .dglist--pairs dt{
  font-family:rainyhearts, monospace;
  color:var(--head);
}
.senshi-art .dgset-clock{
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px dotted var(--backbow);
  font-family:rainyhearts, monospace;
  font-size:14px; line-height:1.62;
  color:var(--ink); opacity:.92;
}
.senshi-art .dgset-clock b{ color:var(--head); }
@media (max-width: 700px){
  .senshi-art .dglist--pairs .dg-row{ grid-template-columns:minmax(0, 1fr); gap:2px; }
}


/* ==========================================================================
   189. THE THREAD CARD'S PICTURE CYCLES                (16 Sep 2026)
   ==========================================================================
   Ashley sent two pictures of the Silver Crystal for one mini article: the
   design sheet, and the panel where it first appears. The card has one
   picture slot, so the slot learns to hold both.

   The cycler itself is not new. moves.js has driven .kb since the kit boxes
   shipped and .bio-gal since the manga galleries; .thread-shot is the third
   name in that one selector, and the markup is the same - .kb-cycle, .kb-frame
   images keyed by data-i, .kb-dots buttons, everything present in the HTML so
   a reader with JS off gets the first frame rather than an empty box.

   WHAT IS NEW IS THE WIDTH PIN, and it is the whole reason this section
   exists. Rule 147 caps a portrait .art--tall at 380px high and lets width
   follow the picture, which is right for one picture and wrong for two: these
   two frames come out 341px and 242px wide at that height, so switching them
   would resize the floated box and reflow the article's text around it while
   somebody is reading. So the cycle box is pinned to the wider of the two and
   the narrower frame is centred inside it. Nothing is scaled to fit - a frame
   that is narrower than the box stays its own size and gets space either side.

   The number is not hand-typed. thread_cycle.py measures both files and writes
   it here, so re-running after a frame is swapped produces a box that matches
   the frames rather than a stale one.
   ========================================================================== */
.senshi-art .thread-shot .thread-cycle{
  width:341px; max-width:100%;
  display:flex; align-items:flex-start; justify-content:center;
}
.senshi-art .thread-shot .thread-cycle .kb-frame[hidden]{ display:none; }
.senshi-art .thread-shot .thread-dots{
  margin:10px 0 0;
  justify-content:center;
}
/* the shot stops sizing to the picture and sizes to the pinned box instead */
.senshi-art .thread-body > .thread-shot:has(.thread-cycle){
  width:341px; max-width:100%;
}
@media (max-width: 700px){
  /* down here every thread shot is unfloated and centred at min(300px, 82%),
     so the pin has to let go or it would fight that rule for the width. */
  .senshi-art .thread-shot .thread-cycle,
  .senshi-art .thread-body > .thread-shot:has(.thread-cycle){
    width:100%;
  }
}


/* ==========================================================================
   190. USAGI'S KIT AND MOVE CARDS MATCH THE BUILT PAGES   (16 Sep 2026)
   ==========================================================================
   Ashley: "there is still a lot of inconsistency in layout. please check back
   to the other profiles and match moon to them" - and, on the structure,
   "for usagi only merge 'her kit' and 'what she can do' by seasons. we might
   as well group it differently for her since she has so much more content."

   So the SHAPE stays hers: items and moves together inside five season
   consoles, where the girls keep them in two separate sections. What was wrong
   was the size and the stacking of the cards inside, measured against a page
   that is finished:

       move slot   Usagi  96 x  54      Venus (filled)  352 x 264
       move card   Usagi 374 x 165      Venus           374 x 286
       item slot   Usagi  56 x  56      her sprites run to 102 x 225

   Her columns were already the right width - 374px for moves, 243px for items,
   the same as the girls. Only the slots inside them were collapsed, so every
   card sat at half the height it will have once art lands, and the section
   read thin and unlike the rest of the wing.

   The girls have NO empty move slots to copy - their moves are all filled with
   video - so the numbers come from measuring a FILLED card and reserving that
   footprint.

   BOTH CARDS ALSO STACK, picture over caption, which is what Venus's kit and
   move cards do and what Usagi's did not: hers put a chip beside the text and
   left the rest of the card empty. Stacking is the thing that actually makes
   the two pages read as one site.

   SCOPED TO senshi--moon ON PURPOSE. Nineteen other pages carry these same
   placeholders and are not built yet. Widening the shared rule would restyle
   all of them at once, which is far more than was asked for; they can opt in
   the same way as they are built.
   ========================================================================== */

/* ---- the move card: slot on top at full width, caption under ---- */
.senshi--moon .senshi-art .ka-moves .km{ flex-wrap:wrap; }
.senshi--moon .senshi-art .ka-moves .km-shot{
  flex:1 1 100%; max-width:100%; width:100%;
}
.senshi--moon .senshi-art .km-shot .ph--kmshot{
  width:100%; aspect-ratio:4 / 3; display:grid; place-items:center;
}
.senshi--moon .senshi-art .km-shot .ph--kmshot .ph-mark{ font-size:28px; }

/* ---- the item card: the same stack, and a slot the sprites fit in ---- */
.senshi--moon .senshi-art .kit.kit--item{
  flex-direction:column; align-items:stretch;
}
.senshi--moon .senshi-art .kit--item .kit-shot{
  justify-content:center; width:100%;
}
.senshi--moon .senshi-art .kit-shot .ph--kitshot{
  width:100%; height:200px;
  display:grid; place-items:center;
}
/* the label is hidden at chip size by an earlier rule; at this size it is the
   only thing telling the reader what the slot is waiting for, so it comes back */
.senshi--moon .senshi-art .kit-shot .ph--kitshot .ph-label{
  display:block; font-size:10px; line-height:1.35; text-align:center;
  padding:0 6px; opacity:.75;
}
@media (max-width: 700px){
  .senshi--moon .senshi-art .kit-shot .ph--kitshot{ height:164px; }
}

/* ==========================================================================
   191. A SECOND LEDE PARAGRAPH GETS ITS GAP BACK      (16 Sep 2026)
   ==========================================================================
   Moving Usagi's dossier tail onto the built-page wrapper (section 190's
   sibling change, dossier-lower -> dossier-tail) welded her two lede
   paragraphs into one block. The cause is a rule written when one paragraph
   was the only case there was:

       .senshi-art .dossier-tail .dossier-lede p{ margin:0; }

   Venus, Mars, Jupiter and Mercury each have exactly ONE lede paragraph, so
   nothing ever sat next to another and the zeroed margin never showed. Usagi
   has two - the Moon's own delineation, then her name - and they ran together
   with a measured gap of 0px.

   This is the same bug the bio rows hit on 13 Sep, and it gets the same fix
   and the same number: only a paragraph FOLLOWING another paragraph pays, so
   the single-paragraph pages are untouched and keep margin:0 exactly as now.
   ========================================================================== */
.senshi-art .dossier-tail .dossier-lede p + p{ margin-top:12px; }


/* ==========================================================================
   192. THE SILVER EDGE COMES BACK                     (16 Sep 2026)
   ==========================================================================
   Usagi's silver surfaces - the dossier stat panel and the Silver Crystal mini
   article - are supposed to carry a real silver rim, "1px solid
   var(--silver-edge)". Both computed to "0px none", which is the signature of
   an UNDEFINED custom property: the declaration goes invalid at computed-value
   time and border-style falls back to none, taking the width to zero with it.
   The gradients and shadows on the same rules landed fine, so the panels still
   looked silver-ish and the missing rim read as "a bit flat" rather than as a
   bug.

   --silver-edge IS declared about fifteen lines above its first use, and that
   declaration never parses. The comment introducing the silver block closes
   early, and three lines of prose plus a second comment-close token follow it
   before the rule. The loose prose is therefore read as the start of a
   selector, runs on through the stray close token, and swallows the whole next
   rule - the one declaring the variable. Everything after it parses normally,
   which is why exactly one line was lost.

   Two corrections to how I found that, both worth writing down:

   I first said the CSSOM confirmed the rule was discarded. It did not confirm
   anything - cssRules is blocked for file:// stylesheets, so the check was
   reading an empty list for every sheet on the page and I read that as
   evidence. The real evidence is the computed value: empty on an element that
   matches the selector.

   And the first version of THIS section reproduced the bug it describes. It
   quoted the offending close-comment token inside its own comment, which ended
   the comment early and swallowed this very rule, so the silver edge stayed
   empty. That is why the token is spelled out in words here and appears
   nowhere in this block.

   Re-declared rather than repaired in place, because this file is only ever
   appended to. The malformed comment upstream still eats the line after it;
   that line is now redundant, so nothing else is at risk, but it wants tidying
   by hand some time.
   ========================================================================== */
body.senshi--moon .senshi-art{ --silver-edge:#9aa1b8; }

/* ==========================================================================
   193. A THREAD CYCLER CAN SIZE ITSELF                (16 Sep 2026)
   ==========================================================================
   Section 189 pinned .thread-cycle to a fixed 341px, because the Silver
   Crystal's two frames are different shapes and the box had to stop resizing
   when you clicked between them.

   The Miracle Romance and Princess Serenity pairs do not need that: Ashley
   asked for those to be cropped and resized to MATCH each other, so both
   frames in each card are the same size and the box cannot jump. Forcing them
   into a 341px box would only strand a 260px-wide picture inside it.

   So the pin becomes a variable with 189's number as its default. The Silver
   Crystal card says nothing and keeps 341px; a card whose frames already match
   sets --cyc-w:auto inline and sizes to its own picture.
   ========================================================================== */
.senshi-art .thread-shot .thread-cycle{ width:var(--cyc-w, 341px); }

/* ==========================================================================
   194. USAGI'S STATS SIT FLAT, LIKE THE GIRLS'          (16 Sep 2026)
   ==========================================================================
   Ashley, asked whether the silver panel behind her stat rows was deliberate
   or drift: "Drop the panel, match the girls."

   Venus, Mars and Mercury all get their stat box neutralised by the noplate
   rule - no background, no border, no shadow, no padding - so the stats sit
   straight on the dossier card. A moon-only rule overrode that with a
   brushed-metal gradient, a rim and 16/18 padding, which is why her stats read
   as a box inside a box and why her .stat columns came out 320px against the
   girls' 356.

   The panel goes; the SILVER CRYSTAL card keeps its treatment, which is the
   other half of that same moon-only block and is not what she was looking at.

   Note the rim only became visible this morning, when section 192 restored the
   undefined --silver-edge variable. So this panel had been shipping without
   its border for as long as it has existed, and the first time it looked the
   way it was written is the moment it got cut. Worth saying out loud in case
   the border was the thing that made it wrong.
   ========================================================================== */
body.senshi--moon .senshi-art .dossier-head .stats--merged{
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
}


/* ==========================================================================
   195. AN ITEM CARD CAN POINT AT THE SHOW                (16 Sep 2026)
   ==========================================================================
   Ashley is sending video links one at a time, and one of them was for the
   Disguise Pen - which is a kit ITEM, not a move. Item cards exist on Usagi's
   page and nowhere else (the four built girls have none), so there was no
   house style to copy. Asked; she chose "sprite in the slot, video under the
   note", and this is that link.

   WHY THAT IS THE RIGHT SHAPE and not a play panel in the slot. Those slots
   were sized for her pixel weapon sprites, and an item card is a picture OF AN
   OBJECT - that is the whole reason it reads differently from the move card
   sitting next to it. Dropping a video into the slot would make a row of three
   items say "object, object, video". A link under the note leaves the card an
   object, and it lets EVERY item carry a link whether or not a sprite has
   landed yet, which swapping the slot could not do.

   IT BORROWS THE GRAMMAR ALREADY ON THE PAGE rather than inventing one:
   rainyhearts, no underline, a dotted bottom rule that goes solid and takes
   the accent colour on hover. That is exactly what section 174 gave the
   "Watch on YouTube" link inside a video slot, and what .gloss uses for a
   codex term - on this site a dotted rule means "there is more behind this".
   A reader who has met either one already knows what this is.

   SIZE AND SPACE. .ka-items .kit-note is 12px (section 3566), so the link sits
   a step under it at 11px and gains 6px of air. .kit-cap is a flex column, so
   margin-top is the gap and nothing else has to move. It is set inline-flex
   with align-self:flex-start so the dotted rule is only as wide as the words -
   a block-level anchor would run a dotted line the whole width of the card.
   ========================================================================== */

.senshi-art .ka-items .kit-watch{
  align-self:flex-start;
  display:inline-flex; align-items:center;
  margin-top:6px;
  font-family:"rainyhearts", monospace;
  font-size:11px; letter-spacing:.3px; line-height:1.2;
  color:var(--head);
  text-decoration:none;
  border-bottom:1px dotted currentColor;
  padding-bottom:1px;
}
@media (hover: hover){
  .senshi-art .ka-items .kit-watch:hover,
  .senshi-art .ka-items .kit-watch:focus-visible{
    color:var(--accent);
    border-bottom-style:solid;
  }
}


/* ==========================================================================
   196. A KIT ITEM CAN CYCLE, AND MUST NOT JUMP WHEN IT DOES  (16 Sep 2026)
   ==========================================================================
   Ashley sent Usagi's compacts as PAIRS - the same object shut and open, one
   pair per season. Two sprites for one object is the case the girls' wand
   cards were built for, so these reuse .kb-cycle rather than inventing a
   second mechanism; the only code change was adding .kit--item to the
   selector the cycler uses to find its card (js/moves.js).

   THE PROBLEM THIS SOLVES. The two frames of a pair are not the same height,
   because the lid opens. Measured, at the 2x display size:

       season 2   closed  90x90    open  90x120
       season 3   closed  90x90    open  90x118
       season 4   closed 138x108   open 138x114
       season 5   closed 138x104   open 138x118

   Section 190 gives the empty PLACEHOLDER a height, but once a real sprite
   replaces it there is no height rule left, so the box would size to whichever
   frame is showing. Clicking a dot would resize the card and shove everything
   below it down the page - on a row of three items, one card growing 30px
   drags its neighbours' baselines out of line.

   So the box is pinned to 120px, the tallest frame on the page, and every
   frame centres inside it. Pinning to the tallest rather than to each pair's
   own tallest is deliberate: it also lines the four compacts up with each
   other across the five consoles, which they never would otherwise.

   IMAGE-RENDERING IS THE OTHER HALF. These are pixel art displayed at exactly
   2x, and a browser's default smoothing turns a crisp 45px sprite into a
   blurred 90px one. `pixelated` keeps the edges hard, which is the whole
   reason the files are stored at 1x and scaled by the width/height attributes
   instead of being resized on disk.
   ========================================================================== */

.senshi--moon .senshi-art .kit-shot.kb-cycle{
  height:120px;
  display:grid; place-items:center;
  cursor:pointer;
}
.senshi--moon .senshi-art .kit-shot.kb-cycle .kb-frame{
  max-height:120px; width:auto; height:auto;
}
.senshi-art .kit-sprite{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* the dots sit under the caption text, small and quiet - the same treatment
   .kb-dots already gets in the girls' kit, just tightened for a smaller card */
.senshi--moon .senshi-art .kit-dots{
  display:flex; gap:6px; justify-content:center;
  margin:6px 0 0;
}


/* ==========================================================================
   197. A KIT SPRITE IS FULL SIZE ON EVERY PAGE, NOT JUST USAGI'S (16 Sep 2026)
   ==========================================================================
   A BUG I SHIPPED, and the measurement that caught it:

       page            declared    rendered   .kit-shot width
       sailor-moon      144x144     144x144      221px
       chibi-moon       118x118       20x20       20px
       sailor-neptune    68x192       14x40       14px
       sailor-uranus     58x192       14x45       14px
       sailor-pluto      90x192       17x36       17px
       tuxedo-mask      180x180       19x19       19px

   Section 190 gives .kit--item .kit-shot a real width, and it is scoped to
   .senshi--moon deliberately - its own comment says so, because nineteen
   unbuilt pages carry the same empty placeholders and widening the shared rule
   would restyle all of them at once. That was right when only Usagi had art.

   It stopped being right the moment sprites went onto five other pages. There
   the shot still shrink-wraps the little placeholder chip, about 20px, and
   .senshi-art img{max-width:100%} then squeezes a 192px sprite down to 40.
   Nothing errors; the picture is simply tiny.

   THE FIX IS KEYED TO THE ART, NOT TO THE PAGE. :has(.kit-sprite) matches only
   a shot that actually contains a sprite, so a card with real art gets room
   and an empty placeholder anywhere in the wing is left exactly as it was.
   That keeps section 190's promise while letting every built page work.

   THE FALLBACK MATTERS because :has() is the newest thing in this stylesheet.
   Where it is unsupported the declaration block is dropped whole, so
   .kit-sprite also gets max-width:none on its own - the sprite then renders at
   its declared size regardless of the parent. Slightly loose in an old
   browser, but never a 20px thumbnail.
   ========================================================================== */

.senshi-art .kit-sprite{ max-width:none; }

.senshi-art .kit-shot:has(.kit-sprite){
  width:100%;
  display:grid; place-items:center;
}
.senshi-art .kit--item:has(.kit-sprite){
  flex-direction:column; align-items:stretch;
}


/* ==========================================================================
   198. THE COMPACT FRAMES RENDER AT THE SIZE THEY DECLARE   (16 Sep 2026)
   ==========================================================================
   Correcting section 196, which I got wrong in a way that only showed up when
   the sizes were measured against what the markup asks for:

       declared   rendered
        90x90      45x45
        90x120     45x60
       138x108     69x54
       138x104     69x52

   Exactly half, every time - which is the tell. Section 196 wrote

       .kit-shot.kb-cycle .kb-frame{ max-height:120px; width:auto; height:auto; }

   and `width:auto; height:auto` tells the browser to ignore the width and
   height attributes and use the file's own pixels instead. The files are
   stored at 1x on purpose and doubled by those attributes, so auto sizing
   undid the entire convention and rendered every compact at half size.

   The max-height was guarding against nothing. The tallest frame DECLARES
   120px, which is where the box is pinned, so no frame can exceed the box in
   the first place - the cap only ever had the chance to fire if the attributes
   were being ignored, which is the bug it was sitting next to.

   So the frames go back to honouring their own width and height, and the cap
   stays purely as a safety rail for a future pair taller than the box.
   ========================================================================== */

.senshi--moon .senshi-art .kit-shot.kb-cycle .kb-frame{
  width:auto; height:auto;                 /* reset, then re-state below */
  max-height:120px;
}
.senshi--moon .senshi-art .kit-shot.kb-cycle .kb-frame[width][height]{
  width:attr(width px, auto);
  height:attr(height px, auto);
}

/* attr() for lengths is not supported everywhere yet, so the sizes that
   actually matter are also stated outright, per pair. These are the four
   compacts' declared 2x dimensions - see moon_compacts.py. */
.senshi--moon .kit-shot.kb-cycle img[src$="moon-crystal-star-closed.png"]{ width:90px;  height:90px;  }
.senshi--moon .kit-shot.kb-cycle img[src$="moon-crystal-star-open.png"]{   width:90px;  height:120px; }
.senshi--moon .kit-shot.kb-cycle img[src$="moon-cosmic-heart-closed.png"]{ width:90px;  height:90px;  }
.senshi--moon .kit-shot.kb-cycle img[src$="moon-cosmic-heart-open.png"]{   width:90px;  height:118px; }
.senshi--moon .kit-shot.kb-cycle img[src$="moon-crisis-moon-closed.png"]{  width:138px; height:108px; }
.senshi--moon .kit-shot.kb-cycle img[src$="moon-crisis-moon-open.png"]{    width:138px; height:114px; }
.senshi--moon .kit-shot.kb-cycle img[src$="moon-eternal-moon-closed.png"]{ width:138px; height:104px; }
.senshi--moon .kit-shot.kb-cycle img[src$="moon-eternal-moon-open.png"]{   width:138px; height:118px; }


/* ==========================================================================
   200. THE KIT DOILIES WALK THE FUKU, TOP TO BOTTOM        (16 Sep 2026)
   ==========================================================================
   Ashley: "change the background color of the doily's to match the sailor fuku
   gradient.... and the doily images, can you have the gradient start at the
   top of the doily and move down vertically? and then continue the gradient
   coloring on the next doily background for the next season, moving through
   the gradient as the doilys move down."

   IT MAKES SENSE AND THE PAGE IS ALREADY HALFWAY THERE. Section 100 gave the
   five arc BARS her three fuku stops, mixed at the midpoints and darkened
   until they carry bar ink:

       1  #1f4fa8   the collar
       2  #7c3674   blue into red
       3  #cb1c3b   the front bow
       4  #ad472a   red into gold
       5  #826318   the tiara, deepened

   So the walk exists; it is just stepping rather than flowing, and only on the
   bars. This carries the same five stops into the lace under each console and
   lets each one run from its own stop to the NEXT console's - so season 1's
   doily ends on exactly the colour season 2's begins with, and scrolling the
   kit from top to bottom walks the whole fuku once. Season 5 finishes on
   #a8801f, the true tiara gold section 100 had to darken for text; nothing
   sits on this layer, so here it can be itself.

   WHERE IT ATTACHES. Section 103 moved the lace onto a composited ::before
   whose tile blends `luminosity` against background-color:var(--lace). A
   background-color cannot be a gradient, so the flat colour becomes a third
   background LAYER underneath the tile, and the blend list grows to match.
   Everything else about 103 is untouched: same tiles, same overhang, same
   200s/220s drifts, still transform-animated, still no repaint per frame.

   IT IS A WASH, NOT A BLOCK. Ashley, earlier: the doily "should maybe live one
   layer deeper... the current one is too visually loud." These are saturated
   fuku colours and the cards carry reading matter, so the gradient goes in at
   .18 over the existing white veil rather than at full strength - enough to
   tell season 1 from season 5 at a glance, not enough to fight the text. The
   veil stays, so the tile still reads as lace rather than as a coloured panel.
   ========================================================================== */

body.senshi--moon .senshi-art .kitarc--1{ --fuku-a:#1f4fa8; --fuku-b:#7c3674; }
body.senshi--moon .senshi-art .kitarc--2{ --fuku-a:#7c3674; --fuku-b:#cb1c3b; }
body.senshi--moon .senshi-art .kitarc--3{ --fuku-a:#cb1c3b; --fuku-b:#ad472a; }
body.senshi--moon .senshi-art .kitarc--4{ --fuku-a:#ad472a; --fuku-b:#826318; }
body.senshi--moon .senshi-art .kitarc--5{ --fuku-a:#826318; --fuku-b:#a8801f; }

body.senshi--moon .senshi-art .ka-items .kit::before{
  background-image:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png"),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--fuku-a) 18%, transparent),
      color-mix(in srgb, var(--fuku-b) 18%, transparent));
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:normal, luminosity, normal;
}
body.senshi--moon .senshi-art .ka-moves .km::before{
  background-image:
    linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
    url("images/sailormoon/select/lace/tile24.gif"),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--fuku-a) 18%, transparent),
      color-mix(in srgb, var(--fuku-b) 18%, transparent));
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, auto, cover;
  background-blend-mode:normal, luminosity, normal;
}

/* color-mix is recent; where it is missing the whole declaration is dropped
   and the card keeps section 103's flat --lace exactly as it is today. */


/* ==========================================================================
   201. ONE CARD PER OBJECT: ITEM, VIDEO, TEXT               (16 Sep 2026)
   ==========================================================================
   Ashley: "merge the item name box and information down into the move
   description text and merge the two.... item... video.... text ... if there
   is more than 1 video per item... make the videos selectable within the
   card", and "have the brooch images cycle between opened and closed... don't
   turn it into a gallery option. just make it happen."

       +--------------------------------------------------------------+
       |          |            | the Spiral Heart Moon Rod             |
       | [sprite] |  [video]   | Moon Spiral Heart Attack     attack   |
       |          |            | a wave of love that purifies...       |
       |          |            | * o                                   |
       +--------------------------------------------------------------+

   THREE COLUMNS, ONE ROW PER OBJECT. This is the shape that measured 623px
   against 832 on season 2 - the first prototype of the day. I built the
   stacked version instead and it came out at 11,441px for the whole kit
   against 6,353 before the merge, because the old move cards sat two across
   and one full-width row each cost more than merging saved.

   THE VIDEO SELECTOR IS NOT THE SPRITE CYCLER. Each .km-vid grows its own
   frame gallery inside itself once the stills land, with its own stage and its
   own dots, so the selector never reaches inside a slot - it shows and hides
   whole .km-vid elements. A hidden slot stays pending in moves.js's observer
   and mounts the moment it is shown.

   THE BROOCHES RUN ON A KEYFRAME, not on dots. Both frames now sit in the same
   grid cell and cross-fade on an 8s loop, 4s a side. They were renamed off
   .kb-cycle/.kb-frame first, because moves.js's cycler does
   `f.hidden = (j !== i)` and would have re-hidden the open frame on load, with
   no dots left to click it back.

   prefers-reduced-motion stops the flip and leaves the closed frame showing,
   which is the one the card would have had before any of this.
   ========================================================================== */

.senshi--moon .senshi-art .ka-items.ka-merged{
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
}
.senshi--moon .senshi-art .kit--merged{
  display:grid;
  grid-template-columns:160px auto minmax(0,1fr);
  align-items:start;
  gap:0 12px;
  max-width:none; width:100%;
}
.senshi--moon .senshi-art .kit--merged.kit--novid{
  grid-template-columns:160px minmax(0,1fr);
}

.senshi--moon .senshi-art .kit--merged > .kit-shot{
  grid-column:1;
  width:100%; min-width:0; max-width:160px;
  display:grid; place-items:center;
  position:relative; z-index:1;
  padding:4px 2px 0;
}
.senshi--moon .senshi-art .kmx-vids{
  grid-column:2;
  position:relative; z-index:1;
}
.senshi--moon .senshi-art .kit--merged > .kit-cap{
  grid-column:3;
  min-width:0;
  position:relative; z-index:1;
}
.senshi--moon .senshi-art .kit--novid > .kit-cap{ grid-column:2; }

.senshi--moon .senshi-art .kmx-vids .km-vid{ width:300px; height:225px; }

/* the object's name and note, then the selected move's own block */
.senshi--moon .senshi-art .kit--merged .vx-text{ display:block; margin-top:6px; }
.senshi--moon .senshi-art .kit--merged .vx-text[hidden]{ display:none; }

.senshi--moon .senshi-art .vx-dots{
  display:flex; gap:6px; margin:8px 0 0;
}
.senshi--moon .senshi-art .vx-dot{
  width:10px; height:10px; padding:0; border-radius:50%;
  border:1px solid var(--backbow,#e6c86a);
  background:#fffdf6; cursor:pointer;
}
.senshi--moon .senshi-art .vx-dot[aria-selected="true"]{
  background:var(--ka-bar,#7c3674); border-color:var(--ka-bar,#7c3674);
}

/* ---- the brooches flip by themselves ---- */
.senshi--moon .senshi-art .kit-shot.kit-flip{
  position:relative; height:120px;
  display:grid; place-items:center;
}
.senshi--moon .senshi-art .kit-shot.kit-flip .kit-flip-f{
  grid-area:1 / 1;
  animation:kit-flip 8s steps(1, end) infinite;
}
.senshi--moon .senshi-art .kit-shot.kit-flip .kit-flip-f:nth-of-type(2){
  animation-delay:4s;
}
@keyframes kit-flip{
  0%,  50%  { opacity:1; }
  50.01%, 100% { opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .senshi--moon .senshi-art .kit-shot.kit-flip .kit-flip-f{ animation:none; }
  .senshi--moon .senshi-art .kit-shot.kit-flip .kit-flip-f:nth-of-type(2){ opacity:0; }
}

@media (max-width: 760px){
  .senshi--moon .senshi-art .kit--merged,
  .senshi--moon .senshi-art .kit--merged.kit--novid{ grid-template-columns:1fr; }
  .senshi--moon .senshi-art .kit--merged > .kit-shot,
  .senshi--moon .senshi-art .kmx-vids,
  .senshi--moon .senshi-art .kit--merged > .kit-cap{ grid-column:1; }
  .senshi--moon .senshi-art .kmx-vids .km-vid{ width:100%; height:auto; aspect-ratio:4 / 3; }
}


/* ==========================================================================
   202. THE KIT STANDS ON ONE FLOOR, AT ONE SCALE            (16 Sep 2026)
   ==========================================================================
   Ashley: "not the size of the image... but the fictional scale of the item.
   brooches are much smaller than the wands... I want the items on the page to
   be consistent in size for the layout, but the actual item if large it
   shouldn't get shrunk", with a reference sheet of her own showing seven
   objects side by side at their true relative sizes.

   THE SIZES ARE FIXED IN THE MARKUP, NOT HERE. Her reference sheet turned out
   to be measurable proof that the sprite FILES are already one consistent
   scale sheet - every object on both her sheet and this site comes out within
   two percent, four times over - and the page was throwing that away by
   doubling the small sprites and leaving the tall ones at 1x, because a
   doubled Kaleidomoon Scope is 450px tall. So every kit sprite now declares
   the file's own pixels and nothing is resampled either way. See kit_scale.py
   for the measurements.

   WHAT THIS SECTION DOES IS GIVE THEM A FLOOR. A true scale ladder only reads
   as scale if the objects share a baseline - which is exactly how she drew her
   reference, everything standing on one line. Centred in their own boxes, a
   64px brooch and a 192px wand just look like two differently-cropped
   pictures.

       +--------------------------------------------------------+
       |        |            | the Spiral Heart Moon Rod         |
       |   |    |            | Moon Spiral Heart Attack   attack |
       |   |    |  [video]   | a wave of love that purifies...   |
       |  _|_   |            |                                   |
       |__(*)___|____________|___________________________________|   <- floor
       +--------------------------------------------------------+

   THE FLOOR IS THE VIDEO PANEL'S OWN BOTTOM EDGE, 225px, so it costs the card
   nothing: the row was already that tall. The air above a brooch is air the
   card had anyway. On the one object with no video the slot goes back to
   shrink-wrapping, because there is no 225px row to share and the height would
   be invented.

   THE FLIPPING BROOCHES SIT ON IT TOO. Section 201 pinned their box to 120px
   and centred both frames so the open frame could not shove the row; the floor
   does that job better, since a lid opening upward now grows upward from the
   baseline instead of pushing the whole sprite up half the difference.

   SCOPED TO USAGI, deliberately. The four inner girls carry three sprites each
   from one progression - pen, stick, rod - already drawn to each other's scale
   and already doubled uniformly, so their ladders read true as they are and
   halving them would only make their kits smaller.
   ========================================================================== */

.senshi--moon .senshi-art .kit--merged > .kit-shot{
  align-items:end;            /* the floor - overrides place-items:center */
  justify-items:center;
  min-height:225px;           /* the video panel's height, so it costs nothing */
  padding:4px 2px 0;
}
.senshi--moon .senshi-art .kit--novid > .kit-shot{
  align-items:center;
  min-height:0;               /* no video row to share, so invent no height */
}

.senshi--moon .senshi-art .kit-shot.kit-flip{
  height:auto;                /* was pinned to 120px by section 201 */
  min-height:225px;
  align-items:end; justify-items:center;
}
.senshi--moon .senshi-art .kit--novid .kit-shot.kit-flip{
  min-height:0; align-items:center;
}

/* WITH NO VIDEO THERE IS NO VIDEO COLUMN, which section 201 half did. It gave
   the one object that fires no move a two-column grid, but its empty
   .kmx-vids was still a grid item sitting in column 2, so it took row 1 to
   itself and pushed the caption down into row 2 - under an empty band 63px
   tall, the height of the sprite beside it. That was invisible while the
   sprite was a doubled 90px compact filling the row and obvious the moment it
   halved. The empty div goes, and the caption comes back up to row 1. */
.senshi--moon .senshi-art .kit--novid .kmx-vids{ display:none; }
.senshi--moon .senshi-art .kit--novid > .kit-cap{ grid-row:1; }

/* At 1:1 there is nothing left to interpolate, so `pixelated` from section 196
   is now belt and braces rather than the thing holding the art together. It
   stays: a browser that ignores the width/height attributes for any reason
   still has to scale, and it should scale hard. */

@media (max-width: 760px){
  /* stacked on a phone, the sprite has no video beside it to line up with */
  .senshi--moon .senshi-art .kit--merged > .kit-shot,
  .senshi--moon .senshi-art .kit-shot.kit-flip{
    min-height:0; align-items:center;
  }
}


/* ==========================================================================
   203. THE OBJECT GOES INSIDE THE CREAM PANEL              (16 Sep 2026)
   ==========================================================================
   Ashley: "stick the image inside the text box instead."

   WHAT THIS REPLACES. Section 201 gave the card three columns and the first
   was bare doily - a 160px lane holding a 45px compact with the rest of it
   empty. Section 202 fixed the scale inside that lane but could not fix the
   lane itself; the emptier the sprite, the more obvious the hole. Putting the
   object in the panel with its own words deletes the lane.

       before                          after
       +-----+--------+---------+      +---------+-------------------+
       |     |        | the ... |      |         | [] the Crystal... |
       | []  |[video] | Her ... |      | [video] | [] Her power ...  |
       +-----+--------+---------+      +---------+-------------------+

   THE MARKUP MOVED FIRST. .kit-shot and .kit-cap were siblings, and no
   stylesheet can put one inside the other's box - the cream panel is
   .kit-cap's own background, and only its descendants sit on it. So the shot
   is now the caption's first child (moon_incap.py), which also retires section
   202's floor rules on their own: `.kit--merged > .kit-shot` stops matching
   the moment the shot is no longer a direct child. The flip box still has to
   be released by hand, because that selector never mentioned the card.

   FLOATING IT WAS THE OTHER READING, and it was built and measured rather
   than dismissed. With the prose wrapping around the object the kit came out
   at 4,871px against 3,783 here, because a float taller than its paragraph
   pushes everything after it down the panel - and on a 192px wand with three
   lines of text beside it, that is most of the card. Its own lane wins on
   height and on not stranding a wand in the middle of a sentence.

   THE LANE IS `auto`, NOT A FIXED WIDTH. A fixed lane was measured too and
   was much worse - 5,625px - because the panel then has a rigid minimum and
   the cream box is squeezed into whatever the video leaves, wrapping the text
   to four words a line. auto means the lane is exactly as wide as the object
   standing in it, which is the whole point of section 202: a brooch takes a
   brooch's width.

   1 / 99, NOT 1 / -1. The shot spans down the left of every other child. With
   no explicit rows declared, -1 resolves back to the first line and the span
   collapses to a single row - which is the bug that computed the old sprite
   column at 0px earlier today. 99 is past any caption's row count and the
   extra implicit rows are zero-height.
   ========================================================================== */

.senshi--moon .senshi-art .kit--merged{
  grid-template-columns:300px minmax(0,1fr);
}
.senshi--moon .senshi-art .kmx-vids{ grid-column:1; }
.senshi--moon .senshi-art .kit--merged > .kit-cap{ grid-column:2; }
.senshi--moon .senshi-art .kit--merged.kit--novid{
  grid-template-columns:minmax(0,1fr);
}
.senshi--moon .senshi-art .kit--novid > .kit-cap{ grid-column:1; grid-row:1; }

/* released from section 202 - there is no 225px lane to stand in any more */
.senshi--moon .senshi-art .kit-cap .kit-shot,
.senshi--moon .senshi-art .kit-cap .kit-shot.kit-flip{
  min-height:0; height:auto; padding:0; max-width:none;
}

.senshi--moon .senshi-art .kit--merged > .kit-cap{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:0 12px; align-items:start;
}
.senshi--moon .senshi-art .kit--merged > .kit-cap > *{ grid-column:2; }
.senshi--moon .senshi-art .kit--merged > .kit-cap > .kit-shot{
  grid-column:1; grid-row:1 / 99; align-self:end;
  width:auto; display:grid; place-items:end center;
}

@media (max-width: 760px){
  /* THE CARD HAS TO BE RE-STACKED HERE TOO, not left to section 201's phone
     block. A media query adds no specificity, so this section's plain
     `.kit--merged > .kit-cap{grid-column:2}` beats 201's phone rule simply by
     coming later in the file - which put the caption in column 2 of a
     one-column grid, off the side of the card. The whole panel vanished on a
     390px screen and left a doily the height of the video. */
  .senshi--moon .senshi-art .kit--merged,
  .senshi--moon .senshi-art .kit--merged.kit--novid{
    grid-template-columns:minmax(0,1fr);
  }
  .senshi--moon .senshi-art .kmx-vids,
  .senshi--moon .senshi-art .kit--merged > .kit-cap{ grid-column:1; }

  /* stacked on a phone the panel is the whole width, so the object sits above
     its words rather than taking a lane out of a 320px column */
  .senshi--moon .senshi-art .kit--merged > .kit-cap{
    grid-template-columns:minmax(0,1fr);
  }
  .senshi--moon .senshi-art .kit--merged > .kit-cap > *,
  .senshi--moon .senshi-art .kit--merged > .kit-cap > .kit-shot{
    grid-column:1;
  }
  .senshi--moon .senshi-art .kit--merged > .kit-cap > .kit-shot{
    grid-row:auto; justify-items:center; margin-bottom:6px;
  }
}


/* ==========================================================================
   204. A BROOCH WRAPS, A WAND STANDS BESIDE            (16 Sep 2026)
   ==========================================================================
   Ashley: "if the image is a brooch, place it to the left of the text and wrap
   around.... if it's a wand, place it to the right of the text... no wrap."

       .kit--wrap                        .kit--lane
       +-------------------------+       +------------------------+
       | [] the Crystal Star     |       | the Spiral Heart   |    |
       | [] Her power outgrows   |       | Moon Spiral Heart  | |  |
       | the first brooch. The   |       | a wave of love     |_|_ |
       | Crystal Star and ...    |       | that purifies.    (*)  |
       +-------------------------+       +------------------------+

   WHICH CARD IS WHICH IS DECIDED IN THE MARKUP, by moon_shape.py, because CSS
   cannot ask how tall a picture is before it loads. The test there is the
   sprite's own declared height against 100px - which is a real measurement now
   that section 202 put every sprite at its file's native pixels and showed
   those files are one consistent scale sheet. Seven objects fall at 35-81px
   and six at 117-225px, so nothing sits near the line.

   THE FLOAT NEEDS A BLOCK FORMATTING CONTEXT OR IT ESCAPES. Section 203 made
   the caption a grid; a wrapped card turns it into `flow-root` instead, which
   both restores normal flow for the text and contains the float, so an object
   taller than its prose stops at the bottom of the cream panel rather than
   hanging out of it. `clear:both` on the dots keeps the video selector on its
   own line under everything.

   THE FLOATED SHOT STAYS A GRID. Four of the seven wrapped objects are the
   flipping compacts, whose two frames sit in the same grid cell and cross-fade
   (section 201). Floating does not require display:block - a floated grid
   container shrink-wraps to its contents just as well - so the flip survives
   untouched, where switching it to block would have stacked the closed and
   open frames one above the other.

   THE LANE JUST SWAPS SIDES. Section 203 already built it on the left; here
   the columns reverse and every other child moves to column 1. The span is
   still 1/99 for the reason 203 gives.
   ========================================================================== */

/* ---- brooches: float left, prose wraps ---- */
.senshi--moon .senshi-art .kit--wrap > .kit-cap{
  display:flow-root;                    /* was grid - and contains the float */
  grid-template-columns:none;
}
.senshi--moon .senshi-art .kit--wrap > .kit-cap > *{ grid-column:auto; }

/* THE NAME AND THE NOTE ARE SPANS, and they only ever looked like lines
   because their parent was a flex column and then a grid, both of which
   blockify their children. flow-root does not, so the first render of this
   section had "the Crystal Star broochHer power outgrows the first brooch"
   running together in one paragraph. They are stated outright now rather than
   left to a side effect of the parent's display. */
.senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-name,
.senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-note{ display:block; }
.senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-shot{
  float:left; clear:left;
  width:auto; max-width:none; min-height:0; height:auto;
  margin:3px 12px 2px 0; padding:0;
  display:grid; place-items:center;     /* the flip frames share one cell */
  grid-row:auto; grid-column:auto;
}
.senshi--moon .senshi-art .kit--wrap .vx-dots{ clear:both; }

/* ---- wands: their own lane, on the right, text unwrapped ---- */
.senshi--moon .senshi-art .kit--lane > .kit-cap{
  grid-template-columns:minmax(0,1fr) auto;
}
.senshi--moon .senshi-art .kit--lane > .kit-cap > *{ grid-column:1; }
.senshi--moon .senshi-art .kit--lane > .kit-cap > .kit-shot{
  grid-column:2; grid-row:1 / 99; align-self:end;
}

@media (max-width: 760px){
  /* A wand in a 320px panel would leave four words a line, so section 203's
     phone rule stands for those: object above its words, centred. A brooch is
     64px and keeps floating, which reads better than a centred chip. */
  .senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-shot{
    float:left; justify-items:center; margin:3px 12px 2px 0;
  }
}


/* ==========================================================================
   205. HER KIT, ONE SEASON AT A TIME                       (17 Sep 2026)
   ==========================================================================
   Ashley: "what about like what we did on the landing page... where it's all
   kinda one menu for picking which season at the top. she is the one this
   system would most apply to right?" - and yes: she is the only girl with five
   arcs of kit. The rest carry one progression each and read fine stacked.

   WHAT THIS IS FOR, in her words: "i feel like someone's gonna click away
   before the astrology due to a big repeating chunk of videos." Five stacked
   accordions, all open since this morning, put the top of the astrology
   6,500px down. Shutting them all got that to 3,143 but left five collapsed
   bars and nothing to look at. One season on screen shows real content AND
   keeps the astrology near the top.

   THE IDIOM IS LIFTED FROM HER OWN HUB PAGE - section#arcs: a radio per panel,
   panels as later siblings, `:checked ~` showing one. No script, works with JS
   off, and radios in a named group give arrow-key navigation for free.

   ONE DIFFERENCE FROM THE HUB, and it is deliberate: the hub carries an inline
   <style> block because its ids are generated per arc. These five ids are
   fixed, so the rules belong here with the rest of this page's CSS. The hub's
   own block is not to be regenerated and is not touched by any of this.

   THE TABS ARE THE SEASON LOGOS, cross-fading to the English wordmark on
   hover, which is the treatment she pointed at on the hub. The mechanism is
   copied from .arc-season-logo above rather than rewritten - same absolute
   pair, same .28s, same reduced-motion escape. The written-out name stays
   under the logo: she asked for both, and a logo on its own is not a label for
   anyone reading with their ears or not hovering anything.

   THE GRID IS TWO ACROSS, which only became possible here. The console body is
   capped at 766px and does not grow on a wider monitor - measured at 1280,
   1440 and 1920, all 766 - so two horizontal cards were never going to fit.
   One season on screen means the card can turn portrait instead: video on top
   at the card's full width, object and words underneath. The video comes out
   BIGGER than it was, about 356x267 against 300x225.

   THE WRAP AND LANE RULES FROM SECTION 204 STILL HOLD inside the portrait
   card. A brooch still floats into its prose and a wand still stands in a lane
   beside it; the lane just has less room, which is why the card keeps its
   full width for the video and gives the lane only what the object needs.
   ========================================================================== */

/* ---- the machinery ---- */
.senshi--moon .senshi-art .ks-console{ position:relative; }
.senshi--moon .senshi-art .ks-in{
  position:absolute; width:1px; height:1px; opacity:0;
  margin:0; pointer-events:none;              /* hidden, still focusable */
}
.senshi--moon .senshi-art .ks-panel{ display:none; }

.senshi-art #kits-1:checked ~ .ks-stage .ks-panel--1,
.senshi-art #kits-2:checked ~ .ks-stage .ks-panel--2,
.senshi-art #kits-3:checked ~ .ks-stage .ks-panel--3,
.senshi-art #kits-4:checked ~ .ks-stage .ks-panel--4,
.senshi-art #kits-5:checked ~ .ks-stage .ks-panel--5{ display:block; }

/* the chosen tab, in the same vocabulary the hub's arc tabs use */
.senshi-art #kits-1:checked ~ .ks-index .ks-tab[for="kits-1"],
.senshi-art #kits-2:checked ~ .ks-index .ks-tab[for="kits-2"],
.senshi-art #kits-3:checked ~ .ks-index .ks-tab[for="kits-3"],
.senshi-art #kits-4:checked ~ .ks-index .ks-tab[for="kits-4"],
.senshi-art #kits-5:checked ~ .ks-index .ks-tab[for="kits-5"]{
  background:var(--wash,#f6f2fc);
  border-color:var(--head,#7c3674);
  box-shadow:inset 0 -3px 0 var(--head,#7c3674);
}

/* keyboard focus has to be visible on the LABEL, because the radio it belongs
   to is a 1px box nobody can see */
.senshi-art #kits-1:focus-visible ~ .ks-index .ks-tab[for="kits-1"],
.senshi-art #kits-2:focus-visible ~ .ks-index .ks-tab[for="kits-2"],
.senshi-art #kits-3:focus-visible ~ .ks-index .ks-tab[for="kits-3"],
.senshi-art #kits-4:focus-visible ~ .ks-index .ks-tab[for="kits-4"],
.senshi-art #kits-5:focus-visible ~ .ks-index .ks-tab[for="kits-5"]{
  outline:2px solid var(--head,#7c3674); outline-offset:2px;
}

/* ---- the tab row ---- */
.senshi--moon .senshi-art .ks-index{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:8px; margin:0 0 16px;
}
/* ONE COLUMN, STATED. A grid with no grid-template-columns inherits whatever
   an earlier rule left, and the first build of this - which reused .arc-row -
   inherited a four-column TABLE row and shoved the logo into its 34px first
   track. The tabs have their own class now, but the track is written down
   rather than left to the default, because that is what went wrong. */
.senshi--moon .senshi-art .ks-index .ks-tab{
  display:grid; grid-template-columns:minmax(0,1fr);
  justify-items:stretch; align-content:start; gap:2px;
  padding:9px 8px 8px; cursor:pointer;
  border:1.5px solid var(--backbow,#e6c86a); border-radius:10px;
  background:var(--paper,#fffdf6);
  transition:background .08s, border-color .08s, box-shadow .08s;
}
.senshi--moon .senshi-art .ks-index .ks-tab:hover{ background:var(--wash,#f6f2fc); }

.senshi--moon .senshi-art .ks-logo{
  position:relative; display:block; width:100%; height:46px;
}
.senshi--moon .senshi-art .ks-logo .asl{
  position:absolute; inset:0; margin:auto;
  height:100%; width:100%; object-fit:contain;
}
.senshi--moon .senshi-art .ks-logo .asl--en{ opacity:0; }
@media (hover:hover){
  .senshi--moon .senshi-art .ks-tab:hover .asl--jp{ opacity:0; }
  .senshi--moon .senshi-art .ks-tab:hover .asl--en{ opacity:1; }
  .senshi--moon .senshi-art .ks-logo .asl{ transition:opacity .28s ease; }
}
@media (prefers-reduced-motion:reduce){
  .senshi--moon .senshi-art .ks-logo .asl{ transition:none; }
}

.senshi--moon .senshi-art .ks-tab .ks-name{
  font-size:12.5px; line-height:1.25; text-align:center;
}
.senshi--moon .senshi-art .ks-tab .ks-era{
  font-family:"rainyhearts", ui-monospace, monospace;
  font-size:11px; letter-spacing:.04em; color:#8a8295;
}

/* ---- two across, portrait ---- */
/* COLUMNS, NOT GRID, and this is the second attempt. A two-column grid gives
   every row the height of its tallest card, and these cards are wildly uneven:
   season 3 holds a compact with no video at all next to a rod with a 267px
   video, so the first row was 800px tall with a 120px card sitting in a hole
   at the top of it, and the Holy Grail pushed down to a row of its own. Multi-
   column flows instead of aligning - a short card is followed immediately by
   the next one - so the two columns come out level and nothing is stranded.
   The cost is reading order: down the first column, then down the second,
   rather than left to right. For a list of objects in arc order that is a fair
   trade, and it is the only thing here that changes what order they read in. */
.senshi--moon .senshi-art .ks-panel .ka-items.ka-merged{
  display:block;
  column-count:2; column-gap:14px;
}
.senshi--moon .senshi-art .ks-panel .kit--merged{
  break-inside:avoid; page-break-inside:avoid;   /* never split a card */
  margin:0 0 14px;
}
.senshi--moon .senshi-art .ks-panel .kit--merged,
.senshi--moon .senshi-art .ks-panel .kit--merged.kit--novid{
  grid-template-columns:minmax(0,1fr);
}
.senshi--moon .senshi-art .ks-panel .kmx-vids,
.senshi--moon .senshi-art .ks-panel .kit--merged > .kit-cap{ grid-column:1; }
.senshi--moon .senshi-art .ks-panel .kmx-vids .km-vid{
  width:100%; height:auto; aspect-ratio:4 / 3;
}
.senshi--moon .senshi-art .ks-panel .kit--merged > .kit-cap{ margin-top:10px; }

@media (max-width: 760px){
  /* ONE COLUMN, and it has to be column-count - not grid-template-columns,
     which is what this rule said at first and which stopped meaning anything
     the moment the panel became multi-column. The phone kept two columns of
     170px cards: "the / Transformation / Brooch" stacked three words deep
     around a floated brooch. Nothing errored; it was just unreadable. */
  .senshi--moon .senshi-art .ks-panel .ka-items.ka-merged{
    column-count:1;
  }
  .senshi--moon .senshi-art .ks-index{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .senshi--moon .senshi-art .ks-logo{ height:38px; }
}

/* ---- the fuku gradient follows the seasons here ---- */
/* Section 200 hung the five fuku stops on .kitarc--1 .. --5, and those
   elements no longer exist - the panels replaced them - so every doily lost
   its tint the moment this section landed. `var(--fuku-a)` with nothing behind
   it makes the color-mix() invalid and the whole background layer drops, which
   is why it failed silently rather than falling back to something.
   Same five stops, re-hung on the panels.

   ONE THING DID CHANGE IN MEANING, and it is worth saying rather than
   pretending otherwise. She asked for the gradient to walk DOWN the page, one
   doily to the next, so the kit moved through the fuku top to bottom. With one
   season on screen there is no next doily to walk to: the walk now happens in
   time, as she clicks across the tabs, instead of in space. Each season still
   owns its own colour, which is the half of the idea that survives. */
body.senshi--moon .senshi-art .ks-panel--1{ --fuku-a:#1f4fa8; --fuku-b:#7c3674; }
body.senshi--moon .senshi-art .ks-panel--2{ --fuku-a:#7c3674; --fuku-b:#cb1c3b; }
body.senshi--moon .senshi-art .ks-panel--3{ --fuku-a:#cb1c3b; --fuku-b:#ad472a; }
body.senshi--moon .senshi-art .ks-panel--4{ --fuku-a:#ad472a; --fuku-b:#826318; }
body.senshi--moon .senshi-art .ks-panel--5{ --fuku-a:#826318; --fuku-b:#a8801f; }

/* and the tab carries its season's colour, so the row itself reads as the
   gradient even before anything is clicked */
.senshi--moon .senshi-art .ks-tab[for="kits-1"]{ --ks-c:#1f4fa8; }
.senshi--moon .senshi-art .ks-tab[for="kits-2"]{ --ks-c:#7c3674; }
.senshi--moon .senshi-art .ks-tab[for="kits-3"]{ --ks-c:#cb1c3b; }
.senshi--moon .senshi-art .ks-tab[for="kits-4"]{ --ks-c:#ad472a; }
.senshi--moon .senshi-art .ks-tab[for="kits-5"]{ --ks-c:#826318; }
.senshi--moon .senshi-art .ks-index .ks-tab{ border-bottom:3px solid var(--ks-c); }
.senshi-art #kits-1:checked ~ .ks-index .ks-tab[for="kits-1"],
.senshi-art #kits-2:checked ~ .ks-index .ks-tab[for="kits-2"],
.senshi-art #kits-3:checked ~ .ks-index .ks-tab[for="kits-3"],
.senshi-art #kits-4:checked ~ .ks-index .ks-tab[for="kits-4"],
.senshi-art #kits-5:checked ~ .ks-index .ks-tab[for="kits-5"]{
  border-color:var(--ks-c);
  box-shadow:inset 0 -3px 0 var(--ks-c);
  background:color-mix(in srgb, var(--ks-c) 9%, #fffdf6);
}


/* ==========================================================================
   206. THE OBJECT SITS IN A FRAME, AT THE TOP            (17 Sep 2026)
   ==========================================================================
   Ashley: "raise the wands to the top of the text box like the brooches, and
   maybe add a very subtle frame for the item."

   THE WANDS WERE BOTTOM-ALIGNED ON PURPOSE and that purpose has expired.
   Section 202 gave every object a shared floor because a true scale ladder
   only reads as scale when the objects stand on one line - which was right
   when five objects sat in a column down the left of the console and you could
   see them against each other. Section 205 put one season on screen in two
   columns of portrait cards, so there is no longer a row of objects to compare;
   each one is alone in its own panel, and a wand hanging at the bottom of its
   text just looks like it slipped. Top-aligned, it starts where the words
   start, which is what the brooches have always done.

   THE FRAME IS DELIBERATELY ALMOST NOTHING. A hairline at 55% of the house
   gold, an 8px radius, and a ground mixed 5% from the season's own fuku stop -
   so the frame is faintly the colour of the arc it belongs to without ever
   announcing itself. It reads as a place the object is kept rather than as a
   box drawn around it. Contrast against the cream panel is low on purpose;
   nothing in it carries meaning, so nothing in it needs to be legible.

   IT HAS TO CLEAR THE FLOAT'S MARGIN. A wrapped object is floated, and the
   12px gutter its prose needs is measured from the float's border box - which
   just grew by 7px a side. The margin comes down to 9px so the gap the reader
   sees stays where section 204 put it.

   THE FLIPPING COMPACTS KEEP WORKING. The frame is on .kit-shot, which is
   still the grid that holds both frames in one cell; padding and a border on a
   grid container do not disturb its cell.
   ========================================================================== */

.senshi--moon .senshi-art .kit-cap .kit-shot{
  padding:6px;
  border:1px solid color-mix(in srgb, var(--backbow,#e6c86a) 55%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--fuku-a,#7c3674) 5%, #fffefa);
}

/* the wand starts level with the first line of text, not the last */
.senshi--moon .senshi-art .kit--lane > .kit-cap > .kit-shot{
  align-self:start;
}

/* the float's gutter is measured from the border box, which the frame just
   made 14px wider - so the margin gives back what the padding took.
   THE PADDING IS RESTATED HERE because section 204 sets `padding:0` on this
   same element with five classes of specificity, which beat the four-class
   rule above: the frame drew but sat tight against the sprite on every
   wrapped object, and only on those. */
.senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-shot{
  padding:6px;
  margin:2px 9px 4px 0;
}
.senshi--moon .senshi-art .kit--lane > .kit-cap > .kit-shot{
  padding:6px;
}

@media (max-width: 760px){
  .senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-shot{
    margin:2px 9px 4px 0;
  }
}


/* ==========================================================================
   207. THE KIT SITS IN ONE FRAMED BOX                      (17 Sep 2026)
   ==========================================================================
   Ashley: "can the 'her kit' all sit inside a framed box... like 'the whole
   story' does on the landing page? i don't like it loading new after each
   click of the logo boxes."

   THE FRAME IS THE HUB'S, MEASURED OFF IT rather than eyeballed. .arc-console
   on sailormoon.html computes to a 2px #e6c86a border, 12px radius, #fefeff
   ground, 18px 20px 20px of padding and the 5px hard gold drop shadow this
   site uses everywhere instead of a blur. Those exact values are written out
   here - the hub's own block is not to be touched, and a shared class would
   drag select.css into a page that does not load it.

   WHAT THE BOX ACTUALLY FIXES is that the tabs and the season they open were
   two unrelated things floating on the page. Inside one frame they read as one
   instrument: the row of logos is the dial and the panel under it is the
   reading.

   THE "LOADING NEW" IS NOT THE BOX, and the box does not fix it. That was the
   videos: a hidden panel never intersects, so the observer in moves.js could
   not reach its slots and every first click on a tab mounted two to four
   videos in front of her. It is fixed in moves.js, where the console now
   mounts all fourteen at once as soon as it comes near. This section only
   stops the frame itself jumping about while she clicks.

   THE FLOOR IS 720px, NOT THE TALLEST PANEL. Measured, the five panels are
   1,085 / 523 / 720 / 551 / 541. A floor at the tallest would hold the box
   steady in every direction, at the price of 560px of empty cream under
   seasons 2, 4 and 5 - a bigger lie than the movement it hides. At 720 the
   four smaller seasons never move the box at all, and only season 1, which
   genuinely has twice the objects, grows it. That one is also the season the
   page opens on, so the reader meets the big box first and watches it settle
   rather than lurch.
   ========================================================================== */

.senshi--moon .senshi-art .ks-console{
  margin:14px 0 0;
  padding:18px 20px 20px;
  border:2px solid var(--backbow,#e6c86a);
  border-radius:12px;
  background:#fefeff;
  box-shadow:5px 5px 0 0 #c6a24e;
}

.senshi--moon .senshi-art .ks-stage{
  min-height:720px;
}

@media (max-width: 760px){
  /* the hard shadow is 5px of horizontal overflow on a 390px screen, and the
     padding is most of the card width - both come down rather than out */
  .senshi--moon .senshi-art .ks-console{
    padding:14px 12px 16px;
    box-shadow:3px 3px 0 0 #c6a24e;
  }
  /* one column of portrait cards is always tall; a floor would only ever add
     emptiness here */
  .senshi--moon .senshi-art .ks-stage{ min-height:0; }
}


/* ==========================================================================
   208. THE SEASON SELECTOR, FOR THE WHOLE WING             (17 Sep 2026)
   ==========================================================================
   Ashley: "gray out any season a girl doesn't get a new power??? kinda like we
   have for the arc placeholders now... but more perminant since we know there
   are no new transformations", and "it should already be in each of the inners
   profiles. start with the inners."

   SHE IS RIGHT THAT IT IS ALREADY THERE. Every empty console on an inner's
   page carries a line she wrote - `<p class="ka-none">No new moves this arc -
   she carries the Star Power Stick and Shine Aqua Illusion straight
   through.</p>` - so which seasons bring nothing is a fact the pages already
   state. Nothing is inferred here and there was no list to ask her for. All
   four inners read the same: arcs 1, 2 and 4 bring something, 3 and 5 do not,
   and they are the only pages in the wing that use .ka-none at all.

   SECTION 205 BUILT THIS MACHINERY SCOPED TO USAGI, because she was the only
   one who had it. The rules are restated here at .senshi-art so the four
   inners get them too. Her page keeps its own: every 205 rule carries
   .senshi--moon and therefore outranks the same rule here, so nothing about
   her kit moves. What she does NOT get is anything below, because she has no
   .ka-none anywhere - she gains something in all five.

   THE GREY IS NOT THE HUB'S GREY, and the difference is the whole point. The
   hub's .arc-row--soon is DASHED, and a dashed border reads as provisional:
   not written up yet, come back later. This one has to say the opposite -
   there was never anything here and there never will be. So it is solid, and
   the logo goes to greyscale. Same muted weight, opposite promise.

   IT IS STILL CLICKABLE, which is where this departs from --soon. Those
   .ka-none lines are not blanks; "she goes to the end of the series on Mercury
   Crystal Power, Shine Aqua Illusion and Mercury Aqua Rhapsody" is a real
   sentence about her arc, and a dead tab would bury it. The grey says nothing
   new is here, the click still delivers the line. One rule turns it inert if
   she would rather.

   THE PAGE OPENS ON THE FIRST SEASON THAT BRINGS SOMETHING, decided in the
   markup by senshi_seasons.py rather than here, so a girl's kit never loads
   showing a season she gains nothing in.
   ========================================================================== */

/* ---- the machinery, unscoped ---- */
.senshi-art .ks-console{ position:relative; }
.senshi-art .ks-in{
  position:absolute; width:1px; height:1px; opacity:0;
  margin:0; pointer-events:none;
}
.senshi-art .ks-panel{ display:none; }

.senshi-art .ks-console{
  margin:14px 0 0;
  padding:18px 20px 20px;
  border:2px solid var(--backbow,#e6c86a);
  border-radius:12px;
  background:#fefeff;
  box-shadow:5px 5px 0 0 #c6a24e;
}

.senshi-art .ks-index{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:8px; margin:0 0 16px;
}
.senshi-art .ks-index .ks-tab{
  display:grid; grid-template-columns:minmax(0,1fr);
  justify-items:stretch; align-content:start; gap:2px;
  padding:9px 8px 8px; cursor:pointer;
  border:1.5px solid var(--backbow,#e6c86a); border-radius:10px;
  background:var(--paper,#fffdf6);
  transition:background .08s, border-color .08s, box-shadow .08s;
}
.senshi-art .ks-index .ks-tab:hover{ background:var(--wash,#f6f2fc); }
.senshi-art .ks-logo{ position:relative; display:block; width:100%; height:46px; }
.senshi-art .ks-logo .asl{
  position:absolute; inset:0; margin:auto;
  height:100%; width:100%; object-fit:contain;
}
.senshi-art .ks-logo .asl--en{ opacity:0; }
@media (hover:hover){
  .senshi-art .ks-tab:hover .asl--jp{ opacity:0; }
  .senshi-art .ks-tab:hover .asl--en{ opacity:1; }
  .senshi-art .ks-logo .asl{ transition:opacity .28s ease; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .ks-logo .asl{ transition:none; }
}
.senshi-art .ks-tab .ks-name{ font-size:12.5px; line-height:1.25; text-align:center; }
.senshi-art .ks-tab .ks-era{
  font-family:"rainyhearts", ui-monospace, monospace;
  font-size:11px; letter-spacing:.04em; color:#8a8295;
}

/* ---- a season she gains nothing in ---- */
.senshi-art .ks-index .ks-tab--none{
  background:#f4f3f6;
  border:1.5px solid #cfcbd6;          /* SOLID. --soon is dashed, on purpose */
  box-shadow:none;
}
.senshi-art .ks-index .ks-tab--none:hover{ background:#eeecf2; }
.senshi-art .ks-tab--none .asl{ filter:grayscale(1); opacity:.62; }
.senshi-art .ks-tab--none .ks-name{ color:#6f6a7a; }
.senshi-art .ks-tab--none .ks-era{ color:#8d8895; }

/* the line she wrote is the whole panel, so it gets room to be read rather
   than sitting in the top-left corner of an empty box */
.senshi-art .ks-panel--none .ka-none{
  margin:0; padding:26px 22px; max-width:56ch;
  font-size:15px; line-height:1.6; color:#5d5768;
  border-left:4px solid #cfcbd6; border-radius:0 8px 8px 0;
  background:#f8f7fa;
}
.senshi-art .ks-panel--none .km-list:empty{ display:none; }

@media (max-width: 760px){
  .senshi-art .ks-console{ padding:14px 12px 16px; box-shadow:3px 3px 0 0 #c6a24e; }
  .senshi-art .ks-index{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .senshi-art .ks-logo{ height:38px; }
}

/* ---- the season colour, for every girl ---- */
/* Section 205 defined --ks-c only under .senshi--moon, and then used it
   unscoped in the :checked rules. On an inner's page that variable does not
   exist, so `border-color:var(--ks-c)` was invalid at computed-value time and
   the selected tab fell back to a flat dark border instead of its season
   colour. The five stops are the seasons', not Usagi's, so they belong here. */
.senshi-art .ks-tab[for="kits-1"]{ --ks-c:#1f4fa8; }
.senshi-art .ks-tab[for="kits-2"]{ --ks-c:#7c3674; }
.senshi-art .ks-tab[for="kits-3"]{ --ks-c:#cb1c3b; }
.senshi-art .ks-tab[for="kits-4"]{ --ks-c:#ad472a; }
.senshi-art .ks-tab[for="kits-5"]{ --ks-c:#826318; }
.senshi-art .ks-index .ks-tab{ border-bottom:3px solid var(--ks-c,#e6c86a); }

/* A DEAD SEASON KEEPS ITS GREY EVEN WHEN IT IS THE ONE SHOWING. Otherwise
   clicking it paints it in the arc colour, which is the one thing this tab is
   supposed not to claim. Written after the colour rules above so it wins. */
.senshi-art .ks-index .ks-tab--none,
.senshi-art #kits-1:checked ~ .ks-index .ks-tab--none[for="kits-1"],
.senshi-art #kits-2:checked ~ .ks-index .ks-tab--none[for="kits-2"],
.senshi-art #kits-3:checked ~ .ks-index .ks-tab--none[for="kits-3"],
.senshi-art #kits-4:checked ~ .ks-index .ks-tab--none[for="kits-4"],
.senshi-art #kits-5:checked ~ .ks-index .ks-tab--none[for="kits-5"]{
  border-color:#cfcbd6;
  border-bottom-color:#b9b4c4;
  background:#f4f3f6;
  box-shadow:inset 0 -3px 0 #cfcbd6;
}


/* ==========================================================================
   209. UNIFORM BOXES, AND THE BROOCHES TO ONE SIZE         (17 Sep 2026)
   ==========================================================================
   Ashley: "go ahead and remove the dots.. the seasons that have a 'dot' have
   space for another video in the box.... also, can we make the box heights
   uniform and the small brooches the same size....? the season 1 brooch is a
   weird crop i did and looks too big right now."

   BACK TO A GRID, AFTER SECTION 205 WENT TO COLUMNS. Columns were the right
   answer to a different problem: uneven cards left a 120px compact stranded at
   the top of an 800px row. That unevenness is what she is now asking to remove
   outright, and a grid is the only one of the two that can hold a row to a
   single height. grid-auto-rows:1fr does it, and every card stretches to fill
   its cell.

   A CARD WITH TWO VIDEOS SPANS TWO ROWS. With the dots gone both videos stack
   inside the card, which makes it about twice as tall as its neighbours - so
   it takes two cells instead of one and the grid stays square. It is selected
   with :has(), which is already how section 197 finds a shot that holds a
   sprite, so this stylesheet has the dependency either way. Where :has() is
   unsupported the span is dropped and the row simply sizes to the tall card,
   which is what the page did five minutes ago.

   THE BROOCHES COME TO ONE HEIGHT, AND THIS IS A DELIBERATE EXCEPTION to
   section 202. That section put every sprite at its file's native pixels
   because the files turned out to be one consistent scale sheet - and they
   are, for the wands. The compacts are not: measured, their closed frames run
   64, 45, 45, 54 and 52 pixels, which is the artists' inconsistency rather
   than the objects'. A brooch is a brooch.

       season 1  transformation brooch   64 -> 45
       season 2  crystal star            45 -> 45
       season 3  cosmic heart            45 -> 45
       season 4  crisis moon             54 -> 45
       season 5  eternal moon article    52 -> 45

   45 IS THE SMALLEST OF THEM, chosen so that nothing is ever enlarged - an
   upscaled pixel sprite at 1.16x doubles some rows of pixels and not others,
   which is far uglier than a clean reduction. It also keeps her point: the
   season 1 brooch was the one that looked too big, and everything else moves
   by a little or not at all.

   EACH PAIR SCALES BY ONE FACTOR, not to one height. The open frame is taller
   than the closed one because the lid lifts; pinning both to 45 would flatten
   the only thing the flip has to show. So the factor comes off the closed
   frame and the open frame takes the same factor.
   ========================================================================== */

.senshi--moon .senshi-art .ks-panel .ka-items.ka-merged{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:14px;
  column-count:auto;                   /* undo section 205 */
}
.senshi--moon .senshi-art .ks-panel .kit--merged{
  margin:0;                            /* the grid gap does the spacing now */
  grid-template-rows:auto minmax(0,1fr);
}
/* THE CAPTION TAKES THE SLACK. Once every card stretches to its row, a short
   card has surplus height to put somewhere, and left alone the grid split it
   two ways: a band of bare doily above the cream panel AND empty cream inside
   it. One gap in two places, which is worse than either. The rows are stated
   instead - video at its own height, caption taking everything left - so the
   panel meets the video and runs to the bottom of the card. */
.senshi--moon .senshi-art .ks-panel .kit--merged > .kit-cap{ margin-top:10px; }
/* ...BUT ONLY WHERE THERE IS A THIRD CARD TO FILL THE CELL IT VACATES.
   Season 5 has two objects and one of them is the double. Spanning it made a
   two-by-two grid with three cards' worth of content in it, and the empty
   quarter was 500px of bare doily under the Eternal Moon Article - a hole, and
   the opposite of the uniform boxes she asked for. With no span those two
   cards share one row and both stretch to the taller one: the Article gets a
   deeper cream panel, which is just a panel, instead of the grid getting a
   gap. Season 3 has the third card, so there it spans and nothing is left
   over. `:has(> :nth-child(3))` is the whole test. */
.senshi--moon .senshi-art .ks-panel .ka-merged:has(> :nth-child(3))
  .kit--merged:has(.km-vid ~ .km-vid){
  grid-row:span 2;
}

/* two videos in one card need air between them */
.senshi--moon .senshi-art .ks-panel .kmx-vids{
  display:grid; gap:10px; align-content:start;
}

/* ---- the compacts, to one size ---- */
/* Stated per file, the way section 198 states the compact sizes, because the
   scale factor is different for each pair and there is nothing in the markup
   for a rule to derive it from. */
.senshi--moon .kit-shot img[src$="moon-transformation-brooch.png"]{ width:45px; height:45px; }
.senshi--moon .kit-shot img[src$="moon-crystal-star-closed.png"]{   width:45px; height:45px; }
.senshi--moon .kit-shot img[src$="moon-crystal-star-open.png"]{     width:45px; height:60px; }
.senshi--moon .kit-shot img[src$="moon-cosmic-heart-closed.png"]{   width:45px; height:45px; }
.senshi--moon .kit-shot img[src$="moon-cosmic-heart-open.png"]{     width:45px; height:59px; }
.senshi--moon .kit-shot img[src$="moon-crisis-moon-closed.png"]{    width:58px; height:45px; }
.senshi--moon .kit-shot img[src$="moon-crisis-moon-open.png"]{      width:58px; height:48px; }
.senshi--moon .kit-shot img[src$="moon-eternal-moon-closed.png"]{   width:60px; height:45px; }
.senshi--moon .kit-shot img[src$="moon-eternal-moon-open.png"]{     width:60px; height:51px; }

@media (max-width: 760px){
  .senshi--moon .senshi-art .ks-panel .ka-items.ka-merged{
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:auto;               /* one column, so nothing to line up */
  }
  .senshi--moon .senshi-art .ks-panel .kit--merged:has(.km-vid ~ .km-vid){
    grid-row:auto;
  }
}


/* ==========================================================================
   210. THE WAND BREAKS OUT, AND THREE ACROSS WHEN THERE ARE THREE (18 Sep 2026)
   ==========================================================================
   Ashley: "season 2 and 4, kill the deadspace under the videos inside the
   box... season 5, there are only 3 videos. please come up with a layout to
   kill the deadspace." Asked how, she chose the wand breaking out of the top,
   and three across for season 5.

   WHERE THE DEADSPACE CAME FROM. A lane card's cream panel has to be tall
   enough to hold the object standing in it. Where the words are taller that
   costs nothing; where the object is taller the surplus is empty cream. Two
   cards were in that state before the splits and five are now:

       season 2  Cutie Moon Rod                     words 175  object 204
       season 3  Rainbow Moon Heartache             words 141  object 206
       season 4  Kaleidomoon Scope                  words 164  object 239
       season 5  Starlight Honeymoon Therapy Kiss   words 158  object 219
       season 5  Silver Moon Crystal Power Kiss     words 141  object 219

   Season 1 is in none of them, which is why it is untouched: its words run
   longer than its objects and its panels were never padded out. She has signed
   that season off and a blanket rule would have moved it.

   HOW IT BREAKS OUT. The shot leaves the flow - absolute, pinned to the bottom
   right of the panel - so it stops setting the panel's height, and the panel
   shrinks to the words. The object then grows UPWARD from the panel's floor,
   and where it is taller than the words it crosses the panel's top edge and
   stands against the bottom of the video. Nothing is clipped: the shot is a
   child of the caption, which paints after the video block beside it, so the
   wand simply passes in front.

   THE LANE STILL HAS TO BE RESERVED, or the text runs under the object. An
   absolute element takes no space, so the width comes back as padding on the
   panel, one value per sprite - the sprite plus the 12px frame and its 2px
   border, plus a 12px gutter. Stated per file the way sections 198 and 209
   state sizes, because there is nothing in the markup to derive it from.

   THREE ACROSS WHEN THERE ARE EXACTLY THREE. Season 5 splits into three cards
   and three does not divide into two columns; the leftover cell was the
   deadspace. Keyed on the count rather than on the season, so it follows the
   content: `:has(> :nth-child(3)):not(:has(> :nth-child(4)))`. Season 3 has
   four and stays two by two.
   ========================================================================== */

/* ---- one row of three ---- */
.senshi--moon .senshi-art .ks-panel
  .ka-items.ka-merged:has(> :nth-child(3)):not(:has(> :nth-child(4))){
  grid-template-columns:repeat(3, minmax(0,1fr));
}

/* ---- the object leaves the flow ---- */
.senshi--moon .senshi-art .kit--breakout > .kit-cap{
  position:relative;
  grid-template-columns:minmax(0,1fr);
  padding-right:calc(9px + var(--lane,80px) + 12px);
}
.senshi--moon .senshi-art .kit--breakout > .kit-cap > *{ grid-column:1; }
.senshi--moon .senshi-art .kit--breakout > .kit-cap > .kit-shot{
  position:absolute; right:9px; bottom:7px;
  grid-row:auto; grid-column:auto; align-self:auto;
}

/* the sprite's own width, plus 12px of frame and 2px of border */
.senshi--moon .kit--breakout > .kit-cap:has(img[src$="moon-cutie-moon-rod.png"]){   --lane:59px; }
.senshi--moon .kit--breakout > .kit-cap:has(img[src$="moon-spiral-heart-rod.png"]){ --lane:104px; }
.senshi--moon .kit--breakout > .kit-cap:has(img[src$="moon-kaleidomoon-scope.png"]){ --lane:116px; }
.senshi--moon .kit--breakout > .kit-cap:has(img[src$="moon-eternal-tiare.png"]){    --lane:81px; }

@media (max-width: 760px){
  .senshi--moon .senshi-art .ks-panel
    .ka-items.ka-merged:has(> :nth-child(3)):not(:has(> :nth-child(4))){
    grid-template-columns:minmax(0,1fr);
  }
  /* A PHONE CARD IS NARROW TOO, and I had assumed otherwise: one card per row
     sounds roomy, but the card is 336px and the Kaleidomoon's lane takes 116
     of it, which measured out at 140px of text - four words a line, worse than
     the season 5 case this section was written to fix. So every breakout card
     stands its object under the video here, the same as a three-across panel
     does, rather than only the ones that happen to be in a three-card season. */
  .senshi--moon .senshi-art .kit--lane > .kit-cap{ padding-right:9px; }
  .senshi--moon .senshi-art .kit--lane > .kit-cap > .kit-shot{
    position:static; grid-column:1; grid-row:auto;
    justify-self:center; margin-top:8px;
  }
}

/* ---- the 720px floor goes ---- */
/* Section 207 gave the stage a 720px floor so the framed box would not resize
   much as she clicked between seasons. That was measured against panels of
   1,085 / 523 / 720 / 551 / 541. After the splits and the breakout they are
   roughly 1,100 / 500 / 1,160 / 480 / 535, so the floor is now taller than
   three of the five and holds open a band of empty cream underneath them -
   which is exactly the deadspace she is hunting today, put there by me
   yesterday. It goes.

   What it was really guarding against is already solved elsewhere: the "it
   loads new after each click" was the videos mounting one panel at a time, and
   moves.js now mounts all of them when the console comes near. The box
   resizing between seasons is honest - season 3 has four cards and season 4
   has two. */
.senshi--moon .senshi-art .ks-stage{ min-height:0; }

/* ---- a narrow card stands its object under the video, not beside the words --- */
/* THREE ACROSS MADE THE LANE UNAFFORDABLE. At two columns a card is 370px and
   an 81px lane still leaves 259 for the words. At three it is 246px, the lane
   takes the same 81, and the Eternal Tiare's text came out 109px wide - three
   words a line, measured. Built both ways and looked at them:
   
       beside the words   panel 533px   text 109px
       under the video    panel 643px   text 202px
   
   110px taller and the words are readable, which is the better trade - and the
   object centred under its own video reads as a specimen rather than as
   something squeezed into a margin. Only the narrow panels do this; at two
   columns the wand still breaks out beside the words. */
.senshi--moon .senshi-art
  .ka-items.ka-merged:has(> :nth-child(3)):not(:has(> :nth-child(4)))
  .kit--lane > .kit-cap{
  padding-right:9px;
}
.senshi--moon .senshi-art
  .ka-items.ka-merged:has(> :nth-child(3)):not(:has(> :nth-child(4)))
  .kit--lane > .kit-cap > .kit-shot{
  position:static; grid-column:1; grid-row:auto;
  justify-self:center; margin-top:8px;
}

/* ---- an object that reaches the picture goes up without its frame ---- */
/* Ashley, seeing the first build: "the moon scope is hanging over the video in
   season 4." The object standing in front of the footage is the effect she
   picked; a cream box with a gold border sitting on top of it is not, and that
   is what she was looking at. So a card whose object crosses the panel's top
   edge loses the frame and goes up as a bare sprite.

   Only the ones that cross. Four of the five breakout cards stop inside the
   cream and keep the frame she asked for; measured, the Kaleidomoon Scope at
   239px is the only object on the page tall enough to reach the picture. The
   mark is stamped by moon_breakout.py against the real render, so it moves on
   its own when her words get longer or shorter. */
.senshi--moon .senshi-art .kit--overhang > .kit-cap > .kit-shot{
  border:0; background:none; padding:0;
  right:12px; bottom:10px;
}

@media (max-width: 760px){
  /* THE FRAME COMES BACK ON A PHONE, because the object is not on the video
     here - a narrow card stands it underneath, in the flow, where it crosses
     nothing. Taking the border off was right for the desktop case and wrong
     for this one; measured, the Kaleidomoon was rendering bare on a 390px
     screen with nothing behind it to justify it. */
  .senshi--moon .senshi-art .kit--overhang > .kit-cap > .kit-shot{
    padding:6px;
    border:1px solid color-mix(in srgb, var(--backbow,#e6c86a) 55%, transparent);
    background:color-mix(in srgb, var(--fuku-a,#7c3674) 5%, #fffefa);
  }
}


/* ==========================================================================
   211. THE PLANET DOOR SITS AT THE FOOT OF THE LEDE        (18 Sep 2026)
   ==========================================================================
   Ashley: "the 'read the moon page' button should be moved down."

   Section 131 put the door beside the lede rather than under it, to buy back
   the ~90px it cost sitting alone on its own line, and aligned the row to
   flex-start so the button meets the first line of the paragraph. On every
   other girl that reads fine because their ledes are short - Mars's is 363
   characters, Mercury's 336, Uranus's 288 - and the button sits against a
   block roughly its own height.

   Usagi's is 894, more than twice the longest of them. Against that much text
   the button floats at the top with two thirds of the paragraph running on
   below it, which is what she is looking at. Ending the row instead drops it
   to the foot of the words, where it reads as what it is: where to go next,
   after you have read this.

   SCOPED TO HER, and that is a question rather than a decision. The rest of
   the wing has the same rule and does not obviously need it; whether they
   should all match is hers to say. Nothing here changes the DOM order, so the
   deliberate order:-1 in section 131 - paragraph before link for a screen
   reader, link painted first for the eye - is untouched.

   The phone breakpoint already stacks the row and puts the link under the text
   on its own, so it needs nothing.
   ========================================================================== */

/* BELOW THE TEXT, not beside it at the bottom. Ashley, on the first attempt:
   "the button still needs to be moved below the text." Ending the flex row only
   dropped the button to the foot of a column it was still sharing, so the
   paragraph stayed narrow for all thirteen of its lines with an empty margin
   beside twelve of them. Stacking the row is what she asked for: the words take
   the full width of the card, the button follows underneath.

   This is the same shape the phone breakpoint has always used, and the order:0
   there is for the same reason - the DOM is paragraph then link, and only
   section 131's desktop rule flipped the painting. Stacked, there is nothing
   left to flip. */
.senshi--moon .senshi-art .dossier-tail{
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.senshi--moon .senshi-art .dossier-tail .astro-door{ order:0; }


/* ==========================================================================
   212. THE PLANET DOOR MOVES UNDER THE HENSHIN PICTURE      (18 Sep 2026)
   ==========================================================================
   Ashley: "or we could put the button under each girl's henshin pic. that
   will cut the deadspace."

   WHERE THE DEADSPACE IS. The facts panel is two columns: a 320px picture on
   the left, the facts running down the right. The picture is 247px tall on
   every one of the five girls - they are all the same 1200x907 still at the
   same column width - and the facts always run longer, so the bottom of the
   left column is empty. Measured at 1440px, before this change:

       Usagi      picture 247   facts 428   empty 182
       Rei        picture 247   facts 406   empty 160
       Makoto     picture 247   facts 395   empty 149
       Minako     picture 247   facts 361   empty 115
       Ami        picture 247   facts 305   empty  59

   The button is 72px tall (60 on Usagi, whose rabbit sprite is drawn at 40px
   rather than 52). So it drops into the hole free on four of the five, and on
   Ami - the shortest facts list in the wing - it pushes the panel about 27px
   taller. Both numbers belong here: this buys roughly 74px back on Usagi's
   card and about 15px on each of the other three, and costs Ami about 13px
   net. It is a consistency change everywhere except Usagi's page, which is
   where she asked for it.

   WHY THE MARKUP MOVED. Grid rows are shared between the columns. The picture
   is placed at column 1 spanning rows 1-20 (section 128) precisely so the
   facts can run down beside it, which means every later row sits below the
   TALLER column, not below the picture. There is no row that means "under the
   picture but next to the facts". The only way in is for column 1 to hold two
   things, so door_pose.py wraps the picture and the button in one grid item.

   WHY A WRAPPER RATHER THAN DROPPING THE BUTTON INTO .dossier-pose. Tried
   that first and measured the result: section 111's

       .senshi-art .dossier-pose img { width:100%; aspect-ratio:3/4; border:3px }

   matches on the TAG, so the little rabbit inside the button was stretched to
   the full 320px column and given a gold picture frame - a 223px-tall door on
   Usagi, 253 on Ami. Undoing that meant restating each sprite's size, because
   the 2x scale these pixel sprites are drawn at comes from the width/height
   ATTRIBUTES and any author rule beats a presentational hint (`revert` and
   `unset` were both tested and both dropped them to the file's own 26px). A
   sibling wrapper needs none of it: .dossier-pose keeps its subtree, and
   nothing written for the picture can reach the button.

   WHAT IT COSTS. Section 131 put the link after the paragraph on purpose - "a
   screen reader gets the content before an invitation to leave the page" - and
   under the picture it now comes before the facts instead. Against that, the
   DOM order and the painting order agree again, which is what section 132
   undid 131's order:-1 to get back, and the link reads as what it now is: a
   caption on the portrait pointing at the planet page. Stated rather than
   buried, because it is a real trade and hers to overrule.

   AND SECTION 211 GOES. That was the previous answer to the same complaint -
   stack the tail so the button drops under the words, on Usagi's page only.
   With the button out of the tail the tail holds one child, the stacking means
   nothing, and all five girls are back on one rule.
   ========================================================================== */

/* ---- 211 undone ---- */
.senshi--moon .senshi-art .dossier-tail{
  flex-direction:row;
  align-items:flex-start;
  gap:20px;
}

/* ---- column 1 becomes picture-then-button ---- */
/* The wrapper takes over the grid placement the picture used to carry. The
   old rules on .dossier-pose--inbox (grid-column:1, grid-row:1/span 20) are
   left alone and simply stop meaning anything - it is not a grid item any
   more - which keeps section 128 readable as the record of why the span is
   there. The span is still doing its job, one level up: rows 2-20 collapse to
   nothing and column 2 runs down the side of both. */
.senshi-art .dossier--noplate .dossier-head .dossier-col1{
  grid-column:1;
  grid-row:1 / span 20;
}

/* The picture is a block and the door is inline-flex (section 83), so the
   button takes a line of its own underneath without any display change. Left
   aligned rather than centred under the 320px column: the picture's own left
   edge is the strongest line in this panel and the button reads as hanging
   off it, where centring left it adrift in the middle of nothing.

   margin-top is stated because the button's standing margin here would be the
   18px from `.senshi-art .dossier-card .astro-door` - three classes, which the
   old `.dossier-tail .astro-door{margin-top:0}` used to answer and no longer
   can. 14px is the gap the phone breakpoint already uses under a picture. */
.senshi-art .dossier-col1 > .astro-door{
  margin:14px 0 0;
}

@media (max-width: 760px){
  /* One column here, so there is no hole to fill and nothing to gain - but
     the button stays under the picture rather than going back to the foot of
     the card, because the alternative was display:contents on the wrapper
     plus an order shuffle, which would put the painting order back out of
     step with the DOM on exactly the screen where a screen reader is most
     likely. One rule, both widths. */
  .senshi-art .dossier--noplate .dossier-head .dossier-col1{
    grid-column:1;
    grid-row:auto;
  }
  /* centred here, because the picture is: at 390px it is
     `width:min(300px,82%); margin:0 auto` inside a full-width column, so a
     left-aligned button starts 23px outside the frame it belongs to. */
  .senshi-art .dossier-col1{ text-align:center; }
  .senshi-art .dossier-col1 > .astro-door{
    margin:0 0 12px;
  }
}


/* ==========================================================================
   213. NAOKO'S PROSE TURNS THE CORNER OF THE CHART   (18 Sep 2026)
   ==========================================================================
   Ashley: "in naoko's profile paragraph, wrap the text around the bottom of
   the birth chart box."

   Section 106 floated the chart right and capped the prose at 62 characters.
   The cap is what she is looking at. Measured at 1440px: the box is 927px
   wide and 2,160 tall, the chart's bottom edge is 1,802px down it, so the
   closing paragraph and the tail of the one before it sit BELOW the float -
   and they stayed 496px wide with 431px of empty page beside them. Wrapping
   is the whole point of a float; the cap was stopping the wrap from showing.

   WHAT THE CAP WAS PROTECTING, and what pays for it now. 106's reasoning was
   right: below the float the measure is 886px, about 116 characters, and 116
   is past what anyone tracks back to the start of. What makes it affordable
   is how little text is down there - seven lines, counted, all at the end of
   the piece. If her biography grows, more of it lands in that band, and the
   answer then is two columns below the float, not a cap: a cap only puts the
   white space back where she asked for it not to be.

   BUILT BOTH WAYS FIRST. Two columns below the float split the closing
   paragraph mid-sentence across a 430px gutter - "through 2025 and 2026, and
   thirty-five years after the | first act" - which reads worse than a long
   line does when there are only four lines of it.

   Equal specificity to 106's cap and later in the file, which is what settles
   it. 106's own phone rule at 900px already says max-width:none, so below
   that breakpoint nothing changes at all.
   ========================================================================== */
#naoko .nk-duo-l .nk-lead{ max-width:none; }


/* ==========================================================================
   214. THE SCOPE COMES OFF THE VIDEO ALTOGETHER   (18 Sep 2026)
   ==========================================================================
   Ashley, twice: "the moon scope is hanging over the video in season 4", and
   now "the kaledomoon scope image is still overflowing over the video on
   moon's page."

   I ANSWERED THE WRONG HALF THE FIRST TIME. Section 210 read that complaint as
   being about the cream box and the gold border sitting on top of the footage,
   and took the frame off so the sprite went up bare. She did not mind the
   frame. She minds the object being on the picture at all - which, read back,
   is what she said both times.

   MEASURED, IT IS ONE CARD IN THE WING. The Kaleidomoon Scope's sprite is
   225px tall and its top lands 35px above the video's bottom edge. Every
   other breakout object stops inside its own cream panel; the Cutie Moon Rod,
   the next tallest, rises 7px past the panel's top into the 10px of doily
   between the two and touches nothing.

   SO THAT ONE CARD STOPS BREAKING OUT. The shot goes back into the flow and
   stands centred underneath its own video, which is not a new invention - it
   is exactly what section 210 already does for a three-across panel and for
   every breakout card on a phone, both of which she has seen and kept. The
   frame comes back with it, because the object is on cream again with nothing
   behind it.

   WHAT IT COSTS: the panel grows. That is the deadspace this whole run of
   sections was hunting, and it is the honest price - the alternative is
   shrinking a 225px sprite, and she settled that one already: "if the item is
   large it shouldn't get shrunk."

   THE MARK STILL MOVES ON ITS OWN. moon_breakout.py clears both marks and
   re-decides from a live render every time, and its second pass measures
   against the breakout layout before this rule applies. So if her notes get
   longer, or a sprite is swapped, the card that crosses is recomputed rather
   than remembered. What changed here is only what the mark DOES.
   ========================================================================== */
.senshi--moon .senshi-art .kit--overhang > .kit-cap{
  padding-right:9px;
}
.senshi--moon .senshi-art .kit--overhang > .kit-cap > .kit-shot{
  position:static;
  grid-column:1; grid-row:auto;
  justify-self:center;
  right:auto; bottom:auto;
  margin-top:8px;
  /* section 206's frame, restated - 210 stripped it for the bare-sprite
     treatment that is going away here */
  padding:6px;
  border:1px solid color-mix(in srgb, var(--backbow,#e6c86a) 55%, transparent);
  background:color-mix(in srgb, var(--fuku-a,#7c3674) 5%, #fffefa);
}


/* ==========================================================================
   215. THE COMPACTS COME UP FROM 45 TO 54            (18 Sep 2026)
   ==========================================================================
   Ashley: "the compacts on moon's page... under her kit. make them slightly
   bigger. did you shrink those? adjust the text around them."

   YES, I SHRANK THEM - yesterday, at her word. Section 209 answered "can we
   make the small brooches the same size....? the season 1 brooch is a weird
   crop i did and looks too big right now" by putting all five closed frames
   on one height, and picked 45 because it was the SMALLEST of them and so
   nothing had to be enlarged. That is the number she is now asking to raise.

   THE FLOOR MOVES 45 -> 54, a fifth bigger. One factor per pair, taken off
   the closed frame the way 209 took it, so a lid that lifts still lifts:

       season 1  transformation brooch   64px file  ->  54   x0.84
       season 2  crystal star            45px file  ->  54   x1.20   enlarged
       season 3  cosmic heart            45px file  ->  54   x1.20   enlarged
       season 4  crisis moon             54px file  ->  54   x1.00   exact
       season 5  eternal moon article    52px file  ->  54   x1.04   enlarged

   AND THIS BREAKS THE INTEGER-ONLY PIXEL RULE, which is written into this
   stylesheet a few hundred lines up and worth saying out loud rather than
   quietly stepping over: "a fitted or 1.5x scale lands sample boundaries
   between source pixels and the edges go furry, which on 40px-wide art is the
   whole of the art." Two of these five compacts are only 45 pixels tall in the
   file, so ANY floor above 45 enlarges them, and 54 enlarges them by 1.2 -
   one source row in five gets doubled and the outline softens.

   THE ALTERNATIVES, so the choice is hers and not mine by default:
     - stay at 45, which is what she is asking to change
     - go to 90, an exact doubling and the only clean enlargement, which is
       twice the size rather than slightly bigger
     - let them differ again, each at its own file size (64/45/45/54/52),
       which puts the season 1 brooch back to the size she called too big
   54 is the reading of "slightly bigger" that keeps them uniform. If the
   softened edges show at her screen's scale, 45 goes straight back.

   THE TEXT REFLOWS ON ITS OWN. Every compact sits on a .kit--wrap card, where
   the sprite is a float and the caption's line boxes shorten around it, so
   nine more pixels of sprite simply means nine fewer of measure on the lines
   beside it. The lane values in section 210 are untouched: they belong to the
   wands, and no compact is on a lane card.
   ========================================================================== */
.senshi--moon .kit-shot img[src$="moon-transformation-brooch.png"]{ width:54px; height:54px; }
.senshi--moon .kit-shot img[src$="moon-crystal-star-closed.png"]{   width:54px; height:54px; }
.senshi--moon .kit-shot img[src$="moon-crystal-star-open.png"]{     width:54px; height:72px; }
.senshi--moon .kit-shot img[src$="moon-cosmic-heart-closed.png"]{   width:54px; height:54px; }
.senshi--moon .kit-shot img[src$="moon-cosmic-heart-open.png"]{     width:54px; height:71px; }
.senshi--moon .kit-shot img[src$="moon-crisis-moon-closed.png"]{    width:69px; height:54px; }
.senshi--moon .kit-shot img[src$="moon-crisis-moon-open.png"]{      width:69px; height:57px; }
.senshi--moon .kit-shot img[src$="moon-eternal-moon-closed.png"]{   width:72px; height:54px; }
.senshi--moon .kit-shot img[src$="moon-eternal-moon-open.png"]{     width:72px; height:61px; }


/* ==========================================================================
   216. THE ITEM NAME BECOMES A LABEL ON ITS OWN SPRITE     (18 Sep 2026)
   ==========================================================================
   Ashley: "looking at the 'her kit' i see listed the name of every single one
   of her items. remove those from the text boxes and have the name appear when
   hovering over the image instead to save more text space."

   ONLY THE OBJECT'S NAME. .kit-name is "the Cutie Moon Rod"; the .km-name
   beside it is the move the card is actually about and does not move.

   NOT ONE BYTE OF MARKUP CHANGES, and the first attempt is why that matters.
   It moved all fifteen spans inside their .kit-shot so a tooltip could be
   positioned against the picture - which worked, and then had no honest answer
   for a phone: there is no hover on a touch screen, and a name parked inside a
   68px sprite frame either wraps to five lines or has to be let out of the
   frame with negative margins. Left where it is and positioned against the
   CAPTION instead, the whole treatment can be wrapped in @media (hover: hover)
   and a touch screen simply never sees any of it - the name renders exactly
   as it does today, in the same place, with no fallback to get wrong.

   IT STAYS READABLE TO A SCREEN READER because it is hidden with opacity
   alone. display:none and visibility:hidden both take an element out of the
   accessibility tree; opacity:0 does not, and the span is absolutely
   positioned so it costs no space while invisible.

   IT SITS ON THE SIDE THE SPRITE IS NOT. A tooltip that covers the thing you
   are pointing at is no use, and on these cards the sprite's side is known
   from the card's own class: .kit--wrap floats it left, so the label goes
   right; .kit--lane stands it in the right-hand lane or centred at the foot,
   so the label goes left. Never over the sprite, never over the video, always
   on cream.
   ========================================================================== */
@media (hover: hover){
  .senshi--moon .senshi-art .kit-cap{ position:relative; }

  .senshi--moon .senshi-art .kit-cap > .kit-name{
    position:absolute;
    top:7px; left:9px; right:auto;
    z-index:6;
    margin:0;
    padding:4px 10px;
    max-width:calc(100% - 18px);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:12.5px; line-height:1.3; font-weight:700;
    color:#fffefa;
    background:rgba(43,35,64,.94);
    border-radius:4px;
    box-shadow:0 2px 5px rgba(10,20,35,.28);
    opacity:0;
    pointer-events:none;
    transition:opacity .13s ease;
  }
  /* the sprite is on the left of a wrap card, so the label is on the right */
  .senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-name{
    left:auto; right:9px;
  }
  /* and on the right, or centred at the foot, of a lane card - so left */
  .senshi--moon .senshi-art .kit--lane > .kit-cap > .kit-name{
    left:9px; right:auto;
  }


  /* THE FLOAT HAS TO BE ON TOP TO BE HOVERABLE, and this is the bug the first
     build had. On a wrap card the sprite is a float and .kit-note is a block:
     a float shortens the note's LINE boxes but not its BLOCK box, so the
     note's box lies right over the sprite and swallows the pointer. The name
     would never have appeared. Playwright refused to hover the sprite at all
     and named the culprit outright - "<span class=\"kit-note\"> intercepts
     pointer events" - which is the second time today that this same fact
     about floats has cost a build. z-index needs a positioned box, and
     relative with no offsets moves nothing. */
  .senshi--moon .senshi-art .kit--wrap > .kit-cap > .kit-shot{
    position:relative; z-index:2;
  }

  .senshi--moon .senshi-art .kit-cap:has(.kit-shot:hover) > .kit-name{
    opacity:1;
  }
}


/* ==========================================================================
   217. A GALLERY INSIDE A THREAD KEEPS ITS PICTURES WHOLE  (18 Sep 2026)
   ==========================================================================
   Ashley sent three Neo-Queen Serenity pictures in a row and asked for a
   gallery; asked where, she chose to replace the thread's single shot with it.

   THE HOUSE GALLERY CROPS, AND THAT IS RIGHT WHERE IT LIVES. .arc-gallery was
   written for rows of screencaps in the arc sections, and its

       aspect-ratio: 4 / 3;  object-fit: cover;

   is what keeps a row of stills tidy when they arrive at whatever size a
   capture happens to be. Measured on the first build, it did exactly that to
   these three: all of them rendered 155x116, so a 277x422 portrait and an
   812-tall painting were both cropped to a landscape letterbox with most of
   the picture outside it.

   ILLUSTRATIONS ARE NOT SCREENCAPS. A still is a frame from something and a
   crop of it is still that frame; a painting is composed to its own edges, and
   cropping one is throwing away the work. So inside a thread the gallery drops
   the forced ratio and lets each picture be its own shape. Rows then vary in
   height, which is what a wall of pictures looks like.

   SCOPED TO .thread-shot, so the arc galleries keep the crop they were built
   for. Nothing outside these asides changes.

   NOTE FOR LATER: the three single thread shots above carry class "art--asis
   art--tall", and NEITHER of those is defined in any stylesheet on this site -
   checked all four. They render at their natural aspect because nothing forces
   one on them, not because those classes do anything. They are harmless, but
   they are not load-bearing either, and the next person to read them will
   assume they are.
   ========================================================================== */
.senshi-art .thread-shot .arc-gallery img.art--arcshot{
  aspect-ratio:auto;
  object-fit:contain;
  width:100%; height:auto;
  align-self:start;
}


/* ==========================================================================
   218. A CAROUSEL OF ILLUSTRATIONS, NOT OF FILM PANELS     (18 Sep 2026)
   ==========================================================================
   Ashley: "a carousal like the other one... with the dots..."

   It IS the other one - same .slideshow markup, same driver, same dots. Two
   things about the frame have to change, and both for the reason section 217
   already found in the gallery: .ss-frame was built for film panels.

   1. THE FRAME IS PORTRAIT AND NOTHING IS CROPPED. .ss-frame is
      aspect-ratio:4/3 with object-fit:cover, which is right for a reel of
      widescreen stills and ruinous for three upright paintings - the same
      letterbox that cut these exact pictures down to 155x116 an hour ago.
      3/4 and contain instead. Their own ratios are 0.656, 0.690 and 0.912, so
      0.75 is the frame that wastes least across the three; the widest one
      takes a little space above and below, the tallest a little at the sides.

   2. THE MATTE IS CREAM, NOT BLACK. #0c0b14 is a billboard behind a film
      panel and it reads as one. These are pale watercolours on white grounds,
      and a near-black surround turns the bleed into a hard cut. The kit
      frames' wash is already the site's answer for "a pale object on a
      panel", so it is reused rather than a sixth background invented.

   SCOPED TO .ss--thread. Every billboard in the arc console keeps the frame
   it was written for, which is the one thing this section must not disturb.
   ========================================================================== */
.senshi-art .ss--thread .ss-frame{
  aspect-ratio:3/4;
  background:color-mix(in srgb, var(--fuku-a,#7c3674) 5%, #fffefa);
}
.senshi-art .ss--thread .ss-img{
  object-fit:contain;
}

/* 3. AND IT NEEDS A WIDTH, which is the bug the first build had: the carousel
      rendered 55px wide. .thread-shot in a solo thread is `float:right;
      width:auto` - shrink-to-fit - and the gallery it replaced had an
      intrinsic width to give it (a grid of minmax(150px,1fr) columns). A
      .slideshow has none: .ss-frame is width:100% of a parent that is sizing
      itself to its content, so the two collapse into each other.

      300px, which is not a new number - it is what rule 144 already gives
      .ph--threadshot in this exact place, so the carousel is the size the
      empty frame was. max-width keeps the phone breakpoint's centred
      min(300px, 82%) in charge down there. */
.senshi-art .thread-shot > .ss--thread{
  width:300px; max-width:100%;
}


/* ==========================================================================
   219. A KIT CARD THAT CAN PLAY SOMETHING, ON ANY GIRL'S PAGE  (18 Sep 2026)
   ==========================================================================
   Ashley: "insert this german clip for death reborn revolution" / "Keep it in
   her kit, video panel." / "here is one more video to complete the 4. hotaru
   has healing powers and heals chibiuss leg."

   THIS SHAPE ALREADY EXISTED AND WAS LOCKED TO ONE GIRL. Section 202 built
   `kit--merged` for Usagi - a row per card, sprite | video | text, collapsing
   to sprite | text via `kit--novid` when there is nothing to play - and wrote
   every selector under `.senshi--moon`. Hotaru's kit needs the same thing, so
   the base rules are restated here without that scope. Nothing is invented:
   the tracks, the 160px sprite column, the 300x225 slot and the phone
   breakdown are section 202's numbers.

   EVERY SELECTOR HERE EXCLUDES USAGI, AND THE FIRST DRAFT DID NOT. It was
   written as `.senshi-art .ka-items .kit--merged ...`, on the reasoning that
   her page overrides these inside `.ks-panel` anyway. Some of it does and some
   of it ties: `.senshi--moon .senshi-art .ks-panel .kmx-vids .km-vid` is
   (0,5,0) and so was my slot rule, so mine won on order alone. MEASURED, not
   guessed: her cards went 370x524 -> 370x1281, her video slot 348x261 ->
   300x225, and her kit section 1349px -> 2863px. Her page more than doubled in
   height because of a rule written for someone else's.

   `body:not(.senshi--moon)` is the fix, and it is a fence rather than a tweak.
   Adding specificity would have made these rules win MORE arguments on her
   page, which is the opposite of what was needed. This way they cannot reach
   her at all, whatever order the file ends up in, and any girl who is not
   Usagi picks them up for free.

   THE SPECIFICITY STILL MATTERS FOR THE BASE RULES. `.senshi-art .ka-items
   .kit` sets `max-width:380px` at section 6161 and `display:flex` at section
   4903, both (0,3,0). With the body fence these rules are (0,4,0) and beat
   them outright rather than on file order. Measured after writing: the row
   comes out 798px wide at desktop with a 300x225 slot in it.

   `.ka-merged` ON THE CONTAINER IS WHAT SWITCHES THE LIST. `.ka-items` is a
   240px auto-fill grid, which is right for small square object cards and
   wrong for a row that holds a video. The merged container is a flex column
   instead, so each card is one full-width row. */
body:not(.senshi--moon) .senshi-art .ka-items.ka-merged{
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged{
  display:grid;
  grid-template-columns:160px auto minmax(0,1fr);
  align-items:start;
  gap:0 12px;
  max-width:none; width:100%;
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--novid{
  grid-template-columns:160px minmax(0,1fr);
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kit-shot{
  grid-column:1;
  width:100%; min-width:0; max-width:160px;
  display:grid; place-items:center;
  position:relative; z-index:1;
  padding:4px 2px 0;
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kmx-vids{
  grid-column:2;
  position:relative; z-index:1;
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kit-cap{
  grid-column:3;
  min-width:0;
  position:relative; z-index:1;
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--novid > .kit-cap{
  grid-column:2;
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kmx-vids .km-vid{
  width:300px; height:225px;
}

@media (max-width: 760px){
  /* ONE COLUMN, everything stacked. The sprite keeps its own row rather than
     sitting beside a 300px video that no longer fits, and the slot goes fluid
     at 4:3 - the same retreat section 202 makes on Usagi's page.

     THE SPRITE COLUMN DOES NOT GO FULL-BLEED. Dropping its max-width left a
     56px placeholder floating in the middle of a 624px box, which reads as a
     layout error rather than as a centred sprite. It keeps the 160px cap and
     sits at the left of its own row. */
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged,
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--novid{
    grid-template-columns:minmax(0,1fr);
  }
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kit-shot,
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kmx-vids,
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kit-cap,
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--novid > .kit-cap{
    grid-column:1;
  }
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kit-shot{
    justify-self:start;
  }
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kmx-vids .km-vid{
    width:100%; height:auto; aspect-ratio:4 / 3;
  }
  body:not(.senshi--moon) .senshi-art .ka-items .kit--merged > .kit-cap{
    margin-top:10px;
  }
}


/* ==========================================================================
   220. A KIT CARD WHOSE PICTURE IS WIDER THAN ITS COLUMN     (18 Sep 2026)
   ==========================================================================
   Ashley: "let's turn thge glaive horizontal."

   HER 96x750 SPRITE NOW SHIPS AS 750x96 - the PNG itself is rotated, not the
   element. `transform:rotate()` would paint it sideways and leave its layout
   box upright, so the card would still reserve a 750px-tall hole. A quarter
   turn of the file re-indexes the pixel grid rather than resampling it, so it
   stays exact under the site's integer-only rule; rotating it back returned
   all 72,000 pixels unchanged.

   WHY THE CARD CHANGES SHAPE. Section 219 lays a kit card out as
   sprite | video | text with the sprite track capped at 160px - right for a
   small upright object, impossible for a picture 750 wide. `kit--wide`
   collapses that one card to a single column: sprite across the top, her note
   underneath.

   THE PAYOFF IS THE DEADSPACE. Upright, that card was 776px tall with the
   note using its first 110px and roughly 660px of empty lace beside the
   blade. Lying down it is about 130. Turning the glaive horizontal was the
   fix for that hole.

   THE BREAKPOINT IS 760, AND I GUESSED 1180 FIRST. The reasoning was that a
   card tracks its viewport, so a 750px picture must stop fitting somewhere
   around there. It does not - THIS PAGE IS WIDER IN THE MIDDLE. Measured:

       viewport   card
       1920        798
       1440        798
       1100       1018     <- widest, because the outer max-width has not
       1000        918        kicked in yet at this size
        900        818
        820        766
        760        706     <- first width with no room for 750
        700        646

   So the sprite fits everywhere down to 820 and only needs halving at the
   breakpoint the stylesheet already has. A 1180 breakpoint would have shrunk
   the picture at exactly the widths where the card was at its roomiest.

   HALF IS THE ONLY SMALLER SIZE ON OFFER. 375x48 keeps every source pixel on
   a whole destination pixel. A fitted width lands sample boundaries mid-pixel
   and the blade's edge goes furry, which on a 96px-tall picture is most of
   what there is to look at. */
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--wide,
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--wide.kit--novid{
  grid-template-columns:minmax(0,1fr);
}
/* ROWS AS WELL AS COLUMNS, AND THE CAP RULE HAS TO OUT-SPECIFY 219'S.
   The first version of this set `grid-column:1` on both children and left
   the rows to auto-placement, and the render showed the glaive as a 10px
   sliver in the corner. Two things were wrong at once and only measurement
   separated them. The cap computed to `grid-column:2`, because this card is
   also `kit--novid` and section 219's `.kit--merged.kit--novid > .kit-cap`
   is (0,6,0) against my (0,5,0) - so the cap sat BESIDE the sprite, in an
   implicit second track, rather than under it. And with both children in
   row 1 the card was one 109px row: the sprite was 96px tall inside a 131px
   card with an opaque cream caption painted straight over it.

   So the rows are stated, and the cap selector carries `.kit--novid` to win
   its argument outright rather than on file order. */
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--wide > .kit-shot{
  grid-column:1; grid-row:1;
  max-width:none;
  justify-self:start;
  padding:2px 0 0;
}
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--wide > .kit-cap,
body:not(.senshi--moon) .senshi-art .ka-items .kit--merged.kit--wide.kit--novid > .kit-cap{
  grid-column:1; grid-row:2;
  margin-top:10px;
}
body:not(.senshi--moon) .senshi-art .kit--wide .kit-sprite{
  width:750px; height:96px;
  margin:0;                    /* section 8234 centres kit sprites; this one
                                  starts at the left edge of its card */
}

@media (max-width: 760px){
  body:not(.senshi--moon) .senshi-art .kit--wide .kit-sprite{
    width:375px; height:48px;
  }
}

@media (max-width: 480px){
  /* A THIRD STEP, BECAUSE HALF STILL SPILLED ON A SMALL PHONE. At 360 the
     card is 306 wide and the 375px half hung 80px past its right edge.
     The card runs about 54px narrower than the viewport, so 375 needs 429
     and 480 is the first round breakpoint clear of it.

     A THIRD IS THE NEXT HONEST SIZE. 750 and 96 both divide by 3 - 250x32 -
     where they do not divide by 4. Quarter would have been 187.5 wide, which
     puts every sample boundary between two source pixels. */
  body:not(.senshi--moon) .senshi-art .kit--wide .kit-sprite{
    width:250px; height:32px;
  }
}


/* ==========================================================================
   221. HER KIT AS ONE BOX                                   (19 Sep 2026)
   ==========================================================================
   Ashley: "merge the 'her kit' box containing the silence glaive and the
   saturn planet power video into one large box and rearrange it so it's
   nice." Then, on the first attempt: "put the silence glave text back where
   it was and the saturn pmlanet power text back where it was. it's too tall
   now. readjust the box and lose the height"

   THE FIRST VERSION POURED BOTH NOTES INTO ONE COLUMN under a full-width
   video, and a column can only grow downwards: video, note, note. The card
   came out 783px tall. So each note goes back beside the picture it belongs
   to, and the single tall column becomes two short rows.

       top    the glaive across the width, its note underneath at full width
              - the shape `kit--wide` gave it before the merge
       body   the figure, the video and the transformation note in three
              columns - the shape `kit--merged` gave that card

   WIDE TEXT IS SHORT TEXT, and that is where the height goes. The glaive note
   wraps in about four lines across 750px where it needed six in a 529px
   column, and the transformation note sits beside its video instead of under
   it. Same content, same one box she asked for, roughly 280px less of it.

   THE FIGURE COMES DOWN TO 196x300. At 229 wide the three tracks left the
   note only 233px to wrap in, which is narrower than the column it came from
   and would have put the height straight back. 196 buys the text 266px and
   sets the row at 300 rather than 350.

   THE TRACKS ARE `auto auto minmax(0,1fr)`. The figure and the video are
   fixed pictures; the note takes what is left. `minmax(0,...)` on the last
   one is what lets a long note wrap rather than forcing the track wider than
   the card.

   SECTION 219 DOES NOT REACH THIS CARD - its rules are written
   `.kit--merged > ...` and this is one card rather than a row of them - so
   the video size is restated here. */
body:not(.senshi--moon) .senshi-art .ka-items .kit--suite{
  display:block;
  max-width:none; width:100%;
}

/* ---- the glaive, and its note under it ---- */
body:not(.senshi--moon) .senshi-art .kit--suite .ks-top{
  display:block;
  margin:0 0 14px;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-top .kit-sprite{
  display:block; margin:0 0 8px;
  width:750px; height:96px;
  image-rendering:pixelated;          /* pixel art, unlike the figure below */
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-top .kit-name{
  display:block; margin:0 0 2px;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-top .kit-note{
  display:block; max-width:none;
}

/* ---- the figure, the video and the note, three across ---- */
body:not(.senshi--moon) .senshi-art .kit--suite .ks-body{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:0 18px;
  align-items:start;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-fig{ grid-column:1; }
body:not(.senshi--moon) .senshi-art .kit--suite .kit-figure{
  display:block; margin:0;
  width:196px; height:300px;
  max-width:none;
  filter:drop-shadow(0 3px 5px rgba(10,20,35,.22));
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-body > .kmx-vids{
  grid-column:2;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-body .km-vid{
  width:300px; height:225px;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-cap{
  grid-column:3;
  min-width:0;
  background:#fffdf6;
  border:1px solid rgba(230,200,106,.45);
  border-radius:6px; padding:8px 10px;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-cap .kit-name{
  display:block; margin:0 0 2px;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-cap .kit-note{ display:block; }

@media (max-width: 1180px){
  /* the glaive halves before the card does, exactly as section 220 had it */
  body:not(.senshi--moon) .senshi-art .kit--suite .ks-top .kit-sprite{
    width:375px; height:48px;
  }
}

@media (max-width: 760px){
  /* TWO COLUMNS, NOT THREE. A 196px figure, a 300px video and a note will not
     sit side by side in a 646px card. The figure keeps the video company and
     the note goes full width underneath, where it wraps short again. */
  body:not(.senshi--moon) .senshi-art .kit--suite .ks-body{
    grid-template-columns:auto minmax(0,1fr);
  }
  body:not(.senshi--moon) .senshi-art .kit--suite .ks-body > .kmx-vids{
    grid-column:2;
  }
  body:not(.senshi--moon) .senshi-art .kit--suite .ks-cap{
    grid-column:1 / -1; margin-top:12px;
  }
  body:not(.senshi--moon) .senshi-art .kit--suite .ks-body .km-vid{
    width:100%; height:auto; aspect-ratio:4 / 3;
  }
}

/* ---- 221b. the glaive's note gets its panel back ---- */
/* Ashley: "please add the text box back around the silence glaive text."
   It lost the frame when the two cards merged - the note went to the top of
   the box as loose spans on the lace while the transformation note beside the
   video kept its panel. Same cream, same gold hairline, same radius as
   `.ks-cap` and as every other kit note on the site. */
body:not(.senshi--moon) .senshi-art .kit--suite .ks-topcap{
  background:#fffdf6;
  border:1px solid rgba(230,200,106,.45);
  border-radius:6px;
  padding:8px 10px;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-topcap .kit-name{
  display:block; margin:0 0 2px;
}
body:not(.senshi--moon) .senshi-art .kit--suite .ks-topcap .kit-note{
  display:block; max-width:none;
}


/* ==========================================================================
   222. AN ARC WITH ATTACKS AND NOTHING TO TRANSFORM WITH   (18 Sep 2026)
   ==========================================================================
   Ashley: "saturn's two videos in sailor stars need to be next to each other,
   not on top."

   Hotaru's Stars panel holds Silence Wall and Silence Glaive Surprise and no
   transformation, so section 133 - which pins every .km--attack to column 2
   so attacks line up down the arcs - stacked them both in that one column and
   left column 1 empty. 133 says in as many words that this is its intended
   reading ("nothing new to transform with this arc"). She would rather have
   the row, so the row wins here.

   THE CONDITION, NOT THE GIRL. The selector asks whether the list has a
   transformation in it at all. It does not mention Saturn, Stars, or a panel
   number. Counted across the wing: twelve panels are one transformation and
   one attack, one is two and two (Mars, arc 1), and exactly one - this one -
   is attacks with no transformation. So this changes that single panel today
   and will do the same for any attacks-only season added later, while the
   thirteen that carry a transformation keep 133 exactly as it was.

   grid-column:auto rather than an explicit 1 and 2. With 133's
   grid-auto-flow:row dense already on the list, auto lets the two cards take
   the next free cells in order - column 1 then column 2 - which is the same
   picture with none of the arithmetic, and which degrades to a single stacked
   column by itself under the 640px rule below, where there is only one track
   for auto to find. Measured at 390px to confirm that rather than assumed. */
.senshi-art .ka-moves .km-list:not(:has(.km--item)) .km.km--attack{
  grid-column:auto;
}


/* ==========================================================================
   223. TWO GALLERIES IN ONE THREAD, ONE DOWN EACH SIDE   (18 Sep 2026)
   ==========================================================================
   Ashley: "two galleries for the haruka... shared thread. first will be for S
   images, and the next for stars... alternate the orientation of the
   galleries" - and, asked what orientation meant, she picked opposite sides of
   the text rather than different crops.

   Everything about the thread picture up to now assumed there was one of them.
   Section 145 floats .thread-shot right and section 189 pins it to 341px; both
   are written in the singular. A second gallery in the same box needs a side
   of its own and needs to keep out of the first one's way.

   THE CLEAR IS THE LOAD-BEARING LINE, not the float. Two floats in one block
   do not alternate down the page - they stack up alongside each other for as
   long as there is room. Without the clear, a tall S gallery and a Stars
   gallery end up level with each other, one on each side, with the paragraphs
   crushed into a column between them. And it must be `clear:both`, not
   `clear:left`: the thing the left-hand gallery has to clear is the RIGHT-hand
   one above it.

   THE MARGINS MIRROR. 145 gives the right-floating shot `margin:0 0 14px 22px`
   - space on its left, where the text is. A left-floating one needs that gap
   on its right instead, or the words run into the picture.

   NOTHING IS PINNED TO A GUARDIAN OR AN ARC. The selector is "a thread shot
   that has been marked as the left-hand one", so any thread that ever carries
   two galleries gets this, and a thread with one keeps 145 exactly as it was.

   BELOW 700px BOTH OF THEM UNFLOAT ALREADY, because 145's media query catches
   every .thread-shot. The only thing to add down there is that the clear stops
   mattering once nothing floats, and the bottom margin wants evening up so the
   two galleries sit the same distance from their text. Measured at 390px. */
.senshi-art .thread-body > .thread-shot--left{
  float:left;
  margin:0 22px 14px 0;
}
/* a second gallery starts below the first, never beside it */
.senshi-art .thread-body > .thread-shot--left,
.senshi-art .thread-body > .thread-shot ~ .thread-shot{
  clear:both;
}
@media (max-width: 700px){
  .senshi-art .thread-body > .thread-shot--left{
    float:none; margin:0 auto 12px;
  }
}


/* ==========================================================================
   224. THREAD GALLERIES BECOME SLIDESHOWS                  (18 Sep 2026)
   ==========================================================================
   Ashley: "I think I'd like to replace the style we have for all the profiles
   with that one" - the arc console's gallery - and then "just committ please".

   WHY, IN ONE NUMBER: a row of identical dots does not scale. Measured on
   Hotaru's S gallery as it grew, the dots come out 9px across at 23 frames and
   5px at 31, and 3px on a phone. The landing page's component answers that
   with a thumbnail strip you can aim at, a counter, a progress bar and arrows
   with real hit targets, and it stops caring how many frames there are.

   NEARLY ALL OF THIS ALREADY EXISTED. js/slideshow.js drives any
   [data-slideshow] on any page; every .slideshow rule in this file is scoped
   to .senshi-art, not to the landing page; section 218 already built a thread
   variant. This section only adds the frame shape for galleries of PHOTOS.

   .ss--photo AGAINST 218's .ss--thread. 218 is for upright watercolours -
   3/4 portrait, object-fit:contain, cream matte - so tall paintings are never
   cropped. The galleries converted here are the opposite case: screencaps and
   scans already cropped to a single landscape-ish ratio, where a 3/4 contain
   frame would put cream bars down both sides of every one. Both variants now
   exist and neither touches the arc console.

   --ss-ar IS SET INLINE, per gallery, from the frames themselves. A gallery
   cropped to some other shape later gets a frame that fits without anyone
   coming back here. The fallback is the shape the galleries built today share.

   THE WIDTH IS 341px BECAUSE THAT IS WHAT THEY MEASURE NOW. Section 189
   pinned .thread-shot:has(.thread-cycle) to 341; 218's carousel uses 300.
   Changing the control should not also shrink every picture by 12%, so the
   number that survives is the one already on the page. */
/* THE PIN GOES ON THE SHOT, NOT ONLY ON THE GALLERY. Section 189 pinned
   `.thread-shot:has(.thread-cycle)` to 341px, and that selector stops matching
   the moment the cycler becomes a slideshow - so the shot falls back to 145's
   `max-width:min(42%, 340px)` and every gallery on the wing renders 323px
   instead of 341. Measured, after I had already written a paragraph in this
   section about not letting the swap shrink the pictures: setting the width on
   the inner .slideshow cannot beat a max-width on its parent. So the `:has()`
   pin is restated for the new class, and the gallery inside it fills it. */
.senshi-art .thread-body > .thread-shot:has(.ss--photo),
.senshi-art .thread-body > .thread-shot:has(.ss--fit){
  width:341px; max-width:341px;
}
.senshi-art .thread-shot > .ss--thread.ss--photo{
  width:100%; max-width:100%;
}
.senshi-art .ss--thread.ss--photo .ss-frame{
  aspect-ratio:var(--ss-ar, 760 / 699);
  background:#0c0b14;
}
.senshi-art .ss--thread.ss--photo .ss-img{
  object-fit:cover;
}

/* AND THE GALLERIES WHOSE FRAMES DO NOT AGREE. Usagi's threads were built
   before the one-shape rule, and her Silver Crystal pair measures 0.898 and
   0.637 - a fixed frame would either crop a third off one or letterbox the
   other. Cropping her existing pictures is not a side effect a style swap
   gets to have, so a mixed gallery keeps every pixel: `contain`, a frame at
   the geometric mean of its own frames' ratios (the shape that wastes least
   across the set), and 218's cream wash rather than the film matte, because
   the bars are going to show. The converter picks this class by measuring;
   nobody tags a gallery by hand. */
.senshi-art .ss--thread.ss--fit .ss-frame{
  aspect-ratio:var(--ss-ar, 3 / 4);
  background:color-mix(in srgb, var(--fuku-a,#7c3674) 5%, #fffefa);
}
.senshi-art .ss--thread.ss--fit .ss-img{
  object-fit:contain;
}
.senshi-art .thread-shot > .ss--thread.ss--fit{
  width:100%; max-width:100%;
}
@media (max-width: 700px){
  /* down here section 145 unfloats every thread shot and centres it, so the
     gallery lets go of its pin exactly as the old cycler did (section 189). */
  .senshi-art .thread-body > .thread-shot:has(.ss--photo),
  .senshi-art .thread-body > .thread-shot:has(.ss--fit){
    width:min(300px, 82%); max-width:none;
  }
}


/* ==========================================================================
   225. A LANDSCAPE HENSHIN POSE IN THE OTHER DOSSIER   (19 Sep 2026)
   ==========================================================================
   Chibiusa's transformation frame is 16:9 where the other five are 4:3, and it
   came out 702x936 from a 1200x675 file - letterboxed into a tall box with
   empty bands above and below it.

   This is a solved problem that did not reach her. Section 874 puts
   `aspect-ratio:3/4` on every `.astro-plate img.art--pose`; section 8545 takes
   it back off for `.dossier-pose--inbox`, and says in its own comment that it
   is clearing a rule which "forces 3/4 on a landscape frame". But her dossier
   is the other variant - `.dossier-pose--head`, inside `.dossier-head`, with a
   pose-note caption - so she never got the correction.

   Extending the fix rather than moving her pose. Restructuring her dossier to
   match the inners is a far bigger change than a widescreen frame justifies,
   and the --head placement is arguably better for her: the picture is larger
   there and it carries a caption the built five have nowhere to put.

   Specificity is (0,4,1), the same as the --inbox rule it mirrors, so it
   clears section 874's (0,3,1) on its own rather than by being last. */
.senshi-art .dossier-pose--head .astro-plate img.art--pose,
.senshi-art .dossier-pose--head .astro-plate .ph--pose{
  aspect-ratio:auto;
  width:100%; height:auto; max-width:none;
  margin:0; display:block; object-fit:contain;
}


/* ==========================================================================
   226. A PICTURE ON TOP OF A KIT CARD, NOT BESIDE IT          (19 Sep 2026)
   ==========================================================================
   Three of Chibiusa's kit cards had no picture at all - the Space-Time Key,
   the Stallion Reve and Luna-P - and she sent one for each.

   THE INHERITED CARD IS A FLEX ROW: picture left, words right, which is right
   for the sprite cards it was built for, where the note is a sentence or two.
   These three are not those cards. They came out of chibi_kit_fold.py, which
   folded four long feature blocks into the kit, so their notes run 600+
   characters - and the "and throughout" row is a three-column grid whose cards
   measure 243px wide. Rendered and measured, not guessed: 243x306 to 243x474.
   A picture beside 600 characters inside 243px leaves a column of prose about
   nine characters across.

   SO THE PICTURE GOES ON TOP. Stacked it costs the card ~184px of height and
   no width at all, and the note keeps the full 243px it already had.

   A MODIFIER, NOT A REDEFINITION. `.kit--stack` is put on by the placement
   script only for cards that get this treatment, so the three sprite cards
   above - Prism Heart Compact, Pink Moon Stick, Crystal Carillon - stay the
   rows they read fine as. Specificity ties with the `.senshi-art .kit` rule at
   line 1644 (both 0,2,0) and wins on order, which is what appending at the end
   of the file is for.

   .kit-still, NOT .kit-sprite. The two anime frames are photographs of a
   moment, not pixel art: no `image-rendering:pixelated`, no integer scale, and
   the site's standard picture frame - 2px backbow border, 3px hard frontbow
   shadow - the same one .art--arcshot and the gallery frames wear. The file
   is written at 600px for a 243px slot because the slot is 243 CSS pixels and
   the screens are 2x and 3x; `width:100%` is what pulls it back down.
   ========================================================================== */

.senshi-art .kit--stack{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.senshi-art .kit--stack > .kit-shot{
  width:100%; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.senshi-art .kit-still{
  display:block; width:100%; height:auto; margin:0;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow);
  background:#fffdf6;
}


/* ==========================================================================
   227. CHIBIUSA'S KIT PANELS TAKE USAGI'S FOUR-VIDEO LAYOUT   (19 Sep 2026)
   ==========================================================================
   Ashley: "Layout SuperS items and videos like we did on Sailor Moon's profile
   when there were 4 videos to share for a season."

   THE LAYOUT SHE MEANS IS THREE RULES DEEP, and all three are on Usagi's page
   already, scoped to it:

     section 209   the panel is a two-column grid with `grid-auto-rows:1fr`,
                   so the cards in a row end level instead of one of them
                   sitting in a hole
     section 205   the card is ONE column - video on top at full width and 4:3,
                   the words underneath
     section 204   the object lives inside the caption: floated left with the
                   prose running round it on a brooch, or standing in a
                   right-hand lane on a wand. Her rule, in her words: "if the
                   image is a brooch, place it to the left of the text and wrap
                   around.... if it's a wand, place it to the right of the
                   text... no wrap."

   WHY THIS IS A NEW SECTION AND NOT A SCOPE EDIT. Those rules read
   `.senshi--moon ...`, 168 groups of them, and the house rule here is that CSS
   is appended at the end of the file rather than reached back into. So the
   half-dozen that make the layout are restated for `body.senshi--chibimoon`.
   The rest of Usagi's kit CSS - her flipping compacts, her breakout wand, her
   per-file sprite sizes - stays hers.

   SPECIFICITY IS WHY EVERY SELECTOR HERE CARRIES `body` AND `.ka-items`.
   A parallel family already applies to this page, scoped
   `body:not(.senshi--moon) .senshi-art .ka-items .kit--merged ...`, which is
   (0,4,1) - and it is the one that laid these cards out as three side-by-side
   columns this morning. `.senshi--chibimoon .senshi-art .kit--merged` would be
   (0,3,0) and would lose to it silently: nothing errors, the page just keeps
   the old shape. Matching its `body` and its `.ka-items` puts these at (0,4,1)
   or better, and appending puts them last, so they win on order.

   THE PHOTOGRAPHS NEEDED A WIDTH AND THE SPRITES DID NOT. Two of these eight
   objects are broadcast frames written at 600px for a 243px slot that no
   longer exists; floated into a 360px card at their own size they would run
   off the end of it. The sprites are pixel art at an integer scale and must
   keep their own pixels, so the width is put on `.kit-still` alone.
   ========================================================================== */

/* ---- the panel: two across, and a row ends level ---- */
body.senshi--chibimoon .senshi-art .ks-panel .ka-items.ka-merged{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:1fr;
  gap:14px;
}

/* ---- the card: video on top, words under ---- */
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged,
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged.kit--novid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto minmax(0, 1fr);
  margin:0; width:100%; max-width:none;
}
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kmx-vids,
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap{
  grid-column:1;
}
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kmx-vids .km-vid{
  width:100%; height:auto; aspect-ratio:4 / 3;
}
/* the caption takes the slack, so a short card meets the video and runs to the
   bottom of its cell rather than leaving a band of bare doily above it -
   section 209's reasoning, and the same one line of it */
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap{
  margin-top:10px;
}

/* ---- a brooch floats and the prose wraps round it ---- */
/* flow-root, not block: it restores normal flow for the text AND contains the
   float, so an object taller than its prose stops at the bottom of the cream
   panel instead of hanging out of it. The name and note are spans and are
   blockified outright here, because flow-root will not do it for them - the
   mistake section 204 records making. */
body.senshi--chibimoon .senshi-art .ka-items .kit--wrap > .kit-cap{
  display:flow-root;
}
body.senshi--chibimoon .senshi-art .ka-items .kit--wrap > .kit-cap > .kit-name,
body.senshi--chibimoon .senshi-art .ka-items .kit--wrap > .kit-cap > .kit-note{
  display:block;
}
body.senshi--chibimoon .senshi-art .ka-items .kit--wrap > .kit-cap > .kit-shot{
  float:left; clear:left;
  width:auto; max-width:none; min-height:0; height:auto;
  margin:3px 12px 2px 0; padding:0;
  display:grid; place-items:center;
}

/* ---- a wand stands in its own lane, text unwrapped ---- */
body.senshi--chibimoon .senshi-art .ka-items .kit--lane > .kit-cap{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:10px;
}
body.senshi--chibimoon .senshi-art .ka-items .kit--lane > .kit-cap > *{
  grid-column:1;
}
body.senshi--chibimoon .senshi-art .ka-items .kit--lane > .kit-cap > .kit-shot{
  grid-column:2; grid-row:1 / 99; align-self:end;
  width:auto; max-width:none; min-height:0; height:auto; padding:0;
}

/* ---- the two photographs, sized; the sprites keep their own pixels ---- */
body.senshi--chibimoon .senshi-art .ka-items .kit-cap .kit-still{
  width:140px; height:auto; display:block; margin:0;
}

@media (max-width: 760px){
  /* one column, and a wand in a 320px panel would leave four words a line, so
     the lane collapses and its object goes above the words - the retreat
     section 204 makes on Usagi's page. A floated brooch still reads fine. */
  body.senshi--chibimoon .senshi-art .ks-panel .ka-items.ka-merged{
    grid-template-columns:minmax(0, 1fr);
    grid-auto-rows:auto;
  }
  body.senshi--chibimoon .senshi-art .ka-items .kit--lane > .kit-cap{
    grid-template-columns:minmax(0, 1fr);
  }
  body.senshi--chibimoon .senshi-art .ka-items .kit--lane > .kit-cap > .kit-shot{
    grid-column:1; grid-row:auto; justify-self:center;
  }
}


/* ==========================================================================
   228. THE CAPTION HAS TO TAKE THE SLACK                      (20 Sep 2026)
   ==========================================================================
   FOUND BY RENDERING, not by reading. Adding the dream-world clip to the
   Stallion Reve card made it the tallest in the SuperS panel - long note plus
   a video plus a move block - and because section 227 gives the panel
   `grid-auto-rows:1fr`, every card in it grew to match: 618px to 951px. The
   two short cards then showed ~250px of bare doily under their cream panels.
   A hole, and the opposite of the uniform boxes the 1fr was for.

   SECTION 209 ALREADY SOLVED THIS ON USAGI'S PAGE and said so in its own
   comment: "the rows are stated instead - video at its own height, caption
   taking everything left - so the panel meets the video and runs to the bottom
   of the card." Section 227 copied the stated rows. What it did not copy is
   the thing that lets them work.

   THE ONE LINE THAT WAS MISSING IS `align-items`. The parallel family scoped
   `body:not(.senshi--moon)` sets `align-items:start` on the merged card, so
   every grid item shrink-wrapped to its own content and the 1fr row stretched
   underneath an unstretched caption. `grid-template-rows` was doing its job;
   the caption simply declined to fill the row it was given.

   Stated for the caption itself rather than on the card, so the video panel
   above it keeps its own height and only the words stretch - which is what
   209 describes.
   ========================================================================== */

body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged{
  align-items:stretch;
}
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kmx-vids{
  align-self:start;
}


/* ==========================================================================
   229. CHIBIUSA'S BROOCH OPENS AND CLOSES TOO                 (20 Sep 2026)
   ==========================================================================
   Ashley sent the Crisis Compact as a pair - "its the brooch opening and
   closing" - which is the component Usagi's compacts already use: both frames
   in ONE grid cell, cross-fading on an 8s cycle with the second delayed 4s,
   and pinned to the closed frame when the reader asks for reduced motion.

   Three selectors, restated for this page. `@keyframes kit-flip` is global
   already, so the animation itself is not duplicated.

   `grid-area:1 / 1` IS THE WHOLE TRICK and it is why this needs no height:
   both frames occupy the same cell, so the shot is as tall as the taller of
   them and nothing jumps when they swap. Section 227 already made the wrapped
   card's shot a grid with `place-items:center`, so there is nothing else to
   set up.
   ========================================================================== */

body.senshi--chibimoon .senshi-art .ka-items .kit-shot.kit-flip .kit-flip-f{
  grid-area:1 / 1;
  animation:kit-flip 8s steps(1, end) infinite;
}
body.senshi--chibimoon .senshi-art .ka-items .kit-shot.kit-flip .kit-flip-f:nth-of-type(2){
  animation-delay:4s;
}
@media (prefers-reduced-motion:reduce){
  body.senshi--chibimoon .senshi-art .ka-items .kit-shot.kit-flip .kit-flip-f{
    animation:none;
  }
  body.senshi--chibimoon .senshi-art .ka-items .kit-shot.kit-flip .kit-flip-f:nth-of-type(2){
    opacity:0;
  }
}


/* ==========================================================================
   230. THE BOXES STOP INFLATING TO THE TALLEST CARD           (20 Sep 2026)
   ==========================================================================
   Ashley: "please fix the height of the boxes for chibi moon's 'her kit' under
   the SuperS tab. all the items are being pushed down the text boxes. Look at
   the size of the boxes and styling for the other girls to match."

   MEASURED AGAINST USAGI'S FOUR-CARD PANEL, which is the one section 227 was
   copied from: her cards render 524px with a 231px caption. Chibiusa's were
   816 with a 523px caption - more than double, from the same rules.

   TWO THINGS WERE DOING IT, and only one of them is CSS.

   1. `grid-auto-rows:1fr`. That is not "every card in a row matches"; it is
      EVERY ROW IN THE PANEL matches, so one tall card sets the height of all
      four. Section 209 could afford it because Usagi's notes are short and
      even. Here the Stallion Reve's note is 486 characters and the Crisis
      Compact's is 101, so the short cards were padded with several hundred
      pixels of nothing. `auto` sizes each row to its own content, and section
      228's stretch still levels the two cards WITHIN a row - which is what
      she actually sees.

   2. THE LANED OBJECT WAS STRANDED. `align-self:end` stands a wand on the
      floor of its caption, which is right at Usagi's 231px and wrong at 523 -
      the sprite ended up hundreds of pixels below the words it belongs to,
      which is what "the items are being pushed down the text boxes" is
      describing. It sits beside the top of its text now.

   AND THE PART THAT IS NOT CSS, said here so it is not lost: her two longest
   kit notes are 696 and 670 characters (the Space-Time Key and Luna-P), where
   Usagi's longest is 230. Those two came out of chibi_kit_fold.py, which
   folded paragraph-length feature blocks into a component built for a sentence
   or two. No grid rule makes 696 characters occupy 231px. Raised with her
   rather than cut, because they are her words.
   ========================================================================== */

body.senshi--chibimoon .senshi-art .ks-panel .ka-items.ka-merged{
  grid-auto-rows:auto;
}
body.senshi--chibimoon .senshi-art .ka-items .kit--lane > .kit-cap > .kit-shot{
  align-self:start;
}


/* ==========================================================================
   231. THE HxH PANEL IN NAOKO'S BOX                           (20 Sep 2026)
   ==========================================================================
   Ashley: "can you add this to the naoko profile box. It's a cute easter egg
   for her husband's manga."

   It sits in the bio column of #naoko, directly under the paragraph that says
   she married Togashi and names Hunter x Hunter.

   IT IS AN nk-photo, so everything that shapes the portrait - the 300px width
   from section 226, the rounded border, the shadow, the rainyhearts caption -
   already applies and is not restated here. Two declarations are all this
   needs.

   IT IS NOT FLOATED, AND THE RENDER IS WHY. Floating it right reads correct on
   paper and is wrong on screen: the chart is itself a right float 557px wide
   and it runs past the end of this paragraph, so a second right float cannot
   reach the edge - it stacks against the chart's left side. Rendered, that put
   the panel in the middle of the column with a 185px ribbon of text down the
   outside. As a block it sits at the left margin, in the same 300px channel as
   the portrait above it.

   THE TILT IS 1.5 DEGREES, which is under half the width of the border. It
   reads as a panel set down on the page rather than a second portrait, and it
   costs no layout at all: a rotated element keeps its original box, so the
   column is unchanged and nothing below it moves.
   ========================================================================== */

#naoko .nk-duo-l .nk-photo--egg{
  margin:4px 0 16px;
  transform:rotate(1.5deg);
}


/* ==========================================================================
   232. CHIBIUSA'S "ELSEWHERE" IS SWITCHED OFF                 (20 Sep 2026)
   ==========================================================================
   Ashley: "chibi moon's elsewhere needs updating" - then "just removal
   actually".

   THE SAME SHAPE AS SECTION 120, which does this for #variations: the writing
   stays in the file and a class hides the block, so putting it back is one
   word rather than a rebuild. Her four drops - Black Lady, Crystal, the dub,
   SuperS - are all still in chibi-moon.html.

   Its jump chip takes `jump-link--off`, section 121's existing class, because
   a chip pointing at a display:none block is a link to nowhere. Her page now
   carries two of those: variations, and this.

   HOTARU'S IS STILL ON. She has the only other #elsewhere on the wing and
   Ashley named one page, so it is untouched - worth knowing the two were a
   matched pair until today.
   ========================================================================== */

.senshi-art #elsewhere.elsewhere--off{ display:none; }


/* ==========================================================================
   233. MAMORU'S ASTROLOGY BLOCK KEEPS A READING MEASURE     (20 Sep 2026)
   ==========================================================================
   Ashley: "instead of a dignity table... create a small astrology section for
   him using this information."

   He has no planet, so he gets no dignity plate. What he gets instead is three
   `dg-card`s in a bare `dglist` - the same components every other profile uses
   to land a piece of astrology back on the character, which is the job here
   too.

   ONE RULE, AND THE RENDER IS WHY IT EXISTS. On the built pages these cards
   sit inside `dgplate-cols`, a two-column grid, so each card gets about 550px
   and the lines are a normal length. With no plate around them they took the
   whole block: 1174px, roughly 130 characters to the line. The `arc-lede`
   above them carries `max-width:64ch` of its own, so the lede wrapped early
   and the body ran full-bleed underneath it - the mismatch was the thing that
   looked wrong, more than the width itself.

   68ch, not 64: these are prose paragraphs rather than a one-line lede, and
   matching the lede exactly made the two read as one column of the same
   thing.

   SCOPED TO HIS PAGE. No other profile has a plateless dglist, and if one ever
   does it should decide its own measure rather than inherit his.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art #astrology .dglist{
  max-width:68ch;
}


/* ==========================================================================
   234. MAMORU'S KEY ART IS NOT A BUST                        (20 Sep 2026)
   ==========================================================================
   `bio-run-shot` was built around a bust sprite: Chibiusa's is 315x314 and
   Hotaru's 315x449, roughly square, and the slot lets a picture take up to
   min(46%, 380px) of the row.

   His holds the framed key art instead, which is a tall portrait. At 380px
   wide it renders 819 tall - more than twice Chibiusa's - and it dragged
   #profile to 2089px against her 1182.

   THE CAP IS ON HEIGHT. Capping the width instead would just make a tall thin
   sliver of the same problem. 450px is Hotaru's 449 rounded up, so his card
   lands in the same band as the tallest of the built ones, and `width:auto`
   lets it keep its own shape rather than being squashed into a bust's.

   Scoped to his page: nobody else has key art in this slot, and if another
   profile ever does it should pick its own ceiling.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .bio-run-shot .card img{
  max-height:450px;
  width:auto;
}


/* ==========================================================================
   235. THE EARTH IS NOT CROPPED TO 16:9                      (20 Sep 2026)
   ==========================================================================
   Ashley: "reuse the earth picture i sent for the astrology section".

   `.dg-card .dg-pic` states `aspect-ratio:16/9` with `object-fit:cover`, and
   that is right for the dignity plates: those are wide broadcast frames and a
   fixed ratio is what keeps a six-card plate even.

   Her earth frame is 760x574. In his 544px card column, 16:9 crops 105px out
   of the middle of it - and the subject is a sphere, so the crop takes the top
   and the bottom off the planet. A no-crop picture is the house rule for a
   lone illustration; this is that.

   THE PATTERN ALREADY EXISTS. `.senshi-art .dgcond > .dg-pic` sets
   `aspect-ratio:auto; object-fit:fill` for the condition card for exactly this
   reason. Restated here for his page, which has one card with a picture and no
   plate for it to stay even with.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .dg-card .dg-pic{
  aspect-ratio:auto;
  object-fit:fill;
}


/* ==========================================================================
   236. MAMORU'S KIT: A DEAD SEASON STRIP AND ROOM FOR VIDEO  (20 Sep 2026)
   ==========================================================================
   Ashley: "add all the season logos back, but just make them inactive or
   smth", and "i'll be adding videos so fix the layout to hold them".

   THE STRIP IS NOT A CONSOLE. His kit is one arc block, so there is nothing
   for a tab to switch to. The markup is <span>s rather than the usual
   <label for="kits-N">, because a label pointing at no input is a control that
   looks live and is not. `ks-tab--static` says that in the class name and
   styles it as a plate rather than a button: no hover, no pointer, no focus
   ring, and `pointer-events:none` so it cannot be clicked at all.

   IT IS NOT `ks-tab--none`. That class already exists and would have been the
   easy reuse, but it means "she is not in this season" - the opposite of what
   this strip says. He is in all five, which is why she wanted them back.

   THE VIDEO SLOTS ARE EMPTY ON PURPOSE. `.km-vid` with no `data-yt` draws the
   dark 4:3 frame and js/moves.js leaves it alone, so the space is reserved and
   nothing broken renders. Sized here to sit under the caption in an item card
   and beside the text in a move card, which is where they land once filled.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .ks-console--static .ks-index{
  pointer-events:none;
}
body.senshi--tuxedomask .senshi-art .ks-tab--static{
  cursor:default;
  opacity:.72;
  filter:saturate(.55);
}
body.senshi--tuxedomask .senshi-art .ks-static-note{
  margin:8px 0 0; text-align:center;
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.4px;
  text-transform:lowercase; color:var(--head); opacity:.7;
}

/* ---- room for the clips ---- */
body.senshi--tuxedomask .senshi-art .ka-items .kit--item{
  display:flex; flex-direction:column;
}
/* WIDTH STATED, NOT INHERITED. Rendered, three of the four slots came out
   5.3px wide and the fourth 236 - and the fourth was the star locket, the only
   item with a real sprite rather than a narrow placeholder. So the card's flex
   column was not stretching its children, and `width:100%` on an unstretched
   block resolved against nothing. The three placeholder cards shrank to
   min-content; the locket's looked fine by accident. Stated on both the
   wrapper and the frame so neither depends on the other. */
body.senshi--tuxedomask .senshi-art .ka-items .kmx-vids{
  grid-column:auto; margin-top:10px;
  width:100%; align-self:stretch;
}
body.senshi--tuxedomask .senshi-art .ka-items .kmx-vids .km-vid{
  width:100%; height:auto; aspect-ratio:4 / 3;
}
body.senshi--tuxedomask .senshi-art .km-list .km{
  align-items:flex-start;
}
body.senshi--tuxedomask .senshi-art .km-list .kmx-vids{
  grid-column:auto; margin-top:8px;
}
body.senshi--tuxedomask .senshi-art .km-list .kmx-vids .km-vid{
  width:220px; height:165px;
}


/* ==========================================================================
   237. HIS KIT IS A 2x2                                      (20 Sep 2026)
   ==========================================================================
   Ashley: "right, but make it a 2x2 layout please".

   `.ka-items` is `repeat(auto-fill, minmax(240px,1fr))`, which at the block's
   1118px gives FOUR columns - so his four items came out in one thin row, each
   card 258px wide with a 236px video slot under it. Two columns give about
   550px a card, which is the width a clip actually wants.

   STATED AS TWO, NOT AS A WIDER minmax. Raising the minmax to 400px would also
   produce two columns today and silently become one on a narrower block or
   three on a wider one. She asked for a 2x2; this says 2.

   THE MOVES FOLLOW. There are two of them, so two columns is the same row they
   were already in - but stating it keeps them in step with the items above if
   a third move ever arrives.

   AND IT COLLAPSES ON A PHONE. Below 700px two 550px columns do not fit, so it
   goes to one and the cards stack. Same breakpoint the bio rows use.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .ka-items{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* AND THE CARD FILLS ITS COLUMN. Measured after the two columns were set:
   `.ka-items` was 1086 wide with two 534px tracks, exactly as asked - but the
   cards rendered 380, leaving 154px of gap down the right of each one. A
   `.kit` max-width further up the sheet was winning over `.ka-items .kit
   {max-width:none}`. Stated on the card rather than hunted for upstream,
   because this scope is his page and undoing someone else's ceiling site-wide
   is a bigger change than she asked for. */
body.senshi--tuxedomask .senshi-art .ka-items .kit--item{
  width:100%; max-width:none;
}
body.senshi--tuxedomask .senshi-art .km-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 18px;
  align-items:start;
}

@media (max-width:700px){
  body.senshi--tuxedomask .senshi-art .ka-items,
  body.senshi--tuxedomask .senshi-art .km-list{
    grid-template-columns:1fr;
  }
}


/* ==========================================================================
   238. HIS KIT CARDS WRAP, LIKE USAGI'S                      (20 Sep 2026)
   ==========================================================================
   Ashley: "follow the same pattern of wrapping the text around the sprite
   within the same box. check moon's profile to see the pattern."

   Section 175's own sketch in this file shows `.kit--wrap` beside
   `.kit--lane`: wrap floats the object left and runs the prose around it.
   Those rules are scoped `.senshi--moon`, so they are restated here for him -
   the same thing section 227 did for Chibiusa.

   THIS UNDOES ONE RULE FROM SECTION 236, on purpose. That section made his
   cards `display:flex; flex-direction:column` to stack shot, caption and
   video. A flex item cannot be floated, so the flex column and a wrapping
   float cannot both be true. `flow-root` replaces it: it contains the float
   the same way, and the video still falls below the text because it is the
   next block in normal flow.

   THE PLACEHOLDER FLOATS TOO. Three of his four objects are still
   `ph--kitshot` boxes rather than sprites, and a placeholder that does not
   float would leave those three cards looking like a different component from
   the star locket's. It gets the same treatment, so the layout is already
   right when she drops the real sprites in.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .ka-items .kit--item{
  display:flow-root;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap{
  display:flow-root;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap > .kit-shot{
  float:left; clear:left;
  width:auto; max-width:45%; min-height:0; height:auto;
  margin:2px 12px 4px 0; padding:0;
  display:grid; place-items:center;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap > .kit-name,
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap > .kit-note{
  display:block;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kmx-vids{
  clear:both;
}


/* ==========================================================================
   239. THE KEY ART FOLLOWS THE SHORTER TEXT                  (21 Sep 2026)
   ==========================================================================
   Ashley: "shorten and condense the how earth shines through section".

   Section 234 capped this picture at 450px so it would not run to 819 beside
   three paragraphs. The condense took the text from 503px to 289, and the
   picture - now the tallest thing in the box - was setting the section's
   height by itself, with about 180px of empty paper under the prose. The
   section she asked to shrink had shrunk by less than half of what the words
   had.

   320 is Chibiusa's bust height (346) brought down to sit just above his
   289px of text. Same rule as 234, a lower number; 234 stays in the file so
   the reasoning for capping by height rather than width is not lost.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .bio-run-shot .card img{
  max-height:320px;
}


/* ==========================================================================
   240. MAMORU'S ASTROLOGY: PICTURE LEFT, ARGUMENT RIGHT      (21 Sep 2026)
   ==========================================================================
   Ashley: "redo the layout of the hellenistic astrology section... set it up
   so it's clean easy to read and use the earth picture again".

   Replaces the single 68ch column of section 233 and the in-card picture of
   235. The earth picture now belongs to the section, not to its first card:
   it stands in a left column with the lede under it as a caption, and stays in
   view while the three cards scroll beside it.

   THE TIE LINES GET A CALLOUT. Every card ends with the sentence that lands
   the astrology on Mamoru. Set in the same ink as the prose they disappeared;
   in a tinted box with the front-bow rule down the left they become the thing
   a skimming reader reads - three bold lines that are the whole argument.

   Cards are separated by a dashed rule and a real gap rather than running
   together, and each heading is set a step larger than the prose under it.

   Below 760px it is one column: picture first at a readable width, then the
   cards, and nothing sticks.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .earthplate{
  display:grid;
  grid-template-columns:minmax(0, 340px) minmax(0, 1fr);
  gap:30px;
  align-items:start;
  margin-top:6px;
}
body.senshi--tuxedomask .senshi-art .earthplate-pic{
  margin:0;
  position:sticky; top:18px;
}
body.senshi--tuxedomask .senshi-art .earthplate-pic img{
  display:block; width:100%; height:auto;
  border:3px solid var(--backbow);
  box-shadow:4px 4px 0 var(--frontbow);
  background:#0d1830;
}
body.senshi--tuxedomask .senshi-art .earthplate-pic .arc-lede{
  display:block; margin:12px 2px 0; max-width:none;
  font-size:12px; line-height:1.7; opacity:.8;
}
body.senshi--tuxedomask .senshi-art #astrology .earthplate-list{
  max-width:62ch; margin:0;
}
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-card{
  padding:0;
}
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-card + .dg-card{
  margin-top:22px; padding-top:20px;
  border-top:1px dashed var(--backbow);
}
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-card dt{
  margin:0 0 8px;
  font-size:15px; letter-spacing:.5px; opacity:1;
}
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-why{
  display:block; opacity:.9;
}
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-tie{
  display:block;
  margin-top:12px; padding:10px 14px;
  border-top:0;
  border-left:3px solid var(--frontbow);
  border-radius:0 6px 6px 0;
  background:var(--wash, #f6f2fc);
}

@media (max-width:760px){
  body.senshi--tuxedomask .senshi-art .earthplate{
    grid-template-columns:1fr; gap:18px;
  }
  body.senshi--tuxedomask .senshi-art .earthplate-pic{
    position:static; max-width:420px; margin:0 auto;
  }
}

/* 240, second pass, after the render. Two things read badly:
   - the 62ch cap left ~250px of bare paper down the right-hand side. The
     picture column widens to 400 and the cards take everything left, which
     is about 70ch at this size - still a comfortable measure.
   - the card headings rendered at the old tiny size: an earlier rule with an
     id in it outranked mine. Restated with #astrology so they read as
     headings, a clear step above the prose. */
body.senshi--tuxedomask .senshi-art .earthplate{
  grid-template-columns:minmax(0, 400px) minmax(0, 1fr);
}
body.senshi--tuxedomask .senshi-art #astrology .earthplate-list{
  max-width:none;
}
body.senshi--tuxedomask .senshi-art #astrology .earthplate-list .dg-card dt{
  margin:0 0 8px;
  font-size:18px; line-height:1.2; letter-spacing:.6px;
  color:var(--head); opacity:1;
}


/* ==========================================================================
   241. MAMORU'S ASTROLOGY: THE PICTURE FLOATS, THE TEXT WRAPS (21 Sep 2026)
   ==========================================================================
   Ashley: "wrap the text around the image. remove the subtext under the
   image."

   Replaces the two-column grid of section 240. The earth picture floats left
   inside a flow-root box and the three short passages run round it and on
   under it. The cards lose their dashed rules and tinted callouts - the tie
   lines those styled are gone - and a rule that spans a block would have run
   straight underneath the picture anyway. Headings and space do the
   separating.

   Below 760px the float is dropped and the picture sits on top.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .earthplate{
  display:flow-root;
}
body.senshi--tuxedomask .senshi-art .earthplate-pic{
  float:left; position:static;
  width:360px; max-width:45%;
  margin:4px 26px 14px 0;
}
body.senshi--tuxedomask .senshi-art #astrology .earthplate-list{
  max-width:none; display:block;
}
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-card,
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-card + .dg-card{
  display:block; margin:0 0 18px; padding:0; border:0;
}
body.senshi--tuxedomask .senshi-art .earthplate-list .dg-card:last-child{
  margin-bottom:0;
}
body.senshi--tuxedomask .senshi-art .earthplate-list dd{ margin:0; }

@media (max-width:760px){
  body.senshi--tuxedomask .senshi-art .earthplate-pic{
    float:none; width:auto; max-width:420px; margin:0 auto 16px;
  }
}


/* ==========================================================================
   242. A VIDEO UNDER A THREAD PICTURE                        (21 Sep 2026)
   ==========================================================================
   Ashley: the Black Lady transformation for Chibiusa's Black Lady thread.

   First video in any thread. It sits inside .thread-shot, under the image,
   so it floats with the picture and the text wraps both. `.km-vid` is
   already width:100% and 4:3, so the only thing it needs here is room
   between it and the picture above.
   ========================================================================== */

.senshi-art .thread-shot .km-vid{
  margin-top:12px;
}


/* ==========================================================================
   243. HIS MOVE CARDS GIVE THE TEXT ROOM                     (21 Sep 2026)
   ==========================================================================
   Found while checking the cane: Smoke Bomb and Ground Theater were
   rendering with their names crushed into a 20px column.

   `.km` is a flex ROW that does not wrap - shot, caption, video slot side by
   side. Section 234 gave the slot a fixed 220px; section 237 then put the
   moves in two columns, so each card is about 350px wide. 96px of shot plus
   220px of video left the caption about 20px. That is my miss from 237: I
   measured the items and not the moves.

   THE FIX IS THE ITEMS' SHAPE. The row wraps and the video slot takes a whole
   line of its own under the shot and caption, full card width at 4:3 - the
   same as the four kit items above.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .km-list .km{
  flex-wrap:wrap;
}
body.senshi--tuxedomask .senshi-art .km-list .km-cap{
  flex:1 1 0; min-width:0;
}
body.senshi--tuxedomask .senshi-art .km-list .kmx-vids{
  flex:0 0 100%; width:100%;
}
body.senshi--tuxedomask .senshi-art .km-list .kmx-vids .km-vid{
  width:100%; height:auto; aspect-ratio:4 / 3;
}


/* ==========================================================================
   244. HIS KIT PICTURES SIT IN THE LOCKET'S BOX              (21 Sep 2026)
   ==========================================================================
   Ashley: crop the rose out of her anime frame and use it for the rose card.

   The cut-out is 367x400, and a kit sprite has no size of its own in the
   sheet, so it rendered at full size: twice the star locket's 180px beside
   it, and wider than the card on a phone. Every picture in his kit now fits
   a 180px box, which is the locket's size, so the cards match.

   SCOPED TO THE ROSE BY ITS FILE. The locket's PNG is 90x90 drawn at a
   declared 180 (pixel art, doubled), so a general `width:auto` shrank it to
   90. The rule names the rose's picture and leaves the pixel sprites alone.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .kit-shot .kit-sprite[src$="mamoru-rose.png"]{
  width:auto; height:auto;
  max-width:min(180px, 100%); max-height:180px;
  image-rendering:auto;
}
/* Checked at phone width: the picture column is capped at 45% of the card,
   about 117px there, and a 165px rose ran over the heading beside it. So it
   also fits its column. And `image-rendering:auto`, because kit sprites are
   drawn pixelated for the pixel art, and a scaled-down anime frame drawn that
   way comes out jagged. */


/* ==========================================================================
   245. THE HEALING FRAME IN HIS KIT                          (21 Sep 2026)
   ==========================================================================
   Ashley: "healing image crop as needed".

   An anime frame, so `.kit-still`: the framed picture, not pixel art. On its
   own `.kit-still` is width:100%, which in his wrapped cards would fill the
   45% picture column. Set to 150px so it sits at the rose's size beside it,
   and allowed to shrink to its column on a phone.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .kit--wrap .kit-shot .kit-still{
  width:150px; max-width:100%; height:auto;
}


/* ==========================================================================
   246. HIS KIT CARDS TAKE USAGI'S LAYOUT                     (21 Sep 2026)
   ==========================================================================
   Ashley: "look at the way we have the wands and broochs laid out on usagis
   page with her videos.... the text wrapping around the images and the video
   being above the text.... matchg them".

   Every number below is read off Usagi's rendered first card, not guessed:
   card 10px padding / 9px radius / 1px gold; caption panel 10px under the
   video, #fffdf6, 1px gold at 45%, 6px radius, 7px 9px padding; picture tile
   floated left, 6px padding, 1px gold at 55%, 8px radius, #f4f5f6, margin
   2px 9px 4px 0.

   The markup now puts the video first (mask_kit_usagi_layout.py), so the card
   is a plain column: video, then caption.

   THE TILE REPLACES 238's PICTURE COLUMN. 238 gave the picture up to 45% of
   the caption; now it is a tile at about 96px, which is what lets the text
   wrap around it the way hers does. 244 and 245 sized the rose and the frames
   for that old column - both are overridden here, with the same selectors
   plus the card, so this wins on specificity and not only on order.
   ========================================================================== */

body.senshi--tuxedomask .senshi-art .ka-items{
  align-items:stretch;
}
body.senshi--tuxedomask .senshi-art .ka-items .kit--item.kit--wrap{
  display:flex; flex-direction:column; align-items:stretch; align-self:stretch;
  padding:10px; border:1px solid rgb(230,200,106); border-radius:9px;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kmx-vids{
  order:0; margin-top:0; clear:none;
}
/* the caption panel fills the card to the bottom and the full width, as
   Usagi's do, so two cards in a row end level even with short text */
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap{
  flex:1 1 auto; width:auto; align-self:stretch;
  display:flow-root; margin-top:10px;
  padding:7px 9px; background:#fffdf6;
  border:1px solid rgba(230,200,106,.45); border-radius:6px;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap > .kit-shot{
  float:left; clear:left;
  width:auto; max-width:none; height:auto; min-height:0;
  margin:2px 9px 4px 0; padding:6px;
  border:1px solid rgba(230,200,106,.55); border-radius:8px;
  background:#f4f5f6;
  display:grid; place-items:center;
}
/* the pictures, at tile size */
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap > .kit-shot .kit-still{
  width:96px; max-width:none; height:auto;
  border-width:1px; box-shadow:none;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap > .kit-shot .kit-sprite[src$="mamoru-rose.png"]{
  width:auto; height:auto; max-width:96px; max-height:104px;
}
body.senshi--tuxedomask .senshi-art .kit--wrap > .kit-cap > .kit-shot .kit-sprite[src$="star-locket.png"]{
  width:90px; height:90px;
}


/* ==========================================================================
   247. TWO PICTURES IN ONE THREAD                            (21 Sep 2026)
   ==========================================================================
   Ashley sent a manga panel for the Golden Crystal thread after the anime
   frame. The thread tells both versions, so both pictures stay, stacked in
   the shot column. The second one needs room from the first.
   ========================================================================== */

.senshi-art .thread-shot img.art--threadshot + img.art--threadshot{
  margin-top:12px;
}


/* ==========================================================================
   248. THE GOLDEN CRYSTAL PICTURES CYCLE, FRAMED              (21 Sep 2026)
   ==========================================================================
   Ashley: "please frame the images, cycle through them, and wrap the text."

   Three frames: the anime crystal, the manga panel, Pegasus.

   The frame is the site's standard picture frame - 2px backbow border, 3px
   hard frontbow shadow - the one .art--arcshot and the gallery frames wear.

   BOTH FRAMES AT 4:3. The anime frame is 640x480 (4:3); the manga panel is
   766x545, a little wider. Held to one ratio the box keeps its height when it
   turns over and the wrapped text beside it does not jump. The panel loses
   about 19px off each side, none of it Mamoru or the light. Pegasus
   (828x608) loses a few pixels at the edges.

   247 (a gap between two stacked pictures) no longer applies, since only one
   shows at a time; it is left in place and matches nothing now.
   ========================================================================== */

/* Scoped by the thread's id: measured after the first publish, an older
   thread-shot rule was still winning and the frames kept their own ratios. */
.senshi-art #thread-golden-crystal .thread-shot .thread-cycle img.kb-frame{
  display:block; width:100%; height:auto;
  aspect-ratio:4 / 3; object-fit:cover;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow);
  margin:0;
}
.senshi-art .thread-shot .thread-cycle .kb-frame[hidden]{ display:none; }
.senshi-art .thread-shot .thread-dots{
  justify-content:center; margin:10px 0 0;
}
.senshi-art #thread-golden-crystal .thread-shot .thread-cycle img.kb-frame[hidden]{ display:none; }


/* ==========================================================================
   249. YOUTUBE THUMBNAILS AS POSTERS                         (22 Sep 2026)
   ==========================================================================
   Ashley: the videos with no stills showed "like a black image" before play;
   she would rather see the thumbnail. js/moves.js now puts YouTube's own
   thumbnail on those play buttons.

   hqdefault (the fallback when a video has no maxresdefault) is a 4:3 image
   with black bars baked into the top and bottom of a widescreen video - 45px
   of its 360 each side. Scaling it by 4/3 pushes the bars outside the frame,
   which .km-vid's overflow:hidden then clips. The hover zoom is restated
   so it still grows from the zoomed size.
   ========================================================================== */

.senshi-art .kmv-poster--hq{
  transform:scale(1.34);
}
.senshi-art .kmv-play:hover .kmv-poster--hq,
.senshi-art .kmv-play:focus-visible .kmv-poster--hq{
  transform:scale(1.4);
}


/* ==========================================================================
   250. THE HUNTER x HUNTER PANEL WRAPS ITS TEXT              (22 Sep 2026)
   ==========================================================================
   Ashley: "can you sit this inside the box better? wrap the text around it".

   231 made the panel a block because, floated right, it ran into the chart
   column - also a right float. `clear:right` answers that: the panel starts
   below the chart, on the right, and the Togashi paragraph and "She is still
   drawing" run down its left side. It moved to before the Togashi paragraph in
   the markup, since a float only wraps what follows it. 260px keeps two
   paragraphs' worth of text beside it rather than a sliver.
   ========================================================================== */

#naoko .nk-duo-l .nk-photo--egg{
  float:right; clear:right;
  width:260px; max-width:42%;
  margin:6px 0 14px 22px;
}
#naoko .nk-duo-l .nk-photo--egg img{ width:100%; height:auto; }
#naoko .nk-duo-l::after{ content:""; display:block; clear:both; }
@media (max-width:700px){
  #naoko .nk-duo-l .nk-photo--egg{
    float:none; width:min(260px, 82%); max-width:none; margin:4px auto 16px;
  }
}


/* ==========================================================================
   251. NAOKO: THE CARD ON TOP, THE CHART NOTES FOLDED        (22 Sep 2026)
   ==========================================================================
   Ashley: picture, facts, chart and placements "grouped together at the top",
   and "about this chart" at the bottom - "it's important to keep, but it's
   overshadowing the actual profile text". She chose the fold.

   `.nk-top` is the card: photo + facts in a 300px column, the wheel and the
   placements beside it. The old float rules on .nk-duo-r (a 557px right
   float) are neutralised inside the card, because the card is a grid now.

   `.nk-about` is a native <details>: closed by default, one click opens it,
   no script. Its summary reads like the drawer pulls on the profile pages -
   the same small pixel type, a triangle that turns when it opens.
   ========================================================================== */

#naoko .nk-top{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:22px;
  align-items:start;
  margin:14px 0 22px;
}
#naoko .nk-top-l .nk-photo{ margin:0 0 14px; width:300px; max-width:100%; }
#naoko .nk-top-l .nk-stats{ margin:0; }
#naoko .nk-top .nk-duo-r{
  float:none; width:auto; margin:0;
  display:block;
}

/* a site-wide <details> style gives every details a graph-paper plate and
   a frame; measured on the first render and switched off here, so the fold
   is a plain line with its pull-tab and not a second box inside the box */
#naoko .nk-about{
  clear:both;
  margin:22px 0 0;
  background:none; box-shadow:none; border-radius:0;
  border:0; border-top:1px dashed var(--backbow);
  padding:14px 0 0;
}
#naoko .nk-about > summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex; align-items:center; gap:8px;
  font-family:rainyhearts, monospace; font-size:13px; letter-spacing:.04em;
  color:var(--accent);
  padding:6px 12px;
  border:1px solid var(--backbow); border-radius:6px;
  background:#fdfcff;
}
#naoko .nk-about > summary::-webkit-details-marker{ display:none; }
#naoko .nk-about > summary::before{
  content:"\25B8"; display:inline-block; transition:transform .2s ease;
}
#naoko .nk-about[open] > summary::before{ transform:rotate(90deg); }
#naoko .nk-about > summary:hover,
#naoko .nk-about > summary:focus-visible{ background:#f6f2fc; }
#naoko .nk-about .nk-chart--notes{ margin-top:12px; }
#naoko .nk-about .nk-notes-col{ margin:0; }

@media (max-width:760px){
  #naoko .nk-top{ grid-template-columns:minmax(0,1fr); gap:16px; }
  #naoko .nk-top-l .nk-photo{ margin:0 auto 14px; }
}


/* ==========================================================================
   252. THE TOGASHI GALLERY                                   (22 Sep 2026)
   ==========================================================================
   Ashley sent two photos of Takeuchi and Togashi for beside the Togashi
   paragraph. The Hunter x Hunter panel there (250) is now the third frame of
   a slideshow. Same float as 250 - right, clear:right, 260px - and on a phone
   it drops into the column centred. The overlay caption uses the slideshow's
   own .ss-cap; the credit line carries Today Anime News for the wedding photo.
   ========================================================================== */

#naoko .nk-duo-l .nk-gal{
  float:right; clear:right;
  width:280px; max-width:44%;
  margin:6px 0 14px 22px;
}
#naoko .nk-gal .ss-frame{
  aspect-ratio:var(--ss-ar, 3 / 4);
  background:#f4f1ea;
}
#naoko .nk-gal .ss-img{ object-fit:contain; }
#naoko .nk-gal .ss-note{ font-size:11px; }
@media (max-width:700px){
  #naoko .nk-duo-l .nk-gal{
    float:none; width:min(280px, 86%); max-width:none; margin:4px auto 16px;
  }
}


/* ==========================================================================
   253. NAOKO: THE PORTRAIT GALLERY AND HER VIDEOS           (22 Sep 2026)
   ==========================================================================
   The portrait in her top card is now a six-photo slideshow, young to older,
   in the same 300px column; `ss--fit` at 3 / 4 so the tall photos fill it and
   the two wide ones sit with a band above and below rather than cropped.

   Two videos sit side by side under her story, before the "about this chart"
   fold, each a km-vid slot (js/moves.js), so they show YouTube's thumbnail and
   play in place. 16:9 here, since these are not the 4:3 broadcast clips the
   kit cards hold. One column on a phone.
   ========================================================================== */

#naoko .nk-top-l .nk-pgal{ width:300px; max-width:100%; margin:0 0 14px; }
#naoko .nk-pgal .ss-frame{ aspect-ratio:var(--ss-ar, 3 / 4); background:#f4f1ea; }
#naoko .nk-pgal .ss-img{ object-fit:contain; }
#naoko .nk-pgal .ss-note{ font-size:11px; }

#naoko .nk-vids{
  clear:both;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;
  margin:18px 0 0;
}
#naoko .nk-vid{ margin:0; }
#naoko .nk-vid .km-vid{ width:100%; aspect-ratio:16 / 9; }
#naoko .nk-vid figcaption{
  margin-top:6px; font-family:rainyhearts, monospace; font-size:11px;
  letter-spacing:.03em; color:#9a94a6;
}
@media (max-width:700px){
  #naoko .nk-vids{ grid-template-columns:minmax(0, 1fr); }
  #naoko .nk-top-l .nk-pgal{ margin:0 auto 14px; }
}


/* ==========================================================================
   254. THE PHOTO OF THE TWO OF THEM, ON ITS OWN              (22 Sep 2026)
   ==========================================================================
   Ashley: take the photo of the two of them out of the gallery; keep only the
   drawn pictures in it. It floats left at the start of the marriage paragraph,
   the gallery floats right, and the paragraph runs between them. On a phone
   it drops into the column, centred, like the gallery.
   ========================================================================== */

#naoko .nk-duo-l .nk-photo--pair{
  float:left; width:220px; max-width:34%;
  margin:6px 22px 12px 0;
  transform:rotate(-1.2deg);
}
#naoko .nk-photo--pair img{ width:100%; height:auto; }
@media (max-width:700px){
  #naoko .nk-duo-l .nk-photo--pair{
    float:none; width:min(260px, 86%); max-width:none; margin:4px auto 16px; transform:none;
  }
}


/* ==========================================================================
   255. HER PHOTOS, DOWN IN THE STORY                         (22 Sep 2026)
   ==========================================================================
   Ashley: keep the original portrait next to the chart; move the other
   photos lower, into the text. Five photos in a slideshow floated right
   beside the opening paragraphs. Same width and phone behaviour as the
   Togashi gallery (252).
   ========================================================================== */

#naoko .nk-duo-l .nk-lgal{
  float:right; clear:right;
  width:280px; max-width:44%;
  margin:6px 0 14px 22px;
}
#naoko .nk-lgal .ss-frame{ aspect-ratio:var(--ss-ar, 3 / 4); background:#f4f1ea; }
#naoko .nk-lgal .ss-img{ object-fit:contain; }
#naoko .nk-lgal .ss-note{ font-size:11px; }
@media (max-width:700px){
  #naoko .nk-duo-l .nk-lgal{
    float:none; width:min(280px, 86%); max-width:none; margin:4px auto 16px;
  }
}


/* ==========================================================================
   256. NAOKO: PHOTO AND FACTS INSIDE THE CHART BOX           (22 Sep 2026)
   ==========================================================================
   Ashley: put the profile picture and the facts inside the box with the
   chart, the facts on a semi-opaque panel so they read. The chart box is now
   a grid: 300px left column (photo, then facts) spanning the heading, wheel
   and placements on the right. The facts list, which was taller than the
   chart beside it, now sits inside the same box instead of running past it.
   ========================================================================== */

#naoko .nk-top{ display:block; }
#naoko .nk-top .nk-chart--wheel{
  display:grid;
  grid-template-columns:300px minmax(0, 1fr);
  column-gap:20px;
  align-items:start;
}
/* a fourth, flexible row takes the slack when the left column is the taller
   one, so the heading, wheel and placements keep their own heights */
#naoko .nk-top .nk-chart--wheel{ grid-template-rows:auto auto auto 1fr; }
#naoko .nk-chart--wheel > .nk-top-l{ grid-column:1; grid-row:1 / span 4; }
#naoko .nk-chart--wheel .nk-top-l .nk-stats .ass-row{ grid-template-columns:78px minmax(0,1fr); gap:8px; }
#naoko .nk-chart--wheel > :not(.nk-top-l){ grid-column:2; }
#naoko .nk-chart--wheel .nk-top-l .nk-photo{ width:100%; margin:0 0 14px; }
#naoko .nk-chart--wheel .nk-top-l .nk-photo figcaption{ color:#d9cfe9; }
#naoko .nk-chart--wheel .nk-top-l .nk-stats{
  margin:0; padding:12px 12px 10px;
  background:rgba(253,252,255,.9);
  border:1px solid rgba(230,193,90,.55);
  border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
#naoko .nk-chart--wheel .nk-top-l .nk-stats .ass-row:last-child{ margin-bottom:0; }

@media (max-width:760px){
  #naoko .nk-top .nk-chart--wheel{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; }
  #naoko .nk-chart--wheel > .nk-top-l,
  #naoko .nk-chart--wheel > :not(.nk-top-l){ grid-column:1; grid-row:auto; }
  #naoko .nk-chart--wheel .nk-top-l{ margin-bottom:16px; }
  #naoko .nk-chart--wheel .nk-top-l .nk-photo{ max-width:300px; margin:0 auto 14px; }
}


/* ==========================================================================
   257. NAOKO'S GALLERY CAPTIONS, OFF THE PICTURE             (22 Sep 2026)
   ==========================================================================
   Ashley: "the captions on the images in the gallery.... i can't read them....
   move the captions outside the image (still part of the gallery) but off the
   image and larger".

   In both of her galleries (.nk-lgal, the photos; .nk-gal, beside Togashi)
   each slide becomes a column: the picture on top, shrinking to fit, and the
   caption in its own pale band underneath - dark 13px text, no gradient, not
   over the picture. The frame is made a little taller so the pictures do not
   lose much size to the band. Other slideshows on the site are untouched.
   ========================================================================== */

#naoko .nk-lgal .ss-frame,
#naoko .nk-gal .ss-frame{ aspect-ratio:3 / 4.6; }
#naoko .nk-lgal .ss-slide,
#naoko .nk-gal .ss-slide{
  flex-direction:column; align-items:stretch; justify-content:flex-start;
}
#naoko .nk-lgal .ss-slide .ss-img,
#naoko .nk-gal .ss-slide .ss-img{
  flex:1 1 auto; min-height:0; width:100%; height:auto; object-fit:contain;
}
#naoko .nk-lgal .ss-cap,
#naoko .nk-gal .ss-cap{
  position:static; flex:0 0 auto;
  background:#fdfcff; color:#3d3550;
  border-top:1px solid rgba(230,193,90,.55);
  padding:8px 10px 12px;
}
#naoko .nk-lgal .ss-note,
#naoko .nk-gal .ss-note{ font-size:13px; line-height:1.4; }
#naoko .nk-lgal .ss-credit,
#naoko .nk-gal .ss-credit{ font-size:10px; opacity:.8; color:#6b6180; }


/* ==========================================================================
   258. NAOKO: HER FACTS AND THE PLACEMENTS, ONE BOX, TWO PANES (22 Sep 2026)
   ==========================================================================
   Ashley: combine the facts with the placements box, but keep them "still
   separated and easily distinguished", and make the photo and chart larger
   with the space that frees.

   The chart box's grid is now three areas - photo | heading+wheel, and the
   shared box across the bottom. These restate 256's placements with more
   specific selectors so they win on specificity as well as order.

   The shared box is one gold-edged frame holding two panes: "her life" pale
   with dark text on the left, "placements" dark on the right, split by a gold
   rule. On a phone the panes stack, her life first.

   The panes split about 52/48: at that width the placements fall into one
   column and the facts into fewer lines, so the two panes end near level.

   The box borrows 18px either side from the frame padding around it (the
   biobox has 18px there), which with the facts gone from the photo column is
   what lets both the photo and the wheel grow.
   ========================================================================== */

#naoko .nk-top .nk-chart--wheel{
  margin:0 -18px;
  padding:16px 14px 18px;
  grid-template-columns:330px minmax(0, 1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"photo head" "photo wheel" "info info";
  column-gap:16px;
}
#naoko .nk-top .nk-chart--wheel > .nk-top-l{ grid-area:photo; }
#naoko .nk-top .nk-chart--wheel > .nk-chart-h{ grid-area:head; }
#naoko .nk-top .nk-chart--wheel > .nk-wheel-wrap{ grid-area:wheel; }
#naoko .nk-top .nk-chart--wheel > .nk-infobox{ grid-area:info; }
#naoko .nk-top .nk-chart--wheel > .nk-top-l .nk-photo{ margin:0; }

#naoko .nk-infobox{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  align-items:stretch;
  margin-top:18px;
  border:1px solid rgba(230,193,90,.55);
  border-radius:10px;
  overflow:hidden;
}
#naoko .nk-info-her{
  padding:12px 16px 14px;
  background:rgba(253,252,255,.93);
}
#naoko .nk-info-h{
  margin:0 0 10px; padding:0 0 7px;
  font-family:rainyhearts, monospace; font-size:11.5px; letter-spacing:.06em;
  color:#8a6a1f;
  border-bottom:1px dashed rgba(138,106,31,.35);
}
#naoko .nk-infobox .nk-info-her .nk-stats{
  margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none;
}
#naoko .nk-infobox .nk-info-her .nk-stats .ass-row{
  grid-template-columns:82px minmax(0, 1fr); gap:8px;
}
#naoko .nk-infobox .nk-signbox{
  margin:0; border:0; border-radius:0;
  border-left:2px solid rgba(230,193,90,.6);
  padding:12px 14px 6px;
  background:rgba(255,253,247,.06);
}
#naoko .nk-infobox .nk-signbox .nk-signs-h{
  padding-bottom:7px; margin-bottom:6px;
  border-bottom:1px dashed rgba(230,193,90,.3);
}

@media (max-width:760px){
  #naoko .nk-top .nk-chart--wheel{
    margin:0; padding:14px 12px;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:none;
    grid-template-areas:"photo" "head" "wheel" "info";
  }
  #naoko .nk-top .nk-chart--wheel > .nk-top-l{ margin-bottom:14px; }
  #naoko .nk-infobox{ grid-template-columns:minmax(0, 1fr); }
  #naoko .nk-infobox .nk-signbox{ border-left:0; border-top:2px solid rgba(230,193,90,.6); }
}


/* ==========================================================================
   259. THE CHART NOTES FOLD SITS UNDER THE CHART             (22 Sep 2026)
   ==========================================================================
   Ashley: the "about this chart" fold belongs near the chart. It now follows
   the chart box directly; closed it is one line, with a dashed rule under it
   to separate it from her story rather than above it.
   ========================================================================== */

#naoko .nk-top + .nk-about{
  margin:14px 0 22px;
  border-top:0; padding-top:0;
  border-bottom:1px dashed var(--backbow); padding-bottom:14px;
}


/* ==========================================================================
   260. THE CHART NOTES FOLD, INSIDE THE CHART BOX            (22 Sep 2026)
   ==========================================================================
   Ashley: inside the chart box, below the facts and placements - not in
   that box, below it. A fourth grid row across both columns. The open notes
   sit on a pale panel (their own dark frame inside the dark box would vanish).
   ========================================================================== */

#naoko .nk-top .nk-chart--wheel{
  grid-template-rows:auto 1fr auto auto;
  grid-template-areas:"photo head" "photo wheel" "info info" "fold fold";
}
#naoko .nk-top .nk-chart--wheel > .nk-about{
  grid-area:fold;
  margin:14px 0 0; padding:0; border:0;
}
#naoko .nk-chart--wheel > .nk-about > summary{
  background:rgba(253,252,255,.93);
}
#naoko .nk-chart--wheel > .nk-about .nk-chart--notes{
  margin-top:12px; padding:0; background:none; border:0;
}
#naoko .nk-chart--wheel > .nk-about .nk-chart--notes::before{ display:none; }
#naoko .nk-chart--wheel > .nk-about .nk-notes-col{
  border-radius:10px;
}
@media (max-width:760px){
  #naoko .nk-top .nk-chart--wheel{
    grid-template-rows:none;
    grid-template-areas:"photo" "head" "wheel" "info" "fold";
  }
}


/* ==========================================================================
   261. NAOKO'S GALLERY PICTURES FILL THEIR FRAME             (22 Sep 2026)
   ==========================================================================
   Ashley: "the gallery images, please crop so they fill the gallery frame".
   The picture area of each slide (above the caption band from 257) is now
   filled edge to edge - `object-fit:cover`, cropped by the browser, the files
   themselves untouched - anchored toward the top so faces stay in. The pale
   bands above and below the wide photos are gone.
   ========================================================================== */

#naoko .nk-lgal .ss-slide .ss-img,
#naoko .nk-gal .ss-slide .ss-img{
  object-fit:cover; object-position:50% 20%;
  height:100%;
}
/* per-photo anchors, checked slide by slide: in the Porsche photo she stands
   at the far right, so a centred crop cut her out; on the stairs she sits
   left of centre */
#naoko .nk-lgal .ss-img[src$="naoko-porsche.webp"]{ object-position:100% 30%; }
#naoko .nk-lgal .ss-img[src$="naoko-stairs.webp"]{ object-position:30% 20%; }


/* ==========================================================================
   262. NAOKO'S BIOGRAPHY GETS HEADINGS                       (22 Sep 2026)
   ==========================================================================
   Ashley: "break the biography up with headings". Four small headings in the
   wing's pixel type with a dashed rule, each clearing the floats above it so
   a new part never starts beside the last part's picture.
   ========================================================================== */

#naoko .nk-sub{
  clear:both;
  margin:26px 0 12px; padding:0 0 6px;
  font-family:rainyhearts, monospace; font-size:19px; font-weight:normal;
  letter-spacing:.04em; color:var(--head, var(--accent));
  border-bottom:1px dashed var(--backbow);
}
#naoko .nk-sub:first-of-type{ margin-top:6px; }


/* ==========================================================================
   263. HER NAME SPARKLES                                     (22 Sep 2026)
   ==========================================================================
   Ashley: "give her name a pretty effect <3 she deserves it". The heading
   already paints its letters with a clipped gradient; for her it becomes a
   Sailor Moon ribbon - pink, gold, lavender, sky, each deep enough to read on
   the pale page - that shimmers slowly across
   the letters, with a soft glow and two twinkling stars either side. With
   reduced motion the colours stay and nothing moves.
   ========================================================================== */

#naoko .block-h .bh-t{
  display:inline-block; position:relative;
  background-image:linear-gradient(100deg,
    #e45a9b 0%, #ec8fbd 18%, #d9a93a 34%, #e8c25a 44%,
    #a57ad8 58%, #6aa6e4 74%, #e45a9b 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(90,50,104,.35)) drop-shadow(0 0 3px rgba(246,179,208,.45));
  animation:nk-name-shimmer 7s linear infinite;
  padding:0 26px;
}
#naoko .block-h .bh-t::before,
#naoko .block-h .bh-t::after{
  content:"\2726";
  position:absolute; top:50%;
  font-size:15px; line-height:1;
  -webkit-text-fill-color:#e6c15a; color:#e6c15a;
  text-shadow:0 0 6px rgba(255,236,160,.9);
  animation:nk-name-twinkle 2.4s ease-in-out infinite;
}
#naoko .block-h .bh-t::before{ left:2px;  transform:translateY(-60%); }
#naoko .block-h .bh-t::after{  right:2px; transform:translateY(-35%);
  -webkit-text-fill-color:#f6b3d0; color:#f6b3d0;
  text-shadow:0 0 6px rgba(246,179,208,.95);
  animation-delay:1.2s;
}
@keyframes nk-name-shimmer{
  from{ background-position:0% 50%; }
  to{   background-position:220% 50%; }
}
@keyframes nk-name-twinkle{
  0%, 100%{ opacity:.35; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  #naoko .block-h .bh-t,
  #naoko .block-h .bh-t::before,
  #naoko .block-h .bh-t::after{ animation:none; }
}


/* ==========================================================================
   264. HER NAME: BIGGER, SHINIER, MORE MAGIC                  (22 Sep 2026)
   ==========================================================================
   Ashley: "a little bigger. a little shinier... a little more magical."
     - bigger: 26px -> 34px (28px on a phone, where it wraps to two lines)
     - shinier: a white glint sweeps across the letters every few seconds, a
       second clipped layer riding over the colour ribbon
     - more magic: a pair of stars each side instead of one, twinkling and
       drifting, and a soft glow that breathes
   Reduced motion: colours and stars stay, nothing moves.
   ========================================================================== */

#naoko .block-h .bh-t{
  font-size:34px;
  padding:0 44px;
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 47%,
                    rgba(255,255,255,.95) 50%, transparent 59%),
    linear-gradient(100deg,
      #e45a9b 0%, #ec8fbd 18%, #d9a93a 34%, #e8c25a 44%,
      #a57ad8 58%, #6aa6e4 74%, #e45a9b 100%);
  background-size:300% 100%, 220% 100%;
  background-repeat:no-repeat, repeat;
  animation:nk-name-shine 7s linear infinite, nk-name-glow 3.6s ease-in-out infinite;
}
#naoko .block-h .bh-t::before{ content:"\2727\00a0\2726"; font-size:16px; left:0; }
#naoko .block-h .bh-t::after{  content:"\2726\00a0\2727"; font-size:16px; right:0; }
#naoko .block-h .bh-t::before,
#naoko .block-h .bh-t::after{
  animation:nk-name-twinkle 2.4s ease-in-out infinite, nk-name-drift 4s ease-in-out infinite;
}
#naoko .block-h .bh-t::after{ animation-delay:1.2s, 2s; }

@keyframes nk-name-shine{
  0%   { background-position:150% 50%, 0% 50%; }
  35%  { background-position:-50% 50%, 77% 50%; }
  100% { background-position:-50% 50%, 220% 50%; }
}
@keyframes nk-name-glow{
  0%, 100%{ filter:drop-shadow(0 2px 0 rgba(90,50,104,.35)) drop-shadow(0 0 3px rgba(246,179,208,.4)); }
  50%     { filter:drop-shadow(0 2px 0 rgba(90,50,104,.35)) drop-shadow(0 0 7px rgba(232,194,90,.7)); }
}
@keyframes nk-name-drift{
  0%, 100%{ margin-top:0; }
  50%     { margin-top:-4px; }
}
@media (max-width:700px){
  #naoko .block-h .bh-t{ font-size:28px; padding:0 36px; }
}
@media (prefers-reduced-motion: reduce){
  #naoko .block-h .bh-t,
  #naoko .block-h .bh-t::before,
  #naoko .block-h .bh-t::after{ animation:none; }
}


/* ==========================================================================
   265. HER NAME IN SHAPEBIT                                  (22 Sep 2026)
   ==========================================================================
   Ashley: "please use the shapebit font". The effect in 263/264 was drawn in
   the heading font every block title uses, 04B. ShapeBit is already declared
   in index.css (fonts/ShapeBit.otf), which this page loads, so this only
   names it for her heading. 04B stays as the fallback while it loads.
   ========================================================================== */

#naoko .block-h .bh-t{
  font-family:shapebit, "04B", monospace;
  letter-spacing:.02em;
}


/* ==========================================================================
   266. HER NAME AT THE TOP OF THE CHART BOX                  (22 Sep 2026)
   ==========================================================================
   Ashley: her name inside the chart box, at the top, above the photo. The
   heading is now the box's first child, on its own row across both columns,
   centred, with a soft gold rule under it instead of the page-width bar the
   block headings carry. On the dark ground the glow is gold rather than
   plum. 263-265 were re-pointed from `#naoko > .block-h` to `#naoko
   .block-h` so the sparkle follows it in here.
   ========================================================================== */

#naoko .nk-top .nk-chart--wheel{
  grid-template-rows:auto auto 1fr auto auto;
  grid-template-areas:"name name" "photo head" "photo wheel" "info info" "fold fold";
}
#naoko .nk-top .nk-chart--wheel > .block-h{
  grid-area:name;
  margin:2px 0 16px; padding:0 0 12px;
  display:flex; justify-content:center; align-items:center;
  text-align:center;
  background:none;
  border-bottom:1px solid rgba(230,193,90,.35);
}
#naoko .nk-chart--wheel > .block-h::before,
#naoko .nk-chart--wheel > .block-h::after{ display:none; }
#naoko .nk-chart--wheel > .block-h .bh-moon{ display:none; }
@keyframes nk-name-glow-dark{
  0%, 100%{ filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 0 4px rgba(246,179,208,.45)); }
  50%     { filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(232,194,90,.8)); }
}
#naoko .nk-chart--wheel > .block-h .bh-t{
  animation:nk-name-shine 7s linear infinite, nk-name-glow-dark 3.6s ease-in-out infinite;
}
@media (max-width:760px){
  #naoko .nk-top .nk-chart--wheel{
    grid-template-rows:none;
    grid-template-areas:"name" "photo" "head" "wheel" "info" "fold";
  }
}
@media (prefers-reduced-motion: reduce){
  #naoko .nk-chart--wheel > .block-h .bh-t{ animation:none; }
}


/* ==========================================================================
   267. NAOKO'S CHART BOX, THIRD PASS                         (22 Sep 2026)
   ==========================================================================
   - the name sits in the left column above the photo (the column is the
     "nameplate"); 266's full-width name row is retired
   - left column 330 -> 260px, so the wheel's column grows 548 -> ~618px
   - the chart's "cast for noon" note now lives in the placements pane, so
     the grid loses its heading row: photo | wheel, then the shared box, then
     the fold
   - the note and the rising sign's "no birth time" are links to the fold
     (js/chartprofile.js opens it); dotted underline, same colours as the
     text they sit in
   ========================================================================== */

#naoko .nk-top .nk-chart--wheel{
  grid-template-columns:260px minmax(0, 1fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:"photo wheel" "info info" "fold fold";
  align-items:start;
}
#naoko .nk-top .nk-chart--wheel > .nk-top-l{ grid-area:photo; }
#naoko .nk-top-l > .block-h{
  margin:6px 0 14px; padding:0 0 12px;
  display:flex; justify-content:center; align-items:center;
  text-align:center; background:none;
  border-bottom:1px solid rgba(230,193,90,.35);
}
#naoko .nk-top-l > .block-h::before,
#naoko .nk-top-l > .block-h::after,
#naoko .nk-top-l > .block-h .bh-moon{ display:none; }
#naoko .nk-top-l > .block-h .bh-t{
  font-size:30px; line-height:1.15; padding:0 30px;
  animation:nk-name-shine 7s linear infinite, nk-name-glow-dark 3.6s ease-in-out infinite;
}
#naoko .nk-top .nk-chart--wheel > .nk-wheel-wrap{ align-self:center; }

#naoko .nk-signbox .nk-chart-h{
  margin:0 0 8px; font-size:12px; color:rgba(230,193,90,.85);
}
#naoko a.cp-about-link{
  color:inherit; text-decoration:underline dotted; text-underline-offset:3px;
}
#naoko a.cp-about-link:hover,
#naoko a.cp-about-link:focus-visible{ color:#fff3c4; }

@media (max-width:760px){
  #naoko .nk-top .nk-chart--wheel{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:none;
    grid-template-areas:"photo" "wheel" "info" "fold";
  }
  #naoko .nk-top-l > .block-h .bh-t{ font-size:28px; }
}
@media (prefers-reduced-motion: reduce){
  #naoko .nk-top-l > .block-h .bh-t{ animation:none; }
}


/* ==========================================================================
   268. NAOKO: SOURCES, AND THE LEFT COLUMN FILLS OUT          (22 Sep 2026)
   ==========================================================================
   Ashley: "sources please... this is very important", and a larger name and
   a taller picture, with no dead space under it.

   Sources close her section in three labelled groups - her own words,
   reference, fan research and video - so the weight behind each detail is
   visible. The left column now stretches to the wheel's height; the photo
   grows into the space, cropped from the top so her face stays in.
   ========================================================================== */

#naoko .nk-top .nk-chart--wheel > .nk-top-l{
  align-self:stretch;
  display:flex; flex-direction:column;
}
#naoko .nk-top-l > .nk-photo{
  flex:1 1 auto; display:flex; flex-direction:column; min-height:0;
}
#naoko .nk-top-l > .nk-photo img{
  flex:1 1 auto; min-height:320px; height:100%;
  object-fit:cover; object-position:50% 15%;
}
#naoko .nk-top-l > .block-h .bh-t{ font-size:38px; padding:0 22px; }
#naoko .nk-top-l > .block-h .bh-t::before,
#naoko .nk-top-l > .block-h .bh-t::after{ font-size:13px; }

#naoko .nk-sources{ clear:both; margin-top:10px; }
#naoko .nk-src-g{ margin:0 0 14px; }
#naoko .nk-src-h{
  margin:0 0 6px; font-family:rainyhearts, monospace; font-size:12px;
  letter-spacing:.05em; color:var(--accent);
}
#naoko .nk-src-list{ margin:0; padding:0 0 0 18px; }
#naoko .nk-src-list li{ margin:0 0 5px; font-size:13px; line-height:1.5; color:var(--ink); }
#naoko .nk-src-list a{ color:var(--accent); text-underline-offset:2px; }
#naoko .nk-src-note{ margin:4px 0 0; font-size:12.5px; line-height:1.5; color:#7c7390; }
@media (max-width:760px){
  #naoko .nk-top-l > .nk-photo img{ min-height:0; height:auto; }
  #naoko .nk-top-l > .block-h .bh-t{ font-size:32px; }
}


/* =========================================================================
   269. CHART PAGES: THE SAME WIDTH AS THE LANDING SECTION      (22 Sep 2026)
   -------------------------------------------------------------------------
   A stand-alone chart profile (chart-<slug>.html, built by cp_build.py) uses
   the thread-page shell, whose post column stops at 860px for readable prose.
   The chart box was laid out at the landing page's ~995px, and at 860 the
   wheel shrinks and the infobox wraps harder. body.chart-page lifts the
   ceiling so the column fills the row beside the sidebar, the same way the
   landing page does. Prose inside still wraps around the galleries, so the
   lines stay a comfortable length.
   ========================================================================= */
body.--post.chart-page .cabinet > .container--post{ max-width: none; }


/* =========================================================================
   270. THE CHART INDEX: PHOTO CARDS, FILTERS AND SORTING       (22 Sep 2026)
   -------------------------------------------------------------------------
   charts.html is written by cp_index.py (run through cp_build.py --all), one
   card per data file in DO_NOT_UPLOAD\scripts\chartprofile\people\. Each
   card is a whole link: the portrait on top, the name, the category, then
   Sun / Moon / rising in the same dark panel and gold lettering as the
   placements box on a profile, and a Rodden badge at the foot so the quality
   of the birth time is visible before anyone clicks.
   js/chartsindex.js un-hides .ci-tools and does the filtering; with script
   off the tools stay hidden and every card shows.
   ========================================================================= */
.senshi-art .ci{ padding:6px 28px 30px; }
.senshi-art .ci-tools{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px;
  margin:0 0 18px; padding:12px 14px;
  background:var(--wash); border:1px dashed var(--backbow); border-radius:10px;
}
.senshi-art .ci-tools[hidden]{ display:none; }
.senshi-art .ci-f{ display:flex; flex-direction:column; gap:4px; }
.senshi-art .ci-f-k{
  font-family:rainyhearts,monospace; font-size:12px; letter-spacing:.05em; color:var(--accent);
}
.senshi-art .ci-f select{
  font:inherit; font-size:13px; color:var(--ink);
  padding:5px 8px; min-width:150px;
  background:#fff; border:1.5px solid var(--trim); border-radius:7px;
}
.senshi-art .ci-f select:focus-visible{ outline:2px solid #5A3268; outline-offset:1px; }
.senshi-art .ci-count{
  margin:0 0 0 auto; align-self:center;
  font-family:rainyhearts,monospace; font-size:12px; color:#7c7390;
}

.senshi-art .ci-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:18px;
}
.senshi-art .ci-card[hidden]{ display:none; }
.senshi-art .ci-link{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  background:#2a1f3d; border:1.5px solid #8b7137; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 12px rgba(60,40,90,.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.senshi-art .ci-link:hover,
.senshi-art .ci-link:focus-visible{
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(60,40,90,.26);
}
.senshi-art .ci-link:focus-visible{ outline:2px solid #e6c15a; outline-offset:2px; }
.senshi-art .ci-photo{ display:block; aspect-ratio:4 / 5; overflow:hidden; background:#1c1530; }
.senshi-art .ci-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.senshi-art .ci-body{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 12px; flex:1 1 auto; }
.senshi-art .ci-name{
  font-family:shapebit,rainyhearts,monospace; font-size:20px; line-height:1.15;
  color:#f6e2ad; text-shadow:0 0 8px rgba(230,193,90,.35);
}
.senshi-art .ci-cat{ font-family:rainyhearts,monospace; font-size:12px; letter-spacing:.05em; color:#c9a8e8; }
.senshi-art .ci-big3{
  display:flex; flex-direction:column; gap:3px; margin-top:4px; padding-top:8px;
  border-top:1px solid rgba(230,193,90,.28);
}
.senshi-art .ci-pl{ display:flex; align-items:center; gap:7px; }
.senshi-art .ci-g{ width:16px; height:16px; flex:0 0 16px; }
.senshi-art .ci-g--uni{ display:inline-flex; align-items:center; justify-content:center; font-size:15px; color:#e6c15a; line-height:1; }
.senshi-art .ci-g--sun{ color:#e6c15a; }
.senshi-art .ci-k{ font-size:11.5px; color:rgba(230,193,90,.88); min-width:44px; }
.senshi-art .ci-v{ font-size:13.5px; color:#fdfaf2; }
.senshi-art .ci-pl--none .ci-v{ color:#a99bbd; font-style:italic; }
.senshi-art .ci-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:10px;
}
.senshi-art .ci-rodden{
  padding:3px 8px; border-radius:999px;
  background:linear-gradient(180deg,#fffaea 0%,#f6e2ad 100%); border:1.5px solid #8b7137;
  font-family:"Press Start 2P",monospace; font-size:7.5px; letter-spacing:.4px; color:#5A3268;
}
/* no birth time: the badge goes quiet, the same lilac as the dashed angles */
.senshi-art .ci-rodden--X,
.senshi-art .ci-rodden--XX{ background:#3a2d52; border-color:#6a4a86; color:#c9a8e8; }
.senshi-art .ci-born{ font-size:11.5px; color:#a99bbd; }
.senshi-art .ci-empty{ margin:14px 0 0; font-family:rainyhearts,monospace; font-size:13px; color:#7c7390; }
@media (max-width:760px){
  .senshi-art .ci{ padding:4px 14px 22px; }
  .senshi-art .ci-f select{ min-width:0; width:100%; }
  .senshi-art .ci-f{ flex:1 1 140px; }
  .senshi-art .ci-count{ margin-left:0; flex-basis:100%; }
  /* two cards to a row on a phone, or one portrait fills the whole screen */
  .senshi-art .ci-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .senshi-art .ci-body{ padding:10px 10px 10px; }
  .senshi-art .ci-name{ font-size:16px; }
  .senshi-art .ci-k{ min-width:0; }
  .senshi-art .ci-v{ font-size:12.5px; }
  .senshi-art .ci-foot{ flex-wrap:wrap; }
}


/* =========================================================================
   271. NAOKO: THE NAME AND PORTRAIT SHARE ONE FRAMED PLATE      (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: "give the name and profile a shared box frame with opaque
   background. do a gradient effect to complement the nameplace."

   .nk-top-l becomes a card of its own on the dark chart ground: a solid
   plum-to-midnight fill, a warm gold glow behind the name, and a thin band
   across the top in the same pink / gold / lilac / blue run as the
   shimmering name (section 263), so the plate reads as the name's setting.
   The column grows from 260px to 276px so the portrait keeps its width
   inside the new padding. The phone layout keeps the plate, centred.
   Scoped to #naoko, so cp_css.py carries it to the chart pages as #cp.
   ========================================================================= */
#naoko .nk-top .nk-chart--wheel{ grid-template-columns:276px minmax(0, 1fr); }
#naoko .nk-top .nk-chart--wheel > .nk-top-l{
  position:relative; overflow:hidden;
  padding:16px 14px 12px;
  border-radius:14px;
  border:1.5px solid rgba(230,193,90,.62);
  background:
    radial-gradient(120% 34% at 50% 0%, rgba(232,194,90,.26) 0%, rgba(232,194,90,0) 70%),
    radial-gradient(90% 40% at 0% 100%, rgba(228,90,155,.20) 0%, rgba(228,90,155,0) 70%),
    radial-gradient(90% 40% at 100% 100%, rgba(106,166,228,.20) 0%, rgba(106,166,228,0) 70%),
    linear-gradient(180deg, #432a5e 0%, #33244f 45%, #22264a 100%);
  box-shadow:
    inset 0 0 0 3px rgba(20,12,34,.55),
    inset 0 0 0 4px rgba(236,143,189,.28),
    0 6px 18px rgba(0,0,0,.35);
}
/* the band across the top: the name's own colours, held still */
#naoko .nk-top .nk-chart--wheel > .nk-top-l::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,
    #e45a9b 0%, #ec8fbd 18%, #d9a93a 34%, #e8c25a 44%,
    #a57ad8 58%, #6aa6e4 74%, #e45a9b 100%);
  opacity:.9;
}
#naoko .nk-top-l > .block-h{ margin:4px 0 12px; }
#naoko .nk-top-l > .block-h .bh-t{ font-size:36px; padding:0 20px; }
#naoko .nk-top-l > .nk-photo img{
  border-color:rgba(230,193,90,.7);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
#naoko .nk-top-l > .nk-photo figcaption{ margin-bottom:0; }
@media (max-width:760px){
  #naoko .nk-top .nk-chart--wheel{ grid-template-columns:minmax(0, 1fr); }
  #naoko .nk-top .nk-chart--wheel > .nk-top-l{ max-width:340px; width:100%; margin:0 auto 16px; justify-self:center; }
  #naoko .nk-top-l > .block-h .bh-t{ font-size:30px; }
}


/* =========================================================================
   272. NAOKO: THE MEDVEDEVA PHOTO BESIDE "SHE IS STILL DRAWING" (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: "still drawing and producing art" - the 2016 photo with Evgenia
   Medvedeva and the Princess Serenity drawn for her. A landscape figure, so
   it floats right, wider than the beach photo, tilted the other way from it.
   clear:right keeps it below the after-Sailor-Moon gallery, which also
   floats right. The closing paragraph wraps around it. Phone: centred.
   ========================================================================== */
#naoko .nk-duo-l .nk-photo--now{
  float:right; clear:right; width:340px; max-width:46%;
  margin:8px 0 12px 22px;
  transform:rotate(1deg);
}
#naoko .nk-photo--now img{ width:100%; height:auto; }
@media (max-width:700px){
  #naoko .nk-duo-l .nk-photo--now{
    float:none; width:min(360px, 92%); max-width:none; margin:4px auto 16px; transform:none;
  }
}


/* =========================================================================
   273. NAOKO: THE MEDVEDEVA PHOTO AT FULL SIZE                 (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: "the last picture needs to be larger. don't shrink it please."
   Overrides 272. The figure now follows the closing paragraph on a row of
   its own, centred, at the image's own 640px - the column is wider than
   that on a desktop, so nothing is scaled down. On a narrow screen it fills
   the column, which is the most it can be. No tilt: at this size it read
   as crooked rather than playful. The caption is set at a readable size.
   ========================================================================== */
#naoko .nk-duo-l .nk-photo--now{
  float:none; clear:both; width:640px; max-width:100%;
  margin:6px auto 20px; transform:none;
}
#naoko .nk-duo-l .nk-photo--now figcaption{
  margin-top:8px; text-align:center;
  font-size:13.5px; line-height:1.5; letter-spacing:0; color:#6b5c7d;
}
@media (max-width:700px){
  #naoko .nk-duo-l .nk-photo--now{ width:100%; margin:4px auto 16px; }
}


/* =========================================================================
   274. NAOKO: THE WHEEL SLIDES RIGHT, THE PHOTO GETS WIDER     (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: the wheel "has a lot of padding on the right side before it hits
   the edge of its box. slide it over a little bit and give the photo next
   to it back some of its horizontal space... it looks too cropped on the
   sides."
   The wheel's SVG carries ~44 viewBox units of empty margin each side of
   the ASC / DSC labels (about 31px at this size), and the box adds 14px of
   padding on top of that. Negative margins let the wheel's own blank edges
   run into the box padding on the right and the column gap on the left, so
   the drawing sits ~8px from the frame, and the 54px that frees up goes to
   the name-and-photo column (276px -> 330px). The wheel stays the same size
   or a touch larger. The phone layout, one column, is left as it was.
   ========================================================================== */
#naoko .nk-top .nk-chart--wheel{ grid-template-columns:330px minmax(0, 1fr); }
#naoko .nk-top .nk-chart--wheel > .nk-wheel-wrap{ margin-left:-26px; margin-right:-36px; }
@media (max-width:760px){
  #naoko .nk-top .nk-chart--wheel{ grid-template-columns:minmax(0, 1fr); }
  #naoko .nk-top .nk-chart--wheel > .nk-wheel-wrap{ margin-left:0; margin-right:0; }
}


/* =========================================================================
   275. NAOKO: HER VIDEOS MOVE UP INTO THE STORY                (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: move the videos "up earlier into the profile around where we
   describe her early work... chronological... not just shoved in at the
   bottom." The pair that closed the section (254) is split into two
   single-video blocks inside "making Sailor Moon": one floats right beside
   her first serials, the car video floats left beside "Off the page she
   drove". Same km-vid slot and 16:9 as before, text wrapping round each.
   On a phone each drops into the column above its paragraph, full width.
   ========================================================================== */
#naoko .nk-vids--r,
#naoko .nk-vids--l{
  clear:none; display:block; width:360px; max-width:44%; margin-top:6px;
}
#naoko .nk-vids--r{ float:right; margin:6px 0 12px 22px; }
#naoko .nk-vids--l{ float:left;  margin:6px 22px 12px 0; }
#naoko .nk-vids--r .nk-vid figcaption,
#naoko .nk-vids--l .nk-vid figcaption{ font-size:12px; color:#6b5c7d; }
@media (max-width:700px){
  #naoko .nk-vids--r,
  #naoko .nk-vids--l{ float:none; width:100%; max-width:none; margin:4px 0 16px; }
}


/* =========================================================================
   276. NAOKO: THE DATELINE REPORT, AND FLOATED VIDEOS CLEAR     (22 Sep 2026)
   -------------------------------------------------------------------------
   The Dateline NBC report (late 1995) sits right after the car video, so two
   floats met: the car video on the left was still hanging down when the
   next one started, and the paragraph between them was squeezed to a single
   word per line. Each floated video now clears what came before it, so it
   starts on its own line, and the paragraph after it clears the opposite
   side, so it wraps round its own video alone.
   ========================================================================== */
#naoko .nk-vids--r,
#naoko .nk-vids--l{ clear:both; }
#naoko .nk-vids--r + .nk-lead{ clear:left; }
#naoko .nk-vids--l + .nk-lead{ clear:right; }


/* =========================================================================
   277. NAOKO: PHOTOS THROUGH THE TEXT, AND PICTURES THAT ENLARGE (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: pull some images out of the galleries and place them through the
   text; make "Naoko goes to America" expandable to read.
   .nk-photo--inl / --inr float a photo left or right beside its paragraph,
   the same way the videos do (276): each starts on its own line, and the
   paragraph after it clears the other side so it wraps round that photo
   alone. img.cp-zoom (js/chartprofile.js) opens in a <dialog> at up to the
   full height of the screen; the caption says "(click to enlarge)".
   ========================================================================== */
#naoko .nk-duo-l .nk-photo--inl,
#naoko .nk-duo-l .nk-photo--inr{
  clear:both; width:230px; max-width:38%; margin-top:6px; margin-bottom:12px;
}
#naoko .nk-duo-l .nk-photo--inl{ float:left;  margin-right:22px; transform:rotate(-1deg); }
#naoko .nk-duo-l .nk-photo--inr{ float:right; margin-left:22px;  transform:rotate(1deg); }
#naoko .nk-photo--inl img,
#naoko .nk-photo--inr img{ width:100%; height:auto; }
#naoko .nk-photo--inl + .nk-lead{ clear:right; }
#naoko .nk-photo--inr + .nk-lead{ clear:left; }
#naoko .nk-photo--inl figcaption,
#naoko .nk-photo--inr figcaption{ font-size:12px; line-height:1.45; color:#6b5c7d; }
@media (max-width:700px){
  #naoko .nk-duo-l .nk-photo--inl,
  #naoko .nk-duo-l .nk-photo--inr{
    float:none; width:min(280px, 86%); max-width:none; margin:4px auto 16px; transform:none;
  }
}

#naoko img.cp-zoom{ cursor:zoom-in; }
#naoko img.cp-zoom:focus-visible{ outline:2px solid #5A3268; outline-offset:3px; }
#naoko .cp-zoom-hint{ white-space:nowrap; color:#8b7137; }
.cp-lightbox{
  padding:0; border:0; background:transparent; max-width:96vw; max-height:96vh; overflow:visible;
}
.cp-lightbox::backdrop{ background:rgba(20,12,34,.82); }
.cp-lightbox-img{
  display:block; height:min(92vh, 1500px); width:auto; max-width:94vw; object-fit:contain;
  background:#fff; border:2px solid #e6c15a; border-radius:6px; cursor:zoom-out;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.cp-lightbox-x{
  position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%;
  border:2px solid #e6c15a; background:#2a1f3d; color:#f6e2ad; font-size:20px; line-height:1;
  cursor:pointer;
}


/* =========================================================================
   278. THE ENLARGED PICTURE SITS IN THE MIDDLE OF THE SCREEN   (22 Sep 2026)
   -------------------------------------------------------------------------
   The site's reset zeroes margins, so the <dialog> from 277 opened pinned to
   the top-left corner instead of centred. Put the centring back.
   ========================================================================== */
.cp-lightbox[open]{ position:fixed; inset:0; margin:auto; width:max-content; height:max-content; }


/* =========================================================================
   279. NAOKO GETS HER OWN PAGE; THE LANDING KEEPS THE CHART    (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: the profile deserves its own page, "thread style", shortened on
   the landing page with a link to the full article. naoko-takeuchi.html is
   built by cp_build.py from her data file. The landing section keeps the
   whole chart box, then one teaser paragraph and a "read her full profile"
   link (.nk-teaser). On her page the name in the chart box is the page's
   h1, so the codex header above it (.cp-head) carries only the kicker, the
   summary and the meta line - the name is not said twice.
   ========================================================================== */
#naoko .nk-teaser{ clear:both; margin:6px 0 0; }
#naoko .nk-teaser .nk-lead{ margin:0; }
#naoko .nk-readmore-p{ margin:14px 0 0; text-align:right; }
#naoko a.nk-readmore{
  display:inline-block; padding:8px 16px; border-radius:999px; text-decoration:none;
  font-family:rainyhearts, monospace; font-size:14px; letter-spacing:.04em;
  color:#fdfaf2; background:linear-gradient(180deg, #432a5e 0%, #2a1f3d 100%);
  border:1.5px solid #e6c15a; box-shadow:0 3px 10px rgba(60,40,90,.22);
}
#naoko a.nk-readmore:hover,
#naoko a.nk-readmore:focus-visible{ color:#fff3c4; box-shadow:0 5px 14px rgba(60,40,90,.32); }
#naoko .nk-top-l > h1.block-h{ font-size:inherit; line-height:inherit; margin-top:4px; }
.chart-art .cp-head{ padding-bottom:6px; }
@media (max-width:700px){
  #naoko .nk-readmore-p{ text-align:center; }
}


/* =========================================================================
   280. NAOKO'S PAGE: GALLERIES FOR SETS, PHOTOS BESIDE THEIR SENTENCES
                                                                (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley agreed: on her own page most photos sit in the text beside the
   sentence they belong to; galleries stay only for true sets (the fashion
   shoots; the wedding and Togashi's announcement).
   Where a paragraph carries a float on each side (the beach photo and the
   Hunter x Hunter panel; the wedding gallery and the blanket), the second
   photo must not clear the first: nk-photo--noclear. The wedding gallery
   now starts clear of both earlier floats, so the second half of the
   marriage paragraph gets its own pair.
   ========================================================================== */
#naoko .nk-duo-l .nk-photo--noclear{ clear:none; }
#naoko .nk-photo--noclear + .nk-lead{ clear:none; }
#naoko .nk-duo-l .nk-gal{ clear:both; }
/* the beach photo opens the marriage paragraph with the Hunter x Hunter panel
   beside it; it clears the signing photo above, or the panel is pushed off the
   right edge into the middle of the text */
#naoko .nk-duo-l .nk-photo--pair:has(+ .nk-photo--noclear){ clear:both; }
/* "in recent years" beside the short closing paragraph: smaller, so the
   paragraph is not left with a tall empty strip before the Medvedeva photo */
#naoko .nk-duo-l .nk-photo--sm{ width:175px; }
/* a {"type": "clear"} block in the data file: what follows starts below every
   photo and gallery above it, so a new pair of floats sits level with the
   first line of its own paragraph */
#naoko .nk-clear{ clear:both; }
/* the driving paragraph carries the Porsche on the left and the car video on
   the right: the video does not clear the photo, is a little narrower, and the
   paragraph wraps between the two */
#naoko .nk-duo-l .nk-vids--noclear{ clear:none; width:300px; max-width:36%; }
#naoko .nk-vids--noclear + .nk-lead{ clear:none; }
@media (max-width:700px){
  #naoko .nk-duo-l .nk-vids--noclear{ width:100%; max-width:none; }
  #naoko .nk-duo-l .nk-photo--sm{ width:min(280px, 86%); }
}
/* the one-line summary of a profile now sits on its charts.html card, not on
   the profile page (Ashley) */
.senshi-art .ci-sum{ font-size:12.5px; line-height:1.45; color:#e9e1f4; }
/* Ashley: "put the in recent years photo near the bottom". It closes the
   profile beside the Medvedeva photo: that one keeps its full 640px on the
   left, "in recent years" takes the rest of the row on the right. Phone:
   stacked, as before. */
#naoko .nk-duo-l .nk-photo--bottom{ clear:both; width:224px; max-width:28%; margin:6px 0 20px 18px; transform:rotate(1deg); }
#naoko .nk-duo-l .nk-photo--bottom + .nk-photo--now{ float:left; clear:none; margin:6px 0 20px; }
@media (max-width:900px){
  #naoko .nk-duo-l .nk-photo--bottom{ float:none; width:min(280px, 86%); max-width:none; margin:4px auto 16px; transform:none; }
  #naoko .nk-duo-l .nk-photo--bottom + .nk-photo--now{ float:none; margin:6px auto 20px; }
}


/* =========================================================================
   281. A CHART PAGE OPENS ON THE CHART BOX                     (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: the page should start with the chart box, not the codex header
   ("charts / chart profile / added ... / Rodden X"). The header is gone;
   the charts link, category and date moved to the footer. .cp-nohead trims
   the space the header used to leave above the section.
   ========================================================================== */
.chart-art.cp-nohead > .naokoframe{ padding-top:18px; }


/* =========================================================================
   282. NAOKO: THE MARRIAGE PHOTOS STACK DOWN BOTH SIDES        (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: take the last two pictures out of the Togashi gallery and fill the
   dead space. Five photos now frame the marriage text, three down the left
   and two down the right. .nk-photo--stack clears only its own side, so each
   sits under the photo above it rather than under everything, and the
   paragraph after it does not clear at all - the text runs between the two
   columns. The phone layout still stacks everything in one column.
   ========================================================================== */
#naoko .nk-duo-l .nk-photo--inl.nk-photo--stack{ clear:left; }
#naoko .nk-duo-l .nk-photo--inr.nk-photo--stack{ clear:right; }
#naoko .nk-photo--stack + .nk-lead{ clear:none; }
#naoko .nk-duo-l .nk-photo--pair + .nk-photo--noclear{ margin-top:6px; }


/* =========================================================================
   283. HELIOS WEARS THE SUN, NOT THE CRESCENT                  (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley: "helios page. use the sun glyph." Every profile marks its name and
   its section headings with the moon crescent (.bh-moon). Helios is the sun
   god's name and the Golden Crystal's keeper, so on his page the crescent is
   swapped for the pixel sun glyph (images/favicons/sunglyph.webp, the same
   20px set as the senshi glyphs), scaled in whole pixels. Scoped to
   body.senshi--helios; no markup changes, every other page keeps its moon.
   ========================================================================== */
body.senshi--helios .senshi-art .bh-moon,
body.senshi--helios .senshi-art .masthead-name--lockup .bh-moon{
  width:20px; height:20px; border-radius:0;
  background:url("images/favicons/sunglyph.webp") center / contain no-repeat;
  -webkit-mask:none; mask:none;
  image-rendering:pixelated;
}
body.senshi--helios .senshi-art .masthead-name--lockup .bh-moon{ width:40px; height:40px; }
body.senshi--helios .senshi-art .bh-moon::after{ display:none; }
/* the kit and arc headings colour their crescent with a later, more specific
   rule; the glyph has to win there too */
body.senshi--helios .senshi-art .bh-moon{
  background-image:url("images/favicons/sunglyph.webp") !important;
  background-color:transparent !important;
  border-radius:0 !important;
}
body.senshi--helios .senshi-art .bh-moon::after{ display:none !important; }


/* =========================================================================
   284. HELIOS: HIS PICTURES ARRIVE                             (22 Sep 2026)
   -------------------------------------------------------------------------
   Ashley's Helios set, placed by helios_images.py. Two things were new to
   the wing and needed rules: a variation rung WITH art (every other rung on
   the site is still a placeholder or rung--noart), and a pixel sprite in a
   rung. Rung art fills the same 2:3 box the placeholder held; the pixel
   Pegasus sits whole inside it on a pale sky, scaled in whole pixels.
   ========================================================================== */
.senshi-art .rung img.art--rung{
  display:block; width:100%; aspect-ratio:2 / 3; object-fit:cover; object-position:50% 0;
  border-radius:6px; background:#f7f3e6;
}
.senshi-art .rung img.art--rung-px{
  object-fit:contain; object-position:50% 50%; image-rendering:pixelated;
  background:linear-gradient(180deg,#dff3ef,#f7f3e6);
}
body.senshi--helios .senshi-art .astro-plate--lead img.art--plate{ object-fit:contain; background:#fff; }
/* his three kit items are anime frames, not sprites: the cards stand the
   picture full width on top, caption below, instead of the sprite thumbnail
   the kit card was built for */
body.senshi--helios .senshi-art .ka-items .kit--item{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
}
body.senshi--helios .senshi-art .ka-items .kit--item > .kit-shot{
  width:100%; max-width:none; height:auto; min-height:0; padding:0; flex:none;
}
body.senshi--helios .senshi-art .ka-items .kit--item .kit-still{
  width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover;
}
/* the door to the Sun page carries the pixel sun glyph now, which is a 20px
   sprite rather than the 40px gif it replaced (23 Sep 2026) */
body.senshi--helios .senshi-art .astro-door--px img.planet-px--glyph{
  width:28px; height:28px; image-rendering:pixelated;
}


/* ==========================================================================
   285. ONE BOX AT THE TOP OF A PROFILE                        (29 Sep 2026)
   ==========================================================================
   Ashley: "condense the top sections of the profiles down. The header, stats
   box, and final box with the bust... combine all this information into a
   single box at the top, with the Hellenistic astrology section peeking out
   from the bottom of the page at load." She chose layout C of three mockups
   and asked for a second pass "to reflect more pixel and planets styling"
   with the fuku gradients. The mockups are in DO_NOT_UPLOAD\mockups\
   profile-top-2026-09-29.

   The masthead, the dossier and the profile section are now one
   <section class="c2" id="top">, built by build_profile_top.py on the nine
   profiles that have an astrology section. Their old rules above are left
   in place; nothing on those pages uses them any more.

   The pieces, all in the site's own vocabulary:
   - the henshin still in a dark-edged screen on the drifting lace doily,
     like the kit videos; the plate is a round badge over its corner
   - the fuku gradient in five places: a strip along the top edge, the name,
     the bar under the call, the ring round the badge, and the short bars
     under the three card headings. All of them use --fuku-tile from 136,
     so they scroll at the same twelve frames a second as the heading bars
   - the stats as chips, built like the jump links: gold border, bow-coloured
     hard shadow, the label on the --head pill that "the person" used
   - three cards on lace: the name, the profile, and how the planet shines
     through. Each shows its first paragraph; "more" is a <details>, so it
     opens without script and the rest of that card, pictures included,
     opens in place. The manga gallery keeps its .bio-gal wrapper, so the
     cycler in moves.js still finds it.

   At 1400 x 900 the astrology heading shows at the bottom of the first
   screen. On a phone the site's menu and About box fill the first screen
   on every page, so the peek there is a separate job.
   ========================================================================== */
.senshi-art .c2{
  position:relative; margin:6px 0 26px; padding:0 0 14px;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--backbow); border-radius:10px; overflow:hidden;
  box-shadow:6px 6px 0 color-mix(in srgb, var(--backbow) 70%, #7a5a10);
}
/* the fuku strip along the top edge */
.senshi-art .c2::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; z-index:4;
  background:var(--fuku-tile); background-size:320px 100%;
  animation:fuku-scroll 4s steps(48, end) infinite;
}

/* ---- the band: the henshin screen on lace, the name beside it ---- */
.senshi-art .c2-band{
  position:relative; display:grid; grid-template-columns:57% 43%;
  align-items:stretch; padding-top:6px;
}
.senshi-art .c2-lace{ position:relative; padding:14px; }
.senshi-art .c2-lace::before,
.senshi-art .c2-cols::before{
  content:""; position:absolute; inset:0;
  background:url("images/sailormoon/select/lace/frost.png") repeat 0 0;
  background-size:256px 190px; background-color:var(--wash);
  background-blend-mode:luminosity; opacity:.8;
  animation:kit-doily 140s linear infinite;
}
.senshi-art .c2-screen{
  position:relative; z-index:1; margin:0; height:220px;
  border:2px solid #2b2033; border-radius:4px; overflow:hidden;
  box-shadow:3px 3px 0 var(--frontbow); background:#2b2033;
}
.senshi-art .c2-screen img{
  display:block; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 14%;
}
.senshi-art .c2-screen figcaption{
  position:absolute; right:8px; bottom:6px; margin:0;
  font-family:rainyhearts, monospace; font-size:10px; line-height:1.2;
  color:var(--paper); background:var(--head); padding:3px 7px;
}
.senshi-art .c2-titles{ position:relative; padding:24px 40px 0 16px; min-width:0; }
.senshi-art .c2-titles .masthead-name{ margin:0 0 4px !important; justify-content:flex-start !important; }
.senshi-art .c2-titles .masthead-name--lockup .bh-t{
  font-size:36px !important; white-space:normal; line-height:1.05;
}
.senshi-art .c2-civ{
  font-family:rainyhearts, monospace; font-size:13px; color:var(--head); margin:0 0 10px;
}
.senshi-art .c2-quote{ padding-left:10px; border-left:3px solid var(--accent); }
.senshi-art .c2-quote p{ margin:0; }
.senshi-art .c2-call{ font-size:15px; line-height:1.45; }
.senshi-art .c2-intro{ font-size:12.5px; line-height:1.45; margin-top:3px !important; }
.senshi-art .c2-dub{ font-size:12px; line-height:1.4; opacity:.72; margin-top:2px !important; }
.senshi-art .c2-note{ margin:10px 0 0; font-size:12.5px; line-height:1.5; opacity:.8; }
/* the scrolling fuku bar under the name block */
.senshi-art .c2-titles::after{
  content:""; display:block; height:4px; margin-top:14px;
  background:var(--fuku-tile); background-size:320px 100%;
  animation:fuku-scroll 4s steps(48, end) infinite;
  -webkit-mask-image:var(--fuku-fade); mask-image:var(--fuku-fade);
}

/* ---- the planet badge, ringed in the fuku ---- */
.senshi-art .c2-badge{
  position:absolute; left:26px; top:180px; z-index:5;
  width:148px; height:148px; margin:0; padding:5px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--name-a), var(--name-b), var(--name-c), var(--name-b), var(--name-a));
  box-shadow:3px 3px 0 var(--backbow);
}
.senshi-art .c2-badge img{
  display:block; width:100%; height:100%; max-width:none; box-sizing:border-box;
  border-radius:50%; object-fit:cover; background:var(--paper);
  border:3px solid var(--paper);
}

/* ---- the stats as chips, built like the jump links ---- */
.senshi-art .c2-chips{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:7px 8px;
  margin:12px 20px 0 196px; min-height:70px;
}
.senshi-art .c2-chip{
  display:inline-flex; align-items:stretch; max-width:100%; margin:0;
  font-size:12.5px; line-height:1.3;
  border:2px solid var(--backbow); background:var(--paper);
  box-shadow:2px 2px 0 var(--frontbow);
}
.senshi-art .c2-chip dt{
  display:flex; align-items:center; flex:none; margin:0;
  font-family:rainyhearts, monospace; font-size:10.5px; letter-spacing:.4px;
  color:var(--paper); background:var(--head); padding:3px 7px; white-space:nowrap;
}
.senshi-art .c2-chip dd{ margin:0; padding:2px 8px; align-self:center; min-width:0; }
.senshi-art .c2-chip .stat-gly{
  width:14px; height:14px; vertical-align:-2px; margin-right:4px; image-rendering:pixelated;
}
/* the one link in a stat value, in the site's idiom (section 186) */
.senshi-art .c2-chip a{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }
.senshi-art .c2-chip a:hover,
.senshi-art .c2-chip a:focus-visible{ color:var(--accent); border-bottom-style:solid; }

/* ---- three cards on lace, like the kit cards ---- */
.senshi-art .c2-cols{
  position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start; gap:14px; margin:16px 16px 0; padding:13px; border-radius:10px;
}
.senshi-art .c2-cols::before{ border-radius:10px; opacity:.55; animation-duration:200s; }
.senshi-art .c2-col{
  position:relative; z-index:1; min-width:0;
  background:var(--paper); border:2px solid var(--backbow); border-radius:8px;
  padding:12px 12px 10px;
}
.senshi-art .c2-h{
  display:flex; align-items:center; gap:8px; min-height:30px; margin:0 0 4px; padding:0; border:0;
  font-family:rainyhearts, monospace; font-weight:normal; font-size:14px; line-height:1.3;
  color:var(--head);
}
.senshi-art .c2-h .bh-moon{ width:14px; height:14px; }
.senshi-art .c2-h .bh-moon::after{ width:14px; height:14px; left:5px; top:-2px; }
.senshi-art .c2-h .c2-ico{
  display:block; width:30px; height:30px; max-width:none; margin-left:auto; flex:none; object-fit:contain;
}
.senshi-art .c2-bar{
  height:3px; margin:0 0 8px;
  background:var(--fuku-tile); background-size:320px 100%;
  animation:fuku-scroll 4s steps(48, end) infinite;
  -webkit-mask-image:var(--fuku-fade); mask-image:var(--fuku-fade);
}
.senshi-art .c2-col p{ font-size:13px; line-height:1.6; margin:0 0 9px; }
/* the lead-in clause and the technical terms keep the colours the profile
   section gave them (167, parts 2a and 2b) */
.senshi-art .c2-col p b{ color:var(--name-a); letter-spacing:.3px; }
.senshi-art .c2-col p i{ color:var(--name-b); font-style:italic; letter-spacing:.2px; }
.senshi-art .c2-col .c2-first{
  margin:0; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.senshi-art .c2-col:has(> .c2-det[open]) .c2-first{
  display:block; -webkit-line-clamp:unset; overflow:visible; margin:0 0 9px;
}
/* "more": a <details>, reset from the site-wide details look in index.css */
.senshi-art .c2-det{
  margin:0; padding:0; border:0; border-radius:0; background:none; font-family:inherit;
}
.senshi-art .c2-det > summary.c2-more{
  display:inline-block; list-style:none; margin:9px 0 0; padding:4px 9px;
  font-family:rainyhearts, monospace; font-size:11.5px; line-height:1.3; color:var(--head);
  background:var(--paper); border:2px solid var(--backbow); border-radius:0;
  box-shadow:2px 2px 0 var(--frontbow); cursor:pointer;
  animation:none; will-change:auto;
}
.senshi-art .c2-det > summary.c2-more::-webkit-details-marker{ display:none; }
.senshi-art .c2-det > summary.c2-more::marker{ content:""; }
.senshi-art .c2-det > summary.c2-more:hover{ background:var(--wash); }
.senshi-art .c2-det > summary.c2-more:active{ transform:translate(2px,2px); box-shadow:none; }
.senshi-art .c2-det > summary.c2-more:focus-visible{ outline:2px dashed var(--head); outline-offset:2px; }
.senshi-art .c2-det[open] > summary.c2-more{ margin:0 0 12px; }
.senshi-art .c2-le{ display:none; }
.senshi-art .c2-det[open] .c2-le{ display:inline; }
.senshi-art .c2-det[open] .c2-mo{ display:none; }
/* what opens: the manga gallery, the bust or key art, the rest of the text */
.senshi-art .c2-gal{ margin:0 0 12px; }
.senshi-art .c2-gal .bio-shot img{ margin:0 auto; }
.senshi-art .c2-gal .kb-dots{ margin:12px 0 0; }
.senshi-art .c2-shot{ margin:0 0 12px; }
.senshi-art .c2-shot img{ margin:0 auto; }
.senshi-art .c2-shot .bio-bust{ max-width:min(100%, 200px); }
.senshi-art .c2-shot .bust-figure,
.senshi-art .c2-shot .card{ margin:0 auto; text-align:center; }

/* the bottom row: the door to the planet page, then the chapter jumps. The
   row wears the jump-nav's own panel, so the nav inside it drops its copy */
.senshi-art .c2-nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  margin:14px 16px 0; padding:10px 12px;
  background:var(--wash); border:2px solid var(--skirt); box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .c2 .astro-door{
  display:inline-flex; align-items:center; gap:7px; margin:0; padding:4px 11px 4px 7px;
}
.senshi-art .c2 .astro-door img{
  display:block; width:24px; height:24px; object-fit:contain; image-rendering:pixelated;
}
.senshi-art .c2 .c2-nav .jump-nav{
  margin:0 !important; padding:0 !important; background:none !important;
  border:0 !important; box-shadow:none !important;
}
.senshi-art .c2 .egg-flame{ top:14px; right:14px; z-index:6; color:var(--head); }

@media (prefers-reduced-motion: reduce){
  .senshi-art .c2::before,
  .senshi-art .c2-titles::after,
  .senshi-art .c2-bar,
  .senshi-art .c2-lace::before,
  .senshi-art .c2-cols::before{ animation:none; }
}

/* ---- phone: name first, then the screen, then the badge tucked under the
   screen's corner with the civilian name and the call beside it ---- */
@media (max-width:760px){
  .senshi-art .c2{
    display:grid; grid-template-columns:118px minmax(0, 1fr);
    grid-template-areas:"name name" "screen screen" "badge sub" "bar bar" "chips chips" "cols cols" "jump jump";
  }
  .senshi-art .c2-band,
  .senshi-art .c2-titles{ display:contents; }
  .senshi-art .c2-titles .masthead-name{ grid-area:name; padding:18px 40px 10px 14px; }
  .senshi-art .c2-titles .masthead-name--lockup .bh-t{ font-size:27px !important; }
  .senshi-art .c2-lace{ grid-area:screen; padding:10px; }
  .senshi-art .c2-screen{ height:190px; }
  .senshi-art .c2-screen figcaption{ right:6px; }
  .senshi-art .c2-badge{
    grid-area:badge; position:relative; left:auto; top:auto; align-self:start;
    width:100px; height:100px; padding:4px; margin:-46px 0 0 12px;
  }
  .senshi-art .c2-sub{ grid-area:sub; padding:10px 14px 0 4px; min-width:0; }
  .senshi-art .c2-titles::after{ grid-area:bar; margin:14px 14px 0; }
  .senshi-art .c2-chips{ grid-area:chips; margin:14px 12px 0; min-height:0; }
  .senshi-art .c2-cols{ grid-area:cols; grid-template-columns:minmax(0, 1fr); margin:16px 10px 0; padding:10px; }
  .senshi-art .c2-col p{ font-size:14px; }
  .senshi-art .c2-nav{ grid-area:jump; margin:14px 10px 0; }
}


/* ==========================================================================
   286. THE PLANET PICTURE IN A WINDOW, NOT A CIRCLE           (29 Sep 2026)
   ==========================================================================
   Ashley: "the chibi image with planet is framed in a circle... it looks like
   facebook. square frame and design it pixel and planets style. look at the
   homepage for inspiration."

   The homepage frames her own photo in 魔法少女.exe: a small window with a
   title bar, a star, three bevelled buttons, graph paper inside (bg21.png),
   and a square picture with a thin frame, a hard shadow and faint
   scanlines. The planet picture at the top of each profile is now that
   window at a smaller size, in the senshi's colours. The title bar carries
   the fuku gradient the way a Windows 98 title bar carries its blue one, and
   the star turns on hover as it does on the homepage (.tb-star, index.css).
   The drawings are square, so the circle was cropping their corners; the
   square frame shows all of each one.

   Markup from profile_badge_window.py. The round rules in 285 still sit
   above; these override them.
   ========================================================================== */
.senshi-art .c2-badge{
  top:166px; width:152px; height:auto; padding:0; border-radius:0;
  background:var(--paper); border:2px solid var(--head);
  box-shadow:3px 3px 0 var(--backbow);
  font-family:basiic, system-ui, sans-serif;
}
.senshi-art .c2-win-bar{
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  padding:3px 3px 3px 5px;
  background:linear-gradient(90deg, var(--name-a), var(--name-b) 60%, var(--name-c));
  border-bottom:2px solid var(--head);
  color:var(--paper); font-size:10.5px; font-weight:700; line-height:1.2;
}
.senshi-art .c2-win-title{
  display:flex; align-items:center; gap:4px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.senshi-art .c2-win-title .tb-star{ flex:none; }
.senshi-art .c2-badge:hover .tb-star{ transform:rotate(180deg) scale(1.25); }
.senshi-art .c2-win-ctl{ display:flex; gap:2px; flex:none; }
.senshi-art .c2-win-ctl i{
  display:block; width:12px; height:11px;
  font-style:normal; font-size:8px; line-height:11px; text-align:center;
  color:var(--ink); background:var(--paper);
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 color-mix(in srgb, var(--head) 70%, #000);
}
.senshi-art .c2-win-body{
  padding:8px;
  background:#fffffa url("images/backgrounds/bg21.png") repeat;
}
.senshi-art .c2-win-pic{ position:relative; display:block; width:136px; height:136px; }
.senshi-art .c2-badge .c2-win-pic img{
  display:block; width:100%; height:100%; max-width:none; box-sizing:border-box;
  border-radius:0; object-fit:cover; background:#fff;
  border:1px solid var(--frontbow);
  box-shadow:2px 2px 0 color-mix(in srgb, var(--head) 30%, transparent);
}
/* the homepage portrait's faint scanlines */
.senshi-art .c2-win-pic::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(46,40,56,.055) 0px, rgba(46,40,56,.055) 1px, transparent 1px, transparent 3px);
  box-shadow:inset 0 0 14px rgba(90,50,104,.10);
}
/* the window is a little wider than the ring was, so the chips move over,
   and they keep enough height that the cards below always clear it */
.senshi-art .c2-chips{ margin-left:204px; min-height:84px; }

@media (max-width:760px){
  .senshi-art .c2{ grid-template-columns:132px minmax(0, 1fr); }
  .senshi-art .c2-badge{
    top:auto; width:112px; height:auto; padding:0; margin:-46px 0 0 10px;
  }
  .senshi-art .c2-win-bar{ font-size:9px; padding:2px 2px 2px 4px; }
  .senshi-art .c2-win-ctl i:not(:last-child){ display:none; }
  .senshi-art .c2-win-body{ padding:6px; }
  .senshi-art .c2-win-pic{ width:100px; height:100px; }
  .senshi-art .c2-chips{ margin-left:12px; min-height:0; }
}


/* ==========================================================================
   287. SAILOR MOON: THE TOP AS SHE DREW IT, AND THE ASTROLOGY BOX  (29 Sep 2026)
   ==========================================================================
   Ashley marked up the live Sailor Moon page: the henshin in the orange box
   with the profile picture floating over it, the stats in the green box, the
   jump buttons struck out. Then, on the mockup: the henshin a little shorter,
   the profile picture bigger, no window decoration, the name and stats on
   their own see-through card with the doily drifting behind it, her Japanese
   call back and the dub line gone, and one paragraph beside a gallery in place
   of the three short texts. In the astrology box: the heading inside the box,
   the zodiac table first, and sect and joy stacked with their pictures on
   alternate sides and the text wrapping round them.

   Built on Sailor Moon only, by build_moon_top.py; the mockup is in
   DO_NOT_UPLOAD\mockups\profile-top-2026-09-29. Everything here is scoped to
   .ptop and .dgplate--v2, which only that page has, so the other profiles
   (still on 285 and 286) do not move. The stat chips reuse .c2-chip from 285.

   THE HENSHIN IS NEVER CUT TOP OR BOTTOM. Its figure takes a spacer the
   height of the picture's own shape (--arp, set in the markup), so the band
   is at least that tall; if the card beside it is taller, the picture fills
   the extra height by losing a little at the sides.
   ========================================================================== */
.senshi-art .ptop{
  position:relative; margin:6px 0 26px; padding:0 0 18px;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--backbow); border-radius:10px; overflow:hidden;
  box-shadow:6px 6px 0 color-mix(in srgb, var(--backbow) 70%, #7a5a10);
}
.senshi-art .ptop::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; z-index:4;
  background:var(--fuku-tile); background-size:320px 100%;
  animation:fuku-scroll 4s steps(48, end) infinite;
}

/* the band: the henshin on the left, the lace drifting under the right */
.senshi-art .ptop-band{
  position:relative; display:grid; grid-template-columns:50% 50%; align-items:stretch;
  margin-top:6px; border-bottom:2px solid var(--backbow);
}
.senshi-art .ptop-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("images/sailormoon/select/lace/frost.png") repeat 0 0; background-size:256px 190px;
  background-color:var(--wash); background-blend-mode:luminosity; opacity:.9;
  animation:kit-doily 80s linear infinite;
}
.senshi-art .ptop-screen{
  position:relative; z-index:1; margin:0; width:100%; min-width:0; box-sizing:border-box;
  overflow:hidden; background:#2b2033; border-right:2px solid var(--backbow);
}
.senshi-art .ptop-screen::before{ content:""; display:block; padding-top:var(--arp); }
.senshi-art .ptop-screen > img{
  position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 50%;
}

/* the profile picture over the henshin's bottom-left corner, in a thin frame */
.senshi-art .ptop-pfp{
  position:absolute; left:12px; bottom:12px; z-index:3; display:block; padding:3px;
  background:var(--paper); border:2px solid var(--head); box-shadow:3px 3px 0 var(--backbow);
}
.senshi-art .ptop-pfp img{
  display:block; width:164px; height:164px; max-width:none; object-fit:cover; background:#fff;
}

/* the name, the call and the stats on a see-through card */
.senshi-art .ptop-side{ position:relative; z-index:1; min-width:0; display:flex; padding:12px 14px; }
.senshi-art .ptop-card{
  flex:1 1 auto; min-width:0; padding:11px 14px 12px;
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .ptop-card .masthead-name{ margin:0 22px 4px 0 !important; justify-content:flex-start !important; }
.senshi-art .ptop-card .masthead-name--lockup .bh-t{ font-size:30px !important; white-space:normal; line-height:1.05; }
.senshi-art .ptop-civ{ font-family:rainyhearts, monospace; font-size:13px; color:var(--head); margin:0 0 6px; }
.senshi-art .ptop-quote{ margin:0 0 10px; padding-left:10px; border-left:3px solid var(--accent); }
.senshi-art .ptop-quote p{ margin:0; }
.senshi-art .ptop-quote .c2-call{ font-size:15px; line-height:1.4; }
.senshi-art .ptop-quote .c2-intro{ font-size:12.5px; line-height:1.45; margin-top:3px; }
.senshi-art .ptop-stats{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.senshi-art .ptop-dl{ display:contents; }
.senshi-art .ptop-dl .c2-chip{ font-size:12px; line-height:1.25; }
.senshi-art .ptop-dl .c2-chip dt{ font-size:10px; padding:2px 6px; }
.senshi-art .ptop-dl .c2-chip dd{ padding:1px 7px; }
.senshi-art .ptop-card .astro-door{
  display:inline-flex; align-items:center; gap:6px; margin:0; padding:1px 10px 1px 5px;
}
.senshi-art .ptop-card .astro-door img{
  display:block; width:20px; height:20px; object-fit:contain; image-rendering:pixelated;
}

/* one paragraph beside the gallery, on the white */
.senshi-art .ptop-about{
  display:grid; grid-template-columns:184px minmax(0, 1fr); gap:20px; align-items:start;
  margin:18px 18px 0;
}
.senshi-art .ptop-gal .kb-cycle{
  position:relative; width:184px; height:214px; box-sizing:border-box; padding:6px;
  background:#fffffa url("images/backgrounds/bg21.png") repeat; border:2px solid var(--backbow);
  box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .ptop-gal .kb-cycle .kb-frame{
  width:100%; height:100%; max-width:none; object-fit:contain; border:0; box-shadow:none; background:none;
}
.senshi-art .ptop-gal .kb-dots{ margin:10px 0 0; justify-content:center; }
.senshi-art .ptop-text p{ font-size:14px; line-height:1.62; margin:0; }
.senshi-art .ptop-text p b{ color:var(--name-a); letter-spacing:.3px; }
.senshi-art .ptop-text p i{ color:var(--name-b); font-style:italic; letter-spacing:.2px; }
.senshi-art .ptop .egg-flame{ top:20px; right:22px; z-index:6; color:var(--head); }

/* ---- the astrology box ---- */
.senshi-art .dgplate--v2{ margin-top:0; padding-top:14px; }
.senshi-art .dgplate--v2 > .dgplate-h{ margin:0 16px 2px; }
.senshi-art .dgplate--v2 > .dgplate-h .bh-t{ font-size:24px; }
/* the zodiac table comes first, so the grid under it takes the gap the table had */
.senshi-art .dgplate--v2 .dgset--table + .dgset{ margin-top:22px; }
/* sect and joy stack; the picture alternates sides and the text wraps round it */
.senshi-art .dgplate--v2 .dgset--stack .dglist--2{ display:block; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card{ display:flow-root; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card + .dg-card{ margin-top:14px; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card .dg-pic{ float:left; width:44%; margin:2px 16px 8px 0; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card:nth-child(even) .dg-pic{ float:right; margin:2px 0 8px 16px; }

@media (prefers-reduced-motion: reduce){
  .senshi-art .ptop::before,
  .senshi-art .ptop-band::before{ animation:none; }
}

@media (max-width:760px){
  .senshi-art .ptop-band{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop-side{ order:-1; padding:10px; }
  .senshi-art .ptop-screen{ border-right:0; border-top:2px solid var(--backbow); }
  .senshi-art .ptop-card .masthead-name--lockup .bh-t{ font-size:26px !important; }
  .senshi-art .ptop-pfp{ left:8px; bottom:8px; padding:2px; }
  .senshi-art .ptop-pfp img{ width:104px; height:104px; }
  .senshi-art .ptop-about{ grid-template-columns:minmax(0, 1fr); margin:16px 12px 0; }
  .senshi-art .ptop-gal .kb-cycle{ margin:0 auto; }
  .senshi-art .dgplate--v2 .dgset--stack .dg-card .dg-pic,
  .senshi-art .dgplate--v2 .dgset--stack .dg-card:nth-child(even) .dg-pic{ float:none; width:100%; margin:0 0 9px; }
}


/* ==========================================================================
   288. SAILOR MOON: THE BUST UP TOP, THE CHIBI BY A WHEEL      (29 Sep 2026)
   ==========================================================================
   Ashley, on the page section 287 built: the gallery pictures were too
   small, so it keeps the first two paintings and grows; the bust becomes the
   profile picture over the henshin (her new Moon bust, moon-bust-anime.png);
   and the chibi-with-her-planet picture moves into the astrology box beside
   the chart. Asked whether the chart could be shown better, she was shown it
   as a wheel and as the narrowed table, and chose the wheel.

   THE WHEEL says what the table said with room to spare: the twelve signs in
   their usual order (Aries at the left, counterclockwise), the four signs of
   domicile, exaltation, detriment and fall tinted in the same colours as the
   four dignity cards beneath it (157), a marker on each in the table's own
   shapes (dgtable.css), and a dashed line joining each pair of opposites,
   which the table had no way to show. Built by build_moon_top2.py, which
   reads the table it replaces. Scoped to .ptop, .dgtop and .dgw.
   ========================================================================== */
.senshi-art .ptop-pfp--bust{ padding:4px; background:color-mix(in srgb, var(--wash) 70%, var(--paper)); }
.senshi-art .ptop-pfp--bust img{
  display:block; width:auto; height:196px; max-width:200px; object-fit:contain; background:none;
}
.senshi-art .ptop-about{ grid-template-columns:262px minmax(0, 1fr); }
.senshi-art .ptop-gal .kb-cycle{ width:262px; height:372px; }

.senshi-art .dgtop{ display:grid; grid-template-columns:200px minmax(0, 1fr); gap:20px; align-items:start; }
.senshi-art .dgtop-pic{
  margin:0; padding:6px; background:#fffffa url("images/backgrounds/bg21.png") repeat;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow);
}
.senshi-art .dgtop-pic img{ display:block; width:100%; height:auto; max-width:none; }

.senshi-art .dgw{ display:grid; grid-template-columns:300px minmax(0, 1fr); gap:18px; align-items:center; min-width:0; }
.senshi-art .dgw-svg{ display:block; width:100%; height:auto; }
.senshi-art .dgw-face{ fill:var(--paper); }
.senshi-art .dgw-ring{ fill:none; stroke:var(--head); stroke-width:1.8; }
.senshi-art .dgw-spoke{ stroke:var(--backbow); stroke-width:1.2; }
.senshi-art .dgw-opp{ stroke:var(--head); stroke-width:1.6; stroke-dasharray:5 4; opacity:.7; }
.senshi-art .dgw-svg image{ image-rendering:pixelated; }
.senshi-art .dgw-m--on{ fill:var(--head); }
.senshi-art .dgw-m--off{ fill:var(--accent); }
.senshi-art .dgw-m--ring{ fill:var(--paper); stroke:var(--accent); stroke-width:2.4; }
.senshi-art .dgw-hub{ fill:var(--paper); stroke:var(--backbow); stroke-width:2; }
.senshi-art .dgw-key{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.senshi-art .dgw-key li{
  display:grid; grid-template-columns:20px auto 1fr; align-items:center; gap:4px 8px;
  font-size:13.5px; line-height:1.3;
}
.senshi-art .dgw-km{ display:flex; justify-content:center; }
.senshi-art .dgw-ks a{ color:var(--ink); text-decoration:none; border-bottom:1px dotted currentColor; }
.senshi-art .dgw-note{ margin:0 0 10px; padding-top:12px; font-size:12.5px; line-height:1.5; opacity:.8; }

@media (max-width:760px){
  .senshi-art .ptop-pfp--bust img{ height:128px; max-width:130px; }
  .senshi-art .ptop-about{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .dgtop{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .dgtop-pic{ width:200px; margin:0 auto; box-sizing:border-box; }
  .senshi-art .dgw{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .dgw-svg{ max-width:300px; margin:0 auto; }
}


/* ==========================================================================
   289. SAILOR MOON: THE TOP, THE WHEEL AND THE THREAD TABS    (29 Sep 2026)
   ==========================================================================
   Ashley worked the Sailor Moon profile over in rounds of mockups
   (DO_NOT_UPLOAD\mockups\profile-top-2026-09-29, sailor-moon-mockup-c8 to
   c12) and approved the last: "very good". What changed from 287 and 288:
   - the bust moved into the stats card, top right, with a gold halo and a
     slow bob; the henshin narrowed and fades out on its right into the lace
   - the stats and the paragraph one size up; "read the Moon page" under the
     paragraph; the gallery as tall as the paragraph beside it
   - the astrology heading back above the box; "dignity" over the four cards;
     the chibi picture and the wheel moved under them, the key to the wheel's
     right, the sign glyphs at exactly twice their 16px size
   - sect and joy pictures at their own 4:3 shape (3:2 was squashing them)
   - "her kit" became "powers and transformations" (markup only)
   - the threads fold into tabs, coloured down the list from the skirt
     colour to the bow colour, with the fuku strip along each tab's foot.
     js/threadtabs.js does the folding and the colours on load, so adding or
     removing a thread re-spreads the colours with no rebuild

   The rules are in the order the rounds made them, so a later one sometimes
   overrides an earlier one; that keeps the page exactly as approved. All of
   it is scoped to classes only this page has (.ptop, .dgplate--v2, .dgtop,
   .dgw, .astro--v2, .thread--fold), so no other profile moves.
   ========================================================================== */

/* ---- the bust as a sticker ---- */
.senshi-art .ptop-pfp--bust{ padding:0; background:none; border:0; box-shadow:none; left:14px; bottom:10px; }
.senshi-art .ptop-pfp--bust img{
  height:176px; max-width:190px;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
         drop-shadow(3px 3px 0 var(--backbow));
}

/* ---- the paragraph fills the height of the gallery ---- */
.senshi-art .ptop-about{ grid-template-columns:236px minmax(0, 1fr); gap:22px; }
.senshi-art .ptop-gal .kb-cycle{ width:236px; height:336px; }
.senshi-art .ptop-text p{ font-size:16px; line-height:1.72; }

/* ---- the chibi picture and the wheel side by side, the key underneath ---- */
.senshi-art .dgtop--wheel{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px 28px; align-items:center;
  grid-template-areas:"pic wheel" "side side";
}
.senshi-art .dgtop--wheel .dgw{ display:contents; }
.senshi-art .dgtop--wheel .dgtop-pic{ grid-area:pic; padding:0; background:none; border:0; box-shadow:none;
  justify-self:start; width:100%; max-width:330px; }
/* the drawing sits on an off-white card; multiply lets the page's own paper show through it */
.senshi-art .dgtop--wheel .dgtop-pic img{ mix-blend-mode:multiply; }
.senshi-art .dgtop--wheel .dgw-svg{ grid-area:wheel; justify-self:end; width:100%; max-width:330px; }
.senshi-art .dgtop--wheel .dgw-side{ grid-area:side; display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:center; gap:6px 22px; padding-top:12px; border-top:1px solid var(--backbow); margin-top:4px; }
.senshi-art .dgtop--wheel .dgw-key{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; }
.senshi-art .dgtop--wheel .dgw-key li{ grid-template-columns:18px auto auto; }
.senshi-art .dgtop--wheel .dgw-note{ flex:1 1 100%; text-align:center; padding-top:4px; margin:0; }
.senshi-art .dgtop--wheel .dgt-cap--more{ flex:1 1 100%; text-align:center; margin:0; }

@media (max-width:760px){
  .senshi-art .ptop-pfp--bust img{ height:118px; max-width:128px; }
  .senshi-art .ptop-about{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop-gal .kb-cycle{ width:236px; }
  .senshi-art .ptop-text p{ font-size:15px; }
  .senshi-art .dgtop--wheel{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"pic" "wheel" "side"; }
  .senshi-art .dgtop--wheel .dgtop-pic{ justify-self:center; max-width:260px; margin:0; }
  .senshi-art .dgtop--wheel .dgw-svg{ justify-self:center; max-width:300px; }
  .senshi-art .dgtop--wheel .dgw-key{ flex-direction:column; align-items:flex-start; }
}

/* ---- the bust inside the card, top right, with a halo and a slow bob ---- */
.senshi-art .ptop-card{ display:flow-root; }
.senshi-art .ptop-band{ grid-template-columns:46% 54%; }
.senshi-art .ptop-cardbust{ float:right; margin:-4px 16px 2px 10px; }
.senshi-art .ptop-cardbust img{
  display:block; width:auto; height:102px; max-width:112px;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--backbow) 85%, transparent))
         drop-shadow(0 4px 5px rgba(40, 20, 60, .22));
  animation:ptop-bob 5.5s ease-in-out infinite;
}
@keyframes ptop-bob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce){ .senshi-art .ptop-cardbust img{ animation:none; } }
.senshi-art .ptop-card .masthead-name{ margin-right:0 !important; }
/* the stats start under the bust, at the card's full width */
.senshi-art .ptop-stats{ clear:both; }
.senshi-art .ptop-card .masthead-name--lockup .bh-t{ font-size:28px !important; }

/* ---- the paragraph and gallery a little smaller ---- */
.senshi-art .ptop-about{ grid-template-columns:184px minmax(0, 1fr); gap:20px; margin-top:16px; }
.senshi-art .ptop-gal .kb-cycle{ width:184px; height:264px; }
.senshi-art .ptop-gal .kb-dots{ margin-top:8px; }
.senshi-art .ptop-text p{ font-size:15px; line-height:1.66; }
.senshi-art .ptop{ margin-bottom:18px; padding-bottom:14px; }

/* ---- dignity: the picture and the wheel closer together and smaller ---- */
.senshi-art .dgplate--v2{ padding-top:10px; }
.senshi-art .dgplate--v2 > .dgplate-h{ margin-bottom:0; }
.senshi-art .dgplate--v2 .dgplate-cols{ padding-top:4px; }
.senshi-art .dgplate--v2 .dgset--table > .dgset-h{ margin-bottom:10px; }
.senshi-art #astrology.astro--v2{ margin-top:0; padding-top:0; }
.senshi-art .dgtop--wheel{ grid-template-columns:repeat(2, 262px); justify-content:center; gap:10px 56px; }
.senshi-art .dgtop--wheel .dgtop-pic{ max-width:262px; }
.senshi-art .dgtop--wheel .dgw-svg{ max-width:262px; }
.senshi-art .dgtop--wheel .dgw-key{ gap:6px 14px; }
.senshi-art .dgtop--wheel .dgw-key li{ font-size:13px; gap:4px 6px; }
/* the drawing's card is a shade warmer than the page; its edges fade out so no box shows */
.senshi-art .dgtop--wheel .dgtop-pic img{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                     linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
             linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite:intersect;
}

@media (max-width:760px){
  .senshi-art .ptop-band{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop-cardbust img{ height:92px; max-width:100px; }
  .senshi-art .ptop-about{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop-gal .kb-cycle{ width:220px; height:315px; }
  .senshi-art .dgtop--wheel{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .senshi-art .dgtop--wheel .dgtop-pic{ max-width:240px; }
  .senshi-art .dgtop--wheel .dgw-svg{ max-width:280px; }
}

/* ---- the henshin smaller, the card wider, the bust bigger; the stats wrap round the bust ---- */
.senshi-art .ptop-band{ grid-template-columns:40% 60%; }
.senshi-art .ptop-cardbust img{ height:150px; max-width:160px; }
.senshi-art .ptop-cardbust{ margin:-6px 14px 2px 12px; }
.senshi-art .ptop-stats{ clear:none; display:block; }
.senshi-art .ptop-stats .ptop-dl{ display:inline; }
.senshi-art .ptop-stats .c2-chip{ display:inline-flex; vertical-align:top; margin:0 5px 5px 0; }
.senshi-art .ptop-stats .astro-door{ vertical-align:top; margin:0 0 5px; }
@media (max-width:760px){
  .senshi-art .ptop-band{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop-cardbust img{ height:104px; max-width:112px; }
}

/* ---- the henshin fades into the lace on its right ---- */
.senshi-art .ptop-screen{ border-right:0;
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 80%, transparent 100%);
  mask-image:linear-gradient(to right, #000 0%, #000 80%, transparent 100%); }

/* ---- the stats one size up ---- */
.senshi-art .ptop-civ{ font-size:14px; }
.senshi-art .ptop-quote .c2-call{ font-size:16px; }
.senshi-art .ptop-quote .c2-intro{ font-size:13.5px; }
.senshi-art .ptop-dl .c2-chip{ font-size:13px; }
.senshi-art .ptop-dl .c2-chip dt{ font-size:11px; padding:2px 7px; }
.senshi-art .ptop-dl .c2-chip dd{ padding:2px 8px; }

/* ---- the paragraph one size up, the gallery level with it ---- */
.senshi-art .ptop-text p{ font-size:16px; line-height:1.58; }
.senshi-art .ptop{ margin-bottom:12px; padding-bottom:12px; }
.senshi-art .ptop-band{ grid-template-columns:38% 62%; }
.senshi-art .ptop-stats .c2-chip{ margin:0 5px 4px 0; line-height:1.2; }

/* ---- a little less space above the dignity cards ---- */
.senshi-art .dgplate--v2{ padding-top:8px; }
.senshi-art .dgplate--v2 .dgplate-cols{ padding-top:0; }
.senshi-art .dgplate--v2 .dgset--cards > .dgset-h{ margin-bottom:8px; }
.senshi-art .dgplate--v2 .dgset--cards .dglist--2{ padding:10px; }
.senshi-art .ptop-about{ grid-template-columns:var(--gal-w, 200px) minmax(0, 1fr); }
.senshi-art .ptop-gal .kb-cycle{ width:var(--gal-w, 200px); height:var(--gal-h, 288px); }

/* ---- picture, wheel, then the key in a column to the wheel's right ---- */
.senshi-art .dgtop--wheel{ grid-template-columns:220px 300px minmax(0, 1fr); grid-template-areas:"pic wheel side";
  gap:0 22px; justify-content:stretch; align-items:center; }
.senshi-art .dgtop--wheel .dgtop-pic{ max-width:220px; }
.senshi-art .dgtop--wheel .dgw-svg{ width:300px; max-width:none; justify-self:center; }
.senshi-art .dgtop--wheel .dgw-side{ display:block; border-top:0; margin:0; padding:0; }
.senshi-art .dgtop--wheel .dgw-key{ display:grid; justify-content:start; gap:7px; }
.senshi-art .dgtop--wheel .dgw-key li{ grid-template-columns:16px auto 1fr; font-size:12.5px; gap:3px 6px; }
.senshi-art .dgtop--wheel .dgw-note{ text-align:left; font-size:12px; line-height:1.5; padding:0; margin:12px 0 8px; }
.senshi-art .dgtop--wheel .dgt-cap--more{ text-align:left; }
.senshi-art .dgtop--wheel .dgt-cap--more .dgt-lnk{ font-size:13px; }

@media (max-width:760px){
  .senshi-art .ptop-band{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop-screen{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%); }
  .senshi-art .ptop-text p{ font-size:16px; }
  .senshi-art .ptop-about{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop-gal .kb-cycle{ width:220px; height:315px; }
  .senshi-art .dgtop--wheel{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"pic" "wheel" "side"; gap:14px; }
  .senshi-art .dgtop--wheel .dgw-svg{ width:300px; max-width:100%; }
}

/* ---- the astrology heading above the box again ---- */

/* ---- a little tighter, so the dignity pictures still show on the first screen ---- */
.senshi-art .ptop-band{ grid-template-columns:36% 64%; }
.senshi-art .ptop-about{ margin-top:12px; }
.senshi-art .ptop-text p{ line-height:1.52; }
/* the gallery as tall as the paragraph and the button under it */
.senshi-art .ptop-about{ --gal-w:224px; --gal-h:322px; }
.senshi-art #astrology.astro--v2 > .block-h{ margin-bottom:6px; }
.senshi-art .dgplate--v2{ padding-top:8px; }

/* ---- the door under the paragraph ---- */
.senshi-art .ptop-text .astro-door{ display:inline-flex; align-items:center; gap:7px; margin:10px 0 0; padding:4px 12px 4px 6px; }
.senshi-art .ptop-text .astro-door img{ display:block; width:24px; height:24px; object-fit:contain; image-rendering:pixelated; }

/* ---- sect and joy: the pictures at their own shape, half the card wide ---- */
.senshi-art .dgplate--v2 .dgset--stack .dg-card .dg-pic{ width:50%; height:auto; aspect-ratio:auto; object-fit:fill; }
.senshi-art .dgplate--v2 .dgset--stack .dg-tie{ border-top:0; padding-top:0; margin-top:10px; }

/* ---- the threads as folding tabs ---- */
/* #threads in the selector so these win over the Silver Crystal's own silver box (and any other
   thread styled by its id) */
.senshi-art #threads .thread.thread--fold{ padding:0; border:0; background:none; box-shadow:none; }
.senshi-art #threads .thread--fold .th-head .thread-kind{ background:none; color:#f0e7cf; padding:0; }
.senshi-art .threads-block .thread--fold + .thread--fold{ margin-top:10px; }
.senshi-art .th-det{ margin:0; padding:0; border:0; border-radius:0; background:none; font-family:inherit; }
.senshi-art .th-det > summary.th-head{
  list-style:none; position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0; padding:12px 16px 15px 18px; cursor:pointer;
  background:linear-gradient(90deg, var(--th-bar), color-mix(in srgb, var(--th-bar) 84%, #fff));
  border:0; border-radius:0 7px 7px 0; box-shadow:3px 3px 0 color-mix(in srgb, var(--th-bar) 45%, var(--backbow));
  animation:none; will-change:auto; color:#fffdf7;
}
.senshi-art .th-det > summary.th-head::-webkit-details-marker{ display:none; }
.senshi-art .th-det > summary.th-head::marker{ content:""; }
.senshi-art .th-det > summary.th-head::before{ content:"\25B8"; font-size:13px; color:#f0e7cf; opacity:.9; }
.senshi-art .th-det[open] > summary.th-head::before{ content:"\25BE"; }
/* the fuku strip along the foot of each bar */
.senshi-art .th-det > summary.th-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--fuku-tile); background-size:320px 100%; animation:fuku-scroll 4s steps(48, end) infinite;
}
.senshi-art .th-det > summary.th-head:hover{ filter:brightness(1.1); }
.senshi-art .th-det > summary.th-head:focus-visible{ outline:2px dashed var(--head); outline-offset:3px; }
.senshi-art .th-head .thread-mark{ display:none; }
.senshi-art .th-head .thread-title{ margin:0; font-size:19px; letter-spacing:.3px; color:#fffdf7; }
.senshi-art .th-head .thread-kind{ margin-left:auto; font-size:12px; color:#f0e7cf; background:none; border:0; padding:0; }
.senshi-art .th-body{ padding:16px 16px 6px; background:var(--paper);
  border:1px solid color-mix(in srgb, var(--th-bar) 30%, var(--backbow)); border-top:0; }
@media (prefers-reduced-motion: reduce){ .senshi-art .th-det > summary.th-head::after{ animation:none; } }
@media (max-width:760px){
  .senshi-art .ptop-band{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .dgplate--v2 .dgset--stack .dg-card .dg-pic{ width:100%; float:none; margin:0 0 9px; }
  .senshi-art .th-head .thread-title{ font-size:17px; }
  .senshi-art .th-head .thread-kind{ margin-left:0; width:100%; }
}


/* ==========================================================================
   290. SAILOR MOON: BIGGER PICTURES, THE WHEEL FRAME, THE JUNK DRAWER
                                                                (29 Sep 2026)
   ==========================================================================
   Ashley on the page built in 289: "bust profile image larger please. chibi
   senshi with planet. larger, and add the same slight up down animation to
   this image as well. add a frame to the wheel and text or a drop shadow...
   or smth to give it a little more depth... the junk drawer needs to be
   easier to navigate." She approved the mockup
   (DO_NOT_UPLOAD\mockups\profile-top-2026-09-29\sailor-moon-mockup-c13.html):
   "love it. apply it all to sailor moon's page please."
   - the bust in the stats card taller (190px)
   - the chibi picture 250px wide and bobbing like the bust, a beat behind it
   - the wheel and its key in one frame: graph paper, a gold edge, a hard
     shadow in the bow colour, and a soft shadow under the wheel; the wheel
     stays 300px so its glyphs stay exactly twice their pixel size
   - the junk drawer (.junkdump--v2): everything scaled to a shorter shelf,
     and under it the controls from js/junkshelf.js - back, a big slider in
     the fuku colours, forward. With scripts off, the shelf keeps its own
     scroll bar, in the site colours.
   Only pages with .ptop, .dgtop--wheel or .junkdump--v2 are touched; the
   other profiles pick these up when they get the same markup.
   ========================================================================== */

/* ---- the bust bigger ---- */
.senshi-art .ptop-cardbust img{ height:190px; max-width:200px; }

/* ---- the chibi picture bigger and bobbing, the wheel and key in one frame ---- */
.senshi-art .dgtop--wheel{ grid-template-columns:250px minmax(0, 1fr); grid-template-areas:"pic panel"; gap:0 10px; }
.senshi-art .dgtop--wheel .dgtop-pic{ max-width:250px; }
.senshi-art .dgtop--wheel .dgtop-pic img{ animation:ptop-bob 5.5s ease-in-out -2.2s infinite; }
.senshi-art .dgtop--wheel .dgw{
  display:grid; grid-area:panel; grid-template-columns:300px minmax(0, 1fr); grid-template-areas:"wheel side";
  gap:0 12px; align-items:center; padding:12px;
  background:var(--paper) url("images/backgrounds/bg21.png") repeat;
  border:2px solid var(--backbow); border-radius:8px; box-shadow:4px 4px 0 var(--frontbow);
}
.senshi-art .dgtop--wheel .dgw-svg{ filter:drop-shadow(0 4px 5px rgba(40, 20, 60, .22)); }
.senshi-art .dgtop--wheel .dgw-side{ align-self:center; }
.senshi-art .dgtop--wheel .dgw-key li{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 5px; white-space:nowrap; }
.senshi-art .dgtop--wheel .dgw-km{ width:16px; flex:none; }
@media (prefers-reduced-motion: reduce){ .senshi-art .dgtop--wheel .dgtop-pic img{ animation:none; } }

/* ---- the junk drawer: a shorter shelf, and the controls under it ---- */
.senshi-art .junkdump--v2 .junk-shelf{ --shelf-h:300px !important; }
.senshi-art .junkdump--v2 .junk-shelf .junk-gif--photo{ max-height:270px; width:auto; height:auto; }
.senshi-art .junkdump--v2 .junk-shelf .junk-gif--sticker{ max-height:190px; width:auto; height:auto; }
/* with scripts off: the shelf's own bar, big and in the fuku colours */
.senshi-art .junkdump--v2 .junk-shelf{ scrollbar-width:auto; scrollbar-color:var(--head) var(--wash); }
.senshi-art .junkdump--v2 .junk-shelf::-webkit-scrollbar{ height:18px; }
.senshi-art .junkdump--v2 .junk-shelf::-webkit-scrollbar-track{ background:var(--wash); border-radius:0; border-top:2px solid var(--backbow); }
.senshi-art .junkdump--v2 .junk-shelf::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, var(--name-a), var(--name-b) 60%, var(--name-c)); border-radius:0;
  border:2px solid var(--backbow); }
/* with the controls in, the shelf's own bar goes: one bar only */
.senshi-art .junkdump--v2 .junk-shelf--ctl{ scrollbar-width:none; }
.senshi-art .junkdump--v2 .junk-shelf--ctl::-webkit-scrollbar{ display:none; }
.senshi-art .junkdump--v2 .junk-in:not(:checked) ~ .junk-ctl{ display:none; }
.senshi-art .junk-ctl{ display:flex; align-items:center; gap:12px; margin:12px 0 0; }
.senshi-art .junk-arrow{
  flex:none; width:44px; height:34px; padding:0; cursor:pointer;
  font:14px/1 rainyhearts, monospace; color:#fafafc; background:#717176;
  border:3px outset var(--backbow); border-radius:0;
}
.senshi-art .junk-arrow:hover{ filter:brightness(1.15); }
.senshi-art .junk-arrow:active{ border-style:inset; }
.senshi-art .junk-arrow:focus-visible{ outline:2px dotted var(--head); outline-offset:2px; }
.senshi-art .junk-ctl.is-start .junk-arrow--back,
.senshi-art .junk-ctl.is-end .junk-arrow--on{ opacity:.45; cursor:default; }
.senshi-art .junk-ctl.is-still{ display:none; }
/* the slider: a graph-paper track, a thumb in the fuku colours */
.senshi-art .junk-slide{ flex:1 1 auto; min-width:0; height:34px; margin:0; background:none; cursor:pointer;
  -webkit-appearance:none; appearance:none; }
.senshi-art .junk-slide:focus-visible{ outline:2px dotted var(--head); outline-offset:3px; }
.senshi-art .junk-slide::-webkit-slider-runnable-track{
  height:18px; background:#fffffa url("images/backgrounds/bg21.png") repeat; border:2px solid var(--backbow);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.12); }
.senshi-art .junk-slide::-moz-range-track{
  height:14px; background:#fffffa url("images/backgrounds/bg21.png") repeat; border:2px solid var(--backbow); }
.senshi-art .junk-slide::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:72px; height:30px; margin-top:-8px; cursor:grab;
  background:linear-gradient(90deg, var(--name-a), var(--name-b) 60%, var(--name-c));
  border:3px outset var(--backbow); border-radius:0; box-shadow:3px 3px 0 rgba(10,20,35,.3); }
.senshi-art .junk-slide::-moz-range-thumb{
  width:66px; height:24px; cursor:grab;
  background:linear-gradient(90deg, var(--name-a), var(--name-b) 60%, var(--name-c));
  border:3px outset var(--backbow); border-radius:0; box-shadow:3px 3px 0 rgba(10,20,35,.3); }
.senshi-art .junk-slide:active::-webkit-slider-thumb{ cursor:grabbing; }

@media (max-width:760px){
  .senshi-art .ptop-cardbust img{ height:118px; max-width:126px; }
  .senshi-art .dgtop--wheel{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"pic" "panel"; gap:14px; }
  .senshi-art .dgtop--wheel .dgtop-pic{ justify-self:center; max-width:250px; }
  .senshi-art .dgtop--wheel .dgw{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"wheel" "side"; gap:12px; }
  .senshi-art .dgtop--wheel .dgw-svg{ width:100%; max-width:300px; }
  .senshi-art .junkdump--v2 .junk-shelf{ --shelf-h:280px !important; }
  .senshi-art .junkdump--v2 .junk-shelf .junk-gif--photo{ max-height:240px; }
  .senshi-art .junkdump--v2 .junk-shelf .junk-gif--sticker{ max-height:170px; }
  .senshi-art .junk-slide::-webkit-slider-thumb{ width:56px; }
}


/* ==========================================================================
   291. THE PROFILES: DRAWER, CONDITION BOXES, SPACING, AND MOON'S CARD
                                                                (30 Sep 2026)
   ==========================================================================
   Ashley on the Sailor Moon profile, in mockups c14 to c18
   (DO_NOT_UPLOAD\mockups\profile-top-2026-09-29), approved: "roll out the
   new updates plz". Built by build_profiles_c18.py.

   ON ALL NINE PROFILES
   - the space above "in hellenistic astrology" is a section's width again
     ("super smushed from our edits before")
   - the junk drawer: every picture at its own size, packed into columns so
     short ones stack beside tall ones ("make the contents of the junk drawer
     taller, and rearrange the junk to flow"); the shelf is scaled as one
     piece (zoom) to at most 540px on a computer and 440px on a phone, the
     numbers written onto each shelf by the build; and "move the gallery to
     the top of the junk drawer box, and the counter, divider and gif to the
     bottom". Only drawers with a shelf are reordered (Helios has one sprite).
   - sect and joy: the picture whole, half the card wide, centred beside the
     words ("don't crop the condition images"; "go with b"). Only cards that
     have a picture.

   ON SAILOR MOON ONLY (.ptop--v3; "Moon only for now")
   - two paragraphs; the glyph by the name; no civilian line; no guardian
     planet stat; the stats one under another; the bust 254px (258px is the
     most before the last stat drops under it); the henshin 32% of the band
   ========================================================================== */

/* ---- the space above "in hellenistic astrology" ---- */
.senshi-art .ptop{ margin-bottom:30px; }

/* ---- the junk drawer: taller, every picture at its own size, packed to flow ---- */
.senshi-art .junkdump--v2 .junk-shelf .junk-row.junk-row--flow{ height:var(--junk-h); zoom:var(--junk-zoom, 1); justify-content:space-evenly; }
.senshi-art .junkdump--v2 .junk-shelf .junk-row--flow .junk-gif--photo,
.senshi-art .junkdump--v2 .junk-shelf .junk-row--flow .junk-gif--sticker{ max-height:none; }
.senshi-art .junkdump--v2 .junk-shelf .junk-row--flow > li.junk-brk{
  flex:0 0 100%; width:0; min-width:0; padding:0; margin:0; border:0; transform:none; visibility:hidden; }
.senshi-art .junkdump--v2 .junk-shelf .junk-row--flow > li.junk-brk::before{ content:none; }
/* the drawer's order: pictures, controls and the one shut/open button first; the desk, title,
   counter, the line under them and its divider at the foot. Done with order, so the page still
   reads title-first to a screen reader. */
.senshi-art .junkdump--v2:has(> .junk-shelf){ display:flex; flex-direction:column; }
.senshi-art .junkdump--v2:has(> .junk-shelf) > .junk-shelf{ order:1; }
.senshi-art .junkdump--v2:has(> .junk-shelf) > .junk-ctl{ order:2; }
.senshi-art .junkdump--v2:has(> .junk-shelf) > .junk-pull{ order:3; align-self:flex-start; margin:14px 0 18px; }
.senshi-art .junkdump--v2:has(> .junk-shelf) > .junk-pull--foot{ display:none; }    /* one button is enough now */
.senshi-art .junkdump--v2:has(> .junk-shelf) > .junk-head{ order:4; }
.senshi-art .junkdump--v2:has(> .junk-shelf) > .junkdump-sub{ order:5; margin-bottom:0; }
.senshi-art .junkdump--v2:has(> .junk-shelf) > .junk-note{ order:6; }
@media (max-width:760px){
  .senshi-art .junkdump--v2 .junk-shelf .junk-row.junk-row--flow{ height:var(--junk-h); zoom:var(--junk-zoom-sm, 1); }
}

/* ---- sect and joy: the whole picture beside the words ---- */
.senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic){
  display:grid; grid-template-columns:50% minmax(0, 1fr); grid-template-rows:auto 1fr;
  grid-template-areas:"pic dt" "pic dd"; column-gap:20px; align-items:start; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic):nth-child(even){
  grid-template-columns:minmax(0, 1fr) 50%; grid-template-areas:"dt pic" "dd pic"; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic) .dg-pic,
.senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic):nth-child(even) .dg-pic{
  grid-area:pic; float:none; align-self:center; width:100%; height:auto; margin:0; aspect-ratio:auto; object-fit:fill; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic) > dt{ grid-area:dt; }
.senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic) > dd{ grid-area:dd; margin:0; }
@media (max-width:760px){
  .senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic),
  .senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic):nth-child(even){ display:block; }
  .senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic) .dg-pic,
  .senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic):nth-child(even) .dg-pic{ margin:0 0 9px; }
}
/* ---- Sailor Moon's card ---- */
.senshi-art .ptop--v3 .ptop-text p + p{ margin-top:24px; }
.senshi-art .ptop--v3 .ptop-card .masthead-name .ptop-glyph{
  display:block; flex:none; width:40px; height:40px; max-width:none; margin:0; image-rendering:pixelated; }
.senshi-art .ptop--v3 .ptop-band{ grid-template-columns:32% 68%; }
.senshi-art .ptop--v3 .ptop-cardbust{ margin:-6px -6px 2px 8px; }
.senshi-art .ptop--v3 .ptop-cardbust img{ height:254px; max-width:290px; }
.senshi-art .ptop--v3 .ptop-stats .ptop-dl{ display:block; margin:0; }
.senshi-art .ptop--v3 .ptop-stats .c2-chip{ display:flex; width:fit-content; max-width:100%; margin:0 0 4px; }
.senshi-art .ptop--v3 .ptop-stats .ptop-dl .c2-chip dd{ padding-top:1px; padding-bottom:1px; }
.senshi-art .ptop--v3 .ptop-card .ptop-quote{ margin-bottom:8px; }
@media (max-width:760px){
  .senshi-art .ptop--v3 .ptop-band{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop--v3 .ptop-cardbust{ margin:-4px -4px 2px 6px; }
  .senshi-art .ptop--v3 .ptop-cardbust img{ height:140px; max-width:150px; }
}


/* ==========================================================================
   292. THE PROFILES: THE BAND'S DOILY, THE PAGE BUTTON, MOON'S BUST
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c20.py, which also renames the sun stat and marks
   the dignity cards' sign names for the glossary hovers (markup only).

   ON ALL NINE
   - "for the doily background behind the henshin pic, I see you chose the
     pearl color. can you please switch the background to the pink doily?...
     the same one you have in the condition box." The band's lace now takes
     the page's --lace tint through the same white wash and luminosity blend
     as the dignity and condition mats (section 164), a little stronger so it
     still shows through the see-through stats card.
   - "the button 'read the moon page' the font is too small." 16px, from 14.

   ON SAILOR MOON ONLY (.ptop--v3)
   - "can the bust get any bigger?" Shown three sizes, she chose C: the
     henshin gives the card a little width (29% of the band) and the bust
     tucks further into the card's top-right corner. 285px is the most before
     "dislikes" drops under it; 281px leaves a few pixels for fonts that draw
     a touch wider on another screen. The card is no taller than before.
   ========================================================================== */
.senshi-art .ptop-band::before{
  background-image:linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
    url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat; background-size:cover, 256px 190px;
  background-color:var(--lace); background-blend-mode:normal, luminosity; opacity:.6;
  animation-name:lace-drift-bg; }
.senshi-art .ptop-text .astro-door{ margin-top:9px; }
.senshi-art .ptop-text .astro-door span{ font-size:16px; }

.senshi-art .ptop--v3 .ptop-band{ grid-template-columns:29% 71%; }
.senshi-art .ptop--v3 .ptop-cardbust{ margin:-10px -10px 2px 8px; }
.senshi-art .ptop--v3 .ptop-cardbust img{ height:281px; max-width:none; }
@media (max-width:760px){
  .senshi-art .ptop--v3 .ptop-band{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .ptop--v3 .ptop-cardbust{ margin:-4px -4px 2px 6px; }
  .senshi-art .ptop--v3 .ptop-cardbust img{ height:140px; max-width:150px; }
}


/* ==========================================================================
   293. THE PROFILES: THE DIGNITY TERMS, MOON'S STATS, THE CHIBI CROPS
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c22.py, which also moves the dignity marks into
   the card headings and points the pictures at the crops (markup).

   SAILOR MOON'S STATS (.ptop--v3)
   - "stats font is still too small. bump it up one size. if the box gets
     slightly taller, let it this time." Values 14px, labels 12px. The chips
     give back a little padding and the bust sits 6px closer, so "likes" and
     "dislikes" still fit beside it on one line. The card is 9px taller.

   THE CHIBI CROPS (.dgtop-img--crop)
   - "here are the chibi with planet images newly cropped to the edges. they
     are now all different sizes. please use these and adjust as needed."
     Each crop keeps its own shape and is fitted inside the 250px column,
     as tall as the wheel's frame beside it: the picture is taken out of the
     flow so it can't make the row taller, and centred in it. No faded edges
     now - the crops are cut to the drawing and the fade would eat hands and
     hair. On a phone the picture is back in the flow, up to 340px tall.
   ========================================================================== */
.senshi-art .ptop--v3 .ptop-dl .c2-chip{ font-size:14px; }
.senshi-art .ptop--v3 .ptop-dl .c2-chip dt{ font-size:12px; padding-left:5px; padding-right:5px; letter-spacing:.2px; }
.senshi-art .ptop--v3 .ptop-stats .ptop-dl .c2-chip dd{ padding-left:6px; padding-right:6px; }
.senshi-art .ptop--v3 .ptop-cardbust{ margin-left:2px; }

.senshi-art .dgtop--wheel .dgtop-pic:has(> .dgtop-img--crop){
  position:relative; align-self:stretch; justify-self:center; width:250px; max-width:250px; }
.senshi-art .dgtop--wheel .dgtop-pic .dgtop-img--crop{
  position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%;
  -webkit-mask-image:none; mask-image:none; }
@media (max-width:760px){
  .senshi-art .ptop--v3 .ptop-cardbust{ margin-left:6px; }
  .senshi-art .dgtop--wheel .dgtop-pic:has(> .dgtop-img--crop){ position:static; align-self:auto; width:auto; }
  .senshi-art .dgtop--wheel .dgtop-pic .dgtop-img--crop{ position:static; max-height:340px; margin:0 auto; }
}


/* ==========================================================================
   294. THE PROFILES: BIGGER ASTROLOGY HEADINGS, THE PAGE BUTTON'S ICON
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c24.py, which also lets the junk drawer's shelf
   stay full size (the zoom values are written into each page's markup).

   - "the header words under 'in hellenistic astrology.' words like,
     dignity, domicile, exaltation, condition... the headings of sections.
     font size bigger." rainyhearts draws small for its size, so it takes
     26px for "dignity" and "condition" and 22px for the card headings to
     read as headings over the 14.5px text.
   - "did you shrink the favicon inside the 'read the moon page' button.
     please don't if you did." Section 289 drew it at 24px. Back to its own
     40px; the button drops its top and bottom padding so it only grows by
     what the icon adds. With a little less space under "dignity", the
     first dignity picture still starts where it did (above the fold).
   - Sailor Moon's kit cards (.kit-cap--v2): "the text inside each of the
     video descriptions... fix the headers. these look so messy." The move
     is the card's heading, a transformation/attack label over its name, and
     one paragraph sits beside the object. The sprite keeps its own frame,
     size and animation; only where it sits in the card changed.
   ========================================================================== */
.senshi-art .dgplate .dgset > .dgset-h{ font-size:26px; line-height:1; }
/* the bigger heading and icon would push the first dignity picture under the fold; this gives it back */
.senshi-art .dgplate--v2 .dgset--cards > .dgset-h{ margin-bottom:3px; }
.senshi-art .dgplate .dg-card > dt{ font-size:22px; line-height:1.2; }
.senshi-art .ptop-text .astro-door{ padding-top:0; padding-bottom:0; margin-top:4px; }
.senshi-art .ptop-text .astro-door img.planet-px{ width:40px; height:40px; }
/* ---- Sailor Moon's kit cards: the move as the heading, one paragraph  ---- */
.senshi--moon .senshi-art .ks-panel .kit--merged > .kit-cap.kit-cap--v2{
  display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"head head" "shot text";
  gap:10px 14px; align-items:start; align-content:start; }
.senshi--moon .senshi-art .ks-panel .kit--lane > .kit-cap.kit-cap--v2{
  grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"head head" "text shot"; }
.senshi--moon .senshi-art .ks-panel .kit-cap--v2 > .kc-head{
  grid-area:head; display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin:0; padding:0 0 8px;
  border-bottom:2px dotted var(--backbow); }
.senshi--moon .senshi-art .ks-panel .kit-cap--v2 > .kc-head .km-name{
  display:block; margin:0; font-family:rainyhearts, monospace; font-size:21px; line-height:1.15; font-weight:normal;
  letter-spacing:.3px; color:var(--name-a); }
.senshi--moon .senshi-art .ks-panel .kit-cap--v2 > .kc-head .km-kind{
  display:inline-block; margin:0; padding:1px 8px 2px; font-family:rainyhearts, monospace; font-size:13px; line-height:1.3;
  letter-spacing:.4px; color:var(--paper); background:var(--name-b); opacity:1; }
.senshi--moon .senshi-art .ks-panel .kit-cap--v2 > .kit-shot{ grid-area:shot; float:none; margin:0; align-self:start; }
.senshi--moon .senshi-art .ks-panel .kit-cap--v2 > .kc-text{
  grid-area:text; display:block; margin:0; font-size:15px; line-height:1.6; color:var(--ink); opacity:1; }

@media (max-width:760px){
  .senshi-art .dgplate .dgset > .dgset-h{ font-size:22px; }
  .senshi-art .dgplate .dg-card > dt{ font-size:19px; }
}


/* ==========================================================================
   295. SAILOR MOON: THE PAINTING IN THE PARAGRAPH BOX, BIGGER   (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c25.py, which also moves name meaning, likes and
   dislikes above the birthday in her stats (markup only).

   "any way to make the image in the profile paragraph box bigger? remove the
   frame and the gallery buttons maybe?" No frame, no dots. The gallery
   column is stretched to the box's height and the paintings are taken out of
   the flow so they can't make it taller; each is contained in the column,
   top left. At 240px wide the painting is 239 x 347 and the paragraphs keep
   their line count. With no dots to press, the two cross-fade slowly on
   their own; clicking still does nothing harmful (moves.js toggles
   `hidden`, which this ignores).
   ========================================================================== */
.senshi-art .ptop--v3 .ptop-about{ --gal-w:240px; }
.senshi-art .ptop--v3 .ptop-gal{ align-self:stretch; }
.senshi-art .ptop--v3 .ptop-gal .bio-shot{ height:100%; }
.senshi-art .ptop--v3 .ptop-gal .kb-cycle{
  position:relative; height:100%; padding:0; border:0; background:none; box-shadow:none; cursor:default; }
.senshi-art .ptop--v3 .ptop-gal .kb-cycle .kb-frame,
.senshi-art .ptop--v3 .ptop-gal .kb-cycle .kb-frame[hidden]{
  display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:left top;
  animation:ptop-gal-fade 16s ease-in-out infinite; }
.senshi-art .ptop--v3 .ptop-gal .kb-cycle .kb-frame:nth-child(2){ animation-delay:-8s; }
.senshi-art .ptop--v3 .ptop-gal .kb-dots{ display:none; }
@keyframes ptop-gal-fade{ 0%, 42%{ opacity:1; } 50%, 92%{ opacity:0; } 100%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .senshi-art .ptop--v3 .ptop-gal .kb-cycle .kb-frame{ animation:none; }
  .senshi-art .ptop--v3 .ptop-gal .kb-cycle .kb-frame:nth-child(2){ opacity:0; }
}
@media (max-width:760px){
  .senshi-art .ptop--v3 .ptop-gal{ align-self:auto; }
  .senshi-art .ptop--v3 .ptop-gal .bio-shot{ height:auto; }
  .senshi-art .ptop--v3 .ptop-gal .kb-cycle{ width:240px; height:347px; margin:0 auto; }
}


/* ==========================================================================
   296. HEADROOM FOR "DIGNITY"                                   (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c26.py.

   - Sailor Moon's stats went to 15px here for a few minutes; she changed
     her mind ("back to what it was please"), so they stay at 14px
     (section 293) and nothing about them is set here.
   - "give the header word dignity a tiny bit more headroom. looks squished."
     6px above it, 6px under it, and line-height 1.15 on the plate's headings
     (section 294 had them at 1 to hold the fold).
   ========================================================================== */
.senshi-art .dgplate .dgset > .dgset-h{ line-height:1.15; }
.senshi-art .dgplate--v2 .dgset--cards > .dgset-h{ padding-top:6px; margin-bottom:6px; }


/* ==========================================================================
   297. SAILOR MOON: THE BUST BIGGER, THE STATS ROUND HER OUTLINE
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c28.py, which also puts a line break between the
   stats in her card (markup).

   "is there no way to make the bust any bigger without messing with the
   font?" The stats stopped at the picture's square edge, but the drawing
   leaves the lower left of that square empty. The float now has a shape:
   its left edge traced from the picture's transparency, in 40 bands, as a
   polygon (an image shape would be blocked when the page is opened from the
   computer). The stats become inline boxes so they can follow that edge, one
   to a line (white-space:pre-line keeps the line breaks the markup now has;
   font-size and line-height 0 on the list stop the gaps between them from
   taking space). 296px is the tallest the bust can be before the card grows.
   Phones keep the 140px bust.
   ========================================================================== */
.senshi-art .ptop--v3 .ptop-cardbust{ shape-outside:polygon(100% 0%, 100.0% 0.0%, 100.0% 2.5%, 28.8% 2.5%, 28.8% 4.9%, 24.8% 4.9%, 24.8% 7.4%, 23.1% 7.4%, 23.1% 9.8%, 22.1% 9.8%, 22.1% 12.5%, 22.1% 12.5%, 22.1% 15.0%, 22.3% 15.0%, 22.3% 17.4%, 17.5% 17.4%, 17.5% 19.9%, 15.3% 19.9%, 15.3% 22.3%, 12.5% 22.3%, 12.5% 25.0%, 11.5% 25.0%, 11.5% 27.5%, 10.8% 27.5%, 10.8% 29.9%, 10.8% 29.9%, 10.8% 32.4%, 10.8% 32.4%, 10.8% 34.8%, 13.0% 34.8%, 13.0% 37.5%, 15.8% 37.5%, 15.8% 40.0%, 18.0% 40.0%, 18.0% 42.4%, 25.3% 42.4%, 25.3% 44.9%, 25.3% 44.9%, 25.3% 47.3%, 26.3% 47.3%, 26.3% 50.0%, 24.6% 50.0%, 24.6% 52.5%, 24.1% 52.5%, 24.1% 54.9%, 24.6% 54.9%, 24.6% 57.4%, 23.6% 57.4%, 23.6% 59.8%, 24.1% 59.8%, 24.1% 62.5%, 34.1% 62.5%, 34.1% 65.0%, 36.6% 65.0%, 36.6% 67.4%, 30.3% 67.4%, 30.3% 69.9%, 31.8% 69.9%, 31.8% 72.3%, 35.8% 72.3%, 35.8% 75.0%, 38.8% 75.0%, 38.8% 77.5%, 40.6% 77.5%, 40.6% 79.9%, 41.9% 79.9%, 41.9% 82.4%, 42.6% 82.4%, 42.6% 84.8%, 43.1% 84.8%, 43.1% 87.5%, 43.9% 87.5%, 43.9% 90.0%, 44.9% 90.0%, 44.9% 92.4%, 45.9% 92.4%, 45.9% 94.9%, 47.6% 94.9%, 47.6% 97.3%, 100.0% 97.3%, 100.0% 100.0%, 100% 100%); shape-margin:6px; }
.senshi-art .ptop--v3 .ptop-cardbust img{ height:296px; }
.senshi-art .ptop--v3 .ptop-stats .ptop-dl{ display:block; font-size:0; line-height:0; white-space:pre-line; }
.senshi-art .ptop--v3 .ptop-stats .c2-chip{ display:inline-flex; vertical-align:top; margin:0 0 4px; white-space:normal; }
@media (max-width:760px){
  .senshi-art .ptop--v3 .ptop-cardbust img{ height:140px; }
}


/* ==========================================================================
   298. THE CHIBI-WITH-PLANET PICTURES, INTO THE SPACE ROUND THEM
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c29.py.

   "without moving the other elements, make the image bigger." The picture
   was held to its 250 x 328 column. It now reaches 14px into the plate's
   left padding, 22px up into the gap under the dignity cards, 15px down into
   the gap above "condition" and 7px toward the wheel's frame (leaving 3px),
   and is still centred in that. It is already out of the flow (section 293),
   so none of this moves anything. Tall pictures: 328 -> 365px tall. Wide
   ones: 250 -> 271px wide. Phones are unchanged (the picture is in the flow
   there, so growing it would push the wheel down).
   ========================================================================== */
.senshi-art .dgtop--wheel .dgtop-pic .dgtop-img--crop{
  inset:-22px -7px -15px -14px; max-width:calc(100% + 21px); max-height:calc(100% + 37px); }
@media (max-width:760px){
  .senshi-art .dgtop--wheel .dgtop-pic .dgtop-img--crop{ max-width:100%; max-height:340px; }
}


/* ==========================================================================
   299. THE PROFILES: SAILOR MOON'S TOP ON THE OTHER EIGHT       (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c30.py, which gives Mercury, Mars, Jupiter, Venus,
   Saturn, Chibi Moon, Helios and Tuxedo Mask the .ptop--v3 class (so every
   Moon rule from sections 287-298 now reaches them), the glyph by the name,
   the stats one to a line, the paragraph in two, and each bust's height and
   traced outline in its own markup (style="--bust-h; shape-outside").

   - "take your time with the bust images. i want them as large as possible
     like usagi's." Each bust is as tall as it can be without the card
     growing and without any line of text wrapping more than it would with
     no bust. Moon keeps hers from section 297 (no --bust-h, so 296px).
   - Phones keep the 140px bust from section 297 (restated, since the rule
     above it would otherwise win).
   - Chibi Moon's kit cards take Moon's layout from section 294: the move
     (or the object) as the heading, one paragraph beside the picture. Her
     two object cards (Luna-P, the Space-Time Key) show an anime still, not a
     sprite, so there the still runs full width above the words.
   ========================================================================== */
.senshi-art .ptop--v3 .ptop-cardbust img{ height:var(--bust-h, 296px); }
@media (max-width:760px){
  .senshi-art .ptop--v3 .ptop-cardbust img{ height:140px; }
}
/* the stepped outline (.ptop--steps): the bust leaves the flow, and a column
   of empty floats, one per band of the drawing and as wide as the drawing is
   there, holds its shape. Unlike Moon's traced shape (section 297), floats
   also narrow the stats' boxes, so a long stat wraps beside the bust instead
   of dropping below it. The card is the offset parent, so the picture sits
   where Moon's float does: 10px above and right of the card's content box
   (the card's padding is 11px 14px). */
.senshi-art .ptop--steps .ptop-card{ position:relative; }
.senshi-art .ptop--steps .ptop-cardbust{ display:contents; }
.senshi-art .ptop--steps .ptop-cardbust img.ptop-bust{
  position:absolute; top:1px; right:4px; margin:0; width:auto; max-width:none; height:var(--bust-h); }
.senshi-art .ptop--steps .ptop-card i.bs{
  float:right; clear:right; display:block; margin:0 -10px 0 0;
  width:calc(var(--bust-h) * var(--ar) * var(--w) + 6px); height:calc(var(--bust-h) / var(--n)); }
.senshi-art .ptop--steps .ptop-card i.bs:first-of-type{ margin-top:-10px; }
.senshi-art .ptop--steps .ptop-stats .ptop-dl{ white-space:normal; font-size:inherit; line-height:inherit; }
.senshi-art .ptop--steps .ptop-stats .c2-chip{ display:flex; width:fit-content; max-width:100%; margin:0 0 4px; }
@media (max-width:760px){
  .senshi-art .ptop--steps .ptop-cardbust{ --bust-h:140px !important; }
  .senshi-art .ptop--steps .ptop-cardbust img.ptop-bust{ top:7px; right:10px; height:var(--bust-h); }
  .senshi-art .ptop--steps .ptop-card i.bs{ margin-right:-4px; }
  .senshi-art .ptop--steps .ptop-card i.bs:first-of-type{ margin-top:-4px; }
}
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2{
  display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"head head" "shot text";
  gap:10px 14px; align-items:start; align-content:start; }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged.kit--lane > .kit-cap.kit-cap--v2{
  grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"head head" "text shot"; }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kc-head{
  grid-area:head; display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin:0; padding:0 0 8px;
  border-bottom:2px dotted var(--backbow); }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kc-head .km-name{
  display:block; margin:0; font-family:rainyhearts, monospace; font-size:21px; line-height:1.15; font-weight:normal;
  letter-spacing:.3px; color:var(--name-a); }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kc-head .km-kind{
  display:inline-block; margin:0; padding:1px 8px 2px; font-family:rainyhearts, monospace; font-size:13px; line-height:1.3;
  letter-spacing:.4px; color:var(--paper); background:var(--name-b); opacity:1; }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kit-shot{
  grid-area:shot; float:none; clear:none; margin:0; align-self:start; justify-self:start; }
/* the two object cards carry an anime still, not a sprite: it goes full width over the words */
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2:has(> .kit-shot .kit-still){
  grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "shot" "text"; }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kit-shot:has(.kit-still){ justify-self:stretch; }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kit-shot .kit-still{
  display:block; width:100%; height:auto; max-width:none; }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kc-text{
  grid-area:text; display:block; margin:0; font-size:15px; line-height:1.6; color:var(--ink); opacity:1; }
body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kit-name{
  grid-area:auto; grid-column:1 / -1; margin:0; }
/* the object's name as a label on its own picture, as on Moon's cards (section 216) */
@media (hover: hover){
  body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2{ position:relative; }
  body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kit-name{
    position:absolute; top:7px; right:9px; left:auto; z-index:6; margin:0; padding:4px 10px;
    max-width:calc(100% - 18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:12.5px; line-height:1.3; font-weight:700; color:#fffefa; background:rgba(43,35,64,.94);
    border-radius:4px; box-shadow:0 2px 5px rgba(10,20,35,.28); opacity:0; pointer-events:none; transition:opacity .13s ease; }
  body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged.kit--lane > .kit-cap.kit-cap--v2 > .kit-name{ left:9px; right:auto; }
  body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2 > .kit-shot{ position:relative; z-index:2; }
  body.senshi--chibimoon .senshi-art .ks-panel .ka-items .kit--merged > .kit-cap.kit-cap--v2:has(.kit-shot:hover) > .kit-name{ opacity:1; }
}


/* ==========================================================================
   300. THE OTHER BUSTS: SMALLER, INSIDE THE FRAME, CLEAR OF THE TEXT
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c31.py (the card's stats, and each bust's height,
   shape and margins in its markup).

   "now the busts are too big, and the stats are spilling down into a second
   line... make sure the bust isn't overflowing out of the frame or touching
   any of the text." These pictures are cut flush to the drawing, so section
   299 put the hair against the card's top edge and the bow against its right
   one. Now the drawing sits 12px inside the frame at the top and right,
   whatever its own transparent margins (--mt, --mr: the share of the picture
   that is empty above and to the right of the drawing), and the column of
   floats that holds its shape keeps the text 12px away. The card's padding
   is 11px 14px, so the offsets below are measured from its padding box.
   Phones get their own measured height (--bust-h-m) instead of a flat 140px.
   ========================================================================== */
.senshi-art .ptop--steps .ptop-cardbust{
  --bt:calc(12px - var(--mt) * var(--bust-h));
  --br:calc(12px - var(--mr) * var(--bust-h) * var(--ar)); }
.senshi-art .ptop--steps .ptop-cardbust img.ptop-bust{ top:var(--bt); right:var(--br); }
.senshi-art .ptop--steps .ptop-card i.bs{
  width:calc(var(--bust-h) * var(--ar) * var(--w) + 12px); margin-right:calc(var(--br) - 14px); }
.senshi-art .ptop--steps .ptop-card i.bs:first-of-type{ margin-top:calc(var(--bt) - 11px); }
@media (max-width:760px){
  .senshi-art .ptop--steps .ptop-cardbust{ --bust-h:var(--bust-h-m, 140px) !important; }
  .senshi-art .ptop--steps .ptop-cardbust img.ptop-bust{ top:var(--bt); right:var(--br); }
  .senshi-art .ptop--steps .ptop-card i.bs{ margin-right:calc(var(--br) - 14px); }
  .senshi-art .ptop--steps .ptop-card i.bs:first-of-type{ margin-top:calc(var(--bt) - 11px); }
}


/* ==========================================================================
   301. MERCURY'S CHIBI PICTURE, AND A BUST CAN SIT LOWER        (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c33.py, which also adds Saturn's and Chibi Moon's
   missing stats, cuts Jupiter's likes, gives Tuxedo Mask his bust and
   measures the busts again.

   - "mercury chibi planet image is overflowing." Section 298 lets each
     picture reach 15px down into the gap above "condition". Mercury's plate
     has no gap there: the note on her doubled signs sits right under the
     wheel, and her boots ran over its top edge. Where that note follows the
     wheel, the picture now stops 8px above it and still reaches up into the
     gap under the dignity cards. Mercury's is 342px tall (was 365). Phones
     are unchanged: the picture is in the flow there.
   - "lower venus bust slightly." --bdown in a bust's markup moves it (and the
     floats that keep the text clear of it) down. Venus's is 12px lower on a
     computer. On a phone her bust sits beside her name and stays put.
   ========================================================================== */
@media (min-width:761px){
  .senshi-art .dgset--table:has(+ .dg-double) .dgtop--wheel .dgtop-pic .dgtop-img--crop{
    bottom:8px; max-height:calc(100% + 14px); }
  .senshi-art .ptop--steps .ptop-cardbust{
    --bt:calc(12px + var(--bdown, 0px) - var(--mt) * var(--bust-h)); }
}


/* ==========================================================================
   302. MERCURY'S CHIBI PICTURE, A LITTLE SMALLER                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c34.py.

   "mercury chibi with planet is still just a tad too big." It no longer
   reaches up into the gap under the dignity cards: its top lines up with the
   top of the wheel's frame, and it still stops 8px above the note under the
   wheel. 320px tall (was 342), still centred across its column. Phones are
   unchanged.
   ========================================================================== */
@media (min-width:761px){
  .senshi-art .dgset--table:has(+ .dg-double) .dgtop--wheel .dgtop-pic .dgtop-img--crop{
    top:0; bottom:8px; max-height:calc(100% - 8px); }
}


/* ==========================================================================
   303. THE MOON CATS: A PROFILE PARAGRAPH EACH                  (30 Sep 2026)
   ==========================================================================
   Built by build_moon_cats_c35.py.

   "the structure of their page will introduce them as a family, and then
   below they get a profile paragraph." Under the family intro each cat has
   her name, the stats she shares with Moon's card, and her paragraph in two
   beside one picture, laid out like the paragraph box on the senshi pages
   (.ptop-about). Until her picture comes, the picture's place holds a
   "picture to come" slot the height of the paragraph.
   ========================================================================== */
.senshi-art .ptop--cat{ padding:18px 0 20px; }
.senshi-art .ptop--cat > .masthead-name{ justify-content:flex-start; margin:0 18px; }
.senshi-art .ptop--cat .ptop-about{ margin-top:14px; }
.senshi-art .ptop--cat .ptop-text .ptop-stats{ margin:0 0 16px; }
.senshi-art .ptop--cat .ptop-gal .bio-shot{ height:100%; }
.senshi-art .ptop--cat .ph--catpic{ box-sizing:border-box; width:100%; height:100%; min-height:320px; }
@media (max-width:760px){
  .senshi-art .ptop--cat > .masthead-name{ margin:0 12px; }
  .senshi-art .ptop--cat .ph--catpic{ width:240px; height:300px; min-height:0; margin:0 auto; }
}


/* ==========================================================================
   304. MAMORU: A DARKER LACE, AND THE SUN BUTTON                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c37.py.

   - "can you give him a sexier darker color doily background color? gray is
     boring." His lace colour is a deep wine from his cape's lining instead of
     grey. Behind his card at the top the lace is multiplied into that colour
     instead of washed out, so it reads dark; everywhere else his lace was
     already pale and is now a pale wine. Only Mamoru's part of the page:
     Helios keeps his gold.
   - "mamoru gets a 'read the sun's page' button too." It sits beside "read
     the Earth page", with the Sun's glyph at the size Helios's button had.
   ========================================================================== */
body.senshi--tuxedomask .container--post > .senshi-art{ --lace:#7a1628; }
body.senshi--tuxedomask .container--post > .senshi-art .ptop-band::before{
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost.png");
  background-repeat:no-repeat, repeat; background-size:cover, 256px 190px;
  background-color:var(--lace); background-blend-mode:normal, multiply; opacity:1; }
.senshi-art .ptop-text .astro-door + .astro-door{ margin-left:10px; }
.senshi-art .ptop-text .astro-door:has(+ .astro-door--sun), .senshi-art .ptop-text .astro-door--sun{ vertical-align:top; }
.senshi-art .ptop-text .astro-door--sun img.planet-px--glyph{ width:28px; height:28px; margin:6px; }


/* ==========================================================================
   305. MAMORU'S LACE: A RED YOU CAN SEE THE PATTERN IN          (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c38.py, which also makes the lace tile used here
   (images/sailormoon/select/lace/frost-alpha.png: the frost lace as white
   on transparent, same threads).

   "it's too dark to even see the doily pattern... a bit more pronounced
   color. not thicker or heavier. just a nice contrast." Behind his card the
   lace is now light threads on a brighter wine, under a veil of that wine
   (--lace-veil) so they read pink rather than white. Replaces the band rule
   in section 304; his lace everywhere else follows the new wine.
   ========================================================================== */
body.senshi--tuxedomask .container--post > .senshi-art{ --lace:#8f1b2f; --lace-veil:rgba(143,27,47,.55); }
body.senshi--tuxedomask .container--post > .senshi-art .ptop-band::before{
  background-image:linear-gradient(var(--lace-veil), var(--lace-veil)), url("images/sailormoon/select/lace/frost-alpha.png");
  background-repeat:no-repeat, repeat; background-size:cover, 256px 190px;
  background-color:var(--lace); background-blend-mode:normal, normal; opacity:1; }


/* ==========================================================================
   306. TUXEDO MASK: THE EARTH AND THE SUN                       (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c39.py.

   "mamoru is the lead on this profile... helios gets a card now... something
   extra explicitly explaining the sun/earth of the character in mamorus
   area... merge both earth and sun together, we will do a diginity wheel
   using pictures of mamoru for the cards."
   - "the earth and the sun" sits under Mamoru's paragraph: two paragraphs,
     then Helios's card, laid out like a moon cat's (section 303) but holding
     his painting. The card is its own small article in his gold.
   - The dignity and condition cards each hold the site's empty-picture slot
     (3:2) for the Mamoru pictures; his page's rule that lets card pictures
     take their own shape would flatten an empty slot, so it keeps 3:2. The Earth's three cards are the plate's last
     set, with his page's rule of a 68ch width lifted from the dignity cards.
   ========================================================================== */
.senshi-art .earthsun-text{ margin:0 0 20px; }
.senshi-art .earthsun-text p{ font-size:16px; line-height:1.58; margin:0; }
.senshi-art .earthsun-text p + p{ margin-top:18px; }
.senshi-art .earthsun .senshi-cat--helios{ margin:0; }
.senshi-art .earthsun .senshi-cat--helios > .senshi-art{ margin:0; }
.senshi-art .ptop--cat .ptop-gal .bio-shot img.art--bioshot{ display:block; width:100%; height:100%;
  max-height:none; object-fit:contain; object-position:left top; border:0; box-shadow:none; background:none; }
body.senshi--tuxedomask .senshi-art .dglist--2 .dg-card .dg-pic--slot,
body.senshi--tuxedomask .senshi-art .dgplate--v2 .dgset--stack .dg-card:has(> .dg-pic) .dg-pic--slot{ aspect-ratio:3 / 2; height:auto; }
body.senshi--tuxedomask .senshi-art #astrology .dglist--2{ max-width:none; }
.senshi-art .dgset--earth{ margin-top:22px; }
.senshi-art .dgw-note--earth{ margin-top:6px; }
@media (max-width:760px){
  .senshi-art .ptop--cat .ptop-gal .bio-shot img.art--bioshot{ width:240px; height:auto; margin:0 auto; }
}


/* ==========================================================================
   307. CHIBI MOON'S AND TUXEDO MASK'S CHIBI PICTURES, NOT ABOVE THE WHEEL
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c40.py. "chibi with planet image is overflowing
   out the top." The two tallest pictures reached 4px into the dignity box
   above. They now start level with the top of the wheel's frame, and still
   reach 15px into the gap below. Phones are unchanged.
   ========================================================================== */
@media (min-width:761px){
  body.senshi--chibimoon .senshi-art .dgtop--wheel .dgtop-pic .dgtop-img--crop,
  body.senshi--tuxedomask .senshi-art .dgtop--wheel .dgtop-pic .dgtop-img--crop{
    top:0; max-height:calc(100% + 15px); }
}


/* ==========================================================================
   308. TUXEDO MASK: "THE EARTH AND THE SUN", REBUILT            (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c41.py. Replaces the section 306 layout for this
   section (Helios is no longer a separate card).

   "the helios box is super big and chunky... side-by-side endymion and
   helios. mamoru at the top... helios smaller... the earth should be a
   smaller section." Mamoru's full-length picture sits beside the two
   paragraphs on the Sun; under them Prince Endymion and Helios share a row,
   each a picture and a short paragraph (Helios in his gold); then the Earth,
   smaller, with its three cards in a row. The drawings are on white paper,
   so they are multiplied into the page like the chibi pictures.
   ========================================================================== */
.senshi-art .earthsun .es-img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.senshi-art .es-top{ display:grid; grid-template-columns:170px minmax(0, 1fr); gap:24px; align-items:start; }
.senshi-art .es-text p{ font-size:16px; line-height:1.58; margin:0; }
.senshi-art .es-text p + p{ margin-top:18px; }
.senshi-art .es-text b, .senshi-art .es-card-text b, .senshi-art .es-earth-lead b{ color:var(--name-a); letter-spacing:.3px; }
.senshi-art .es-pic{ margin:0; }
.senshi-art .es-pair{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; margin-top:26px; }
.senshi-art .es-card{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:14px; align-items:start;
  padding:12px 14px 14px; background:var(--boxbody, #fffdf6); border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); }
.senshi-art .es-card--helios{ border-color:#d4b048; box-shadow:3px 3px 0 #897235; background:#fffdf5; }
.senshi-art .es-card .es-img{ width:auto; height:250px; max-width:150px; object-fit:contain; }
.senshi-art .es-name{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-family:rainyhearts, monospace; font-size:20px; line-height:1.1; color:var(--head); }
.senshi-art .es-card--helios .es-name{ color:#7e6b35; }
.senshi-art .es-name .es-ico{ width:26px; height:26px; image-rendering:pixelated; flex:none; }
.senshi-art .es-card-text p{ font-size:14px; line-height:1.55; margin:0; }
.senshi-art .es-earth{ margin-top:28px; }
.senshi-art .es-earth > .dgset-h{ font-size:26px; line-height:1.15; padding-top:6px; margin:0 0 12px; }
.senshi-art .es-earth-lead{ display:flow-root; }
.senshi-art .es-earth-pic{ float:left; width:150px; margin:3px 16px 8px 0; }
.senshi-art .es-earth-pic .es-img{ mix-blend-mode:normal; border:2px solid var(--backbow); }
.senshi-art .es-earth-lead p{ font-size:16px; line-height:1.58; margin:0; }
.senshi-art .es-earth-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:14px 0 0; }
.senshi-art .es-earth-cards .dg-card{ margin:0; padding:10px 12px; background:var(--boxbody, #fffdf6); border:1px dashed var(--backbow); }
.senshi-art .es-earth-cards dt{ margin:0 0 6px; font-size:15px; letter-spacing:.4px; }
.senshi-art .es-earth-cards dd{ margin:0; }
.senshi-art .es-earth-cards .dg-why{ display:block; font-size:13.5px; line-height:1.55; }
@media (max-width:760px){
  .senshi-art .es-top{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .es-pic--mamoru{ width:150px; margin:0 auto; }
  .senshi-art .es-pair, .senshi-art .es-earth-cards{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .es-card .es-img{ height:200px; max-width:120px; }
  .senshi-art .es-earth > .dgset-h{ font-size:22px; }
  .senshi-art .es-earth-pic{ width:110px; }
}


/* ==========================================================================
   309. TUXEDO MASK: THE EARTH IN TWO PARAGRAPHS, A GOLD-AND-RED DOILY
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c42.py.

   - "the earth section... 2 paragraphs plz. use and style the earth
     picture please." The Earth is two paragraphs now: the globe from the
     Earth picture, round with a soft blue glow, beside the first, and Ash's
     balcony still (the Earth in the sky over the pair) beside the second.
   - "a red somewhere inbetween the red of his cape and the rose... think
     more regal and gold." Behind his card the doily is a softer red,
     between the cape's #9a0000 and the rose's #bc0033 and a little lighter
     (#a52738), with the lace threads in gold (frost-gold.png) under a thin
     red veil. His card is framed in gold. His lace colour everywhere else
     follows the new red. Replaces section 305's band rule.
   ========================================================================== */
.senshi-art .es-earth-body{ display:flow-root; }
.senshi-art .es-earth-body p{ font-size:16px; line-height:1.58; margin:0; }
.senshi-art .es-earth-body p + figure + p{ margin-top:18px; }
.senshi-art .es-earth-body b{ color:var(--name-a); letter-spacing:.3px; }
.senshi-art .es-globe{ float:left; width:150px; height:150px; margin:4px 22px 10px 2px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 3px #c9a13b, 0 0 22px 4px rgba(98,168,255,.45); }
.senshi-art .es-globe-img{ display:block; width:100%; height:100%; object-fit:cover; }
.senshi-art .es-balcony{ float:right; width:210px; margin:6px 0 10px 22px; }
.senshi-art .es-balcony-img{ display:block; width:100%; height:auto; border:2px solid var(--backbow); box-shadow:3px 3px 0 #c9a13b; }
@media (max-width:760px){
  .senshi-art .es-globe{ width:110px; height:110px; margin-right:16px; }
  .senshi-art .es-balcony{ float:none; width:min(260px, 80%); margin:14px auto; }
  .senshi-art .es-card{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .es-card .es-pic{ justify-self:center; }
  .senshi-art .es-card .es-img{ height:220px; max-width:none; }
}
body.senshi--tuxedomask .container--post > .senshi-art{ --lace:#a52738; --lace-veil:rgba(165,39,56,.2); }
body.senshi--tuxedomask .container--post > .senshi-art .ptop-band::before{
  background-image:linear-gradient(var(--lace-veil), var(--lace-veil)), url("images/sailormoon/select/lace/frost-gold.png");
  background-repeat:no-repeat, repeat; background-size:cover, 256px 190px;
  background-color:var(--lace); background-blend-mode:normal, normal; opacity:1; }
body.senshi--tuxedomask .container--post > .senshi-art .ptop-card{ border-color:#c9a13b; box-shadow:3px 3px 0 #8a6a1c; }


/* ==========================================================================
   310. TUXEDO MASK: A LABELLED CHART WHEEL UNDER THE EARTH       (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c43.py (the wheel itself by pp_teaching_wheel.py).

   - "draw an astrological diagram here of a chart. explain the chart is our
     vantage point and label the parts ... use the naoko chart style as our
     official pixel and planets chart styling." The panel is the Naoko
     wheel's night purple with the same bg57 stars at .55; the wheel inside
     uses the same band colours, pixel signs, cream field and plum lines.
     Wheel left, a short explanation and a link to the natal chart page
     right; stacked on a phone.
   - The Sun's dignity cards now hold pictures (img.dg-pic, 3:2), and the
     dignity wheel's hub is the Sun glyph; neither needs new CSS.
   ========================================================================== */
.senshi-art .es-wheel{ position:relative; isolation:isolate; clear:both;
  display:grid; grid-template-columns:minmax(0, 520px) minmax(0, 1fr); gap:22px; align-items:center;
  margin:24px 0 4px; padding:14px 20px 16px 10px; border-radius:10px;
  background:linear-gradient(160deg, #1b1030 0%, #0a0616 62%, #120a24 100%); }
.senshi-art .es-wheel::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:url("images/backgrounds/bg57.gif") 0 0 / 150px 150px; opacity:.55; pointer-events:none; }
.senshi-art .esw-art{ min-width:0; }
.senshi-art .esw-svg{ display:block; width:100%; height:auto; overflow:visible; }
.senshi-art .esw-cap{ color:rgba(244,238,251,.9); }
.senshi-art .esw-cap p{ font-size:15px; line-height:1.6; margin:0; }
.senshi-art .esw-cap p + p{ margin-top:12px; }
.senshi-art .esw-cap .esw-h{ font-family:"rainyhearts", monospace; font-size:22px; line-height:1.2;
  color:#c9a8e8; letter-spacing:.04em; margin:0 0 10px; }
.senshi-art .esw-cap b{ color:#e6c15a; font-weight:600; letter-spacing:.3px; }
.senshi-art .esw-more{ display:inline-block; margin-top:14px; padding:6px 14px; border:1px solid rgba(230,193,90,.7);
  border-radius:999px; color:#e6c15a; font-size:14px; text-decoration:none; }
.senshi-art .esw-more:hover, .senshi-art .esw-more:focus-visible{ background:rgba(230,193,90,.14); }
@media (max-width:760px){
  .senshi-art .es-wheel{ grid-template-columns:minmax(0, 1fr); gap:14px; padding:12px 8px 16px; margin-left:-6px; margin-right:-6px; }
  .senshi-art .esw-cap{ padding:0 8px; }
  /* the SVG shrinks to about a third on a phone, so its outside words go up a size */
  .senshi-art .esw-svg .esw-sub, .senshi-art .esw-svg .esw-note{ font-size:29px; }
  .senshi-art .esw-svg .esw-ang{ font-size:44px; }
}


/* ==========================================================================
   311. TUXEDO MASK: THE CHART WHEEL'S NEW CENTRE                 (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c44.py (the wheel by pp_teaching_wheel.py).

   - "the earth drawing you choose for the center of the circle. don't use
     that. i'd rather you illistrate something like this, and animate if
     possible." The centre is a cross-section of where you stand: sky,
     grass on the horizon, soil, and a small pixel person on the line. The
     two pixel clouds drift slowly across the sky and wrap round out of
     sight. Nothing moves for anyone with reduced motion switched on.
   ========================================================================== */
.senshi-art .esw-svg .esw-cloud--a{ animation:esw-drift-a 34s linear infinite; }
.senshi-art .esw-svg .esw-cloud--b{ animation:esw-drift-b 46s linear infinite; animation-delay:-20s; }
@keyframes esw-drift-a{ from{ transform:translateX(-140px); } to{ transform:translateX(190px); } }
@keyframes esw-drift-b{ from{ transform:translateX(-170px); } to{ transform:translateX(100px); } }
/* "in hellenistic astrology" now heads the Earth and Sun section; "the earth
   and the sun" under it is the same size as "the earth" and "dignity" */
body.senshi--tuxedomask .senshi-art .earthsun > .es-h{ font-size:26px; line-height:1.2; padding-top:6px; margin:2px 0 14px; }
@media (prefers-reduced-motion: reduce){
  .senshi-art .esw-svg .esw-cloud--a, .senshi-art .esw-svg .esw-cloud--b{ animation:none; }
}


/* ==========================================================================
   312. TUXEDO MASK: MAMORU AND ENDYMION, WIDE, ABOVE THE BOXES   (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c45.py.

   - "use this in the earth and the sun section" / "wide, above the boxes".
     The panel sits full width between the Sun paragraphs and the Endymion
     and Helios boxes, framed like the balcony still.
   ========================================================================== */
.senshi-art .es-panel{ margin:26px auto 0; max-width:720px; }
.senshi-art .es-panel-img{ display:block; width:100%; height:auto;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 #c9a13b; }
@media (max-width:760px){
  .senshi-art .es-panel{ margin-top:20px; }
}


/* ==========================================================================
   313. TUXEDO MASK: THE EARTH BELOW THE DIGNITY BOX              (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c47.py.

   - "I want the sun infoiirmation and dignity info above the earth on
     mamoru's profile". The Earth part is its own section now, straight
     after the dignity box; this closes the gap the two sections' padding
     would otherwise leave between "condition" and "the earth".
   ========================================================================== */
body.senshi--tuxedomask .senshi-art #the-earth{ padding-top:0; }
body.senshi--tuxedomask .senshi-art #the-earth > .es-earth{ margin-top:6px; }
/* the balcony still is gone, so the two Earth paragraphs need their own gap */
.senshi-art .es-earth-body p + p{ margin-top:18px; }

/* - "the porince endymion and helios boxes ... fuze the two boxes together
     style wise... can you merge them and their images?" One frame, border
     running from Endymion's red to Helios's gold, paper warming the same
     way; his words left, the two of them in the middle, Helios's right.
     Stacked on a phone: the picture, then Endymion, then Helios. */
.senshi-art .es-duo{ display:grid; grid-template-columns:minmax(0, 1fr) 250px minmax(0, 1fr); gap:20px;
  align-items:start; margin-top:26px; padding:16px 18px 18px; border:2px solid transparent;
  background:linear-gradient(90deg, var(--boxbody, #fffdf6), #fffdf5) padding-box,
             linear-gradient(90deg, var(--backbow), #d4b048) border-box;
  box-shadow:3px 3px 0 #8a6a1c; }
.senshi-art .es-duo-pic{ margin:0; align-self:center; }
.senshi-art .es-duo-img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.senshi-art .es-duo-side--helios .es-name{ color:#7e6b35; }
.senshi-art .es-duo-side--helios{ text-align:left; }
@media (max-width:760px){
  .senshi-art .es-duo{ grid-template-columns:minmax(0, 1fr); gap:14px; padding:14px; }
  .senshi-art .es-duo-pic{ order:-1; width:min(240px, 80%); justify-self:center; }
}


/* ==========================================================================
   314. TUXEDO MASK: ENDYMION AND HELIOS BELOW CONDITION, A SMALL WHEEL
        TEASER IN PLACE OF THE DARK PANEL                        (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c49.py (the wheel by pp_teaching_wheel.py).

   - "the reading the wheel section on the profile looks totally out of
     place... maybe we do a mini version leading to the full article?"
     A light box in the profile's own style: the small wheel, three lines and
     a button to the chart-reading article. On a phone the wheel sits on top.
   - "the earth and the sun" is now a small heading over the Endymion and
     Helios box, below the condition box.
   ========================================================================== */
body.senshi--tuxedomask .senshi-art #the-earth > .es-h--duo{ font-size:26px; line-height:1.2; padding-top:6px; margin:6px 0 0; }
body.senshi--tuxedomask .senshi-art #the-earth > .es-duo{ margin-top:14px; }
body.senshi--tuxedomask .senshi-art #the-earth > .es-earth{ margin-top:28px; }
.senshi-art .es-mini{ display:grid; grid-template-columns:300px minmax(0, 1fr); gap:22px; align-items:center;
  margin:22px 0 0; padding:14px 18px; background:var(--boxbody, #fffdf6);
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); }
.senshi-art .es-mini-art{ display:block; }
.senshi-art .esw-svg--mini{ display:block; width:100%; height:auto; }
.senshi-art .es-mini-text .es-mini-h{ font-family:rainyhearts, monospace; font-size:22px; line-height:1.2; color:var(--head); margin:0 0 8px; }
.senshi-art .es-mini-text p{ font-size:16px; line-height:1.58; margin:0; }
.senshi-art .es-mini-more{ display:inline-block; margin-top:12px; padding:6px 14px; border:2px solid var(--backbow);
  background:var(--frontbow, #c9a13b); color:#fff; font-size:14px; text-decoration:none; box-shadow:2px 2px 0 var(--backbow); }
.senshi-art .es-mini-more:hover, .senshi-art .es-mini-more:focus-visible{ filter:brightness(1.08); }
@media (max-width:760px){
  .senshi-art .es-mini{ grid-template-columns:minmax(0, 1fr); gap:12px; padding:12px 14px; }
  .senshi-art .es-mini-art{ width:min(280px, 90%); justify-self:center; }
}


/* ==========================================================================
   315. THE MOON CATS: THEIR LANDING SEAT AND FAMILY PICTURE      (30 Sep 2026)
   ==========================================================================
   Built by build_select_cats_c56.py.

   - "remove helios and replace with cats on landing page. remove the
     animation for the character slot image." One card for Luna, Artemis and
     Diana in Helios's seat. Its picture is the first frame of Ash's GIF, held
     still, and it stays put when the card is picked: nothing fades in over
     it, and the name stays on the plate (select.css slides it away because a
     bigger sprite normally covers it).
   ========================================================================== */
.sel--title .sel-card--cats[data-active] .sel-bust{ opacity:1; }
.sel--title .sel-card--cats[data-active] .sel-name{ transform:none; opacity:1; }
.sel--title .sel-card--cats[data-active] .sel-plate{ background:var(--skirt); box-shadow:none; }
.sel--title .sel-card--cats[data-active] .sel-field{ overflow:hidden; border-bottom-color:var(--skirt); }

/* The panel: no Takeuchi plate of the cats, so the three of them stand in
   front of her Moon on Luna's navy, three times their size, pixels sharp. */
.sel-panel--cats{ background:#14121f; }
.sel-panel--cats .sel-sphere{ top:44%; width:118%; opacity:.42; }
.sel-panel--cats .sel-cats-art{ position:absolute; left:50%; top:calc(50% - 30px); z-index:4;
  transform:translate(-50%, -50%); }
.sel-panel--cats .sel-cats-art img{ display:block; width:300px; height:297px; image-rendering:pixelated; }
/* On a phone the panel is a short band with the name top left, so the cats go
   to the right at twice their size, standing on the strip. */
@media (max-width:900px){
  .sel-panel--cats .sel-cats-art{ left:auto; right:12px; top:auto; bottom:73px; transform:none; }
  .sel-panel--cats .sel-cats-art img{ width:200px; height:198px; }
}

/* - Asked where the GIF goes on the cats page, Ash chose "Family section,
     moving". It sits beside the two family paragraphs, three times its size
     with the pixels kept sharp, and stacks above them on a phone. */
body.senshi--mooncats .senshi-art .mc-family{ display:grid; grid-template-columns:minmax(0, 1fr) 300px;
  gap:22px; align-items:center; }
body.senshi--mooncats .senshi-art .mc-family-pic{ margin:0; }
body.senshi--mooncats .senshi-art .mc-family-pic img{ display:block; width:300px; height:300px;
  image-rendering:pixelated; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  body.senshi--mooncats .senshi-art .mc-family-pic{ order:-1; justify-self:center; }
  body.senshi--mooncats .senshi-art .mc-family-pic img{ width:200px; height:200px; }
}


/* ==========================================================================
   316. THE MOON CATS: TAKEUCHI'S PICTURES                        (30 Sep 2026)
   ==========================================================================
   Built by build_moon_cats_c58.py.

   - Ash sent two of Takeuchi's pictures for each cat. They stack in the
     cat's picture column, one above the other, which keeps the column about
     as tall as her stats and paragraphs. On a phone they sit side by side
     above her text.
   ========================================================================== */
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-pair{ display:flex; flex-direction:column;
  gap:12px; height:auto; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-pair img.art--bioshot{ display:block;
  width:100%; height:auto; object-fit:initial; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-pair{ flex-direction:row;
    align-items:flex-start; gap:10px; }
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-pair img.art--bioshot{
    width:calc(50% - 5px); height:auto; margin:0; }
}

/* - "cats human form manga": asked where it goes, Ash chose "Cats page". It
     sits under the family paragraphs and the GIF, centred, with one line
     under it saying what it is. */
body.senshi--mooncats .senshi-art .mc-human{ margin:22px auto 0; width:min(380px, 100%); text-align:center; }
body.senshi--mooncats .senshi-art .mc-human-img{ display:block; width:100%; height:auto; }
body.senshi--mooncats .senshi-art .mc-human figcaption{ margin-top:8px; font-size:13.5px; font-style:italic;
  line-height:1.45; opacity:.85; }


/* ==========================================================================
   317. THE MOON CATS: NAMES OVER THE STATS, ONE GALLERY EACH     (30 Sep 2026)
   ==========================================================================
   Built by build_moon_cats_c59.py.

   - "move the cats name over the stats, not above the image." The name is the
     first thing in the paragraph box now, over the stats column, and the
     picture column runs the full height beside both. On a phone: the name,
     then the picture, then the words.
   - "1 cycling image gallery for each cat." Each cat's two pictures share
     the picture column and cross-fade slowly, as on Sailor Moon's page
     (section 295). These keep both pictures pinned in the column on a phone
     too, where section 303's rule would otherwise let them size themselves.
   ========================================================================== */
body.senshi--mooncats .senshi-art .ptop--cat .ptop-about{ grid-template-areas:"gal name" "gal text";
  grid-template-rows:auto 1fr; row-gap:12px; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-about > .masthead-name{ grid-area:name; margin:0;
  justify-content:flex-start; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-about > .ptop-gal{ grid-area:gal; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-about > .ptop-text{ grid-area:text; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .kb-cycle .kb-frame{ position:absolute; inset:0;
  width:100%; height:100%; margin:0; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-about{ grid-template-areas:"name" "gal" "text";
    grid-template-rows:auto; }
}


/* ==========================================================================
   318. A "READ THE MANGA" STICKER BESIDE THE "WATCH" ONES       (30 Sep 2026)
   ==========================================================================
   Built by build_select_manga_c61.py. The landing page only (.arcframe).

   - "just like the links to the show, please link to this page to read the
     manga... make the card look like a little manga magazine." A third
     sticker in the row (select.css sections 112 and 113), going to Miss
     Dream's scanlations. Where the others have a drawn television, this one
     has a little magazine: Ash's scan of the March 1997 Nakayoshi cover, with
     a spine, a gloss and two pages behind it, tucked in at a tilt and poking
     over the sticker's top edge. Its shadow is the cover's yellow.
   - Three stickers won't fit floated beside the lede, so the row leaves the
     float and sits under the lede, centred. Narrower screens wrap the third
     to a second line; phones stack them, as select.css already does.
   ========================================================================== */
@media (min-width:701px){
  .arcframe .watch-pair{ float:none; display:flex; flex-wrap:wrap; justify-content:center;
    gap:16px 22px; margin:16px 0 18px; }
  .arcframe .watch-pair .watch-sticker{ flex:0 1 264px; max-width:264px; }
}
.arcframe .watch-pair .watch-sticker--manga{ transform:rotate(-1.6deg); box-shadow:5px 5px 0 #f6d36b; }
.arcframe .watch-pair .watch-sticker--manga:hover,
.arcframe .watch-pair .watch-sticker--manga:focus-visible{
  transform:rotate(0deg) translateY(-2px); box-shadow:7px 7px 0 #f6d36b; }
.arcframe .ws-mag{
  position:relative; flex:0 0 auto; display:block;
  width:52px; height:74px; margin:-24px 4px -8px 0;
  border:2px solid #2b2340; border-radius:1px 3px 3px 1px; background:#fffdf6;
  box-shadow:2px 2px 0 #fffdf6, 3px 3px 0 #2b2340, 5px 5px 0 #fffdf6, 6px 6px 0 #2b2340;
  transform:rotate(-7deg); transition:transform .18s ease;
}
.arcframe .ws-mag img{ display:block; width:100%; height:100%; object-fit:cover; }
/* the spine down the left edge */
.arcframe .ws-mag::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(90deg, rgba(43,35,64,.55), rgba(255,255,255,.35) 70%, rgba(255,255,255,0)); }
/* and the gloss of a new magazine */
.arcframe .ws-mag::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(125deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.42) 42%, rgba(255,255,255,0) 54%); }
.arcframe .watch-sticker--manga:hover .ws-mag,
.arcframe .watch-sticker--manga:focus-visible .ws-mag{ transform:rotate(-3deg) translateY(-3px); }
@media (max-width:700px){
  .arcframe .watch-pair .watch-sticker--manga{ margin-top:30px; }
  .arcframe .ws-mag{ margin-top:-30px; }
}
@media (prefers-reduced-motion: reduce){
  .arcframe .ws-mag{ transition:none; }
}


/* ==========================================================================
   319. TUXEDO MASK: THE EARTH STILL WHOLE, ENDYMION AND HELIOS BIGGER
                                                                (30 Sep 2026)
   ==========================================================================
   Built by build_profiles_c62.py.

   - "the image of earth cropped like a circle. please remove the crop and
     restore to the origianl image." The whole still, beside the paragraph,
     framed like the page's other pictures (section 309's round globe is no
     longer used on the page).
   - "the prince endymion and helios pictures... can we get them any bigger
     inside this box and keep the text readable?" The picture goes across the
     top of the box at 420px, and the two texts sit under it side by side,
     each under its own figure, at 15px. Phone: picture, Endymion, Helios.
   ========================================================================== */
.senshi-art .es-earth-still{ float:left; width:270px; margin:4px 22px 10px 0; }
.senshi-art .es-earth-still-img{ display:block; width:100%; height:auto; border:2px solid var(--backbow);
  box-shadow:3px 3px 0 #c9a13b; }
body.senshi--tuxedomask .senshi-art .es-duo{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:"pic pic" "endy hel"; column-gap:28px; row-gap:16px; }
body.senshi--tuxedomask .senshi-art .es-duo-pic{ grid-area:pic; justify-self:center; width:min(420px, 100%); }
body.senshi--tuxedomask .senshi-art .es-duo-side--endymion{ grid-area:endy; }
body.senshi--tuxedomask .senshi-art .es-duo-side--helios{ grid-area:hel; }
body.senshi--tuxedomask .senshi-art .es-duo-side p{ font-size:15px; line-height:1.6; }
@media (max-width:760px){
  .senshi-art .es-earth-still{ float:none; width:min(340px, 100%); margin:0 auto 14px; }
  body.senshi--tuxedomask .senshi-art .es-duo{ grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"pic" "endy" "hel"; }
  body.senshi--tuxedomask .senshi-art .es-duo-pic{ width:min(320px, 100%); }
}


/* ==========================================================================
   320. THE MOON CATS: THE FAMILY OVER TAKEUCHI'S PICTURE        (30 Sep 2026)
   ==========================================================================
   Built by build_moon_cats_c65.py.

   - "please stylize the naoko manga image of the cats in human form as the
     background for the family text. place the family text in an opaque box
     in the bottom third of the image about dianas waist." The picture and
     the box share one grid cell; the box starts at Diana's waist, 58% of
     the picture's height (85% of its width, since the picture is 760 x
     1115), and if the words run past the picture the cell grows with them.
   - The pixel GIF sits to the right of the title, at 2x.
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-backdrop{ display:grid; width:min(640px, 100%); margin:6px auto 0; }
body.senshi--mooncats .senshi-art .mc-backdrop > *{ grid-area:1 / 1; min-width:0; }
body.senshi--mooncats .senshi-art .mc-backdrop-img{ display:block; width:100%; height:auto;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); }
body.senshi--mooncats .senshi-art .mc-backdrop-box{ align-self:start; margin:85% 22px 22px;
  padding:16px 20px 18px; background:rgba(255,253,247,.96); border:2px solid var(--backbow);
  box-shadow:3px 3px 0 var(--frontbow); }
body.senshi--mooncats .senshi-art .mc-backdrop-box p{ margin:0; font-size:15px; line-height:1.6; }
body.senshi--mooncats .senshi-art .mc-backdrop-box p + p{ margin-top:12px; }
body.senshi--mooncats .senshi-art .mc-backdrop-box b{ color:var(--name-a); letter-spacing:.3px; }
body.senshi--mooncats .senshi-art .mc-backdrop-cap{ margin:10px auto 0; width:min(640px, 100%);
  text-align:center; font-size:13.5px; font-style:italic; line-height:1.45; opacity:.85; }
body.senshi--mooncats .senshi-cat--family .banner--masthead{ display:flex; align-items:center;
  justify-content:space-between; gap:16px; }
body.senshi--mooncats .senshi-cat--family .banner--masthead .mc-family-pic{ flex:none; margin:0; }
body.senshi--mooncats .senshi-cat--family .banner--masthead .mc-family-pic img{ display:block;
  width:200px; height:200px; image-rendering:pixelated; }
/* - Two galleries in each cat's picture column: the anime picture on top,
     square, and the manga pair under it, filling the rest of the column. A
     gallery of one picture doesn't fade (section 295's fade is for pairs). */
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal{ display:flex; flex-direction:column; gap:12px; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-anime{ flex:none; height:auto; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .mc-anime .kb-cycle{ height:auto; aspect-ratio:1 / 1; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .mc-anime .kb-frame{ object-fit:cover; object-position:center; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .kb-frame:only-child{ animation:none; opacity:1; }
body.senshi--mooncats .senshi-art .ptop--cat .ph--catpic.mc-anime-ph{ height:auto; min-height:0; aspect-ratio:1 / 1; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-manga{ flex:1 1 auto; height:auto; min-height:340px; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .mc-manga .kb-cycle{ height:100%; }

/* - The threads sit in each cat's part now (ids family-, luna-, artemis- and
     diana-threads), so the two rules senshi.css writes for #threads (section 289's
     neighbour, line "#threads in the selector") are restated for them. */
body.senshi--mooncats .senshi-art .threads-block .thread.thread--fold{ padding:0; border:0; background:none; box-shadow:none; }
body.senshi--mooncats .senshi-art .threads-block .thread--fold .th-head .thread-kind{ background:none; color:#f0e7cf; padding:0; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal{ flex-direction:row; justify-content:center; align-items:flex-start; gap:10px; }
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-anime,
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-manga{ flex:0 1 160px; width:160px; min-height:0; }
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .mc-anime .kb-cycle,
  body.senshi--mooncats .senshi-art .ptop--cat .ph--catpic.mc-anime-ph{ width:100%; height:auto; margin:0; }
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .mc-manga .kb-cycle{ width:100%; height:auto; aspect-ratio:240 / 347; margin:0; }
  body.senshi--mooncats .senshi-art .mc-backdrop-box{ margin:85% 10px 12px; padding:12px 14px 14px; }
  body.senshi--mooncats .senshi-art .mc-backdrop-box p{ font-size:14.5px; }
  body.senshi--mooncats .senshi-cat--family .banner--masthead .mc-family-pic img{ width:100px; height:100px; }
}


/* ==========================================================================
   321. THE MOON CATS: THE FAMILY BOX BESIDE THE GIF                (30 Sep 2026)
   ==========================================================================
   Built by build_moon_cats_c70.py.

   - "please place the gif and the profile names back to where they were":
     the masthead goes back to section 315's day, the GIF out of it.
   - "the family profile box should float to the left of the moon cats
     gif... just use the image as the background.... kinda like the
     characters are peaking up from behind the text box. the image can be
     sized down": a row again, the box on the left and the GIF on the right
     at 2x. In the box, Takeuchi's picture is drawn at --mcw wide, moved up
     by 19% of its height (it starts just above Artemis's hair) and fading at
     its edges, over the same picture blurred; the paper panel starts 37% of
     the picture's height lower, at Diana's eyes, so she peeks over it.
     (760 x 1115: 19% of the height is 0.2787 of the width, 37% is 0.5428.)
   - The Luna / Artemis / Diana buttons sit under the GIF, so the top of
     Luna's part shows on the first screen. On a phone: the GIF, the box,
     the credit, then the buttons.
   ========================================================================== */
body.senshi--mooncats .senshi-cat--family .banner--masthead{ align-items:flex-start; gap:22px; }
body.senshi--mooncats .senshi-art .mc-family--peek{ grid-template-columns:minmax(0, 1fr) 204px;
  gap:14px; align-items:center; margin-top:0; }
body.senshi--mooncats .senshi-art .mc-side{ display:flex; flex-direction:column; align-items:center; gap:12px; }
body.senshi--mooncats .senshi-art .mc-family--peek .mc-family-pic img{ width:200px; height:200px; }
body.senshi--mooncats .senshi-art .mc-side .jump-nav{ margin:0; padding:9px 7px; gap:5px; flex-wrap:wrap; }
body.senshi--mooncats .senshi-art .mc-side .jump-link{ padding:6px 8px; }
body.senshi--mooncats .senshi-art .mc-peek{ --mcw:284px; position:relative; isolation:isolate;
  overflow:hidden; padding:calc(var(--mcw) * .5428) 10px 10px; background:#e9a8c6;
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); }
body.senshi--mooncats .senshi-art .mc-peek::before{ content:""; position:absolute; inset:-30px; z-index:-2;
  background:url("images/sailormoon/manga/mooncats/moon-cats-human-forms.webp") 50% 30% / cover no-repeat;
  filter:blur(12px); opacity:.8; }
body.senshi--mooncats .senshi-art .mc-peek-img{ position:absolute; z-index:-1; left:50%;
  top:calc(var(--mcw) * -.2787); width:var(--mcw); max-width:none; height:auto; margin:0;
  transform:translateX(-50%); border:0; box-shadow:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, rgba(0,0,0,0) 100%); }
body.senshi--mooncats .senshi-art .mc-peek-box{ position:relative; padding:12px 16px 14px;
  background:#fffdf7; border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow); }
body.senshi--mooncats .senshi-art .mc-peek-box p{ margin:0; font-size:14.5px; line-height:1.55; }
body.senshi--mooncats .senshi-art .mc-peek-box p + p{ margin-top:8px; }
body.senshi--mooncats .senshi-art .mc-peek-box b{ color:var(--name-a); letter-spacing:.3px; }
/* - and a little less air round the family part, for the same reason */
body.senshi--mooncats .senshi-cat--family #family-intro{ padding-bottom:12px; }
body.senshi--mooncats .senshi-cat--family #family-intro > .block-h{ margin-top:10px; }
body.senshi--mooncats .senshi-cat--family #family-threads{ padding-top:10px; padding-bottom:12px; }
body.senshi--mooncats .senshi-art .mc-peek-cap{ margin:7px 0 0; text-align:center; font-size:13px;
  font-style:italic; line-height:1.4; opacity:.85; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--peek{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  body.senshi--mooncats .senshi-art .mc-peek-col{ display:contents; }
  body.senshi--mooncats .senshi-art .mc-side{ display:contents; }
  body.senshi--mooncats .senshi-art .mc-family--peek .mc-family-pic{ order:-1; justify-self:center; }
  body.senshi--mooncats .senshi-art .mc-family--peek .mc-family-pic img{ width:160px; height:160px; }
  body.senshi--mooncats .senshi-art .mc-side .jump-nav{ order:3; }
  body.senshi--mooncats .senshi-art .mc-peek{ --mcw:290px; padding:calc(var(--mcw) * .5428) 10px 10px; }
  body.senshi--mooncats .senshi-art .mc-peek-box{ padding:12px 14px 14px; }
}


/* ==========================================================================
   322. TUXEDO MASK: ENDYMION AND HELIOS, A CARD EACH                (30 Sep 2026)
   ==========================================================================
   Built by build_mask_duo_c72.py. Ash chose mockup C, "the gradient
   shouldn't cover the characters, and it should be more gold than teal on
   the right side... but not no teal".
   - The gradient fills the box, but the picture keeps a soft pool of paper
     behind it (its ::before, a radial fade), so the multiply-blended figures
     stay their own colours and the gradient shows round them.
   - Endymion: black card, gold border and name. Helios: silver-white card,
     gold border, teal shadow and name.
   ========================================================================== */
body.senshi--tuxedomask .senshi-art .es-duo{ position:relative; isolation:isolate;
  background:linear-gradient(90deg, #a7c8ec 0%, #d3e0ee 24%, #e8eaec 42%, #f2e4b8 60%, #e4c56f 82%, #d6b55a 92%, #8fb9a7 100%) padding-box,
    linear-gradient(90deg, #16161d 0%, #16161d 15%, #c9a648 50%, #d8b85e 88%, #2f7a6b 100%) border-box;
  box-shadow:3px 3px 0 #8a6a1c; }
body.senshi--tuxedomask .senshi-art .es-duo-pic{ position:relative; }
body.senshi--tuxedomask .senshi-art .es-duo-pic::before{ content:""; position:absolute; inset:-60px -90px; z-index:-1;
  background:radial-gradient(closest-side, #fffdf7 0, #fffdf7 78%, rgba(255,253,247,0) 100%); }
body.senshi--tuxedomask .senshi-art .es-duo-side{ position:relative; padding:14px 16px 16px; }
body.senshi--tuxedomask .senshi-art .es-duo-side--endymion{ background:#17171f; color:#eef0f6;
  border:2px solid #c9a648; box-shadow:3px 3px 0 #8a6a1c; }
body.senshi--tuxedomask .senshi-art .es-duo-side--endymion .es-name{ color:#e6c867; }
body.senshi--tuxedomask .senshi-art .es-duo-side--endymion b{ color:#f3dc8a; }
body.senshi--tuxedomask .senshi-art .es-duo-side--endymion a{ color:#f3dc8a; }
body.senshi--tuxedomask .senshi-art .es-duo-side--helios{ background:#fbfaf5;
  border:2px solid #cdb36a; box-shadow:3px 3px 0 #2f7a6b; }
body.senshi--tuxedomask .senshi-art .es-duo-side--helios .es-name{ color:#2f7a6b; }
@media (max-width:760px){
  body.senshi--tuxedomask .senshi-art .es-duo-pic::before{ inset:-40px -50px; }
}


/* ==========================================================================
   323. THE OUTER GUARDIANS IN THE NEW TEMPLATE                   (30 Sep 2026)
   ==========================================================================
   Built by build_outers_c75.py: Uranus, Neptune and Pluto get Saturn's top,
   kit, console and threads, and a "modern astrology" box in place of the
   dignity plate.

   - The henshin placeholder fills the screen the still will fill.
   - "in modern astrology": the still with her planet beside one card, and
     the five facts in a strip under both. Same paper and hairline as the
     dignity cards.
   - Pluto's Garnet Rod lies level across the kit, like the Silence Glaive:
     the file is turned, not the element, and it shows at 1x (567 x 77), half
     that on a phone. The other sprites ship at exactly 2x. Uranus and
     Neptune have two kit cards, so their list is two across, not three.
   ========================================================================== */
.senshi-art .ptop-screen--ph .ph--screen{ position:absolute; inset:0; margin:0; width:auto; height:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,255,255,.08); color:var(--paper); border:0; }
.senshi-art .modplate{ padding:14px; }
.senshi-art .modplate-cols{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:16px;
  align-items:start; }
.senshi-art .modplate-pic{ margin:0; }
.senshi-art .modplate-pic img{ display:block; width:100%; height:auto; border:2px solid var(--backbow);
  box-shadow:3px 3px 0 var(--frontbow); }
.senshi-art .modplate-card{ min-width:0; background:#fffdf6; border:1px solid rgba(230,200,106,.45);
  border-radius:6px; padding:10px 12px 12px; }
.senshi-art .modplate-card .dgset-h{ margin-top:0; }
.senshi-art .modplate-lede{ margin:0 0 10px; font-size:14px; line-height:1.6; }
/* the five facts in a strip under the picture and the card */
.senshi-art .modplate-dl{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin:14px 0 0; }
.senshi-art .modplate-row{ min-width:0; background:#fffdf6; border:1px solid rgba(230,200,106,.45);
  border-radius:6px; padding:7px 9px 8px; }
.senshi-art .modplate-row dt{ font-size:11.5px; letter-spacing:.03em; opacity:.78; margin:0 0 3px; }
.senshi-art .modplate-row dd{ margin:0; font-size:13.5px; line-height:1.4; }
.senshi-art .modplate-row .stat-gly{ vertical-align:-3px; margin-right:4px; }
body.senshi--uranus .senshi-art .kb-list,
body.senshi--neptune .senshi-art .kb-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
/* Uranus's front bow is pure yellow, unreadable as link text on the threads' cream */
body.senshi--uranus .senshi-art .thread-sib{ color:var(--skirt); }
.senshi-art .kb-rod{ margin:0 0 14px; }
.senshi-art .kb-rod-img{ width:567px; height:77px; max-width:none; margin:0 0 10px; }
.senshi-art .kb-rod-cap{ background:#fffdf6; border:1px solid rgba(230,200,106,.45); border-radius:6px;
  padding:8px 10px; }
.senshi-art .kb-rod-cap .kb-name{ display:block; }
@media (max-width:760px){
  .senshi-art .modplate-cols{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .modplate-dl{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .senshi-art .modplate-row:last-child{ grid-column:1 / -1; }
  .senshi-art .kb-rod-img{ width:284px; height:39px; }
}
@media (max-width:620px){
  body.senshi--uranus .senshi-art .kb-list,
  body.senshi--neptune .senshi-art .kb-list{ grid-template-columns:minmax(0, 1fr); }
}


/* ==========================================================================
   324. THE URANUS GLYPH IS THE RIGHT WAY UP ON DISK                (1 Oct 2026)
   ==========================================================================
   build_uranus_glyph_c78.py turned images/favicons/sailoruranusglyph.webp the
   right way up (ring at the bottom). Nothing flips it any more: the
   .nk-g--flip rule further up (section near "the sprite on disk is upside
   down") is no longer used by any page. Don't add it back, and don't flip
   the sprite in a wheel - it would come out upside down again.
   ========================================================================== */


/* ==========================================================================
   325. OUTSIDE THE SEVEN, AND PLUTO'S TIME POWERS                  (1 Oct 2026)
   ==========================================================================
   Built by build_outers_astro_c80.py.

   - "in modern astrology" on Uranus, Neptune and Pluto: the left column is
     the still and, under it, a small box of the planet's modern
     significations in her fuku colours (skirt for the ground, bow for the
     band and the chips). The right column is the "outside the seven" card.
     Under both, across the box, a tiny "the myth" strip with the kit cards'
     fuku cap, then the five facts as before.
   - Pluto's kit: the Garnet Rod is a card like the others, across the full
     row. Time Stop takes two columns (one on a phone) and has a placeholder
     until its picture comes.
   ========================================================================== */
body.senshi--uranus  .senshi-art{ --mod-bg:#010928; --mod-band:#ffff01; --mod-chip:#ffff01; --mod-hi:#ffff01;
  --mod-ink:#fdfdf0; --mod-rule:#010928; }
body.senshi--neptune .senshi-art{ --mod-bg:#004752; --mod-band:#0a1764; --mod-chip:#9fe8da; --mod-hi:#bff3e8;
  --mod-ink:#f2fffb; --mod-rule:#004752; }
body.senshi--pluto   .senshi-art{ --mod-bg:#171219; --mod-band:#66202d; --mod-chip:#c8152e; --mod-hi:#f2a8b5;
  --mod-ink:#fdf5ff; --mod-rule:#66202d; }
.senshi-art .modplate-l,
.senshi-art .modplate-r{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.senshi-art .modsig{ position:relative; background:var(--mod-bg); color:var(--mod-ink); border-radius:6px;
  padding:13px 12px 12px; box-shadow:3px 3px 0 var(--mod-band); overflow:hidden; }
.senshi-art .modsig::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--mod-band); }
.senshi-art .modsig-h{ margin:0 0 8px; font-size:11.5px; letter-spacing:.06em; color:var(--mod-hi); }
.senshi-art .modsig-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.senshi-art .modsig-list li{ margin:0; padding:3px 9px 4px; border:1px solid var(--mod-chip); border-radius:999px;
  font-size:13px; line-height:1.3; color:var(--mod-ink); background:rgba(255,255,255,.06); }
.senshi-art .modplate-more{ margin:0 0 12px; font-size:13px; }
.senshi-art .modplate-lnk{ color:var(--sel); text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px; }
.senshi-art .modplate-lnk:hover{ text-decoration-style:solid; }
.senshi-art .modmyth{ position:relative; margin:14px 0 0; background:#fffdf6; border:1px solid rgba(230,200,106,.45);
  border-left:4px solid var(--mod-rule); border-radius:6px; padding:12px 12px 11px; }
.senshi-art .modmyth::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--fuku-tile); background-size:320px 100%; pointer-events:none; }
.senshi-art .modmyth-h{ margin:0 0 4px; font-size:11.5px; letter-spacing:.06em; opacity:.8; }
.senshi-art .modmyth-t{ margin:0; font-size:13.5px; line-height:1.6; }

/* Pluto's kit */
.senshi-art .kb--rod{ grid-column:1 / -1; }
.senshi-art .kb--rod .kb-shot{ min-height:0; padding:6px 0 0; }
.senshi-art .kb--rod .kb-rod-img{ margin:0; }
.senshi-art .kb--keys .kb-shot{ max-width:100%; }
.senshi-art .kb--wide{ grid-column:span 2; }
.senshi-art .ph--kbshot{ width:min(100%, 260px); aspect-ratio:4 / 3; }
@media (max-width:620px){
  .senshi-art .kb--wide{ grid-column:auto; }
}


/* ==========================================================================
   326. PLUTO'S KIT TWO BY TWO, AND POWERS SIDE BY SIDE        (1 Oct 2026)
   ==========================================================================
   Built by build_pluto_layout_c82.py.

   - Pluto's kit: the Garnet Rod across the top, the four other cards two by
     two under it, one column on a phone. Each card takes two rows of a
     subgrid (picture, caption), so in a row the pictures share a height and
     the captions start level. Without subgrid it's still two by two.
   - "what she can do": like section 134 for attacks, a season with powers
     and no attacks lets them take the next free cells, so they sit side by
     side instead of stacking in the left column. Only Pluto's R tab today.
   ========================================================================== */
body.senshi--pluto .senshi-art .kb-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@supports (grid-template-rows:subgrid){
  body.senshi--pluto .senshi-art .kb-list > .kb{ display:grid; grid-row:span 2; grid-template-rows:subgrid;
    row-gap:10px; }
  body.senshi--pluto .senshi-art .kb-list > .kb > .kb-shot{ align-self:center; justify-self:center; }
  body.senshi--pluto .senshi-art .kb-list > .kb > .kb-cap{ align-self:start; }
}
@media (max-width:620px){
  body.senshi--pluto .senshi-art .kb-list{ grid-template-columns:minmax(0, 1fr); }
}
.senshi-art .ka-moves .km-list:not(:has(.km--attack)) .km.km--item{
  grid-column:auto;
}


/* ==========================================================================
   327. THE OUTER GUARDIANS' FUKU GRADIENTS, FUKU AND TRANSFORMATION  (1 Oct 2026)
   ==========================================================================
   Built by build_outers_fuku_c85.py. Ash: "update uranus' fuku gradient to
   reflect the color palette of her transformation sequence and the fuku
   together ... do the same for the three outers."

   Each gradient runs from her skirt into the colours of her transformation:
   Uranus navy to crimson to flame, Neptune sea-green to deep sea blue to aqua,
   Pluto black to garnet to violet. They paint her name, the headings, the
   thread tabs and the bold and italic names, so each is held at 4.5:1 or
   better on her paper, her boxes and white.

   The scrolling bar isn't text, so it carries the bright colours the
   gradient can't: Uranus's planet gold, Neptune's aqua glow and pink
   silhouette, Pluto's violet glow and aurora green. Same 320px palindrome as
   section 136, so the loop has no seam.
   ========================================================================== */
/* uranus   paper / box / white: #010928 19.13/18.25/19.61  #b0102f 6.92/6.60/7.09  #c2410c 5.05/4.82/5.18 */
body.senshi--uranus .senshi-art{
  --name-a:#010928;
  --name-b:#b0102f;
  --name-c:#c2410c;
  --fuku-tile:repeating-linear-gradient(90deg,
      #010928 0px, #3b1a5c 40px, #c41337 80px, #e2561c 120px, #f2d23a 160px,
      #e2561c 200px, #c41337 240px, #3b1a5c 280px, #010928 320px);
}
/* neptune   paper / box / white: #004752 10.12/9.66/10.38  #1b3f86 9.74/9.30/9.99  #127d80 4.79/4.58/4.92 */
body.senshi--neptune .senshi-art{
  --name-a:#004752;
  --name-b:#1b3f86;
  --name-c:#127d80;
  --fuku-tile:repeating-linear-gradient(90deg,
      #0a1764 0px, #134c6d 40px, #2f8f88 80px, #59d1d5 120px, #ecb3cf 160px,
      #59d1d5 200px, #2f8f88 240px, #134c6d 280px, #0a1764 320px);
}
/* pluto   paper / box / white: #171219 17.31/16.37/18.47  #a3122a 7.35/6.95/7.84  #7a3fc0 5.96/5.64/6.36 */
body.senshi--pluto .senshi-art{
  --name-a:#171219;
  --name-b:#a3122a;
  --name-c:#7a3fc0;
  --fuku-tile:repeating-linear-gradient(90deg,
      #171219 0px, #66202d 40px, #c8152e 80px, #9a5fe0 120px, #3fae86 160px,
      #9a5fe0 200px, #c8152e 240px, #66202d 280px, #171219 320px);
}


/* ==========================================================================
   328. THE OUTER FOUR AT DUSK                                   (1 Oct 2026)
   ==========================================================================
   Built by build_outers_dusk_c86.py. Ash: "the outer senshi are more dark and
   edgy in the story... their profiles should reflect that in their
   coloring... more deep and sensual." She chose dusky pages: the frame goes
   deep, the paper dims to a tint of her colour, dark text stays.

   Saturn, Uranus, Neptune and Pluto only. Lace colours Ash picked from the
   swatches (build_outers_dusk_c89.py): Neptune teal on deep teal, Saturn lilac
   on black into violet. Uranus's and Pluto's doilies match their henshin stills
   (build_outers_dusk_c90.py): Uranus dark red on black, Pluto aurora blue on her
   deep blue night; their frames and glows follow the stills too (c91).
   Revised by build_outers_dusk_c87.py:
   the site's scrolling glyph background stays as it is ("please don't change
   the entire page background"), and the deep colour comes in round the page.
   - Round the page: a velvet frame in her night colours, a thin bright edge
     in her glow colour, a deep band of her night, and her colour's soft glow.
   - Her paper, boxes and cards at dusk: paper at relative luminance .70,
     warm fill .60, wash .48, all her own hue. Every text colour on the page
     is measured against them in the render by the build's checker.
   - Behind the top: dark lace in her colour (tile24-alpha.png or
     frost-alpha.png) threaded over a deep ramp, using darken so the ground
     keeps its colour and only the threads take hers.
   - The cream cards that were written as #fffdf6, and the moves console,
     take her warm fill, and
     the inks tuned for daylight paper (the pink hover terms, the grey season
     years, the links in the modern astrology box, Uranus's olive bold) take
     her own darker colours so they still read at dusk.
   ========================================================================== */
/* saturn   paper #e1d6ee  box #d5c5e8  wash #c5b0df */
body.senshi--saturn .container--post > .senshi-art{
  --paper:#e1d6ee;
  --boxbody:#e1d6ee;
  --box:#d5c5e8;
  --wash:#c5b0df;
  --biotint:#d5c5e8;
  --biotint2:#e1d6ee;
  --sen-body:#d5c5e8;
  --lace:#6e36ad;
  background-color:var(--paper);
  background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,.05) 100%);
  box-shadow:0 0 0 2px rgba(138,95,214,.75), 0 0 0 7px #14102a, 0 0 0 8px rgba(138,95,214,.75), 0 0 34px 8px rgba(138,95,214,.38);
}
body.senshi--saturn .container--post > .senshi-art .ptop-band::before{
  background-color:#08060e;
  background-image:linear-gradient(#a989e0, #a989e0), url("images/sailormoon/select/lace/tile24-alpha.png"),
    linear-gradient(135deg, #08060e 0%, #14102a 55%, #1e0a14 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, auto, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* uranus   paper #e4d9c7  box #dac9b1  wash #ccb693 */
body.senshi--uranus .container--post > .senshi-art{
  --paper:#e4d9c7;
  --boxbody:#e4d9c7;
  --box:#dac9b1;
  --wash:#ccb693;
  --biotint:#dac9b1;
  --biotint2:#e4d9c7;
  --sen-body:#dac9b1;
  --lace:#6a5027;
  background-color:var(--paper);
  background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,.05) 100%);
  box-shadow:0 0 0 2px rgba(160,20,24,.75), 0 0 0 7px #1a0204, 0 0 0 8px rgba(160,20,24,.75), 0 0 34px 8px rgba(160,20,24,.38);
}
body.senshi--uranus .container--post > .senshi-art .ptop-band::before{
  background-color:#030102;
  background-image:linear-gradient(#8e1418, #8e1418), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #030102 0%, #1a0204 55%, #4a0306 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* neptune   paper #c4dfd9  box #aed4ca  wash #8fc2b6 */
body.senshi--neptune .container--post > .senshi-art{
  --paper:#c4dfd9;
  --boxbody:#c4dfd9;
  --box:#aed4ca;
  --wash:#8fc2b6;
  --biotint:#aed4ca;
  --biotint2:#c4dfd9;
  --sen-body:#aed4ca;
  --lace:#285e50;
  background-color:var(--paper);
  background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,.05) 100%);
  box-shadow:0 0 0 2px rgba(43,184,148,.75), 0 0 0 7px #0a3a34, 0 0 0 8px rgba(43,184,148,.75), 0 0 34px 8px rgba(43,184,148,.38);
}
body.senshi--neptune .container--post > .senshi-art .ptop-band::before{
  background-color:#04201e;
  background-image:linear-gradient(#5fd8b8, #5fd8b8), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #04201e 0%, #0a3f38 55%, #12665a 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* pluto   paper #e6d7da  box #dcc7cc  wash #cfb1b8 */
body.senshi--pluto .container--post > .senshi-art{
  --paper:#e6d7da;
  --boxbody:#e6d7da;
  --box:#dcc7cc;
  --wash:#cfb1b8;
  --biotint:#dcc7cc;
  --biotint2:#e6d7da;
  --sen-body:#dcc7cc;
  --lace:#824050;
  background-color:var(--paper);
  background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,.05) 100%);
  box-shadow:0 0 0 2px rgba(63,127,180,.75), 0 0 0 7px #03083a, 0 0 0 8px rgba(63,127,180,.75), 0 0 34px 8px rgba(63,127,180,.38);
}
body.senshi--pluto .container--post > .senshi-art .ptop-band::before{
  background-color:#02011c;
  background-image:linear-gradient(#3f7fb4, #3f7fb4), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #02011c 0%, #03083a 55%, #08235c 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* inks that were tuned for daylight paper */
body.senshi--saturn .container--post > .senshi-art .gloss,
body.senshi--uranus .container--post > .senshi-art .gloss,
body.senshi--neptune .container--post > .senshi-art .gloss,
body.senshi--pluto .container--post > .senshi-art .gloss{
  color:color-mix(in srgb, var(--name-b) 82%, #000);
  border-bottom-color:color-mix(in srgb, var(--name-b) 55%, transparent);
}
body.senshi--saturn .container--post > .senshi-art .ks-tab .ks-era,
body.senshi--uranus .container--post > .senshi-art .ks-tab .ks-era,
body.senshi--neptune .container--post > .senshi-art .ks-tab .ks-era,
body.senshi--pluto .container--post > .senshi-art .ks-tab .ks-era{
  color:color-mix(in srgb, var(--ink) 78%, var(--paper));
}
body.senshi--saturn .container--post > .senshi-art .modplate-lnk,
body.senshi--uranus .container--post > .senshi-art .modplate-lnk,
body.senshi--neptune .container--post > .senshi-art .modplate-lnk,
body.senshi--pluto .container--post > .senshi-art .modplate-lnk{
  color:color-mix(in srgb, var(--name-b) 82%, #000);
}
body.senshi--saturn .container--post > .senshi-art .codex-foot,
body.senshi--saturn .container--post > .senshi-art .ph,
body.senshi--uranus .container--post > .senshi-art .codex-foot,
body.senshi--uranus .container--post > .senshi-art .ph,
body.senshi--neptune .container--post > .senshi-art .codex-foot,
body.senshi--neptune .container--post > .senshi-art .ph,
body.senshi--pluto .container--post > .senshi-art .codex-foot,
body.senshi--pluto .container--post > .senshi-art .ph{
  background:var(--box);
}
body.senshi--uranus .container--post > .senshi-art .block b{ color:var(--name-a); }
/* the cards that were written in cream take her warm fill */
body.senshi--saturn .container--post > .senshi-art .modplate-card,
body.senshi--saturn .container--post > .senshi-art .modplate-row,
body.senshi--saturn .container--post > .senshi-art .modmyth,
body.senshi--saturn .container--post > .senshi-art .kb-rod-cap,
body.senshi--saturn .container--post > .senshi-art .ks-console,
body.senshi--uranus .container--post > .senshi-art .modplate-card,
body.senshi--uranus .container--post > .senshi-art .modplate-row,
body.senshi--uranus .container--post > .senshi-art .modmyth,
body.senshi--uranus .container--post > .senshi-art .kb-rod-cap,
body.senshi--uranus .container--post > .senshi-art .ks-console,
body.senshi--neptune .container--post > .senshi-art .modplate-card,
body.senshi--neptune .container--post > .senshi-art .modplate-row,
body.senshi--neptune .container--post > .senshi-art .modmyth,
body.senshi--neptune .container--post > .senshi-art .kb-rod-cap,
body.senshi--neptune .container--post > .senshi-art .ks-console,
body.senshi--pluto .container--post > .senshi-art .modplate-card,
body.senshi--pluto .container--post > .senshi-art .modplate-row,
body.senshi--pluto .container--post > .senshi-art .modmyth,
body.senshi--pluto .container--post > .senshi-art .kb-rod-cap,
body.senshi--pluto .container--post > .senshi-art .ks-console{
  background-color:var(--box);
}


/* ==========================================================================
   329. THE ROYAL FOUR: PEARL, GOLD AND TWILIGHT                 (1 Oct 2026)
   ==========================================================================
   Built by build_royals_c93.py. Ash: "the top 4. moon, mask, chibi, cats...
   they are all royal." Naoko's royal touches she chose: opal shimmer, gold and
   pearl trim, twilight violet. Moon keeps her fuku palette.

   - Opal paper: her own paper with a faint sheen across it, pink, pale gold,
     lavender and sky.
   - Round the page: gold line, pearl band, gold line, and a twilight-violet
     glow outside it (the outers have a dark velvet frame in the same place).
   - The doily behind the top matches the henshin still beside it: Moon
     pearl-pink lace on her royal blue into lavender, Chibi Moon white pearl
     lace on pale sky into pink and lilac. Tuxedo Mask's starts as the deep
     navy of his still and fades across the band into the royal opal gradient,
     in pearl-white lace (c95). The cats have no band; each of their five
     boxes takes the trim (c95: the c93 selector missed them).
   - Name gradients, text colours, layout and the scrolling background stay.
   ========================================================================== */
/* moon */
body.senshi--moon .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(118deg, rgba(255,206,226,.20) 0%, rgba(255,240,204,.20) 32%,
                    rgba(218,208,255,.20) 64%, rgba(204,232,255,.20) 100%);
  box-shadow:0 0 0 2px #c9a24e, 0 0 0 6px #f8f1e4, 0 0 0 7px #c9a24e, 0 0 0 8px rgba(168,134,46,.5),
    0 0 34px 8px rgba(122,116,204,.38);
}
body.senshi--moon .container--post > .senshi-art .ptop-band::before{
  background-color:#153796;
  background-image:linear-gradient(#f6dcea, #f6dcea), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #153796 0%, #2a46aa 55%, #817abe 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* chibimoon */
body.senshi--chibimoon .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(118deg, rgba(255,206,226,.20) 0%, rgba(255,240,204,.20) 32%,
                    rgba(218,208,255,.20) 64%, rgba(204,232,255,.20) 100%);
  box-shadow:0 0 0 2px #c9a24e, 0 0 0 6px #f8f1e4, 0 0 0 7px #c9a24e, 0 0 0 8px rgba(168,134,46,.5),
    0 0 34px 8px rgba(197,143,240,.38);
}
body.senshi--chibimoon .container--post > .senshi-art .ptop-band::before{
  background-color:#88bde3;
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #88bde3 0%, #b9a6ee 55%, #e98fd6 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* tuxedomask */
body.senshi--tuxedomask .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(118deg, rgba(255,206,226,.20) 0%, rgba(255,240,204,.20) 32%,
                    rgba(218,208,255,.20) 64%, rgba(204,232,255,.20) 100%);
  box-shadow:0 0 0 2px #c9a24e, 0 0 0 6px #f8f1e4, 0 0 0 7px #c9a24e, 0 0 0 8px rgba(168,134,46,.5),
    0 0 34px 8px rgba(74,79,176,.38);
}
body.senshi--tuxedomask .container--post > .senshi-art .ptop-band::before{
  background-color:#0b0d4f;
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(90deg, #0b0d4f 0%, #0f2265 28%, #3a4290 46%, #9d8fc8 64%, #e6c9da 82%, #f4e6c6 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* mooncats */
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(118deg, rgba(255,206,226,.20) 0%, rgba(255,240,204,.20) 32%,
                    rgba(218,208,255,.20) 64%, rgba(204,232,255,.20) 100%);
  box-shadow:0 0 0 2px #c9a24e, 0 0 0 6px #f8f1e4, 0 0 0 7px #c9a24e, 0 0 0 8px rgba(168,134,46,.5),
    0 0 34px 8px rgba(138,122,208,.38);
}


/* ==========================================================================
   330. THE ROYAL FOUR: ROYAL BOXES AND BUTTONS, MAMORU'S GALLERY (1 Oct 2026)
   ==========================================================================
   Built by build_royals_c95.py. Ash: "update the styling of the boxes to be
   more royal ... the link buttons also need a treatment. mamoru's profile
   paragraph gallery seems small."

   - Big boxes: no hard sticker shadow. Gold hairline, pearl inner rim with a
     gold line inside it, rounded corners, a soft twilight shadow: the page
     frame's trim, in small.
   - Cards: gold hairline, pearl rim, soft shadow. Thread tabs keep their
     colours with a gold underline. The junk drawer's ridge is a gold double.
   - Buttons: pearl into champagne, gold edge, the page's deep ink, soft
     shadow; twilight with pearl text on hover.
   - Mamoru's gallery: 270px wide and at least 440px tall, so his two tall
     paintings show properly instead of at the height of his short paragraph.
   ========================================================================== */
/* moon */
body.senshi--moon .container--post > .senshi-art .ptop,
body.senshi--moon .container--post > .senshi-art .dgplate,
body.senshi--moon .container--post > .senshi-art .ks-console,
body.senshi--moon .container--post > .senshi-art .dgw,
body.senshi--moon .container--post > .senshi-art .codex-foot,
body.senshi--moon .container--post > .senshi-art .mc-peek,
body.senshi--moon .container--post > .senshi-art .mc-peek-box,
body.senshi--moon .container--post > .senshi-art .es-mini{
  border:1px solid #c9a24e; border-radius:10px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 0 10px 24px -10px rgba(122,116,204,.55);
}
body.senshi--moon .container--post > .senshi-art .ptop-card,
body.senshi--moon .container--post > .senshi-art .kit,
body.senshi--moon .container--post > .senshi-art .ss-frame,
body.senshi--moon .container--post > .senshi-art .dg-card,
body.senshi--moon .container--post > .senshi-art .kb{
  border:1px solid #c9a24e; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 6px 16px -8px rgba(122,116,204,.6);
}
body.senshi--moon .container--post > .senshi-art .threads-block{ border-color:#c9a24e; border-radius:10px; }
body.senshi--moon .container--post > .senshi-art .th-head{ box-shadow:inset 0 -2px 0 rgba(201,162,78,.55), 0 6px 14px -6px rgba(122,116,204,.6); }
body.senshi--moon .container--post > .senshi-art .junkdump--v2{ border:4px double #c9a24e; border-radius:12px; box-shadow:0 10px 24px -10px rgba(122,116,204,.55); }
body.senshi--moon .container--post > .senshi-art .astro-door,
body.senshi--moon .container--post > .senshi-art .es-mini-more,
body.senshi--moon .container--post > .senshi-art .codex-link,
body.senshi--moon .container--post > .senshi-art .jump-link,
body.senshi--moon .container--post > .senshi-art .junk-pull,
body.senshi--moon .container--post > .senshi-art .junk-arrow{
  background:linear-gradient(180deg, #fffaf1 0%, #f3e4c4 100%);
  color:#1f4fa8; border:1px solid #c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 4px 12px -4px rgba(122,116,204,.6);
  text-shadow:none;
}
body.senshi--moon .container--post > .senshi-art .astro-door,
body.senshi--moon .container--post > .senshi-art .es-mini-more,
body.senshi--moon .container--post > .senshi-art .codex-link,
body.senshi--moon .container--post > .senshi-art .jump-link{ border-radius:999px; }
body.senshi--moon .container--post > .senshi-art .junk-pull,
body.senshi--moon .container--post > .senshi-art .junk-arrow{ border-radius:8px; }
body.senshi--moon .container--post > .senshi-art .astro-door:hover,
body.senshi--moon .container--post > .senshi-art .es-mini-more:hover,
body.senshi--moon .container--post > .senshi-art .codex-link:hover,
body.senshi--moon .container--post > .senshi-art .jump-link:hover,
body.senshi--moon .container--post > .senshi-art .junk-pull:hover,
body.senshi--moon .container--post > .senshi-art .junk-arrow:hover{
  background:linear-gradient(180deg, #6e68b8 0%, #514d87 100%);
  color:#fffaf1; border-color:#c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 0 0 14px rgba(122,116,204,.6);
}
body.senshi--moon .container--post > .senshi-art .astro-door:active,
body.senshi--moon .container--post > .senshi-art .es-mini-more:active,
body.senshi--moon .container--post > .senshi-art .codex-link:active,
body.senshi--moon .container--post > .senshi-art .jump-link:active{ transform:translateY(1px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
/* chibimoon */
body.senshi--chibimoon .container--post > .senshi-art .ptop,
body.senshi--chibimoon .container--post > .senshi-art .dgplate,
body.senshi--chibimoon .container--post > .senshi-art .ks-console,
body.senshi--chibimoon .container--post > .senshi-art .dgw,
body.senshi--chibimoon .container--post > .senshi-art .codex-foot,
body.senshi--chibimoon .container--post > .senshi-art .mc-peek,
body.senshi--chibimoon .container--post > .senshi-art .mc-peek-box,
body.senshi--chibimoon .container--post > .senshi-art .es-mini{
  border:1px solid #c9a24e; border-radius:10px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 0 10px 24px -10px rgba(197,143,240,.55);
}
body.senshi--chibimoon .container--post > .senshi-art .ptop-card,
body.senshi--chibimoon .container--post > .senshi-art .kit,
body.senshi--chibimoon .container--post > .senshi-art .ss-frame,
body.senshi--chibimoon .container--post > .senshi-art .dg-card,
body.senshi--chibimoon .container--post > .senshi-art .kb{
  border:1px solid #c9a24e; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 6px 16px -8px rgba(197,143,240,.6);
}
body.senshi--chibimoon .container--post > .senshi-art .threads-block{ border-color:#c9a24e; border-radius:10px; }
body.senshi--chibimoon .container--post > .senshi-art .th-head{ box-shadow:inset 0 -2px 0 rgba(201,162,78,.55), 0 6px 14px -6px rgba(197,143,240,.6); }
body.senshi--chibimoon .container--post > .senshi-art .junkdump--v2{ border:4px double #c9a24e; border-radius:12px; box-shadow:0 10px 24px -10px rgba(197,143,240,.55); }
body.senshi--chibimoon .container--post > .senshi-art .astro-door,
body.senshi--chibimoon .container--post > .senshi-art .es-mini-more,
body.senshi--chibimoon .container--post > .senshi-art .codex-link,
body.senshi--chibimoon .container--post > .senshi-art .jump-link,
body.senshi--chibimoon .container--post > .senshi-art .junk-pull,
body.senshi--chibimoon .container--post > .senshi-art .junk-arrow{
  background:linear-gradient(180deg, #fffaf1 0%, #f3e4c4 100%);
  color:#6a1b39; border:1px solid #c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 4px 12px -4px rgba(197,143,240,.6);
  text-shadow:none;
}
body.senshi--chibimoon .container--post > .senshi-art .astro-door,
body.senshi--chibimoon .container--post > .senshi-art .es-mini-more,
body.senshi--chibimoon .container--post > .senshi-art .codex-link,
body.senshi--chibimoon .container--post > .senshi-art .jump-link{ border-radius:999px; }
body.senshi--chibimoon .container--post > .senshi-art .junk-pull,
body.senshi--chibimoon .container--post > .senshi-art .junk-arrow{ border-radius:8px; }
body.senshi--chibimoon .container--post > .senshi-art .astro-door:hover,
body.senshi--chibimoon .container--post > .senshi-art .es-mini-more:hover,
body.senshi--chibimoon .container--post > .senshi-art .codex-link:hover,
body.senshi--chibimoon .container--post > .senshi-art .jump-link:hover,
body.senshi--chibimoon .container--post > .senshi-art .junk-pull:hover,
body.senshi--chibimoon .container--post > .senshi-art .junk-arrow:hover{
  background:linear-gradient(180deg, #8863a6 0%, #59406c 100%);
  color:#fffaf1; border-color:#c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 0 0 14px rgba(197,143,240,.6);
}
body.senshi--chibimoon .container--post > .senshi-art .astro-door:active,
body.senshi--chibimoon .container--post > .senshi-art .es-mini-more:active,
body.senshi--chibimoon .container--post > .senshi-art .codex-link:active,
body.senshi--chibimoon .container--post > .senshi-art .jump-link:active{ transform:translateY(1px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
/* tuxedomask */
body.senshi--tuxedomask .container--post > .senshi-art .ptop,
body.senshi--tuxedomask .container--post > .senshi-art .dgplate,
body.senshi--tuxedomask .container--post > .senshi-art .ks-console,
body.senshi--tuxedomask .container--post > .senshi-art .dgw,
body.senshi--tuxedomask .container--post > .senshi-art .codex-foot,
body.senshi--tuxedomask .container--post > .senshi-art .mc-peek,
body.senshi--tuxedomask .container--post > .senshi-art .mc-peek-box,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini{
  border:1px solid #c9a24e; border-radius:10px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 0 10px 24px -10px rgba(74,79,176,.55);
}
body.senshi--tuxedomask .container--post > .senshi-art .ptop-card,
body.senshi--tuxedomask .container--post > .senshi-art .kit,
body.senshi--tuxedomask .container--post > .senshi-art .ss-frame,
body.senshi--tuxedomask .container--post > .senshi-art .dg-card,
body.senshi--tuxedomask .container--post > .senshi-art .kb{
  border:1px solid #c9a24e; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 6px 16px -8px rgba(74,79,176,.6);
}
body.senshi--tuxedomask .container--post > .senshi-art .threads-block{ border-color:#c9a24e; border-radius:10px; }
body.senshi--tuxedomask .container--post > .senshi-art .th-head{ box-shadow:inset 0 -2px 0 rgba(201,162,78,.55), 0 6px 14px -6px rgba(74,79,176,.6); }
body.senshi--tuxedomask .container--post > .senshi-art .junkdump--v2{ border:4px double #c9a24e; border-radius:12px; box-shadow:0 10px 24px -10px rgba(74,79,176,.55); }
body.senshi--tuxedomask .container--post > .senshi-art .astro-door,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini-more,
body.senshi--tuxedomask .container--post > .senshi-art .codex-link,
body.senshi--tuxedomask .container--post > .senshi-art .jump-link,
body.senshi--tuxedomask .container--post > .senshi-art .junk-pull,
body.senshi--tuxedomask .container--post > .senshi-art .junk-arrow{
  background:linear-gradient(180deg, #fffaf1 0%, #f3e4c4 100%);
  color:#101728; border:1px solid #c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 4px 12px -4px rgba(74,79,176,.6);
  text-shadow:none;
}
body.senshi--tuxedomask .container--post > .senshi-art .astro-door,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini-more,
body.senshi--tuxedomask .container--post > .senshi-art .codex-link,
body.senshi--tuxedomask .container--post > .senshi-art .jump-link{ border-radius:999px; }
body.senshi--tuxedomask .container--post > .senshi-art .junk-pull,
body.senshi--tuxedomask .container--post > .senshi-art .junk-arrow{ border-radius:8px; }
body.senshi--tuxedomask .container--post > .senshi-art .astro-door:hover,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini-more:hover,
body.senshi--tuxedomask .container--post > .senshi-art .codex-link:hover,
body.senshi--tuxedomask .container--post > .senshi-art .jump-link:hover,
body.senshi--tuxedomask .container--post > .senshi-art .junk-pull:hover,
body.senshi--tuxedomask .container--post > .senshi-art .junk-arrow:hover{
  background:linear-gradient(180deg, #4a4fb0 0%, #383c86 100%);
  color:#fffaf1; border-color:#c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 0 0 14px rgba(74,79,176,.6);
}
body.senshi--tuxedomask .container--post > .senshi-art .astro-door:active,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini-more:active,
body.senshi--tuxedomask .container--post > .senshi-art .codex-link:active,
body.senshi--tuxedomask .container--post > .senshi-art .jump-link:active{ transform:translateY(1px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
/* mooncats */
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ptop,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .dgplate,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ks-console,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .dgw,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-foot,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .mc-peek,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .mc-peek-box,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini{
  border:1px solid #c9a24e; border-radius:10px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 0 10px 24px -10px rgba(138,122,208,.55);
}
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ptop-card,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .kit,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ss-frame,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .dg-card,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .kb{
  border:1px solid #c9a24e; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 6px 16px -8px rgba(138,122,208,.6);
}
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .threads-block{ border-color:#c9a24e; border-radius:10px; }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .th-head{ box-shadow:inset 0 -2px 0 rgba(201,162,78,.55), 0 6px 14px -6px rgba(138,122,208,.6); }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junkdump--v2{ border:4px double #c9a24e; border-radius:12px; box-shadow:0 10px 24px -10px rgba(138,122,208,.55); }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .astro-door,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini-more,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-link,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .jump-link,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-pull,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-arrow{
  background:linear-gradient(180deg, #fffaf1 0%, #f3e4c4 100%);
  color:#14121f; border:1px solid #c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 4px 12px -4px rgba(138,122,208,.6);
  text-shadow:none;
}
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .astro-door,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini-more,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-link,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .jump-link{ border-radius:999px; }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-pull,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-arrow{ border-radius:8px; }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .astro-door:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini-more:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-link:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .jump-link:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-pull:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-arrow:hover{
  background:linear-gradient(180deg, #7568b1 0%, #544a7f 100%);
  color:#fffaf1; border-color:#c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 0 0 14px rgba(138,122,208,.6);
}
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .astro-door:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini-more:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-link:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .jump-link:active{ transform:translateY(1px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
body.senshi--tuxedomask .container--post > .senshi-art .ptop--v3 .ptop-about{ --gal-w:270px; }
body.senshi--tuxedomask .container--post > .senshi-art .ptop--v3 .ptop-gal .kb-cycle{ min-height:440px; }
@media (max-width:760px){
  body.senshi--tuxedomask .container--post > .senshi-art .ptop--v3 .ptop-gal .kb-cycle{ width:min(300px, 100%); height:444px; min-height:0; }
}


/* ==========================================================================
   331. THE INNER FOUR: HER OWN FUKU, TURNED UP                  (1 Oct 2026)
   ==========================================================================
   Built by build_inners_c96.py. Ash: the inners are "not pastel... but
   bubblegum or popping primary colors". She chose "her own fuku, turned up".
   The outers went to dusk (328), the royals to pearl and gold (329, 330).

   Mercury, Mars, Jupiter and Venus. Her two main fuku colours (palettes.py),
   brighter and more saturated:
   - Round the page: a band of her deeper colour with a white stripe through
     it, and a bright glow outside in her other colour. Mercury cobalt and
     aqua-sky, Mars red and violet, Jupiter green and bubblegum pink, Venus
     royal blue and orange.
   - Candy paper: her own paper with a light sheen across it in her two
     colours.
   - The doily behind the top matches the henshin still beside it, in the
     still's own bright colours: Mercury pale aqua lace on deep blue into teal
     and green, Mars pink lace on dark plum into crimson, Jupiter neon green
     lace on navy into magenta, Venus yellow lace on teal into green-gold.
     The card over it is 86% paper (72% elsewhere) so it stays bright.
   - Name gradients, text colours, layout and the scrolling background stay.
   ========================================================================== */
/* mercury */
body.senshi--mercury .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(118deg, rgba(201,240,255,.34) 0%, rgba(204,255,240,.34) 100%);
  box-shadow:0 0 0 2px #fff, 0 0 0 8px #0066d6, 0 0 0 10px #fff, 0 0 0 11px rgba(0,102,214,.55),
    0 0 36px 12px rgba(79,220,255,.62);
}
body.senshi--mercury .container--post > .senshi-art .ptop-card{ background:color-mix(in srgb, var(--paper) 86%, transparent); }
body.senshi--mercury .container--post > .senshi-art .ptop-band::before{
  background-color:#054d88;
  background-image:linear-gradient(#d6fff6, #d6fff6), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #054d88 0%, #0a6a8e 55%, #2fc08e 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* mars */
body.senshi--mars .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(118deg, rgba(255,214,220,.34) 0%, rgba(234,214,255,.34) 100%);
  box-shadow:0 0 0 2px #fff, 0 0 0 8px #e0201c, 0 0 0 10px #fff, 0 0 0 11px rgba(224,32,28,.55),
    0 0 36px 12px rgba(160,64,232,.62);
}
body.senshi--mars .container--post > .senshi-art .ptop-card{ background:color-mix(in srgb, var(--paper) 86%, transparent); }
body.senshi--mars .container--post > .senshi-art .ptop-band::before{
  background-color:#2a0028;
  background-image:linear-gradient(#ff7aa0, #ff7aa0), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #2a0028 0%, #8c0014 55%, #c4103a 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* jupiter */
body.senshi--jupiter .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(118deg, rgba(210,255,216,.34) 0%, rgba(255,212,238,.34) 100%);
  box-shadow:0 0 0 2px #fff, 0 0 0 8px #119a24, 0 0 0 10px #fff, 0 0 0 11px rgba(17,154,36,.55),
    0 0 36px 12px rgba(255,110,196,.62);
}
body.senshi--jupiter .container--post > .senshi-art .ptop-card{ background:color-mix(in srgb, var(--paper) 86%, transparent); }
body.senshi--jupiter .container--post > .senshi-art .ptop-band::before{
  background-color:#04103e;
  background-image:linear-gradient(#5cffa0, #5cffa0), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #04103e 0%, #2e0846 55%, #5c004c 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}
/* venus */
body.senshi--venus .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(118deg, rgba(255,240,176,.34) 0%, rgba(219,227,255,.34) 100%);
  box-shadow:0 0 0 2px #fff, 0 0 0 8px #1f3fb0, 0 0 0 10px #fff, 0 0 0 11px rgba(31,63,176,.55),
    0 0 36px 12px rgba(255,162,0,.62);
}
body.senshi--venus .container--post > .senshi-art .ptop-card{ background:color-mix(in srgb, var(--paper) 86%, transparent); }
body.senshi--venus .container--post > .senshi-art .ptop-band::before{
  background-color:#0b4a63;
  background-image:linear-gradient(#fff27a, #fff27a), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #0b4a63 0%, #2f7f6a 55%, #a8c870 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
  image-rendering:auto;
  opacity:1;
}


/* ==========================================================================
   332. THE MOON CATS: THE PICTURE BIGGER, THE TITLE BESIDE IT   (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_family_c97.py. Ash, with the family part marked
   up: "make the human image bigger... style it taller or wider how you like.
   move the moon cats over and maybe the text is needed to.. the cats gif is
   kinda big... not so big plz."

   - The title and "Luna, Artemis and Diana" move into the right-hand column,
     the moon over the words. The title sits at the top of the column; the
     GIF and the buttons sit together at the bottom, level with the box.
     The title is first in the page.
   - Takeuchi's picture fills the left column from the top of the part, and
     the box starts at Diana's waist (58% of the picture's height) instead of
     her eyes, so the three show from above their heads to their waists. The
     picture starts 13% of its height down (0.1907 of its width), the box
     0.6602 of its width below that. "the family" heads the box.
   - The GIF at its own size, 100px (it was 200px).
   - On a phone: the title, the GIF, the picture and box, the credit, the
     buttons.
   ========================================================================== */
body.senshi--mooncats .senshi-cat--family #family-intro{ padding-top:16px; }
body.senshi--mooncats .senshi-art .mc-family--hero{ grid-template-columns:minmax(0, 1fr) 216px; gap:22px; align-items:stretch; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-side{ order:2; justify-content:flex-start; gap:14px; padding:6px 0 34px; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-side .mc-family-pic{ margin-top:auto; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-peek-col{ order:1; container-type:inline-size; }
body.senshi--mooncats .senshi-art .mc-family--hero .banner--masthead{ display:block; margin:0; padding:0 0 14px; width:100%;
  background:none; border-bottom:2px solid var(--backbow); text-align:center; }
body.senshi--mooncats .senshi-art .mc-family--hero .masthead-name--lockup{ flex-direction:column; align-items:center; justify-content:center; gap:6px; }
body.senshi--mooncats .senshi-art .mc-family--hero .masthead-name--lockup .bh-t{ font-size:34px !important; white-space:normal; line-height:1.08; text-align:center; }
body.senshi--mooncats .senshi-art .mc-family--hero .masthead-civ{ margin-top:8px; font-size:15px; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-family-pic img{ width:100px; height:100px; image-rendering:pixelated; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-side .jump-nav{ justify-content:center; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-peek{ --mcw:100cqi; padding:calc(var(--mcw) * 0.6602) 14px 14px; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-peek::before{ background-position:50% 20%; }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-peek-img{ top:calc(var(--mcw) * -0.1907); width:var(--mcw);
  -webkit-mask-image:radial-gradient(ellipse 54% 50% at 50% 50%, #000 80%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 54% 50% at 50% 50%, #000 80%, rgba(0,0,0,0) 100%); }
body.senshi--mooncats .senshi-art .mc-family--hero .mc-peek-box .block-h{ margin:0 0 8px; padding:0 0 6px; font-size:19px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--hero{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  body.senshi--mooncats .senshi-art .mc-family--hero .mc-side{ display:contents; }
  body.senshi--mooncats .senshi-art .mc-family--hero .mc-peek-col{ display:block; order:-1; }
  body.senshi--mooncats .senshi-art .mc-family--hero .banner--masthead{ order:-3; }
  body.senshi--mooncats .senshi-art .mc-family--hero .mc-family-pic{ order:-2; justify-self:center; }
  body.senshi--mooncats .senshi-art .mc-family--hero .mc-family-pic img{ width:100px; height:100px; }
  body.senshi--mooncats .senshi-art .mc-family--hero .mc-peek{ padding:calc(var(--mcw) * 0.6602) 10px 10px; }
  body.senshi--mooncats .senshi-art .mc-family--hero .mc-side .jump-nav{ order:3; justify-self:center; }
  body.senshi--mooncats .senshi-art .mc-family--hero .masthead-name--lockup .bh-t{ font-size:32px !important; }
}


/* ==========================================================================
   333. THE MOON CATS: THEIR PICTURES AND STATS AT THE TOP       (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_meet_c98.py. Ash, of a mock of Luna on pearl lace
   over her picture's colours: "pretty. I like that with the gradient. Can we
   move the stats and the cat images up to the top of the page ... the family
   text can stay at the bottom third of that pic."

   - Takeuchi's picture of the family on the left, sized down: it shows from
     the lace just above their heads (4% of its height, 0.0587 of its width)
     and the family box starts two thirds of the way down (0.9194 of its width
     below that). The cell still grows if the words run past the picture.
   - On the right, the title with the GIF beside it, then the three cats, each
     on a band of pearl lace over a gradient matched to her anime picture:
     Luna pink, peach and lavender, Artemis deep blue into green, Diana mint
     into cream. Her anime picture, then a see-through card with her name (the
     button down to her part) and her stats, in her own palette.
   - Each cat's part below is her manga paintings beside her name and words,
     the paintings 270px wide and at least 395px tall (300 x 444 on a phone).
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-family--meet{ grid-template-columns:minmax(0, 1fr) 372px; gap:20px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side{ display:grid; grid-template-columns:minmax(0, 1fr) 100px;
  grid-template-areas:"head gif" "meet meet"; gap:14px 10px; align-content:start; align-items:center; padding:2px 0 0; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .banner--masthead{ grid-area:head; padding:0 0 10px; text-align:left; }
body.senshi--mooncats .senshi-art .mc-family--meet .masthead-name--lockup{ flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; }
body.senshi--mooncats .senshi-art .mc-family--meet .masthead-name--lockup .bh-t{ font-size:28px !important; text-align:left; }
body.senshi--mooncats .senshi-art .mc-family--meet .masthead-civ{ margin-top:6px; font-size:14.5px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .mc-family-pic{ grid-area:gif; margin:0; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet{ grid-area:meet; display:flex; flex-direction:column; gap:12px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-cat{ display:grid; grid-template-columns:80px minmax(0, 1fr); gap:8px; align-items:start;
  padding:8px; border:1px solid #c9a24e; border-radius:10px;
  background-repeat:repeat, no-repeat; background-size:256px 190px, cover; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-pic{ display:block; width:80px; height:80px; max-width:none; object-fit:cover; margin:0;
  border:2px solid #fffaf1; border-radius:6px; box-shadow:0 0 0 1px #c9a24e, 0 4px 10px -4px rgba(0,0,0,.35); }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card{ min-width:0; padding:7px 8px 5px; color:var(--ink);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  border:1px solid #c9a24e; border-radius:8px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-name{ display:inline-block; margin:0 0 7px; padding:3px 12px 4px; font-size:16px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .ptop-dl{ display:block; margin:0; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip{ display:flex; width:fit-content; max-width:100%; margin:0 0 4px;
  font-size:12.5px; line-height:1.25; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip dt{ font-size:10.5px; padding:2px 6px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip dd{ padding:1px 7px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet--luna{
  --paper:#f6f3fb; --head:#14121f; --backbow:#f0d488; --frontbow:#e8b84a; --ink:#1b1a24; --accent:#876b2b;
  background-color:#e98fc8;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"), linear-gradient(135deg, #e98fc8 0%, #f6b98e 52%, #b58ad8 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 16px -8px #8a7ad0;
}
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet--artemis{
  --paper:#f7f9fc; --head:#48566e; --backbow:#c9d4e6; --frontbow:#e8b84a; --ink:#20242e; --accent:#8b6e2c;
  background-color:#1f3f94;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"), linear-gradient(135deg, #1f3f94 0%, #3d6aa8 52%, #8cc49a 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 16px -8px #4a6ab8;
}
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet--diana{
  --paper:#f8f5fc; --head:#6a5a86; --backbow:#e8c25a; --frontbow:#d9679b; --ink:#241f2c; --accent:#ae527c;
  background-color:#7cc4a0;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"), linear-gradient(135deg, #7cc4a0 0%, #b9d4b0 52%, #e0d2bc 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 16px -8px #8a9a7a;
}
body.senshi--mooncats .senshi-art .mc-family--meet .mc-peek{ padding:calc(var(--mcw) * 0.9194) 12px 12px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-peek-img{ top:calc(var(--mcw) * -0.0587); }
/* each cat's part: her manga paintings have the picture column to themselves */
body.senshi--mooncats .senshi-art .ptop--cat .ptop-about{ --gal-w:270px; }
body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-manga{ min-height:395px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--meet{ grid-template-columns:minmax(0, 1fr); }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-side{ display:contents; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .banner--masthead{ grid-area:auto; order:-3; text-align:center; }
  body.senshi--mooncats .senshi-art .mc-family--meet .masthead-name--lockup{ justify-content:center; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .mc-family-pic{ grid-area:auto; order:-2; justify-self:center; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet{ grid-area:auto; order:3; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-cat{ grid-template-columns:72px minmax(0, 1fr); padding:8px; gap:8px; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-pic{ width:72px; height:72px; }
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .bio-shot.mc-manga{ flex:none; width:min(300px, 100%); }
  body.senshi--mooncats .senshi-art .ptop--cat .ptop-gal .mc-manga .kb-cycle{ aspect-ratio:300 / 444; }
}


/* ==========================================================================
   334. THE MOON CATS: THE PICTURE IN THE CARD, LIKE A BUST      (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_bust_c99.py. Ash: "move the cat image to the right
   side of the box (as if it were a profile bust... allow the stats to float
   left. move the image inside the same box as the stats. hopefully this
   should give you more room for the manga image."

   - Each cat's anime picture sits in her card's top-right corner, the way a
     guardian's bust sits on her card; the name and stats run down the left
     and wrap under it.
   - A Japanese name wraps at its space, not in the middle of the katakana.
   - The column of cats narrows to 330px and Takeuchi's picture widens by the
     same, so it shows bigger and the family box under it gets shorter.
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-family--meet{ grid-template-columns:minmax(0, 1fr) 330px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-cat{ display:block; padding:9px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card{ display:flow-root; padding:8px 9px 5px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-pic{ float:right; width:92px; height:92px; margin:0 0 6px 10px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip{ max-width:100%; }
/* a Japanese name wraps at its space, never inside the katakana */
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip dd{ word-break:keep-all; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--meet{ grid-template-columns:minmax(0, 1fr); }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-pic{ width:80px; height:80px; }
}


/* ==========================================================================
   335. THE MOON CATS: THE BOX AT DIANA'S KNEES, STATS TO THE EDGE (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_story_c101.py. Ash: "start the box at the top of
   diana's knees" and "extend each [stat] box to the right edge. so they bump
   into the profile picture or the right side of the box".

   - The family box starts at 74% of Takeuchi's picture's height, the top of
     Diana's knees (1.027 of its width below where the picture starts).
   - Each stat box in the cats' cards stretches to the right: to the picture
     while it's beside it, then to the card's edge.
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-family--meet .mc-peek{ padding-top:calc(var(--mcw) * 1.027); }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip{ width:auto; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-peek{ padding-top:calc(var(--mcw) * 1.027); }
}


/* ==========================================================================
   336. THE MOON CATS: BUTTONS UNDER THE TITLE, BIGGER PICTURES, A ROYAL
        SERVICE FOLD, LUNA ON BLACK LACE                        (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_jump_c102.py.

   - The Luna / Artemis / Diana buttons sit in a row under the title, in
     place of "Luna, Artemis and Diana"; the GIF stays beside the title.
   - Each cat's picture is 124px square, the same for all three, right up
     in the card's top-right corner.
   - "In service to the Moon": a royal gradient, twilight indigo, violet, rose
     and old gold, instead of black.
   - Each cat's part on a doily in her colours: Luna black lace with gold
     threads, Artemis white lace on peach, pink and mint, Diana white lace on
     lavender, orchid and pink. Name and paragraph on a see-through card.
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side{ grid-template-areas:"head gif" "jump jump" "meet meet"; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .banner--masthead{ border-bottom:0; padding-bottom:0; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-jump{ grid-area:jump; display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  padding:0 0 14px; border-bottom:2px solid var(--backbow); }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-jump .jump-link{ padding:4px 14px 5px; font-size:15px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card{ padding-top:9px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip{ font-size:12px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip dt{ font-size:10px; padding:2px 5px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .c2-chip dd{ padding:1px 6px; overflow-wrap:anywhere; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-piclink{ float:right; display:block; margin:-9px -9px 8px 10px;
  border-radius:0 7px 0 8px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-pic{ float:none; width:124px; height:124px; margin:0;
  border-radius:0 7px 0 8px; border-width:0 0 2px 2px; transition:filter .15s, box-shadow .15s; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-piclink:hover .mc-meet-pic{ filter:brightness(1.06);
  box-shadow:0 0 0 2px #c9a24e, 0 6px 14px -4px rgba(0,0,0,.4); }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-piclink:focus-visible{ outline:2px dashed var(--head); outline-offset:3px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .banner--masthead{ order:-4; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-jump{ grid-area:auto; order:-3; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .mc-family-pic{ order:-2; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-pic{ width:124px; height:124px; }
}

/* the service fold */
body.senshi--mooncats .senshi-art #thread-in-service{ --th-bar:#5e3596 !important; }
body.senshi--mooncats .senshi-art #thread-in-service .th-det > summary.th-head{
  background:linear-gradient(90deg, #2f2a7a 0%, #5e3596 34%, #9a3d7c 68%, #7d5a12 100%);
  box-shadow:3px 3px 0 color-mix(in srgb, #5e3596 45%, var(--backbow));
}

/* each cat's part on a doily in her own colours (built below) */
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat{
  background-color:#0d0b16;
  background-image:linear-gradient(#c9a24e, #c9a24e), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #0d0b16 0%, #17122a 55%, #2a1d44 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about{ row-gap:0; }
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .masthead-name,
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .ptop-text{
  background:color-mix(in srgb, var(--paper) 92%, transparent); border:1px solid #c9a24e; }
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .masthead-name{ align-self:end; padding:12px 18px 6px; border-bottom:0; border-radius:10px 10px 0 0; }
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .ptop-text{ align-self:start; padding:6px 18px 16px; border-top:0; border-radius:0 0 10px 10px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about{ row-gap:12px; }
  body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .masthead-name{ border-bottom:1px solid #c9a24e; border-radius:10px; padding-bottom:10px; }
  body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-top:1px solid #c9a24e; border-radius:10px; padding-top:12px; }
}
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat{
  background-color:#e8a888;
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #e8a888 0%, #dcb4c2 55%, #8fc6a2 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about{ row-gap:0; }
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .masthead-name,
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .ptop-text{
  background:color-mix(in srgb, var(--paper) 92%, transparent); border:1px solid #c9a24e; }
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .masthead-name{ align-self:end; padding:12px 18px 6px; border-bottom:0; border-radius:10px 10px 0 0; }
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .ptop-text{ align-self:start; padding:6px 18px 16px; border-top:0; border-radius:0 0 10px 10px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about{ row-gap:12px; }
  body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .masthead-name{ border-bottom:1px solid #c9a24e; border-radius:10px; padding-bottom:10px; }
  body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-top:1px solid #c9a24e; border-radius:10px; padding-top:12px; }
}
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat{
  background-color:#9f86c6;
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #9f86c6 0%, #c493cf 55%, #e79fc2 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about{ row-gap:0; }
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .masthead-name,
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .ptop-text{
  background:color-mix(in srgb, var(--paper) 92%, transparent); border:1px solid #c9a24e; }
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .masthead-name{ align-self:end; padding:12px 18px 6px; border-bottom:0; border-radius:10px 10px 0 0; }
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .ptop-text{ align-self:start; padding:6px 18px 16px; border-top:0; border-radius:0 0 10px 10px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about{ row-gap:12px; }
  body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .masthead-name{ border-bottom:1px solid #c9a24e; border-radius:10px; padding-bottom:10px; }
  body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-top:1px solid #c9a24e; border-radius:10px; padding-top:12px; }
}


/* ==========================================================================
   337. THE MOON CATS: BUTTONS TO THE LEFT, THE GIF A LITTLE LARGER (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_gif_c103.py. Ash: "move the buttons more to the
   left and make the cat gif a little larger".
   - The buttons line up on the left under the title (centred on a phone).
   - The GIF is 132px (it was 100px), the most it can be with "The Moon"
     still on one line beside it.
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side{ grid-template-columns:minmax(0, 1fr) 132px; column-gap:8px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-jump{ justify-content:flex-start; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .mc-family-pic img{ width:132px; height:132px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-jump{ justify-content:center; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .mc-family-pic img{ width:132px; height:132px; }
}


/* ==========================================================================
   338. THE ROYAL FOUR: SQUARER CORNERS, CRISP SHADOWS, THE CATS' FRAMES
                                                                (1 Oct 2026)
   ==========================================================================
   Built by build_royals_corners_c104.py. Ash: "the design is getting more
   and more round. this is pixel and planets. it still needs a more retro
   angled look... not too hard of course. strike a balence."

   - Corners: big boxes, threads and the junk drawer 4px (from 10 and 12),
     cards 3px (from 8), the pearl buttons 3px (from pills).
   - Shadows: the soft twilight glow stays and the site's hard pixel offset
     comes back under it, faint and gold (3px on boxes, 2px on cards). The
     buttons have a 2px gold offset and press into it when clicked.
   - Each cat's picture has one 2px gold frame all the way round, set in
     from the card's corner; the cat GIF is back to its own 100px.
   ========================================================================== */
/* moon */
body.senshi--moon .container--post > .senshi-art .ptop,
body.senshi--moon .container--post > .senshi-art .dgplate,
body.senshi--moon .container--post > .senshi-art .ks-console,
body.senshi--moon .container--post > .senshi-art .dgw,
body.senshi--moon .container--post > .senshi-art .codex-foot,
body.senshi--moon .container--post > .senshi-art .mc-peek,
body.senshi--moon .container--post > .senshi-art .mc-peek-box,
body.senshi--moon .container--post > .senshi-art .es-mini{
  border-radius:4px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 3px 3px 0 rgba(201,162,78,.38), 0 10px 24px -10px rgba(122,116,204,.55);
}
body.senshi--moon .container--post > .senshi-art .ptop-card,
body.senshi--moon .container--post > .senshi-art .kit,
body.senshi--moon .container--post > .senshi-art .ss-frame,
body.senshi--moon .container--post > .senshi-art .dg-card,
body.senshi--moon .container--post > .senshi-art .kb{
  border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 rgba(201,162,78,.45), 0 6px 16px -8px rgba(122,116,204,.6);
}
body.senshi--moon .container--post > .senshi-art .threads-block{ border-radius:4px; }
body.senshi--moon .container--post > .senshi-art .junkdump--v2{ border-radius:4px; }
body.senshi--moon .container--post > .senshi-art .astro-door,
body.senshi--moon .container--post > .senshi-art .es-mini-more,
body.senshi--moon .container--post > .senshi-art .codex-link,
body.senshi--moon .container--post > .senshi-art .jump-link,
body.senshi--moon .container--post > .senshi-art .junk-pull,
body.senshi--moon .container--post > .senshi-art .junk-arrow{ border-radius:3px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 #a8862e; }
body.senshi--moon .container--post > .senshi-art .astro-door:hover,
body.senshi--moon .container--post > .senshi-art .es-mini-more:hover,
body.senshi--moon .container--post > .senshi-art .codex-link:hover,
body.senshi--moon .container--post > .senshi-art .jump-link:hover,
body.senshi--moon .container--post > .senshi-art .junk-pull:hover,
body.senshi--moon .container--post > .senshi-art .junk-arrow:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 2px 2px 0 #a8862e; }
body.senshi--moon .container--post > .senshi-art .astro-door:active,
body.senshi--moon .container--post > .senshi-art .es-mini-more:active,
body.senshi--moon .container--post > .senshi-art .codex-link:active,
body.senshi--moon .container--post > .senshi-art .jump-link:active,
body.senshi--moon .container--post > .senshi-art .junk-pull:active,
body.senshi--moon .container--post > .senshi-art .junk-arrow:active{ transform:translate(2px, 2px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
/* tuxedomask */
body.senshi--tuxedomask .container--post > .senshi-art .ptop,
body.senshi--tuxedomask .container--post > .senshi-art .dgplate,
body.senshi--tuxedomask .container--post > .senshi-art .ks-console,
body.senshi--tuxedomask .container--post > .senshi-art .dgw,
body.senshi--tuxedomask .container--post > .senshi-art .codex-foot,
body.senshi--tuxedomask .container--post > .senshi-art .mc-peek,
body.senshi--tuxedomask .container--post > .senshi-art .mc-peek-box,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini{
  border-radius:4px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 3px 3px 0 rgba(201,162,78,.38), 0 10px 24px -10px rgba(74,79,176,.55);
}
body.senshi--tuxedomask .container--post > .senshi-art .ptop-card,
body.senshi--tuxedomask .container--post > .senshi-art .kit,
body.senshi--tuxedomask .container--post > .senshi-art .ss-frame,
body.senshi--tuxedomask .container--post > .senshi-art .dg-card,
body.senshi--tuxedomask .container--post > .senshi-art .kb{
  border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 rgba(201,162,78,.45), 0 6px 16px -8px rgba(74,79,176,.6);
}
body.senshi--tuxedomask .container--post > .senshi-art .threads-block{ border-radius:4px; }
body.senshi--tuxedomask .container--post > .senshi-art .junkdump--v2{ border-radius:4px; }
body.senshi--tuxedomask .container--post > .senshi-art .astro-door,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini-more,
body.senshi--tuxedomask .container--post > .senshi-art .codex-link,
body.senshi--tuxedomask .container--post > .senshi-art .jump-link,
body.senshi--tuxedomask .container--post > .senshi-art .junk-pull,
body.senshi--tuxedomask .container--post > .senshi-art .junk-arrow{ border-radius:3px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 #a8862e; }
body.senshi--tuxedomask .container--post > .senshi-art .astro-door:hover,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini-more:hover,
body.senshi--tuxedomask .container--post > .senshi-art .codex-link:hover,
body.senshi--tuxedomask .container--post > .senshi-art .jump-link:hover,
body.senshi--tuxedomask .container--post > .senshi-art .junk-pull:hover,
body.senshi--tuxedomask .container--post > .senshi-art .junk-arrow:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 2px 2px 0 #a8862e; }
body.senshi--tuxedomask .container--post > .senshi-art .astro-door:active,
body.senshi--tuxedomask .container--post > .senshi-art .es-mini-more:active,
body.senshi--tuxedomask .container--post > .senshi-art .codex-link:active,
body.senshi--tuxedomask .container--post > .senshi-art .jump-link:active,
body.senshi--tuxedomask .container--post > .senshi-art .junk-pull:active,
body.senshi--tuxedomask .container--post > .senshi-art .junk-arrow:active{ transform:translate(2px, 2px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
/* chibimoon */
body.senshi--chibimoon .container--post > .senshi-art .ptop,
body.senshi--chibimoon .container--post > .senshi-art .dgplate,
body.senshi--chibimoon .container--post > .senshi-art .ks-console,
body.senshi--chibimoon .container--post > .senshi-art .dgw,
body.senshi--chibimoon .container--post > .senshi-art .codex-foot,
body.senshi--chibimoon .container--post > .senshi-art .mc-peek,
body.senshi--chibimoon .container--post > .senshi-art .mc-peek-box,
body.senshi--chibimoon .container--post > .senshi-art .es-mini{
  border-radius:4px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 3px 3px 0 rgba(201,162,78,.38), 0 10px 24px -10px rgba(197,143,240,.55);
}
body.senshi--chibimoon .container--post > .senshi-art .ptop-card,
body.senshi--chibimoon .container--post > .senshi-art .kit,
body.senshi--chibimoon .container--post > .senshi-art .ss-frame,
body.senshi--chibimoon .container--post > .senshi-art .dg-card,
body.senshi--chibimoon .container--post > .senshi-art .kb{
  border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 rgba(201,162,78,.45), 0 6px 16px -8px rgba(197,143,240,.6);
}
body.senshi--chibimoon .container--post > .senshi-art .threads-block{ border-radius:4px; }
body.senshi--chibimoon .container--post > .senshi-art .junkdump--v2{ border-radius:4px; }
body.senshi--chibimoon .container--post > .senshi-art .astro-door,
body.senshi--chibimoon .container--post > .senshi-art .es-mini-more,
body.senshi--chibimoon .container--post > .senshi-art .codex-link,
body.senshi--chibimoon .container--post > .senshi-art .jump-link,
body.senshi--chibimoon .container--post > .senshi-art .junk-pull,
body.senshi--chibimoon .container--post > .senshi-art .junk-arrow{ border-radius:3px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 #a8862e; }
body.senshi--chibimoon .container--post > .senshi-art .astro-door:hover,
body.senshi--chibimoon .container--post > .senshi-art .es-mini-more:hover,
body.senshi--chibimoon .container--post > .senshi-art .codex-link:hover,
body.senshi--chibimoon .container--post > .senshi-art .jump-link:hover,
body.senshi--chibimoon .container--post > .senshi-art .junk-pull:hover,
body.senshi--chibimoon .container--post > .senshi-art .junk-arrow:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 2px 2px 0 #a8862e; }
body.senshi--chibimoon .container--post > .senshi-art .astro-door:active,
body.senshi--chibimoon .container--post > .senshi-art .es-mini-more:active,
body.senshi--chibimoon .container--post > .senshi-art .codex-link:active,
body.senshi--chibimoon .container--post > .senshi-art .jump-link:active,
body.senshi--chibimoon .container--post > .senshi-art .junk-pull:active,
body.senshi--chibimoon .container--post > .senshi-art .junk-arrow:active{ transform:translate(2px, 2px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
/* mooncats */
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ptop,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .dgplate,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ks-console,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .dgw,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-foot,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .mc-peek,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .mc-peek-box,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini{
  border-radius:4px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 3px 3px 0 rgba(201,162,78,.38), 0 10px 24px -10px rgba(138,122,208,.55);
}
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ptop-card,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .kit,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .ss-frame,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .dg-card,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .kb{
  border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 rgba(201,162,78,.45), 0 6px 16px -8px rgba(138,122,208,.6);
}
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .threads-block{ border-radius:4px; }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junkdump--v2{ border-radius:4px; }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .astro-door,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini-more,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-link,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .jump-link,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-pull,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-arrow{ border-radius:3px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 2px 2px 0 #a8862e; }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .astro-door:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini-more:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-link:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .jump-link:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-pull:hover,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-arrow:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 2px 2px 0 #a8862e; }
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .astro-door:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .es-mini-more:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .codex-link:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .jump-link:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-pull:active,
body.senshi--mooncats .container--post > .senshi-cat > .senshi-art .junk-arrow:active{ transform:translate(2px, 2px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
/* the cats' top: bands, cards, the picture's frame, the GIF */
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-cat{ border-radius:4px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 3px 3px 0 rgba(201,162,78,.38); }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card{ border-radius:3px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-piclink{ margin:0 0 6px 8px; border-radius:0; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-pic{ width:120px; height:120px; box-sizing:border-box;
  border:2px solid #c9a24e; border-radius:0; box-shadow:none; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-piclink:hover .mc-meet-pic{ box-shadow:2px 2px 0 #a8862e; filter:brightness(1.06); }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side{ grid-template-columns:minmax(0, 1fr) 100px; }
body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .mc-family-pic img{ width:100px; height:100px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-meet-card .mc-meet-pic{ width:120px; height:120px; }
  body.senshi--mooncats .senshi-art .mc-family--meet .mc-side .mc-family-pic img{ width:100px; height:100px; }
}
/* the name-and-paragraph cards on the cats' doilies */
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .masthead-name{ border-radius:4px 4px 0 0; }
body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-radius:0 0 4px 4px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .masthead-name,
  body.senshi--mooncats .senshi-cat--luna .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-radius:4px; }
}
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .masthead-name{ border-radius:4px 4px 0 0; }
body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-radius:0 0 4px 4px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .masthead-name,
  body.senshi--mooncats .senshi-cat--artemis .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-radius:4px; }
}
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .masthead-name{ border-radius:4px 4px 0 0; }
body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-radius:0 0 4px 4px; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .masthead-name,
  body.senshi--mooncats .senshi-cat--diana .senshi-art .ptop--cat .ptop-about > .ptop-text{ border-radius:4px; }
}


/* ==========================================================================
   339. THE MOON CATS: THE TOP REBUILT                           (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_top_c105.py. Ash: "Put the family box below the
   manga picture and style beautifully. keep the manga picture, but resize
   the 3 stats boxes and make the cat proifile pics larger. no dead space ...
   Resize the header of the entire profile, but don't fuck up the cat gif."
   She chose the family box full width below the picture and the cats.

   - The title across the whole profile, one line, the buttons under it and
     the GIF on the right at its own 100px.
   - Takeuchi's picture on the left, whole; the three cats on the right, as
     tall together as the picture, all three cards the same height. In each
     card the stats fill the left and the cat's picture fills the right from
     top to bottom (130px wide), so nothing is left empty.
   - The family box across the bottom: pearl and opal, a strip of pink lace
     in the picture's colours, gold and pearl trim, the heading between gold
     stars, and the words in two columns. A sticker of Luna and Artemis with
     roses on its top-right corner, tilted, scrapbook style.
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-top{ display:block; margin:0; }
body.senshi--mooncats .senshi-cat--family #family-intro{ padding-top:14px; }

/* the title */
body.senshi--mooncats .senshi-art .mc-top .mc-top-head{ display:grid; grid-template-columns:minmax(0, 1fr) 100px;
  grid-template-areas:"title gif" "jump gif"; align-items:center; column-gap:18px; row-gap:12px;
  margin:0 0 18px; padding:0 2px 16px; border-bottom:2px solid var(--backbow); }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name{ grid-area:title; margin:0; display:flex; flex-direction:row;
  align-items:center; justify-content:flex-start; gap:12px; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name--lockup .bh-t{ font-size:46px !important; line-height:1; white-space:nowrap; text-align:left; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-jump{ grid-area:jump; display:flex; flex-wrap:wrap; justify-content:flex-start;
  gap:8px; margin:0; padding:0; border:0; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-family-pic{ grid-area:gif; margin:0; align-self:center; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-family-pic img{ display:block; width:100px; height:100px; max-width:none;
  image-rendering:pixelated; }

/* the picture and the three cats */
body.senshi--mooncats .senshi-art .mc-top .mc-top-row{ display:grid; grid-template-columns:minmax(0, 20fr) minmax(0, 19fr); gap:18px;
  align-items:stretch; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-pic{ position:relative; width:100%; margin:0; aspect-ratio:760 / 1115; overflow:hidden;
  border:1px solid #c9a24e; border-radius:4px; background:#f6c9de;
  box-shadow:inset 0 0 0 3px #f8f1e4, 3px 3px 0 rgba(201,162,78,.38), 0 10px 24px -10px rgba(138,122,208,.55); }
body.senshi--mooncats .senshi-art .mc-top .mc-top-img{ position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px);
  max-width:none; margin:0; object-fit:cover; object-position:50% 35%; border:0; box-shadow:none; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet{ grid-area:auto; display:grid; grid-template-rows:repeat(3, minmax(0, 1fr)); gap:12px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-cat{ display:flex; align-items:stretch; padding:6px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card{ flex:1 1 auto; display:grid; grid-template-columns:minmax(0, 1fr) 130px;
  grid-template-rows:minmax(0, 1fr); grid-template-areas:"stats pic"; align-content:stretch;
  column-gap:10px; padding:6px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .ptop-dl{ grid-area:stats; display:flex; flex-direction:column; justify-content:center;
  gap:4px; margin:0; min-width:0; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .c2-chip{ display:flex; width:auto; max-width:none; margin:0; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .mc-meet-piclink{ grid-area:pic; float:none; display:block; position:relative;
  margin:0; min-height:130px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .mc-meet-pic{ position:absolute; inset:0; width:100%; height:100%; max-width:none;
  margin:0; object-fit:cover; object-position:50% 30%; }

/* the family box */
body.senshi--mooncats .senshi-art .mc-top .mc-top-family{ position:relative; margin:56px 0 0; padding:34px 26px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(118deg, #fdeef5 0%, #fbf6ea 48%, #f1ecfb 100%);
  border:1px solid #c9a24e; border-radius:4px;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 3px 3px 0 rgba(201,162,78,.38),
    0 10px 24px -10px rgba(138,122,208,.55); }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family::before{ content:""; position:absolute; left:4px; right:4px; top:4px; height:16px;
  background-color:#e98fc0;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"), linear-gradient(90deg, #e889b8 0%, #f3b2cf 50%, #d6a3e6 100%);
  background-repeat:repeat, no-repeat; background-size:128px 95px, cover;
  border-bottom:1px solid #c9a24e; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family .block-h{ margin:0 0 14px; padding:0 0 10px; text-align:center; font-size:24px;
  border-bottom:1px solid rgba(201,162,78,.55); }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family .block-h::before,
body.senshi--mooncats .senshi-art .mc-top .mc-top-family .block-h::after{ content:"\2726"; color:#c9a24e; font-size:16px; margin:0 12px;
  vertical-align:3px; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-sticker{ position:absolute; z-index:3; top:-66px; right:-16px; width:178px; height:auto;
  max-width:none; margin:0; border:0; transform:rotate(6deg); pointer-events:none;
  filter:drop-shadow(2px 3px 4px rgba(20, 10, 45, .38)); }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family-text{ column-count:2; column-gap:36px; column-rule:1px solid rgba(201,162,78,.55); }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family-text p{ margin:0 0 10px; font-size:14.5px; line-height:1.6; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family-text p:last-child{ margin-bottom:0; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family-text b{ color:var(--name-a); letter-spacing:.3px; }

@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"title" "gif" "jump";
    justify-items:center; text-align:center; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name{ justify-content:center; justify-self:center; width:fit-content; max-width:100%; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name--lockup .bh-t{ flex:0 1 auto; font-size:30px !important; white-space:normal; text-align:center; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-jump{ justify-content:center; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-row{ grid-template-columns:minmax(0, 1fr); }
  body.senshi--mooncats .senshi-art .mc-top .mc-meet{ grid-template-rows:none; }
  body.senshi--mooncats .senshi-art .mc-top .mc-meet-card{ grid-template-columns:minmax(0, 1fr) 112px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .mc-meet-piclink{ min-height:112px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-family{ margin-top:52px; padding:32px 16px 16px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-sticker{ width:132px; top:-60px; right:-6px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-family-text{ column-count:1; }
}


/* ==========================================================================
   340. THE MOON CATS: THE MOON KINGDOM GALLERY'S LABEL           (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_kingdom_gal_c106.py. "In service to the Moon" has a
   two-picture gallery, "the Moon Kingdom": the queen in the palace with the
   cats, and the queen in the ruins. The gallery is the wing's own (sections
   218 and 223, js/slideshow.js); this is only its label, in the old gold of
   the fold's tab, between two gold stars.
   ========================================================================== */
body.senshi--mooncats .senshi-art #thread-in-service .mc-gal-label{
  margin:0 0 7px; text-align:center; font-family:rainyhearts, monospace; font-size:15px;
  letter-spacing:.4px; color:#7d5a12; }
body.senshi--mooncats .senshi-art #thread-in-service .mc-gal-label::before,
body.senshi--mooncats .senshi-art #thread-in-service .mc-gal-label::after{
  content:"\2726"; color:#c9a24e; font-size:11px; margin:0 8px; vertical-align:2px; }


/* ==========================================================================
   341. THE MOON CATS: A PICTURE FOR THEIR DUTY NOW                (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_service_c107.py. In "In service to the Moon", the
   Earth paragraph has a picture: Usagi and Minako with Luna and Artemis on
   their shoulders. On the left, below the Moon Kingdom gallery on the right,
   300px, framed like the fold's other pictures. Centred on a phone.
   And a sticker of Usagi hugging Luna on the top-right corner of Luna's
   threads, tilted; the first tab's label moves left to clear it.
   ========================================================================== */
body.senshi--mooncats .senshi-art #thread-in-service .mc-duty-shot{
  float:left; clear:both; width:300px; max-width:46%; margin:6px 22px 12px 0; padding:3px;
  background:#fffdf7; border:1px solid #c9a24e; border-radius:3px;
  box-shadow:2px 2px 0 rgba(201,162,78,.45); }
body.senshi--mooncats .senshi-art #thread-in-service .mc-duty-shot img{
  display:block; width:100%; height:auto; max-width:none; margin:0; border:0; box-shadow:none; }
/* the Usagi and Luna sticker on Luna's threads */
body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads{ position:relative; }
body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .mc-thread-sticker{
  position:absolute; z-index:3; top:-74px; right:-14px; width:104px; height:auto; max-width:none;
  margin:0; border:0; transform:rotate(7deg); pointer-events:none;
  filter:drop-shadow(2px 3px 4px rgba(20, 10, 45, .38)); }
body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .thread:first-of-type .th-head{ padding-right:104px; }
@media (max-width:700px){
  body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .mc-thread-sticker{ width:84px; top:-62px; right:-6px; }
  body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .thread:first-of-type .th-head{ padding-right:82px; }
  body.senshi--mooncats .senshi-art #thread-in-service .mc-duty-shot{
    float:none; width:min(300px, 82%); max-width:none; margin:4px auto 14px; }
}


/* ==========================================================================
   342. THE MOON CATS: THE CATS IN A ROW, CRYSTAL TOKYO'S PICTURE (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_row_c108.py. Ash wanted the cats' pictures and
   stats bigger without losing the family picture; she chose the cats in a
   row.

   - The three cats side by side under the title: her picture on top, square
     and as wide as the card, her stats under it at full width.
   - Under them, the family picture on the left and the family box beside it,
     as tall as the picture, the sticker on its top-right corner.
   - In "In service to the Moon", Crystal Tokyo's picture beside its
     paragraph on the right (the Earth picture is on the left).
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-top .mc-meet{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:none;
  gap:14px; margin:0 0 22px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-cat{ display:flex; align-items:stretch; padding:7px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card{ display:flex; flex-direction:column; gap:8px; padding:7px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .mc-meet-piclink{ position:relative; display:block; width:100%; min-height:0;
  aspect-ratio:1 / 1; margin:0; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .ptop-dl{ justify-content:flex-start; gap:4px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .c2-chip{ font-size:13px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .c2-chip dt{ font-size:10.5px; padding:2px 6px; }
body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .c2-chip dd{ padding:2px 7px; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-row{ display:grid; grid-template-columns:minmax(0, 42fr) minmax(0, 58fr); gap:20px;
  align-items:stretch; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family{ margin:0; display:flex; flex-direction:column; justify-content:center; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-family-text{ column-count:1; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-sticker{ top:-40px; right:-18px; width:160px; }

body.senshi--mooncats .senshi-art #thread-in-service .mc-duty-shot--right{
  float:right; margin:6px 0 12px 22px; }
/* the Usagi and Luna sticker moves to the bottom-right of Luna's threads (Ash: "put the new
   sticker on the bottom right of the luna solo thread"); the last tab's label clears it instead
   of the first's */
body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .mc-thread-sticker{
  top:auto; bottom:-58px; right:-14px; transform:rotate(-6deg); }
body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .thread:first-of-type .th-head{ padding-right:16px; }
body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .thread:last-of-type .th-head{ padding-right:104px; }
/* its paragraph starts below the Earth picture, not squeezed beside it */
body.senshi--mooncats .senshi-art #thread-in-service .mc-duty-shot--right + p{ clear:left; }

@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-top .mc-meet{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .mc-meet-piclink{ aspect-ratio:4 / 3; }
  body.senshi--mooncats .senshi-art .mc-top .mc-meet-card .mc-meet-pic{ object-position:50% 28%; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-row{ grid-template-columns:minmax(0, 1fr); gap:0; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-family{ margin-top:52px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-sticker{ width:132px; top:-60px; right:-6px; }
  body.senshi--mooncats .senshi-art #thread-in-service .mc-duty-shot--right{ float:none; margin:4px auto 14px; }
  body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .mc-thread-sticker{ top:auto; bottom:-50px; right:-6px; }
  body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .thread:first-of-type .th-head{ padding-right:16px; }
  body.senshi--mooncats .senshi-cat--luna .senshi-art #luna-threads .thread:last-of-type .th-head{ padding-right:82px; }
}


/* ==========================================================================
   343. SAILOR MOON'S DOILY IN THE ROYAL GRADIENT, CHIBI MOON'S DEEPER
                                                                (1 Oct 2026)
   ==========================================================================
   Built by build_royal_bands_c111.py. Ash: "give sailor moon's very first
   background doily a pretty royal gradient treatment like you did mask?
   make chibimoons a little more pronounced".
   - Sailor Moon: the royal blue of her still beside the picture, fading
     left to right through violet and the rose of her bow into the pale gold
     of her trim, in pearl-white lace (as Tuxedo Mask's, c95).
   - Chibi Moon: her sky blue into lilac into pink, a step deeper, so the
     white lace stands out.
   - The Moon Cats' title box: pearl-white lace over the three cats' colours,
     lavender, pink, peach and mint, with gold and pearl trim.
   ========================================================================== */
body.senshi--moon .container--post > .senshi-art .ptop-band::before{
  background-color:#153796;
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost-alpha.png"), linear-gradient(90deg, #153796 0%, #1d40a6 27%, #4048b4 40%, #8a76cc 55%, #dca8cf 72%, #f3d2c6 86%, #f6e4bc 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:normal, normal, normal;
  image-rendering:auto;
  opacity:1;
}
body.senshi--chibimoon .container--post > .senshi-art .ptop-band::before{
  background-color:#5fa4e0;
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost-alpha.png"), linear-gradient(135deg, #5fa4e0 0%, #9b82ea 52%, #e266c8 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:normal, normal, normal;
  image-rendering:auto;
  opacity:1;
}
body.senshi--mooncats .senshi-art .mc-top .mc-top-head{
  margin:0 0 20px; padding:16px 20px 16px 18px; border:1px solid #c9a24e; border-radius:4px;
  background-color:#e9c8e8;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(90deg, #cdb8ee 0%, #f0b9d8 36%, #f6cdb8 66%, #c2e4cf 100%);
  background-repeat:repeat, no-repeat; background-size:256px 190px, cover;
  box-shadow:inset 0 0 0 3px #f8f1e4, inset 0 0 0 4px rgba(201,162,78,.55), 3px 3px 0 rgba(201,162,78,.38),
    0 10px 24px -10px rgba(138,122,208,.55);
}
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head{ padding:14px 12px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name--lockup .bh-t{ font-size:27px !important; }
}


/* ==========================================================================
   344. THE MOON CATS: A SOLID CARD BEHIND THE TITLE AND BUTTONS  (1 Oct 2026)
   ==========================================================================
   Built by build_mooncats_headcard_c112.py. Ash: "give the header and the
   buttons an opaque background". One solid pearl card, gold edged, behind
   the title and the buttons (the title box's ::before, in the grid under
   them); the lace shows round it and behind the GIF. On a phone the buttons
   come up under the title so the card holds both.
   ========================================================================== */
body.senshi--mooncats .senshi-art .mc-top .mc-top-head::before{ content:""; grid-column:1; grid-row:1 / 3; align-self:stretch; justify-self:stretch;
  margin:-8px -28px -8px -10px;
  background:#fffaf1; border:1px solid #c9a24e; border-radius:3px;
  box-shadow:inset 0 0 0 2px #f8f1e4, inset 0 0 0 3px rgba(201,162,78,.45), 2px 2px 0 rgba(201,162,78,.5); }
/* the card is as wide as the title, so the lace shows between it and the GIF */
body.senshi--mooncats .senshi-art .mc-top .mc-top-head{ grid-template-columns:max-content minmax(0, 1fr) 100px; grid-template-areas:"title . gif" "jump . gif"; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name, body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-jump{ position:relative; z-index:1; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name{ padding:2px 0 0 4px; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-jump{ padding:0 0 2px 4px; }
body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-jump .jump-link{ background-color:#fffaf1; }
@media (max-width:760px){
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"title" "jump" "gif"; row-gap:12px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head::before{ grid-row:1 / 3; margin:-8px -4px; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head .masthead-name{ padding:2px 4px 0; }
  body.senshi--mooncats .senshi-art .mc-top .mc-top-head .mc-jump{ padding:0 4px 4px; }
}


/* ==========================================================================
   345. SAILOR SATURN A STEP DEEPER INTO THE DUSK                 (1 Oct 2026)
   ==========================================================================
   Built by build_saturn_moody_c113.py. Ash: "add a bit more of that moody
   color to saturns profile. she's an outer so she gets that theming."
   - Her paper, boxes and wash a step darker and duskier, violet-grey instead
     of lavender: paper #cabed9, box #bcadcf, wash #ad9ac4.
   - Her frame near-black with a deep violet edge and glow.
   - Her lace, name gradient and text colours stay; every text colour is
     measured in the render before and after. The dignity cards' faded
     lines go to full strength and the drop headings a touch darker.
   ========================================================================== */
body.senshi--saturn .container--post > .senshi-art{
  --paper:#cabed9; --boxbody:#cabed9; --box:#bcadcf; --wash:#ad9ac4;
  --biotint:#bcadcf; --biotint2:#cabed9; --sen-body:#bcadcf;
  background-color:var(--paper);
  background-image:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,.06) 100%);
  box-shadow:0 0 0 2px rgba(91,53,150,.85), 0 0 0 7px #0b0814, 0 0 0 8px rgba(91,53,150,.85), 0 0 34px 8px rgba(60,30,110,.55);
}
/* the text that would slip on the deeper paper: the dignity cards' faded lines at full
   strength, and the drop headings on the wash a touch darker */
body.senshi--saturn .container--post > .senshi-art .dg-why{ opacity:1; }
body.senshi--saturn .container--post > .senshi-art .drop-h{ color:color-mix(in srgb, var(--name-a) 78%, #000); }


/* ==========================================================================
   346. SAILOR VENUS IN ORANGE AND GOLD, HER NAVY THE ACCENT      (1 Oct 2026)
   ==========================================================================
   Built by build_venus_warm_c114.py. Ash: "prioritize the orange and yellow,
   with the blue being the complement". She chose option A.
   - The doily: her bow's navy beside the henshin picture, sweeping into her
     skirt's orange, gold and pale gold, in white lace.
   - Round the page: an orange band with a white stripe, a gold glow.
   - Her paper: a warm sheen, peach into pale yellow.
   ========================================================================== */
body.senshi--venus .container--post > .senshi-art{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(118deg, rgba(255,224,176,.34) 0%, rgba(255,243,176,.34) 100%);
  box-shadow:0 0 0 2px #fff, 0 0 0 8px #e8700c, 0 0 0 10px #fff, 0 0 0 11px rgba(232,112,12,.55),
    0 0 36px 12px rgba(255,194,26,.62);
}
body.senshi--venus .container--post > .senshi-art .ptop-band::before{
  background-color:#1b2a6b;
  background-image:linear-gradient(transparent, transparent), url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(90deg, #1b2a6b 0%, #2c3f8f 14%, #c8571a 38%, #ee8a14 58%, #f8b62a 80%, #fbd75a 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:normal, normal, normal;
  image-rendering:auto;
  opacity:1;
}

/* ==========================================================================
   347. THE LOCKETS OPEN AND CLOSE IN TURN, FROM THE HINGE      (1 Oct 2026)
   ==========================================================================
   Built by build_locket_flip_c119.py. Ash: "the locket opening and closing
   animations are not all working properly on the moon and chibi moon pages.
   please check them and make sure they are the correct side."

   Each locket is two pictures in one spot, closed and open (sections 201 and
   229). The open one waited its turn with a 4s animation-delay, and during a
   delay it sat at full strength, so for the first 4s after a season tab was
   picked both pictures showed at once, the open one on top. Then the open one
   stayed 8s instead of 4.

   Now the open picture runs on its own keyframes, hidden for the first half
   of the cycle and shown for the second, with no delay: closed 4s, open 4s,
   one at a time, from the moment the tab opens.

   They also sit on their bottom edge instead of centred on each other, so the
   case stays still and the lid lifts above it. Usagi's pairs have the same
   bottom rows; Chibi Moon's closed picture has 2 more empty rows under its
   point, so it drops 4px (2 rows at 2x) to meet the open one's.

   Reduced motion still shows only the closed picture.
   ========================================================================== */
@keyframes kit-flip-open{
  0%, 50%  { opacity:0; }
  50.01%, 100% { opacity:1; }
}
@media (prefers-reduced-motion: no-preference){
  body.senshi--moon .senshi-art .kit-shot.kit-flip .kit-flip-f:nth-of-type(2),
  body.senshi--chibimoon .senshi-art .ka-items .kit-shot.kit-flip .kit-flip-f:nth-of-type(2){
    animation:kit-flip-open 8s steps(1, end) infinite;
  }
}
body.senshi--moon .senshi-art .kit-shot.kit-flip .kit-flip-f,
body.senshi--chibimoon .senshi-art .ka-items .kit-shot.kit-flip .kit-flip-f{
  align-self:end; justify-self:center;
}
body.senshi--chibimoon .senshi-art .ka-items .kit-shot.kit-flip .kit-flip-f:nth-of-type(1){
  margin-bottom:-4px;
}


/* ==========================================================================
   348. BACK TO THE SENSHI SELECT                                 (3 Oct 2026)
   ==========================================================================
   Ash: "inside each senshi profile page... There is a button that says smth
   like 'read the venus page'... after that button, can we add a button that
   takes us back to the landing page please?", with her Sailor Moon
   silhouette favicon (images/favicons/sailormoonsiloutte.gif, 20px).

   build_home_door_c147.py puts "back to senshi select" after the "read the
   ... page" button in every profile paragraph (the Moon Cats' page has one
   per cat; Tuxedo Mask's goes after his Earth and Sun pair). It is the same
   pixel button as the one beside it, a little apart from it; the silhouette
   shows at 2x (40px), the size of the rabbit moon and the planets beside it.
   On the four asteroid pages, whose button is plain text, it sits beside it
   the same way.
   ========================================================================== */
/* the gap goes on the button before it, so that when the row is too narrow
   and it wraps (Tuxedo Mask's, after his two), it starts flush on its own line */
.senshi-art .astro-door:has(+ .astro-door--home){ margin-right:10px; }
.senshi-art .astro-door.astro-door--home,
.senshi-art .ptop-text .astro-door + .astro-door.astro-door--home{ margin-left:0; }
.senshi-art .astro-door--home img.planet-px{ width:40px; height:40px; }
/* the asteroid pages' plain button is shorter: the two meet on their middles */
.senshi-art .astro-door:not(.astro-door--px):has(+ .astro-door--home),
.senshi-art .astro-door:not(.astro-door--px) + .astro-door--home{ vertical-align:middle; }


/* ==========================================================================
   349. THE CHIBI-WITH-PLANET DRAWINGS ON THE MOODY PALETTES   (10 Oct 2026)
   ==========================================================================
   Ashley: "sailor saturn... hers has a purple tint over it. please correct
   that and sit the image above the purple", then "place the image on the page
   the same way as the inner senshi... the only difference between saturn's and
   the rest is she has that more moody palette for the outer senshi. the image
   shouldn't be getting affected by that."

   Why it happened: section 289 gives the drawing mix-blend-mode:multiply so
   that the page's own paper shows through it. Measured, the plate behind it is
   rgb(244,251,255) on Mercury and rgb(255,245,242) on Mars - near white, so
   multiply is close to a no-op and the drawing's own white ground is invisible.
   On Saturn the plate is rgb(202,190,217), a real lilac, so multiply stained
   the whole drawing.

   The fix is the drawing, not the palette: the four outer crops are re-cut with
   their white ground knocked out to alpha (-cut.webp), and the blend is turned
   off for those. They then sit on top of any palette looking exactly as they do
   on the inners. The inner crops are untouched and still multiply.

   Ashley also asked for the three outers to carry their chibi drawing where the
   turning-planet GIF used to be, with the GIF moved down into "the myth", and
   for the duplicate "read the ... page" button inside "outside the seven" to go
   (the same button already sits in the profile paragraph higher up).
   Built by build_outer_chibi_c154.py.
   ========================================================================== */
/* ---- the cut-out drawings never blend, whatever is behind them ---- */
.senshi-art .dgtop--wheel .dgtop-pic .dgtop-img--cut{ mix-blend-mode:normal; }

/* ---- the chibi drawing in the modern-astrology plate's left column ---- */
.senshi-art .modplate-pic--chibi{ display:flex; justify-content:center; }
.senshi-art .modplate-pic--chibi .modchibi{
  display:block; width:auto; height:auto; max-width:100%; max-height:320px;
  border:0; box-shadow:none; mix-blend-mode:normal;
}

/* ---- "the myth" takes the turning-planet GIF beside its words ---- */
.senshi-art .modmyth:has(> .modplate-pic){
  display:grid; grid-template-columns:minmax(0, 1fr) 190px;
  gap:4px 14px; align-items:center;
}
.senshi-art .modmyth:has(> .modplate-pic) .modmyth-h,
.senshi-art .modmyth:has(> .modplate-pic) .modmyth-t{ grid-column:1; }
.senshi-art .modmyth:has(> .modplate-pic) .modplate-pic{
  grid-column:2; grid-row:1 / span 2; align-self:center;
}
.senshi-art .modmyth:has(> .modplate-pic) .modplate-pic img{
  border:2px solid var(--backbow); box-shadow:3px 3px 0 var(--frontbow);
}
@media (max-width:760px){
  /* stacked: the words first, the planet under them and centred */
  .senshi-art .modmyth:has(> .modplate-pic){ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .modmyth:has(> .modplate-pic) .modplate-pic{
    grid-column:1; grid-row:auto; justify-self:center; max-width:240px; margin-top:10px;
  }
  .senshi-art .modplate-pic--chibi .modchibi{ max-height:260px; }
}


/* ==========================================================================
   350. THE MYTH BOX'S PLANET, AND THE CUT-OUTS AS PNG          (10 Oct 2026)
   ==========================================================================
   Ashley: "the gif below. too small now. it was slightly too big before...
   but now its way too small."

   Measured on Uranus at a 1280px window: in its old home in the plate's left
   column the GIF rendered 417px wide, which she called slightly too big; the
   190px column it landed in rendered it 190px, way too small. 320px sits
   between the two and still leaves the myth text about 55 characters a line.

   Also: the four outer crops are now PNG with a hard alpha key and the white
   fringe unpremultiplied, so no pale halo is left around the line art, and the
   leftover margin is trimmed off (2-8px a side). Section 349 explains why they
   are cut out at all. Built by build_outer_chibi_c155.py.
   ========================================================================== */
.senshi-art .modmyth:has(> .modplate-pic){ grid-template-columns:minmax(0, 1fr) 320px; }
@media (max-width:1100px){
  .senshi-art .modmyth:has(> .modplate-pic){ grid-template-columns:minmax(0, 1fr) 260px; }
}
@media (max-width:760px){
  /* back to stacked, and the planet may use the width it has */
  .senshi-art .modmyth:has(> .modplate-pic){ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .modmyth:has(> .modplate-pic) .modplate-pic{ max-width:300px; }
}


/* ==========================================================================
   351. THE SIGNIFICATIONS BOX TAKES THE DRAWING IN         (10 Oct 2026)
   ==========================================================================
   Ashley, with a marked-up screenshot: "please switch the text around. expand
   the modern significations box up and include the chibi planet image inside
   the box."

   So: "outside the seven" and "the myth" trade their words (the boxes and the
   turning-planet GIF stay where they are), and the dark significations box
   grows up the whole left column with the chibi drawing inside it, instead of
   the drawing floating bare above it in a column twice its width.

   Measured before: the left column was 417px wide with a 193px drawing adrift
   in the middle of it. Built by build_outer_modsig_c156.py.
   ========================================================================== */
.senshi-art .modsig--chibi{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  height:100%; justify-content:flex-start;
}
.senshi-art .modsig--chibi .modplate-pic--chibi{ margin:0; width:100%; }
.senshi-art .modsig--chibi .modchibi{
  max-height:300px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
/* the heading and the pill list keep the full width under the drawing */
.senshi-art .modsig--chibi .modsig-h,
.senshi-art .modsig--chibi .modsig-list{ align-self:stretch; }
/* the left column is now one box top to bottom, so let it stretch */
.senshi-art .modplate-cols:has(.modsig--chibi){ align-items:stretch; }
.senshi-art .modplate-cols:has(.modsig--chibi) .modplate-l{ gap:0; }

/* "outside the seven" now sits in the wide band, so its link needs the
   band's own spacing rather than the card's */
.senshi-art .modmyth-more{ margin:8px 0 0; font-size:13px; }

@media (max-width:760px){
  .senshi-art .modsig--chibi .modchibi{ max-height:240px; }
}


/* ==========================================================================
   352. URANUS'S DOILY RUNS RED INTO NAVY INTO YELLOW          (10 Oct 2026)
   ==========================================================================
   Ashley: "uranus' doily at the top of the page. i like the left side
   starting red, but please gradient to the right with the navy blue to
   yellow she's known for."

   The doily is the lace field behind the top band - the ground the henshin
   still sits on and the name card floats over. Section 339 gave every outer
   a single night colour, and Uranus's was red end to end to match her still.
   The left stays exactly that red, and from about a third of the way across
   it travels into her navy and comes up gold at the right edge, which is her
   fuku read left to right.

   Both layers move: the deep ramp underneath, and the thread colour that
   darken-blends onto the lace. Darken is per-channel minimum, so a bright
   thread never lifts the ground - the ground keeps its own colour and only
   the threads take the ramp, exactly as section 339 set it up.

   The name card is paper at 72% over this, so the tint carries through it:
   dusty red on the left, grey-lilac in the middle, warm cream on the right.
   Measured through the card the ground moves from (181,159,146) to about
   (167,163,166) to (190,177,145) - the chips keep their contrast.

   Uranus only. Saturn, Neptune and Pluto keep their single night colours.
   Built by build_uranus_doily_c158.py.
   ========================================================================== */
body.senshi--uranus .container--post > .senshi-art .ptop-band::before{
  background-image:
    linear-gradient(90deg,
      #8e1418 0%, #8e1418 30%, #7a1c4e 42%, #33409e 56%,
      #3f7fd4 70%, #b99a3e 88%, #e8c83c 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #030102 0%, #2a0407 18%, #4a0306 34%, #250a2e 48%,
      #050a2e 60%, #0b1c5c 74%, #2c2a12 88%, #4e3d06 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}


/* ==========================================================================
   353. THE DOILY PICKS UP WHERE THE STILL LEAVES OFF          (10 Oct 2026)
   ==========================================================================
   Ashley: "could you add the gradient within the henshin image? keeping it
   red on the left to blue on the right? it would be subtle."

   So the red now lives inside the picture and ends there. The still fills the
   left 29% of the band (246px of 850), and its own smoke travels red on the
   left to blue at its right edge. The doily therefore starts at that same
   blue instead of restarting at red, and carries on into her gold - one
   sweep across the whole band rather than two that fight at the seam.

   Everything left of 29% is behind the picture and never shows, so the stops
   there only exist to keep the ramp smooth.

   Supersedes the stops in section 352, which started the doily red.
   Built by build_uranus_doily_c160.py.
   ========================================================================== */
body.senshi--uranus .container--post > .senshi-art .ptop-band::before{
  background-image:
    linear-gradient(90deg,
      #4a1030 0%, #3a2470 20%, #33409e 31%, #3a62bd 48%,
      #5a86c8 62%, #9a8f66 78%, #c9a93e 90%, #e8c83c 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #120418 0%, #0a0a30 20%, #071244 31%, #0b1c5c 48%,
      #11235e 62%, #26261c 78%, #3e330a 90%, #4e3d06 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}


/* ==========================================================================
   354. URANUS: NO RED LEFT, NAVY INTO BLUE INTO YELLOW        (10 Oct 2026)
   ==========================================================================
   Ashley: "the navy is so dark it's almost black. i want the gradient to
   start from this crazy dark navy, transition to the lighter then the yellow.
   I'm not sure if the red even belongs at this point anymore?"

   It does not. The red was only ever in her palette because the henshin
   screencap had a crimson cloud in it; now the cloud itself runs her skirt
   navy into a lighter blue, so nothing downstream has to carry red.

   The skirt in that still measures about #00001c - pure blue channel, almost
   black - and that is where the band starts. The still fills the left 29% and
   hands off at roughly #003c73; the doily takes that and climbs through her
   blue into her gold.

   Supersedes sections 352 and 353, which both still began in red.
   Built by build_uranus_doily_c163.py.
   ========================================================================== */
body.senshi--uranus .container--post > .senshi-art .ptop-band::before{
  background-color:#01030e;
  background-image:
    linear-gradient(90deg,
      #0a1230 0%, #0e2250 18%, #15467f 31%, #2a6aa8 46%,
      #4f8cc0 60%, #9a9166 76%, #c9a93e 90%, #e8c83c 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #01030e 0%, #030a24 18%, #05183a 31%, #09224e 46%,
      #0e2a52 60%, #23281c 76%, #3e330a 90%, #4e3d06 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}


/* ==========================================================================
   355. URANUS'S FUKU GRADIENT, WITHOUT THE RED                (10 Oct 2026)
   ==========================================================================
   Ashley: "the fuku gradient needs updating on the profile and the character
   select now."

   Section 327 built her fuku gradient as "navy to crimson to flame" because
   the transformation screencap had a crimson cloud in it. That cloud is now
   her own blue (section 354), so the gradient follows: her skirt navy, up
   through her trim blue, into her planet gold.

   The scrolling bar keeps the 320px palindrome from section 136, so the loop
   still has no seam, and the gold stays at the middle of the tile where the
   crimson-to-flame peak used to be.

   The two inks it paints move with it, and both read better than the reds
   they replace. Measured on her paper #e4d9c7, her box #dac9b1 and white:
     --name-b  #b0102f 5.08 / 4.38 / 7.09   ->  #0148a4 6.11 / 5.26 / 8.52
     --name-c  #c2410c 3.71 / 3.20 / 5.18   ->  #6f5a06 4.79 / 4.13 / 6.69
   --name-a is her skirt navy and does not move.

   Supersedes the Uranus half of section 327.
   Built by build_uranus_fuku_c164.py.
   ========================================================================== */
body.senshi--uranus .senshi-art{
  --name-b:#0148a4;
  --name-c:#6f5a06;
  --fuku-tile:repeating-linear-gradient(90deg,
      #010928 0px, #0b2a66 40px, #1b5ba8 80px, #3f8fd0 120px, #f2d23a 160px,
      #3f8fd0 200px, #1b5ba8 240px, #0b2a66 280px, #010928 320px);
}


/* ==========================================================================
   356. THE OUTERS' MODERN-ASTROLOGY LAYOUT                    (11 Oct 2026)
   ==========================================================================
   Ashley, pointing at Saturn's dignity chart: "do you see the dignity chart
   with the grid background? use that background in the modern astrology
   section for the outer senshi ... use this background for listing
   associations and facts, rather than having them in boxes below", and
   "notice the nice use of saturn's fuku gradient within the dignity chart
   ... it's just visually nice to see the palette spread used".

   So the modern section borrows the frame from section 285's dignity panel:
   bg21.png graph paper on her paper colour, a 2px border in her back bow and
   a hard shadow in her front bow. Two panels wear it, the significations and
   the facts, and inside both the writing is framed in her fuku colours
   (--name-a, --name-b, --name-c) cycling, so the whole palette gets used
   instead of one accent.

   The dark colour moves: "the modern signification box, this background
   colour, it's part of the fuku gradient right? use this dark color as the
   background for the outside the seven box". It is: --mod-bg is #010928 on
   Uranus, the first stop of her fuku tile and the colour of her skirt. The
   significations box gives it up to the band, so the page has one dark
   anchor instead of two.

   The drawing sits outside the facts panel to its left, the same 250px
   column the dignity panel gives Saturn's drawing, so the two sections read
   as one component.

   Written for .modplate--v3, which only the outers carry, so nothing else
   on the site moves. Built by build_outers_modern_css_c166.py.
   ========================================================================== */

/* ---- the top stacks: the pills across the full width, then the mythology.
   Side by side they left a hole, because the pill list is a third the height
   of the paragraph. ---- */
.senshi-art .modplate--v3 .modsig--paper{ margin:0 0 12px; }
.senshi-art .modplate-card--wide{ margin:0 0 4px; }

/* ---- the frame both panels wear ---- */
.senshi-art .modsig--paper,
.senshi-art .modplate-dl--paper{
  background:var(--paper) url("images/backgrounds/bg21.png") repeat;
  border:2px solid var(--backbow); border-radius:8px;
  box-shadow:4px 4px 0 var(--frontbow);
  color:var(--ink);
}

/* ---- significations: pills framed in the fuku colours ---- */
.senshi-art .modsig--paper{ padding:13px 13px 14px; overflow:visible; }
.senshi-art .modsig--paper::before{ display:none; }
.senshi-art .modsig--paper .modsig-h{
  color:var(--name-a); font-size:12px; letter-spacing:.06em; margin:0 0 10px;
}
.senshi-art .modsig--paper .modsig-list{ gap:7px; }
.senshi-art .modsig--paper .modsig-list li{
  --pc:var(--name-a);
  padding:4px 11px 5px; border:2px solid var(--pc); border-radius:999px;
  background:color-mix(in srgb, var(--pc) 10%, #fffdf6);
  color:var(--ink); font-size:13px; line-height:1.3;
  box-shadow:2px 2px 0 color-mix(in srgb, var(--pc) 34%, transparent);
}
/* the palette spread: the three gradient inks take turns round the list */
.senshi-art .modsig--paper .modsig-list li:nth-child(3n+2){ --pc:var(--name-b); }
.senshi-art .modsig--paper .modsig-list li:nth-child(3n+3){ --pc:var(--name-c); }

/* ---- the one dark band: outside the seven ----
   Section 339 repaints .modmyth in her warm box colour from a selector with
   the body class on it, so the dark has to be claimed at that weight too. */
body.senshi--saturn  .container--post > .senshi-art .modmyth--dark,
body.senshi--uranus  .container--post > .senshi-art .modmyth--dark,
body.senshi--neptune .container--post > .senshi-art .modmyth--dark,
body.senshi--pluto   .container--post > .senshi-art .modmyth--dark{
  background-color:var(--mod-bg);
}
.senshi-art .modmyth--dark{
  background:var(--mod-bg); color:var(--mod-ink);
  border:2px solid var(--mod-bg); border-left:4px solid var(--mod-band);
  box-shadow:4px 4px 0 color-mix(in srgb, var(--mod-band) 70%, transparent);
}
.senshi-art .modmyth--dark::before{ height:4px; }
.senshi-art .modmyth--dark .modmyth-h{
  color:var(--mod-hi); opacity:1; font-size:12px; letter-spacing:.06em; margin:4px 0 6px;
}
.senshi-art .modmyth--dark .modmyth-t{ color:var(--mod-ink); font-size:13.5px; line-height:1.64; }
.senshi-art .modmyth--dark .modmyth-t--2{ margin-top:9px; }
/* the link belongs under the writing, not adrift beside the picture */
.senshi-art .modmyth--dark .modmyth-more{ grid-column:1; margin:10px 0 0; }
.senshi-art .modmyth--dark .modmyth-t i{ color:var(--mod-hi); font-style:italic; }
/* section 339 darkens .modplate-lnk for daylight paper, which is unreadable
   on the band, so the link is claimed back at that same weight */
body.senshi--saturn  .container--post > .senshi-art .modmyth--dark .modplate-lnk,
body.senshi--uranus  .container--post > .senshi-art .modmyth--dark .modplate-lnk,
body.senshi--neptune .container--post > .senshi-art .modmyth--dark .modplate-lnk,
body.senshi--pluto   .container--post > .senshi-art .modmyth--dark .modplate-lnk,
.senshi-art .modmyth--dark .modplate-lnk{
  color:var(--mod-hi); text-decoration-color:color-mix(in srgb, var(--mod-hi) 60%, transparent);
}

/* ---- the drawing beside the facts, the same column the dignity panel uses ---- */
.senshi-art .modfacts{
  display:grid; grid-template-columns:250px minmax(0, 1fr); gap:0 10px;
  align-items:center; margin:14px 0 0;
}
.senshi-art .modfacts-pic{ margin:0; max-width:250px; }
.senshi-art .modfacts-pic .modchibi{
  display:block; width:auto; height:auto; max-width:100%; max-height:300px;
  margin:0 auto; border:0; box-shadow:none; mix-blend-mode:normal;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
  animation:ptop-bob 5.5s ease-in-out -2.2s infinite;
}
@media (prefers-reduced-motion: reduce){
  .senshi-art .modfacts-pic .modchibi{ animation:none; }
}

/* ---- the facts, on the paper, each row ruled in a fuku colour.
   Section 339 repaints .modplate-row in her box colour from a selector with
   the body class on it, so these are claimed at that weight too. ---- */
body.senshi--saturn  .container--post > .senshi-art .modplate-dl--paper .modplate-row,
body.senshi--uranus  .container--post > .senshi-art .modplate-dl--paper .modplate-row,
body.senshi--neptune .container--post > .senshi-art .modplate-dl--paper .modplate-row,
body.senshi--pluto   .container--post > .senshi-art .modplate-dl--paper .modplate-row{
  background-color:#fffdf6;
}
/* ---- the facts, on the paper, each row ruled in a fuku colour ---- */
.senshi-art .modplate-dl--paper{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:9px; margin:0; padding:12px;
}
.senshi-art .modplate-dl--paper .modplate-row{
  --pc:var(--name-a);
  background:color-mix(in srgb, var(--paper) 72%, #ffffff);
  border:1px solid color-mix(in srgb, var(--pc) 42%, transparent);
  border-left:4px solid var(--pc);
  border-radius:5px; padding:7px 9px 8px;
}
.senshi-art .modplate-dl--paper .modplate-row:nth-child(3n+2){ --pc:var(--name-b); }
.senshi-art .modplate-dl--paper .modplate-row:nth-child(3n+3){ --pc:var(--name-c); }
.senshi-art .modplate-dl--paper .modplate-row dt{
  color:var(--pc); opacity:1; font-size:11px; letter-spacing:.04em; margin:0 0 3px;
}
.senshi-art .modplate-dl--paper .modplate-row dd{ font-size:13px; line-height:1.42; }

@media (max-width:1100px){
  .senshi-art .modplate-dl--paper{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .senshi-art .modfacts{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .senshi-art .modfacts-pic{ max-width:220px; margin:0 auto; }
  .senshi-art .modplate-dl--paper{ grid-template-columns:minmax(0, 1fr); }
}


/* ==========================================================================
   357. THE OUTERS' MODERN BOX, FOLDED INTO ONE               (11 Oct 2026)
   ==========================================================================
   Ashley: "the chibi senshi with planet, move it into the box called
   mythology of uranus and float it to the left of the text ... move that text
   into the modern significations box. give this box a new name with the
   uranus stats ... and move this box inside the mythology of uranus box as
   well, but to the right of the text."

   So section 356's four blocks become two. The mythology box now holds the
   drawing floated left, the glance box floated right, and the writing running
   between and under them. Below it, the one dark band.

   Real floats, not grid columns: the paragraph is about ninety words and the
   two things beside it are different heights, so a three-column grid left a
   hole under whichever finished first. Floating lets the words close up
   underneath.

   Also: "it's too info dense in the outside seven. it also made a bunch of
   dead space under the gif." The band is cut to one paragraph, and the
   planet floats right inside it instead of sitting in its own grid column,
   so there is nothing left to leave a hole.

   The facts panel from 356 is gone. Three rows survive, inside the glance
   box: modern rule, Aquarius's traditional ruler, sect.
   Built by build_outers_modern_css_c169.py.
   ========================================================================== */

/* ---- the mythology box is now the whole top half ---- */
.senshi-art .modmythos{ overflow:hidden; padding:14px 15px 15px; }
.senshi-art .modmythos::after{ content:""; display:block; clear:both; }
.senshi-art .modmythos .dgset-h{ margin:0 0 10px; }

/* the drawing, floated left */
.senshi-art .modmythos-pic{ float:left; margin:2px 16px 8px 0; width:186px; }
.senshi-art .modmythos-pic .modchibi{
  display:block; width:100%; height:auto; max-width:100%;
  border:0; box-shadow:none; mix-blend-mode:normal;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
  animation:ptop-bob 5.5s ease-in-out -2.2s infinite;
}
@media (prefers-reduced-motion: reduce){
  .senshi-art .modmythos-pic .modchibi{ animation:none; }
}

/* the glance box, floated right */
.senshi-art .modsig--aside{
  float:right; width:292px; margin:2px 0 10px 16px; padding:12px 12px 13px;
}
/* tighter pills in the aside, so eight of them pack into four rows instead of
   seven and the box finishes about level with the writing beside it */
.senshi-art .modsig--aside .modsig-list{ margin:0 0 11px; gap:5px; }
.senshi-art .modsig--aside .modsig-list li{
  padding:3px 9px 4px; font-size:12px; border-width:1.5px;
}

/* its three stat rows stack, each still ruled in a fuku colour */
.senshi-art .modplate-dl--stats{
  display:grid; grid-template-columns:minmax(0, 1fr); gap:7px; margin:0;
}
body.senshi--saturn  .container--post > .senshi-art .modplate-dl--stats .modplate-row,
body.senshi--uranus  .container--post > .senshi-art .modplate-dl--stats .modplate-row,
body.senshi--neptune .container--post > .senshi-art .modplate-dl--stats .modplate-row,
body.senshi--pluto   .container--post > .senshi-art .modplate-dl--stats .modplate-row{
  background-color:#fffdf6;
}
.senshi-art .modplate-dl--stats .modplate-row{
  --pc:var(--name-a);
  background:#fffdf6;
  border:1px solid color-mix(in srgb, var(--pc) 42%, transparent);
  border-left:4px solid var(--pc);
  border-radius:5px; padding:6px 9px 7px;
}
.senshi-art .modplate-dl--stats .modplate-row:nth-child(2){ --pc:var(--name-b); }
.senshi-art .modplate-dl--stats .modplate-row:nth-child(3){ --pc:var(--name-c); }
.senshi-art .modplate-dl--stats .modplate-row dt{
  color:var(--pc); opacity:1; font-size:10.5px; letter-spacing:.04em; margin:0 0 2px;
}
.senshi-art .modplate-dl--stats .modplate-row dd{ font-size:12.5px; line-height:1.4; }

.senshi-art .modmythos .modplate-lede{ margin:0; }

/* ---- the band: the planet floats, the words close up under it ---- */
.senshi-art .modmyth--dark{ display:block; overflow:hidden; padding:12px 14px 13px; }
.senshi-art .modmyth--dark::after{ content:""; display:block; clear:both; }
.senshi-art .modmyth--dark .modplate-pic{
  float:right; width:300px; margin:2px 0 8px 16px;
}
.senshi-art .modmyth--dark .modplate-pic img{ display:block; width:100%; height:auto; }

@media (max-width:900px){
  .senshi-art .modsig--aside{ float:none; width:auto; margin:0 0 12px; }
  .senshi-art .modmythos-pic{ width:150px; }
}
@media (max-width:620px){
  .senshi-art .modmythos-pic{ float:none; width:160px; margin:0 auto 10px; }
  .senshi-art .modmyth--dark .modplate-pic{ float:none; width:auto; max-width:300px; margin:0 auto 10px; }
}


/* ==========================================================================
   358. THE GLANCE BOX DROPS UNDER, THE PLANET GROWS          (11 Oct 2026)
   ==========================================================================
   Ashley: "let's move the uranus at a glance box below the chibi senshi with
   planet and the mythology of uranus text, but still keep it in the same
   box", and "can you make the outside the seven gif a little bigger too".

   So the mythology box is now a row on top, the drawing and the writing side
   by side, and the glance box full width under them. Section 357's right
   float is dropped: with nothing beside the writing any more there is nothing
   to wrap around, and a flex row lets the writing sit centred against the
   drawing instead of ending high and leaving a hole.

   The glance box having the full width also lets the three stats run as three
   columns rather than a stack, which is what keeps the box from getting tall.

   The planet on the band goes 300px to 360px.
   Built by build_outers_modern_css_c171.py.
   ========================================================================== */

/* ---- the top row: drawing, then the writing ---- */
.senshi-art .modmythos-top{
  display:flex; align-items:center; gap:4px 18px; min-width:0;
}
.senshi-art .modmythos-top .modplate-lede{ flex:1 1 auto; min-width:0; }
.senshi-art .modmythos-pic{ float:none; flex:0 0 auto; width:186px; margin:0; }

/* ---- the glance box, full width underneath ---- */
.senshi-art .modsig--under{
  float:none; clear:both; width:auto; margin:14px 0 0; padding:12px 13px 13px;
}
.senshi-art .modsig--under .modsig-list{ margin:0 0 11px; gap:6px; }
.senshi-art .modsig--under .modsig-list li{ padding:3px 10px 4px; font-size:12.5px; border-width:1.5px; }
.senshi-art .modsig--under .modplate-dl--stats{
  grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px;
}

/* ---- a bigger planet on the band ---- */
.senshi-art .modmyth--dark .modplate-pic{ width:360px; }

@media (max-width:900px){
  .senshi-art .modsig--under .modplate-dl--stats{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .modmythos-pic{ width:150px; }
  .senshi-art .modmyth--dark .modplate-pic{ width:300px; }
}
@media (max-width:620px){
  .senshi-art .modmythos-top{ display:block; }
  .senshi-art .modmythos-pic{ width:160px; margin:0 auto 10px; }
}


/* ==========================================================================
   359. THE RING IN THE GLANCE BOX                            (11 Oct 2026)
   ==========================================================================
   Ashley: "you did mention a circle chart for the uranus at a glance box,
   showing only aquarius highlighted for uranus, so modern rulership shown in
   the chart. can we put a circle chart back inside the at a glance box?"

   It is the same wheel Saturn's dignity panel uses, section 285, and it
   reuses that panel's classes (.dgw-face, .dgw-ring, .dgw-spoke, .dgw-tint,
   .dgw-hub) so it inherits her palette with nothing new to keep in step.

   The difference is what it says. Saturn's wheel marks four conditions.
   An outer has none, so this one lights a single sector, the sign modern
   astrology handed the planet, and the caption says so plainly. On Uranus
   that is Aquarius; the geometry is generated per sign, so Neptune gets
   Pisces and Pluto gets Scorpio from the same code.

   The lit sector uses --name-b, the middle ink of her fuku gradient, so it
   reads against the ring strokes, which are drawn in her back bow.

   Also: "the gif inside the outside the seven box is touching the boarder of
   its container box." It was floated hard against the padding edge; it now
   keeps 14px off it.
   Built by build_outers_modern_css_c172.py.
   ========================================================================== */

.senshi-art .modglance{
  display:grid; grid-template-columns:200px minmax(0, 1fr);
  gap:0 18px; align-items:center; min-width:0;
}
.senshi-art .modglance-wheel{ margin:0; min-width:0; }
.senshi-art .modwheel-svg{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 3px 5px rgba(40, 20, 60, .20));
}
.senshi-art .modwheel-svg image{ image-rendering:pixelated; }
.senshi-art .modwheel-dot{ fill:var(--name-b); }
.senshi-art .modglance-cap{
  margin:7px 0 0; font-size:10.5px; line-height:1.35; text-align:center;
  color:var(--name-b);
}
.senshi-art .modglance-body{ min-width:0; }
.senshi-art .modglance-body .modsig-list{ margin:0 0 11px; }

/* The planet keeps off the band's edge. Two things were wrong: section 349
   turns any .modmyth holding a picture into a grid whose second column is
   320px, and it does it from a :has() selector that outweighs section 357's
   display:block, so the band was never actually a block and the 360px float
   was overflowing the column by 40px and being clipped by overflow:hidden.
   Claimed back at :has() weight, and given a margin off the padding edge. */
.senshi-art .modmyth--dark:has(> .modplate-pic){ display:block; }
.senshi-art .modmyth--dark .modplate-pic{ margin-right:14px; }

@media (max-width:900px){
  .senshi-art .modglance{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .senshi-art .modglance-wheel{ max-width:240px; margin:0 auto; }
}


/* ==========================================================================
   360. THE RING MOVES RIGHT, AND MATCHES THE OTHER WHEELS    (11 Oct 2026)
   ==========================================================================
   Ashley: "switch the circle chart to the other side of the box. please use
   cancer rising. the box should be the same size as the box on the other
   profiles."

   So the ring sits on the right of the glance box and the writing on the
   left, and it is drawn at 300px, the same width the dignity wheel gets in
   section 285's panel, so the two charts on an outer's page are the same
   size as each other and as every inner's.

   Cancer rising: the ring is laid out like a whole-sign chart, the rising
   sign taking the first seat at the left horizontal and the signs running on
   from there. Aries used to sit there by default; Cancer does now, which
   puts Aquarius in the upper right. The seat is computed, so Neptune's
   Pisces and Pluto's Scorpio land correctly from the same code.
   Built by build_outers_modern_css_c173.py.
   ========================================================================== */
.senshi-art .modglance{ grid-template-columns:minmax(0, 1fr) 300px; gap:0 18px; }
.senshi-art .modglance-wheel{ width:300px; }
.senshi-art .modglance-cap{ max-width:300px; }

@media (max-width:1100px){
  .senshi-art .modglance{ grid-template-columns:minmax(0, 1fr) 240px; }
  .senshi-art .modglance-wheel{ width:240px; }
}
@media (max-width:900px){
  .senshi-art .modglance{ grid-template-columns:minmax(0, 1fr); }
  .senshi-art .modglance-wheel{ width:240px; margin:0 auto; }
  .senshi-art .modglance-cap{ margin-left:auto; margin-right:auto; }
}


/* ==========================================================================
   361. THE DRAWING BESIDE THE GLANCE BOX                     (11 Oct 2026)
   ==========================================================================
   Ashley: "move the chibi senshi with planet next to the uranus in a glance
   box, basically the same as the saturn profile with the image next to the
   grid box", and the second half of the band moves up into the mythology
   box with it.

   So the row is section 285's: a 250px column for the drawing, 10px, then
   the panel. That lands the glance box at about 506px, which is what Saturn's
   dignity panel measures, so "the same size as the box on the other profiles"
   now holds for the box as well as for the ring inside it.

   Inside the box the pills run the full width under the heading, and the
   three stats and the ring share the row below, stats left, ring right at
   300px.

   The writing above is full width now that the drawing has left the top.
   Built by build_outers_modern_css_c175.py.
   ========================================================================== */

.senshi-art .modglance-row{
  display:grid; grid-template-columns:250px minmax(0, 1fr);
  gap:0 10px; align-items:center; margin:14px 0 0; min-width:0;
}
.senshi-art .modglance-row .modmythos-pic{ width:100%; max-width:250px; margin:0; }
.senshi-art .modglance-row .modsig--under{ margin:0; }
.senshi-art .modplate-lede--2{ margin:10px 0 0; }

/* inside the box: pills across, then the stats and the ring */
.senshi-art .modsig--under .modsig-list{ margin:0 0 11px; }
.senshi-art .modglance{
  grid-template-columns:minmax(0, 1fr) 300px; gap:0 14px; align-items:center;
}
.senshi-art .modglance .modplate-dl--stats{ grid-template-columns:minmax(0, 1fr); gap:8px; }

@media (max-width:1100px){
  .senshi-art .modglance-row{ grid-template-columns:200px minmax(0, 1fr); }
  .senshi-art .modglance{ grid-template-columns:minmax(0, 1fr) 240px; }
  .senshi-art .modglance-wheel{ width:240px; }
}
@media (max-width:900px){
  .senshi-art .modglance-row{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .senshi-art .modglance-row .modmythos-pic{ max-width:200px; margin:0 auto; }
}


/* ==========================================================================
   362. THE BAND'S WRITING SITS LEVEL WITH THE PLANET         (11 Oct 2026)
   ==========================================================================
   Moving the second half of the band up into the mythology box left the band
   with four lines of writing next to a 360px picture, and the float put all
   the leftover height in one lump under the link.

   So the band goes back to two columns, but this time the writing is wrapped
   in .modmyth-body and the row is centred, which puts the spare height above
   and below the writing instead of all under it. The float and its clear are
   dropped; nothing wraps round the picture any more.
   Built by build_outers_modern_css_c176.py.
   ========================================================================== */
.senshi-art .modmyth--dark:has(> .modplate-pic){
  display:grid; grid-template-columns:minmax(0, 1fr) 360px;
  gap:0 18px; align-items:center;
}
.senshi-art .modmyth--dark .modmyth-body{ min-width:0; align-self:center; }
/* an earlier section gives the picture grid-row: 1 / span 2, for a band whose
   heading and text were separate grid items. The writing is one item now, so
   the span made a second, empty row and pinned the writing to the top of the
   first. One row, and the centring works. */
.senshi-art .modmyth--dark:has(> .modplate-pic) .modplate-pic{
  float:none; margin:0; grid-row:1; grid-column:2;
}
.senshi-art .modmyth--dark::after{ content:none; }

@media (max-width:900px){
  .senshi-art .modmyth--dark:has(> .modplate-pic){
    grid-template-columns:minmax(0, 1fr) 280px;
  }
}
@media (max-width:620px){
  .senshi-art .modmyth--dark:has(> .modplate-pic){ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .senshi-art .modmyth--dark .modplate-pic{ max-width:300px; margin:0 auto; }
}


/* ==========================================================================
   363. THE OUTERS' SIGNIFICATIONS GRID                       (11 Oct 2026)
   ==========================================================================
   Ashley: "so i was thinking of a way to have something like the dignity
   boxes included in uranus neptune and pluto, rather than dignitys, maybe we
   could do a 2x2 grid and list the qualities most suited to the character."

   An outer has no dignities, so the grid holds four significations instead,
   one per card, each argued the way a dignity card argues: a term, the words
   under it, why the moderns give it to the planet, and where it shows in the
   guardian.

   It reuses .dgset--cards, .dglist--2 and .dg-card wholesale, so the card,
   the picture frame and the two paragraphs are identical to the dignity
   cards on every inner page. The only new thing here is that the term is a
   plain span rather than a link, because these four have no glossary page
   behind them the way domicile and exaltation do.

   The eight keywords that used to be pills in the glance box are gone; the
   grid is where they live now, with a reason attached to each.
   Built by build_outers_sigs_css_c178.py.
   ========================================================================== */
.senshi-art .dgset--sigs{ margin:0 0 16px; }
.senshi-art .dgset--sigs .dg-term{
  font-family:rainyhearts, monospace; color:var(--name-a);
  text-decoration:none; border:0; cursor:default;
}


/* ==========================================================================
   364. THE SIGNIFICATION CARDS RUN ON                        (11 Oct 2026)
   ==========================================================================
   Ashley: "is there a way to blend together the sentences above and below
   the breaks in the significations boxes?"

   On a dignity card the rule earns its keep: the two halves are long, and
   the one above is the tradition's reasoning while the one below is the
   guardian. On a signification card they are three or four sentences each
   and the turn from planet to character happens inside the prose, so the
   rule was announcing a seam the writing already handles.

   The rule goes and the gap closes to a paragraph's worth. The markup keeps
   both spans, so this is a look, not a loss: the dignity cards on every
   other profile are untouched, and turning it back on is one line.
   Built by build_outers_sigs_blend_c181.py.
   ========================================================================== */
.senshi-art .dgset--sigs .dg-tie{
  border-top:0; margin-top:0; padding-top:9px;
}


/* ==========================================================================
   365. THE GLANCE BOX IN HER OWN COLOURS, AND LEGIBLE      (11 Oct 2026)
   ==========================================================================
   Ashley: "do we have a way to ... idk make this easier to read with the
   fuku palette ... and the text is fuckin' small again."

   It was: the stat labels were at 10.5px and their colour was doing all the
   work of separating one row from the next. Now each row carries a filled
   bar in one of the three fuku inks with her paper colour written on it, and
   the value under it goes from 12.5px to 14px, which is the size the rest of
   the page reads at. The three inks still take turns down the column, so the
   palette is doing more and the type is doing less.

   Also: the mythology card is gone, so the drawing and the chart sit
   straight in the plate, and the band takes back the writing it lost when
   that card existed. The band is called trans-saturnian now and carries two
   links, its own page and the seven.
   Built by build_outers_glance_c182.py.
   ========================================================================== */

/* the stat rows: a filled label bar, then the value at a readable size */
.senshi-art .modplate-dl--stats .modplate-row{
  padding:0; overflow:hidden; border-left-width:2px;
}
.senshi-art .modplate-dl--stats .modplate-row dt{
  display:block; margin:0; padding:4px 9px 5px;
  background:var(--pc); color:var(--paper);
  font-size:12px; letter-spacing:.04em; line-height:1.25; opacity:1;
}
.senshi-art .modplate-dl--stats .modplate-row dd{
  margin:0; padding:7px 9px 8px; font-size:14px; line-height:1.45;
}
.senshi-art .modplate-dl--stats .modplate-row dd .stat-gly{ vertical-align:-3px; margin-right:4px; }

/* the heading over them matches */
.senshi-art .modsig--under .modsig-h{ font-size:13px; margin:0 0 11px; }

/* the drawing and the chart now sit straight in the plate */
.senshi-art .modplate--v3 > .modglance-row{ margin:0 0 14px; }

/* two links under the band, stacked */
.senshi-art .modmyth--dark .modmyth-t--2{ margin-top:9px; }
.senshi-art .modmyth--dark .modmyth-more--2{ margin-top:4px; }


/* ==========================================================================
   366. NEPTUNE'S DOILY OPENS ON HER BOW NAVY                 (11 Oct 2026)
   ==========================================================================
   Ashley: "neptunes doily next to the henshin pic... can the gradient start
   a darker navy blue? closer to the color of her chest bow."

   Measured off neptune-bust.png: the body of the front bow is #0c185a, with
   the commonest pixels running #0c185a to #121860. The ramp now opens there,
   beside the still, and travels right into the sea-green it already ended
   on, #12665a. Her teal is untouched at the right-hand end; only the dark
   end moved, from a near-black teal to her navy.

   Like Uranus in section 354 the ramp runs one way across the band rather
   than diagonally, so the travel reads left to right, and the thread colour
   moves with the ground instead of staying one flat teal. Darken is a
   per-channel minimum, so a bright thread never lifts the ground.

   Claimed at section 339's weight, which sets this from a selector carrying
   the body class. Built by build_neptune_doily_c185.py.
   ========================================================================== */
body.senshi--neptune .container--post > .senshi-art .ptop-band::before{
  background-color:#060a2e;
  background-image:
    linear-gradient(90deg,
      #2b3f9e 0px, #2f4fa6 20%, #2f6f9c 40%,
      #34968f 60%, #4ac0a6 80%, #5fd8b8 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #060a2e 0%, #0b1550 20%, #0c2550 38%, #09384a 56%,
      #0a4b4c 74%, #0e5d55 88%, #12665a 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}


/* ==========================================================================
   367. NEPTUNE'S DOILY, DARKER STILL                         (11 Oct 2026)
   ==========================================================================
   Ashley: "darker. look at her bow in the henshin image. almost black...
   kinda like uranus' was."

   Section 366 took the bow from neptune-bust.png, where it is lit and reads
   #0c185a. In the transformation still it is barely lit at all: across the
   bow the commonest pixels run #000000 to #000010 and the median is (5,16,13),
   a black with a faint blue-green in it. Her skirt measures the same way.
   That is the same situation as Uranus, whose skirt in her own still is
   #00001c, near-black with only the blue channel up.

   So the ramp now opens at #01060a and holds her bow's near-black through the
   first fifth, where the still has it, and only then starts to climb. It
   still ends on the sea-green it always ended on, #12665a. The thread colour
   starts dark with it, so the lace beside the picture reads as a thread in
   the dark rather than a bright teal lying on top of it.

   Supersedes section 366, which was a stop too light all the way along.
   Built by build_neptune_doily_c186.py.
   ========================================================================== */
body.senshi--neptune .container--post > .senshi-art .ptop-band::before{
  background-color:#01060a;
  background-image:
    linear-gradient(90deg,
      #0a1736 0%, #102a55 20%, #1a4f70 40%,
      #276f7e 58%, #3aa094 78%, #5fd8b8 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #01060a 0%, #020c16 20%, #031a2c 38%, #06303c 56%,
      #0a4448 74%, #0e5a54 90%, #12665a 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}


/* ==========================================================================
   368. NEPTUNE'S DOILY ARRIVES AT HER OWN SEA-FOAM           (11 Oct 2026)
   ==========================================================================
   Ashley: "make sure to transition up to the lightest seafoam green that's
   in the henshin pic... but for the doily."

   Measured off the aurora in neptune-henshin-pose.jpg. The body of that
   green is #007854, by a long way the commonest colour in it. It brightens
   through #51b4a5, and the lightest it gets while still reading as sea-foam
   rather than as white is about #66c19d; past that it washes out to #9dcfa8
   and stops being a colour.

   So the ramp keeps the near-black bow at the left from section 367 and now
   climbs to her own greens instead of a generic teal: the ground arrives at
   #0d7a5c, which is the still's green body, and the thread goes up through
   #51b4a5 to #66c19d and touches #9dcfa8 at the very end.

   The old end, #12665a, was a stop invented in section 339. Nothing in the
   picture is that colour.

   Supersedes section 367's light end; its dark end is unchanged.
   Built by build_neptune_doily_c187.py.
   ========================================================================== */
body.senshi--neptune .container--post > .senshi-art .ptop-band::before{
  background-color:#01060a;
  background-image:
    linear-gradient(90deg,
      #0a1736 0%, #102a55 20%, #1a4f70 40%, #2a7f7a 58%,
      #51b4a5 78%, #66c19d 92%, #9dcfa8 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #01060a 0%, #020c16 20%, #031a2c 38%, #06303c 56%,
      #0a4a48 74%, #0c6654 90%, #0d7a5c 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}


/* ==========================================================================
   369. NEPTUNE'S SEA-FOAM, TURNED UP                         (11 Oct 2026)
   ==========================================================================
   Ashley: "even more vibratnt seafoam at the end of the doily plz."

   Section 368 took the light end straight off the still, #66c19d, and that
   is honest but dim: the aurora in that frame is a low-lit glow, so its
   measured colours are all half-saturated. Her sea-foam as a colour, rather
   than as that one dark frame, is far brighter than the frame can show.

   So the light end is pushed past what the still contains: the thread now
   climbs through #31c7a2 to #2fe6b2 and finishes on #54ffcd, which is the
   same hue the aurora has with the saturation the frame could not hold.

   The ground is deliberately NOT taken up with it. It stops at #0e8064,
   because the name card is her paper at 72% over this ground, and a bright
   ground there washes the card out while a bright thread does not: darken
   is a per-channel minimum, so the thread lands on the lace and nowhere
   else. That is what keeps the right-hand pills on the same card as the
   left-hand ones.

   Supersedes section 368's light end.
   Built by build_neptune_doily_c188.py.
   ========================================================================== */
body.senshi--neptune .container--post > .senshi-art .ptop-band::before{
  background-color:#01060a;
  background-image:
    linear-gradient(90deg,
      #0a1736 0%, #102a55 20%, #1a4f70 40%, #2a8f84 58%,
      #31c7a2 76%, #2fe6b2 90%, #54ffcd 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #01060a 0%, #020c16 20%, #031a2c 38%, #06303c 56%,
      #0a4a48 74%, #0c6a58 90%, #0e8064 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:cover, 256px 190px, cover;
  background-blend-mode:darken, normal, normal;
}


/* ==========================================================================
   371. A WARMER NOTE ON THE LAST OF NEPTUNE'S DOILY          (12 Oct 2026)
   ==========================================================================
   Ashley: "is there anyway to get the very end of the gradient... like the
   very end just a little more of a greeny yellowy seafoam?... like just the
   very last part so maybe like the last 10 px or so."

   The band is 850px wide and this layer is no-repeat at cover, so the stops
   are a straight read of its width: the last 10px is the last 1.2%. The
   thread therefore holds #54ffcd to 96%, turns at 98.8% and finishes on
   #93ff8a, which is the same brightness rotated off cyan toward yellow.

   The ground is left alone. A warm stop there would tint the name card,
   which is her paper at 72% over it; on the thread, darken keeps it on the
   lace and nowhere else.

   Only the last stops move. Everything from the near-black bow at the left
   through to 96% is section 369 untouched.
   Built by build_neptune_doily_c190.py.
   ========================================================================== */
body.senshi--neptune .container--post > .senshi-art .ptop-band::before{
  background-image:
    linear-gradient(90deg,
      #0a1736 0%, #102a55 20%, #1a4f70 40%, #2a8f84 58%,
      #31c7a2 76%, #2fe6b2 90%, #54ffcd 96%,
      #6bffa2 98.8%, #93ff8a 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #01060a 0%, #020c16 20%, #031a2c 38%, #06303c 56%,
      #0a4a48 74%, #0c6a58 90%, #0e8064 100%);
}


/* ==========================================================================
   372. THE WARM TIP, WIDE ENOUGH TO READ                     (12 Oct 2026)
   ==========================================================================
   Section 371 put the greeny-yellow on the last 10px, which is the last 1.2%
   of an 850px band. Measured, it worked: the lace went from (98,198,179) to
   (118,244,156) across it. Seen at actual size it did not, because seven or
   eight pixels of a new hue read as a glint rather than as a colour.

   So the turn starts at 92% instead of 96%, which gives it about 60px to
   arrive in, with the last few at full strength. Same two colours, same
   ground, more room.
   Built by build_neptune_doily_c191.py.
   ========================================================================== */
body.senshi--neptune .container--post > .senshi-art .ptop-band::before{
  background-image:
    linear-gradient(90deg,
      #0a1736 0%, #102a55 20%, #1a4f70 40%, #2a8f84 58%,
      #31c7a2 76%, #2fe6b2 86%, #54ffcd 92%,
      #6bffa2 96.5%, #93ff8a 100%),
    url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(100deg,
      #01060a 0%, #020c16 20%, #031a2c 38%, #06303c 56%,
      #0a4a48 74%, #0c6a58 90%, #0e8064 100%);
}


/* ==========================================================================
   373. TWO SIGNIFIERS UNDER EACH SIGN   (12 Oct 2026)
   ==========================================================================
   Ash: "the signifier line belongs inside EACH dignity box... the
   significators are for the state of the planet in each sign."

   So this is not the planet's general meaning repeated four times. Each
   card carries what the planet DOES from that sign, and where a card has
   two signs the two get their own pair, because Taurus Venus keeps things
   and Libra Venus arranges them between people. That is the whole
   difference between these grids and the outers': the traditional seven
   get a condition-based reading, the outers get a flat one. The furniture
   says so without anyone having to explain it.

   .dg-v was already a wrapping flex row, so each sign unit is wrapped in
   .dg-vs and stays a plain block: the glyph and the sign name keep their
   natural inline spacing on the first line and the pair drops underneath.
   A grid was tried first and pushed the sign name away from its glyph,
   because the wider line below stretched the column it spanned.
   ========================================================================== */
.senshi-art .dg-card .dg-v{ align-items:flex-start; gap:6px 26px; }

.senshi-art .dg-card .dg-vs{ display:block; }
.senshi-art .dg-card .dg-vs > .dg-gly{ margin-right:6px; }

.senshi-art .dg-card .dg-sig{
  display:block; margin-top:1px;
  font-family:rainyhearts, monospace;
  font-size:13.5px; line-height:1.25;
  letter-spacing:.2px;
  color:var(--ink); opacity:.72;
}

@media (max-width: 780px){
  .senshi-art .dg-card .dg-v{ gap:6px 18px; }
  .senshi-art .dg-card .dg-sig{ font-size:13px; }
}


/* ==========================================================================
   374. THE DIGNITY AND SIGNIFICATION CARDS GET A FRAME   (12 Oct 2026)
   ==========================================================================
   Ash: "the boxes look under designed. can you ad some gentle framing and
   use the fuku gradients to shift the boxes for styling."

   They looked under designed because they were: .dg-card was
   display:block, padding 0, BORDER:0. There was no card - just content
   stacked straight onto --paper, and the only edges on screen belonged to
   the pictures.

   So the set becomes a tray and each card becomes an object on it: the
   tray takes a wash tint, the card keeps a clean --paper surface, a
   hairline frame, the site's hard offset shadow, and a strip of the fuku
   gradient along the top edge like the lid of a trading card. The divider
   between the scheme paragraph and the delineation becomes a fuku rule
   fading out to the right, with the same --fuku-fade mask the arc
   headings use.

   WHERE THE DARK GOES. She also wants the outers (saturn, uranus,
   neptune, pluto) shifted darker, panels only: --wash goes deep and
   --paper stays a reading surface. That is why the tint is on the TRAY
   and in the frame and never in the card's fill. When --wash drops to a
   deep navy the tray and the card edges go dark with it, and the prose
   inside each card is still --ink on --paper at full contrast. It is also
   her own standing rule for this site: the fuku belongs on heading bars,
   card edges and rules, not as background fill.

   Nothing here names a colour. Every value is mixed against --wash or
   --head, so the four outers need no second copy of this section when
   their washes change.

   The tray mixes against transparent rather than against --paper so the
   graph paper under the outers' significations grid still reads through
   it.

   The strip is 320px wide, matching --fuku-tile from 158, so each card
   shows about two thirds of one pass and the cards in a row all start
   from the same stop.

   SCOPE. Everything is held inside .dgset--cards, which is the dignity
   grid and the outers' significations grid. The condition set (sect,
   joy) is a different shape - picture beside text, no two-paragraph
   split - and the lid lands in the wrong place inside it, so it is left
   alone until she says what she wants there. The sigs grid keeps its
   run-on paragraphs from 364, so the fuku divider is scoped away from it
   too.
   ========================================================================== */
.senshi-art .dgset--cards .dglist{
  padding:13px;
  background:color-mix(in srgb, var(--wash) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--head) 20%, transparent);
}

.senshi-art .dgset--cards .dglist .dg-card{
  position:relative;
  padding:0 11px 12px;
  background:var(--paper);
  border:2px solid color-mix(in srgb, var(--head) 42%, var(--wash));
  box-shadow:3px 3px 0 color-mix(in srgb, var(--head) 22%, transparent);
  overflow:hidden;
}

/* the lid: a full-bleed strip of her fuku across the top edge */
.senshi-art .dgset--cards .dglist .dg-card::before{
  content:"";
  display:block;
  height:5px;
  margin:0 -11px 11px;
  background:var(--fuku-tile);
  background-size:320px 100%;
}

/* the picture keeps a frame but a quieter one, so it reads as a window in
   the card rather than a second box inside it */
.senshi-art .dgset--cards .dglist .dg-card .dg-pic,
.senshi-art .dgset--cards .dglist .dg-card .ph--dgshot{
  border-width:1px;
  border-color:color-mix(in srgb, var(--head) 30%, var(--wash));
}

/* the divider between the scheme and the delineation, as a fuku rule */
.senshi-art .dgset--cards:not(.dgset--sigs) .dglist .dg-card .dg-tie{
  border-top:0;
  padding-top:0;
  margin-top:11px;
}
.senshi-art .dgset--cards:not(.dgset--sigs) .dglist .dg-card .dg-tie::before{
  content:"";
  display:block;
  height:2px;
  margin:0 0 9px;
  background:var(--fuku-tile);
  background-size:320px 100%;
  opacity:.45;
  -webkit-mask-image:var(--fuku-fade);
          mask-image:var(--fuku-fade);
}

@media (max-width: 780px){
  .senshi-art .dgset--cards .dglist{ padding:10px; }
  .senshi-art .dgset--cards .dglist .dg-card{ padding:0 9px 10px; }
  .senshi-art .dgset--cards .dglist .dg-card::before{ margin:0 -9px 9px; }
}


/* ==========================================================================
   375. THE OUTER FOUR AT NIGHT   (12 Oct 2026)
   ==========================================================================
   Ash: "it would be cooler if it we're darker... and more that navy blue...
   neptune more that midnight blue and pluto you gave her an awesome color in
   her trans-saturnian box... saturn again that super dark purple."

   And, before I could say it: "so i know where this is going. we won't be
   able to read the text right? frame text in a semi opaque box."

   That is the move, and it is what unlocks this. 328 kept the text dark by
   refusing to let the ground fall below relative luminance .48, which is
   why the outers only ever got dusky. Lifting the prose onto its own sheet
   takes the ceiling off: the ground goes all the way down to her night
   colour and the reading happens on a pane of glass floating over it.

   THE GROUND is each character's own darkest colour, not a new one:
     uranus   #010928  her skirt, and her own --mod-bg
     neptune  #0a1736  the midnight blue at the dark end of her doily ramp
     pluto    #171219  her --mod-bg, the trans-saturnian band she liked
     saturn   #14102a  the deep purple 328 already used for her lace band

   THE SHEET is her light tint at alpha .74. Alpha is the whole mechanism:
   at .90 it would be a white box on black and the night would only live in
   the gutters; below .60 her dark inks start to fail. .74 shows the ground
   through and still measures over 6 to 1 against her ink, which is why this
   is a palette change and not a rewrite of four ink ladders.

   --paper STAYS SOLID. It is not only a surface - the file uses
   color:var(--paper) in about fifteen places for light type on a dark chip,
   and a translucent text colour is just dimmer text. So the sheet goes on
   the panel variables and --paper keeps its job.

   THE TRAY under the dignity and significations cards goes the other way:
   --deck, her ground at .58, so the cards read as lit panes set into a dark
   recess rather than as paper lying on a dark table.

   The fuku keeps doing what it does everywhere else on the site - it is the
   edge of the sheet, never the fill.
   ========================================================================== */
/* ---- saturn ---- */
body.senshi--saturn .container--post > .senshi-art{
  --night:#14102a;
  --sheet:rgba(226,218,242,.74);
  --deck:rgba(20,16,42,.58);
  --paper:#e2daf2;
  --boxbody:var(--sheet);
  --box:var(--sheet);
  --wash:var(--sheet);
  --biotint:var(--sheet);
  --biotint2:var(--sheet);
  --sen-body:var(--sheet);
  --night-ink:#e2daf2;
  --lace:#8a5fd6;
  background-color:var(--night);
  background-image:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,.18) 100%);
  box-shadow:
    0 0 0 2px rgba(138,95,214,.80),
    0 0 0 7px #08060e,
    0 0 0 8px rgba(138,95,214,.80),
    0 0 34px 8px rgba(138,95,214,.40);
}
body.senshi--saturn .container--post > .senshi-art .dgset--cards .dglist{
  background:var(--deck);
  border-color:color-mix(in srgb, #8a5fd6 60%, transparent);
}
body.senshi--saturn .container--post > .senshi-art .dgset--cards .dglist .dg-card{
  background:var(--sheet);
}
/* three things on this page paint straight onto the night rather than onto a
   sheet, so they are the only text colours that have to move */
body.senshi--saturn .container--post > .senshi-art .block-h{
  color:var(--night-ink);
  border-bottom-color:color-mix(in srgb, var(--night-ink) 34%, transparent);
}
/* background-image, never the background shorthand: the shorthand resets
   background-clip to border-box and the gradient stops being a text fill
   and becomes a solid bar over the heading. */
body.senshi--saturn .container--post > .senshi-art .block-h .bh-t{
  background-image:linear-gradient(96deg,
    color-mix(in srgb, var(--name-a) 42%, var(--night-ink)) 0%,
    color-mix(in srgb, var(--name-b) 42%, var(--night-ink)) 46%,
    color-mix(in srgb, var(--name-c) 42%, var(--night-ink)) 100%);
}
body.senshi--saturn .container--post > .senshi-art .block-h .bh-moon{
  background:color-mix(in srgb, var(--name-c) 42%, var(--night-ink));
}
/* and two feet that were already quiet lose their margin once the sheet is
   translucent, so they get it back as opacity rather than as a new colour */
body.senshi--saturn .container--post > .senshi-art .updated{ opacity:.85; }
body.senshi--saturn .container--post > .senshi-art .sel-credit{ opacity:.95; }
/* ---- uranus ---- */
body.senshi--uranus .container--post > .senshi-art{
  --night:#010928;
  --sheet:rgba(220,229,244,.74);
  --deck:rgba(1,9,40,.58);
  --paper:#dce5f4;
  --boxbody:var(--sheet);
  --box:var(--sheet);
  --wash:var(--sheet);
  --biotint:var(--sheet);
  --biotint2:var(--sheet);
  --sen-body:var(--sheet);
  --night-ink:#dce5f4;
  --lace:#2a6aa8;
  background-color:var(--night);
  background-image:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,.18) 100%);
  box-shadow:
    0 0 0 2px rgba(42,106,184,.80),
    0 0 0 7px #000512,
    0 0 0 8px rgba(42,106,184,.80),
    0 0 34px 8px rgba(42,106,184,.40);
}
body.senshi--uranus .container--post > .senshi-art .dgset--cards .dglist{
  background:var(--deck);
  border-color:color-mix(in srgb, #2a6aa8 60%, transparent);
}
body.senshi--uranus .container--post > .senshi-art .dgset--cards .dglist .dg-card{
  background:var(--sheet);
}
/* three things on this page paint straight onto the night rather than onto a
   sheet, so they are the only text colours that have to move */
body.senshi--uranus .container--post > .senshi-art .block-h{
  color:var(--night-ink);
  border-bottom-color:color-mix(in srgb, var(--night-ink) 34%, transparent);
}
/* background-image, never the background shorthand: the shorthand resets
   background-clip to border-box and the gradient stops being a text fill
   and becomes a solid bar over the heading. */
body.senshi--uranus .container--post > .senshi-art .block-h .bh-t{
  background-image:linear-gradient(96deg,
    color-mix(in srgb, var(--name-a) 42%, var(--night-ink)) 0%,
    color-mix(in srgb, var(--name-b) 42%, var(--night-ink)) 46%,
    color-mix(in srgb, var(--name-c) 42%, var(--night-ink)) 100%);
}
body.senshi--uranus .container--post > .senshi-art .block-h .bh-moon{
  background:color-mix(in srgb, var(--name-c) 42%, var(--night-ink));
}
/* and two feet that were already quiet lose their margin once the sheet is
   translucent, so they get it back as opacity rather than as a new colour */
body.senshi--uranus .container--post > .senshi-art .updated{ opacity:.85; }
body.senshi--uranus .container--post > .senshi-art .sel-credit{ opacity:.95; }
/* ---- neptune ---- */
body.senshi--neptune .container--post > .senshi-art{
  --night:#0a1736;
  --sheet:rgba(218,234,232,.74);
  --deck:rgba(10,23,54,.58);
  --paper:#daeae8;
  --boxbody:var(--sheet);
  --box:var(--sheet);
  --wash:var(--sheet);
  --biotint:var(--sheet);
  --biotint2:var(--sheet);
  --sen-body:var(--sheet);
  --night-ink:#daeae8;
  --lace:#2fbe97;
  background-color:var(--night);
  background-image:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,.18) 100%);
  box-shadow:
    0 0 0 2px rgba(43,190,151,.80),
    0 0 0 7px #04101f,
    0 0 0 8px rgba(43,190,151,.80),
    0 0 34px 8px rgba(43,190,151,.38);
}
body.senshi--neptune .container--post > .senshi-art .dgset--cards .dglist{
  background:var(--deck);
  border-color:color-mix(in srgb, #2fbe97 60%, transparent);
}
body.senshi--neptune .container--post > .senshi-art .dgset--cards .dglist .dg-card{
  background:var(--sheet);
}
/* three things on this page paint straight onto the night rather than onto a
   sheet, so they are the only text colours that have to move */
body.senshi--neptune .container--post > .senshi-art .block-h{
  color:var(--night-ink);
  border-bottom-color:color-mix(in srgb, var(--night-ink) 34%, transparent);
}
/* background-image, never the background shorthand: the shorthand resets
   background-clip to border-box and the gradient stops being a text fill
   and becomes a solid bar over the heading. */
body.senshi--neptune .container--post > .senshi-art .block-h .bh-t{
  background-image:linear-gradient(96deg,
    color-mix(in srgb, var(--name-a) 42%, var(--night-ink)) 0%,
    color-mix(in srgb, var(--name-b) 42%, var(--night-ink)) 46%,
    color-mix(in srgb, var(--name-c) 42%, var(--night-ink)) 100%);
}
body.senshi--neptune .container--post > .senshi-art .block-h .bh-moon{
  background:color-mix(in srgb, var(--name-c) 42%, var(--night-ink));
}
/* and two feet that were already quiet lose their margin once the sheet is
   translucent, so they get it back as opacity rather than as a new colour */
body.senshi--neptune .container--post > .senshi-art .updated{ opacity:.85; }
body.senshi--neptune .container--post > .senshi-art .sel-credit{ opacity:.95; }
/* ---- pluto ---- */
body.senshi--pluto .container--post > .senshi-art{
  --night:#171219;
  --sheet:rgba(236,223,230,.74);
  --deck:rgba(23,18,25,.58);
  --paper:#ecdfe6;
  --boxbody:var(--sheet);
  --box:var(--sheet);
  --wash:var(--sheet);
  --biotint:var(--sheet);
  --biotint2:var(--sheet);
  --sen-body:var(--sheet);
  --night-ink:#ecdfe6;
  --lace:#a8384c;
  background-color:var(--night);
  background-image:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,.18) 100%);
  box-shadow:
    0 0 0 2px rgba(200,21,46,.70),
    0 0 0 7px #0b080d,
    0 0 0 8px rgba(200,21,46,.70),
    0 0 34px 8px rgba(200,21,46,.32);
}
body.senshi--pluto .container--post > .senshi-art .dgset--cards .dglist{
  background:var(--deck);
  border-color:color-mix(in srgb, #a8384c 60%, transparent);
}
body.senshi--pluto .container--post > .senshi-art .dgset--cards .dglist .dg-card{
  background:var(--sheet);
}
/* three things on this page paint straight onto the night rather than onto a
   sheet, so they are the only text colours that have to move */
body.senshi--pluto .container--post > .senshi-art .block-h{
  color:var(--night-ink);
  border-bottom-color:color-mix(in srgb, var(--night-ink) 34%, transparent);
}
/* background-image, never the background shorthand: the shorthand resets
   background-clip to border-box and the gradient stops being a text fill
   and becomes a solid bar over the heading. */
body.senshi--pluto .container--post > .senshi-art .block-h .bh-t{
  background-image:linear-gradient(96deg,
    color-mix(in srgb, var(--name-a) 42%, var(--night-ink)) 0%,
    color-mix(in srgb, var(--name-b) 42%, var(--night-ink)) 46%,
    color-mix(in srgb, var(--name-c) 42%, var(--night-ink)) 100%);
}
body.senshi--pluto .container--post > .senshi-art .block-h .bh-moon{
  background:color-mix(in srgb, var(--name-c) 42%, var(--night-ink));
}
/* and two feet that were already quiet lose their margin once the sheet is
   translucent, so they get it back as opacity rather than as a new colour */
body.senshi--pluto .container--post > .senshi-art .updated{ opacity:.85; }
body.senshi--pluto .container--post > .senshi-art .sel-credit{ opacity:.95; }


/* ==========================================================================
   376. THE CATS GET CARDS                                      (12 Oct 2026)
   ==========================================================================
   Ash: "the cats no longer get their own profile page... give them cards
   kinda like the cats do in the sailor moon wing. ykwim", and then "the cats
   should be like the 3 cats profile... 3 columns next to each other. use the
   same colors and doilies as the cats profies", and "you should keep the cats
   for the cats though" when the rest of the page moved off the fuku.

   So paz.html, peach.html and chico.html stop being destinations and become
   three cards on her profile. Same construction as .mc-meet on the moon cats
   page: a portrait, a chip card, lace over a gradient, a gold hairline. Those
   rules are scoped to body.senshi--mooncats, so this is the shape rebuilt
   rather than the selector reused. The stats started out reusing .ptop-dl and
   .c2-chip, the site-wide chip pair, but Ash wanted one frame around the lot
   instead of a pill per row, so they are now .ac-stats rows. See below.

   This section used to also carry a statement frame and a window wrapper for
   ash.html. Both are gone: sections 377 and 378 replaced them, and leaving
   dead selectors behind in a stylesheet this size is how it got this size.
   ========================================================================== */

/* ---- THE CHARACTER SELECT ----
   Ash: "i changed my mind about the fold. I just feel like each cat isn't
   getting their deserved space... but I like that they are all in a row... I
   don't want them stacked, but the same as now."

   The row keeps its three equal columns and now holds identity only, so the
   cards are mostly portrait. The sheets below are where the stats went, and
   they get the whole width of the window one at a time.

   The radios are the state. They are visually hidden rather than
   display:none, because display:none takes an input out of the focus order
   and the arrow-key navigation between cats is the main reason for using
   radios at all. */
/* Ash: "a window that... glides up over the right two columns with room for
   the text... covering the other two cats while reading the info... then an
   easy to see close button back to kitty select."

   One grid cell holds both the roster and the sheets, so they stack without
   anything being positioned absolutely - which matters because the sheet is
   taller than the cards and an absolute one would hang out of the section.
   Stacked in a grid cell, the taller of the two sets the height and the page
   below it moves down to make room. */
.senshi-art .ac-select{
  margin:0;
  display:grid; grid-template-areas:"stack"; align-items:stretch;
}
.senshi-art .ac-roster,
.senshi-art .ac-sheets{ grid-area:stack; }
.senshi-art .ac-roster{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px; margin:0 0 14px; align-items:stretch;
}

.senshi-art .ac-cat{
  display:grid; grid-template-rows:auto 1fr; gap:9px;
  padding:9px;
  border:1px solid #c9a24e; border-radius:10px;
  background-repeat:repeat, no-repeat;
  background-size:256px 190px, cover;
  /* Ash: "scroll their doily backgrounds." Only the first layer moves: the
     lace tiles, the gradient under it is `cover` and stays put. Same slow
     drift as every other doily on the site. */
  animation:ac-doily 190s linear infinite;
}
@keyframes ac-doily{
  from{ background-position:0 0, 0 0; }
  to  { background-position:256px 190px, 0 0; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .ac-cat{ animation:none; }
}
.senshi-art .ac-pic{
  /* Ash: "cat party box. too tall", then "paz is cut off at the mouth. add
     back about 35px to the bottom of each pic."

     Two changes, because a centred crop cannot do it on its own. 6/5 instead
     of 4:3 puts about 35px of height back on a 430px-wide card, and
     object-position 72% slides the crop window DOWN so what comes back is at
     the bottom rather than half at each end. Net at 430 wide: ~20px off the
     bottom instead of ~54, with the top almost where it was. Chins and mouths
     are in; ceiling and chest are still out. */
  display:block; width:100%; height:auto; margin:0;
  aspect-ratio:6/5; object-fit:cover; object-position:50% 72%;
  border:2px solid #fffaf1; border-radius:6px;
  box-shadow:0 0 0 1px #c9a24e, 0 4px 10px -4px rgba(0,0,0,.35);
}
/* paz.jpg and peach.jpg do not exist yet. font-size:0 suppresses the
   browser's broken-image alt text, so the slot reads as an empty frame
   waiting for a photo rather than as a fault. It keeps the square the real
   photos use, so the three cards still line up across the top now that one
   of them has a picture in it. */
.senshi-art .ac-pic.is-missing{
  font-size:0; color:transparent;
  background:repeating-linear-gradient(45deg,#f7f2f6 0 8px,#efe8f2 8px 16px);
}
.senshi-art .ac-card{
  position:relative;        /* the sex symbol hangs off this corner */
  min-width:0; padding:8px 10px 6px; color:var(--ink);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  border:1px solid #c9a24e; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
}
/* ---- THE NAMES ----
   Ash: "bigger cute letters for their names and gradient.... kinda like the
   sailor moon logo on the landing page.. pixeled and gradient color change.
   try daydream font?"

   daydream it is, and the gradient is the site's own: the seven stop ribbon
   from section 263, where Usagi's name got it. Pink, rose, gold, yellow,
   lavender, sky, back to pink, clipped to the letters and shimmering across
   them. Reusing it means the cats match the wing rather than approximating it.

   The purple pixel edge is four stacked drop-shadows rather than a
   text-shadow. A text-shadow would paint a solid blob behind letters whose
   fill is transparent; a filter runs on the already-clipped result, so the
   outline follows the painted glyph. */
/* Ash: "center the names... move the sex symbol to the right corner of the
   box... hopefully there is enough room after moving the names, shrink the
   names if there isnt."

   The symbol comes out of the flow entirely and pins to the card's top right
   corner, so it no longer takes width from the name and the name can centre
   on the whole card rather than on what is left over. The reserved gutter is
   symmetrical: 38px either side, not just on the symbol's side, because a
   one sided pad would centre the name off centre.

   The names do still fit at 32px in a three column row - measured, the
   longest (Peach) is 184px inside 214px of room - but the clamp means a
   narrower card shrinks them instead of wrapping "Peach" onto two lines. */
.senshi-art .ac-name{
  margin:0 0 2px; line-height:1.25;
  /* inline-flex, a whole line wide (push283): the card is a link, and a link's underline runs through
     everything in it except an inline box like this one; To Japan showed it under the names */
  display:inline-flex; width:100%; vertical-align:top; align-items:center; justify-content:center;
  gap:8px; flex-wrap:nowrap;
  padding:0 4px; min-height:34px;
}
.senshi-art .ac-nm{
  display:inline-block; white-space:nowrap;
  font-family:tojapan, monospace;
  font-size:clamp(22px, 2.4vw, 32px); letter-spacing:2.5px;
  /* Ash: "more blocky looking gradient inside the text... like it's doing its
     best with snes hardware to make a smooth gradient."

     So the ribbon is quantised. Section 263's version is a smooth seven stop
     blend; this samples that same ramp at sixteen points and gives each one a
     hard stop, so the letters band like a sprite with a small palette instead
     of blending. Sixteen is the number because the scroll below steps sixteen
     times across a 300px tile, which moves exactly one band per tick: the
     colour changes in jumps, the way the hardware would. */
  background-image:linear-gradient(100deg,
    #e563a1 0.0% 6.25%,
    #e876ad 6.25% 12.5%,
    #eb88b9 12.5% 18.75%,
    #e7959d 18.75% 25.0%,
    #e09f6a 25.0% 31.25%,
    #daaa3b 31.25% 37.5%,
    #e3ba4f 37.5% 43.75%,
    #dab374 43.75% 50.0%,
    #bc93ac 50.0% 56.25%,
    #a07ed9 56.25% 62.5%,
    #898fde 62.5% 68.75%,
    #72a0e2 68.75% 75.0%,
    #7d9ad8 75.0% 81.25%,
    #9b88c7 81.25% 87.5%,
    #b875b5 87.5% 93.75%,
    #d563a4 93.75% 100.0%);
  /* Ash: "can the gradient in the names span like... all the way from chico
     to the end of peach... like the letters are transparent and there is a
     gradient moving behind glass letters."

     background-attachment:fixed is what does that. It takes the background
     positioning area off the element and pins it to the viewport, so all
     three names share one coordinate system: the ramp is laid once across the
     screen and each name is a window cut into it. Chico shows the pink end,
     Peach shows the blue end, and the span between them is continuous because
     it is literally the same gradient.

     background-size:100% is therefore one ramp per viewport width, and the
     shimmer travels exactly 100vw so the loop closes on itself.

     The drop-shadow filter that used to draw the purple pixel edge had to go:
     a filter on the element makes it the containing block for its own fixed
     background, which would pin the gradient back to each name and undo this.
     -webkit-text-stroke draws the same edge without a filter. */
  background-size:100% 100%;
  background-repeat:repeat;
  background-attachment:fixed;
  will-change:background-position;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:1px #5A3268;
  paint-order:stroke fill;
  /* Ash: "a few more fps for that gradient... it looks like a blinking led
     sign lol."

     It was stepping 16 times across the tile in 9s - 1.8 frames a second,
     which is a blink, not a scroll. The step count and the band count were
     tied together on the theory that moving exactly one band per tick was
     the most hardware-ish thing to do; it is also the slowest possible one.

     They come apart here. 72 steps over the same 9s is 8fps, so the ramp
     slides in sub-band increments and reads as motion, while the colour
     edges stay just as hard - the blockiness was always the gradient's
     sixteen hard stops, not the timing function. */
  animation:ac-name-shimmer 9s steps(72, end) infinite;
}
@keyframes ac-name-shimmer{
  from{ background-position:0 0; }
  to  { background-position:100vw 0; }
}
/* the symbol stays solid: it is information, not decoration, so it should not
   be riding a moving gradient. Framed, as asked, in the card's own accent. */
/* ---- THE SEX SYMBOLS, AS CABOCHONS ----
   Ash: "lets move the sex symbol down next to the years. no room by the
   name...", then "how can we make the sex symbols for the cats fancier".

   They were a flat square chip with the glyph in it. Now they are domed gems
   in a gold rim - the Sailor Moon brooch language the rest of the site already
   speaks, and the one treatment that uses no new art.

   Four layers make the dome, and the order matters:
     1. a specular dot high and left, the single thing that says "curved"
     2. a soft bounce light low and centre, the light coming back off the card
     3. the body gradient, lighter at the top and deeper at the bottom
     4. an inset shadow at the bottom edge and an inset highlight at the top
   Flatten any one of them and it goes back to looking like a sticker.

   The tint is per cat, pulled from their own card gradients rather than from
   --accent: two of the three accents are a gold-brown that makes a muddy gem.
   Chico gets the blue his card opens with, Paz her pink, Peach her green. */
.senshi-art .ac-sym{
  --gem:#9aa8c4; --gem-hi:#6f82ab; --gem-lo:#c3cde0;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  width:30px; height:30px; flex:0 0 auto;
  border:0; border-radius:50%;
  font-size:16px; line-height:1;
  /* The glyph is white WITH A DARK STROKE, not white with a shadow. Measured,
     the specular dot was landing on the glyph and the lightest pixel behind it
     came out at 1.04:1 - the shadow was the only thing holding it, which is not
     something to rely on. A stroke painted under the fill works against any
     part of the stone, highlight included. */
  color:#fff;
  -webkit-text-stroke:2px rgba(24,12,32,.62);
  paint-order:stroke fill;
  text-shadow:0 1px 1px rgba(20,12,28,.4);
  background:
    /* the dot sits high and well left of centre, off the glyph entirely */
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.95) 0 5%,
                    rgba(255,255,255,0) 26%),
    radial-gradient(circle at 50% 115%, rgba(255,255,255,.55),
                    rgba(255,255,255,0) 52%),
    radial-gradient(circle at 50% 32%, var(--gem-lo) 0%, var(--gem) 46%,
                    var(--gem-hi) 100%);
  box-shadow:
    0 0 0 2px #e6d2a0,                      /* the gold rim */
    0 0 0 3px rgba(90,50,104,.30),          /* and a hairline around that */
    inset 0 -4px 7px rgba(26,14,34,.34),    /* the dome's underside */
    inset 0 2px 3px rgba(255,255,255,.55),  /* and its lit top edge */
    0 2px 3px -1px rgba(26,20,32,.40);      /* sitting above the card */
}
/* each cat's own stone, taken from the gradient on their card */
.senshi-art .ac-cat--chico .ac-sym{ --gem:#4a6fbb; --gem-hi:#2e4784; --gem-lo:#8ea8de; }
.senshi-art .ac-cat--paz   .ac-sym{ --gem:#cc5c9f; --gem-hi:#93357a; --gem-lo:#ea97c6; }
.senshi-art .ac-cat--peach .ac-sym{ --gem:#4e9c74; --gem-hi:#2d6b4e; --gem-lo:#8ccba4; }

/* Ash: "give it a little sheen glimmer at frist scroll." A white band sweeps
   across the stone once as the card enters the viewport, driven by
   animation-timeline:view(). Where that is not supported the @supports block
   never applies and the gem simply sits still: a glint is decoration, so
   losing it costs nothing. */
@keyframes ac-sym-glint{
  from{ background-position:140% 0; }
  to  { background-position:-60% 0; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .ac-sym::after{ animation:none; }
}
.senshi-art .ac-dates{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 0 5px;
  font-family:rainyhearts,monospace; font-size:13px; letter-spacing:.4px;
  color:var(--head);
}
/* Chico's dates, flanked by the two angel cats. They are drawn facing inward,
   so the one holding its heart to the right goes on the left and vice versa,
   and the pair points at the years between them. Centred, which the other two
   cards are not: his is the only closed date range on the page, and the
   difference is the point. image-rendering:pixelated so the sprites stay
   crisp if they ever scale. */
.senshi-art .ac-dates--flanked{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:1px 0 7px;
  font-size:13px;
}
/* the pair on the years: the two halves of the wings gif, 20x18 each */
.senshi-art .ac-dateflank{
  display:block; width:20px; height:18px; flex:0 0 auto;
  image-rendering:pixelated;
  -ms-interpolation-mode:nearest-neighbor;
}


@media (prefers-reduced-motion:reduce){
  .senshi-art .ac-nm{ animation:none; }
}

/* ---- THE STATS ----
   Ash: "I want the stats to all sit inside their own framed box, inside each
   profile box. so rather than each stat getting a box around it, design it
   less strong, and put the box around all the stat text."

   So .c2-chip is gone from these cards. It draws a filled pill per row, and
   nine of them stacked was nine frames fighting the card frame and the window
   frame around that. One box holds the lot, the rows inside it are plain
   label and value, and the separators are hairlines rather than borders. */
/* ---- THE STATS, AS A GRID ----
   Ash: "I want the stats to all sit inside their own framed box", then "can we
   use more color contrast for the font? not just color, but like... frame the
   text as if it's a grid ... make it easier to read the catagory different
   from the info."

   So the list becomes a real table. Each row is a cell pair: the category in a
   tinted band with its own rule under it, the value on paper below. One frame
   around the whole thing, hairlines between the rows, nothing floating. The
   category is now different from the info by background, by weight, by case
   and by colour rather than by colour alone.

   The outer .ac-stats box is deliberately bare: the grid IS the frame, and a
   border around a border was the thing that made the pills look busy. */
.senshi-art .ac-dl{
  margin:0; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--accent) 48%, var(--paper));
  border-radius:7px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.6);
}
.senshi-art .ac-row{
  display:block;
  border-top:1px solid color-mix(in srgb, var(--accent) 40%, var(--paper));
}
.senshi-art .ac-row:first-child{ border-top:0; }
.senshi-art .ac-row dt{
  margin:0; padding:4px 9px 3px;
  background:color-mix(in srgb, var(--accent) 18%, var(--paper));
  border-bottom:1px solid color-mix(in srgb, var(--accent) 34%, var(--paper));
  font-family:rainyhearts,monospace; font-size:10.5px; letter-spacing:1.3px;
  line-height:1.35; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 72%, #1a1420);
}
.senshi-art .ac-row dd{
  margin:0; padding:7px 9px 8px;
  font-size:14.5px; line-height:1.5; color:var(--ink);
}

/* Chico's status, flanked by the angel cats. Their hearts face inward, so
   angelcat-l (heart on its right edge) goes left and angelcat-r goes right. */
.senshi-art .ac-winged{
  display:flex; align-items:center; justify-content:center; gap:7px;
  text-align:center;
}
.senshi-art .ac-statflank{
  display:block; width:31px; height:29px; flex:0 0 auto;
  image-rendering:pixelated;
  -ms-interpolation-mode:nearest-neighbor;
}

/* ---- THE SELECTED CARD ----
   The row is a control now, so it has to look like one: a pointer, a lift on
   hover, and a selected state that is unmistakable without relying on colour
   alone - the selected card sits forward, keeps a heavier ring, and grows a
   notch pointing down at the sheet it opened. */
/* and the cards snap rather than ease, for the same reason */
.senshi-art .ac-cat{
  cursor:pointer; transition:transform .1s steps(2, end), box-shadow .1s steps(2, end);
}
.senshi-art .ac-cat:hover{ transform:translateY(-2px); }
.senshi-art .ac-roster .ac-cat:focus-visible{ outline:2px solid var(--head); outline-offset:2px; }
/* The card is a link now rather than a radio's label, so it keeps no selected
   state of its own - while a sheet is open the sheet is what you are looking
   at. What it DOES get is a hint that it opens something, and the opened cat
   jumping to the first column so the panel never lands on top of it. */
/* Ash: "remove the character sheet text below ascended party member and
   active party memeber." The whole card is a link and it already looks like
   one; the line under it was a label for something the card itself says. */
/* :target lands on the SHEET, which is a child of .ac-sheets - so it is the
   WRAPPER that is the roster's sibling, and the selector has to go through it
   with :has(). Written as "#cat-x:target ~ .ac-roster" this matched nothing at
   all and the opened cat's card stayed wherever it was, which put the panel on
   top of it. */
.senshi-art .ac-sheets:has(#cat-chico:target) ~ .ac-roster .ac-cat--chico,
.senshi-art .ac-sheets:has(#cat-paz:target)   ~ .ac-roster .ac-cat--paz,
.senshi-art .ac-sheets:has(#cat-peach:target) ~ .ac-roster .ac-cat--peach{
  order:-1;
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),
             0 0 0 2px var(--head),
             0 10px 20px -10px rgba(26,20,32,.55);
}
/* the notch under the selected card, pointing at the sheet */
.senshi-art .ac-cat{ position:relative; }
/* The notch that pointed down at the sheet is gone with the sheet's old
   position: it is drawn OVER the roster now, not under it, so an arrow
   pointing down at nothing would be a lie.

   The de-saturate is gone too. It marked the two cats you had not picked, and
   that only made sense while one was always picked. With nothing open all
   three are equally available and should look it; with a sheet open the other
   two are behind the panel anyway. */
.senshi-art .ac-roster .ac-cat{ filter:none; }

/* the status line, which is the one stat that stayed on the card */
.senshi-art .ac-badge{
  margin:7px 0 0; padding:6px 8px;
  border:1px solid color-mix(in srgb, var(--accent) 44%, var(--paper));
  border-radius:7px;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  font-size:14px; font-weight:600; line-height:1.35; text-align:center;
  color:var(--ink);
}

/* ---- THE SHEETS ----
   Only the selected cat's sheet is in flow; the other two are display:none,
   which keeps them out of the accessibility tree as well as off the screen.

   Two columns at the window's full width. A value longer than about fifty
   characters takes both, because "RIP houseplanets. Peed in the bassinet. Ate
   garbage. Used couch as scratching post." in a half column is four lines and
   a hyphenation problem, and in a full one it is two. */
/* the sheet takes the selected cat's palette, so opening Paz's sheet changes
   the colour of the whole lower half of the panel. That is what makes the row
   and the sheet read as one object rather than a table that happens to sit
   under some cards - and it is the thing that actually gives each cat the
   space Ash wanted: a full-width sheet in their own colours. */
.senshi-art .ac-sheets{
  --pp-sheetbg:url("images/backgrounds/sheetbg-1.gif");
  margin:0; padding:13px;
  border:1px solid #c9a24e; border-radius:10px;
  /* Ash: "and this one for the box holding the cat stats. i think its called
     ac-sheets."

     The tile is 25px, two frames, and opaque white, so laying it down flat
     would have thrown away the per-cat colour the sheet picks up when you
     choose a cat. multiply keeps both: white multiplies to whatever is under
     it, so the cat's colour shows through the white of the tile, and the dots
     stay dots. One image, no editing, nothing lost.

     The lace and its 190s scroll are gone - the tile animates on its own and
     two moving patterns in one box is one too many. */
  background-color:var(--backbow,#e6e2ef);
  background-image:var(--pp-sheetbg);
  background-size:25px 25px; background-repeat:repeat;
  background-blend-mode:multiply;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
/* The wrapper is the overlay. It is NOT shown until one of its sheets is
   targeted, and it starts two thirds of the way across so the opened cat's
   card (sent to column 1 by order:-1 above) stays uncovered beside it.

   pointer-events while closed: the wrapper is still in the grid cell, lying
   over the roster, so with it merely invisible the cards underneath would not
   be clickable. none lets every click through to them. */
.senshi-art .ac-sheets{
  position:relative; z-index:2;
  margin-left:calc(33.3333% + 4px);
  visibility:hidden; pointer-events:none;
  /* it fills the roster's height so the two cards it is covering do not peek
     out below it */
  display:flex; flex-direction:column;
}
.senshi-art .ac-sheet:target{ flex:1 1 auto; }
.senshi-art .ac-sheets:has(.ac-sheet:target){
  visibility:visible; pointer-events:auto;
}
.senshi-art .ac-sheet{ display:none; }
.senshi-art .ac-sheet:target{ display:block; }
/* each cat's own colour, read off the open sheet */
.senshi-art .ac-sheets:has(#cat-chico:target){ --backbow:#c9d4e6; }
.senshi-art .ac-sheets:has(#cat-paz:target){   --backbow:#f6d8ea; }
.senshi-art .ac-sheets:has(#cat-peach:target){ --backbow:#cfe6d6; }

/* Ash: "there should be an animation... the site is retro themed so the
   shittier the better lol", then "too much smooth animation when loading a
   kitty character sheet too. retro plz."

   Six steps over 300ms still reads as a glide. Three steps over 140ms reads
   as a window being drawn - and the fade is gone entirely, because nothing in
   1998 faded. What is left is the panel appearing in three chunks. */
@keyframes ac-sheet-up{
  from{ transform:translateY(18px); }
  50%{ transform:translateY(9px); }
  to  { transform:translateY(0); }
}
.senshi-art .ac-sheet:target{ animation:ac-sheet-up .14s steps(3, end) both; }
@media (prefers-reduced-motion:reduce){
  .senshi-art .ac-sheet:target{ animation:none; }
}

/* ---- the way out ----
   Ash: "remove the button, and make it just a click that gets you off the
   page... i think you suggested that earlier."

   So the button and the band it sat in are both gone, and the whole page
   behind the sheet becomes the way out: an anchor lying over everything while
   a sheet is open, pointing back at the roster. Still a link and still no
   script, which is how the rest of this box works.

   It is fixed rather than absolute so it covers the window and not just the
   cat section - a sheet open at the top of a long page should close when you
   click anywhere, not only inside one box. */
.senshi-art .ac-scrim{
  display:none; position:fixed; inset:0; z-index:1;
  cursor:default;
}
.senshi-art .ac-select:has(.ac-sheet:target) .ac-scrim{ display:block; }

/* A scrim is a mouse answer and only a mouse answer. With no button and no
   script, this link is the one way to close the sheet from a keyboard - so it
   stays in the markup, out of sight until something focuses it, and costs the
   sheet no height. */
.senshi-art .ac-escape{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}
.senshi-art .ac-escape:focus-visible{
  position:static; width:auto; height:auto; margin:0 0 6px;
  padding:4px 12px; overflow:visible; clip-path:none;
  display:inline-block;
  border:2px solid var(--head); border-radius:999px;
  background:#fffaf0;
  font-family:rainyhearts,monospace; font-size:14px; letter-spacing:1.2px;
  text-transform:uppercase; text-decoration:none; color:#6a1535;
}
/* Ash: "remove the entire name header above status and class." With the
   heading gone the cat's sticker has nowhere to ride, so it is pinned to the
   sheet's own top right corner instead - which costs the sheet no height at
   all, where the heading cost it about forty-five pixels. */
.senshi-art .ac-sheet{ position:relative; }
.senshi-art .ac-sheet-ico{
  position:absolute; top:-6px; right:-4px; z-index:2;
  width:auto; height:42px;
  border:0; background:none; padding:0; box-shadow:none;
  pointer-events:none;
}

 /* the dotted tile runs right under these, so they get a soft plate to sit
   on - at 11px the "character sheet" label was competing with the dots. */
.senshi-art .ac-sheet-h{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 10px; padding:5px 9px 6px;
  border-radius:7px;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
}
.senshi-art .ac-sheet-nm{
  font-family:tojapan,monospace; font-size:19px; letter-spacing:2px;
  color:var(--head);
}
.senshi-art .ac-sheet-sub{
  font-family:rainyhearts,monospace; font-size:11.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:#7A6E96;
}
/* The hairlines are the grid's own gaps with the container showing through,
   not borders on the cells. Borders would need to know which cell starts a
   line, and with full-width rows mixed in that is not something nth-child can
   answer - the parity changes every time a wide row appears. A 1px gap over a
   coloured background is right whatever the layout does. */
.senshi-art .ac-sheet .ac-dl{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  background:color-mix(in srgb, var(--accent) 40%, var(--paper));
}
.senshi-art .ac-sheet .ac-row--wide{ grid-column:1 / -1; }
.senshi-art .ac-sheet .ac-row{
  border:0;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
}
.senshi-art .ac-sheet .ac-row dd{ font-size:15px; }

/* ---- ONE PICTURE EACH ----
   Ash, 27 Oct 2026: "I've decided to remove the gallery for cat pictures.
   Lets just leave it at one picture each, and shrink the cat profile card
   vertically."

   The gallery's frame, dots and radios are gone with it, and the sheet lost
   the row the frame was standing in: "trouble with" and "crimes committed"
   now sit side by side. So the open profile no longer pushes the party box
   taller than the cards.

   The cards come in a little too: a tighter gap, and the two-line
   "ascended party member" badge (Chico's, and now Paz's) closed up. The
   photos keep their 6/5 crop, the one that brought Paz's mouth back.

   The stats grid fills whatever height is left, so a short sheet never shows
   a blank band under its last row: the sheet is a column, the grid takes
   the free space, and a grid with a set height shares it out between its
   rows. The keyboard close link keeps to its own width when it shows. */
.senshi-art .ac-cat{ gap:7px; }
.senshi-art .ac-dates{ margin-bottom:3px; }
.senshi-art .ac-badge{ margin-top:5px; padding:4px 8px; line-height:1.15; }
.senshi-art .ac-sheet:target{ display:flex; flex-direction:column; }
.senshi-art .ac-sheet:target .ac-dl{ flex:1 1 auto; }
.senshi-art .ac-sheet .ac-escape:focus-visible{ align-self:flex-start; }

/* ---- ONE BOX WHEN A CAT IS OPEN ----
   Ash, 27 Oct 2026: "can the two boxes become one once opened? seems like a
   lot of deadspace."

   The opened cat's card and its sheet were two framed boxes with a 12px gap
   and two sets of padding between them. Now the sheet starts exactly where
   the card ends, the seam between them has no border, the card gives up its
   lift and its dark selected ring, and the sheet's padding matches the card's.
   One gold outline around both: the cat on the left, the stats on the right.

   The sheet's left edge is the first column's right edge, worked out the same
   way the roster's grid works it out: the width less two gaps, over three.
   The gap is 12px here and 7px under 820px, so the sum is restated there. */
.senshi-art .ac-select:has(.ac-sheet:target) .ac-sheets{
  margin-left:calc((100% - 24px) / 3); margin-bottom:14px;   /* the roster's own bottom margin, so the two halves end level */
  padding:9px 9px 9px 0;
  border-left:0; border-radius:0 10px 10px 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset -2px 0 0 rgba(255,255,255,.5),
             inset 0 -2px 0 rgba(255,255,255,.5);
}
.senshi-art .ac-sheets:has(#cat-chico:target) ~ .ac-roster .ac-cat--chico,
.senshi-art .ac-sheets:has(#cat-paz:target)   ~ .ac-roster .ac-cat--paz,
.senshi-art .ac-sheets:has(#cat-peach:target) ~ .ac-roster .ac-cat--peach{
  transform:none;
  border-right:0; border-radius:10px 0 0 10px;
  box-shadow:inset 2px 0 0 rgba(255,255,255,.55), inset 0 2px 0 rgba(255,255,255,.55),
             inset 0 -2px 0 rgba(255,255,255,.55);
}
/* the two cards behind the sheet: their drop shadows would show under it */
.senshi-art .ac-select:has(.ac-sheet:target) .ac-roster .ac-cat{ box-shadow:none; }
@media (max-width:820px){
  .senshi-art .ac-select:has(.ac-sheet:target) .ac-sheets{ margin-left:calc((100% - 14px) / 3); }
}

@media (prefers-reduced-motion:reduce){
  .senshi-art .ac-cat,
  .senshi-art .ac-cat::after{ transition:none; }
  .senshi-art .ac-cat:hover{ transform:none; }
}

.senshi-art .ac-cat--chico,
.senshi-art .ac-sheet--chico{
  --paper:#f7f9fc; --head:#48566e; --backbow:#c9d4e6; --frontbow:#e8b84a;
  --ink:#20242e; --accent:#8b6e2c;
}
.senshi-art .ac-cat--chico{
  background-color:#1f3f94;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #1f3f94 0%, #3d6aa8 52%, #8cc49a 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 16px -8px #4a6ab8;
}
.senshi-art .ac-cat--paz,
.senshi-art .ac-sheet--paz{
  --paper:#f6f3fb; --head:#14121f; --backbow:#f0d488; --frontbow:#e8b84a;
  --ink:#1b1a24; --accent:#876b2b;
}
.senshi-art .ac-cat--paz{
  background-color:#e98fc8;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #e98fc8 0%, #f6b98e 52%, #b58ad8 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 16px -8px #8a7ad0;
}
.senshi-art .ac-cat--peach,
.senshi-art .ac-sheet--peach{
  --paper:#f8f5fc; --head:#6a5a86; --backbow:#e8c25a; --frontbow:#d9679b;
  --ink:#241f2c; --accent:#ae527c;
}
.senshi-art .ac-cat--peach{
  background-color:#7cc4a0;
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"),
    linear-gradient(135deg, #7cc4a0 0%, #b9d4b0 52%, #e0d2bc 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 16px -8px #8a9a7a;
}

@media (max-width:820px){
  /* she was explicit that the three stay in a row, so they do - but a row of
     three inside a phone is 75px a card, and nothing text-shaped fits in 75px.
     So the row becomes what a select screen looks like on a small display: a
     strip of portraits you tap, with the name under each one. The status, the
     dates and the symbol all move into the sheet's territory below, which is
     full width here and is where the reading happens anyway. */
  .senshi-art .ac-roster{ gap:7px; }
  .senshi-art .ac-cat{ padding:5px; gap:6px; }
  .senshi-art .ac-card{ padding:5px 4px 4px; }
  .senshi-art .ac-name{ padding:0; min-height:0; }
  .senshi-art .ac-nm{ font-size:clamp(11px, 3.4vw, 20px); letter-spacing:1px; }
  .senshi-art .ac-badge,
  .senshi-art .ac-dates{ display:none; }
  .senshi-art .ac-sheet .ac-dl{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:820px) and (min-width:560px){
  /* there is room for the dates again before the badge would be the problem */
  .senshi-art .ac-dates{ display:flex; font-size:11px; gap:5px; }
  .senshi-art .ac-dateflank{ display:none; }
  .senshi-art .ac-sym{ width:20px; height:20px; font-size:13px; }
}

/* ==========================================================================
   377. ABOUT, MATCHED TO HER PROFILE                           (12 Oct 2026)
   ==========================================================================
   Ash, after ash.html was rebuilt: "match it."

   about.html had no CSS at all before this. Not thin, none: there was never
   an .ab-zone, .ab-h2 or .ab-placeholder rule anywhere, so the page rendered
   as browser default serif.

   It now takes ash.html's shape outright. One window, her name and moon in
   its title bar, bevelled panels inside, the moody Pixel and Planets gradient
   on the bar and the pastel six stops as the rule under each heading. Almost
   all of that is section 378's, reused rather than restated: .pp-win, .pp-bar,
   .pp-whoami, .pp-win-in, .pp-panel, .pp-h and .pp-pic are shared, so the two
   pages are one object instead of two that resemble each other.

   What is left here is only what this page has and hers does not: the intro
   block beside the portrait, and the statement of position.
   ========================================================================== */

/* ---- the intro: portrait left, standfirst and chips right ---- */
.senshi-art .pp-top--about{ grid-template-columns:200px minmax(0,1fr); }
.senshi-art .pp-intro{ min-width:0; }
.senshi-art .pp-standfirst{
  margin:0 0 14px; max-width:62ch;
  font-size:clamp(15px,1.15vw,16.5px); line-height:1.7; color:var(--ink);
}
.senshi-art .pp-chips{ display:block; margin:0; }
.senshi-art .pp-chips .c2-chip{
  display:flex; width:fit-content; max-width:100%; margin:0 0 5px;
  font-size:12.5px; line-height:1.3;
}

/* ---- the statement ----
   The only panel with its own ground. The frost doily goes one layer under
   the words, never over them, on the same slow drift as the kit frames in
   section 85 so the whole site moves at one speed. */
.senshi-art .pp-panel--creed{
  position:relative; overflow:hidden; padding:0;
}
.senshi-art .pp-panel--creed::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("images/sailormoon/select/lace/frost.png") repeat 0 0;
  background-size:256px 190px;
  opacity:.34;
  animation:kit-doily 200s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pp-panel--creed::before{ animation:none; }
}
/* ONE CENTRED COLUMN, not a wide box with short lines in it. The panel runs
   the full width of the window because that is what "large" means here, but a
   measure that long is unreadable, so the words get their own column and the
   leftover width becomes even margin rather than a ragged gutter on the right. */
.senshi-art .pp-creed-in{
  position:relative; z-index:1;
  max-width:74ch; margin:0 auto;
  padding:clamp(26px,3vw,38px) clamp(18px,3vw,34px) clamp(24px,3vw,36px);
}
.senshi-art .pp-creed-k{
  margin:0 0 7px;
  font-family:basiic,monospace; font-size:11.5px; letter-spacing:.9px;
  color:#6a1535;
}
.senshi-art .pp-creed-t{
  margin:0;
  font-family:basiic,monospace;
  font-size:clamp(26px,4.4vw,40px); line-height:1.12;
  color:var(--ink);
}
/* the Pixel and Planets gradient again, thin and dissolving, as the rule
   under the title. Same mask every other gradient divider on the site uses. */
.senshi-art .pp-creed-t::after{
  content:""; display:block; height:4px;
  margin:clamp(13px,1.6vw,17px) 0 clamp(18px,2.2vw,24px);
  background:var(--fuku-tile); background-size:320px 100%;
  -webkit-mask-image:var(--fuku-fade); mask-image:var(--fuku-fade);
}
.senshi-art .pp-creed-p{
  margin:0 0 clamp(14px,1.7vw,19px);
  font-size:clamp(16.5px,1.32vw,19px);
  line-height:1.78;
  color:var(--ink);
}
.senshi-art .pp-creed-p:first-of-type{
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.62;
  color:#6a1535;
}
.senshi-art .pp-creed-p:last-child{ margin-bottom:0; }

/* ---- the free zone keeps its dashed, unopinionated look ---- */
.senshi-art .pp-panel--free{
  min-height:200px;
  background:repeating-linear-gradient(45deg,#fdfbff 0 12px,#f7f2f6 12px 24px);
}
.senshi-art .pp-free{ font-style:italic; color:#8a7f96; }

@media (max-width:760px){
  .senshi-art .pp-creed-in{ max-width:none; }
}

/* ==========================================================================
   378. ONE WINDOW, MOODIER, AND THE P&P GRADIENT               (12 Oct 2026)
   ==========================================================================
   Ash: "keep only the magicalgirl.exe... move the natal chart to the right of
   the profile pic. frame the profile pic as it it is the window... move my
   name and the moon into the windows top bar... can't read the placements at
   all... remember when we made the outers more moody? same idea here. do you
   remember the pixel and planet gradient? use that gradient instead of the
   sailor moon fuku gradient... you should keep the cats for the cats though."

   Seven windows become one. Everything that had a title bar is now a bevelled
   panel inside 魔法少女.exe, and her name and moon sit in the only title bar
   left, which is where a window's name goes.

   MOODY, the way section 375 did it for the outers, but without the dark
   ground she turned down here: the depth moves into the title bar instead.
   index.css already defines --titlebar-gradient, wine to rose to pink, for
   the site's own dialogs. That is the moody Pixel and Planets gradient, and
   using it means this page's chrome is the site's chrome. The pastel six-stop
   --pp-* gradient drives the panel rules via --fuku-tile, set on the page.

   THE PLACEMENTS WERE 10px. Contrast was fixed last pass and they were still
   unreadable, because the problem was size, not colour: those chips were
   drawn for a dense dark sidebar. They are the main content of this panel
   now, so they are sized like it.
   ========================================================================== */

/* ---- the one window ---- */
.senshi-art .pp-win{ margin:0 0 clamp(16px,2vw,22px); }
.senshi-art .pp-win.w98-card[data-theme="pp"]{
  /* the homepage pins pp cards to 360px below 1250px, with !important,
     because its splash is a fixed three column thing. Not here. */
  width:auto !important; max-width:none !important; height:auto !important;
  margin:0 0 clamp(16px,2vw,22px) !important;
  display:flex; flex-direction:column;
}
.senshi-art .pp-win .w98-body{ height:auto !important; padding:0 !important; }
/* ---- THE WINDOW'S INNER GROUND ----
   Ash: "the box holding basically the top of the page. i think its called
   pp-win-in. try this background. i want to sample a few. here is the first
   one."

   She is sampling, so the tile is one custom property and nothing else reads
   it: swapping sample two in means changing the url on this line and dropping
   the file beside it. Nothing downstream has to move.

   128px seamless gif, eleven frames, so the ground is gently animated behind
   the panels. The panels are opaque, so what shows is the gutters between them
   and the frame around the lot - about the right dose of a pattern this busy.
   The inset shadow is what stops the panels looking like they are floating
   over a photo rather than sitting in a window. */
.senshi-art .pp-win-in{ padding:clamp(14px,1.8vw,22px); }
/* Both scoped to ash.html. about.html uses #cp and .pp-win-in too - that was
   the point of section 378, the two pages being one object - and backgrounds
   she is still sampling should not land on the other page while she decides.
   Dropping the body.ash-page prefix is how either goes site-wide later.

   Ash: "actually use the one called animatedthings.gif for background of
   cp.block... and use this one for the background of pp-win-in."

   So the loud green tile moves outward one level, to the block that wraps the
   whole window, where it shows as a 28px mat down either side of it - and the
   quiet lavender takes the inside, where it sits behind the panels. Which is
   the right way round: the busy one has a frame's worth of room to be busy in,
   and the calm one has the large area.

   Ash: "the animatedthings.gif background. Can you color shift that to match
   the pixel and planet gradient. select colors that promote the content
   sitting above it."

   animatedthings-pp.gif is that tile recoloured - her own filename plus the
   palette it now wears, with the original kept beside it. Four colours mapped
   by role onto the ramp, and the range compressed from 33 points of lightness
   to 19: the hue shift alone did not quieten it, the contrast was most of what
   made it loud. The field also sits a little deeper than the window's lavender
   interior, which is what makes the window read as lying ON the mat rather
   than being flush with it. See scripts/recolour.py for the mapping.

   images/backgrounds/winbg-1.gif is an unused duplicate of the original. */
body.ash-page #cp.block{
  --pp-blockbg:url("images/backgrounds/animatedthings-pp.gif");
  background-image:var(--pp-blockbg);
  background-repeat:repeat;
  background-size:128px 128px;
}
body.ash-page .senshi-art .pp-win-in{
  --pp-winbg:url("images/backgrounds/winbg-lavender.gif");
  background-image:var(--pp-winbg);
  background-repeat:repeat;
  background-size:150px 150px;
  box-shadow:inset 0 0 0 1px rgba(90,50,104,.12);
}

/* ---- the title bar, with her name in it ----
   Ash: "use the pixel and planet gradient for the top of the windows boxes."

   So the moody rose ramp comes off the title bars and the site's own six stop
   pastel goes on, the same one the panel headings and the blank zone use. The
   bar is the lightest thing on the page now, which means the white title text
   had to go with it: white on #e8c0c8 is 1.6:1 and unreadable. The ink is the
   deep purple the headings use, measured at 6.9:1 against the darkest stop of
   the ramp and better than that everywhere else along it.

   The highlight shadow flips too - a dark drop under white text becomes a
   white lift under dark text, which is what gives the engraved look on a pale
   bar rather than the embossed one. */
/* The ramp is set as --titlebar-gradient rather than as a background, because
   index.css defines that property globally (wine to rose to pink) and the w98
   card reads it in more than one place. Overriding only .pp-bar's background
   left the var still resolving to the old rose everywhere else - and, worse,
   left this bar rose with the new dark text on it, which is the one
   combination that is actually unreadable. Redefining the property fixes the
   bar and anything else downstream of it in one move. */
/* --pp-bar is the PROFILE's own six stops, written onto the block by
   pp_profile from its palette. Ash: "the gradient needs to be incooporated
   into w98-titlebar w98-bevel pp-bar pp-bar--sub... this is part of the
   template and is part of when we create a profile." The fallback is the
   Pixel & Planets set, so her page and anything not yet carrying a palette
   keep exactly what they have. */
.senshi-art .pp-win,
.senshi-art .pp-win--me{
  --titlebar-gradient:var(--pp-bar, linear-gradient(90deg,#e8c0c8,#C7C4D9,#f6ebbe,#f2c0bf,#f5f4d6,#FFFFFA));
}
.senshi-art .pp-bar{
  background:var(--titlebar-gradient);
  gap:12px;
}
.senshi-art .pp-bar .w98-title{
  color:var(--pp-bar-ink, #4a2a5c); text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.senshi-art .pp-bar .w98-title-icon{ color:#8d2149; }
.senshi-art .pp-whoami{
  margin:0 0 0 auto; padding:0 10px;
  font-family:basiic,monospace; font-size:14px; line-height:1;
  color:#4a2a5c; text-shadow:0 1px 0 rgba(255,255,255,.65);
  white-space:nowrap;
}
.senshi-art .pp-bar .w98-ctl{
  color:#3a2448;
  border-color:rgba(74,42,92,.45);
  background:rgba(255,255,255,.45);
}

/* ---- ash.sav: the second window, around the portrait ----
   Ash: "another window around the pfp, and add my stats below the pfp inside
   this window."

   Same construction as the outer window so the two read as one system, but
   the title bar is shorter and quieter: it is a window inside a window, and
   two bars of equal weight would fight. No pp-whoami on it either - the name
   is already in the bar above it.

   The window fills the left column, and the portrait sits inside it at its
   own size rather than the column's, which is why pp-pic loses its width
   here. */
/* min-width:0 the whole way down. A grid or flex item defaults to
   min-width:auto, which is its min-CONTENT width - so one nowrap string deep
   inside (the player's track title) set a floor that the 300px column could
   not hold, and the left column grew until it sat under the chart. Every link
   in the chain has to opt out, not just the outermost one. */
.senshi-art .pp-win--me{ margin:0 !important; min-width:0; max-width:100%; }
.senshi-art .pp-win--me.w98-card[data-theme="pp"]{
  margin:0 !important; min-width:0; max-width:100% !important;
}
.senshi-art .pp-win--me .w98-body,
.senshi-art .pp-win--me .w98-titlebar{ min-width:0; }
/* the inner bar is about 300px, a third of the outer one, so it takes the
   folded run rather than trying to fit eleven stops into it. Falls back to
   the full one, so a profile that provides no small variant is unchanged. */
.senshi-art .pp-bar--sub{
  min-height:0; padding-top:3px; padding-bottom:3px;
  background:var(--pp-bar-sm, var(--titlebar-gradient));
}
.senshi-art .pp-bar--sub .w98-title{ font-size:13px; }
.senshi-art .pp-me-body{
  min-width:0;
  padding:10px 10px 11px !important;
  background:var(--pp-paper,#FFFFFA);
}
/* Ash: "scratch that last request to close the gap. move the music player
   there." So the margin under the picture stays - the player lives in it. */
.senshi-art .pp-me-body .pp-pic{
  width:auto; padding:0; margin:0 0 10px; background:none;
}
/* capped, because the column is not. When .pp-row--id collapses to one
   column the window goes full width, and an unbounded max-width took the
   180x180 source up to 776px - a 4.3x upscale. 300 is the ceiling. */
.senshi-art .pp-me-body .pp-pic img{ max-width:min(100%, 300px); }

/* ---- the stat block, under the portrait ----
   The cats' grid, reused: a tinted label band, the value on paper below, one
   frame around the lot, hairlines between. Same object, so her card and the
   cats' cards are the same kind of thing - which is the joke.

   SNES means the label row, not a filter: the pixel face, hard uppercase, a
   1px inner highlight so each band looks stamped rather than printed. */
.senshi-art .me-dl{
  margin:0; overflow:hidden;
  border:2px solid color-mix(in srgb, var(--head) 42%, var(--paper));
  border-radius:7px;
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),
             0 2px 7px -5px rgba(26,20,32,.4);
}
.senshi-art .me-row{
  display:block;
  border-top:1px solid color-mix(in srgb, var(--head) 26%, var(--paper));
}
.senshi-art .me-row:first-child{ border-top:0; }
/* Ash: "put the senshi glyphs back into the placements box." The label band is
   a flex row now so the glyph sits beside the name rather than on a line of
   its own. 20px, the size the chips drew them at, which is also their native
   size - the band grows to take them rather than the other way round. */
.senshi-art .me-g{
  display:inline-block; width:20px; height:20px; flex:0 0 auto;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}
.senshi-art .me-g--uni{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1;
  color:color-mix(in srgb, var(--head) 86%, #120d18);
  image-rendering:auto;
}
/* Ash: "use the pink zodiac glyph set for the rising sign." 16px artwork in a
   20px slot, centred rather than stretched - see the builder for why. */
.senshi-art .me-g--zod{
  width:20px; height:20px;
  object-fit:none;              /* draw it at 16px, do not scale to the box */
  object-position:center;
}
/* Ash: "The sun glyph. too bronze and needs to look the same size as the
   moon." It was #a8801f at 15px beside a 20px moon sprite - darker, smaller,
   and clearly not from the same set.

   It is now built the way the moon sprite is drawn: a bright yellow face with
   a dark outline. The outline is doing two jobs - it matches the sprite, and
   it is what lets a yellow this bright sit on a pale label band at all.
   It is DRAWN, not typed. Scaling the character up to match the moon took 33px
   of type to ink a 20px disc, and a 33px em box does not fit a 20px slot - so
   it was clipped on the left and the top, which is what Ash saw. Making the
   slot bigger instead would have pushed the name along.

   Two pseudo-elements get it exactly right with no font metrics involved: a
   ring for the disc, a dot for the centre. 20x20 by construction, matching the
   moon sprite beside it, and it cannot be clipped because nothing overflows.
   It also stops depending on how any given platform draws U+2609. */
.senshi-art .me-g--sun{
  position:relative; overflow:visible;
  width:20px; height:20px;
  font-size:0;                 /* the character itself is not drawn */
}
.senshi-art .me-g--sun::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background:#fbe14a;
  box-shadow:inset 0 0 0 2px #1d1407;
}
.senshi-art .me-g--sun::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:#1d1407;
}
.senshi-art .me-k{ min-width:0; }
.senshi-art .me-row dt{
  display:flex; align-items:center; gap:7px;
  margin:0; padding:3px 9px 2px;
  background:color-mix(in srgb, var(--head) 20%, var(--paper));
  border-bottom:1px solid color-mix(in srgb, var(--head) 30%, var(--paper));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  font-family:rainyhearts,monospace; font-size:10.5px; letter-spacing:1.3px;
  line-height:1.35; text-transform:uppercase;
  color:color-mix(in srgb, var(--head) 86%, #120d18);
}
.senshi-art .me-row dd{
  margin:0; padding:6px 9px 7px;
  font-size:14px; line-height:1.45; color:var(--ink);
}
/* Ash: "turn it into the placements box... so the placements are in a column."
   The box keeps its shape exactly; only what is in it changed. The three-birth-
   data rule that used to highlight the top of this list is gone with the stats
   - every row here is the same kind of thing now, a body and where it is.

   No heading on it either. Ash: "drop this text: placements / whole sign
   houses, Virgo rising", and "close the gap between the rising and the pfp" -
   so the first label band now butts straight up under the picture. */
/* the degree is the part worth reading twice, so it gets the weight */
.senshi-art .me-row dd{ font-variant-numeric:tabular-nums; }
.senshi-art .me-r{
  display:inline-block; margin-left:5px; padding:0 3px;
  border:1px solid rgba(138,35,56,.45); border-radius:3px;
  font-size:9.5px; line-height:1.5; color:#8d2149;
  vertical-align:1px;
}

/* ---- the two rows ----
   Ash: "adjust the layout of the profile page to get rid of the dead space.
   the profile pic can be slightly bigger... basics can move up tucked under
   pfp. placements... can they be to the right of the chart?"

   Measured first. The usable width inside the window is 887px, and the wheel
   is an SVG whose text is 15px inside an 848 viewBox, so its house numbers
   render at 15 * width / 848. Three columns in one row leaves the wheel 361px
   and the numbers 6.4px, which is not readable. Two rows keeps the wheel at
   450 and still puts the placements beside it.

   The old layout wasted about 780px of height: a 200px picture sitting beside
   a 471px wheel, and a 350px placements panel beside an 863px basics panel.
   Pairing the short things with the short things is what fixes it. */
.senshi-art .pp-row{
  display:grid; gap:clamp(14px,2vw,20px);
  align-items:start;
  margin:0 0 clamp(14px,1.8vw,20px);
}
/* the portrait and the wheel share the top row; the placements run full
   width underneath, which is where the basics panel used to sit */
/* ---- ONE BOX FOR THE TOP ----
   Ash: "the pfp and the stats. place them inside the same box as the chart.
   pfp left chart rigt... stats below pfp... and blank space for profile
   paragraph below chart with doily background", then "move the placements up
   near the chart as well, and adjust the size to make it fit neatly tucked in
   somewhere."

   Two columns and a full-width footer. The left track is 300px because that is
   what .pp-pic is actually drawn at - it used to be 250, and max-width then
   squeezed the 300px frame down while the image kept its hard height:270px, so
   the picture rendered 224x270 and Ash saw it stretched. The right track takes
   what is left, which is where the wheel wants to be anyway.

   The blank zone spans both because she is putting stickers in it, and a
   sticker field wants to be a field. */
/* Ash: "the doily background inside the chart wheel, and the same one inside
   the profile paragraph box... remove it, and move it out one box... the box
   holding the box with the chart."

   So the lace over the Pixel and Planets ramp comes off .pp-wheel and .pp-zone
   and goes here, on the panel that holds both of them plus the portrait window
   and the placements. Everything inside is plain paper now, which makes them
   all read as cards lying on one patterned ground - the same arrangement the
   recipe box uses, and the reason that one works.

   It also stops the pattern being drawn twice at two different scales in two
   boxes a few pixels apart, which is what it was doing. */
/* .pp-panel.pp-idbox, not .pp-idbox: .pp-panel is declared further down this
   section with a `background:` SHORTHAND, which resets background-image to
   none. Same specificity, later rule, so the doily silently vanished. The
   extra class outweighs it. */
.senshi-art .pp-panel.pp-idbox{
  padding:clamp(12px,1.5vw,18px);
  background-color:#f4f2fa;
  /* Ash: "match the doily background to the gradient as well." The six P&P
     stops were baked in here, so EVERY profile wore her page's gradient
     whatever palette it had been assigned. They are the fallback now and a
     profile sets --pp-doily to its own. pp_profile writes it onto the box from
     the palette the thread carries, so a new profile brings its gradient with
     it rather than needing a rule in here. */
  background-image:url("images/sailormoon/select/lace/frost-alpha.png"),
    var(--pp-doily, linear-gradient(118deg,#e8c0c8,#C7C4D9,#f6ebbe,#f2c0bf,#f5f4d6,#FFFFFA));
  /* the 98 frame. index.css hangs .w98-bevel-inset on --bevel-hi/--bevel-lo,
     which are only set on .w98-card[data-theme="pp"] - an ancestor her page
     happens to have and another profile does not, which is why the box had a
     frame on hers and no frame at all anywhere else. Set here, from the
     profile's own palette, so the frame is part of the template. */
  --bevel-hi:var(--pp-bevel-hi, #f5f4d6);
  --bevel-lo:var(--pp-bevel-lo, #e8c0c8);
  background-size:256px 190px, cover;
  background-repeat:repeat, no-repeat;
  animation:ac-doily 190s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pp-panel.pp-idbox{ animation:none; }
}
/* Ash: "make the height match the bottom of the placements box." align-items
   has to be stretch, not start, or the right column only ever grows as tall as
   its own contents and nothing inside it can reach the left column's bottom.
   The columns are flex so the last box in the right one can take the slack. */
.senshi-art .pp-idgrid{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:clamp(12px,1.6vw,18px); align-items:stretch;
}
.senshi-art .pp-idcol{
  min-width:0; display:flex; flex-direction:column; gap:12px;
}
/* the merged basics-and-paragraph box is what absorbs the difference */
.senshi-art .pp-idcol--r > .pp-places--stats{ flex:1 1 auto; }
.senshi-art .pp-places--stats{ display:flex; flex-direction:column; }
.senshi-art .pp-row--id{ grid-template-columns:300px minmax(0,1fr); }
.senshi-art .pp-row > .pp-panel{ margin:0; }

/* "frame the profile pic as if it is the window": the picture takes the same
   bevel the window frame uses, so it reads as a pane rather than a photo
   dropped on the paper. Bigger, as asked - though splashpfp.jpg is 180x180,
   so 210 is a 1.17x upscale and about as far as it goes before it softens. */
.senshi-art .pp-pic{
  margin:0; padding:13px; width:300px; max-width:100%;
  background:var(--pp-paper,#FFFFFA);
}
/* width and height both fixed is what distorted it: when the frame narrowed,
   max-width shrank the width and nothing shrank the height. aspect-ratio with
   height:auto means the picture can only ever get smaller squarely. */
.senshi-art .pp-pic img{
  display:block; width:100%; height:auto; max-width:274px;
  aspect-ratio:1 / 1; object-fit:cover;
  margin:0 auto;
  image-rendering:auto;
}
/* ---- THE ROW ABOVE THE CHART ----
   Ash: "cut the width of the music player in half, making room for me to put
   something else in... move the player all the way to the right."

   Two equal cells. The left one is hers and is left deliberately empty with a
   faint note saying so, the same way the big zone below is; the player takes
   the right one and sits hard against that edge. Equal halves rather than a
   float, so whatever she drops in on the left cannot shove the player around.

   The player's own grid re-flows on its own at this width - the dancer still
   spans both rows, the title ellipses - so nothing here has to know about its
   internals. */
.senshi-art .pp-toprow{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px; align-items:stretch;
}
/* the player moved into ash.sav, so the slot she is saving has this row to
   itself and may as well have all of it */
.senshi-art .pp-toprow--solo{ grid-template-columns:minmax(0,1fr); }
.senshi-art .pp-slot{
  display:flex; align-items:flex-start;
  padding:10px 12px; min-height:0;
  border:1px dashed color-mix(in srgb, var(--accent) 46%, var(--paper));
  border-radius:9px;
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,.40) 0 9px, rgba(255,255,255,.14) 9px 18px);
}
.senshi-art .pp-slot-note{
  margin:0; font-family:rainyhearts,monospace; font-size:11.5px;
  letter-spacing:.9px; color:rgba(90,50,104,.5);
  white-space:nowrap;   /* or it wraps the closing bracket onto its own line */
}
@container (max-width:430px){
  .senshi-art .pp-toprow{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px){
  .senshi-art .pp-toprow{ grid-template-columns:minmax(0,1fr); }
}

/* ---- THE PLACEMENTS, TUCKED UNDER THE CHART ----
   Ash: "move the placements up near the chart as well, and adjust the size to
   make it fit neatly tucked in somewhere."

   They used to be a full-width panel of their own below everything. Now they
   are a block inside the box, in the right column under the wheel, and they
   have to fit a column rather than a page - so two tighter columns of chips
   instead of three roomy ones, and a smaller heading. The chips keep the
   14-15px value size they were fixed at when Ash could not read them; what
   shrinks is the padding and the gaps, not the type. */
.senshi-art .pp-places{
  padding:11px 12px 12px;
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--paper));
  border-radius:9px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.senshi-art .pp-h--tight{ margin:0 0 7px; font-size:12px; }
.senshi-art .pp-h--tight::after{ height:3px; margin-top:6px; }
.senshi-art .pp-places .nk-chart-h{
  margin:0 0 9px; font-size:11.5px; letter-spacing:.5px; color:#7A6E96;
}
/* Two columns, fixed, not auto-fill. auto-fill at a 165px minimum fitted
   THREE tracks into the 530px column, and a chip needs about 210px to lay
   "Sagittarius 28°35'" beside its label - so the chips overflowed their cells
   and printed on top of each other. The shrink has to come out of the padding
   and the glyph, not out of the column count. */
.senshi-art .nk-signs--tight{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2px 10px; margin:0;
}
/* When to drop to one column is a question about the BOX, not the window: the
   placements are 530px wide at a 1280 viewport and 530px again at 1000, so a
   viewport media query gets it wrong in both directions. A container query
   asks the only thing that matters - how wide is this box - and the viewport
   fallback below catches browsers without them. */
.senshi-art .pp-places{ container-type:inline-size; }
@container (max-width:430px){
  .senshi-art .nk-signs--tight{ grid-template-columns:minmax(0,1fr); }
}
@supports not (container-type: inline-size){
  @media (max-width:620px){
    .senshi-art .nk-signs--tight{ grid-template-columns:minmax(0,1fr); }
  }
}
/* Ash: "shrink the placements". The chrome shrinks and the readable part does
   not: padding, gaps and the glyph come down, the sign and the degree stay at
   13-14px. They were once drawn at 10px for a dark sidebar and Ash could not
   read them at all - "can't read the placements" - so the type size is the one
   dimension here that is not available for tightening. */
.senshi-art .pp-places .nk-chip{
  padding:3px 5px; gap:5px; min-height:0; min-width:0;
  justify-content:space-between;
}
/* Ash: "use the old placements box for the stats." A stat has no planet, so
   there is no glyph column to align to - the label takes the place the body
   name had, and the value runs to the right edge the way a sign and degree
   did. Same chip, same rhythm, different contents. */
.senshi-art .nk-chip--stat{ align-items:baseline; }
.senshi-art .nk-chip--stat .nk-body{
  min-width:0; flex:0 0 auto; padding-right:10px;
}
.senshi-art .nk-chip--stat .nk-sign{
  flex:1 1 auto; text-align:right; min-width:0;
}
/* the four she has not written yet read as empty, not as values */
.senshi-art .nk-chip--stat .nk-sign:not(:has(*)){ color:inherit; }
.senshi-art .pp-places--stats .nk-chip .nk-sign{ font-size:13.5px; }
.senshi-art .pp-places .nk-chip > *{ min-width:0; }
.senshi-art .pp-places .nk-chip .nk-body{ font-size:12.5px; min-width:58px; }
.senshi-art .pp-places .nk-chip .nk-sign{ font-size:13.5px; }
.senshi-art .pp-places .nk-chip .nk-deg{ font-size:13px; }
.senshi-art .pp-places .nk-chip .nk-g{ width:18px; height:18px; }
.senshi-art .pp-places{ padding:9px 10px 10px; }

/* ---- THE BLANK ZONE ----
   Ash: "blank space for profile paragraph below chart with doily background
   (pixelandplanet fuku gradient lol (i know there isn't a fuku but i'm calling
   it that lol))" and "I'll add stickers to my own page for fun."

   Named .pp-zone, not .pp-free: about.html already has a .pp-free and it is a
   different thing (an italic grey placeholder line), so reusing the name would
   have quietly italicised this one.

   So: the site's lace over the six-stop Pixel and Planets ramp, scrolling the
   way every other doily on the site does, and nothing in it but one faint line
   saying what it is for. position:relative and a generous min-height because
   the stickers she is going to drop in here will want somewhere to be
   absolutely positioned against. */
/* Ash: "move the profile paragraph box under the basics box and merge the
   two." So it loses its own border and background and becomes the lower half
   of the basics box - one card, a hairline across it, the chips above and her
   field below. It keeps position:relative and a min-height because that is
   what the stickers will be placed against.

   flex:1 is what carries "make the height match the bottom of the placements
   box": the field takes whatever height is left after the chips, and the box
   above it is already stretching to the row. */
.senshi-art .pp-zone{
  position:relative; overflow:hidden;
  flex:1 1 auto;
  margin:11px 0 0; padding:12px 2px 2px;
  min-height:120px;
  border:0; border-top:1px solid color-mix(in srgb, var(--accent) 34%, var(--paper));
  border-radius:0;
  background:none;
  box-shadow:none;
}
.senshi-art .pp-zone-note{
  margin:0; font-family:rainyhearts,monospace; font-size:12.5px;
  letter-spacing:.8px; color:rgba(90,50,104,.5);
}


/* ---- THE CHART, FRAMED ----
   Ash: "frame the chart. give it a darker background... maybe the one we had
   before the purple one?"

   So the wheel stops floating on the paper and gets a mat: a dark ground, an
   inset bevel to match the window it sits in, and a gold hairline the same
   weight the cat cards use. The wheel's own field stays cream, so the dark
   reads as the card the chart is printed on rather than as a change to the
   chart.

   The ground is one custom property, --pp-wheelbg, so swapping which dark it
   is costs one line rather than a rebuild. */
/* Ash: "the chart background... switch it with the gradient doily pattern
   that is being used for the profile paragraph box."

   So the dark indigo and its starfield come off and the lace over the Pixel
   and Planets ramp goes on - the same two layers, the same 190s scroll and the
   same stops as .pp-zone below, so the top of the page and the bottom of it
   are one material.

   The wheel's own field is cream, which used to read as a card lying on a
   night sky and now reads as a card lying on patterned paper. That is the
   change; everything inside the rim is untouched. The ASC and DSC labels are
   the one thing that had to move with it - they sit OUTSIDE the rim, on this
   ground, and they were light text with a dark halo built for the dark panel.
   See build_ash_wheel.py. */
/* Plain paper, because the doily moved out to .pp-idbox. The wheel's own field
   is cream and sits inside this, so the card is a shade cooler than the field -
   enough that the rim of the wheel still reads against it. */
.senshi-art .pp-wheel{
  margin:0 auto; max-width:100%;
  position:relative; overflow:hidden;
  padding:clamp(10px,1.4vw,18px);
  background:#fdfbf4;
  border:1px solid #c9a24e; border-radius:10px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),
             0 3px 12px -7px rgba(90,50,104,.45);
}
.senshi-art .pp-wheel .nkw-svg{
  position:relative; z-index:1;
  display:block; width:100%; height:auto;
  max-width:470px; margin:0 auto;
}


/* ---- the panels inside the window ---- */
.senshi-art .pp-panel{
  padding:clamp(12px,1.5vw,18px);
  margin:0 0 clamp(14px,1.8vw,20px);
  background:var(--pp-paper,#FFFFFA);
}
.senshi-art .pp-panel:last-child{ margin-bottom:0; }
.senshi-art .pp-h{
  margin:0 0 12px;
  font-family:basiic,monospace; font-size:13px; letter-spacing:.6px;
  color:#5A3268;
}
/* The Pixel and Planets gradient as the rule under every panel heading, and
   Ash: "i want to see the gradient animated like the senshi rpofiles do."
   Same declaration they use: fuku-scroll, 4s, steps(48) so it ticks across in
   pixel jumps rather than sliding smoothly. The tile is 320px wide and the
   keyframes travel exactly 320px, so the loop has no seam. */
/* Ash: "i hear you say fuku scroll. make sure whatever you call it, it's
   part of the profile template." It was borrowing keyframes defined up in the
   senshi sections - a name from the fuku, and a dependency on markup that has
   nothing to do with a profile. The template declares its own now, under its
   own name, and the senshi pages keep theirs untouched. */
@keyframes pp-rule-scroll{
  from{ background-position:0 0; }
  to  { background-position:320px 0; }
}
/* ONE NUMBER DRIVES BOTH DIVIDERS. Ash: "the gradient bar divider is barely
   noticable. please make bigger." It was 4px in two separate places, which is
   two places to forget. --pp-rule-h is the template's dial: set it once on a
   profile and every divider on that profile follows. */
.senshi-art .pp-h::after{
  content:""; display:block; height:var(--pp-rule-h,11px); margin-top:8px;
  border-radius:2px;
  /* a profile that brings a palette brings its own tile with it; the fuku
     one is the fallback, so her page and anything without a palette are
     unchanged. This is the template half of Ash's "it will be part of the
     template for other profiles... using the gradient we create for them". */
  background:var(--pp-rule, var(--fuku-tile)); background-size:320px 100%;
  -webkit-mask-image:var(--fuku-fade); mask-image:var(--fuku-fade);
  animation:pp-rule-scroll 4s steps(48, end) infinite;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pp-h::after{ animation:none; }
}

/* ---- THE PAGE BACKGROUND ----
   Ash: "the background for the entire page should still be the slow scrolling
   glyphs... it's green grid paper rn."

   Correct, and here is why. index.css gives body.--post the bg7 tile with
   !important - that is the green grid. The senshi pages get out of it because
   senshi.css re-states the homepage glyph tile for body.--senshi, later in the
   cascade and also !important. These two pages are --post but not --senshi, so
   they kept bg7. Same escape hatch, same declarations, their own classes.

   The longhands matter: the `background` shorthand resets background-position
   every frame and the animation never wins. attachment must be `scroll`, not
   `fixed`, or the position is pinned to the viewport and nothing moves. */
/* Ash: "the background of the main body of the page is that green grid.
   please use our normal glyphs background. i have no plans on that ever
   changing for any page. it's consistant across the site."
   So this stops being a LIST of pages that escape the green grid and becomes
   the default for every --post page. Naoko's page was --post but neither
   --senshi nor named here, which is the only reason it kept bg7; the next
   page built would have hit the same thing. The two class names stay on the
   selector because they cost nothing and say who asked first. */
body.--post,
body.ash-page,
body.about-page{
  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.--post, body.ash-page, body.about-page{ animation:none !important; }
}
@media (max-width:1249px){
  body.ash-page, body.about-page{ animation:none !important; }
}

/* ---- READABLE. The chips were 10px on a dark sidebar; here they carry the
   chart, so they are sized to be read. ---- */
.senshi-art .pp-panel .nk-chart-h{ margin:0 0 12px; font-size:14px; color:#5A3268; }
/* Full width now, so the chips can run three across again. At 887px each
   column is about 280, which fits a glyph, a planet name, "Sagittarius" and a
   degree without the sign and the degree colliding - the thing that forced a
   single column when this panel was only 420 wide. */
.senshi-art .pp-panel--places .nk-signs{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  margin:0; gap:0 18px;
}
@media (max-width:860px){
  .senshi-art .pp-panel--places .nk-signs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px){
  .senshi-art .pp-panel--places .nk-signs{ grid-template-columns:minmax(0,1fr); }
}
.senshi-art .pp-panel .nk-chip{
  padding:7px 4px;
  border-color:rgba(90,50,104,.16);
}
.senshi-art .pp-panel .nk-chip .nk-body{ font-size:14px; color:#5A3268; }
.senshi-art .pp-panel .nk-chip .nk-sign{ font-size:15px; color:#2e2838; }
.senshi-art .pp-panel .nk-chip .nk-deg{ font-size:14px; color:#6a1535; }
.senshi-art .pp-panel .nk-chip .nk-g{ width:20px; height:20px; }
.senshi-art .pp-panel .nk-chip .nk-r{ color:#8a2338; border-color:rgba(138,35,56,.45); }

.senshi-art .pp-panel .nk-stats{ margin:0; }
.senshi-art .pp-panel .nk-stats .ass-row{
  grid-template-columns:94px minmax(0,1fr); gap:9px;
}
.senshi-art .pp-panel .nk-stats .ass-row dt{ color:#7A6E96; font-size:13px; }
.senshi-art .pp-panel .nk-stats .ass-row dd{ color:#2e2838; font-size:14.5px; }

.senshi-art .pp-panel .nk-led-h{ color:#5A3268; }
.senshi-art .pp-panel .nk-led-what{ color:#2e2838; }
.senshi-art .pp-panel .nk-led-why,
.senshi-art .pp-panel .nk-led-use,
.senshi-art .pp-panel .nk-led-foot,
.senshi-art .pp-panel .nk-rodden-t{ color:#3a3448; }
.senshi-art .pp-panel .nk-ledger{ margin:0; }
/* ==========================================================================
   THE RECIPE BOX
   ==========================================================================
   Ash: "make a duplicate junk drawer above it, and turn it into a recipe
   select box... you can resize this box larger for what's going inside.
   selector scroll on left. window displaying recipe on right. (this is all
   inside the new box). add a button to open a pop-up printable version of the
   recipe. one pagers only. use these for box decor."

   It IS the junk drawer's panel - same panel() call, same bevel - widened and
   given a two column inside. The selector is radios and CSS, exactly like the
   cats' character select, so choosing a recipe needs no JavaScript; the only
   script is the print window, and the box is complete without it.
   ========================================================================== */
/* position:relative and overflow visible, because the sticker hangs off the
   bottom right corner and a clipped sticker is just a crop.

   Ash: "background for recipe box." A 100px gingham tile, its own custom
   property so swapping it is one line like the others. It goes on the panel
   itself rather than on anything inside, so the scroll column and the recipe
   window - both of which have their own opaque grounds - sit on it the way
   cards sit on a tablecloth. */
.senshi-art .pp-panel--recipes{
  --pp-recipebg:url("images/backgrounds/recipebg.gif");
  --pp-recipepaper:url("images/backgrounds/recipepaper.png");
  position:relative; overflow:visible;
  padding:clamp(14px,1.8vw,20px);
  background-image:var(--pp-recipebg);
  background-repeat:repeat;
  background-size:100px 100px;
}
.senshi-art .pp-panel--recipes .pp-h{ font-size:15px; }
.senshi-art .rb{ position:relative; }
/* The lane at the foot of the box.
   The print button used to be down here and it was what held the box open
   below the grid - the two corner stickers hang into that strip, and the
   contents column reserves space so nothing of its own runs under the "Let's
   Cooking" girl. Ash moved the button up into the contents column, which took
   the strip away with it: the stickers rose about 60px and landed on the
   stove gifs. The strip is a padding now rather than a side effect of a
   button being there, so the stickers keep their lane and the column's
   reserve can come down instead of up. */
/* ...AND THEN THE LANE WENT TO THE BOXES. Ash: "the div class rb-scroll and
   rb-win extend them down to the bottom of section box. keep the padding on
   the bottom. I just want these boxes taller.. this should also float the
   stickers down too. it's okay if the bottom of the stickers looks like its
   overflowing into the junk drawer." So the 92px is the GRID's now - see
   .rb-grid's height - the two columns run to the panel's bottom padding, and
   the three stickers keep their old distance from the grid's foot by moving
   down the same 92: their bottom offsets go negative by exactly the lane
   they used to stand in. */
.senshi-art .rb{ padding-bottom:0; }

.senshi-art .rb-radio{
  position:absolute; width:1px; height:1px; margin:0;
  opacity:0; pointer-events:none;
}
/* 270px: the column has to hold a 174px girl and a 64px pot side by side at
   their own sizes, and nothing narrower can do that without shrinking one of
   them. The window beside it gives up the difference and is still much the
   wider track. */
/* Ash: "I want the contents of the box to sit within the height of the screen
   window... so someone can see all the recipies to scroll through, and see the
   whole recipe on the right... no scrolling the entire page up and down to
   read."

   So the box is capped to the viewport and the scrolling happens INSIDE it:
   the contents column scrolls, the recipe scrolls, and the page does not move
   under you while you read. 78vh leaves the panel heading, the print button
   and a little air inside a laptop screen; min() keeps it from collapsing to
   nothing on a short window, and the cap is lifted entirely below 760px where
   a phone is one column and a tall page is the normal way to read. */
.senshi-art .rb-grid{
  display:grid; grid-template-columns:270px minmax(0,1fr);
  gap:14px; align-items:stretch;
  /* + 92px: the lane the stickers hung in under the grid, folded into the
     grid itself. Ash: "I just want these boxes taller." See .rb above. */
  height:calc(min(78vh, 760px) + 92px); min-height:430px;
  /* the corner sticker hangs off this, outside the window that scrolls */
  position:relative;
}
/* both columns are the grid's height and scroll their own contents. The
   recipe window's own overflow is set on its main rule further down. */
.senshi-art .rb-scroll,
.senshi-art .rb-win{ min-height:0; }

/* ---- the pair, inside the column ----
   Ash: "put the recipie box and the gif next to it inside the recipe select
   box. grow the selctor box taller."

   The box gif has since moved down to stand beside the pot - Ash: "move the
   recipe box below... to the left of the soup" - so this holds the spaghetti
   pair alone. The wrapper stays because it is what centres it and gives it its
   spacing, and because a second image may well come back here. */
/* Ash: "the recipe box image. move it up to the header text that actually says
   recipe box", then "oops you moved the wrong .gif... I'm talking about THIS
   image" - the pink recipe box, not the cooking pair. So the box rides in the
   heading and the pair goes back to the top of the contents column.

   The heading line is ~20px and the box is 100px, so the art overhangs the
   line rather than making the heading a 100px band: the words sit against the
   bottom of it, the way a shop sign sits under its picture. */
.senshi-art .pp-h--ico{
  display:flex; align-items:flex-end; gap:10px;
  min-height:0;
}
.senshi-art .pp-h--ico .rb-boxico{
  display:block; width:100px; height:100px; flex:0 0 auto;
  margin-bottom:-4px;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}
.senshi-art .rb-icons{
  display:flex; flex-direction:column; align-items:center;
  gap:4px; margin:0 0 8px; flex:0 0 auto;
}
.senshi-art .rb-pair{
  display:block; width:201px; height:119px; flex:0 0 auto;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}

/* ---- the scroll on the left ----
   A real scroll: it is capped in height and overflows, so a long list of
   recipes scrolls inside the box rather than making the box taller and
   taller. The cap is in the same units as the window beside it so the two
   columns stay the same height as each other. */
/* Opaque, not the 92% it was. With the gingham behind the panel a translucent
   column let the tablecloth through and the card stopped reading as a card -
   the window beside it is solid, and the two have to match or the box looks
   half finished.

   Ash: "another background. chose to use it or not." Used, here and on the
   recipe window: the panel is a gingham tablecloth, and the two things lying
   on it are paper. That is a story the box can tell, where gingham-on-gingham
   or paper-everywhere is just two textures. It also gets the frost lace out of
   the recipe window - that is the cats' material, borrowed for want of
   anything better, and this is better. */
/* The bottom 120px of this column is reserved, not empty by accident: the left
   corner sticker hangs there, and she reaches about 140px above the panel's
   bottom edge. Without the reserve the stove sat in the same corner and she
   landed straight on the pot.

   margin-bottom:auto on the stove could not fix it on its own - the column is
   exactly as tall as its content, so there was no free space for an auto
   margin to absorb. Reserving the space is what actually moves the stove up.
   The reserve is dropped below 760px, where she is hidden anyway. */
.senshi-art .rb-scroll{
  display:flex; flex-direction:column; min-width:0;
  /* The COLUMN does not scroll - .rb-toc inside it does. If the column
     scrolled, its last 120px of padding would scroll with it and the contents
     would run under the corner sticker that the padding is reserving space
     for. With the scroller one level in, the heading, the stove and the
     sticker's reserve stay put and only the courses move. */
  /* 92px, not 120px: the actions row has moved up into this column, so the
     box has a clear lane at its bottom again (see .rb's padding-bottom) and
     the "Let's Cooking" girl hangs in THAT rather than this far up. Ash:
     "decreasee the padding between the .gifs height below it to make room." */
  /* 150px, not 58: the column grew 92px taller when the lane under the grid
     was folded into it, and Ash: "rb-toc keep the same height and keep the
     button under it. this should make more room for the stickers." The
     contents box is flex:1 1 auto, so the only way it keeps its height in a
     taller column is for the column's bottom reserve to take the whole 92 -
     which is the room the girl and the pot now stand in, inside the box
     instead of hanging under it. */
  padding:10px 10px 150px;
  border:1px solid #c9a24e;
  border-radius:9px;
  background-color:#fffaf0;
  background-image:var(--pp-recipepaper);
  background-size:150px 150px; background-repeat:repeat;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
/* Ash: "move the images around to different spots so they don't shrink... no
   shrinking." All three decor sprites are at their own pixel size now, and the
   layout is what moved to accommodate them rather than the other way round.

   The recipe box used to be a 34px icon squeezed beside the panel heading. It
   is 100x100 artwork, so it gets the head of the selector column, where a
   200px track has room for it. */
.senshi-art .rb-boxico{
  display:block; width:100px; height:100px; flex:0 0 auto;
  /* Ash: "there appears to be a lot of padding between the recipe box gif and
     the links. reduce that." The padding was not in the CSS - it is in the
     sprite. The drawn box only occupies x 6-76 of a 100px frame, so 24px of
     transparent film sat between it and the first chip and 6px between it and
     the column's edge. The negative margins pull the frame's dead edges out of
     the layout; nothing is cropped or scaled, and the chips get 33px more line
     to wrap in as well. */
  float:left; margin:0 -22px 2px -6px;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}
.senshi-art .rb-scroll-h{
  /* Ash: "the word contents, there is a lot of padding below this before the
     links and gif. reduce it." Most of that gap was not the margin - it was
     the line box: 11px type on the column's inherited line-height drew a 27px
     tall paragraph.
     Then: "move the contents header over the top of just the links." It is
     inside the links row now, so it shortens its line for the floated recipe
     box and sits over the chips rather than over the whole column. Right, to
     cap the stack they are aligned to. */
  margin:0 0 2px; text-align:right; line-height:1;
  /* (the panel's own `p` rule outweighs this one - see .rb-scroll .rb-scroll-h
     below, which is what actually sets the margin) */
  font-family:rainyhearts,monospace; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 76%, #1a1420);
}
/* "grow the selctor box taller": the list gets the extra room rather than the
   images being squeezed into the old height. It still caps and scrolls, so a
   long list of recipes never makes the column grow without end.

   flex:0 1 auto, not 1 1 auto. When the list absorbed the column's spare
   height it pushed the stove to the very bottom of the column - which is the
   same corner the left sticker hangs in, and she landed straight on the pot.
   The slack goes BELOW the stove instead (margin-bottom:auto on it), so the
   pot and the box sit up under the list and the corner is left empty for her. */
/* Ash: "turn each catagory into a 3 max shown, rest scroll down. cute 98 style
   scroll bar with our gradient plz."

   The scrolling goes back INTO each course - but at three entries, not at a
   height big enough to hide nine of them. Three rows is 3 x 53px (48 tall plus
   the 5px gap), and a course with three or fewer never shows a bar at all. */
.senshi-art .rb-list{
  margin:0; padding:0; list-style:none;
  /* NO max-height and NO overflow here any more. Ash: "did you take care of
     that scroll glitch... is this the same thing as the recipe select box as
     well?"

     It was not the same thing. The recipe WINDOW was the wheel being trapped
     at the box's edge, and that was overscroll-behavior, which is gone. This
     one was a leftover: each course used to be its own 164px scroller, from
     back when there were four recipes and no contents box around them. When
     the single .rb-toc scroller replaced that, the cap stayed - so three of
     the course lists were still scrollers INSIDE the scroller. Measured: 263,
     175 and 223 pixels of list in 164px boxes. The wheel over a course had to
     bottom out that little list, then the contents box, then the page. Three
     catches on the way down, which is the stutter she was feeling.

     One box scrolls. The courses are just content in it. */
}
/* Firefox cannot draw the 98 chrome, so it gets the colours on an ordinary bar
   rather than something half-finished. This is deliberately NOT on .rb-list
   itself: Chrome now supports scrollbar-color too, and when it is set Chrome
   throws away every ::-webkit-scrollbar rule below and draws its own rounded
   overlay bar instead. Measured - the 98 chrome simply did not appear until
   these two declarations moved behind the @supports. */
@supports not selector(::-webkit-scrollbar){
  .senshi-art .rb-list{
    scrollbar-width:auto;
    scrollbar-color:#c7a8d2 color-mix(in srgb, var(--paper) 72%, #fff);
  }
}

/* ---- the Windows 98 scrollbar ----
   Seventeen pixels wide, a dithered track, a bevelled thumb carrying the Pixel
   and Planets ramp, square arrow buttons at both ends. The bevel is the whole
   look: light on the top and left, dark on the bottom and right, inverted
   while pressed - a raised plastic button, which is what 98 was imitating.

   BOTH scrollers wear it: the contents page and each course's own list. One
   selector list rather than two copies, so the arrows cannot end up on one and
   not the other - which is exactly what happened the first time round. Ash:
   "the scroll bar for the catagories, add up and down arrows."

   The ramp is restated here rather than read from --titlebar-gradient: that
   property is defined on .pp-win and the recipe box is not inside one, so
   inheriting it would quietly resolve to the old rose ramp. */
.senshi-art .rb{
  --rb-bar-face:linear-gradient(180deg,#e8c0c8,#C7C4D9,#f6ebbe,#f2c0bf,#f5f4d6,#FFFFFA);
  --rb-bar-lit:#fffdf6;
  --rb-bar-dim:#8d6f9b;
}
/* ---- the recipe window's own bar ----
   Ash: "match the recipe page scroll bar to the gradient bars for the
   catagories."

   Same 98 chrome as the contents side, but its thumb carries the course
   heading's ramp (#6a1535 to #b23965, turned to run down the thumb) instead of
   the pastel one. The two sides of the box then read as one object: the wine
   ramp is the recipe page's colour wherever it appears. */
.senshi-art .rb-win{
  --rb-bar-face:linear-gradient(180deg,#6a1535,#b23965);
  --rb-bar-lit:#d98cab;
  --rb-bar-dim:#4a0e26;
}
.senshi-art .rb-win::-webkit-scrollbar{ width:17px; }
.senshi-art .rb-win::-webkit-scrollbar-track{
  background-color:color-mix(in srgb, var(--paper) 92%, #c9a24e);
  background-image:
    linear-gradient(45deg, rgba(106,21,53,.16) 25%, transparent 25%,
      transparent 75%, rgba(106,21,53,.16) 75%),
    linear-gradient(45deg, rgba(106,21,53,.16) 25%, transparent 25%,
      transparent 75%, rgba(106,21,53,.16) 75%);
  background-size:4px 4px; background-position:0 0, 2px 2px;
}
.senshi-art .rb-win::-webkit-scrollbar-thumb{
  background:var(--rb-bar-face);
  border:2px solid var(--rb-bar-lit);
  border-right-color:var(--rb-bar-dim);
  border-bottom-color:var(--rb-bar-dim);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  min-height:28px;
}
.senshi-art .rb-win::-webkit-scrollbar-thumb:active{
  border-color:var(--rb-bar-dim);
  border-right-color:var(--rb-bar-lit);
  border-bottom-color:var(--rb-bar-lit);
}
.senshi-art .rb-win::-webkit-scrollbar-button{ display:none; }
.senshi-art .rb-win::-webkit-scrollbar-button:single-button{
  display:block; height:17px; width:17px;
  background:var(--rb-bar-face);
  background-repeat:no-repeat; background-position:center;
  border:2px solid var(--rb-bar-lit);
  border-right-color:var(--rb-bar-dim);
  border-bottom-color:var(--rb-bar-dim);
}
.senshi-art .rb-win::-webkit-scrollbar-button:single-button:vertical:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 0 9 6H0z' fill='%23fffffa'/%3E%3C/svg%3E");
}
.senshi-art .rb-win::-webkit-scrollbar-button:single-button:vertical:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23fffffa'/%3E%3C/svg%3E");
}
.senshi-art .rb-win::-webkit-scrollbar-button:single-button:active{
  border-color:var(--rb-bar-dim);
  border-right-color:var(--rb-bar-lit);
  border-bottom-color:var(--rb-bar-lit);
}

.senshi-art .rb-list::-webkit-scrollbar,
.senshi-art .rb-toc::-webkit-scrollbar{ width:17px; }
/* the dither: a two-pixel checker, the 98 track exactly */
.senshi-art .rb-list::-webkit-scrollbar-track,
.senshi-art .rb-toc::-webkit-scrollbar-track{
  /* warm, not grey: at 70% paper the base came out near-white and a grey
     checker on near-white reads as a transparency grid rather than as the 98
     dither. Deeper paper underneath and a softer, warmer speck on top. */
  /* Tonal, not two hues. A grey speck on a cream base reads as a transparency
     grid rather than as the 98 dither - the checker has to be the same colour
     family as the thing it sits on, just darker. This is the box's own gold at
     low opacity on its own paper. */
  background-color:color-mix(in srgb, var(--paper) 92%, #c9a24e);
  background-image:
    linear-gradient(45deg, rgba(201,162,78,.20) 25%, transparent 25%,
      transparent 75%, rgba(201,162,78,.20) 75%),
    linear-gradient(45deg, rgba(201,162,78,.20) 25%, transparent 25%,
      transparent 75%, rgba(201,162,78,.20) 75%);
  background-size:4px 4px;
  background-position:0 0, 2px 2px;
}
.senshi-art .rb-list::-webkit-scrollbar-thumb,
.senshi-art .rb-toc::-webkit-scrollbar-thumb{
  background:var(--rb-bar-face);
  border:2px solid var(--rb-bar-lit);
  border-right-color:var(--rb-bar-dim);
  border-bottom-color:var(--rb-bar-dim);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  min-height:28px;
}
.senshi-art .rb-list::-webkit-scrollbar-thumb:active,
.senshi-art .rb-toc::-webkit-scrollbar-thumb:active{
  border-color:var(--rb-bar-dim);
  border-right-color:var(--rb-bar-lit);
  border-bottom-color:var(--rb-bar-lit);
}
/* :single-button, or webkit draws a second pair in the middle of the track */
.senshi-art .rb-list::-webkit-scrollbar-button,
.senshi-art .rb-toc::-webkit-scrollbar-button{ display:none; }
.senshi-art .rb-list::-webkit-scrollbar-button:single-button,
.senshi-art .rb-toc::-webkit-scrollbar-button:single-button{
  display:block; height:17px; width:17px;
  background:var(--rb-bar-face);
  background-repeat:no-repeat; background-position:center;
  border:2px solid var(--rb-bar-lit);
  border-right-color:var(--rb-bar-dim);
  border-bottom-color:var(--rb-bar-dim);
}
.senshi-art .rb-list::-webkit-scrollbar-button:single-button:vertical:decrement,
.senshi-art .rb-toc::-webkit-scrollbar-button:single-button:vertical:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 0 9 6H0z' fill='%234a2a5c'/%3E%3C/svg%3E");
}
.senshi-art .rb-list::-webkit-scrollbar-button:single-button:vertical:increment,
.senshi-art .rb-toc::-webkit-scrollbar-button:single-button:vertical:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%234a2a5c'/%3E%3C/svg%3E");
}
.senshi-art .rb-list::-webkit-scrollbar-button:single-button:active,
.senshi-art .rb-toc::-webkit-scrollbar-button:single-button:active{
  border-color:var(--rb-bar-dim);
  border-right-color:var(--rb-bar-lit);
  border-bottom-color:var(--rb-bar-lit);
}
.senshi-art .rb-toc{
  /* The scroller, now that the box is capped to the height of the screen.

     Ash: "add a gentle frame around the contents." A hairline, a soft inner
     highlight and a shade lighter inside - the same pair the recipe window and
     the column already wear - so the scrolling area reads as a pane you are
     looking into rather than a list that happens to stop mid-entry. */
  flex:1 1 auto; min-height:170px;
  overflow-y:auto;   /* chains to the page at the end - see .rb-list above */
  padding:7px 4px 8px 7px;
  border:1px solid color-mix(in srgb, #c9a24e 62%, var(--paper));
  border-radius:8px;
  background:color-mix(in srgb, var(--paper) 40%, #fff);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),
             inset 0 2px 5px -3px rgba(74,42,92,.35);
}
.senshi-art .rb-li{ margin:0 0 5px; }
.senshi-art .rb-pick{
  display:block; padding:7px 9px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--paper));
  border-radius:7px;
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  font-size:13.5px; line-height:1.3; color:var(--ink);
  /* no transition - "same goes for buttons" */
  /* was: transition:background .12s ease, transform .12s ease; */
}
.senshi-art .rb-pick:hover{
  background:color-mix(in srgb, var(--accent) 14%, var(--paper));
}
.senshi-art .rb-radio:focus-visible + .rb-radio + .rb-grid .rb-pick,
.senshi-art .rb-list .rb-pick:has(:focus-visible){ outline:2px solid var(--head); }
/* The selected one. These two rules used to be written out by hand for the two
   recipes that existed when the box was built, which is why recipes three and
   four could be clicked and then showed NOTHING - the selector naming them was
   never added. They are generated from the recipe list now, so a recipe added
   to build_ash_page.py cannot be unreachable here. */
#rb-r-one:checked ~ .rb-grid .rb-pick[for="rb-r-one"],
#rb-r-two:checked ~ .rb-grid .rb-pick[for="rb-r-two"],
#rb-r-three:checked ~ .rb-grid .rb-pick[for="rb-r-three"],
#rb-r-four:checked ~ .rb-grid .rb-pick[for="rb-r-four"],
#rb-r-nonna:checked ~ .rb-grid .rb-pick[for="rb-r-nonna"],
#rb-r-macncheese:checked ~ .rb-grid .rb-pick[for="rb-r-macncheese"],
#rb-r-cabbagesoup:checked ~ .rb-grid .rb-pick[for="rb-r-cabbagesoup"],
#rb-r-fishpiccata:checked ~ .rb-grid .rb-pick[for="rb-r-fishpiccata"],
#rb-r-chickenpiccata:checked ~ .rb-grid .rb-pick[for="rb-r-chickenpiccata"],
#rb-r-lemonchicken:checked ~ .rb-grid .rb-pick[for="rb-r-lemonchicken"],
#rb-r-engagement:checked ~ .rb-grid .rb-pick[for="rb-r-engagement"],
#rb-r-smothered:checked ~ .rb-grid .rb-pick[for="rb-r-smothered"],
#rb-r-garlicshrimp:checked ~ .rb-grid .rb-pick[for="rb-r-garlicshrimp"],
#rb-r-redbeans:checked ~ .rb-grid .rb-pick[for="rb-r-redbeans"],
#rb-r-potroast:checked ~ .rb-grid .rb-pick[for="rb-r-potroast"],
#rb-r-chili:checked ~ .rb-grid .rb-pick[for="rb-r-chili"],
#rb-r-swisschicken:checked ~ .rb-grid .rb-pick[for="rb-r-swisschicken"],
#rb-r-creamedspinach:checked ~ .rb-grid .rb-pick[for="rb-r-creamedspinach"],
#rb-r-grilledpotatoes:checked ~ .rb-grid .rb-pick[for="rb-r-grilledpotatoes"],
#rb-r-garlicpotatoes:checked ~ .rb-grid .rb-pick[for="rb-r-garlicpotatoes"],
#rb-r-redcabbage:checked ~ .rb-grid .rb-pick[for="rb-r-redcabbage"],
#rb-r-applesaucebread:checked ~ .rb-grid .rb-pick[for="rb-r-applesaucebread"],
#rb-r-nightdrink:checked ~ .rb-grid .rb-pick[for="rb-r-nightdrink"],
#rb-r-moonmilk:checked ~ .rb-grid .rb-pick[for="rb-r-moonmilk"],
#rb-r-crawfish:checked ~ .rb-grid .rb-pick[for="rb-r-crawfish"],
#rb-r-brulee:checked ~ .rb-grid .rb-pick[for="rb-r-brulee"],
#rb-r-pizza:checked ~ .rb-grid .rb-pick[for="rb-r-pizza"]{
  background:color-mix(in srgb, var(--accent) 24%, var(--paper));
  border-color:var(--head);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
  font-weight:600;
}
/* the pot sits at the bottom of the column, out of the scroll */
/* ---- the stove, at the foot of the column ----
   Ash: "another one put her by the soup." Both at their own size, bottoms
   aligned, so she stands next to the pot rather than hovering over it. The
   gap is negative so her skirt just overlaps the pot's edge - standing at it,
   not politely beside it. The pot leads and she follows, because she is
   carrying the plate on her right and that arm wants the open side. */
/* Ash: "i feel like the catagory scroll box can be a little taller. decreasee
   the padding between the .gifs height below it to make room." The gap above
   the stove and the hamster's overlap are both tighter, and .rb-toc is
   flex:1 1 auto, so every pixel they give up the contents box takes. */
.senshi-art .rb-stove{
  display:flex; align-items:flex-end; justify-content:flex-end; gap:0;
  /* Ash: "move the bubbling soup gif down lower to the right, and move the
     let's cooking gyuru sticker up just a bit... so it looks like shes the one
     cooking the soup."

     The pot is the only thing left on the stove now that the recipe box has
     gone up beside the chips, so it is placed rather than centred: right
     margin brings it over her spatula hand, and the NEGATIVE bottom margin
     drops it into the column's bottom reserve so it sits at her arm's height
     instead of floating above her head. The negative margin is also height the
     contents box gets back - the pot overhangs rather than taking a row. */
  /* Ash: "move the soup gif all the way to the right bottom corner." */
  margin:6px 25px -92px auto; flex:0 0 auto;
  /* Ash: "the soup needs to move down too". Moved with an offset, not the
     margin: the margin is what the print button stands on, so changing it
     carried the button down with the pot. */
  position:relative; top:15px; left:-50px;   /* Ash: original size, 25px above where it sat */   /* Ash: 30px left */
  /* Ash: "double the soup gif in size". 64x62 -> 128x124. 62px more negative
     margin so the print button above it does not move; it grows 40px up
     (stopping short of the button) and 22px down, its foot on the box's
     bottom edge. */
}
/* Ash: "move the recipe box below... to the left of the soup." 100 + 64 across
   with the girl gone to the corner, bottoms aligned so the box sits on the
   same surface the pot does. */
/* Ash: "shrink down and place below the soup gif under the catagories. tilt
   counterclockwise about 15%." - shrunk on the way in rather than in CSS,
   because 442px of hamster drawn at 96 would be the browser resampling him on
   every load. Then: "move hamster sticker out of this box, and turn it into a
   sticker for the bottom left corner of the recipe text box. basically the
   corner the other side of the delecious guryu sticker. treat the hamster the
   same way. tilted corner sticker."

   So he is the third corner sticker rather than the last item in the contents
   column. 284px is where the recipe window starts - the 270px contents track
   plus the grid's 14px gap - and -14 from there is the same overhang the gyaru
   has on the opposite corner. The bottom is measured from .rb's padding box,
   which now runs 92px below the window, so 44px puts him 48px below the
   window's bottom edge: a little over half of him hanging off it, like the
   other two. Same drop shadow, his own -15deg tilt kept. */
.senshi-art .rb-chef{
  /* Ash: "move hamster left about 4 px and up about 30 px" */
  /* Ash: "hamster about 20 percent bigger, and expand up and left from it's
     current position": 96x88 -> 115x106, bottom kept, left pulled in by the
     19px he gained so his right edge stays put. */
  /* Ash: "hamster 10 px up and 10% smaller, fixed top right and shrink
     inward": 104x95, right edge (314) and top edge held, then 10px up. */
  position:absolute; left:210px; bottom:20px; z-index:4;
  width:104px; height:95px; pointer-events:none;
  transform:rotate(-15deg);
  filter:drop-shadow(0 3px 4px rgba(90,50,104,.3));
  border:0; background:none; padding:0; box-shadow:none;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .rb-chef{ transform:rotate(-15deg); }  /* a tilt is not motion */
}
.senshi-art .rb-pot{
  display:block; width:64px; height:62px; flex:0 0 auto;   /* Ash: back to original size */
  margin:0 0 4px 0; position:relative; z-index:1;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}

/* ---- the window on the right ---- */
.senshi-art .rb-win{
  /* overflow-y is auto so a long recipe scrolls in place rather than growing
     the page - Ash: "no scrolling the entire page up and down to read". x
     stays hidden so nothing in the corner adds a sideways bar. */
  position:relative; min-width:0;
  overflow-y:auto; overflow-x:hidden;   /* chains to the page at the end */
  container-type:inline-size;
  padding:14px 16px 16px;
  border:1px solid #c9a24e; border-radius:9px;
  background-color:#fffaf0;
  background-image:var(--pp-recipepaper);
  background-size:150px 150px; background-repeat:repeat;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
.senshi-art .rb-recipe{ display:none; position:relative; z-index:1; }
#rb-r-one:checked ~ .rb-grid .rb-recipe--one,
#rb-r-two:checked ~ .rb-grid .rb-recipe--two,
#rb-r-three:checked ~ .rb-grid .rb-recipe--three,
#rb-r-four:checked ~ .rb-grid .rb-recipe--four,
#rb-r-nonna:checked ~ .rb-grid .rb-recipe--nonna,
#rb-r-macncheese:checked ~ .rb-grid .rb-recipe--macncheese,
#rb-r-cabbagesoup:checked ~ .rb-grid .rb-recipe--cabbagesoup,
#rb-r-fishpiccata:checked ~ .rb-grid .rb-recipe--fishpiccata,
#rb-r-chickenpiccata:checked ~ .rb-grid .rb-recipe--chickenpiccata,
#rb-r-lemonchicken:checked ~ .rb-grid .rb-recipe--lemonchicken,
#rb-r-engagement:checked ~ .rb-grid .rb-recipe--engagement,
#rb-r-smothered:checked ~ .rb-grid .rb-recipe--smothered,
#rb-r-garlicshrimp:checked ~ .rb-grid .rb-recipe--garlicshrimp,
#rb-r-redbeans:checked ~ .rb-grid .rb-recipe--redbeans,
#rb-r-potroast:checked ~ .rb-grid .rb-recipe--potroast,
#rb-r-chili:checked ~ .rb-grid .rb-recipe--chili,
#rb-r-swisschicken:checked ~ .rb-grid .rb-recipe--swisschicken,
#rb-r-creamedspinach:checked ~ .rb-grid .rb-recipe--creamedspinach,
#rb-r-grilledpotatoes:checked ~ .rb-grid .rb-recipe--grilledpotatoes,
#rb-r-garlicpotatoes:checked ~ .rb-grid .rb-recipe--garlicpotatoes,
#rb-r-redcabbage:checked ~ .rb-grid .rb-recipe--redcabbage,
#rb-r-applesaucebread:checked ~ .rb-grid .rb-recipe--applesaucebread,
#rb-r-nightdrink:checked ~ .rb-grid .rb-recipe--nightdrink,
#rb-r-moonmilk:checked ~ .rb-grid .rb-recipe--moonmilk,
#rb-r-crawfish:checked ~ .rb-grid .rb-recipe--crawfish,
#rb-r-brulee:checked ~ .rb-grid .rb-recipe--brulee,
#rb-r-pizza:checked ~ .rb-grid .rb-recipe--pizza{ display:block; }

/* Ash: "the subtitle should clearly say General Tso's Chicken." Under the
   title, quieter than it and not in the title face: the title is the joke and
   this is the answer to "yes but what is it". */
.senshi-art .rb-dek{
  margin:-2px 0 8px;
  font-size:13px; letter-spacing:.4px; font-style:italic;
  color:color-mix(in srgb, var(--head) 72%, var(--paper));
}
.senshi-art .rb-head{
  margin:0 0 12px; padding:0 0 9px;
  border-bottom:2px solid color-mix(in srgb, var(--accent) 48%, var(--paper));
}
.senshi-art .rb-title{
  margin:0 0 6px;
  font-family:tojapan,monospace; font-size:21px; letter-spacing:1.6px;
  line-height:1.25; color:var(--head);
}
.senshi-art .rb-meta{
  display:flex; flex-wrap:wrap; gap:4px 16px; margin:0;
}
.senshi-art .rb-meta-i{ display:flex; align-items:baseline; gap:5px; }
.senshi-art .rb-meta dt{
  margin:0; font-family:rainyhearts,monospace; font-size:10.5px;
  letter-spacing:1.3px; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 74%, #1a1420);
}
.senshi-art .rb-meta dd{ margin:0; font-size:13.5px; color:var(--ink); }

/* two columns, ingredients narrow and method wide - which is the shape a
   recipe actually is, and the same shape the printed sheet uses */
.senshi-art .rb-cols{
  display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:16px; align-items:start;
}
.senshi-art .rb-sub{
  margin:0 0 7px; padding:0 0 4px;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 34%, var(--paper));
  font-family:rainyhearts,monospace; font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 76%, #1a1420);
}
.senshi-art .rb-cols ul,
.senshi-art .rb-cols ol{ margin:0; padding-left:18px; }
.senshi-art .rb-cols li{
  margin:0 0 5px; font-size:14px; line-height:1.5; color:var(--ink);
}
.senshi-art .rb-note{
  margin:14px 0 0; padding:9px 12px;
  border-left:3px solid color-mix(in srgb, var(--accent) 52%, var(--paper));
  border-radius:0 7px 7px 0;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  font-size:13.5px; line-height:1.5; font-style:italic; color:#3a3348;
}
/* Ash: "the gyuru, bottom right corner of the recipe box like a sticker,
   tilted slightly. no shrinking."

   141x175, her full size, tilted seven degrees and hung off the box's bottom
   right corner so part of her sits outside it - which is what a sticker stuck
   on the corner of a tin actually does. On top of everything (z-index 4) and
   pointer-events:none, so she is decoration and never in the way of a click.

   She overhangs into the junk drawer below. That is deliberate and is why the
   actions row is kept to the left: the band she lands in is empty on both
   panels, so she covers no text at any width where she is shown at all. */
.senshi-art .rb-gyaru{
  /* 30px above the foot of the lane; the lane is the grid's now, so -62 */
  /* Ash: "move deleciout up another 10" */
  position:absolute; right:-39px; bottom:-42px; z-index:4;   /* Ash: left 20px, then right 30 */
  width:170px; height:150px; pointer-events:none;
  transform:rotate(-7deg);
  filter:drop-shadow(0 3px 4px rgba(90,50,104,.3));
}
/* Ash: "the girl with spatula gif... turn her into a sticker and tilt her like
   the other bottom corner." The same rules as the one opposite, mirrored: the
   left corner, the tilt the other way, the same shadow. Two stickers on two
   corners read as a pair; one sticker and one image in a column read as an
   accident. */
.senshi-art .rb-lets{
  /* She came up to meet the pot when it stood beside her. The pot has gone to
     the bottom right corner since, and the contents box took the height it
     freed - at 38px her head was over "Steamed Spinach". Back down to the
     corner, where she clears the list's bottom edge exactly. */
  /* 25px, where she was before the lane moved. Ash: "i want the yellow on
     the lets cooking apron to be the same height as the top of the hamster's
     hat.... they should look slightly staggered." Measured on the sprites:
     the apron's yellow band is rows 141-151 of her 166, and his hat top is
     row 0 of his 88. He hangs at bottom:-41, so his hat top sits 47px above
     the grid's foot; her band at bottom:25 sits 166 - 146 - 25 = -5, i.e.
     47px above it too, give or take the 7-degree turn. She stands inside the
     column's new bottom reserve rather than under it; the other two hang. */
  /* Ash: "the cooking sticker is covering the printable copy button." Down
     50px, so her head clears the button's bottom edge. */
  /* Ash: "rotate lets cooking about 25 degrees counter clockwise, and move
     up about 20 px": 7deg - 25 = -18deg, -50 + 20 = -30. */
  position:absolute; left:-54px; bottom:-40px; z-index:4;   /* Ash: then 15 down, 15 right; 27 Oct: "lower the lets cooking sticker down by 15px" */   /* Ash: 30px left, then 25 more and 20 up */
  width:174px; height:166px; pointer-events:none;
  transform:rotate(-10deg);   /* Ash: 8 degrees back clockwise */
  filter:drop-shadow(0 3px 4px rgba(90,50,104,.3));
}
/* The actions row used to sit in the lane UNDER the whole box, between the two
   corner stickers, which is why it needed 172px and 176px of gutter. Ash:
   "put the open printable copy below the contents button" - it is in the
   contents column now, under the list, so there is no sticker either side of
   it and no gutter to keep. */
.senshi-art .rb-actions{ padding-left:0; padding-right:0; }
/* And so does the note. Measured against the real painted line boxes, the
   placeholder note clears her at every width - but it clears her because it is
   two lines long, not because the geometry is safe. She reaches about 160px
   above the panel's bottom edge, which is the last couple of lines of a note
   at the right margin, so a longer one written later would run into her. The
   gutter is unconditional rather than clever: a note is a short aside and can
   afford the width, and this cannot regress when the content changes. */
.senshi-art .rb-note{ padding-right:158px; }

/* Ash: "if a recipe has a white box at the bottom, keep the contents from
   getting covered by the bottom stickers." The hamster reaches about 98px up
   from the window's bottom edge, so the note carries that much room under it:
   scrolled to the end, its last line stops above his hat. Padding on the
   recipe rather than a margin on the note, because a scroller is not
   guaranteed to count a last child's margin as somewhere it can scroll to. */
.senshi-art .rb-recipe:has(.rb-note){ padding-bottom:84px; }
@media (max-width:760px){ .senshi-art .rb-recipe:has(.rb-note){ padding-bottom:0; } }

/* ---- the print button ----
   Hidden until recipebox.js adds .is-live. A button that opens a window is
   not something to show someone whose browser will not run the script that
   opens it. */
.senshi-art .rb-actions{
  /* align-items:stretch, not flex-end: the button is the row's width now, and
     a flex-end child would shrink back to its content. Ash: "the open a
     printable copy button, expand it horizontally so it starts under the
     recipe scroll box... you know wider." */
  display:none; flex-direction:column; align-items:stretch; gap:3px;
  margin:7px 0 0; flex:0 0 auto;
}
/* the margin is repeated here on purpose: the panel's own `p` rule is
   .senshi-art .pp-panel p, which outweighs .senshi-art .rb-actions and was
   putting a stray 17.6px under the button - 17.6px that the contents box
   above it had paid for. */
.senshi-art .rb.is-live .rb-actions{ display:flex; margin:7px 0 0; }
/* Ash: "style is so you can actually see it."
   It was a cream outline on cream paper. It wears the course heading's livery
   instead - the same wine ramp, the same gold hairline, the same cream text -
   so it reads as a control at a glance and still belongs to the box rather
   than looking like a button someone pasted in from another site. */
/* It was the pot's width for a while - Ash: "compact it. squish the button to
   the right... out to the width of the soup pot" - a 64px stack in the corner
   with the label wrapped onto four lines at 8.5px.

   Ash: "the open a printable copy button, expand it horizontally so it starts
   under the recipe scroll box... you know wider."

   So it is a bar across the column again: left edge under the contents box's
   left edge, right edge under its right edge, which is what "starts under the
   recipe scroll box" asks for - no width of its own at all, just the row it is
   in. Everything the 64px version needed goes with it:

     - the 25px right margin, which was the pot's offset, not the column's
     - overflow-wrap:anywhere, which existed to break PRINTABLE mid-word
     - 8.5px, which was below basiic's documented 12.5px floor and only got
       away with it because the label is all caps. With 224px of text room
       there is no reason to be under the floor, so it is not.

   One line at 12.5px measures 161px of the 224px available, so the label fits
   with room to spare at every width the box has. */
.senshi-art .rb-print{
  display:block; width:100%; text-align:center;
  padding:10px 12px 9px; cursor:pointer;
  border:1px solid #c9a24e;
  border-radius:4px;
  background:linear-gradient(90deg,#6a1535,#b23965);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -2px 0 rgba(44,8,22,.34),
             0 2px 0 rgba(90,50,104,.26);
  font-family:basiic,monospace; font-size:12.5px; letter-spacing:.4px;
  line-height:1.25; text-transform:uppercase; white-space:nowrap;
  color:#FFFFFA;
  text-shadow:0 1px 0 rgba(44,8,22,.45);
}
.senshi-art .rb-print:hover{
  background:linear-gradient(90deg,#7d1a3f,#c84473);
}
/* the whole button drops onto the paper, 98-style - no easing, she asked for
   retro: "the site is retro themed so the shittier the better lol" */
.senshi-art .rb-print:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(44,8,22,.3);
}
.senshi-art .rb-print:focus-visible{ outline:2px solid var(--head); outline-offset:2px; }

/* Ash: "make the open a printable copy's font rainbow gradient ala 'new
   charts' button and with bigger font". The same five stops and the same 24s
   scroll as the new-to-charts button. The ink is on a span, not the button:
   background-clip:text clips EVERY background layer, so on the button itself
   it would take the maroon face with it. Flat gold first; transparent ink
   only where clip:text works. */
.senshi-art .rb-print{ font-size:15px; letter-spacing:.2px; }
.senshi-art .rb-print-t{ color:#fad761; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .senshi-art .rb-print-t{
    background-image:linear-gradient(100deg,
      #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec);
    background-size:300% 100%; background-repeat:repeat;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    text-shadow:none;   /* a shadow paints over clipped ink */
    animation:pp-rainbow-scroll 24s linear infinite;
  }
}
@media (prefers-reduced-motion:reduce){ .senshi-art .rb-print-t{ animation:none; } }
/* The hint line that used to sit under the button is gone - it was two lines
   of a 248px column, taken out of the contents box she asked to make taller.
   It is the button's title attribute now. */
/* if a blocker eats the window, the button says so instead of doing nothing.
   display:block, not an inline tail: the label is one nowrap line now, and a
   second phrase beside it would run straight out of the button. */
.senshi-art .rb-print[data-blocked]::after{
  content:"popup blocked"; display:block; margin:4px 0 0; color:#ffd7e3;
}

@media (max-width:760px){
  .senshi-art .rb-grid{ grid-template-columns:minmax(0,1fr); }
  /* the viewport cap comes OFF here. One column means the contents sits above
     the recipe rather than beside it, so a fixed box height would show half a
     list and half a recipe - on a phone a long page is the normal way to read.
     The contents keeps a cap of its own so the recipe is not twenty-six
     entries down the page. */
  .senshi-art .rb-grid{ height:auto; min-height:0; }
  .senshi-art .rb-win{ overflow:visible; }
  .senshi-art .rb-toc{ flex:0 0 auto; max-height:300px; }
  .senshi-art .rb-cols{ grid-template-columns:minmax(0,1fr); }
  /* no room to hang a 141px sticker off a phone-width box without it
     landing on something, so she steps out rather than shrinking. */
  .senshi-art .rb-gyaru,
  .senshi-art .rb-lets,
  .senshi-art .rb-chef{ display:none; }   /* he is a corner sticker too now */
  .senshi-art .rb-scroll{ padding-bottom:10px; }   /* no sticker, no reserve */
  .senshi-art .rb-actions{ padding-left:0; padding-right:0; }
  .senshi-art .rb-note{ padding-right:12px; }   /* they are gone, so is the gutter */
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .rb-pick,
  .senshi-art .rb-print{ transition:none; }
}

.senshi-art .pp-panel .junkdump-sub{ margin:0 0 8px; color:#7A6E96; }
.senshi-art .pp-panel .junk-empty{ color:#8a7f96; }

/* ---- THE PAGE MUSIC PLAYER ----
   Ash: "for this page, it needs it's own music player at the top of the
   page... not the CDplayer on the side, just a simple play pause. kinda like
   this page [kelprot.neocities.org]... but don't auto play the muisic plz."

   A single bar across the top of the window: one round button, what is
   playing, a seek line, and the clock. It takes the window's own title bar
   gradient so it reads as part of the chrome rather than as a widget someone
   pasted on.

   The no-script state is the native <audio controls>, which is why .pgp only
   lays itself out once pageplayer.js has added .is-live. Before that the
   browser's own player is what is visible, and it works.  */
/* Two rows, not one. In the 300px left column a single row could not hold a
   dancer, a button, a title, a seek bar and a clock - the title alone wanted
   more than the whole column. So the dancer spans both rows down the left
   (which suits a 28x56 sprite), the button and the clock share the top row,
   and the title and seek line take the bottom one. */
.senshi-art .pgp{
  display:grid; align-items:center; gap:3px 10px;
  /* Ash: "move the dancing gif to the otherside of the box." He spans both
     rows down the RIGHT now, so the button leads the bar and he closes it. */
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"btn time screen" "mid mid screen";
  grid-template-rows:auto auto;
  align-content:center;
  min-width:0;
  container-type:inline-size;
  /* Ash: "the music player... push it down so it's touching the top of the
     rising sign box... close that white gap below it." No bottom margin: the
     bar's lower border and the placement box's top border are the same line
     now. The 10px that used to be here was the gap. */
  margin:0; padding:10px 12px;
  /* Ash: "music player. pointed corners. remove the rounded corners." The bar
     and its seek track are square now. The play button keeps its circle - that
     is the control's affordance rather than the panel's styling. */
  border:1px solid var(--pp-ramp-edge, #c9a24e); border-radius:0;
  /* Ash: "adjust anything that is that wine color as part of the gradient
     palette." The wine is the Pixel & Planets accent - right on her page,
     wrong on anyone else's - so it is the fallback and a profile sets
     --pp-ramp to its own three stops. Same variable drives the card's banner,
     because they are the same ramp and should stay that way. */
  background:var(--pp-ramp, linear-gradient(90deg,#6a1535,#b23965,#f9a5b9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             0 3px 10px -7px rgba(26,20,32,.8);
}
.senshi-art .pgp .pgp-audio{ width:100%; }
.senshi-art .pgp.is-live .pgp-audio{ display:none; }
.senshi-art .pgp:not(.is-live) > :not(.pgp-audio){ display:none; }

/* ---- THE DANCER ----
   Ash: "did you see the .gif inside the music player on that page I sent you?
   do the same for mine with this image please", then "can you make the
   miyamoto dancing gif transparent?"

   He is transparent now, so the bevelled plate he used to stand on is gone and
   he dances straight on the bar. Doing it properly took more than a colour
   key: his shirt and face are drawn as halftone dots, so white-on-the-outside
   and white-inside-his-shirt are one connected region and keying white took
   the shirt with it. The sprite is built by closing the ink into a silhouette
   first and clearing only what falls outside that. See the build script.

   It is an APNG, not a gif: the art is anti-aliased, and gif transparency is
   one bit, which would put a hard jagged edge on every soft one.

   He dances whether or not the track is playing - he is a decoration, and a
   frozen dancer next to a paused song reads as broken rather than as paused.
   Reduced motion is the one case where he holds still. */
.senshi-art .pgp-screen{
  grid-area:screen; align-self:center;
  display:block; padding:0; background:none; border:0; box-shadow:none;
}
/* Ash: "full size the gif please. grow the box if needed."
   56x112, his native size, so no resampling happens at all and the halftone
   dots stay exactly one pixel each. He spans both grid rows, so the bar grows
   to fit him rather than him being squeezed to fit the bar - which is the
   right way round: the button and the clock have slack, a pixel sprite does
   not. image-rendering:pixelated is kept for the case where a browser zoom or
   a device pixel ratio does scale him after all. */
.senshi-art .pgp-dancer{
  display:block;
  width:var(--pgp-art-w, 56px); height:var(--pgp-art-h, 112px);
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}
/* ---- THE MIRROR SHIMMER, ON THE MIRROR ----
   Ash: "put the animation on the princess moon dancing in the music player
   (duh)", and then "make sure the shimmer stays inside the frame of the
   mirror... on the glass only lol".

   She is right on both counts, and the second is the interesting one.
   princess-moon.gif is not a figure, it is a MIRROR - Princess Moon inside
   a carved arched frame, which is the same object as the one in the ending
   she sent as reference. A gold band swept over the whole sprite would run
   across the carving too, and a frame that lights up is a frame made of
   glass. So the band is CLIPPED to an arch traced off the sprite itself
   and pulled three pixels inside the carving - see the clip-path below,
   and scripts/build_moonmask.py which works out the points.

   NOT PIXEL ART. Ash: "so lets forgo the pixel look since we're putting it
   on the mirror gif. can you make it true to the images and just place it
   over the same way?" The first pass imitated how a SNES would fake this -
   HDMA marching a window edge down the scanlines with the fixed-colour add
   switched on inside it, which gives hard edges and whole-frame jumps, so
   the gradient was hard stops and the timing was steps(13). That is a
   clever thing the cel is not doing. The cel is painted light. So every
   number below is now READ OFF HER 31 FRAMES instead, and the only thing
   kept from the first pass is where it goes and the arch it is cut to.

   WHAT THE FRAMES SAY, measured against frame 31 as the unlit baseline:

     ANGLE.   Fitting the lit area's boundary across frames 5-9 gives a
              slope of -0.34, so the band lies 19 degrees off horizontal,
              high on the right, and travels down and slightly right. In
              CSS that direction is 161deg.
     COLOUR.  The flood reads 255,239,210 - a pale warm cream, nearly
              white, not a saturated gold. It is the same colour the whole
              way through: the dim parts are the same cream at low alpha,
              not a different hue.
     SHAPE.   Projecting every pixel onto the travel axis and stacking all
              31 frames reconstructs one band that simply translates. Taken
              as fractions of the glass it is: a leading comb 0.21 long, a
              solid plateau 0.55, a trailing falloff 0.37, and a faint tail
              after that. The comb is the pretty part - the front does not
              arrive alone, it has two thin brighter streaks running ahead
              of it with dimmer gaps between, which is the reading at 96.3%
              and 98.2% below.
     SPEED.   The front advances 28.7px a frame across a 470px glass, so it
              crosses in about 0.68s, and it does it at a CONSTANT rate -
              linear, not eased. The whole event is about 1.8s here.

     PEAK.    The one number not taken straight: the cel floods to about
              0.95 alpha, which whites the glass out completely and loses
              her for a third of a second. Once every 7.6s forever is not
              once in an ending, so the plateau is held at .74, where she
              stays visible through it. That is the only stop to raise if
              you want the full whiteout.

   The band is still longer than the sprite, so the leading comb washes in,
   the plateau floods, and the trailing edge drains it - and there are five
   and a half seconds of nothing between sweeps, because a shimmer that
   never stops is a loading spinner. */
/* SCOPED TO THE ONE SPRITE IT WAS TRACED OFF. Ash: "remove the shine
   effect we made for princess moon. that's just for that profile."
   The clip-path below is princess-moon.gif's own glass, measured off that
   file, so on anyone else's art this would have swept a gold band through
   an arch that is not there. It read as general because hers was the only
   art it had ever been shown. */
.senshi-art .pgp-screen{ position:relative; }
.senshi-art .pgp-screen--mirror::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* the tile is four sprites tall so the whole band can stand off the top
     of the glass and wait there between sweeps */
  background-repeat:no-repeat; background-size:100% 400%;
  background-image:linear-gradient(161deg,
    rgba(255,240,208,0)    57.6%,
    rgba(255,240,208,.030) 64%,
    rgba(255,240,208,.074) 67.7%,
    rgba(255,240,208,.185) 70.2%,
    rgba(255,240,208,.370) 73.1%,
    rgba(255,240,208,.740) 76.6%,
    rgba(255,240,208,.740) 92.7%,
    rgba(255,240,208,.688) 93.2%,
    rgba(255,240,208,.644) 93.5%,
    rgba(255,240,208,.370) 93.7%,
    rgba(255,240,208,.289) 94.4%,
    rgba(255,240,208,.163) 95.5%,
    rgba(255,240,208,.133) 95.9%,
    rgba(255,240,208,.141) 96.3%,
    rgba(255,240,208,.104) 97.1%,
    rgba(255,240,208,.057) 97.6%,
    rgba(255,240,208,.064) 98.2%,
    rgba(255,240,208,.044) 98.7%,
    rgba(255,240,208,.013) 99.5%,
    rgba(255,240,208,0)   100%);
  /* CLIP-PATH, NOT A MASK IMAGE, and the reason is worth keeping. The
     obvious build was a CSS mask pointing at a PNG of the arch, and that
     works on the live site and NOWHERE ELSE: masks are origin-checked,
     and a page opened from disk has no origin, so the mask fails silently
     and the shimmer disappears. Which is exactly how this gets looked at
     before it is uploaded. A polygon has nothing to fetch, so it cannot be
     blocked - same arch, from a file:// page and from the web alike.

     The points are traced off the sprite by scripts/build_moonmask.py and
     pasted here: thirteen down the left edge of the glass and thirteen
     back up the right, pulled three pixels inside the carving. */
  -webkit-clip-path:polygon(51.6% 3.3%, 24.7% 11.7%, 15.1% 19.2%, 8.6% 27.5%, 4.3% 35%, 4.3% 43.3%, 4.3% 51.7%, 4.3% 59.2%, 4.3% 67.5%, 4.3% 75%, 4.3% 83.3%, 4.3% 90.8%, 4.3% 99.2%, 94.6% 99.2%, 94.6% 90.8%, 94.6% 83.3%, 94.6% 75%, 94.6% 67.5%, 94.6% 59.2%, 94.6% 51.7%, 94.6% 43.3%, 94.6% 35%, 89.2% 27.5%, 84.9% 19.2%, 79.6% 11.7%, 60.2% 3.3%);
          clip-path:polygon(51.6% 3.3%, 24.7% 11.7%, 15.1% 19.2%, 8.6% 27.5%, 4.3% 35%, 4.3% 43.3%, 4.3% 51.7%, 4.3% 59.2%, 4.3% 67.5%, 4.3% 75%, 4.3% 83.3%, 4.3% 90.8%, 4.3% 99.2%, 94.6% 99.2%, 94.6% 90.8%, 94.6% 83.3%, 94.6% 75%, 94.6% 67.5%, 94.6% 59.2%, 94.6% 51.7%, 94.6% 43.3%, 94.6% 35%, 89.2% 27.5%, 84.9% 19.2%, 79.6% 11.7%, 60.2% 3.3%);
  /* 12s round, of which the sweep is the last 15% - about 1.8s, which is
     the 0.68s-per-glass the frames measure carried over the whole travel.
     The other 10.2s the band is parked above the arch.
     THE SWEEP'S LENGTH IS MEASURED AND THE GAP IS TASTE. Ash: "which i
     want more time between shines... maybe 10 seconds or so?" So the gap
     moved and the sweep did not: how fast the light crosses the glass is
     read off her 31 frames and is not mine to stretch, while how often it
     happens is a decision about how often she wants to be interrupted. */
  animation:pp-mirror 12s linear infinite;
}
/* The travel is worked out against the sprite's real 93x120, the tile's
   400% height and the 161deg line, so that at 146% the band is entirely
   off the top of the glass and at 36% it has entirely left the bottom.
   Both ends have about 24px of margin; change the sprite's size or the
   tile's and these two numbers want redoing, not nudging. */
@keyframes pp-mirror{
  0%, 85% { background-position:0% 146%; }
  100%    { background-position:0% 36%; }
}
@media (prefers-reduced-motion:reduce){
  /* a gif cannot be paused from CSS, so the honest thing is to hide him */
  .senshi-art .pgp-screen{ display:none; }
}

/* the button: round, chunky, and it never moves - the glyph swaps inside it */
.senshi-art .pgp-btn{
  grid-area:btn;
  flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; padding:0; cursor:pointer;
  border:2px solid color-mix(in srgb, var(--pp-ramp-ink,#fff) 85%, transparent); border-radius:50%;
  background:color-mix(in srgb, var(--pp-ramp-ink,#fff) 18%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  /* no transition - "same goes for buttons" */
  /* was: transition:background .12s ease, transform .12s ease; */
}
.senshi-art .pgp-btn:hover{ background:color-mix(in srgb, var(--pp-ramp-ink,#fff) 34%, transparent); }
.senshi-art .pgp-btn:active{ transform:scale(.94); }
.senshi-art .pgp-btn:focus-visible{ outline:2px solid var(--pp-ramp-ink,#fff); outline-offset:2px; }
/* both glyphs live in the same grid cell, so swapping them cannot shift the
   layout by a pixel the way a text swap would */
.senshi-art .pgp-ico-play,
.senshi-art .pgp-ico-pause{ grid-area:1 / 1; }
.senshi-art .pgp-ico-play{
  width:0; height:0; margin-left:3px;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:12px solid var(--pp-ramp-ink,#fff);
}
.senshi-art .pgp-ico-pause{
  width:12px; height:14px;
  border-left:4px solid var(--pp-ramp-ink,#fff); border-right:4px solid var(--pp-ramp-ink,#fff);
}
.senshi-art .pgp .pgp-ico-pause{ display:none; }
.senshi-art .pgp.is-playing .pgp-ico-play{ display:none; }
.senshi-art .pgp.is-playing .pgp-ico-pause{ display:block; }

.senshi-art .pgp-mid{ grid-area:mid; min-width:0; }
/* the title can be longer than the column, so it clips rather than pushing:
   min-width:0 on the flex child is what actually lets the ellipsis happen. */
.senshi-art .pgp-nowplaying{
  display:flex; align-items:baseline; gap:7px; margin:0 0 3px; min-width:0;
}
.senshi-art .pgp-k{ flex:0 0 auto; }
/* at half width the bar cannot afford both the label and the track name, and
   the name is the one carrying information - "NOW PLAYING" is decoration that
   the play button already says. A container query, because what matters is how
   wide the BAR is, and the bar is now half a column rather than a share of the
   window. */
@container (max-width:330px){
  .senshi-art .pgp-k{ display:none; }
  /* ---- THE VOLUME ----
   Ash: "please add volume control to the music player... below the player
   scroll." Its own row under the seek, inside .pgp-mid, so it is hidden by
   the same no-script rule that hides the rest and the native <audio controls>
   is what a reader without scripts gets.

   Deliberately the quieter of the two sliders: shorter, thinner, and capped
   well under the seek's width. A seek bar is the control someone came to the
   player to use; the volume is the one they touch once. Same ink variable as
   everything else on the bar, so it follows the profile's palette down. */
/* .pgp .pgp-vol, not .pgp-vol: this row is a <p> inside .pp-panel, and
   `.senshi-art .pp-panel p` is (0,2,1) while `.senshi-art .pgp-vol` is only
   (0,2,0) - so the panel's paragraph margin won and the word "vol" sat under
   the seek bar's thumb. The same trap has now eaten .rb-actions and
   .rb-scroll-h on this stylesheet; anything that is a bare <p> or <ul> inside
   a panel needs the extra class in front of it. */
/* ---- THE READOUT, for a ramp that goes pale under the clock ----
   Only on .pgp--readout, which pp_profile adds when a palette declares a
   second ink. A ramp that stays dark the whole way - the Pixel and Planets
   wine - keeps white figures straight on it, as it always had. */
.senshi-art .pgp--readout .pgp-time{
  padding:2px 7px 3px; border-radius:2px;
  color:var(--pp-ramp-ink2, #3a2e2a); text-shadow:none;
  background:rgba(255,253,246,.82);
  box-shadow:inset 1px 1px 0 rgba(58,46,42,.28),
             inset -1px -1px 0 rgba(255,255,255,.7);
}

.senshi-art .pgp .pgp-vol{
  display:flex; align-items:center; gap:8px;
  /* 10px, not 4: the seek bar's track is 6px but its THUMB is 13px and
     overflows the track by 4px top and bottom, so a 4px gap put the word
     "vol" under the thumb. The gap is measured from the thumb, not the
     track. */
  margin:10px 0 1px; padding:0;
}
.senshi-art .pgp-volk{
  flex:0 0 auto;
  font-family:basiic,monospace; font-size:9px; letter-spacing:1px;
  /* a pixel face needs its own line box or the descender-less caps sit on
     the baseline and look clipped */
  text-transform:uppercase; line-height:1.4;
  color:color-mix(in srgb, var(--pp-ramp-ink,#fff) 78%, transparent);
}
.senshi-art .pgp-volume{
  --pgp-vol:80%;
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:0; max-width:132px;
  display:block; height:4px; margin:0; padding:0;
  cursor:pointer; background:transparent;
}
.senshi-art .pgp-volume::-webkit-slider-runnable-track{
  height:4px; border-radius:0;
  background:linear-gradient(90deg,var(--pp-ramp-ink,#fff) 0 var(--pgp-vol),
             color-mix(in srgb, var(--pp-ramp-ink,#fff) 26%, transparent) var(--pgp-vol) 100%);
}
.senshi-art .pgp-volume::-moz-range-track{
  height:4px; border-radius:0;
  background:color-mix(in srgb, var(--pp-ramp-ink,#fff) 26%, transparent);
}
.senshi-art .pgp-volume::-moz-range-progress{
  height:4px; border-radius:0; background:var(--pp-ramp-ink,#fff);
}
.senshi-art .pgp-volume::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; margin-top:-3px;
  border:2px solid var(--pp-ramp-ink,#b23965); border-radius:50%;
  background:var(--pp-paper,#fff);
}
.senshi-art .pgp-volume::-moz-range-thumb{
  width:10px; height:10px;
  border:2px solid var(--pp-ramp-ink,#b23965); border-radius:50%;
  background:var(--pp-paper,#fff);
}
.senshi-art .pgp-volume:focus-visible{
  outline:2px solid var(--pp-ramp-ink,#fff); outline-offset:3px;
}
/* the label is the first thing to go when the bar is squeezed, exactly as
   "now playing" does - the slider still reads as a volume on its own */
@container (max-width: 250px){
  .senshi-art .pgp-volk{ display:none; }
}

.senshi-art .pgp-time{ font-size:11px; }
}
/* He does NOT shrink at narrow widths. Ash asked for him full size and then
   for the box to grow around him, so the box grows; he is the fixed thing
   here and everything else gives way. */
.senshi-art .pgp-t{
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.senshi-art .pgp-k{
  font-family:rainyhearts,monospace; font-size:10px; letter-spacing:1.4px;
  text-transform:uppercase; color:color-mix(in srgb, var(--pp-ramp-ink,#fff) 78%, transparent);
}
.senshi-art .pgp-t{
  font-family:basiic,monospace; font-size:13px; color:var(--pp-ramp-ink,#fff);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
/* the seek line. The filled part is a gradient stop driven by --pgp-pos,
   which the script sets, so the track paints without a second element. */
.senshi-art .pgp-seek{
  --pgp-pos:0%;
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:6px; margin:0; padding:0;
  cursor:pointer; background:transparent;
}
.senshi-art .pgp-seek::-webkit-slider-runnable-track{
  height:6px; border-radius:0;
  background:linear-gradient(90deg,var(--pp-ramp-ink,#fff) 0 var(--pgp-pos),
             rgba(255,255,255,.3) var(--pgp-pos) 100%);
}
.senshi-art .pgp-seek::-moz-range-track{
  height:6px; border-radius:0; background:color-mix(in srgb, var(--pp-ramp-ink,#fff) 32%, transparent);
}
.senshi-art .pgp-seek::-moz-range-progress{
  height:6px; border-radius:0; background:var(--pp-ramp-ink,#fff);
}
.senshi-art .pgp-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-4px;
  border:2px solid var(--pp-ramp-ink,#b23965); border-radius:50%; background:var(--pp-paper,#fff);
}
.senshi-art .pgp-seek::-moz-range-thumb{
  width:13px; height:13px;
  border:2px solid var(--pp-ramp-ink,#b23965); border-radius:50%; background:var(--pp-paper,#fff);
}
.senshi-art .pgp-seek:focus-visible{ outline:2px solid var(--pp-ramp-ink,#fff); outline-offset:3px; }

.senshi-art .pgp-time{
  grid-area:time; justify-self:end; flex:0 0 auto; margin:0;
  font-family:basiic,monospace; font-size:12px; letter-spacing:.4px;
  /* THE READOUT.
     The clock sits at 34% to 61% of the bar. On a palette whose light rises
     left to right that stretch passes through a mid-tone where neither white
     nor dark type reaches 4.5:1 - and there is no room to move it, because
     the title needs dark ground until 33.8% and the clock begins at 34.2%.
     So it stops sitting on the gradient and gets a recessed field of its own,
     which is what a tape deck would have done anyway. Pale plate, sunken
     edge, dark figures, and it reads the same whatever the ramp does under
     it. */
  /* the clock sits on its own plate now - so it takes the second ink, not
     the one the title on the dark end uses. Falls back to the first, so a
     palette that does not set one is unchanged. */
  color:var(--pp-ramp-ink,#fff); text-shadow:0 1px 0 rgba(0,0,0,.35);
  font-variant-numeric:tabular-nums;
}
.senshi-art .pgp-sep{ opacity:.6; padding:0 3px; }

@media (max-width:620px){
  .senshi-art .pgp{ gap:3px 7px; padding:7px 8px; }
  .senshi-art .pgp-t{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pgp-btn{ transition:none; }
  .senshi-art .pgp-btn:active{ transform:none; }
}

/* ==========================================================================
   379. THE THINGS ASH DROPPED IN                               (13 Oct 2026)
   ==========================================================================
   Six sprites and a rename, all from one afternoon of her sending images with
   one line each. They are grouped here rather than filed into the sections
   above because they are the same KIND of change - a slot getting filled -
   and keeping them together is how the next one gets added in one place.
   ========================================================================== */

/* ---- THE RECOLOURED PAINT PALETTE, ON TOP OF THE PLAYER ----
   Ash: "above it. this image, but edited. replace the colors with pixel and
   planets colors, and yes, shift it all so the animation is the same... but
   the color palette is swapped. resize and place above the music player."

   The strip and the player are one stacked object, not two things with a gap:
   the palette's bottom edge IS the player's top border, which is why the
   player gets no top border of its own here and the two sit in a wrapper.

   The source is 500x81 pixel art landing in a column about 270 wide, so the
   scale is fractional whatever we do. Scaling in the browser with pixelated
   rendering beats shipping a pre-shrunk copy: the browser picks the scale
   from the actual column AND from the device pixel ratio, so a retina screen
   gets the full 500px of detail instead of a downsample baked in at build
   time. */
/* no bottom margin: the gap Ash asked to close moved here when the palette
   and the player became one stacked object. The player's lower border and
   the placements box's top border are the same line now. */
.senshi-art .pgp-stack{ display:block; margin:0; min-width:0; }
.senshi-art .pgp-pal{
  display:block; width:100%; height:auto; margin:0;
  image-rendering:pixelated;
  border:1px solid #c9a24e; border-bottom:0;
}
/* and the player loses the border the palette is now providing */
.senshi-art .pgp-stack .pgp{ border-top:0; }

/* ---- THE MARCHING BAND ----
   Ash, pointing at the slot she had left empty: "the box called space for
   something.... this".

   The slot keeps its dashed frame and its hatching - that is what says this
   is her shelf rather than a figure - but it stops being a padded text box
   and becomes a frame around a 566x120 sprite. The band is wider than the
   column at most widths, so it scales down; being a transparent GIF of nine
   separate figures, it takes pixelated rendering for the same reason the
   palette does. */
/* Ash: "the marching band is trapped insdie that box... get rid of the box and
   just put the marching band gif there."

   So there is no box. It is the next thing in the column, at its own 566x120,
   and the column lets it hang past its own edges rather than squeezing it -
   which is what the frame was doing, and before that what width:100% was
   doing. A band that marches off the side of the page is a better answer than
   a band drawn at 90% of itself. */
.senshi-art .pp-band{
  display:block; width:566px; height:120px; max-width:none;
  margin:4px auto 10px;
  /* in the paragraph row now - see thread_ash - where it is centred in the
     full width of the box and the nudge below is for the column it has left;
     it is cancelled there, two rules down */
  /* Ash: "move in band left about 16px". A transform rather than a margin:
     it shifts what you see without changing what the band takes up, so the
     centring maths underneath stays the same at every width. */
  transform:translateX(-17px);
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}
/* the column must not clip it when it is wider than the column is */
.senshi-art .pp-idcol--r{ overflow:visible; }
/* Ash: "the dimension of the scroll boxs and menus should be the same as the
   naoko template." The band is the 134px that made her right column taller
   than Naoko's, so it moved into the paragraph box. Then: "put the marching
   band back in the top right of the box. no shrinking." It is the first
   thing in the box (zone_head). It was a block on a row of its own first,
   because at 566px beside a 300px column there was no room for both. */
/* ...and then: "can i get the jump to more narrow and sit next to the
   marching band." So it IS a float now that the column has made room for
   it: right, at the top, with the navigation column floated left beside it,
   and the paragraph beginning under whichever of the two ends first. */
/* no left margin of its own: the column's right margin is the gap, and both
   margins count against the 821 - with 14 on each side the pair came to 826
   and the column dropped under the band on the first build */
.senshi-art .pp-zone .pp-band{ float:right; margin:0 0 12px 0; transform:none; }
/* the paragraph starts UNDER the band, not in the nine pixels between the
   band and the column - which is exactly where its opening bracket went on
   the first build. clear:right only clears the band, so the text still runs
   beside the navigation column where that column is the taller of the two. */
.senshi-art .pp-zone .pp-band ~ .pp-zone-note{ clear:right; }
@media (max-width:760px){
  .senshi-art .pp-zone .pp-band{ float:none; margin:0 auto 12px; }
}

/* ---- BADGES ----
   Ash: "create a spot for something called badges and then insert this (its
   the kanto badges from pokemon)."

   Pinned to 300x100, which is exactly 2x the 150x50 source. Eight badges in
   150px is about 17px each; at a fractional scale the browser drops whole
   rows out of a badge and they stop being recognisable. 2x with pixelated
   rendering keeps every pixel, and the row is allowed to scroll sideways on a
   narrow screen rather than shrink. */
.senshi-art .pp-badges{
  display:flex; align-items:center; gap:10px;
  margin:9px 0 0; padding:9px 11px 10px;
  border-top:1px solid color-mix(in srgb, var(--head) 24%, transparent);
}
.senshi-art .pp-badges-k{
  margin:0; flex:none;
  font-family:rainyhearts,monospace; font-size:12px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--head,#5A3268);
}
.senshi-art .pp-badges-img{
  display:block; width:300px; height:100px; flex:none;
  image-rendering:pixelated;
}
@container (max-width:430px){
  .senshi-art .pp-badges{ flex-direction:column; align-items:flex-start; }
}

/* ---- THE TRAINER CARD, LOUDER ----
   Ash: "the formating of the basics box. make the information more....
   pronounced... the eye should go there before the placements."

   The problem was not size, it was rank. Her placements column is a tall
   striped ladder of fourteen banded rows running the whole height of the
   page, and next to that a grid of quiet little chips reads as a footnote
   however big the type gets. So the card is given the three things the
   placements do not have: a filled banner instead of a hairline heading, a
   gold frame instead of a tinted one, and a label band per row that is warmer
   and darker than the lavender ones opposite.

   The values also go up to 15px with real weight, which is the one change
   that is actually about size - 13.5px was below the placements' own 13.5 in
   apparent weight because those sit on white and these sit on lace. */
.senshi-art .pp-places--stats{
  /* the butterfly hangs off this box's corner now, so this is the positioning
     context it is measured against - and it must not clip, or the half that
     overhangs disappears */
  position:relative; overflow:visible;
  padding:0 0 12px;
  border:2px solid #c9a24e;
  border-radius:10px;
  background:var(--pp-paper,#FFFFFA);
  box-shadow:0 0 0 1px rgba(255,255,255,.8) inset,
             0 6px 18px -12px rgba(26,20,32,.75);
}
/* the banner. The ::after rule in the shared .pp-h--tight draws a little
   gradient underline, which makes no sense inside a filled bar - it is turned
   off here rather than edited, because the placements heading still wants it */
.senshi-art .pp-h--card{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 10px; padding:7px 12px 6px;
  border-radius:8px 8px 0 0;
  background:var(--pp-ramp, linear-gradient(90deg,#6a1535,#b23965,#f9a5b9));
  border-bottom:1px solid var(--pp-ramp-edge, #c9a24e);
  font-size:15px; letter-spacing:2px; color:var(--pp-ramp-ink, #FFFFFA);
  text-shadow:0 1px 0 rgba(26,20,32,.45);
}
.senshi-art .pp-h--card::after{ display:none; }
/* Ash: "more cute decor" - the blossom, one at each end of the banner. The
   right-hand one is mirrored so the pair reads as a frame rather than as the
   same sticker twice. */
.senshi-art .pp-h-bloom{
  display:block; flex:none; width:25px; height:31px;
  image-rendering:pixelated;
}
.senshi-art .pp-h-bloom--r{ transform:scaleX(-1); }

/* the rows. Label band left, value on paper right, a hairline between - the
   same object as .me-dl opposite, built warm instead of cool so the two boxes
   are legibly a pair with one of them leading. */
.senshi-art .pp-places--stats .nk-signs--tight{
  gap:0; padding:0 12px;
  border:1px solid color-mix(in srgb, #c9a24e 55%, var(--paper));
  border-radius:0; border-left:0; border-right:0;
}
.senshi-art .pp-places--stats .nk-chip--stat{
  align-items:center; gap:0; padding:0; min-width:0;
  border-top:1px solid color-mix(in srgb, #c9a24e 34%, var(--paper));
}
/* "spotting the one pixel that is off" ran out past its cell and the next
   column's label band painted over the end of it. A flex item defaults to
   min-width:auto, which is min-content - and min-content for a line of text is
   the longest WORD, so the value box refused to shrink below the width it
   wanted and overflowed instead of wrapping. min-width:0 is the whole fix. */
.senshi-art .pp-places--stats .nk-chip--stat > *{ min-width:0; }
/* an odd number of rows leaves the last one half the width with a dangling
   rule beside it; it takes the whole row instead */
/* NOT IN THE SPLIT COLUMNS. This spans the last row when there is an odd
   number of them, which was right while the box was one run of stats - an
   odd count left a half-empty row and a full-width last line filled it.

   In the COLUMN-MAJOR split it is wrong, and it broke the thing the split
   exists for. The build turns the corner at (n+1)/2, so nine rows means
   five chart facts down the left and four life facts down the right, which
   is exactly the arrangement Ash asked for: "all astrological info listen
   in the left column... the right column for general info." A spanning row
   takes one whole row out of that grid, the remaining eight reflow into
   four, and the fifth chart fact - sect - lands at the top of the LIFE
   column. Which is what happened the moment sect arrived.

   So the span is scoped off the split. An odd count there is not a gap, it
   is simply a shorter right-hand column. */
.senshi-art .pp-places--stats
  .nk-chip--stat:last-child:nth-child(odd):not(.nk-stat-col--split *){
  grid-column:1 / -1;
}
/* Ash, three times now: "badges are still crushed looking btw."

   I had been measuring at a 1500px viewport, where the value cell clears the
   414px the badges want and they draw at exactly 1:1. On her actual page the
   content column is about half that, the cell is around 200px, and max-width
   was pulling the badges down to HALF size - a fractional downscale on pixel
   art, which is what crushed means.

   So the badges row takes the whole width of the card. That is the only cell
   on it wide enough to hold them at their own size at any window she will
   actually use, and it is one row of ten, so the card is still the two-column
   card she asked for. */
/* ...AND THEN IT STOPPED SPANNING AT ALL. Ash: "again. we have had this
   problem for like a week. the badges box should be the same size as the rest
   of the stats.. just a single column... they should be displayed native size
   in a box the same size as the rest of the stats... it's just an easter egg
   taking up way too much room."

   She is right, and the week was spent on the wrong end of the problem. Every
   fix made the CELL bigger to fit a 414px picture; the picture is an easter
   egg, and the picture is what should have given way. The file is the art at
   1:1 again - 138x17 - and the row is a row like every other row, in the life
   column, no span, no pinned grid-row, nothing in the card that knows the
   badges are special. See .pp-badges-img below. */
/* the first row of EACH column, not just the first chip: two columns means
   two rows sit at the top and both of them want no rule above */
.senshi-art .pp-places--stats .nk-chip--stat:nth-child(-n+2){ border-top:0; }
/* Ash: "badges image is still crushed looking. why not narrow the pink column
   next to it, and widen the column the badges are in?"

   Exactly that. The badges are 414px of art and the value cell was 372px, so
   max-width was pulling them down to 0.9 - a fractional downscale on pixel art
   drops part of every third row, which is what "crushed" was. 86px of label
   band for the word BADGES was the thing in the way: at 66px, with the two
   cells' padding trimmed, the value cell clears 414 and the badges draw at
   their own size with nothing scaling them at all. Nothing else in the column
   needs the extra - the longest label is TROUBLE WITH and it already wrapped
   to two lines at 86. */
.senshi-art .pp-places--stats .nk-chip--stat .nk-body{
  flex:0 0 66px; min-width:66px; padding:7px 6px 7px 7px;
  font-family:rainyhearts,monospace; font-size:12px; letter-spacing:1.1px;
  text-transform:uppercase; line-height:1.25;
  color:#6a1535;
  background:color-mix(in srgb, #f2c0bf 52%, var(--paper));
  border-right:1px solid color-mix(in srgb, #c9a24e 34%, var(--paper));
  align-self:stretch; display:flex; align-items:center;
}
.senshi-art .pp-places--stats .nk-chip--stat .nk-sign,
.senshi-art .pp-places--stats .nk-chip .nk-sign{
  flex:1 1 auto; min-width:0;
  padding:7px 8px 7px 9px;
  font-size:15px; font-weight:600; line-height:1.3;
  text-align:left; color:#2e2838;
}
@container (max-width:430px){
  .senshi-art .pp-places--stats .nk-chip--stat:nth-child(-n+2){ border-top:1px solid
    color-mix(in srgb, #c9a24e 34%, var(--paper)); }
  .senshi-art .pp-places--stats .nk-chip--stat:first-child{ border-top:0; }
}
/* the badges and the blank field were sitting against the card's old padding;
   the card has none now, so they carry their own */
.senshi-art .pp-badges{ margin-left:12px; margin-right:12px; }
.senshi-art .pp-places--stats .pp-zone--in{ margin:0 12px; }

/* ---- THE RATING, ONE COMPONENT ---- 
   Ash: "it's a rating system set of graphics... for the Rodden rating
   (translate grade into stars and display both) for recipes, for episode
   ratings... whatever. i just want it internally consistant."

   Then: "can you use the animated rating stars? there is a set of non animated,
   and animated ones."

   So the CSS-tiled row is gone and the artwork is her own: nine 84x17 strips,
   1 to 5 in halves, four frames each with a glow travelling across. The build
   picks the file; this stylesheet only has to size it. That is still one
   component for every rating on the site - the consistency she asked for now
   lives in one lookup in build_ash_page.py rather than in two CSS properties.

   SIZE. 1:1, no scale at all. 2x was tried first and the row did not fit: the
   strip, the grade chip and the number together need about 271px and the value
   cell in a two column trainer card has about 278 - close enough that the fifth
   star clipped and the chip wrapped to its own line. At 1:1 the stars are 15px
   against 13.5px text, which is the right proportion for a value anyway. Any
   override has to be a whole multiple of 84: a fractional scale drops rows out
   of a 15px star, and pixelated rendering makes that worse, not better.

   REDUCED MOTION is handled in the markup, by the <source> inside <picture>,
   not here - a CSS media query cannot change an img's src, and the static set
   is a different file rather than the same file held still. */
.senshi-art .pr{
  display:inline-flex; align-items:center; gap:9px;
  vertical-align:middle;
}
.senshi-art .pr-pic{ display:block; flex:none; font-size:0; }
.senshi-art .pr-img{
  display:block;
  width:84px;               /* 1:1. keep any override a multiple of 84 */
  height:auto;              /* the static set is 15 tall, the animated 17 */
  image-rendering:pixelated;
}
/* the grade. It is the part an astrologer reads, so it gets the weight, and
   the stars are the part everyone else reads. Ash: "display both." */
.senshi-art .pr-g{
  flex:none; padding:2px 7px 1px;
  font-family:rainyhearts,monospace; font-size:14px; letter-spacing:1.4px;
  color:#FFFFFA; background:#6a1535;
  border:1px solid #c9a24e;
  cursor:help;                 /* it carries the gloss in its title */
}
.senshi-art .pr-n{
  flex:none;
  font-family:rainyhearts,monospace; font-size:13px; letter-spacing:.8px;
  color:color-mix(in srgb, var(--head) 78%, var(--paper));
}
.senshi-art .pr--unset .pr-n{ color:rgba(90,50,104,.5); }

/* never clip: if a row runs out of cell, it wraps rather than losing the end
   of itself. Measured in the trainer card, where 26px stars plus the grade
   chip plus the numeral overran the value cell and cut "AA 5 / 5" in half. */
.senshi-art .pr{ flex-wrap:wrap; row-gap:4px; }
/* in the trainer card the row sits in a value cell, so it loses the cell's
   text leading and drops to 1x tiles - 13px, the tile's own size, which is the
   nearest exact multiple that fits the column with the grade beside it */
.senshi-art .pp-places--stats .nk-chip--stat .nk-sign:has(.pr){
  padding-top:5px; padding-bottom:5px;
}
.senshi-art .pp-places--stats .pr{ --pr-size:13px; gap:7px; }
.senshi-art .pp-places--stats .pr-g{ font-size:12px; padding:1px 5px 0; }
/* the recipe window's rating line, under the serves/takes/oven row */
.senshi-art .rb-rating{
  display:flex; align-items:center; gap:10px;
  margin:7px 0 0; padding:7px 0 0;
  border-top:1px solid color-mix(in srgb, var(--head) 20%, transparent);
}
.senshi-art .rb-rating-k{
  font-family:rainyhearts,monospace; font-size:12px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--head,#5A3268);
}
@container (max-width:430px){
  /* one tile size down, still an exact multiple of 13 */
  .senshi-art .pr{ --pr-size:13px; gap:6px; }
}

/* ---- THE CORNER STICKER ----
   Ash: "place as sticker on top right corner of pp-panel w98-bevel-inset
   pp-idbox" - the iridescent butterfly.

   A sticker is stuck ON a box, not laid out inside one, so it is taken out of
   the flow and hung over the corner: nothing in the box moves, and the box's
   own height is unchanged. The overhang is deliberate - a sticker whose edges
   line up with the thing it is stuck to looks like a diagram label.

   .pp-idbox gets position:relative for this and overflow stays visible, which
   it already is; if it were ever clipped the butterfly would lose her wingtips
   rather than disappear, which is why the overhang is small. */
.senshi-art .pp-idbox{ position:relative; }
.senshi-art .pp-sticker{
  position:absolute; z-index:4;
  width:92px; height:92px;
  image-rendering:pixelated;
  pointer-events:none;        /* it must never eat a click meant for the box */
  filter:drop-shadow(0 2px 3px rgba(26,20,32,.28));
}
/* Ash: "move it to the top right corner of the box actually holding the stats.
   basically the top right corner of the box that has Time: 9:56."

   .pp-statwrap is that box and nothing else: it wraps the row grid and is the
   only positioning context between the sticker and it, so top:0 right:0 means
   the grid's own corner rather than the card's. The overhang is about a third
   of the sprite, which puts its upper wing on the rose banner above - a pale
   butterfly needs something darker than paper behind part of it to read. */
.senshi-art .pp-statwrap{ position:relative; }
/* ...AND THEN THE GRID'S BOX STARTED CLIPPING. The stats box scrolls
   vertically when a card runs long, and a box that scrolls clips, so a
   sticker hung over its top edge lost her upper wings to the band above.
   Ash: "the butterfly sticker is getting clipped. it needs to move above the
   'new to charts' button."

   THE SEAT. pp_profile writes a zero-height row between the chart panel and
   the card - outside the box that clips, inside the column - and the sticker
   hangs from that. bottom:-16px puts her feet 16px onto the band's top edge,
   which is the band's own padding and clear of the button, and the rest of
   her stands on the chart panel's dark corner, where a pale butterfly finally
   has something behind her. The overhang to the right is a little less than
   it was, since there is no longer a box edge for it to argue with. */
.senshi-art .pp-seat{
  position:relative; height:0; flex:0 0 0; overflow:visible; z-index:5;
}
.senshi-art .pp-seat .pp-sticker--tr{
  top:auto; bottom:-16px; right:-22px;
  transform:rotate(9deg);
}
@media (max-width:620px){
  /* smaller and tucked in, so she does not hang off the side of a phone */
  .senshi-art .pp-seat .pp-sticker--tr{ width:60px; height:60px; bottom:-10px; right:-4px; }
}
/* ...OR ON A ROW OF THE CARD. Ash: "put the butterfly sticker on top of the
   luck stat instead. still hanging over like a sticker." pp_profile writes
   her into the row sticker_on names, and she hangs off it the way the corner
   version hung off the grid: 92px tall on a 37px row, so she reaches 24px up
   into the row above and the rest down into the row below, turned the same
   nine degrees. right:6px, not negative: the stats box clips at its own edge
   (it scrolls, so it must), and a wing past that edge is a wing cut off,
   which is how this started. The overhang is up and down instead. She sits
   over the empty end of the value cell, past the number. */
/* Then: "move the butterfly about 60px right." That is 54px PAST the box's
   edge, and the box clips, so she cannot be a child of the row any more.
   She is a child of the COLUMN now - after the card in tree order, which
   anchor positioning requires - and the row is her anchor: pp_profile marks
   it nk-chip--anchor, and top/right are read off it. The column clips
   nothing, so the overhang is simply drawn. Anchor positioning is Baseline
   in all three engines as of 2026; where it is not understood she is
   hidden rather than dropped somewhere at random. */
.senshi-art .nk-chip--anchor{ anchor-name:--pp-stuck; }
.senshi-art .pp-idcol--r{ position:relative; }
.senshi-art .pp-idcol--r > .pp-sticker--on{
  position:absolute; position-anchor:--pp-stuck;
  /* 24px up into the row above, as before; right edge 54px past the row's
     right edge, which is 60 to the right of where she sat inside it */
  top:calc(anchor(top) - 24px);
  right:calc(anchor(right) - 54px);
  transform:rotate(9deg);
}
@supports not (anchor-name: --x){
  .senshi-art .pp-idcol--r > .pp-sticker--on{ display:none; }
}
@media (max-width:620px){
  .senshi-art .pp-idcol--r > .pp-sticker--on{
    width:60px; height:60px; top:calc(anchor(top) - 12px); right:calc(anchor(right) + 2px);
  }
}

/* ---- THE SPACE SAVED FOR PFP2 ----
   Ash: "save a space under the jump to bar and hotlinks for a second pfp..
   just like naoko has." The slot takes .pp-pic--b's frame and its 230px
   band, so the column is already the height it will be, with the note set
   the way her other placeholders are set. */
.senshi-art .pp-idnav .pp-pic--slot{
  display:flex; align-items:center; justify-content:center;
  height:230px; background:color-mix(in srgb, var(--paper) 70%, #fff);
}
.senshi-art .pp-slot-t{
  font-family:rainyhearts,monospace; font-size:14px; letter-spacing:.5px;
  color:#8a7f96;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pp-sticker{ filter:none; }
}

/* ---- THE TITLE BAR DOLL ----
   Ash: "can you replace w98-title-icon tb-star with this?"

   24x47, which is more than twice the height of the sub title bar. She is not
   scaled down to fit - at 0.45x a pixel doll turns to soup - so instead she
   stands on the bar and overhangs it upward. The bar keeps its own height
   (nothing below it moves), the overflow is let out, and the row is bottom
   aligned so her feet land on the baseline the star used to sit on.

   The negative top margin is what stops her from making the bar taller: she
   is pulled up out of the flow by the amount she overhangs. */
.senshi-art .pp-bar .w98-title{ overflow:visible; align-items:flex-end; }
.senshi-art .pp-bar{ overflow:visible; }
.senshi-art .tb-doll{
  display:block; flex:none;
  width:24px; height:47px;
  margin:-22px 2px -3px 0;
  image-rendering:pixelated;
  filter:drop-shadow(0 1px 0 rgba(26,20,32,.35));
}
@media (max-width:620px){
  /* on a phone the bars are tight enough that an overhanging doll starts
     colliding with whatever is above the window - she sits in the bar */
  .senshi-art .tb-doll{ width:16px; height:31px; margin:-10px 2px -2px 0; }
}

/* ---- THE PARTY BULLET ----
   Ash: "place this as a bullet point in front of the word party in the cat
   profile box." 14x21, four frames, so it is an <img> in the heading and the
   heading becomes a flex row to keep it on the text's baseline rather than on
   the line box's. */
.senshi-art .pp-panel--party .pp-h{
  display:flex; align-items:center; gap:7px;
}
.senshi-art .pp-h-bullet{
  display:block; flex:none; width:14px; height:21px;
  image-rendering:pixelated;
}

/* ---- THE JUNK DRAWER, WITH SOMETHING IN IT ----
   Ash: "my junk drawer", and the 200-episodes banner.

   A wrapping flex row rather than a grid: the things that go in a junk drawer
   are whatever size they are, and a grid would either stretch them or leave
   holes. Each one sits on paper with a thin frame, like a scrap taped down.
   One item today; the row is already the right shape for twenty. */
.senshi-art .pp-panel .junk-grid{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  margin:0; padding:0; list-style:none;
}
/* Ash: "don't frame the images." The paper card and its hairline are gone -
   the item is now only a position in the row. */
.senshi-art .pp-panel .junk-item{ margin:0; padding:0; }
/* Ash: "don't frame the images. don't shrink the images." So no ceiling and
   no card: every sprite at its own size, straight onto the confetti. max-width
   stays as the one exception, because a 384px sprite in a 300px column on a
   phone would otherwise push the page sideways. */
.senshi-art .pp-panel .junk-item img{
  display:block; max-width:100%;
  width:auto; height:auto;
  image-rendering:pixelated;
  /* the site gives every content img a 3px cream border and a cream fill, so
     a transparent sprite sits on a little paper card. That IS the frame she
     asked to lose, and it is on the img rather than on the li - which is why
     dropping the li's card on its own changed nothing. */
  /* and the 2px cream drop shadow that goes with them: it was leaving a
     little gold corner bracket on every sprite once the border went. */
  border:0; background:none; padding:0; box-shadow:none;
}

/* ---- SECOND PASS ON THE TRAINER CARD, AND THE CHART'S BACKGROUND ----
   One round of her looking at it. Four things. */

/* 1. Ash: "text is too big inside trainer card... either too big or too bold...
   i like the font in the header that says trainer card". The header is basiic,
   the site's own pixel face. So the values take basiic too and come down from
   15/600 to 13.5/400 - the weight was doing most of the shouting, and a pixel
   face at 13.5 is still bigger on the page than the 13.5px sans the placements
   use because basiic has a taller x-height. */
.senshi-art .pp-places--stats .nk-chip--stat .nk-sign,
.senshi-art .pp-places--stats .nk-chip .nk-sign{
  font-family:basiic,monospace;
  font-size:13.5px; font-weight:400; letter-spacing:.3px; line-height:1.45;
}

/* 2. Ash: "the flower decoration in the header of the trainer card, don't
   shrink it. grow the header." Natural 38x47, and the banner's padding comes
   down so the blossom is what sets its height rather than being squeezed into
   a height the text chose. */
.senshi-art .pp-h-bloom{ width:38px; height:47px; }
.senshi-art .pp-h--card{ padding:6px 14px; min-height:59px; }

/* 3. Ash: "put the badges on the trainer card stats. just put the image
   inside." Then, a week of the cell growing to fit the picture, and: "they
   should be displayed native size in a box the same size as the rest of the
   stats."

   NATIVE SIZE: the file is 138x17, which is the eight badges exactly as she
   sent them with the empty canvas around them trimmed, and it is drawn at
   138x17. No scale in either direction, so nothing can crush it; no max-width,
   because at 138 there is no cell on the card it does not fit. The cell keeps
   the padding every other value has, so the row stands the height every other
   row does - a 17px picture in a 15px-type row is a row. */
.senshi-art .pp-places--stats .pp-badges-img{
  display:block; width:138px; height:17px;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}

/* THE GREY CELL. Ash: "gray out an extra box if there." The card is two
   columns of equal rows - the chart facts down one, the life down the other -
   and when one column is a row short, the gap is a cell: same frame, same
   rule above, greyed, empty. card_rows() writes it; this only has to make it
   look like a slot nobody has filled rather than a hole in the box. */
.senshi-art .pp-places--stats .nk-chip--empty{
  background:color-mix(in srgb, #8a7f96 11%, var(--paper));
  box-shadow:inset 0 0 0 1px rgba(138,127,150,.14);
}
.senshi-art .pp-places--stats .nk-chip--empty .nk-body{
  background:color-mix(in srgb, #8a7f96 16%, var(--paper));
  color:transparent;
}

/* ---- THE GAME SHEET ON THE TRAINER CARD ----
   Ash: "remember this from the homepage?: HP: MAG: Luck: 444 / 444 EXP: 14155
   it's inside the mini 魔法少女.exe box. take this and put it inside the stats
   box." The meters ARE index.css's .w98-meter - the homepage component, not a
   copy of it - so they take the card's --bevel-hi/--bevel-lo frame and the pp
   card's --accent-2 blush fill exactly as they do on the homepage. All this
   adds is the shape of the cell: a span in a value cell, so it is made a
   block and given the row's width, and it breathes the way the homepage's do
   (ashBreath is index.css's keyframe; the second meter lags .9s there too, so
   they are not one blinking object). */
.senshi-art .pp-places--stats .nk-sign .w98-meter{
  display:block; width:100%; max-width:100%; margin:3px 0;
  animation:ashBreath 4.5s ease-in-out infinite;
}
.senshi-art .pp-places--stats .nk-sign .pp-meter--lag{ animation-delay:.9s; }
@media (prefers-reduced-motion: reduce){
  .senshi-art .pp-places--stats .nk-sign .w98-meter{ animation:none; }
}
/* the counter is a number like any other value; the class is only for js/xp.js */
.senshi-art .pp-places--stats .pp-xp{ font-variant-numeric:tabular-nums; }

/* ---- A LINK OUT OF THE CARD ----
   Ash: "link out to nightlight astrology when it's clicked... underline to
   show it's a link, (i think our links show up in a cute color, not
   traditional bright blue)." The cute colour is the site's --purple #5A3268,
   the one .nk-more and the whole chip box already set type in; underlined,
   because in a column of plain values the colour alone would not say "link".
   The underline is the palette's second flat so it reads as the page's, and
   hover fills it in. */
.senshi-art .pp-places--stats .nk-sign a.pp-out{
  color:#5A3268; text-decoration:underline;
  text-decoration-color:var(--pp-link-bg, #8a3336);
  text-decoration-thickness:2px; text-underline-offset:3px;
  text-decoration-skip-ink:none;
}
.senshi-art .pp-places--stats .nk-sign a.pp-out:hover,
.senshi-art .pp-places--stats .nk-sign a.pp-out:focus-visible{
  color:var(--pp-link-bg, #8a3336); text-decoration-color:currentColor;
  outline:none;
}

/* 4. Ash: "move the music player above the paint palette gif." The shared edge
   moves with them: the player keeps a full border and the palette drops its
   TOP one, the mirror of how it was. */
.senshi-art .pgp-pal{ border-top:0; border-bottom:1px solid #c9a24e; }
.senshi-art .pgp-stack .pgp{ border-top:1px solid #c9a24e; border-bottom:0; }

/* ---- THE CHART'S BACKGROUND ----
   Ash: "move birth chart up and pic a good background."

   This started as a tile out of her backgrounds folder and is now her own
   starfield - see the rule further down, which is the one that wins. The idea
   survived the swap: the panel is chosen to match the wheel rather than to
   decorate it, so the sky half of the chart and the field around it read as
   ONE sky with the zodiac band floating in it, instead of a dark wedge pasted
   onto cream. */
.senshi-art .pp-wheel{
  /* Ash: "use this for the chart background instead." Her own starfield,
     rebuilt clean by build_chartstars.py - the file she sent is a JPEG and a
     JPEG of 1px stars is mostly ringing, so the stars were found once and
     repainted on the flat sky. The colour under it is that same sky, so the
     tile's edges do not show where it wraps. */
  /* THE COLOUR UNDER THE TILE IS THE TILE'S OWN, which is the only value
     that cannot show a seam where it wraps. It was a warm brown for a long
     stretch, as the complement of the wheel's hue 233 sky, then a plum;
     it is a dark WINE now, hue 337 at the same luminance, half way between
     those two the short way round the wheel. Ash: "i miss the brown. but i
     want the purple.. can we get half way in between?" Before that: "a dark
     'warm' navy. I like the job the brown does keeping it warm and not too
     pronounced." See SKY_OUT in scripts/build_chartstars.py, which is where
     the number is decided and where the reasoning lives. */
  background:#2c1820 url("images/backgrounds/chartstars.png") repeat;
  border-color:#c9a24e;
  box-shadow:inset 0 0 0 2px rgba(255,253,246,.22),
             0 3px 14px -7px rgba(26,20,32,.7);
}
/* the twinkle, over the still background and under the wheel. js/chartstars.js
   inserts it; with no script, or with reduced motion asked for, it is never
   created and the still background above is what shows. */
.senshi-art .pp-wheel .nkw-stars{
  position:absolute; inset:0; z-index:0;
  display:block; width:100%; height:100%;
  image-rendering:pixelated;
  pointer-events:none;
}

/* ---- THE JUNK DRAWER'S OWN BACKGROUND ----
   Ash: "the junk drawer: use this for a background", a 78x110 three frame
   confetti tile.

   It goes on the panel rather than on the items, which is the whole point of
   dropping the frames: the sprites now sit directly on the confetti with
   nothing between them, the way things actually sit in a drawer.

   The heading keeps a paper strip behind it. Twelve-point type on moving
   confetti is unreadable, and the one thing in this box that is words should
   stay words. */
.senshi-art .pp-panel--junk,
.senshi-art .pp-panel:has(> .junk-grid){
  background:#fffdf7 url("images/backgrounds/junkbg.webp") repeat;
}
.senshi-art .pp-panel:has(> .junk-grid) > .pp-h,
.senshi-art .pp-panel:has(.junk-grid) .junkdump-sub{
  padding:2px 8px; border-radius:5px;
  background:color-mix(in srgb, var(--pp-paper,#FFFFFA) 86%, transparent);
}
.senshi-art .pp-panel:has(.junk-grid) .junkdump-sub{
  /* table so the strip hugs the sentence. inline-block still took the full
     line here, because the <p> is a grid/flex child further up. */
  display:table;
}

/* ---- THE RECIPES, AS SHE SENT THEM ----
   Ash handed over three finished recipe pages - "take and translate to the
   page plz" - and they are grouped, lead-in'd and cross-referenced in ways the
   placeholder recipes never were. Three things the box did not have before.

   1. INGREDIENT GROUPS. Her pages file ingredients under Marinade, To Serve,
   Gear. On a marinade recipe that grouping is how you read it, not decoration,
   so the group names are rows of the same list rather than a second list, and
   they are styled as rules rather than as items - no bullet, small caps, a
   hairline under. */
.senshi-art .rb-ing li.rb-ing-g{
  list-style:none;
  margin:11px 0 3px; padding:0 0 2px;
  font-family:rainyhearts,monospace; font-size:11.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--head,#5A3268);
  border-bottom:1px dashed color-mix(in srgb, var(--head) 30%, var(--paper));
}
.senshi-art .rb-ing li.rb-ing-g:first-child{ margin-top:0; }
.senshi-art .rb-ing li.rb-ing-g::marker{ content:""; }

/* 2. STEP LEAD-INS. Every step on her pages opens with a bolded phrase that
   says what the step IS, then the detail. Keeping that split means a reader
   can skim seven leads instead of seven paragraphs. */
/* the element is in the selector because .senshi-art .block b sets every bold
   inside the window to the panel's accent, and that beats a bare class. */
.senshi-art .rb-steps li b.rb-step-k,
.senshi-art .rb-note b.rb-note-k{
  font-family:rainyhearts,monospace; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; font-weight:400;
  /* the literal, NOT var(--accent): the recipe panel redefines --accent to
     the cream #f6ebbe for its own chrome, so a lead-in that asked for the
     accent came out cream on cream and read as a blank gap before the step. */
  color:#6a1535;
}
.senshi-art .rb-steps li u{
  text-decoration-color:#b23965;
  text-underline-offset:2px;
}

/* 3. THE CONTENTS PAGE.
   Ash: "put a selector for different recipe types... think like the table of
   contents to a cookbook sorted by course or ingredent..."

   So the scroll column is a contents page: course headings in cookbook order,
   the recipes filed under them, and what each one is built on in small type
   under its title. The headings are <p>, not list items - a course is a
   section of the contents, not something you can cook. */
/* ---- the jump links ----
   Ash: "add links below the word contents, to jump to a section. i wanna keep
   the scroll feature, so the link jumps to that catagory inside the scroll."

   A wrapped row of small chips. They are plain anchors: the browser scrolls
   the nearest scrollable ancestor to bring a target into view, and here that
   is .rb-toc, so the contents box moves and the page stays put. scroll-margin
   on the headings leaves the course heading a few pixels clear of the box's
   top edge instead of flush against it. */
/* Ash: "the contents links... i want to place the recipe box next to the links
   to the left, pushing the links to the right side of the box."
   A row: the pink box holds the left, the chips take whatever is left of the
   line and wrap inside it. align-items:flex-start so the box's top edge lines
   up with the first row of chips rather than floating in the middle of them. */
/* .senshi-art .pp-panel p is more specific than .senshi-art .rb-scroll-h, so
   the heading was keeping the panel's 17.6px paragraph margin however small
   its own said to be - the same trap the actions row fell into. */
/* line-height rides along here for the same reason the margin does: the
   panel's own `p` rule outweighs .rb-scroll-h and was setting both. */
.senshi-art .rb-scroll .rb-scroll-h{ margin:0 0 2px; line-height:1; }
/* and it must not clear the float, or it would drop below the recipe box and
   take the chips with it */
.senshi-art .rb-jumprow .rb-scroll-h{ clear:none; }
.senshi-art .rb-jumprow{
  display:flow-root; margin:0 0 7px; flex:0 0 auto;
}
/* The box FLOATS rather than sitting in a flex row beside the chips. Beside it
   the chips only had 139px of line and stacked twelve rows deep - 218px, more
   than the contents box itself. Floated, the chips shorten their lines for the
   box's first 100px and then run the full width of the column underneath it,
   which is about six rows. The chips are inline-blocks for the same reason: a
   flex container makes its own block formatting context and would stand beside
   the float instead of flowing around it. */
/* line-height:1 on the LIST, not on the chip: a chip's own line-height does
   not set the height of the line box it sits in - the parent's does - and the
   column's inherited one was drawing 27px rows around 17px chips. At 19px a
   row, all five rows fit beside the 100px sprite, which is what "no links
   spilling below the gif" needs. vertical-align:top keeps the rows from
   reserving descender space none of them use. */
.senshi-art .rb-jump{ display:block; margin:0; text-align:right; line-height:1; }
.senshi-art .rb-jump-a{
  /* small on purpose: ten chips in a 270px column is three rows, and every
     row they take is a row the contents box loses underneath them */
  /* inline-block, not a flex item: the recipe box beside them is a float, and
     only inline content shortens its lines for one and then runs full width
     underneath it. */
  /* Ash: "align them to the right, and fit them all next to the recipes box
     gif. reduce the padding to make room", then "increase the size of the
     links' text back to where it was." So the type and the letter-spacing are
     back at 10.5 and .7 and the PADDING carries the saving on its own. The
     margin is on the LEFT because the row is right-aligned - a right margin
     would hold every row off the edge it is aligning to. */
  display:inline-block; vertical-align:top; margin:0 0 1px 2px;
  padding:1px 3px;   /* 4 -> 3 so the bigger type still makes four rows */
  border:1px solid color-mix(in srgb, #c9a24e 55%, var(--paper));
  border-radius:999px;
  background:color-mix(in srgb, var(--paper) 55%, #fff);
  /* Ash: "is there room to make the recipe hotlinks font one size bigger?
     ...without moving the recipe box gif?" 10 -> 11px, measured to still
     fit beside the box. */
  font-family:rainyhearts,monospace; font-size:11px; letter-spacing:.2px;
  text-transform:uppercase; text-decoration:none; line-height:1.15;
  color:color-mix(in srgb, var(--head) 82%, var(--paper));
}
.senshi-art .rb-jump-a:hover,
.senshi-art .rb-jump-a:focus-visible{
  background:var(--rb-bar-face);
  border-color:var(--head);
  color:#4a2a5c;
}
/* Ash: "rather than an animated scroll when you pic a food catagory, can it
   just snap. the scroll looks modern." Quite right - a smooth scroll is the
   one thing in this box that could not have existed in 1998. It snaps. */
.senshi-art .rb-toc{ scroll-behavior:auto; }
.senshi-art .rb-course{ scroll-margin-top:6px; }

/* The number of recipes in a course, printed on its heading. This exists
   because the contents DID get cut off once and nothing on screen said so - a
   count is the cheapest way for the page to tell you what it is holding. */
.senshi-art .rb-course-n{
  float:right; opacity:.72; letter-spacing:1px;
}
.senshi-art .rb-course{
  margin:14px 0 5px; padding:3px 8px;
  font-family:basiic,monospace; font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:#FFFFFA;
  background:linear-gradient(90deg,#6a1535,#b23965);
  border:1px solid #c9a24e;
}
.senshi-art .rb-toc > .rb-course:first-of-type{ margin-top:0; }

/* ---- little food icons ----
   Ash: "do we have any favicons to put inside the recipes themselves or the
   selector?" then "drop the icons in where you like. i'll edit down from
   there." Her own 20px favicons, from images/favicons: one on each course bar
   in the contents, one beside each recipe's title. Drawn at 1:1 and pixelated,
   because a 20px sprite scaled by a fraction is a smear. Decoration: empty alt. */
.senshi-art .rb-ico{
  display:inline-block; width:20px; height:20px; vertical-align:-4px;
  margin:0 6px 0 0; image-rendering:pixelated;
  border:0; background:none; padding:0; box-shadow:none;
}
.senshi-art .rb-course .rb-ico{ margin:-3px 6px -3px -2px; }
.senshi-art .rb-title .rb-ico{ vertical-align:-1px; margin-right:8px; }
/* the same favicons inside the recipe text: on each step's lead-in and each
   ingredient group heading (Ash: "use them inside the recipe text"). 1:1 and
   pixelated like the rest, sunk to sit on the small caps' baseline. */
.senshi-art .rb-tico{
  display:inline-block; width:20px; height:20px; vertical-align:-5px;
  margin:0 4px 0 0; image-rendering:pixelated;
  border:0; background:none; padding:0; box-shadow:none;
}
.senshi-art .rb-pick{ display:block; }
.senshi-art .rb-pick-s{
  display:block; margin-top:1px;
  font-family:basiic,monospace; font-size:10px; letter-spacing:.6px;
  text-transform:lowercase;
  color:color-mix(in srgb, var(--head) 62%, var(--paper));
}
/* the selected recipe's own line goes light too, or it disappears into the
   filled label */
.senshi-art .rb-radio:checked + * .rb-pick-s{ color:inherit; }

@media (max-width:900px){
  .senshi-art .pp-idgrid{ grid-template-columns:minmax(0,1fr); }
  /* the placements are NOT forced to one column here: when the box stacks it
     gets wider, not narrower, so two columns is right. The container query on
     .pp-places decides that, and it decides it correctly at every width. */
  .senshi-art .pp-zone{ min-height:90px; }
  .senshi-art .pp-row--id{ grid-template-columns:minmax(0,1fr); }
  .senshi-art .pp-pic{ margin:0 auto; }
}

/* ---- the music corner ----
   Ash: "please insert into profile paragraph... inside their own frame at the
   bottom right of the box. clef, piano, notes."

   Its own frame, floated into the bottom right of the paragraph zone so the
   paragraph she is going to write wraps around it rather than stopping above
   it. Each sprite at its own pixel size - none of these is scaled - and the
   frame is the same cream card the rest of the box uses rather than the
   site-wide photo border, which would put a white rectangle round three
   cut-out gifs. */
/* The iMac picture used to float left in here, and after it the music frame
   - clef, piano, staff in a cream card - floated right. Ash: "move the
   zone-imac.jpg image down into the junk drawer instead", then "remove the
   box with the music images altogether." Both rules went with their
   pictures. The flow-root stays: the navigation column is a float and the
   box still has to contain it. */
.senshi-art .pp-zone--in{ display:flow-root; }

/* ---------------------------------------------------------------- 380. ----
   THE CREDIT AND THE EASTER EGG

   Ash: "credit recipes when they are well... mainstream I guess... like the
   ina garten mac and cheese... small credit at the bottom of the recipe" and
   "so easter egg images in the recipes and the printable recipe cards for
   fun."
   -------------------------------------------------------------------------- */

/* The credit is the smallest type in the box and the last line in it. It is
   NOT italic - the note above it already is, and two italic paragraphs in a
   row stop reading as two different kinds of thing. */
.senshi-art .rb-credit{
  clear:both;
  clear:both;
  margin:12px 0 0; padding:7px 0 0;
  border-top:1px dotted color-mix(in srgb, var(--accent) 45%, var(--paper));
  font-size:11.5px; letter-spacing:.3px; line-height:1.5;
  color:color-mix(in srgb, var(--head) 70%, var(--paper));
}
.senshi-art .rb-credit a{
  color:inherit; text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--accent) 60%, transparent);
  text-underline-offset:2px;
}
.senshi-art .rb-credit a:hover,
.senshi-art .rb-credit a:focus-visible{ color:var(--head); }

/* The egg. Taped into the margin, not framed as an exhibit: a white border
   and a soft drop shadow is what a printed photo stuck on a page looks like,
   and the tilt keeps it from reading as part of the layout.

   It FLOATS so the note wraps around it rather than being shoved down the
   page - the recipe window is a fixed-ish height and a 150px block image
   between the method and the note would push the credit out of sight. */
/* ---- the corner sticker ----
   Ash: "can you make the stickers slightly larger and have them spilling over
   the top right corner of the recipe box? ala, corner sticker?"

   It is pinned to the grid, not to the recipe, because the recipe window
   SCROLLS - and a scroll container clips everything that leaves it whatever
   overflow-x says, so nothing inside the window can hang off its corner. Out
   here it is free to sit half outside.

   About 45% of it hangs past the corner. The part still over the box lands on
   the header's right side, which is empty on every recipe (the title block is
   narrow), and .rb-head keeps a gutter the width of it so a long title cannot
   run underneath.

   No animation. Ash: "no fade in animation with the sticker please. just pop
   in after click." */
.senshi-art .rb-stickers{
  position:absolute; top:0; right:0; width:0; height:0;
  pointer-events:none; z-index:5;
}
.senshi-art .rb-egg{
  /* Ash drew where this goes, twice: over the recipe box's top right corner,
     its bottom landing about where the header's rule is. "the taller ones may
     grow up and right. they also can flow over the end of the entire center
     container.... just don't go past the right column with the main menu."

     So its BOTTOM is what is pinned, not its top: translateY(178px - 100%)
     puts the bottom edge 178px down from the top of the box whatever the
     sticker's height is, and a taller one therefore grows UPWARD out of the
     box rather than downward into the method. That is the whole reason this
     is a transform and not a top offset - with a top offset, a taller sticker
     grows down through the recipe.

     166px clears the header at every width measured (the header's rule sits
     at 174px on a 1500px screen and 201px at 980), so the sticker's foot
     stops inside the header band and never reaches the ingredients. 10px past the right edge is as far out as it
     goes: the centre column has about 35px of air beyond the box before the
     main menu, and this stays well inside it. */
  /* Ash: "reduce it to about 80% of its current size. keep the position of
     the left bottom corner static and shrink in from there." The bottom is
     already static - the translateY below pins it, not a top offset - but the
     sticker is anchored by its RIGHT edge, so losing width would have pulled
     the left edge in with it. --rb-egg-dx is exactly the width the shrink
     took off, so pushing the right edge in by it leaves the left edge where
     it was and the sticker shrinks toward that corner. */
  display:none; position:absolute;
  top:0; right:calc(-10px + var(--rb-egg-dx, 0px));
  width:var(--rb-egg-w, 250px); height:auto;
  border:5px solid #fffaf0; border-radius:2px;
  box-shadow:0 4px 14px rgba(44,32,58,.34);
  /* --rb-egg-y is the height the sticker was PLACED at. Ash: "expand out
     from the top right corner, down and left": translating by that fixed
     height instead of by 100% holds the top edge where it was, so the extra
     height goes down. The right edge is held by --rb-egg-dx above. */
  transform:translateY(calc(166px - var(--rb-egg-y, 100%))) rotate(5deg);
  background:#fffaf0;
}
/* the title block keeps a gutter exactly the width of its own sticker - the
   recipe carries --rb-egg-w for this, since the sticker itself is outside it.
   Capped against the window so a narrow box still leaves the meta row
   somewhere to live. */
.senshi-art .rb-recipe{ --rb-egg-w:0px; }
.senshi-art .rb-head{
  padding-right:min(calc(var(--rb-egg-w) - 6px), 52cqw);
}
/* The sticker grew down and left (Ash: "expand out from the top right corner,
   down and left"), so its foot now reaches past the header's rule and sat on
   the METHOD label. The header grows by exactly what the sticker grew,
   carried per recipe as --rb-egg-foot, so the columns start below it. */
.senshi-art .rb-recipe[style*="--rb-egg-foot"] .rb-head{
  min-height:calc(160px + var(--rb-egg-foot, 0px)); box-sizing:border-box;
}
@container (max-width:430px){ .senshi-art .rb-head{ min-height:0; } }

@container (max-width:430px){
  /* nothing to spill over: the box is as wide as the screen */
  .senshi-art .rb-head{ padding-right:0; }
  .senshi-art .rb-ing{ float:none; width:auto; }
  .senshi-art .rb-egg{
    top:0; right:-8px; width:150px;
    transform:translateY(calc(150px - 100%)) rotate(4deg);
  }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .rb-egg{ transform:none; }
}

/* ---- the recipe body ----
   Ash: "float the sticker right, and the ingredients left. the method can span
   across below those two elements", and the rule behind it: "the text should
   stay within reading disatnace, and any decoration is just that... not to
   move the text around."

   .rb-cols was a two-column GRID, and a grid item ignores float and clear
   entirely - which is why the method once sat beside the ingredients instead
   of flowing past them, and why the ingredients were stuck at a grid track's
   width. It is a plain block; the float does the layout.

   The method does NOT clear. It flows in the channel beside the shopping list
   and widens to the full width the moment the list ends. clear:both put it
   under the list and left a dead rectangle of paper next to it. */
.senshi-art .rb-cols{ display:block; }
/* the right margin is the gutter between the two columns: a numbered list's
   markers hang into its own left padding, and without this the method's "2."
   landed on the end of an ingredient line */
.senshi-art .rb-ing{
  float:left; width:min(46%, 330px); min-width:0; margin-right:26px;
}
.senshi-art .rb-steps{ padding-top:2px; }
/* nothing after the float shares a line with it */
.senshi-art .rb-note{ clear:both; }
#rb-r-one:checked ~ .rb-grid .rb-egg--one,
#rb-r-two:checked ~ .rb-grid .rb-egg--two,
#rb-r-three:checked ~ .rb-grid .rb-egg--three,
#rb-r-four:checked ~ .rb-grid .rb-egg--four,
#rb-r-nonna:checked ~ .rb-grid .rb-egg--nonna,
#rb-r-macncheese:checked ~ .rb-grid .rb-egg--macncheese,
#rb-r-cabbagesoup:checked ~ .rb-grid .rb-egg--cabbagesoup,
#rb-r-fishpiccata:checked ~ .rb-grid .rb-egg--fishpiccata,
#rb-r-chickenpiccata:checked ~ .rb-grid .rb-egg--chickenpiccata,
#rb-r-lemonchicken:checked ~ .rb-grid .rb-egg--lemonchicken,
#rb-r-engagement:checked ~ .rb-grid .rb-egg--engagement,
#rb-r-smothered:checked ~ .rb-grid .rb-egg--smothered,
#rb-r-garlicshrimp:checked ~ .rb-grid .rb-egg--garlicshrimp,
#rb-r-redbeans:checked ~ .rb-grid .rb-egg--redbeans,
#rb-r-potroast:checked ~ .rb-grid .rb-egg--potroast,
#rb-r-chili:checked ~ .rb-grid .rb-egg--chili,
#rb-r-swisschicken:checked ~ .rb-grid .rb-egg--swisschicken,
#rb-r-creamedspinach:checked ~ .rb-grid .rb-egg--creamedspinach,
#rb-r-grilledpotatoes:checked ~ .rb-grid .rb-egg--grilledpotatoes,
#rb-r-garlicpotatoes:checked ~ .rb-grid .rb-egg--garlicpotatoes,
#rb-r-redcabbage:checked ~ .rb-grid .rb-egg--redcabbage,
#rb-r-applesaucebread:checked ~ .rb-grid .rb-egg--applesaucebread,
#rb-r-nightdrink:checked ~ .rb-grid .rb-egg--nightdrink,
#rb-r-moonmilk:checked ~ .rb-grid .rb-egg--moonmilk,
#rb-r-crawfish:checked ~ .rb-grid .rb-egg--crawfish,
#rb-r-brulee:checked ~ .rb-grid .rb-egg--brulee,
#rb-r-pizza:checked ~ .rb-grid .rb-egg--pizza{ display:block; }

/* ---- the recipe decor ----
   Ash: "can you turn the corn .gif transparent? remove the white boarder
   around the corncob."

   The gif is already transparent - not one near-white pixel in it, corner at
   alpha 0. The white border is this stylesheet's: every img on the site gets a
   3px #FFFFFA frame, a solid background and a drop shadow, which is right for
   a photo and wrong for a cut-out sprite. The junk drawer hit the same thing.
   So the frame comes off here, and the sprite is drawn at its own pixel size. */
.senshi-art .rb-dec{
  /* Ash: "float the text left of the corn." It floats right inside the note,
     so the note's prose runs down its left rather than stopping above it. */
  float:right; margin:0 2px 6px 16px;
  border:0; background:none; padding:0; box-shadow:none;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
}
/* the note has to contain its float, or the corn hangs out of the box */
.senshi-art .rb-note{ display:flow-root; }
/* and in the ingredients, where a note-less recipe keeps it, it is a block */
.senshi-art .rb-ing > .rb-dec{ float:none; display:block; margin:14px auto 2px; }
@container (max-width:430px){
  .senshi-art .rb-note > .rb-dec{ float:none; display:block; margin:10px auto 2px; }
}

/* ---- THE PROFILE TEMPLATE'S OWN BITS ----
   pp_profile.py emits these; ash.html does not use them.

   Ash: "lower the bottom of the stats bar so it's in line with the bottom of
   the music player... expand the cels as needed."

   Both columns are told to fill the row, and inside each the thing that should
   sit at the FOOT is pushed there: the placements grow in the window so the
   player lands on its bottom edge, and the stat grid grows in the card so its
   last row lands on the card's. With the paragraph box moved out to its own
   row underneath, those two bottoms are the same line - no measured number,
   and it stays true when the rows change. */
.senshi-art .pp-idcol--l,
.senshi-art .pp-idcol--r{ display:flex; flex-direction:column; }
.senshi-art .pp-idcol--l > .pp-win--me{ flex:1 1 auto; display:flex;
  flex-direction:column; }
.senshi-art .pp-idcol--l .pp-me-body{ flex:1 1 auto; display:flex;
  flex-direction:column; }
/* the list keeps its own height and whatever is pinned to the window's foot
   takes the slack, so the space above it is the window's own paper rather than
   an empty white box stretched under the last placement */
/* Ash: "the placements, after the north node, they end and the box has a
   weird gap... grow the placements so that gap is filled. basically the
   bottom of the placements should be in line with the bottom of the stats."

   The gap is 32px on the select page and 5px on her own, because the window
   stretches to match whichever column is taller and the chip list did not
   stretch with it. The right column already solves this for its own stats -
   .pp-statwrap > .nk-signs--tight gets height 100% and align-content
   stretch - so this is the same answer on the other side: the list grows and
   the rows share what it gains, instead of the window carrying dead white
   under the last chip. */
.senshi-art .pp-idcol--l .me-dl{
  flex:1 1 auto; display:flex; flex-direction:column; min-height:0;
}
.senshi-art .pp-idcol--l .me-dl > .nk-signs{
  flex:1 1 auto; height:100%; align-content:stretch;
}

.senshi-art .pp-idcol--r > .pp-places--stats{ flex:1 1 auto; display:flex;
  flex-direction:column; }
.senshi-art .pp-idcol--r .pp-statwrap{ flex:1 1 auto; }
/* "expand the cels as needed" - the rows share the extra height between them
   rather than leaving it in a gap under the last one */
.senshi-art .pp-idcol--r .pp-statwrap > .nk-signs--tight{ height:100%;
  align-content:stretch; }

/* ======================================================================
   THE ARTICLE, THEMED
   ======================================================================
   Ash: "take a look at what we've created for the profile template. take
   inspiration from that, and lightly... LIGHTLY, incorporate the theming
   throughout the article... the whole article is inconsistant about how it is
   designed and displays videos or pictures." And, asked what LIGHTLY meant:
   "lightly meaning... in design coloring. nothing garish."

   So the structure is unified properly and the COLOUR is what stays quiet.
   Every rule below is scoped to .pp-themed, which build_naoko_top puts on the
   article along with the palette's custom properties - no palette, no change.

   WHY THE SELECTORS CARRY #cp AND .chart-art BOTH.
   The article's photo rules are #cp .nk-duo-l .nk-photo--* - one id and two
   classes, (1,2,0) - and they are not in this stylesheet at all, they are in
   chartprofile.css, which the page loads AFTER senshi.css. A first attempt
   at .senshi-art.pp-themed was (0,3,0) and lost to the id outright. A second
   at .pp-themed.chart-art #cp was (1,2,0), an exact TIE, and lost on source order
   instead - the later sheet takes ties. Adding .chart-art makes it (1,3,0),
   which wins on specificity and stops depending on which file loads last.
   (It was hunted under #naoko for a while: senshi.css holds a near-identical
   #naoko copy for the select page, and her own page has no element with that
   id.)

   WHAT WAS INCONSISTENT. Fourteen photos across SIX figure treatments
   (--inl, --inr, --pair, --now, with --s/--n/--b sizes layered on), a
   slideshow on its own system, four videos on a third, and two images missing
   the cp-zoom class their neighbours have, so they did not click to enlarge
   like the rest. Three placements now, one frame for all three kinds. */

/* ---- THE PAGE'S GROUND, and the sheets that sit on it ----
   Ash: "I want that the background being used for pp-block w98-card pp-win
   used in the article too... It's just a lot of white"; and "what if the
   background is the same for the entire profile block... the profile sits on
   top of that background... inside we will reframe the text in a block and
   use the background from pp-zone pp-zone--in."

   So the ground stops being something only the profile window has. #cp - the
   section holding the block AND the article - takes it, the block sits on
   top of it unchanged, and the seven written sections become paper sheets on
   it. That is the arrangement the block already used; the article simply had
   no ground, which is why every surface read as white on white.

   THE DOILY IS NOT HERE. Ash: "keep the doily for just the profile thread."
   The lace stays on .pp-idbox and nowhere else. What the article gets is the
   gradient turned ninety degrees - --pp-page runs top to bottom, so the same
   journey happens down the scroll instead of across a bar. */
/* WHICH BOX CARRIES THE GROUND. Ash, having seen it on #cp: "I want box
   nk-duo-1 nk-biobox nk-biobox--wrap to be green... not cp.block.naokoframe."

   #cp is the whole section - the profile block AND the article - and it is
   991px wide against a ~780px text column, so putting the ground there spent
   the green on the outer margins: it read as a wide border around everything
   and the sheets still floated on nothing. The biobox IS the article's
   interior, the box the written sections actually live in, so the ground
   belongs on it. The sheets then sit ON the green rather than beside it.

   #cp keeps nothing but its padding; it is a container, not a surface. */
.pp-themed.chart-art #cp{
  padding:clamp(14px,1.8vw,24px);
  background:none; border-radius:10px; box-shadow:none;
  /* named here, not inherited: the article is not inside the recipe panel or
     the paragraph box, which are the other two places this is declared */
  --pp-recipepaper:url("images/backgrounds/recipepaper.png");
}
.pp-themed.chart-art #cp .nk-biobox{
  /* ONE COLOUR, NOT THE GRADIENT. Ash: "as i scroll, that background is
     changing with the gradient. i'd rather it be the static green all the way
     down. so a singled out color from the palette. this idea should be part
     of the profile template."

     --pp-ground is that colour, singled out by name in the profile's thread
     and flattened by page_ground() in pp_profile.py. --pp-page, the vertical
     gradient, is still built and still correct for a surface short enough to
     see all of at once - it is simply not this one, because a reader only
     ever has one screenful of a twelve-thousand-pixel page and a gradient
     seen a slice at a time reads as drift, not as a journey.

     The tile stays: soft-light over a flat colour grains it the same way it
     grained the gradient, which is what stops a big field of one colour
     looking like a fill. */
  background-color:var(--pp-ground, #e7e4dc);
  background-image:var(--pp-winbg, none);
  background-repeat:repeat;
  background-size:150px 150px;
  background-blend-mode:soft-light;
  background-attachment:scroll;
  padding:clamp(14px,1.8vw,22px);
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(40,46,44,.12);
}
/* ---- THE SECTION IS A SHEET OF PAPER WITH A READING PANEL ON IT ----
   Ash, having seen four versions: "love that idea... and yes agree to all."

   The three things she agreed to are the paper as the section's material,
   the heading sitting on a band of it, and - the one worth protecting - the
   paper MEANING something rather than being wallpaper. Those can all hold at
   once, but only if the marker is the ABSENCE of the reading panel rather
   than the presence of the paper: if every section showed bare paper
   somewhere, bare paper would stop marking anything.

   So: the sheet is paper, edge to edge. The heading sits on it. The prose
   sits on a solid panel laid over it. A section whose content is NOT the
   narrative gets no panel, and reads as written on the sheet instead of set
   on it. MARKED in build_naoko_top.py is the list.

   The panel is SOLID, not translucent, and that is a measured decision, not
   a taste one. recipepaper's own contrast is low enough that an 82%
   translucent panel over it renders indistinguishably from an opaque one -
   the crinkle does not survive being seen through anything. What makes the
   prose readable is the panel having a defined edge, not light passing
   through it. */
.pp-themed.chart-art #cp .pp-sheet{
  margin:0 0 20px; padding:18px clamp(16px,2vw,26px) 22px;
  border-radius:9px; overflow:hidden;
  background-color:#fffaf0;
  background-image:var(--pp-recipepaper);
  background-size:150px 150px; background-repeat:repeat;
  border:2px solid color-mix(in srgb, var(--pp-ramp-edge,#c9a24e) 60%, #fffefb);
  box-shadow:inset 0 0 0 2px #ffffff,
             0 2px 0 color-mix(in srgb, var(--pp-bevel-lo,#c7c4d9) 55%, transparent),
             0 6px 18px -12px rgba(40,46,44,.5);
}
.pp-themed.chart-art #cp .pp-sheet > .nk-sub:first-child{ margin-top:0; }
.pp-themed.chart-art #cp .pp-sheet::after{
  content:""; display:block; clear:both;
}
/* THE READING PANEL. Solid - see the note above for why translucent buys
   nothing here. It is inset from the sheet so the paper shows as a mat on
   all four sides, and its edge is the thing doing the work. */
.pp-themed.chart-art #cp .pp-read{
  background:#fffdf7;
  border-radius:7px;
  padding:16px clamp(14px,1.6vw,22px) 18px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,
               var(--pp-ramp-edge,#c9a24e) 34%, transparent),
             0 1px 0 rgba(255,255,255,.9),
             0 2px 10px -7px rgba(60,40,20,.45);
}
.pp-themed.chart-art #cp .pp-read::after{
  content:""; display:block; clear:both;
}
.pp-themed.chart-art #cp .pp-read > :first-child{ margin-top:0; }
.pp-themed.chart-art #cp .pp-read > :last-child{ margin-bottom:0; }
/* ---- A DOCUMENT PLATE ----
   A scanned publication shown as a document, not as a picture of one. Four
   pages of a magazine become ONE object in the reading flow instead of four
   interruptions, which is how a pile of scans gets used without the article
   turning into a scrapbook.

   It is dressed as a citation rather than as a frame: masthead, date and
   credit along the top, the page beneath, numbered tabs if there is more
   than one. The plate sits on the sheet's own paper so it reads as something
   laid on the page rather than printed into it - the same marker language
   the lifted quotations use.

   The tabs are CSS-only radios, the mechanism the recipe box and the arc
   console already use, so pages turn with JavaScript off. The lightbox is
   the one the article already had (img.cp-zoom in js/chartprofile.js): a
   scan at column width is a picture OF a document, not a readable one, so
   every page clicks through to full size. */
.pp-themed.chart-art #cp .pp-doc{
  /* CLEARS. A plate is a full-width object, but the article floats photos at
     320px, and an un-cleared plate landing beside one got squeezed to little
     over half its width - measured at 457px against an 799px column. */
  clear:both;
  margin:22px 0; padding:0; border-radius:9px; overflow:hidden;
  background-color:#fffaf0;
  background-image:var(--pp-recipepaper);
  background-size:150px 150px; background-repeat:repeat;
  border:1px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 55%, transparent);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),
             0 6px 18px -13px rgba(60,40,20,.6);
}
.pp-themed.chart-art #cp .pp-doc-hd{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding:9px 14px;
  border-bottom:1px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 45%, transparent);
  background:color-mix(in srgb, var(--pp-ramp-edge,#c9a24e) 13%, transparent);
}
.pp-themed.chart-art #cp .pp-doc-mast{
  font-weight:700; letter-spacing:.4px; color:#2e2622;
}
.pp-themed.chart-art #cp .pp-doc-when{
  font-size:.86em; color:color-mix(in srgb, #2e2622 66%, transparent);
}
.pp-themed.chart-art #cp .pp-doc-credit{
  flex:1 1 100%; font-size:.8em; font-style:italic;
  color:color-mix(in srgb, #2e2622 60%, transparent);
}
/* the radios drive the pages and are never seen */
.pp-themed.chart-art #cp .pp-doc-r{
  position:absolute; width:1px; height:1px; opacity:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
/* THE PAGES ARE STACKED IN ONE GRID CELL, all of them always in the layout.
   Two earlier attempts failed for the same measured reason. A lazy image
   that is display:none is never fetched; nor is one parked offscreen at
   left:-99999px, because lazy loading keys off nearness to the VIEWPORT, not
   off being rendered. Either way the first click on a tab showed an empty
   plate while the fetch ran - long enough to look broken.

   Stacked, every page is where the viewport can see it, so the browser
   fetches them all once the plate scrolls into view and a tab click is
   instant. The pages only differ by opacity. A side benefit: the plate is
   the height of its tallest page whichever one is showing, so turning a
   page does not make the article jump. */
.pp-themed.chart-art #cp .pp-doc-sheet{
  display:grid; place-items:center;
  padding:14px; min-height:120px;
}
.pp-themed.chart-art #cp .pp-doc-pg{
  grid-area:1 / 1;
  opacity:0; pointer-events:none;
  max-width:100%; height:auto; cursor:zoom-in;
  /* a tall scan must not run off the screen: the plate caps it and the
     lightbox is where it is actually read */
  max-height:560px; width:auto;
  background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.8), 0 4px 14px -8px rgba(60,40,20,.7);
}
.pp-themed.chart-art #cp .pp-doc-pg:focus-visible{
  outline:2px solid var(--pp-ramp-edge,#c9a24e); outline-offset:3px;
}
/* page n is shown by radio n. Written out rather than generated because the
   plate never holds more than a handful of pages, and a long :nth-child
   chain is easier to read than a clever one. */
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(1):checked ~ .pp-doc-sheet .pp-doc-pg:nth-child(1),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(2):checked ~ .pp-doc-sheet .pp-doc-pg:nth-child(2),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(3):checked ~ .pp-doc-sheet .pp-doc-pg:nth-child(3),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(4):checked ~ .pp-doc-sheet .pp-doc-pg:nth-child(4),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(5):checked ~ .pp-doc-sheet .pp-doc-pg:nth-child(5),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(6):checked ~ .pp-doc-sheet .pp-doc-pg:nth-child(6){
  opacity:1; pointer-events:auto;
}
.pp-themed.chart-art #cp .pp-doc-tabs{
  display:flex; align-items:center; gap:6px; padding:0 14px 12px;
}
.pp-themed.chart-art #cp .pp-doc-of{
  font-size:.78em; letter-spacing:.6px; text-transform:uppercase;
  color:color-mix(in srgb, #2e2622 55%, transparent); margin-right:4px;
}
.pp-themed.chart-art #cp .pp-doc-tab{
  display:inline-block; min-width:26px; padding:3px 7px; text-align:center;
  font-size:.86em; cursor:pointer; border-radius:4px;
  background:rgba(255,255,255,.65);
  border:1px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 45%, transparent);
}
.pp-themed.chart-art #cp .pp-doc-tab:hover{
  background:color-mix(in srgb, var(--pp-ramp-edge,#c9a24e) 22%, #fff);
}
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(1):checked ~ .pp-doc-tabs .pp-doc-tab:nth-of-type(1),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(2):checked ~ .pp-doc-tabs .pp-doc-tab:nth-of-type(2),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(3):checked ~ .pp-doc-tabs .pp-doc-tab:nth-of-type(3),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(4):checked ~ .pp-doc-tabs .pp-doc-tab:nth-of-type(4),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(5):checked ~ .pp-doc-tabs .pp-doc-tab:nth-of-type(5),
.pp-themed.chart-art #cp .pp-doc-r:nth-of-type(6):checked ~ .pp-doc-tabs .pp-doc-tab:nth-of-type(6){
  background:var(--pp-ramp-edge,#c9a24e); color:#fffdf6; font-weight:700;
}
.pp-themed.chart-art #cp .pp-doc-r:focus-visible ~ .pp-doc-tabs .pp-doc-tab{
  outline:1px dotted var(--pp-ramp-edge,#c9a24e);
}
.pp-themed.chart-art #cp .pp-doc-note{
  margin:0; padding:0 14px 12px; font-size:.88em; line-height:1.45;
  color:#2e2622;
}
.pp-themed.chart-art #cp .pp-doc-hint{
  color:color-mix(in srgb, #2e2622 55%, transparent);
}
@media (max-width:720px){
  .pp-themed.chart-art #cp .pp-doc-pg{ max-height:380px; }
}

/* ---- A WALL OF COMICS ----
   The Punch! diary comics. Sixteen pages she ran in Young You from 1998 to
   2004, drawing herself as a rabbit and her husband as a dog, covering the
   marriage, the children, the trip to Egypt, the fight with her publisher.
   They are a primary source for the biography, not decoration for it.

   A wall rather than a slideshow, on purpose. A slideshow shows one page at
   a time and implies they are interchangeable; a wall shows at a glance that
   there are sixteen of them and that she kept this up for six years, which
   is itself the fact. It borrows the document plate's header, because it is
   doing the same job: here is the thing, here is where it came from.

   The cells are a fixed-width grid rather than one that stretches, so a row
   of comics stays a row of comics instead of becoming four enormous panels
   on a wide screen. */
.pp-themed.chart-art #cp .pp-comics{
  clear:both;            /* same reason as the plate above */
  margin:22px 0; padding:0; border-radius:9px; overflow:hidden;
  background-color:#fffaf0;
  background-image:var(--pp-recipepaper);
  background-size:150px 150px; background-repeat:repeat;
  border:1px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 55%, transparent);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),
             0 6px 18px -13px rgba(60,40,20,.6);
}
.pp-themed.chart-art #cp .pp-comics-wall{
  display:grid; gap:12px; padding:14px;
  grid-template-columns:repeat(auto-fill, minmax(156px, 1fr));
}
.pp-themed.chart-art #cp .pp-strip{
  margin:0; display:flex; flex-direction:column; gap:5px;
}
.pp-themed.chart-art #cp .pp-strip-img{
  display:block; width:100%; height:148px; object-fit:cover;
  object-position:top center;
  background:#fff; cursor:zoom-in; border-radius:3px;
  border:1px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 40%, transparent);
  box-shadow:0 2px 8px -6px rgba(60,40,20,.8);
}
.pp-themed.chart-art #cp .pp-strip-img:hover{
  border-color:var(--pp-ramp-edge,#c9a24e);
}
.pp-themed.chart-art #cp .pp-strip-img:focus-visible{
  outline:2px solid var(--pp-ramp-edge,#c9a24e); outline-offset:2px;
}
.pp-themed.chart-art #cp .pp-strip-cap{
  font-size:.76em; line-height:1.35;
  color:color-mix(in srgb, #2e2622 70%, transparent);
}

/* ---- HIERARCHY: THREE LEVELS, NOT NINE ----
   Ash: "there is no hierachy in any of this really as far as formatting goes
   too... how do i do this?"

   Hierarchy is difference, and difference only exists against a default. Nine
   identically-styled sections have no hierarchy for exactly that reason, and
   the fix is NOT to style all nine. The page gets three levels and no more:

     LEAD      one section, the reason the reader came. More air above it,
               a larger heading, a full-strength divider, and the paper
               showing at its edges where the others are tidy.
     ORDINARY  every narrative section. The default everything is measured
               against, and it stays exactly as it was.
     APPARATUS the sources. Quieter than ordinary - smaller heading, a
               divider at half strength - because it is the machinery, not
               the writing.

   The levers used here are, in order of how much they carry: SPACE first
   (the cheapest and quietest signal, and the one people reach for last),
   then SIZE, then the divider's weight. Colour is deliberately not one of
   them - the palette is already doing work elsewhere on this page, and a
   loud heading colour would compete with the lifted quotations.

   One lead per page. A page where everything is emphasised is a page where
   nothing is. */
.pp-themed.chart-art #cp .pp-sheet--lead{
  margin-top:40px;
}
.pp-themed.chart-art #cp .pp-sheet--lead .nk-sub{
  font-size:1.5em; padding-bottom:21px;
}
.pp-themed.chart-art #cp .pp-sheet--lead .nk-sub::after{
  height:calc(var(--pp-rule-h,11px) + 4px);
  -webkit-mask-image:none; mask-image:none;
}
/* the paper shows a little more of itself around the lead's reading panel */
.pp-themed.chart-art #cp .pp-sheet--lead{ padding:24px; }
.pp-themed.chart-art #cp .pp-sheet--apparatus .nk-sub{
  font-size:.86em; letter-spacing:1px; text-transform:uppercase;
  opacity:.72; padding-bottom:13px;
}
.pp-themed.chart-art #cp .pp-sheet--apparatus .nk-sub::after{
  height:4px; opacity:.6;
}

/* ---- THE STANDFIRST'S KEYS ----
   Ash, on the introduction: "it's kinda a thumbnail for the entire article.
   make it formatted so we can see the keywords."

   The block above the article is a STANDFIRST - the print name for the piece
   between the headline and the body that tells you what you are about to
   read. Keying it means the load-bearing words are picked out, so it can be
   skimmed as well as read; and each key is a link into the section that
   takes it further, which quietly makes the paragraph the article's table of
   contents.

   It must not read as a page of links. So: no underline until you want one,
   the weight carried by a rule UNDER the word in the profile's own palette,
   and the ink unchanged from the prose around it. Skimming sees a dotted
   line of terms; reading straight through sees a paragraph. */
.senshi-art .pp-zone .pp-key{
  color:inherit; text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 70%, transparent);
  padding-bottom:1px;
  transition:background-color .12s linear, border-color .12s linear;
}
.senshi-art .pp-zone .pp-key:hover,
.senshi-art .pp-zone .pp-key:focus-visible{
  background:color-mix(in srgb, var(--pp-ramp-edge,#c9a24e) 22%, transparent);
  border-bottom-color:var(--pp-ramp-edge,#c9a24e);
}
/* the section a key just jumped to gets a moment of the palette, so the
   reader can see where they landed - the article is long and the headings
   are quiet on purpose */
.pp-themed.chart-art #cp .nk-sub:target{
  background:color-mix(in srgb, var(--pp-ramp-edge,#c9a24e) 16%, transparent);
  border-radius:5px;
  box-shadow:0 0 0 7px color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 16%, transparent);
}
.pp-themed.chart-art #cp .nk-sub{ scroll-margin-top:16px; }

/* ---- A LIFTED QUOTATION ----
   Ash: "yeah, break up quotes and use a different styling for that", and on
   what happens to the sentence it leaves: "Lift it out, I'll fix the prose."

   It uses the marker language rather than inventing a second one. The block
   is the PAPER, bled out to the reading panel's edges with negative margins,
   so it reads as a window cut through the panel to the sheet underneath -
   the same "written on the paper, not set on it" the marked sections get.
   Nothing new is introduced: one material, two states.

   Only a COMPLETE statement is ever lifted. The article has eighteen quoted
   passages and most are fragments of a few words - "old grandpas", "always a
   battle" - which mean nothing alone and stay inline. That rule belongs to
   the template, not to this page. */
.pp-themed.chart-art #cp .pp-quote{
  clear:both;            /* a lifted quote is full width too */
  margin:20px -22px; padding:18px 26px 14px;
  background-color:#fffaf0;
  background-image:var(--pp-recipepaper);
  background-size:150px 150px; background-repeat:repeat;
  border-top:1px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 55%, transparent);
  border-bottom:1px solid color-mix(in srgb,
      var(--pp-ramp-edge,#c9a24e) 55%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             inset 0 -1px 0 rgba(255,255,255,.65);
}
.pp-themed.chart-art #cp .pp-quote p{
  margin:0; font-size:1.12em; line-height:1.5; color:#2e2622;
  text-indent:0;
}
/* the mark sits in the margin, not in the text, so the first line still
   starts where every other first line on the page starts */
.pp-themed.chart-art #cp .pp-quote p::before{
  content:"\201C"; float:left; margin:-.12em 0 0 -.52em;
  font-size:2.1em; line-height:1;
  color:color-mix(in srgb, var(--pp-ramp-edge,#c9a24e) 85%, transparent);
}
.pp-themed.chart-art #cp .pp-quote-src{
  display:block; margin-top:9px; text-align:right;
  font-style:normal; font-size:.82em; letter-spacing:.3px;
  color:color-mix(in srgb, #2e2622 62%, transparent);
}
.pp-themed.chart-art #cp .pp-quote-src::before{ content:"\2014\00a0"; }
/* TWO QUOTES IN A ROW ARE ONE PLATE, not two with a gap between them.
   Each quote bleeds out to the panel's edges with a negative margin, so a
   pair left a bare 40px strip of reading panel stranded between them -
   white, empty, and looking like something had failed to load. Butted
   together they read as what they are: two things said in the same
   conversation. The hairline between them is the first one's bottom edge,
   so the second drops its own top edge rather than doubling it. */
.pp-themed.chart-art #cp .pp-quote + .pp-quote{
  margin-top:-20px; border-top:0;
}
/* A MARKED SECTION HAS NO PANEL, and that is the whole marker. Nothing is
   added to it - the paper it was always sitting on simply becomes visible
   under the words. The type darkens a little to hold its own on the paper,
   since it no longer has the panel's lift behind it. */
.pp-themed.chart-art #cp .pp-sheet:not(:has(> .pp-read)) p,
.pp-themed.chart-art #cp .pp-sheet:not(:has(> .pp-read)) li{
  color:#2e2622;
}
/* the block keeps its own frame and simply sits on the ground */
.pp-themed.chart-art #cp > .pp-block{ margin-bottom:22px; }
/* Ash: "can you move the green background up one more box... the box 'early
   years' is sitting on top."
   .nk-duo-l.nk-biobox was painting rgb(253,252,255) across the whole article
   interior, which is why the sheets sat on white and the green only ever
   showed as a frame. The biobox now carries the ground itself (above), so
   what has to go transparent is the wrapper AROUND it - otherwise .nk-duo
   paints another sheet of white over the green. */
.pp-themed.chart-art #cp .nk-duo{
  background:none; border:0; box-shadow:none;
}
.pp-themed.chart-art #cp .nk-biobox{ border:0; }

/* ---- ONE FRAME, for a photo, a video or a slide ----
   Paper mat, a hairline mixed most of the way to paper so the palette shows
   as a tint rather than a line, and a soft drop. This is the whole of the
   "theming": it is the same frame the profile window wears, quieter. */
.pp-themed.chart-art #cp .nk-photo img,
.pp-themed.chart-art #cp .nk-vid .km-vid,
.pp-themed.chart-art #cp .nk-vid iframe,
.pp-themed.chart-art #cp .ss-slide .ss-img{
  display:block; width:100%; height:auto; box-sizing:border-box;
  background:#fffefb; padding:5px; border-radius:3px;
  border:1px solid color-mix(in srgb, var(--pp-bevel-lo,#c7c4d9) 45%, #fffefb);
  box-shadow:0 1px 0 rgba(255,255,255,.7),
             0 3px 12px -7px rgba(50,45,55,.45);
}
.pp-themed.chart-art #cp .nk-photo figcaption,
.pp-themed.chart-art #cp .nk-vid figcaption{
  margin-top:6px; font-size:12.5px; line-height:1.45;
  color:color-mix(in srgb, var(--pp-bar-ink2,#3a2e2a) 78%, transparent);
}

/* ---- THREE PLACEMENTS, not six ----
   Ash: "collapse to three." Inline left, inline right, and full width. The
   old size suffixes are neutralised rather than deleted from the markup -
   the frame decides the size now, so --s, --n and --b have nothing left to
   say, and --now is a pair that happens to be last. */
.pp-themed.chart-art #cp .nk-photo{ margin:0 0 16px; max-width:none; }
.pp-themed.chart-art #cp .nk-photo--inl{
  float:left; width:min(42%, 320px); margin:4px 22px 14px 0; clear:left;
}
.pp-themed.chart-art #cp .nk-photo--inr{
  float:right; width:min(42%, 320px); margin:4px 0 14px 22px; clear:right;
}
.pp-themed.chart-art #cp .nk-photo--pair,
.pp-themed.chart-art #cp .nk-photo--now{
  float:none; width:100%; max-width:none; margin:18px 0; clear:both;
}
/* the real suffixes are --sm, --noclear, --stack and --bottom; the frame
   decides the size now, so they are neutralised rather than cut from the
   markup, and --noclear keeps the one thing it is actually for */
.pp-themed.chart-art #cp .nk-photo--sm,
.pp-themed.chart-art #cp .nk-photo--stack,
.pp-themed.chart-art #cp .nk-photo--bottom{
  width:min(42%, 320px); max-width:none; transform:none;
}
.pp-themed.chart-art #cp .nk-photo--inl,
.pp-themed.chart-art #cp .nk-photo--inr,
.pp-themed.chart-art #cp .nk-photo--pair,
.pp-themed.chart-art #cp .nk-photo--now{ transform:none; }
.pp-themed.chart-art #cp .nk-photo--noclear{ clear:none; }
@media (max-width:720px){
  /* a floated figure in a narrow column leaves text in a gutter; they stack */
  .pp-themed.chart-art #cp .nk-photo--inl,
  .pp-themed.chart-art #cp .nk-photo--inr{
    float:none; width:100%; margin:16px 0; clear:both;
  }
}

/* ---- THE SECTION HEADINGS ----
   A slice of the profile's own bar under the words, and nothing else. It
   started at 4px, which Ash called "barely noticable" - at that height the
   eleven-stop gradient had no room to read as a gradient at all, it was a
   tinted hairline. It now takes its height from --pp-rule-h, the template's
   one dial, shared with the panel headings. */
.pp-themed.chart-art #cp .nk-sub{
  position:relative; padding-bottom:17px; margin-top:34px; clear:both;
}
/* Ash: "you see this gradient divider i just ripped from saturn's profile?
   same idea for naoko. use her gradient and use this kind of scrolling
   divider as part of the design."

   Same declaration the senshi profiles use - fuku-scroll, 4s, steps(48), so
   it ticks across in pixel jumps instead of sliding - but running the
   PROFILE's tile rather than the fuku one. --pp-rule is mirrored so the loop
   has no seam, and held in a narrow lightness band so it reads against the
   sheet's paper. The fade mask is the fuku one: the rule is solid under the
   words and thins out to nothing at the right. */
.pp-themed.chart-art #cp .nk-sub::after{
  content:""; position:absolute; left:0; bottom:0;
  height:var(--pp-rule-h,11px);
  width:100%; border-radius:3px;
  background:var(--pp-rule, var(--fuku-tile)); background-size:320px 100%;
  -webkit-mask-image:var(--fuku-fade); mask-image:var(--fuku-fade);
  animation:pp-rule-scroll 4s steps(48, end) infinite;
}
@media (prefers-reduced-motion:reduce){
  .pp-themed.chart-art #cp .nk-sub::after{ animation:none; }
}

/* ---- THE SLIDESHOW, framed like everything else ----
   NOTHING MATCHES THIS TODAY, and it is kept on purpose. These two rules only
   re-frame an ss-* slideshow that is inside a themed profile, and the one on
   naoko-takeuchi.html came out: Ash looked at the SPA photographs twice over
   and said "slideshow.. i think", so the duplicate went and a portrait took
   its place. The ss-* system itself is very much alive - the film strips on
   sailormoon.html are built from it - but that page is not .pp-themed, so it
   is styled by the base rules in senshi.css and never reaches here.
   The cast photographs and the 1990s signings are both blocked out as
   slideshows in the picture plan, so this comes back into use as soon as
   "a fan of her own work" and "how it was drawn" are written. */
.pp-themed.chart-art #cp .ss-thumb{
  border-radius:3px;
  border:1px solid color-mix(in srgb, var(--pp-bevel-lo,#c7c4d9) 45%, #fffefb);
}
.pp-themed.chart-art #cp .ss-thumb.is-on{
  border-color:color-mix(in srgb, var(--pp-ramp-edge,#c9a24e) 70%, #fffefb);
}

/* ---- THE SOURCES, which are a list and should look like one ---- */
.pp-themed.chart-art #cp .nk-src-list{
  padding:12px 16px 12px 34px; margin:0 0 12px; border-radius:6px;
  background:#fffefb;
  border:1px solid color-mix(in srgb, var(--pp-bevel-lo,#c7c4d9) 35%, #fffefb);
}

/* THE WINDOW'S GROUND, for a profile that carries its own.
   Ash: "pp-idbox sits inside another box with a lavender background on my
   profile. do the same with the naoko profile, and color shift the background
   to the palette." Her page sets its tile under body.ash-page because she is
   still sampling there; a profile built from the template writes --pp-winbg
   onto its block instead, and both arrive at this one rule. */
/* THE WHEEL MUST FIT ITS COLUMN.
   Ash: "the birth chart box got clipped off. see how the dsc is being
   chopped?" .nkw-svg carries min-width:520px - a floor set for the OLD
   nk-wheel layout, where the figure was a horizontal SCROLLER and 520 was the
   smallest the chart stayed legible at on a phone. .pp-wheel is overflow
   hidden, not a scroller, so the same floor does not pan, it CUTS - and what
   it cut first was the DSC label out at the rim. In here the chart is vector
   and the whole block already reflows, so the floor comes off and the wheel
   takes whatever the column gives it. */
.senshi-art .pp-wheel .nkw-svg{
  min-width:0; max-width:none; width:100%; height:auto;
}
/* and the figure has to BE the column's width for that to mean anything. The
   right column is a flex column, where `margin:0 auto` makes an item
   shrink-to-fit instead of centring a full-width block - so with the svg's
   520px floor gone the figure collapsed to its min-content and the chart came
   out a third of the size. It stretches. */
.senshi-art .pp-idcol--r > .pp-wheel{ width:100%; align-self:stretch; }
/* Ash: "looks like the birth chart got shrunk. no thank you."
   Fitting the wheel inside the column cost it 29px against the old clipped
   520, because the figure was spending 18px of padding a side on a panel
   whose whole job is to hold one picture. The frame keeps enough inset to
   read as a frame and the chart takes the rest - about 509px now, which is
   the old size with nothing cut off it. */
.senshi-art .pp-idcol--r > .pp-wheel{ padding:clamp(5px,0.7vw,9px); }

.senshi-art .pp-block.pp-win > .w98-body > .pp-win-in{
  background-image:var(--pp-winbg, none);
  background-repeat:repeat; background-size:150px 150px;
  box-shadow:inset 0 0 0 1px rgba(27,51,96,.12);
}

/* the paragraph box as its own row under both columns.

   Ash: "that box needs a frame. can't read it." Inside the card it had no
   paper of its own - it borrowed the card's, and all it drew was a hairline
   across the top to separate itself. Standing on its own that left the text
   sitting straight on the page's gradient. So out here it gets the card's
   paper and the card's gold frame, which is the box it used to be inside. */
/* ---- THE PARAGRAPH, WHEN IT IS A PARAGRAPH ----
   Ash: "this paragraph... needs to site inside a white frame. i can't fkn
   read it."

   .pp-zone-note is drawn as PLACEHOLDER text - rainyhearts at 12.5px in
   purple at half opacity - because on her own page the zone is an empty drop
   area and the note is the hint sitting in it. On a profile that fills the
   zone with actual prose the same class was being used for real reading text,
   and half-opacity decorative ink on cream is the thing she could not read.

   So inside .pp-idzone it stops being a hint: solid ink, a reading face at a
   reading size, and plain white under it instead of the recipe paper, which
   is a texture meant to sit behind a few words and not behind a paragraph. */
.senshi-art .pp-idzone .pp-zone--in{
  background-color:#fffefb; background-image:none;
  border:2px solid var(--pp-ramp-edge, #c9a24e);
  box-shadow:inset 0 0 0 2px #ffffff,
             2px 2px 0 color-mix(in srgb, var(--pp-bevel-lo, #e8c0c8) 70%, transparent);
}
.senshi-art .pp-idzone .pp-zone-note{
  font-family:inherit; font-size:14.5px; line-height:1.62;
  letter-spacing:.2px; color:#33323e;
}

.senshi-art .pp-idzone{
  grid-column:1 / -1; margin:14px 0 0;
  /* the recipe panel declares this on itself, so it does not reach here - the
     paper is named again rather than inherited from a box this is not inside */
  --pp-recipepaper:url("images/backgrounds/recipepaper.png");
}
.senshi-art .pp-idzone .pp-zone--in{
  margin:0; padding:14px 16px;
  border:1px solid #c9a24e; border-top:1px solid #c9a24e; border-radius:9px;
  background-color:#fffaf0;
  background-image:var(--pp-recipepaper);
  background-size:150px 150px; background-repeat:repeat;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),
             2px 2px 0 rgba(106,21,53,.14);
}

/* The link home. Ash: "the naoko profile need a link to the full profile
   page", then "it's totally in the wrong spot" - it was at the foot of the
   left window, the last place anyone looks - and "in the card's heading bar".

   So it rides the loudest thing in the panel, on the right end of the banner
   opposite the blossom, where the eye already is. It is the thread pointing
   home, and only ever on a page that is NOT that profile.

   The colour comes from the palette the profile was assigned, not from the
   wine it used to be - that wine is the Pixel & Planets accent, which is HER
   page's colour and had no business on anyone else's card. */
.senshi-art .pp-cardlink{
  margin-left:auto; padding:4px 10px 5px;
  border:1px solid var(--pp-link-edge, rgba(255,255,255,.55));
  border-radius:3px;
  background:var(--pp-link-bg, rgba(255,255,255,.16));
  font-family:basiic,monospace; font-size:9.5px; letter-spacing:.7px;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:var(--pp-link-ink, #FFFFFA);
  text-shadow:0 1px 0 rgba(44,8,22,.4);
}
.senshi-art .pp-cardlink:hover{
  background:var(--pp-link-bg-h, rgba(255,255,255,.3));
}
.senshi-art .pp-cardlink:focus-visible{ outline:2px solid #FFFFFA;
  outline-offset:2px; }
/* the banner becomes a row so the link can sit at its end */
/* ---- THE LINK HOME, LOUDER ----
   Ash: "the read full profile... needs to be bigger and shimmer every once in
   a while to eyecatch."

   Bigger is size and weight. The shimmer is a sheen that crosses the chip and
   then WAITS: one 1.1s sweep inside a 9s cycle, so it catches the eye on a
   page someone is already reading without ever becoming a thing that is
   always moving in the corner of it. It is a ::after over the chip rather
   than an animated background, so the text underneath never moves. */
.senshi-art .pp-cardlink{
  position:relative; overflow:hidden; isolation:isolate;
  /* Ash: "the full profile button isn't catching my eye." It was a
     translucent chip, which works on a banner that is dark end to end and
     disappears on one that goes pale - and this one now ends in pearl. So it
     is a SOLID chip: bigger, raised rather than outlined, and carrying its
     own ground instead of borrowing the banner's. */
  padding:8px 18px 9px;
  font-size:13px; letter-spacing:1.3px; font-weight:700;
  border-width:2px; border-radius:4px;
  box-shadow:0 2px 0 rgba(58,30,34,.38), 0 3px 10px -4px rgba(58,30,34,.45),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.senshi-art .pp-cardlink:hover{ transform:translateY(-1px); }
.senshi-art .pp-cardlink:active{
  transform:translateY(1px); box-shadow:0 0 0 rgba(58,30,34,.38);
}
.senshi-art .pp-cardlink::after{
  content:""; position:absolute; z-index:1; inset:0 auto 0 0;
  width:72%; transform:translateX(-170%) skewX(-18deg);
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.9), transparent);
  animation:pp-shimmer 9s cubic-bezier(.35,0,.25,1) 2.5s infinite;
  pointer-events:none;
}
@keyframes pp-shimmer{
  0%{ transform:translateX(-170%) skewX(-18deg); }
  16%{ transform:translateX(320%) skewX(-18deg); }
  100%{ transform:translateX(320%) skewX(-18deg); }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pp-cardlink::after{ animation:none; opacity:0; }
}
.senshi-art .pp-cardlink:hover{
  background:var(--pp-link-bg-h, rgba(255,255,255,.3));
}

.senshi-art .pp-h--card:has(.pp-cardlink){
  display:flex; align-items:center; gap:10px;
}
.senshi-art .pp-h--card:has(.pp-cardlink) > span{ margin:0 auto 0 0; }

/* ---- THE SKY TWINKLE ----
   Ash: "the stars inside the upper half of the chart. it's a night chart. can
   we make the stars sparkle? not the same sparkle as snes effect. rather a
   minimal low twinkle..."

   Not the Star Road palette wave from the landing page. That one runs a
   twelve-colour ramp down a moving scanline and every star on the page is in
   it at once; it is the loudest thing in any room it is in. This is one star
   going out and coming back, on its own clock, with the rest of the sky doing
   nothing.

   steps(1, end) is the retro part. An eased fade is a modern glow; a star that
   is simply ON, then dim, then OFF, then back is what a sprite does when its
   palette entry changes, and it is three state changes rather than sixty
   frames. The dip is at the END of the cycle - 82% of every star's run is just
   its own opacity, so at any moment almost the whole sky is still.

   --o is the star's own opacity, written onto it by build_ash_wheel.py. The
   dip is relative to that, so a faint star stays faint instead of every star
   blinking to the same value. The duration and the delay are per star too,
   because a stylesheet cannot give its elements different phases and a sky
   that blinks in unison is a string of fairy lights. */
@keyframes nkw-twinkle{
  0%, 82% { opacity:var(--o); }
  86%     { opacity:calc(var(--o) * .45); }
  90%     { opacity:calc(var(--o) * .12); }
  94%     { opacity:calc(var(--o) * .5); }
  100%    { opacity:var(--o); }
}
.senshi-art .nkw-star--tw{
  animation-name:nkw-twinkle;
  animation-iteration-count:infinite;
  animation-timing-function:steps(1, end);
  /* duration and delay ride in on the element's style attribute */
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .nkw-star--tw{ animation:none; }
}

/* ============================ 381. PLACEMENTS | ASPECTS ================== */
/* Ash: "add 2 clearly marked tabs at the top... placements shows...
   placements.... aspects shows aspects."

   NO JAVASCRIPT. Two radios in one group, the labels are the tabs, :checked ~
   picks the pane. The radios are addressed by POSITION rather than by id,
   because the ids carry the profile's slug and this stylesheet has to work
   for a profile that does not exist yet. */
.senshi-art .pp-tabs{ position:relative; margin:0 0 12px; }
.senshi-art .pp-tab-r{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.senshi-art .pp-tab-bar{
  display:flex; gap:4px; margin:0 0 7px;
  border-bottom:1px solid color-mix(in srgb, var(--head) 26%, var(--paper));
}
.senshi-art .pp-tab{
  flex:1 1 0; cursor:pointer; text-align:center;
  padding:5px 6px 4px; border-radius:5px 5px 0 0;
  font-family:rainyhearts,monospace; font-size:10.5px; letter-spacing:1.3px;
  text-transform:uppercase; line-height:1.35;
  color:color-mix(in srgb, var(--head) 62%, var(--paper));
  background:color-mix(in srgb, var(--head) 10%, var(--paper));
  border:1px solid color-mix(in srgb, var(--head) 20%, var(--paper));
  border-bottom:0;
}
.senshi-art .pp-tab:hover{
  color:color-mix(in srgb, var(--head) 86%, #120d18);
}
/* THE DOUBLED CLASS IS LOAD-BEARING. A pane is also a .me-dl, and
   `.senshi-art .pp-idcol--l .me-dl` already sets display:flex at (0,3,0) to
   make the column stretch. A plain `.senshi-art .pp-pane` is (0,2,0) and
   loses to it, so the hidden pane stayed visible and the column got TALLER
   for gaining a second list - the exact opposite of the point. Doubling the
   class takes this to (0,4,0) and settles it without reaching for !important
   or coupling the rule to the column it happens to live in. */
.senshi-art .pp-tabs > .pp-pane.pp-pane{ display:none; margin:0; }
/* first radio -> placements, second -> aspects. These are (0,6,0), so they
   stay above the hide rule whatever else arrives. */
.senshi-art .pp-tabs > .pp-tab-r:first-of-type:checked ~ .pp-pane--pl,
.senshi-art .pp-tabs > .pp-tab-r:nth-of-type(2):checked ~ .pp-pane--as{
  display:flex; flex-direction:column; min-height:0;
}
.senshi-art .pp-tabs > .pp-tab-r:first-of-type:checked ~ .pp-tab-bar .pp-tab--pl,
.senshi-art .pp-tabs > .pp-tab-r:nth-of-type(2):checked ~ .pp-tab-bar .pp-tab--as{
  background:var(--paper);
  color:color-mix(in srgb, var(--head) 90%, #120d18);
  border-color:color-mix(in srgb, var(--head) 30%, var(--paper));
  box-shadow:inset 0 2px 0 color-mix(in srgb, var(--accent) 70%, var(--paper));
}
/* the keyboard has to be able to see where it is */
.senshi-art .pp-tabs > .pp-tab-r:first-of-type:focus-visible ~ .pp-tab-bar .pp-tab--pl,
.senshi-art .pp-tabs > .pp-tab-r:nth-of-type(2):focus-visible ~ .pp-tab-bar .pp-tab--as{
  outline:2px solid var(--accent); outline-offset:1px;
}

/* ---- the placements, on ONE LINE ----
   Ash: "i do not like having to scroll up to see the bottom of the placements
   or aspects list, then scrool back up to see the wheel."

   Measured before touching anything: her column ran 1205px against 796px of
   room, and the single biggest cause was not the music player. Every row was
   60px because the dt and the dd were on separate lines, in a 296px column
   where "Moon" and "Sagittarius 26 43" fit side by side with room over. One
   line takes a row to about 34px, which is what the stat chips in the same
   column already use - so the list gets 312px shorter and nothing is lost. */
.senshi-art .me-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 9px;
  background:color-mix(in srgb, var(--head) 12%, var(--paper));
}
.senshi-art .me-row dt{
  flex:0 0 auto; padding:4px 0 3px;
  background:none; border-bottom:0; box-shadow:none;
}
.senshi-art .me-row dd{
  flex:0 1 auto; padding:4px 0 3px; text-align:right; white-space:nowrap;
  font-size:13px;
}
/* ---- the chips, same job on the template side ---- */
.senshi-art .nk-signs{ grid-template-columns:1fr; gap:3px; }
.senshi-art .nk-chip{ padding:4px 9px; gap:6px; align-items:center; }
.senshi-art .nk-chip .nk-body{ min-width:0; flex:1 1 auto; }
.senshi-art .nk-chip .nk-sign{ font-size:13px; white-space:nowrap; }
.senshi-art .nk-chip .nk-deg{
  font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* ---- the aspects pane ----
   ONE ROW PER ASPECT now, ranked tightest first, after Ash asked for exact
   aspects rather than bare sign configurations. Three of her notes resolve
   together here: the degree layer shortens nothing (all 63 are still real
   aspects by sign) but it RANKS them, so the live ones are at the top; and
   with one aspect per row the glyphs go back to full size, which was her
   "the actual aspects and planet gifs are way too small. so like... I can't
   really read the mercury conjoin sun".

   The pane scrolls inside itself rather than growing the page. Both tabs
   are the same height by construction, so switching between them never
   moves anything below. */
.senshi-art .pp-pane--as{ max-height:440px; overflow-y:auto; }
.senshi-art .nk-asp,
.senshi-art .me-asp{
  display:flex; align-items:center; gap:7px; flex-wrap:nowrap;
  padding:3px 8px;
}
.senshi-art .nk-asp-pair,
.senshi-art .me-asp-pair{
  display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
}
/* FULL SIZE. These were 12px while they were being crammed ten to a row;
   one aspect per row gives them the whole twenty back, which is the size
   the glyphs are drawn at and the only size they are legible at. */
.senshi-art .pp-panel .nk-chip .nk-asp-pair .nk-g,
.senshi-art .me-asp .me-asp-pair .me-g{
  width:20px; height:20px; flex:0 0 auto;
}
.senshi-art .pp-panel .nk-chip .nk-asp-pair .nk-g--uni,
.senshi-art .me-asp .me-asp-pair .me-g--uni{ font-size:15px; }
.senshi-art .nk-asp-s,
.senshi-art .me-asp-s{
  font-style:normal; font-size:15px; line-height:1; cursor:help;
  width:17px; text-align:center; flex:0 0 auto;
  color:color-mix(in srgb, var(--head) 78%, #120d18);
}
.senshi-art .nk-asp-orb,
.senshi-art .me-asp-orb{
  flex:0 0 auto; margin-left:auto; font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.senshi-art .nk-asp-way,
.senshi-art .me-asp-way{
  flex:0 0 auto; font-family:rainyhearts,monospace; font-size:8.5px;
  letter-spacing:.8px; text-transform:uppercase; width:56px; text-align:right;
  color:color-mix(in srgb, var(--head) 58%, var(--paper));
}
/* applying is the stronger of the two, and the page should say so quietly */
.senshi-art .nk-asp-way--app,
.senshi-art .me-asp-way--app{
  color:color-mix(in srgb, var(--head) 88%, #120d18);
}
.senshi-art .nk-asp-term,
.senshi-art .me-asp-term{
  flex:0 0 auto; font-family:rainyhearts,monospace; font-size:8.5px;
  letter-spacing:.7px; text-transform:uppercase; padding:1px 5px;
  border-radius:9px; font-weight:400;
  color:color-mix(in srgb, var(--head) 92%, #120d18);
  background:color-mix(in srgb, var(--accent) 32%, var(--paper));
  border:1px solid color-mix(in srgb, var(--accent) 52%, var(--paper));
}
/* an engagement or an adherence is the one thing in this list that is doing
   something right now, so the row carries a little more weight than its
   neighbours - space and tone, not colour */
.senshi-art .nk-asp--close,
.senshi-art .me-asp--close{
  background:color-mix(in srgb, var(--accent) 9%, var(--paper));
}
.senshi-art .nk-g--abbr,
.senshi-art .me-g--abbr{
  width:20px; height:20px; display:inline-flex; align-items:center;
  justify-content:center; font-family:rainyhearts,monospace;
  font-size:9.5px; letter-spacing:.04em;
  color:color-mix(in srgb, var(--head) 80%, #120d18);
}
.senshi-art .nk-asp-none,
.senshi-art .me-asp-none{
  margin-left:auto; font-size:11px; font-style:italic;
  color:color-mix(in srgb, var(--head) 55%, var(--paper));
}



/* ---- THE TABS, LOUDER ----
   Ash: "the tabs... placemetns and aspects need to be larger and colored so
   we can see it. I am always concerned about the page not piroritizing this
   visually."

   She is right about the priority. This is a chart profile; the chart's
   numbers were being announced in 10.5px grey on grey, quieter than the
   window chrome around them. They take the palette's own ramp now, the type
   goes up to 13px, and the selected tab is the one that is bright rather
   than merely the one that is not dim. */
.senshi-art .pp-tab-bar{ gap:5px; margin:0 0 9px; border-bottom:0; }
/* Ash: "the words placements and aspects need to be larger and more bold."
   Up from 13px to 16, and rainyhearts has no bold weight of its own - it is
   a pixel face with one cut - so the weight comes from a 1px text-shadow
   offset, which thickens the strokes without the browser inventing a
   synthetic bold that would blur a pixel font. */
.senshi-art .pp-tab{
  padding:9px 8px 8px; border-radius:6px 6px 0 0;
  font-size:16px; letter-spacing:1.9px;
  text-shadow:1px 0 0 currentColor;
  color:color-mix(in srgb, var(--head) 72%, var(--paper));
  background:color-mix(in srgb, var(--pp-ramp-edge, var(--accent)) 16%, var(--paper));
  border:1px solid color-mix(in srgb, var(--pp-ramp-edge, var(--accent)) 34%, var(--paper));
  border-bottom:2px solid color-mix(in srgb, var(--pp-ramp-edge, var(--accent)) 46%, var(--paper));
  /* no transition: Ash, on the aspect lines and then on these - "no
     fade. just jump... old school look", "same goes for buttons".
     A tab in 1998 changed on the frame you clicked it. */
}
.senshi-art .pp-tabs > .pp-tab-r:first-of-type:checked ~ .pp-tab-bar .pp-tab--pl,
.senshi-art .pp-tabs > .pp-tab-r:nth-of-type(2):checked ~ .pp-tab-bar .pp-tab--as{
  background:var(--pp-ramp, color-mix(in srgb, var(--accent) 60%, var(--paper)));
  color:var(--pp-ramp-ink, #fffdf6);
  border-color:color-mix(in srgb, var(--pp-ramp-edge, var(--accent)) 70%, var(--paper));
  border-bottom-color:var(--pp-ramp-edge, var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---- THE STATS, TWO COLUMNS ----
   Ash: "the stats, I liked the two column grid you had before better." The
   list went to one column when the chips were made to fit a narrow sidebar;
   out here in the right column there is width for two, and nine rows in two
   columns is a block you take in at a glance instead of a column you read. */
.senshi-art .nk-signs--two{
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:5px;
}

/* The player was briefly the stats header. It is back in the left column
   under the gif - Ash drew the layout - so those rules are gone rather than
   left sitting here unreferenced. Section 382 squares it off where it
   actually lives now. */


/* ---- THE RETROGRADE MARK ----
   Ash sent the pharmacy symbol and said "update it so it fits the glyphs."
   It was a capital R in a hairline box - a letter, boxed, beside a row of
   drawings. It is the real symbol now, drawn on its own 14px tile by
   scripts/make_glyphs.py, which is why the old badge's border and padding
   have to come off: the glyph brings its own rim and does not want a second
   one around it. */
.senshi-art .nk-rx,
.senshi-art .me-rx{
  width:14px; height:14px; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none; vertical-align:-2px;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
  flex:0 0 auto;
}


/* ---- "HER CHART", the bar above the wheel ----
   Ash: "the her life bar... only the header part... put that above the
   wheel... and change it to 'her chart'", then "move the header above the
   chart."

   It is the card banner's twin and has to be styled as one: without these
   rules .pp-h--chart falls back to the bare .pp-h, which is a section
   heading built for a different container - it arrived as pale text on a
   tall band of lace with the blossoms floating in it, and pushed the wheel
   most of a screen down the page. Same gradient, same blossoms, same
   letterforms as the stats banner, so the right column reads as two halves
   of one object rather than two unrelated boxes. */
.senshi-art .pp-h--chart{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 10px; padding:7px 12px 6px; min-height:0;
  border-radius:8px 8px 0 0;
  background:var(--pp-ramp, linear-gradient(90deg,#6a1535,#b23965,#f9a5b9));
  border-bottom:1px solid var(--pp-ramp-edge, #c9a24e);
  font-size:15px; letter-spacing:2px; color:var(--pp-ramp-ink, #FFFFFA);
  text-shadow:0 1px 0 rgba(26,20,32,.45);
}
.senshi-art .pp-h--chart::before,
.senshi-art .pp-h--chart::after{ display:none; }
/* the back-home link rides this bar now, so it gets the card's own rule */
.senshi-art .pp-h--chart:has(.pp-cardlink){ justify-content:flex-start; }
.senshi-art .pp-h--chart:has(.pp-cardlink) > span{ margin:0 auto 0 0; }


/* ============ 382. ONE BOX: THE TOP BLOCK, PRESSED TOGETHER ============== */
/* Ash: "press the music player against the bottom of the chart and remove the
   round corners. from the header to the bottom of the stats box should all
   'look' like one box", and "the placements and aspects... press up against
   the pfp, and the info presses up below it.... you're compressing it all."

   The whole top block was a set of cards with their own margins and their own
   rounded corners, floating on a shared paper. Pressed flush it reads as one
   instrument panel instead of five objects, which is what a chart profile
   wants to be - and the space the margins were spending is what buys the
   placements list its rows. */

/* ---- the left column: portrait, tabs, list, gif, player, nothing between -- */
.senshi-art .pp-win--me .pp-pic{ margin:0; border-radius:0; }
.senshi-art .pp-win--me .pp-tabs{ margin:0; }
.senshi-art .pp-win--me .pp-tab-bar{ margin:0; }
.senshi-art .pp-win--me .pp-pane{ border-radius:0; border-left:0; border-right:0; }
.senshi-art .pgp-stack--under{ margin:0; }
.senshi-art .pgp-stack--under .pgp-pal{
  display:block; width:100%; height:auto; margin:0; border-radius:0;
}
.senshi-art .pgp-stack--under .pgp{
  border-radius:0; border-left:0; border-right:0; border-bottom:0; margin:0;
}
/* the window body stops padding its children apart */
.senshi-art .pp-win--me .pp-me-body{ padding:0; gap:0; }

/* ---- the right column: header, wheel, stats, all one piece ---- */
.senshi-art .pp-h--chart{
  margin:0; border-radius:0;
  border-bottom:1px solid var(--pp-ramp-edge, #c9a24e);
}
/* THE CHART SITS STRAIGHT UNDER ITS OWN BAR. Ash: "put the chart all the way
   up against the 'her chart' header." */
.senshi-art .pp-idcol--r > .pp-wheel{
  margin:0; border-radius:0; border-top:0; padding:6px;
}
.senshi-art .pp-places--grown{
  margin:0; border-radius:0; border-top:0; padding:0;
  flex:1 1 auto; display:flex; flex-direction:column;
}
.senshi-art .pp-places--grown > .pp-statwrap{ flex:1 1 auto; padding:0; }
/* TWO COLUMNS. Three was tried first - nine chips in three rows instead of
   five - and at 179px a column every label-and-value pair wrapped anyway, so
   it bought three rows and spent them on wrapping. Two columns at 268px each
   fit on one line, which is what makes five rows shorter than three. */
/* The nine chips were one list in a two-column grid until Ash asked for the
   chart facts and the life to be told apart; the chip rules that lived here
   moved to .nk-stat-col below, where the two lists are. What stays is the
   Rodden star strip, which is a cell taller than a line of text and set the
   height of whatever row it landed in. */
.senshi-art .pp-places--grown .pr{ display:inline-flex; align-items:center; }

/* ---- the header carries the chart's whole caption now ---- */
.senshi-art .pp-h-id{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  line-height:1.25;
}
/* ONE LINE, OR IT OVERLAPS ITS OWN SUBTITLE. At 15px with 2px of tracking
   the identity line came to about 480px in a bar with 477 of usable width,
   so "Japan" wrapped onto the row the caveat was already using and the two
   printed over each other. Tighter tracking and a shrink-to-fit size keep it
   on one line at this column width without touching the bar. */
/* SAME PROBLEM THE PLAYER ALREADY SOLVED. --pp-ramp-ink is white, and
   Naoko's ramp runs out to white at its right-hand end, so the identity line
   sat white-on-near-white across half the bar. The player's readout plate is
   the established answer on this page: a translucent panel under the text
   with the palette's second ink on it. The bar keeps its gradient, the words
   keep their contrast, and nothing here needs a colour chosen by hand. */
.senshi-art .pp-h--chart .pp-h-id{
  padding:3px 10px 4px; border-radius:3px;
  color:var(--pp-ramp-ink2, #3a2e2a); text-shadow:none;
  background:rgba(255,253,246,.84);
  box-shadow:inset 1px 1px 0 rgba(58,46,42,.26),
             inset -1px -1px 0 rgba(255,255,255,.7);
}
.senshi-art .pp-h-id{ max-width:100%; }
.senshi-art .pp-h--chart .pp-h-id > b,
.senshi-art .pp-h--chart .pp-h-id > i{
  color:var(--pp-ramp-ink2, #3a2e2a); text-shadow:none;
}
.senshi-art .pp-h-id > b{
  font-weight:400; letter-spacing:.9px; white-space:nowrap;
  font-size:clamp(11px, 1.05vw, 14px);
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.senshi-art .pp-h-id > i{
  font-style:normal; font-size:10.5px; letter-spacing:1.1px;
  text-transform:uppercase; opacity:.82;
}

/* ---- THE WINDOWS 98 SCROLLBAR, ON THE PANES AND THE STATS ----
   Ash: "still waiting for the update to all those scroll bars... look at my
   profile. the retro 98 scroll sytle like that is over there."

   It was over there, and the reason it never appeared over here is written
   in a comment three thousand lines above, on the recipe box, by someone who
   had already hit it: CHROME NOW SUPPORTS scrollbar-color, AND SETTING IT
   MAKES CHROME THROW AWAY EVERY ::-webkit-scrollbar RULE and draw its own
   rounded overlay bar instead. Both of my passes set scrollbar-color and the
   webkit rules together, so the webkit half was dead on arrival and what
   showed was Chrome's default bar with a tint on it.

   So: the 98 chrome here, and scrollbar-color only behind @supports, for
   Firefox, which cannot draw this and gets the colours on a plain bar.

   Seventeen pixels, a dithered track, a bevelled thumb carrying the
   profile's own ramp, square arrow buttons at both ends - light on the top
   and left, dark on the bottom and right, inverted while pressed, which is
   the raised plastic button 98 was imitating. Same construction as the
   recipe box, different ramp, because each profile brings its own. */
.senshi-art .pp-pane,
.senshi-art .pp-places--grown{
  --pp-bar-face:var(--pp-ramp, linear-gradient(180deg,#6a1535,#b23965));
  --pp-bar-lit:#fffdf6;
  --pp-bar-dim:color-mix(in srgb, var(--pp-ramp-edge, #8d6f9b) 62%, #120d18);
}
.senshi-art .pp-pane{ overflow-y:auto; overflow-x:hidden; }
.senshi-art .pp-pane::-webkit-scrollbar,
.senshi-art .pp-places--grown::-webkit-scrollbar{ width:17px; }
/* the dither: a two-pixel checker, tonal rather than grey - a grey speck on
   cream reads as a transparency grid, not as the 98 track */
.senshi-art .pp-pane::-webkit-scrollbar-track,
.senshi-art .pp-places--grown::-webkit-scrollbar-track{
  background-color:color-mix(in srgb, var(--paper) 92%, var(--head));
  background-image:
    linear-gradient(45deg, rgba(90,50,104,.18) 25%, transparent 25%,
      transparent 75%, rgba(90,50,104,.18) 75%),
    linear-gradient(45deg, rgba(90,50,104,.18) 25%, transparent 25%,
      transparent 75%, rgba(90,50,104,.18) 75%);
  background-size:4px 4px; background-position:0 0, 2px 2px;
}
.senshi-art .pp-pane::-webkit-scrollbar-thumb,
.senshi-art .pp-places--grown::-webkit-scrollbar-thumb{
  background:var(--pp-bar-face);
  border:2px solid var(--pp-bar-lit);
  border-right-color:var(--pp-bar-dim);
  border-bottom-color:var(--pp-bar-dim);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  min-height:28px;
}
.senshi-art .pp-pane::-webkit-scrollbar-thumb:active,
.senshi-art .pp-places--grown::-webkit-scrollbar-thumb:active{
  border-color:var(--pp-bar-dim);
  border-right-color:var(--pp-bar-lit);
  border-bottom-color:var(--pp-bar-lit);
}
.senshi-art .pp-pane::-webkit-scrollbar-button,
.senshi-art .pp-places--grown::-webkit-scrollbar-button{ display:none; }
.senshi-art .pp-pane::-webkit-scrollbar-button:single-button,
.senshi-art .pp-places--grown::-webkit-scrollbar-button:single-button{
  display:block; height:17px; width:17px;
  background:var(--pp-bar-face);
  background-repeat:no-repeat; background-position:center;
  border:2px solid var(--pp-bar-lit);
  border-right-color:var(--pp-bar-dim);
  border-bottom-color:var(--pp-bar-dim);
}
.senshi-art .pp-pane::-webkit-scrollbar-button:single-button:vertical:decrement,
.senshi-art .pp-places--grown::-webkit-scrollbar-button:single-button:vertical:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M4.5 0 9 6H0z' fill='%23fffffa'/%3E%3C/svg%3E");
}
.senshi-art .pp-pane::-webkit-scrollbar-button:single-button:vertical:increment,
.senshi-art .pp-places--grown::-webkit-scrollbar-button:single-button:vertical:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23fffffa'/%3E%3C/svg%3E");
}
.senshi-art .pp-pane::-webkit-scrollbar-button:single-button:active,
.senshi-art .pp-places--grown::-webkit-scrollbar-button:single-button:active{
  border-color:var(--pp-bar-dim);
  border-right-color:var(--pp-bar-lit);
  border-bottom-color:var(--pp-bar-lit);
}
/* Firefox only. Behind @supports so Chrome never sees it - see the note. */
@supports not selector(::-webkit-scrollbar){
  .senshi-art .pp-pane,
  .senshi-art .pp-places--grown{
    scrollbar-width:auto;
    scrollbar-color:var(--pp-ramp-edge, #c7a8d2)
                    color-mix(in srgb, var(--paper) 88%, var(--head));
  }
}

/* ---- THE TWO COLUMNS ARE ONE ROW, AND THE ROW HAS A HEIGHT ----
   Ash: "I just want all the elements of the profile thread template to be
   visable on screen all at once... with the full article peaking up from the
   bottom to encourage scrolling and exploring."

   Nothing above does that on its own: every piece sized to its own content,
   so the block came to 1487px against about 874 of room. The fix is to give
   the ROW a height and let the one flexible thing absorb the difference -
   which is the placements list, because it is the only piece here that can
   honestly be shortened. A portrait cropped to fit is a worse portrait and a
   wheel squeezed to fit is a worse chart; a list with eight rows showing and
   a scrollbar for the rest is still the whole list.

   --pp-top is the row's height. It is set here rather than per profile so
   every chart profile built from this template lands on the same screen. */
/* --pp-top is the row's height; --pp-wheel-max caps the chart inside it.
   The right column is what binds: header 66 + wheel + stats 246 has to equal
   the left column, and the left column cannot go below portrait 296 + tabs 36
   + gif-and-player 190 + a list worth reading. 470 on the wheel is the number
   that leaves the list about 260px - seven rows and a scrollbar - and still
   puts roughly 70px of the standfirst under the fold to scroll toward. */
/* 800, and the number is a TRADE, so it is worth writing down which way.
   The stats were overflowing their band by twelve, the chart had been
   squeezed by twenty-two to pay for it, and section 386 then added the
   tightest-configuration line, which is another forty-three. Giving all of
   that to the row would end the block 35px above the fold and the standfirst
   would stop peeking - and the peek is the stated goal: "with the full
   article peaking up from the bottom to encourage scrolling and exploring."
   So the row takes 24 of it and the chart gives up the rest. At 1920x960
   that leaves about 54px of the standfirst showing and a 492px wheel. */
.senshi-art .pp-idbox{ --pp-top:calc(800px + var(--pp-row-grow, 0px)); --pp-wheel-max:430px; }
.senshi-art .pp-idcol--r > .pp-wheel .nkw-svg{
  max-height:var(--pp-wheel-max); width:auto; margin:0 auto; display:block;
}
.senshi-art .pp-idgrid{ align-items:stretch; }
.senshi-art .pp-idcol--l,
.senshi-art .pp-idcol--r{
  display:flex; flex-direction:column; min-height:0; max-height:var(--pp-top);
}
.senshi-art .pp-idcol--l > .pp-win--me{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto;
}
.senshi-art .pp-win--me > .pp-me-body{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto;
}
/* THE TITLE BAR NEVER SHRINKS. Ash: "when clicking the aspects button,
   there is a visual shift in the main pfp... its a bug."

   It is, and the toggle only made it easy to find - clicking the ASPECTS
   TAB has always done the same thing. .w98-titlebar is a flex item with the
   default flex:0 1 auto, so it is allowed to shrink, and the aspects pane
   asks for about six pixels more than the placements pane. With nothing
   else in the column able to give, the browser took those six pixels out of
   the title bar: it went 22px to 16, and the portrait and everything under
   it rode up to meet it.

   Locked at 0 0 auto the bar holds, and the pane gives instead - which it
   can, because it has min-height:0 and scrolls. Chrome is chrome; a window's
   title bar getting shorter because a list below it is long is never the
   right answer. */
.senshi-art .pp-win--me > .w98-titlebar{ flex:0 0 auto; }

/* the portrait, the gif and the player hold their size; the tabs hold theirs;
   the panes take whatever is left and scroll inside it */
.senshi-art .pp-win--me .pp-pic,
.senshi-art .pp-win--me .pgp-stack--under{ flex:0 0 auto; }
.senshi-art .pp-win--me .pp-tabs{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto;
}
.senshi-art .pp-win--me .pp-tab-bar{ flex:0 0 auto; }
.senshi-art .pp-tabs > .pp-tab-r:first-of-type:checked ~ .pp-pane--pl,
.senshi-art .pp-tabs > .pp-tab-r:nth-of-type(2):checked ~ .pp-pane--as{
  flex:1 1 auto; min-height:0; max-height:none;
}
/* the wheel holds its size, the stats take the rest of the right column */
.senshi-art .pp-idcol--r > .pp-h--chart,
.senshi-art .pp-idcol--r > .pp-wheel{ flex:0 0 auto; }
.senshi-art .pp-places--grown{ min-height:0; overflow:auto; }


/* ---- THE RIGHT COLUMN IS ONE COLUMN, TOUCHING ----
   Ash: "increase the hgeight of the chart box and push it up agains the
   bottom of the nameplate... press it up agains t the bottom of the chart
   box.. everything on that right side should all be touching."

   Two things were holding it apart and neither was visible as a margin on
   the rules I had already written: the column is a flex column carrying
   gap:12px, and .pp-h picks up a 1.1em bottom margin from the base heading
   rule, which at this font size is 17.6px. Together that is a 30px band of
   paper between the nameplate and the chart. Both go. */
.senshi-art .pp-idcol--r{ gap:0; }
.senshi-art .pp-idcol--r > .pp-h--chart{ margin:0; }

/* THE CHART BOX TAKES WHAT IS LEFT. It was pinned to a max height, which
   meant the 42px freed by closing those gaps went to the bottom of the
   column instead of into the chart. Now the stats hold a fixed band and
   scroll inside it - Ash: "I'm fine witha scroll here too" - and the chart
   absorbs everything else, which is what makes it taller. */
.senshi-art .pp-idcol--r > .pp-wheel{
  flex:1 1 auto; min-height:0; display:flex; align-items:center;
  justify-content:center;
}
.senshi-art .pp-idcol--r > .pp-wheel .nkw-svg{
  max-height:100%; max-width:100%; width:auto; height:auto;
}
/* Ash: "the stats box. no left and right scroll." Vertical only - the box
   is a fixed band and the rows go down it, so a sideways bar was never
   anything but the grid overflowing, which minmax(0,1fr) above already
   fixed. Saying so explicitly means a long value added later wraps instead
   of quietly reintroducing the bar. */
.senshi-art .pp-places--grown{
  flex:0 0 auto; height:var(--pp-stats, 172px);
  overflow-y:auto; overflow-x:hidden;
}

/* ---- THE TABS TAKE TWO FLAT COLOURS ----
   Ash: "placements and aspects buttons. pick 2 bold colors from the palette
   and use them to color the buttons. no gradietn for the puttons."

   The two boldest flat colours her palette carries, and the only two that
   are nowhere near each other: --pp-ramp-edge, the teal the chart's rim and
   its scrollbar already use, and --pp-link-bg, the wine every link on the
   page is set in. Flat fills, no gradient. The unselected tab is the same
   colour washed most of the way into the paper, so the pair still reads as
   one control rather than as two unrelated buttons. */
.senshi-art .pp-tab{
  background:color-mix(in srgb, var(--pp-ramp-edge, #5fa3aa) 15%, var(--paper));
  border-color:color-mix(in srgb, var(--pp-ramp-edge, #5fa3aa) 38%, var(--paper));
  border-bottom-color:color-mix(in srgb, var(--pp-ramp-edge, #5fa3aa) 52%, var(--paper));
}
.senshi-art .pp-tab--as{
  background:color-mix(in srgb, var(--pp-link-bg, #8a3336) 14%, var(--paper));
  border-color:color-mix(in srgb, var(--pp-link-bg, #8a3336) 36%, var(--paper));
  border-bottom-color:color-mix(in srgb, var(--pp-link-bg, #8a3336) 50%, var(--paper));
}
.senshi-art .pp-tabs > .pp-tab-r:first-of-type:checked ~ .pp-tab-bar .pp-tab--pl{
  background:var(--pp-ramp-edge, #5fa3aa);
  color:#fffdf6; text-shadow:0 1px 0 rgba(26,20,32,.4);
  border-color:var(--pp-ramp-edge, #5fa3aa);
  border-bottom-color:color-mix(in srgb, var(--pp-ramp-edge, #5fa3aa) 70%, #120d18);
}
.senshi-art .pp-tabs > .pp-tab-r:nth-of-type(2):checked ~ .pp-tab-bar .pp-tab--as{
  background:var(--pp-link-bg, #8a3336);
  color:#fffdf6; text-shadow:0 1px 0 rgba(26,20,32,.4);
  border-color:var(--pp-link-bg, #8a3336);
  border-bottom-color:color-mix(in srgb, var(--pp-link-bg, #8a3336) 70%, #120d18);
}


/* ---- THE STATS, SPLIT BY KIND ----
   Ash: "in the stats box... all astrological info listen in the left column
   (birthday, rodden, birth time) the right column for general infop."

   Two lists side by side rather than one grid flowing in columns - see
   card_rows() for why that distinction matters. The chart column is the
   chart's credentials, the other is the life; a reader checking whether the
   houses are trustworthy looks in one place and never has to read past a
   marriage date to do it. */
/* MINMAX(0, 1fr), NOT 1fr. A grid track sized 1fr still refuses to go below
   its content's min-content width, and these cells hold a 74px label next to
   a nowrap value - so the two tracks pushed out to 290 and 296 inside a 537
   box and the right-hand column was clipped off by the box edge rather than
   ellipsised inside it. minmax(0,1fr) lets the track shrink, which is what
   lets text-overflow do its job. */
.senshi-art .pp-statwrap--split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0;
  align-items:start; padding:0;
}
.senshi-art .nk-stat-col{
  display:block; margin:0; padding:0; list-style:none;
}
.senshi-art .nk-stat-col .nk-chip--stat{
  border-radius:0; border-width:0 1px 1px 0; padding:2px 9px;
  display:flex; align-items:baseline; gap:8px; line-height:1.3;
}
.senshi-art .nk-stat-col .nk-chip--stat .nk-body{
  flex:0 0 auto; min-width:0; width:74px;
}
/* WRAP, DO NOT TRUNCATE. With the label at 74px each value gets about 185,
   and half of them are longer than that - ellipsised, "Yoshihiro Togashi,
   1999" became "Yoshihiro Togashi,..." with no way to see the rest, because
   a stat chip has no hover state to reveal it. The box scrolls now, so
   height is the one thing here that is free; losing the ends of the facts
   to save it would be paying in the expensive currency. */
/* WHITE-SPACE:NORMAL, explicitly. `.senshi-art .nk-chip .nk-sign` sets
   nowrap at (0,2,0), and overflow-wrap cannot do anything while that holds -
   a nowrap line has no break opportunities to wrap at, so the value ran out
   of its cell and was clipped by the box edge instead. It did not show on
   her own page, where the column is 267px and the longest value just fits;
   it showed on sailormoon.html, where the same block is 43px narrower and
   "Princess Naoko Planning" wanted 164px in a 153px cell. */
.senshi-art .nk-stat-col .nk-chip--stat .nk-sign{
  flex:1 1 auto; min-width:0; font-size:13px;
  white-space:normal; overflow-wrap:anywhere; line-height:1.25;
}
/* the chart column carries the teal the tabs and the rim use, so the two
   halves are told apart by the palette rather than by a rule between them */
.senshi-art .nk-stat-col--chart .nk-chip--stat{
  background:color-mix(in srgb, var(--pp-ramp-edge, #5fa3aa) 9%, var(--paper));
}


/* ========= 383. THE BOXES STOP HOLDING THEIR BREATH ===================== */
/* Everything in this section is the same note from three directions: the top
   block was compressed while it was being fitted onto one screen, the scroll
   bars arrived and made that compression unnecessary, and it never got
   loosened again. */

/* ---- the stats sit IN the box ----
   Ash: "make sure the stats text is all the way in the box... i see a lot of
   padding starting on the left side pushing some of the text outsdie the
   viewable window."

   Found rather than guessed at: .pp-places--stats .nk-signs--tight carries
   padding:0 12px from the days when the stats were ONE list across the whole
   card, where 12px of margin either side of a wide table is right. Split into
   two lists it is charged twice - 24px off each 267px column, 48px off the
   box - and it outranks the padding:0 on .nk-stat-col, which is (0,2,0)
   against its (0,3,0). The column takes nothing; the row keeps its own small
   inset so the words do not touch the rule beside them. */
.senshi-art .pp-places--stats .pp-statwrap--split .nk-stat-col{ padding:0; }
.senshi-art .pp-statwrap--split .nk-stat-col .nk-chip--stat{ padding:3px 7px; }
.senshi-art .pp-statwrap--split .nk-stat-col .nk-chip--stat .nk-body{
  width:70px;
}

/* ---- and the stats stop scrolling ----
   Ash: "the stats box, there is enough room for it to grow just enough to not
   need a scroll at all. do that."

   It was pinned to a fixed band and scrolled inside it. It takes its own
   height now, and the two numbers that let it: --pp-top grew by what the
   stats were overflowing by, so the chart keeps every pixel it had rather
   than paying for this.

   flex:0 0 auto - neither grow nor shrink. Shrink was tried first and the
   box came back two pixels short with the bar still on it: the chart and
   the stats were both shrinkable, so they split the rounding between them
   and neither got what it asked for. The chart is the one that can give,
   because its drawing scales and a list of facts does not, so all the give
   lives on that side of the column now. */
/* ON THE CHILD SELECTOR, because `.senshi-art .pp-idcol--r > .pp-places--stats`
   sets flex:1 1 auto at (0,3,0) and a plain `.senshi-art .pp-places--grown`
   is (0,2,0). Written short it lost, silently: the box took height:auto from
   it - nothing else sets height - and kept the old flex, so it still shrank
   by the two pixels it was over and still carried the bar. */
/* --pp-stats-max is the CEILING, not the height: the box is its own content
   tall until that content would start eating the chart, and then it stops
   growing and scrolls instead. Without a ceiling the engagements added in
   386 crushed the wheel from 492px to 29 - the stats do not shrink, so the
   only flexible thing left took the whole bill. */
.senshi-art .pp-idcol--r > .pp-places--grown{
  flex:0 0 auto; height:auto; min-height:0;
  max-height:var(--pp-stats-max, 289px);
  /* CLIP, NOT SCROLL. Ash: "the stats box, hover box and new to charts
     button have a scroll now. please remove it." With overflow-y:auto the
     box grew a scrollbar on her machine while this build measured it 12px
     under its ceiling - a box that is content-tall to a fraction of a pixel
     can round its scrollHeight one past its clientHeight, and on Windows
     that one pixel is a full scrollbar. So nothing in here scrolls, ever:
     the ceiling still protects the wheel, and naoko_audit.py now fails the
     build unless the card clears that ceiling by 24px, which is the stronger
     guarantee. A card that outgrew it would be cut, and the audit is what
     stops one shipping. */
  overflow:clip;
}

/* ---- the panes get their room back ----
   Ash: "inside the placements and aspect scroll boxes. before we were tyring
   to save space and shrunk/compacted the text and glyphs closer togehrrer.
   give it back the breathing room... we have the scroll now, so it doen't
   need to be so squished inside."

   She is right and the reasoning is plain: every pixel saved by crushing a
   row was being spent to fit one more row on screen, and once the list
   scrolls, fitting one more row on screen buys nothing at all. The rows go
   back to a readable rhythm and the list simply runs longer, which costs
   nothing that is visible. */
/* MINMAX(0,1FR), NOT 1FR - the same trap this file documents twice already.
   A 1fr track will not go below its content's min-content width, and the
   widest aspect row's min-content is about 302px, so every row in a 296px
   pane was stretched to 302 and the ends ran out past the edge. Ash: "the
   text is still spilling past the scroll inside the aspects box." */
.senshi-art .pp-pane .nk-signs{ gap:5px; grid-template-columns:minmax(0,1fr); }
.senshi-art .pp-pane .nk-chip,
.senshi-art .pp-pane .nk-asp{ padding:6px 10px; gap:10px; min-height:34px; }
.senshi-art .pp-pane .nk-chip .nk-body{ font-size:15px; }
.senshi-art .pp-pane .nk-chip .nk-sign{ font-size:15.5px; }
.senshi-art .pp-pane .nk-chip .nk-deg{ font-size:14.5px; }
.senshi-art .pp-pane .nk-asp-pair{ gap:7px; }
.senshi-art .pp-pane .nk-asp-orb{ font-size:13px; }
.senshi-art .pp-pane .nk-asp-way{ font-size:9.5px; width:60px; }
.senshi-art .pp-pane .nk-asp-term{ font-size:9.5px; padding:2px 6px; }

/* ---- the aspect mark is a drawing now, at the planets' own size ----
   Ash: "the aspect symbols... they definately look like another font set.
   the aspect symbols look way smaller than the planet symbols."

   Both halves were literally true. It was a typed Unicode character - so
   another font set by definition, whichever one the browser reached for -
   set at 15px between two twenty-pixel sprites. make_glyphs.py draws all
   five on the same tile with the same one-pixel rim as the planets; these
   rules put the three glyphs in a row at ONE size, which is the thing she
   was actually asking for.

   The chain is spelled out in full because .senshi-art .pp-panel .nk-chip
   .nk-asp-pair .nk-g is (0,5,0) and anything shorter loses to it - the same
   trap this pane has already sprung twice. */
/* 20, NOT 22. Ash: "double check the glpyhs and make sure none are getting
   shrunk. some look compressed again."

   They were not being shrunk - they were being UPSCALED by 1.1, which does
   the same damage. Every one of these sprites is 20px native, and at 22 the
   browser duplicates roughly one pixel row in nine. On a glyph with
   one-pixel detail that is the difference between a horn and a smudge, and
   it is the fractional part that does it, not the direction. The site's own
   rules say this in two other places - "keep any override a multiple of 84"
   on the Rodden strip, "fractional scaling on pixel art shimmers" on the
   homepage key - and I wrote 22 anyway when the rows were loosened.

   The legal sizes for a 20px sprite are 20, 40, 60. */
.senshi-art .pp-panel .nk-chip .nk-asp-pair .nk-g,
.senshi-art .pp-panel .nk-chip .nk-asp-pair .nk-asp-s,
.senshi-art .pp-pane .nk-chip .nk-g{
  width:20px; height:20px; flex:0 0 auto;
  image-rendering:pixelated;
}
/* ...EXCEPT THE ZODIAC SET, which is 16px artwork and not 20.
   Ash: "use the pink zodiac glyph set for the rising sign."

   The slot stays 20 so the rows keep their rhythm; object-fit:none draws the
   sprite at its own size inside it instead of stretching it, which is the
   same fix .me-g--zod has carried since her page drew its own rising row by
   hand. The template's chips inherited the slot and not the exception, so
   when her page moved onto the template her rising sign went to 20px for a
   16px sprite - a 1.25 scale on pixel art, which drops one row in four.
   Naoko's chart has no rising row, so nothing showed it until now. */
.senshi-art .pp-pane .nk-chip .nk-g--zod,
.senshi-art .pp-panel .nk-chip .nk-g--zod{
  object-fit:none;              /* draw it at 16px, do not scale to the box */
  object-position:center;
}
/* it stopped being text, so the text properties stop applying to it */
.senshi-art .pp-pane .nk-asp .nk-asp-s{
  display:block; font-size:0; line-height:0; text-align:left; cursor:help;
}


/* ========= 384. THE SECOND STOREY: A WAY AROUND A VERY LONG PAGE ======== */
/* Ash: "below the profile text box... this box, squish it to the width of
   the stats box... so it looks like its a box sitting in that column. to the
   left, include a second profile pic (the B tier pic... which can be a
   little more silly/casual per the template...) if put some hotlinks to jump
   down to the diffeent sections of the article. the page is really fuckin
   long, and hot links would be great to jump."

   The page IS really long - eleven sections, sixty thousand bytes of thread
   before the article even starts - and until now the only way into the
   middle of it was the standfirst's keyed words, which are a lovely way in
   if you happen to want the thing a key names and no way in at all if you
   do not. A reader who wants "marriage" had to scroll for it.

   WHY THIS IS A ROW OF THE SAME GRID rather than a box with a width on it:
   she asked for the paragraph to be "the width of the stats box", and the
   stats box's width is the grid's second track. Given a number instead, the
   two would agree today and drift the first time the columns change. Given
   the track, they cannot disagree. */
/* ONE TEMPLATE, ONE WIDTH. Ash: "the profile thread template is a different
   size on the sailor moon landing page than the naoko profile page... match
   please."

   .naokoframe carries 28px of side padding, which is right for the frame as
   that page otherwise uses it and 4px per side too much for a frame holding
   this block - the select page's own borders have already taken 8px that
   her page does not spend. Scoped with :has() to a frame that actually
   contains the thread's fit wrapper, so this reaches the one place it
   should and nothing else on either page. The wrapper's own inline cap is
   rewritten by build_naoko_top.with_fit(); an inline style cannot be beaten
   from here. */
.senshi-art .naokoframe:has(> .pp-thread-fit){
  padding-left:20px; padding-right:20px;
}
/* ...and the same width on Ash's page. Ash: "the dimension of the scroll
   boxs and menus should be the same as the naoko template." Her page's
   frame is the site's plain .block at 28px a side, where naoko-takeuchi's
   frame gives 24, so her window was 935 to Naoko's 943 and everything inside
   it - the box, the right column, the wheel - was 8px narrower. Measured
   down the ancestor chain, that was the whole difference. 24 here, and the
   two blocks are the same width to the pixel; the wheel renders at 523 on
   both, which is the number thread_ash now hands in. */
.ash-page #cp{ padding-left:24px; padding-right:24px; }
/* ONE BOX ACROSS BOTH TRACKS, with the navigation floated into it. Ash:
   "let's put the 'jump to', buttons, and pfp2 inside the profile paragraph
   box, and keep them on the left side. the text should float to the right."
   It was two cells side by side; now it is one box and a float, which is
   also what lets the paragraph close UNDER the portrait instead of stopping
   level with it. */
.senshi-art .pp-idzone{ grid-column:1 / -1; }
.senshi-art .pp-zone--in > .pp-idnav{
  /* 232, down from 300. Ash: "can i get the jump to more narrow and sit
     next to the marching band... can you do this on the naoko profile
     too?" The box is 821 inside; the band is 566 at its own size and may
     not shrink; 821 - 566 - this margin leaves 241, and 232 keeps nine
     pixels in hand so a scrollbar or a rounding never drops the band under
     the column. The chips stack one a row at this width - see .pp-jump-list
     - and the second portrait takes the same 232, cropped as before. */
  float:left; width:232px; margin:2px 14px 10px 0;
  /* shape-outside is deliberately NOT set: the column is a rectangle and
     the text should run down a straight edge, not hug a silhouette */
}
.senshi-art .pp-zone--in::after{ content:""; display:block; clear:both; }

/* ---- the door for a reader who cannot read a chart ----
   Ash: "a nice big button so people can see. if they don't know any
   astrology, they need to be able to find it."

   So it is the loudest thing in the box and it sits at the bottom, after
   the paragraph has told them who they are looking at and before the
   article asks them to care about her Jupiter. Full width under the float,
   which is also why the clear:both above has to come first - a button that
   starts beside the portrait is a button half the page misses. */
.senshi-art .pp-learnbtn{
  display:block; clear:both; margin:16px 0 0; padding:12px 16px 13px;
  text-align:center; text-decoration:none;
  background:var(--pp-link-bg, #8a3336);
  border:2px solid color-mix(in srgb, var(--pp-link-bg, #8a3336) 72%, #120d18);
  color:var(--pp-ramp-ink, #fffdf6);
  font-family:basiic,monospace; font-size:13px; letter-spacing:1.6px;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(26,20,32,.45);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.26),
             inset -1px -1px 0 rgba(26,20,32,.3);
}
.senshi-art .pp-learnbtn:hover,
.senshi-art .pp-learnbtn:focus-visible{
  background:color-mix(in srgb, var(--pp-link-bg, #8a3336) 80%, #fffdf6);
  color:#fffdf6;
}
.senshi-art .pp-learnbtn:active{
  box-shadow:inset 1px 1px 0 rgba(26,20,32,.38);
}
@media (max-width:760px){
  /* no room to wrap beside it, so it stops being a float */
  .senshi-art .pp-zone--in > .pp-idnav{
    float:none; width:auto; margin:0 0 12px;
  }
}

/* ---- the navigation column ----
   Flush, like the block above it: the portrait and the list share an edge
   rather than floating apart, so the second storey reads as built the same
   way as the first. */
.senshi-art .pp-idnav{ display:flex; flex-direction:column; gap:0; }
/* THE PICTURE IS A BAND, AND THE LIST SETS THE HEIGHT.
   Measured before it was decided: the standfirst is 391px of text and the
   jump list is 335px on its own at eleven sections, so there is no crop of a
   portrait that makes these two columns the same height. One of them has to
   give, and it is not the list - the number of sections is a fact about the
   article, not a dial.
   So the picture takes a fixed band and the paragraph box below stretches to
   whatever the nav column comes to. That costs about 110px of the article's
   position, which is what a table of contents for an eleven-section page is
   worth, and it leaves the standfirst box with room under the words - which
   is where zone_extra has always been meant to go.
   28% down, not centred: a cover crop of a 440x535 portrait into a 300x210
   band cuts her face off at the chin if you take the middle of it. */
/* THE PICTURE TAKES THE SLACK, now that it can. It was pinned to a 210px
   band while the jump list was a stacked list 353px tall and would have been
   squeezed to nothing. As oval chips the same eleven sections come to about
   a hundred and ten, so the list holds its own height and the portrait
   absorbs whatever the paragraph beside it turns out to need - which is a
   different number on each page, because the standfirst wraps more in the
   narrower column on sailormoon.html. Bounded at both ends so it can never
   become a letterbox or a tower. */
.senshi-art .pp-pic--b{
  /* Ash: "shrink pfp2 a little and make the hotlink buttons larger".
     Both at once, so the portrait stops being the flexible one: it takes a
     stated height and the CHIPS absorb whatever the paragraph beside them
     turns out to need. The nav column still ends on the paragraph's line,
     which is the thing that must not break, and the slack now lands in the
     pill area where it is invisible instead of under a stretched picture. */
  /* A STATED HEIGHT now that the column is a float rather than a grid
     cell: there is no cell to fill, so there is nothing to flex against,
     and the paragraph decides its own length by how long it is. */
  flex:0 0 auto; height:230px;
  width:100%; object-fit:cover; object-position:50% 26%;
  display:block; margin:0; border-radius:0;
}
.senshi-art .pp-jump{ flex:0 0 auto; }
/* `.senshi-art .pp-panel p` is (0,2,1) and sets a paragraph margin, which
   beat the margin:0 written on the bare class and left an 18px step between
   this bar and the list it is the bar for. The same trap is documented twice
   already further up this file. */
.senshi-art .pp-panel .pp-jump-h,
/* Ash: "a gradient scrolling effect to the 'jump to' box... kinda like the
   dividers are down the page."

   Same object as those: --pp-rule, the profile's own eleven-stop ramp, at
   320px a tile, stepped across in 48 jumps over 4 seconds by
   pp-rule-scroll - stepped rather than slid, because a smooth pan is the
   one thing this could not have done in 1998.

   TWO LAYERS IN ONE PSEUDO. The ramp alone runs through stops light enough
   to lose cream text, so a flat scrim sits over it inside the same
   background shorthand. isolation:isolate is what lets z-index:-1 put the
   pair above the bar's own colour and still below the words, without the
   markup growing a wrapper span to hold them apart. */
.senshi-art .pp-jump-h{
  position:relative; isolation:isolate; overflow:hidden;
  margin:0; padding:5px 10px 4px;
  font-family:basiic,monospace; font-size:10px; letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--pp-ramp-ink, #fffdf6);
  background:var(--pp-link-bg, #8a3336);
  text-shadow:0 1px 0 rgba(26,20,32,.55);
}
.senshi-art .pp-jump-h::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(22,16,26,.52), rgba(22,16,26,.52)),
    var(--pp-rule, var(--fuku-tile, linear-gradient(90deg,#6a1535,#b23965)));
  background-size:auto, 320px 100%;
  background-repeat:repeat, repeat;
  animation:pp-rule-scroll 4s steps(48, end) infinite;
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pp-jump-h::before{ animation:none; }
}
/* THE STACKED LIST THAT USED TO BE HERE IS GONE. It was replaced wholesale
   in 388 by the recipe box's oval chips - but only the rules 388 restated
   were actually overridden, and the one it had no opinion about was the
   counter on ::before. That number kept being drawn, and with the chip no
   longer position:relative it positioned against an ancestor instead and
   landed on top of the first letters of every label. Ash: "i see number
   under 'jump to'." Deleting the old block is the fix; two definitions of
   one control is the bug. */

/* ---- and back up again ----
   Ash: "we should include mini buttons in each section that takes you back
   to the top of the page."

   Absolutely positioned at the right end of the heading, NOT floated and not
   a flex item: .nk-sub is position:relative already and carries its scrolling
   gradient rule as an ::after across its whole width, and both floating the
   control and making the heading a flex row move that rule. Out of flow it
   changes nothing it sits on top of.

   It is quiet on purpose. A control repeated eleven times down a page is
   furniture; if it competes with the headings it is eleven distractions, and
   the one moment it needs to be found is the moment someone is already
   looking for it. */
.senshi-art .pp-up{
  position:absolute; right:0; top:2px;
  padding:2px 7px 3px;
  font-family:basiic,monospace; font-size:9px; letter-spacing:1.2px;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:color-mix(in srgb, var(--head) 52%, var(--paper));
  border:1px solid color-mix(in srgb, var(--pp-ramp-edge, #c9a24e) 42%,
                             var(--paper));
  border-radius:3px; background:color-mix(in srgb, var(--paper) 86%, #ffffff);
}
.senshi-art .pp-up:hover,
.senshi-art .pp-up:focus-visible{
  color:var(--pp-ramp-ink, #fffdf6);
  background:var(--pp-link-bg, #8a3336);
  border-color:var(--pp-link-bg, #8a3336);
}
@media (max-width:560px){
  /* on a phone the heading has no spare width beside it, so it drops to its
     own line under the words rather than printing over them */
  .senshi-art .pp-up{ position:static; display:inline-block; margin:4px 0 0; }
}


/* ========= 385. A DRAWER FOR PHOTOGRAPHS ================================ */
/* Ash: "give the naoko profile a junk drawer... and any pics i sent you that
   don't quite fit in the article, dump them there."

   The drawer markup is hers - the same .junk-grid her own page has - but the
   rules on it are written for what is in HERS: pixel sprites between 30 and
   384 pixels, shown at their own size and rendered hard, because "don't
   frame the images. don't shrink the images."

   Both of those are exactly wrong for this drawer. Every item here is a
   photograph or a magazine scan, one of them 2000px wide, and width:auto
   with image-rendering:pixelated would put a two-thousand-pixel scan on the
   page and then render it without smoothing. The frame still stays off -
   that part of her instruction was about the drawer and not about sprites. */
.senshi-art .pp-panel--drawer .junk-grid{ align-items:flex-end; gap:10px; }
.senshi-art .pp-panel--drawer .junk-item img{
  height:var(--pp-junk-cap, 156px); width:auto; max-width:100%;
  /* photographs, so the browser's own smoothing, not the sprite setting */
  image-rendering:auto;
  /* and the cap is a HEIGHT, which is what makes the row pack: items of one
     height leave no gap under them when the row wraps. The width follows the
     picture's own ratio, taken from the width and height attributes, which
     also means the box is reserved before a lazily-loaded picture arrives
     rather than the row jumping when it does. */
}
.senshi-art .pp-panel--drawer .junk-item img.cp-zoom{ cursor:zoom-in; }
.senshi-art .pp-panel--drawer .junk-item img:hover,
.senshi-art .pp-panel--drawer .junk-item img:focus-visible{
  outline:2px solid var(--pp-ramp-edge, #c9a24e); outline-offset:2px;
}
.senshi-art .pp-panel--drawer .junkdump-sub{
  font-size:13px; font-style:italic;
}
@media (max-width:700px){
  .senshi-art .pp-panel--drawer{ --pp-junk-cap:112px; }
}


/* ========= 386. THE TIGHTEST CONFIGURATION, IN WORDS ==================== */
/* Ash: "can we put a 'stongest aspect in the chart' (more precise) like I see
   the Jupiter in cancer Trine Neptune in scorpio.... (and write it out like
   that with the glyphs and the words."

   Which is the aspects tab's first row said as a sentence. The tab ranks
   sixty-three configurations and you have to know it is ranked to read it;
   this is one line anybody can read, and it is computed from the same scan,
   so the top of the card and the tab under it cannot disagree.

   IT TAKES THE WHOLE WIDTH, as its own list after the two columns. A 267px
   column holds "Kofu, Japan"; it does not hold two bodies, two signs, three
   glyphs and a verb, and breaking the sentence over four lines to fit a
   column would lose the only thing it has going for it. */
.senshi-art .nk-stat-col--tight{
  grid-column:1 / -1; display:block; margin:0; padding:0; list-style:none;
}
.senshi-art .nk-chip--tighthd{
  border-radius:0; border-width:0;
  border-top:1px solid color-mix(in srgb, var(--pp-ramp-edge, #c9a24e) 55%,
                                 var(--paper));
  padding:3px 7px; display:flex; align-items:baseline; gap:9px;
  background:color-mix(in srgb, var(--accent) 22%, var(--paper));
}
.senshi-art .nk-tight-note{
  font-family:basiic,monospace; font-size:8.5px; letter-spacing:.7px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--head) 62%, var(--paper));
}
.senshi-art .nk-chip--tight{
  border-radius:0; border-width:0;
  padding:3px 7px; display:block;
  background:color-mix(in srgb, var(--accent) 7%, var(--paper));
}
.senshi-art .nk-tight{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px;
}
/* a body and its sign are ONE object and must not break apart when the line
   wraps - "Jupiter in" at the end of one line and "Cancer" at the start of
   the next is a different sentence */
.senshi-art .nk-tight-b{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.senshi-art .nk-tight-b > b{
  font-family:rainyhearts,monospace; font-size:15px; font-weight:400;
  letter-spacing:.3px; color:#2b2634;
}
/* "in" is the joint, not a word anybody needs to read */
/* FIXED INKS BELOW, and the reason is one Naoko's palette keeps teaching:
   --head on this profile is a pale grey-violet, so color-mix(--head N%,
   --paper) - the pattern the rest of this stylesheet leans on - lands
   somewhere around #a7a7a8 on near-white. That is about 2:1 against the
   paper, on 8 to 12 pixel type. Ash: "the engagement text inside the stats
   box, needs to be readable.. its yellow."
   Everything here is set in violet-greys dark enough to clear 4.5:1 on any
   palette's paper, because the one thing these labels have to do is be
   read. */
.senshi-art .nk-tight-b > i{
  font-style:normal; font-size:12px; color:#736c82;
}
.senshi-art .nk-tight-s{
  width:20px; height:20px; flex:0 0 auto; image-rendering:pixelated;
}
/* A FIXED INK, not a mix of --head. Naoko's --head is pale - her ramp runs
   out to white - so 88% of it over near-black still came out a washed pink
   and the one WORD in this line was the hardest thing on it to read. The
   aspect's colour is already carried by the glyph beside it; the verb only
   has to be legible, on every palette. */
/* b.nk-tight-w, not .nk-tight-w: `.senshi-art .block b` is (0,2,1) and sets
   every bold inside a block to the accent, which on this palette is the
   cream #f6ebbe - so the verb printed cream on cream and the plain class,
   at (0,2,0), lost to it. Naming the element is the whole fix. */
.senshi-art b.nk-tight-w{
  font-family:basiic,monospace; font-size:9.5px; letter-spacing:1.1px;
  text-transform:uppercase; font-weight:400; color:#2b2634;
}
.senshi-art .nk-tight-orb{
  margin-left:auto; flex:0 0 auto;
  font-family:basiic,monospace; font-size:11px;
  font-variant-numeric:tabular-nums;
  color:#6a6276;
}
/* b.nk-asp-term, not .nk-asp-term: it is a <b>, and `.senshi-art .block b`
   is (0,2,1) setting every bold inside a block to --accent - the cream
   #f6ebbe - which is what put cream text on a cream chip. The chip takes a
   real wash of the palette's link colour so it reads as a badge rather than
   as a word that failed to load. */
.senshi-art b.nk-asp-term{
  color:#5c1f33;
  background:color-mix(in srgb, var(--pp-link-bg, #8a3336) 15%, #fffdf6);
  border-color:color-mix(in srgb, var(--pp-link-bg, #8a3336) 42%, var(--paper));
}
.senshi-art .nk-chip--tighthd .nk-tight-note{ color:#6f6880; }
.senshi-art .nk-g{ image-rendering:pixelated; }
/* one line per engagement, and they stack */
.senshi-art .nk-stat-col--tight .nk-chip--tight + .nk-chip--tight{
  border-top:1px solid color-mix(in srgb, var(--pp-ramp-edge, #c9a24e) 24%,
                                 var(--paper));
}


/* ========= 387. THE RODDEN STRIP IS NOT SHRUNK ========================== */
/* Ash: "the rodden rating gif is being shrunk. don't. we have a blank space
   below the rodden rating. expand the rodden box into that space."

   The rule doing it was mine, two sections up: width:70px, height:14px on a
   sprite that is 84 by 15 static and 84 by 17 animated. That is a fractional
   downscale on pixel art, which drops whole rows out of a fifteen-pixel
   star - and the base rule in this same file says so in as many words:
   "1:1. keep any override a multiple of 84." I wrote the override anyway,
   to buy back fourteen pixels of width in a box that was overflowing. The
   box is not overflowing any more, so the override goes and the strip draws
   at its own size.

   THE BLANK SPACE below it is structural, not a mistake: the chart column
   holds four facts and the life column holds six, so the shorter list simply
   stops. Giving the Rodden chip the slack is better than leaving a hole -
   the stars are the one thing in the box with a drawn height rather than a
   line of type, and they were the thing being squeezed. */
/* ...and then she looked at it: "the rodden rating stats box is way too big
   now. take away the extra space and put the other stats under it to loose
   some scroll height."

   Right on both counts, and the second half is the real fix. Handing the
   slack to the Rodden chip filled the hole but spent sixty pixels on one row
   of five stars; the hole itself was only ever a symptom of two lists of
   different lengths sitting side by side, which cannot pack however they are
   stretched.

   It is ONE list now (see card_rows), laid out COLUMN-MAJOR: down the first
   column, turn the corner, down the second. So the life facts carry on
   underneath the Rodden strip rather than starting a fresh column beside it,
   and ten rows take five rows of height instead of six with air under four
   of them. --pp-stat-rows is written onto the list by the build, because
   where to turn the corner is a function of how many rows there are and only
   the build knows that.

   Multicol was tried first and is not the tool: it balanced each <ul> into a
   column of its own and then poured the engagement sentences into the
   columns as well, cutting them in half down the middle of the box. */
.senshi-art .pp-statwrap--split{
  display:block; padding:0;
}
.senshi-art .pp-statwrap--split .nk-stat-col--split{
  display:grid; grid-auto-flow:column;
  grid-template-rows:repeat(var(--pp-stat-rows, 5), auto);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin:0; padding:0; list-style:none;
}
/* the chart's own facts keep the tint that told them apart from the life */
.senshi-art .nk-chip--chartfact{
  background:color-mix(in srgb, var(--pp-ramp-edge, #5fa3aa) 9%, var(--paper));
}
/* the Rodden strip is a row like any other again */
.senshi-art .pp-statwrap--split .nk-chip--stat{ flex:0 0 auto; }
@media (max-width:620px){
  /* one column, so the corner is never turned */
  .senshi-art .pp-statwrap--split .nk-stat-col--split{
    grid-auto-flow:row; grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
  }
}
.senshi-art .pp-places--stats .pr{ --pr-size:15px; gap:9px; }
/* ...and five on Ash's card, because her grade is two letters and her column
   is four pixels narrower than Naoko's.

   Measured: the strip is 84px of stars, the grade and "5 / 5". At 9px of gap
   that needs 157 in a 152px cell, so it wrapped onto a second line and her
   Rodden row stood 25px taller than every other row in the box - which is the
   one thing in the card that did not match Naoko's. "AA" is 27px where her
   "X" is 19, and that difference is the whole of it.

   Scoped to her page rather than changed for everyone: Naoko's card is the
   thing being matched, so it is not the thing to move. The day a third
   profile carries a two-letter grade this belongs in the template as the
   default. */
.ash-page .pp-places--stats .pr{ gap:5px; }
.senshi-art .pp-places--stats .pr-img{ width:84px; height:auto; }


/* ========= 388. THE NAVIGATION COLUMN, SECOND PASS ====================== */
/* ---- the jump links are the recipe box's buttons ----
   Ash: "the jump to buttons. use the same style of buttons that we did all
   the way back in the recipe box on my page. just the cute little buttons
   smushed together."

   .rb-pick is that button: a rounded rectangle on the paper with a hairline
   of the accent round it, filling in on hover. Smushed means the gap is
   small and they wrap rather than stacking - which is the part that pays
   for itself, because eleven sections as a stacked list is 277px and as a
   wrapping row of chips it is about half that. That is where the paragraph
   box's extra height goes back to. */
/* SECOND PASS. Ash: "instead of the jump to being framed inside a white
   box, i want it like mini oval buttons like in the recipe box contents on
   profile page... that kind of styling."

   That object has a name here: .rb-jump-a, the contents chips inside the
   recipe box - 999px corners, a gold hairline, rainyhearts at 10 in caps,
   one pixel of padding above and below. These take the same measurements
   rather than approximations of them, so the two are the same control in
   two places and stay that way when either is touched.

   THE BOX GOES. Pills on the paper are lighter than pills in a frame, and
   the frame was doing nothing but drawing a second edge inside the column's
   own. The numbering goes with it - the chips she is pointing at have none,
   and at 10px a leading zero in front of every label is noise. */
/* ---- TWO COLUMNS, NOT A RAGGED WRAP ----
   Ash: "rearrange the jump tos to save on space."

   What was wrong was never the order, it was the SHAPE. Twelve chips of
   twelve different widths flowing as inline text wrap wherever they happen
   to run out of room, so "THE EYE" ends up sharing a line with "WHAT SHE'S
   LIKE" and "MARRIAGE" with "AFTER SAILOR MOON", and the right-hand edge
   comes out jagged in eight rows.

   A two-column grid fixes both at once: equal tracks, so every chip starts
   on one of two lines and the block is a rectangle, and six rows instead of
   eight. grid-auto-flow:column fills the LEFT column top to bottom and then
   the right, which is how a contents list is read - down, then down again -
   and it keeps the chips in the order the sections appear on the page.

   The chips stretch to their track rather than hugging their text, which is
   the part that actually squares the edge. */
.senshi-art .pp-jump-list{
  /* ONE COLUMN. Ash: "can i get the jump to more narrow... can you do this
     on the naoko profile too?" The column is 232px now and two chips a row
     in 222 is two crushed chips, so they stack; --pp-jump-rows is the
     list's length and the build writes it. The grid stays a grid so the
     rows stay equal. */
  display:grid; grid-auto-flow:column; grid-template-columns:1fr;
  /* 1fr AND NOT auto. With auto rows each row is as tall as its own tallest
     chip, so a row holding "THE EYE" is one line high and the row above it
     holding "AFTER SAILOR MOON" is two, and the block goes back to looking
     accidental - which was the complaint. Equal rows make it a grid. */
  /* the row count rides in from the build as --pp-jump-rows, because it is
     half the number of sections rounded up and CSS cannot count. 6 was
     written here while there were twelve sections; there are nine now. */
  grid-template-rows:repeat(var(--pp-jump-rows, 6), 1fr); gap:4px 5px;
  margin:0; padding:6px 5px 7px; list-style:none; border:0; background:none;
}
/* the li stretches to its cell on its own; the anchor has to be told to
   fill the li, or a one-line label leaves a short chip in a tall row */
.senshi-art .pp-jump-list > li{ display:grid; margin:0; border:0; }
.senshi-art .pp-jump-l{
  display:flex; align-items:center; justify-content:center; margin:0;
  /* Ash: "make the hotlink buttons larger and the text darker. too small
     and crushed text inside buttons." The recipe box's chips are 10px in a
     270px column where they are a secondary index; these are the only way
     into an eleven-section article, so they get the size that goes with
     that job - and the ink is fixed rather than mixed toward the paper,
     which on this palette was landing around #b0a8b8 on near-white. */
  padding:4px 7px 5px; text-align:center;
  border:1px solid color-mix(in srgb, #c9a24e 62%, var(--paper));
  border-radius:999px;
  background:color-mix(in srgb, var(--paper) 40%, #fff);
  font-family:rainyhearts,monospace; font-size:14px; letter-spacing:.5px;
  text-transform:uppercase; text-decoration:none; line-height:1.15;
  color:#423752;
}
.senshi-art .pp-jump-l:hover,
.senshi-art .pp-jump-l:focus-visible{
  background:var(--rb-bar-face, color-mix(in srgb, var(--accent) 26%, var(--paper)));
  border-color:var(--head); color:#4a2a5c;
}

/* ---- the door to the full profile ----
   Ash: "if someone carries a full profile page... like naoko put that full
   profile button below pfp2... larger and more prominat than the smaller
   hotlinks."

   Louder than the jump chips on purpose and by a clear margin: those move
   you around a page you are already on, this one leaves for a different
   page, and a reader meeting a profile as a guest needs to be able to tell
   those two things apart at a glance. Full width, the palette's own link
   colour, and the only thing in this column with a drop shadow. */
.senshi-art .pp-fullbtn{
  display:block; margin:0; padding:9px 12px 10px; text-align:center;
  background:var(--pp-link-bg, #8a3336);
  border:2px solid color-mix(in srgb, var(--pp-link-bg, #8a3336) 72%, #120d18);
  border-top:0;  /* shares the portrait's bottom edge */
  color:var(--pp-ramp-ink, #fffdf6); text-decoration:none;
  font-family:basiic,monospace; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(26,20,32,.45);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.28),
             inset -1px -1px 0 rgba(26,20,32,.3);
}
.senshi-art .pp-fullbtn:hover,
.senshi-art .pp-fullbtn:focus-visible{
  background:color-mix(in srgb, var(--pp-link-bg, #8a3336) 82%, #fffdf6);
  color:#fffdf6;
}
.senshi-art .pp-fullbtn:active{
  box-shadow:inset 1px 1px 0 rgba(26,20,32,.35);
}
/* ---- ...AND WHERE IT SITS NOW: THE HEAD OF THE NAV COLUMN ----
   Ash: "I want the full profile button larger. inside it's current box,
   where is the best place to put it so the reader locates/see it/catches
   their attention right after the stats and music player."

   It was at the end of the prose for a while, which came from "place the
   'full profile' button underneath the end of the paragraph to the right
   instead of the pfp2", and that needed an inline-block to escape the
   float. The trick worked and the position did not: 13px of type alone in
   400 pixels of empty paper is a thing the eye slides off.

   SO IT IS A BLOCK AGAIN, at full column width, because it is inside the
   float rather than beside it now. 18px instead of 13, 300 pixels wide
   instead of 173, and it is the first thing in the column that starts 34
   pixels below the music player. */
.senshi-art .pp-idnav > .pp-zone-cta{ margin:0 0 12px; padding:0; }
.senshi-art .pp-fullbtn--cta{
  display:block; width:100%; box-sizing:border-box;
  border-top-width:2px; padding:13px 20px 14px;
  font-size:18px; letter-spacing:1.4px; text-align:center;
}

/* ---- the second portrait gets a plainer frame ----
   Ash: "style the pfpB with another windows style frame... but not just a
   copy of the first pfp frame.... deritive and b tier frame."

   Derivative is the word to design to. The card portrait wears w98-bevel -
   the raised frame, light on the top and left, dark on the bottom and
   right, the one a window's own chrome uses. This one takes the SUNKEN half
   of the same system: the identical bevel read the other way round, which
   in the Windows 98 language is what you put round a thing being shown
   rather than a thing being operated. Same vocabulary, lower rank, and
   nobody has to be told which picture is the official one. */
/* the open edge follows the stack: the picture sits UNDER the chips now,
   so the edge it shares is its top one */
.senshi-art .pp-idnav .pp-pic--b{
  border:2px solid var(--pp-ramp-edge, #c9a24e); border-top:0;
  box-shadow:inset 1px 1px 0 rgba(26,20,32,.34),
             inset -1px -1px 0 rgba(255,255,255,.8);
  padding:0; background:#fffefb;
}


/* ========= 389. THE ASPECTS, DRAWN ON THE WHEEL ========================= */
/* Ash, back when the centre was cleared: "when highlighting an aspect on the
   aspects list, I'd like for that aspect to show up on the chart when
   highlighted", and then "put a aspects toggle button (large and looks like
   the placements button) in the top right corner of the birth chart box."
   Asked whether the button should draw the lines or open the list: "Both".

   THREE STATES, NO SCRIPT.
     placements     nothing is drawn, and the chart is a chart
     one hovered    the row you are pointing at, and only that one
     aspects        all of them, and the left column shows the list

   ONE STATE, NOT TWO, and that is a fix rather than the original design.
   The button used to drive a checkbox of its own, written to outrank the
   tab radios so it could force the aspects pane open - which meant that
   while it was on, the placements tab was dead. Ash: "I can't seem to click
   back to the placements tab once i've opened the aspects tab... only when
   all the aspects are being shown in the center of the circle." Asked which
   way to resolve it: "one state please."

   So the button is a second label for the SAME radio the tab uses. There is
   nothing left to disagree with, and the lines simply follow whichever pane
   is showing.

   The lines are emitted by pp_profile.aspect_overlay() as chords on the
   inner circle, each carrying data-asp="Jupiter|Neptune" - the same token
   the list rows and the stats box's sentences carry. Three places agreeing
   on a name is the whole mechanism. */
/* POINTER-EVENTS:NONE. The aspect layer is drawn last, so it lies over the
   glyphs - and an invisible line still takes a hover. A full-length line
   was sitting across Mars and swallowing the cursor, so hovering the glyph
   lit nothing. These are decoration; they should never be the thing the
   mouse finds. */
.senshi-art .nkw-asp{ pointer-events:none; }
/* NO FADE. Ash: "the aspects fade in and out. no fade. just jump... old
   school look." Same call she made on the recipe box - "can it just snap.
   the scroll looks modern" - and the same reason: a hundred and sixty
   millisecond ease is the one thing on this page that could not have
   happened in 1998. It is on or it is off. */
.senshi-art .nkw-asp-l,
.senshi-art .nkw-asp-x{
  opacity:0; stroke-width:1.7; stroke-linecap:round;
  pointer-events:none;
}
/* THE LONG ONE, drawn only when a single configuration is being pointed at.
   Ash: "can the lines connect to the planet glyphs?" To the degree ticks,
   which is where the body actually is - the glyphs are staggered off their
   degrees so they do not collide. It reaches the body's own mark, so it
   carries a little more weight and a touch of paper under it to stay
   readable where it crosses the house numbers. */
.senshi-art .nkw-asp-x{
  stroke-width:2.4;
  paint-order:stroke; stroke-linejoin:round;
}
/* the same three colours the aspect sprites are drawn in, so a line and the
   mark beside its row are obviously the same statement */
.senshi-art .nkw-asp-l--soft{ stroke:#3466cc; }
.senshi-art .nkw-asp-l--hard{ stroke:#cc3434; }
.senshi-art .nkw-asp-l--join{ stroke:#349a64; }
/* a configuration that is applying inside its range is the one doing
   something now, so it is drawn heavier when the whole set is on */
.senshi-art .nkw-asp-l--close{ stroke-width:2.6; }

/* ---- all of them, with the aspects pane ----
   :has() ON THE GRID, not a sibling combinator off the input. The radio
   lives inside .pp-tabs in the LEFT column and the lines are in the right
   one, so `~` cannot get from one to the other - which is precisely why
   there used to be a second control sitting before the grid where its
   reach was long enough. Asking the grid whether it contains a checked
   aspects radio needs no particular markup order at all.

   The tab switching itself is still plain `~` inside .pp-tabs and does not
   depend on :has(), because that is the part that must not break. */
.senshi-art .pp-idgrid:has(.pp-tab-r--as:checked) .nkw-asp-l{ opacity:.62; }
/* .nkw-asp-l.nkw-asp-l--close, both classes: the long hover line carries
   the --close modifier too, and named on its own it was being switched on
   by the toggle as well - every engagement drawn twice, once as a chord and
   once at full length through the house numbers. */
.senshi-art .pp-idgrid:has(.pp-tab-r--as:checked)
  .nkw-asp-l.nkw-asp-l--close{
  opacity:.92;
}
/* NOTHING HERE TOUCHES THE PANES ANY MORE. Four rules used to live at this
   point forcing the aspects pane open and the placements pane shut, and
   they are the bug: they outranked the tabs, so the tabs stopped working.
   The tabs own the panes now and this section owns the drawing. */

/* ---- a planet, picked out ----
   Ash: "when hovering over a planet, can we highlight it with a glowing orb
   circle... mostly for the effect... it's more for accessability and seeing
   the placements quickly."

   WHAT IT DOES NOT CLAIM. A fixed radius, the same for every body - see
   replace_bodies() for the reasoning and Brennan p.303 for the authority.
   It marks where a planet is, not how far its influence reaches, because
   the second is a Medieval idea and this chart is not one.

   BOTH DIRECTIONS FOR FREE. The rule asks whether ANYTHING carrying this
   body's name is hovered, and both the list row and the wheel's glyph carry
   it - so pointing at either lights both, with no second rule and no script.

   The tick on the rim lights with the glyph, which is the quiet part: the
   two are in different places because the glyph was fanned off its degree,
   and seeing both ends come up at once is what explains the leader line
   between them. */
/* the glow snaps too - it is the same gesture on the same drawing, and a
   halo that eases in while the lines it sits among jump would read as two
   different decades of interface */
.senshi-art .nkw-glow{ opacity:0; pointer-events:none; }
.senshi-art .pp-pane .nk-chip[data-body]{ cursor:help; }
.senshi-art .pp-pane .nk-chip[data-body]:focus-visible{
  outline:2px solid var(--pp-link-bg, #8a3336); outline-offset:-2px;
}
/* nothing here animates any more, so there is nothing for a reduced-motion
   query to turn off */
/* the glyph is the other half of the hover target, so it has to be able to
   receive one - and it must not steal the cursor from the aspect lines */
.senshi-art .nkw-bodies image{ cursor:help; }

/* ---- the button, in the chart's own corner ----
   Ash: "large and looks like the placements button", and in "the top right
   corner of the birth chart box" - the chart, not the header bar above it.
   .pp-wheel is already the positioning context for the starfield canvas, so
   this sits in the corner of the night sky without anything being moved to
   make room for it. */
.senshi-art .pp-wheel > .pp-aspbtn{
  position:absolute; top:8px; right:8px; z-index:3;
  padding:7px 14px 8px; cursor:pointer; user-select:none;
  /* 13, not 16. Ash: "change the text to 'see all aspects'" and then
     "please make the 'see all aspects' button font a bit smaller" - three
     words at 16px came out 203px wide, which is most of the chart's top
     edge for a control that is not the point of the picture. */
  font-family:basiic,monospace; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; text-shadow:1px 0 0 currentColor;
  color:color-mix(in srgb, var(--pp-link-bg, #8a3336) 30%, #fffdf6);
  background:color-mix(in srgb, var(--pp-link-bg, #8a3336) 30%, rgba(10,8,14,.72));
  border:1px solid color-mix(in srgb, var(--pp-link-bg, #8a3336) 62%, #fffdf6);
  border-radius:3px 3px 0 0;
}
.senshi-art .pp-wheel > .pp-aspbtn:hover{
  background:color-mix(in srgb, var(--pp-link-bg, #8a3336) 52%, rgba(10,8,14,.72));
  color:#fffdf6;
}
.senshi-art .pp-idgrid:has(.pp-tab-r--as:checked) .pp-wheel > .pp-aspbtn{
  background:var(--pp-link-bg, #8a3336); color:#fffdf6;
  border-color:color-mix(in srgb, var(--pp-link-bg, #8a3336) 72%, #fffdf6);
  box-shadow:inset 1px 1px 0 rgba(26,20,32,.4);
}
/* ---- AND IT TURNS BACK OFF ----
   Ash: "the see all aspects can't be turned off when clicked sometimes."

   A LABEL CANNOT TOGGLE A RADIO. It points at one fixed input, and a radio
   that is already checked ignores being checked again - so the one label
   that used to be here could only ever switch the aspects ON. It looked
   intermittent because it only feels stuck once they are already showing.

   Two labels in the same corner, pointing at the two radios, and exactly
   one of them is ever displayed: whichever is the way OUT of the state the
   chart is in. A reader sees one button that toggles. */
.senshi-art .pp-wheel > .pp-aspbtn--off{ display:none; }
.senshi-art .pp-idgrid:has(.pp-tab-r--as:checked) .pp-wheel > .pp-aspbtn--on{
  display:none;
}
.senshi-art .pp-idgrid:has(.pp-tab-r--as:checked) .pp-wheel > .pp-aspbtn--off{
  display:block;
}
.senshi-art .pp-idgrid:has(.pp-tab-r--as:focus-visible) .pp-wheel > .pp-aspbtn{
  outline:2px solid #fffdf6; outline-offset:2px;
}


/* ========= 390. A PANEL THAT TEACHES, IN THE CHART'S CORNER ============= */
/* Ash: "besides the hover.... i'm thinking teaching tools... the bottom left
   corner of the chart box... when hovering over an aspect, pop up a
   rectangle box in the bottom left corner to show the shape... the degrees,
   and those keywords.... make sense? any improvements to the idea?" - and
   then the houses: "when someone hovers over a house number in the chart...
   we should do the exact same sort of effect. houses with the standard house
   topics, 3 main keywords each. hellenistic house topics."

   ONE PANEL, THREE KINDS OF CARD. Every card is in the page already and
   hidden; a hover shows one. At rest the panel says what to point at, which
   is the part that makes it a teaching tool rather than a tooltip - an
   object that is visibly there and visibly waiting gets pointed at, and a
   thing that only exists once you have already found it does not.

   WHY IT CAN SIT ON TOP OF THE WHEEL AT ALL: pointer-events:none, below.

   WHERE THE CONTENT COMES FROM: pp_profile.PLACES carries the twelve places
   with Brennan's page number against each one, and ASPECT_TEACH carries what
   each configuration was said to be like in the tradition's own words -
   Porphyry's "sympathetic" for the trine, "hard and inharmonious" for the
   square. The shapes are drawn by _aspect_figure(), which is the answer to
   "show the shape": a trine is one side of a trigon, a sextile one side of a
   hexagon, an opposition a diameter, and seeing that is what explains why
   the number is 120 rather than just telling a reader that it is. */

/* ---- A BAND UNDER THE CHART, NOT A BOX ON IT ----
   Ash: "rather than a square information box in the bottom left corner of
   the chart box, let's move all this hover information to show up where the
   stat 'still' is located. that entire long box can be utalized for this
   info. also, on the right side of this box, I want you to move that 'new
   to charts button.'"

   The corner panel was square because the corner was the only place it
   fitted, and it cost 200 by 140 pixels OF THE DRAWING to sit there. A band
   at the top of the stats box is the same width as the chart above it,
   hides nothing, and lets a card be read ACROSS - the shape it wanted in
   the first place.

   THE FRAME IS THE SUNKEN ONE, as it was: the same Windows 98 vocabulary
   section 388 reaches for on the second portrait. Raised bevels go round
   things you OPERATE, sunken ones round things you are being SHOWN, and
   this is the most read-only object on the page. */
.senshi-art .pp-hoverbox{
  display:flex; align-items:stretch; gap:8px;
  margin:0 0 8px; min-width:0;
}
.senshi-art .pp-hoverbox > .pp-hb{
  flex:1 1 auto; min-width:0; box-sizing:border-box;
  padding:3px 9px 3px;
  background:none; border:0;
  font-family:rainyhearts,monospace; font-size:11px; line-height:1.3;
  color:#e7dcc6; text-align:left;
  display:flex; flex-direction:column; justify-content:center;
  /* POINTER-EVENTS COMES BACK ON, and it is a bug fix. Ash: "there is a
     glitch that does not keep the text in the hover box when clicked... i
     tried highlighting the text but it kept disapearing under my cursor."
     Half of that was this line - a panel with pointer-events:none cannot
     have its text selected at all. The other half is that the card was
     hover-only, which js/hoverpin.js now fixes by letting a click hold it.
     Nothing in here is a hover target, so switching this on cannot make
     the box flicker. */
  pointer-events:auto; -webkit-user-select:text; user-select:text;
}
/* ---- THE DOOR FOR A READER WHO CANNOT READ THE CHART ----
   Ash: "add a link at the bottom of the profile pagagraph boxes for all
   profiles that takes the reader to the 'how to read a chart' page... if
   they don't know any astrology, they need to be able to find it." Then,
   much later: "let's think of another way to feature the new to charts
   button. even if simple,. i just dont want people to miss it."

   IT WAS INSIDE THE BOX AND THAT IS WHY IT WAS MISSED. For a long stretch
   it was a 112px panel closing the hover box's right end, and it was
   tried loud, quiet, gold, wine and rainbow in that slot. None of it
   helped, because the problem was never the colour: a panel inside a
   bordered box is read as part of that box's furniture, and furniture is
   what the eye skips. Shown four treatments, Ash picked the one that
   leaves the box entirely.

   SO IT IS ITS OWN BAR, the full width of the chart, under the hover box,
   in the box's own night and gold. It cannot be mistaken for chrome
   because it is not inside anything, and it is the last thing under the
   wheel, where a reader who has just failed to understand the wheel is
   already looking.

   AND THE BOX GETS 112 PIXELS BACK, which is the part that is not
   cosmetic. Every card in the hover box is 112px wider than it was, which
   is fewer wrapped lines, which is the thing the box's height has been
   fought over all session.

   pointer-events is stated because the panel beside it turns them back on
   for text selection, and a link that cannot be clicked is a worse bug
   than the one that fixed. */
/* CAPPED AT 112, so the card gets the width. Sized to its own content the
   button came out 287 of the band's 533 - more than half the strip for a
   control that is identical on every profile - and left the card 238,
   narrower than the corner panel it had just been moved out of. */
/* AND IT WENT OUT AND CAME BACK. For a stretch this was a full-width bar
   on its own line under the box, picked out of four treatments when the
   worry was that nobody would see it, and then: "put the 'new to charts'
   button back where it was please." So it is a gold-tinted panel closing
   the box's right end again.

   WHAT THAT COSTS, written down because it is the thing that was traded:
   112 pixels of width for every card in the box. The bar handed those
   back and the panel takes them again, which is why --pp-row-grow goes
   with it - see the note there.

   pointer-events is stated because the panel beside it turns them back on
   for text selection, and a link that cannot be clicked is a worse bug
   than the one that fixed. */
.senshi-art .pp-hoverbox > .pp-learnbtn{
  flex:0 0 112px; align-self:stretch; display:flex; align-items:center;
  justify-content:center; width:auto; margin:0; padding:6px 10px;
  background:rgba(201,162,78,.16);
  border:0; border-left:1px solid rgba(201,162,78,.5);
  color:#f1d79a; pointer-events:auto; text-shadow:none; box-shadow:none;
  text-align:center; font-size:12px; letter-spacing:.8px; line-height:1.5;
  /* the glint below is an ::after over the whole panel, so this has to be
     a positioning context and it has to clip */
  position:relative; overflow:hidden;
}
/* THE SAME RAINBOW THE CARD TITLES WEAR. Ash: "add rainbow gradient and
   one font size bigger to the new to charts button?" Same five stops, same
   fallback discipline - a flat colour first, transparent ink only inside
   @supports, because background-clip:text renders NOTHING where it is not
   supported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .senshi-art .pp-hoverbox > .pp-learnbtn{
    background-image:linear-gradient(100deg,
      #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
  /* ...but the PANEL's own tint must survive, and background-clip:text
     clips every background layer. So the gold ground moves into the box
     shadow, which clipping cannot touch. It can stay a flood here only
     because it is 16% alpha: the bar this briefly became needed an
     OPAQUE night, and an opaque flood over the ink renders an empty bar,
     which is what it did until its ground moved out to a wrapper. */
  .senshi-art .pp-hoverbox > .pp-learnbtn{
    background-color:transparent;
    box-shadow:inset 0 0 0 999px rgba(201,162,78,.16);
  }
  /* ...AND IT MOVES. Ash: "the new to charts button. the brown is great. the
     gradient rainbow is great. can the gradient do a slow scroll through the
     text? very slow." The image is drawn three buttons wide and slid along
     under the letters; the run opens and closes on the same violet, so one
     tile width is a seamless loop. With a 3x image, background-position's
     percentage moves it (container - image) = -2 widths per 100%, so a
     full tile is -150%. 24 seconds for one pass is the "very slow". */
  .senshi-art .pp-hoverbox > .pp-learnbtn{
    background-size:300% 100%; background-repeat:repeat;
    animation:pp-rainbow-scroll 24s linear infinite;
  }
  /* and the hover keeps the rainbow: the rule below sets a flat cream for
     the fallback branch, which here would switch the gradient off at
     exactly the moment anyone is looking at it */
  .senshi-art .pp-hoverbox > .pp-learnbtn:hover,
  .senshi-art .pp-hoverbox > .pp-learnbtn:focus-visible{ color:transparent; }
}
@keyframes pp-rainbow-scroll{
  from{ background-position:0% 50%; }
  to{ background-position:-150% 50%; }
}
@media (prefers-reduced-motion:reduce){
  .senshi-art .pp-hoverbox > .pp-learnbtn{ animation:none; }
}
/* ...and its own hover, which has to be restated: the shared .pp-learnbtn
   rule lightens a WINE background toward white, and doing that to a bar
   that is now the night sky turns it into a pale smear.

   The colour is kept for the fallback branch, where there is no gradient
   and the ink is flat. */
.senshi-art .pp-hoverbox > .pp-learnbtn:hover,
.senshi-art .pp-hoverbox > .pp-learnbtn:focus-visible{
  background:rgba(201,162,78,.3); color:#fff3cf;
}
/* ---- THE BUTTON'S GLINT ----
   Ash: "give it a little shimmer animation (but super retro- 16bit framed
   shimmer effect)", and later "maybe that glimmer when hovered over?"

   This started as a 16-bit imitation - hard stops and steps(), the way an
   SNES fakes a diagonal wipe with HDMA marching a window edge down the
   scanlines and the fixed-colour add switched on inside it. When the
   mirror went true-to-the-cel instead ("forgo the pixel look"), leaving
   this one stepping looked like a bug rather than a choice, so it is soft
   now too: one bright bar with a dimmer one behind it, sliding across on
   hover and once only.

   ON HOVER AND NOT BEFORE. A link that shimmers on its own competes with
   the mirror two inches below it; a link that answers the cursor does not.

   The colour is the mirror's cream, 255,240,208, read off her frames. */
.senshi-art .pp-hoverbox > .pp-learnbtn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-repeat:no-repeat; background-size:250% 100%;
  /* HELD DOWN SO THE WORDS SURVIVE IT. At .46 the bright bar washed
     "NEW TO CHARTS?" to near white as it passed, which is a glint that
     eats the thing it is pointing at. .28 still reads as a sweep of
     light and leaves the gradient legible underneath the whole way. */
  background-image:linear-gradient(118deg,
    rgba(255,240,208,0)   30%,
    rgba(255,240,208,.07) 36%,
    rgba(255,240,208,.28) 40%,
    rgba(255,240,208,.12) 45%,
    rgba(255,240,208,.20) 52%,
    rgba(255,240,208,.28) 57%,
    rgba(255,240,208,.08) 63%,
    rgba(255,240,208,0)   70%);
  /* ON HOVER ONLY. Ash moved the running shimmer to the dancer - "put the
     animation on the princess moon dancing in the music player (duh)" -
     and kept a glimmer here for the pointer: "maybe that glimmer when
     hovered over?" A link that shimmers on its own competes with the
     mirror two inches below it; a link that answers the cursor does not. */
  animation:pp-glint 1.1s linear 1;
  animation-play-state:paused; opacity:0;
}
.senshi-art .pp-hoverbox > .pp-learnbtn:hover::after,
.senshi-art .pp-hoverbox > .pp-learnbtn:focus-visible::after{
  animation-play-state:running; opacity:1;
}
/* ITS OWN KEYFRAMES, and it has to have them. The mirror's sweep is now
   vertical - it moves background-position-y down a tile four sprites tall
   - and this is a wide short panel that wants a sideways glint. Sharing
   one animation name meant sharing one axis, and when the mirror went
   true-to-the-cel this one would have swept off the top of the button. */
@keyframes pp-glint{
  0%, 12% { background-position:122% 0; }
  100%    { background-position:-62% 0; }
}
/* a shimmer is decoration; anyone who has asked for less motion gets the
   panel and none of it */
@media (prefers-reduced-motion: reduce){
  .senshi-art .pp-hoverbox > .pp-learnbtn::after{ animation:none; }
}
/* pressed: the text takes a pixel down rather than the fill changing,
   because the fill is a box shadow inside @supports and `box-shadow:none`
   here would wipe the panel's ground out from under it. */
.senshi-art .pp-hoverbox > .pp-learnbtn:active{
  padding-top:7px; padding-bottom:5px;
}
/* at rest: what to point at */
/* ---- THE TYPE SIZES, all of them, in one place ----
   Ash: "the font is way too small. espically since we have soi much room
   inside this box."

   She is right and the reason is history: every one of these numbers was
   chosen for the 200x140 corner panel this started life in, where the card
   was a column and there was no room. The band is 375 wide and the tallest
   card was filling 72 of its 92 pixels, so a fifth of the box was being
   kept empty by sizes that no longer had anything to do with the space.

   Everything goes up roughly a quarter and the band's floor goes up with
   it - see the --pp-band-grow block below, and mind that the floor is not
   the only number that has to move. */
.senshi-art .pp-hoverbox .pp-hb-rest{
  margin:0; color:#c3b59a; font-size:17px; line-height:1.35;
}
.senshi-art .pp-hoverbox .pp-hb-rest i{
  font-style:normal; color:#8e8268; font-size:15px; margin-left:7px;
}
/* every card is here and hidden; the per-profile <style> shows one */
.senshi-art .pp-hoverbox .pp-hb-c{ display:none; }

/* ---- a card, read ACROSS ----
   In the corner the card was a column because it had 200 pixels of width
   and 140 of height. In the band it has the chart's whole width and very
   little height, so the same three parts sit side by side instead: the
   shape, then the words, then the numbers. */
.senshi-art .pp-hoverbox .pp-hb-c{ align-items:center; gap:10px; }
.senshi-art .pp-hoverbox .pp-hb-fig{ flex:0 0 auto; display:block; }
.senshi-art .pp-hoverbox .pp-hb-txt{ min-width:0; }
/* ---- THE SPRITE IS LOCKED TO THE MIDDLE ----
   Ash: "the glyph needs to be centered from the top and the bottom of the
   box... when there isn't as much text, it looks fine, when there are 3
   lines, the glyph is getting pushed up. i'm looking at the mercury
   placement glyph."

   Mercury is exactly the card to catch it on: it carries two dignities, so
   it is one of the few that runs to three lines, and align-self:flex-start
   pinned the sprite to the first of them while everything else in the
   strip stayed centred. It was flex-start from when the card was a COLUMN
   of separate paragraphs and the sprite was meant to sit beside the title.
   The card is one flowing block now and there is no first line for it to
   belong to, so both sprites centre with everything else. */
/* the sign's own sprite opens its card, at 16 - its native size, and the
   same one the band is drawn with */
.senshi-art .pp-hoverbox .pp-hb-sg{
  flex:0 0 auto; width:32px; height:32px; align-self:center;
  margin:0; image-rendering:pixelated;
  border:0; background:none; box-shadow:none; max-width:none; padding:0;
}
/* and the planet's own sprite opens ITS card, at 20 - these are twenty
   pixel tiles where the zodiac is sixteen, and the difference is the whole
   reason there are two rules rather than one shared size. A pixel sprite at
   a fraction of its own size drops rows. */
.senshi-art .pp-hoverbox .pp-hb-pl{
  flex:0 0 auto; width:40px; height:40px; align-self:center;
  margin:0; image-rendering:pixelated;
  border:0; background:none; box-shadow:none; max-width:none; padding:0;
}
/* ---- THE CARD IS ONE FLOWING STRIP ----
   Ash: "There has got to be a way to get the hover box and the 'new to
   charts' button to... like 80px tall. move the text inside the hover box
   or reorder it or smth. I just can't believe its as short as it can get."

   She was right and this is the shape that does it. The box is WIDE AND
   SHORT and the cards were laid out TALL AND NARROW: four separate
   paragraphs, each starting a fresh line and leaving most of it empty. A
   title of twenty characters had a line to itself that holds fifty-nine.

   Measured with rainyhearts actually loading: 51 characters to a line
   beside a figure, 59 without one, and the wordiest card has 149 to say.
   149 over 59 is two and a half, so three lines was always the floor - but
   only if the text is one run that can wrap where it likes.

   Nothing is cut and nothing is reordered. The hierarchy that used to come
   from separate lines now comes from weight and colour, and all three of
   these are written at (0,3,1) because `.senshi-art .block b` is (0,2,1)
   and paints every bold on this page with --accent, a cream that vanishes
   on paper. It has eaten a label in here before. */
/* 18, up from 15. Ash: "can the rainy hearts text get any bigger? it's
   kinda a tricky font." It is - the counters close up at small sizes and
   the lowercase e and o start to look alike. She was offered 17 at a box
   of 82 or 18 at 86 and took the 18.

   AND 18 IS THE LAST ONE, because the ceiling is a cliff rather than a
   slope. Measured against the wordiest card on the page:
     15px  63 of card, box 73
     16px  67, box 77
     17px  71, box 82
     18px  76, box 86   <- here
     19px  106, box 116 - a card tips over into a FOURTH line and the
           whole floor jumps twenty pixels at once
   The panel's padding is already down to 3, which is what bought the last
   four pixels; the 10 of frame left is 6 of padding and 4 of border and
   there is nothing in it to give back. Anything above 18 costs thirty
   pixels of box, not six. */
.senshi-art .pp-hoverbox .pp-hb-d{
  margin:0; font-size:18px; line-height:1.4; color:#e7dcc6; text-align:left;
}
/* ---- THE TITLE IS A RAINBOW, AND WHICH ONE IS ARITHMETIC ----
   Ash: "pick a pretty rainbow gradient... one that fits best", then, after
   seeing it as a highlighter, "not hightlighter... use the gradient as the
   text color." The stops come from the rainbow page she sent.

   WHICH ONE IS NOT A TASTE QUESTION HERE. The ground is #2c1820, and in
   gradient TEXT every letter gets one stop, so a palette is only as
   legible as its darkest colour. Of the 130 rainbows in that file, four
   keep every stop at 5:1 or better against this background and exactly one
   clears 7. This is that one, her "five soft light": purple, pink, gold,
   green, blue, worst stop 7.4:1.

   The three runners-up, same file, measured the same way, if this ever
   wants swapping:
     6.4  hotpink, khaki, darkturquoise, hotpink
     6.1  #f866b9, #f8a88f, #e1f198, #6dfcaa, #37d6f6, #ba95fc, #f866b9
     5.7  hotpink, sandybrown, khaki, lightgreen, skyblue, cornflowerblue,
          orchid  (the closest in hue to the chart's own band)

   THE FALLBACK MATTERS. background-clip:text with transparent ink renders
   NOTHING where it is unsupported, so the colour is set first and only
   made transparent inside @supports. */
/* BOLD, AND IT COSTS NOTHING. Ash: "is there enough room to bold all the
   rainbowed terms?... trying to make it look like a glossary or smth."
   There is. rainyhearts ships one weight, so 700 is synthesised - but
   measured, the synthesis does not change the advance width at all:
   "Moon conjunction north node" is 197px at 400 and 197px at 700, and the
   tallest card stays 76. It thickens the stroke without smearing, which is
   not a given on pixel art. (900 renders identically to 700; Chromium caps
   the synthesis, so there is nothing heavier to reach for.)

   It was deliberately 400 before, to keep the title from shouting over a
   strip of six facts. A glossary is the better idea: bold term, plain
   definition, which is the shape the card already had. */
.senshi-art .pp-hoverbox .pp-hb-d b{ font-weight:700; color:#fad761; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .senshi-art .pp-hoverbox .pp-hb-d b{
    background-image:linear-gradient(100deg,
      #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}
/* a number worth reading twice - Ash asked for BOTH degrees, the interval
   the configuration is and how far this pair sits from it */
.senshi-art .pp-hoverbox .pp-hb-d em{
  font-style:normal; color:#fff8e8; font-weight:400;
}
/* a caution or a condition: applying, adherence, "no birth time for Naoko" */
.senshi-art .pp-hoverbox .pp-hb-d i{ font-style:normal; color:#f0a6a0; }

/* ---- NO BIRTH TIME, NO HOUSES ----
   Ash: "anytime we don't have birth time... we really don't have houses...
   so as part of the effect, give a grayed out popup box that says the
   defination, but also says smth like 'no birth time, so no houses.'"

   The DEFINITION STILL SHOWS, and that is the part worth being explicit
   about: a reader looking at a noon chart should still be able to learn
   what the eleventh place is. What they must not be able to do is read
   Naoko's eleventh place off a drawing of an assumed hour.

   AND IT IS NOT THE SAME QUESTION AS SECT, which is why the sect row in the
   stats below is not greyed with these. Ash: "we can always have an aprox
   birth time and still get an idea of sect. they are not the same thing."
   Houses need the hour; sect needs the half of the day. */
/* greyed on a dark ground is a DIMMER WARM, not a cooler grey: #6a6075 was
   chosen against near-white paper and vanishes entirely on the night sky.
   The gradient has to be switched off by hand too, or the title stays
   bright on a card that is telling you it does not apply. */
.senshi-art .pp-hoverbox .pp-hb-c--off .pp-hb-d,
.senshi-art .pp-hoverbox .pp-hb-c--off .pp-hb-d em{ color:#9a8f7c; }
.senshi-art .pp-hoverbox .pp-hb-c--off .pp-hb-d b{
  background-image:none; color:#b3a68e;
}
.senshi-art .pp-hoverbox .pp-hb-no{
  /* 13 and not 15, which is the one place in this box that steps DOWN a
     size: the caveat now carries the chart's owner by name - Ash: "include
     their name in the text" - and "the Sun's joy, no birth time for Naoko,
     so no houses" is a line and a half at 15. It is a footnote under a
     definition rather than the definition, so it can be the smallest thing
     here and still be read. */
  margin:3px 0 0; font-size:13px; line-height:1.35; color:#6b3a3c;
}
/* ...and the DRAWING agrees with the card. A reader told the houses do not
   apply, looking at houses drawn at full strength, has been told two
   things. Three selectors, and deleting them puts the wheel back. */
.senshi-art .pp-wheel--notime .nkw-houses,
.senshi-art .pp-wheel--notime .nkw-hit > text{ opacity:.66; }
.senshi-art .pp-wheel--notime .nkw-angles{ opacity:.74; }

/* ---- the hit areas ----
   Ash said "when someone hovers over a house number", and the number is the
   problem: one or two digits of fifteen-unit type, about ten pixels on
   screen. So the target is the whole thirty-degree SLICE, built by
   pp_profile.tag_places(), reaching from the centre out to just short of the
   degree labels - never as far as the glyphs, or pointing at Saturn would
   light a house.

   THE NUMBER TRAVELS INSIDE THE SLICE'S GROUP, which is why there is no
   generated CSS for the houses at all: a static rule can light the number of
   whichever slice is hovered, because the two are parent and child. */
.senshi-art .nkw-hit{ cursor:help; }
/* .07 WAS TOO POLITE. Ash, on both this and the band: "make the highlight
   more pronounced." The slice is a flat purple over the wheel's cream paper,
   so the only lever is the alpha, and at .07 it was a rumour. .2 reads as a
   lit wedge across the whole slice without burying the dotted house spokes
   or the degree ticks underneath it. */
.senshi-art .nkw-hit:hover > .nkw-hit-w{ fill-opacity:.2; }
/* ---- and the band's twelve wedges ----
   Ash: "we already have the symbol key from the homepage... tbfh we should
   just include the hover for zodiac signs on the pizza crust as well."

   THE WEDGE IS ITS OWN HIT AREA, so there is nothing to add to the drawing:
   the crust is already divided into exactly the twelve pieces the cards are
   about, and it is the largest thing in the chart that did nothing. Each
   sign's wedge, its dividing line and its sprite are grouped by
   pp_profile.tag_signs(), which is what lets a static rule light the one
   being pointed at - the same arrangement the house slices use.

   LIGHTENED, NOT TINTED. Every wedge is already a different colour, so a
   wash would read as twelve different highlights. A white veil over
   whatever is underneath reads the same on all of them. */
.senshi-art .nkw-hit--s > path{ stroke:rgba(255,255,255,0); stroke-width:0; }
/* MORE PRONOUNCED, two ways at once, because one was not enough on its own.
   Ash: "the sign pizza crusts, make the highlight more pronounced."

   The rim went from a 62% white at 3 units to solid paper white at 7, which
   is about four pixels at the wheel's scale, and the wedge itself now
   BRIGHTENS rather than only being outlined: brightness() lifts whichever
   pastel is underneath toward white by the same amount, which is the one
   move that reads identically on all twelve. A fill would have read as
   twelve different highlights.

   AND THE SPRITE STAYS LIT. It used to drop to .55 on hover, which was the
   wrong half of the picture to fade now that the wedge around it is getting
   brighter: the sign's own mark should be the clearest thing in a lit
   wedge, not the dimmest. */
.senshi-art .nkw-hit--s:hover > path{
  stroke:#fffdf7; stroke-width:7; filter:brightness(1.24) saturate(1.08);
}
/* the number goes to the wheel's own ink rather than another colour: this is
   "you are in this one", not a change of meaning */
.senshi-art .nkw-hit:hover > text{ fill:#5A3268; }
/* the angles sit OUTSIDE the wheel, on the night sky, so they light the
   other way - gold on dark, the same gold the planet glow uses */
.senshi-art .nkw-hit--a:hover > line{ stroke:#f7cf62; stroke-width:5; }
.senshi-art .nkw-hit--a:hover > text{ fill:#f7cf62; }

/* ---- A CLICK HOLDS THE CARD OPEN ----
   Ash: "there is a glitch that does not keep the text in the hover box when
   clicked... i tried highlighting the text but it kept disapearing under my
   cursor."

   Two faults, and only one was CSS. The panel's pointer-events:none meant
   its text could not be selected at all, which is fixed above. The other
   cannot be fixed here at all: every card is shown by a :has(...:hover)
   rule, so a card exists only while the cursor is still on the thing that
   summoned it. Move toward the box to read it and the rule stops matching
   before you arrive. CSS has no memory of what was last hovered.

   js/hoverpin.js adds the memory - one class and one attribute - and these
   two rules are the whole of its appearance here.

   !IMPORTANT IS LOAD-BEARING, unusually. The generated show rules are
   .pp-idgrid:has([hook]:hover) .pp-hb-c[data-card="..."], which is (0,3,1)
   with an attribute selector and outranks anything reasonable written by
   hand. Without !important a pinned card would still be swapped out by the
   next thing the cursor crossed, which is the bug. */
.senshi-art .pp-idgrid[data-pin] .pp-hb-c{ display:none !important; }
.senshi-art .pp-idgrid[data-pin] .pp-hb-c--pin{ display:flex !important; }
/* held, and saying so: the gold edge the chart's own frame uses */
.senshi-art .pp-idgrid[data-pin] .pp-hoverbox{
  border-color:#f7cf62;
}
.senshi-art .pp-idgrid[data-pin] .pp-hb-rest{ display:none !important; }

/* ---- the resting line steps aside for any card ----
   Three rules rather than one :has() holding a selector list, because
   :has() is not forgiving: one selector a browser does not like would take
   the whole list down with it, and this is the rule that decides whether
   two things are on screen at once. */
.senshi-art .pp-idgrid:has([data-asp]:hover) .pp-hb-rest,
.senshi-art .pp-idgrid:has([data-asp]:focus-within) .pp-hb-rest{
  display:none;
}
.senshi-art .pp-idgrid:has(.nkw-hit:hover) .pp-hb-rest{ display:none; }
/* ...and for the bodies, which came last: a planet was lighting its glow and
   filling nothing, so the resting line had nothing to step aside for. Now it
   does. data-body is on the wheel glyph AND the placement row, so this one
   selector covers the mouse on the chart and the keyboard in the list. */
.senshi-art .pp-idgrid:has([data-body]:hover) .pp-hb-rest,
.senshi-art .pp-idgrid:has([data-body]:focus-within) .pp-hb-rest{
  display:none;
}
/* ...and for the sect row, which is the one hook that is NOT on the chart:
   it is a stat row under the box. Ash asked for sect as a hover because the
   row says "day or night not known" and cannot say why. */
.senshi-art .pp-idgrid:has([data-stat]:hover) .pp-hb-rest,
.senshi-art .pp-idgrid:has([data-stat]:focus-within) .pp-hb-rest{
  display:none;
}
/* the row shows it is askable, the same way the wheel's hit areas do */
.senshi-art .nk-chip--stat[data-stat]{ cursor:help; }

/* ---- ONE HEIGHT FOR EVERY CARD ----
   So moving down the aspects list does not make the band under the chart
   jump between six heights, and so the stats below it never shift.

   A FIXED FLOOR, NOT A FLOOR THAT ARRIVES WITH THE CARD. In the corner the
   panel shrank to a small label at rest, because sitting on the drawing it
   had to earn its space. The band is not on the drawing - it is the row the
   "still" stat used to occupy - so it holds its height whether a card is up
   or not, and nothing below it ever moves. */
/* 118, and it was 92 until the type grew. Ash: "the font is way too small.
   espically since we have soi much room inside this box" - so the sizes
   above went up about a quarter, the tallest card went from 72 of content
   to 97, and this floor has to clear it or a card scrolls inside the band.
   97 of card plus the panel's own 20 of frame is 117. It went to 176 while
   the copy was still the long version, Ash said "the hover box can't grow
   that tall. looks really weird", and the sentences came down rather than
   the type: shorter dignity clauses, shorter aspect qualities, the ruler
   moved onto the sign cards' grey line, the angles leading with their own
   initials. That bought 40 pixels back.

   80, WHICH IS THE NUMBER ASH ASKED FOR AND THE CARDS NOW FIT INSIDE.
   The cards are 63: three lines of one flowing paragraph, where they used
   to be four separate ones. 63 plus the panel's 13 of frame is 76; 80
   clears it and leaves a little air.

   The note below is the previous floor and why it, too, was wrong:
   preview/ carried no fonts/ directory, so rainyhearts failed to load in
   the measuring browser and every card was laid out in the monospace
   fallback - about thirty per cent wider, so everything wrapped a line
   early. Cards that measured 111 are 91. Ash said "still too tall" three
   times and was right every time; this floor was built on fiction.
   teach_check.py now refuses to run if the fonts do not load.

   91 of card plus 20 of frame is 111. The old note follows, because the
   lever it describes is still the right one to reach for:

   (was) 132, AND IT IS THE ASPECT CARDS THAT SET IT NOW. It was the ninth and
   eleventh places while the keywords were a flex row one to a line; making
   them flow as inline text took those cards from 131 to 109 and handed the
   ceiling back to the aspect cards at 111. 111 plus 20 of frame is 131.

   The old note, kept because the lever is still the one to reach for: They are
   the cards carrying the most at once: a title, three keywords on three
   lines, a planet's joy, and - on a chart with no hour - the caveat, which
   now names whose chart it is ("no birth time for Naoko, no houses") on a
   line of its own under the joy. 131 of card plus 20 of frame is 151. If this ever has to come down again the
   lever is the keyword count, not the type: two keywords a place instead of
   three takes a line off every house card on the site.

   THIS NUMBER NEVER MOVES ALONE. It is one of three - see the two grow
   variables below - and raising it by itself is the mistake that took the
   wheel from 483 to 367 the last time. Raise all three by the same amount. */
/* ---- THE NIGHT SKY, AND ONE BOX INSTEAD OF TWO ----
   Ash: "change the background color of the box to match the color of the
   starfield that sits behind the chart.... the blacky brown space color",
   and on the button, "add it to the hover box".

   #2c1820 is not a guess: it is 99.7% of chartstars.png, the tile the
   wheel's sky is painted with, read straight off the file. So the strip
   under the chart is the same night the chart is drawn on, and when that
   night changes hue this number follows it rather than being picked again.

   IT HAS BEEN A BROWN, THEN A PLUM, AND IT IS A WINE. Ash: "i miss the
   brown. but i want the purple.. can we get half way in between?" Hue 337,
   which is the midpoint of 36 and 278 taken the short way round the wheel,
   through red rather than through green. Every one of those swaps was hue
   only, at the same luminance, so not one ink in this box has ever had to
   be rechosen for any of them.

   THE FRAME MOVES OUT ONE LEVEL. The dark ground and the gold edge used to
   belong to .pp-hb; they belong to the box now, .pp-hb gives up its border
   and background, and the learn button sits inside that same edge as a
   panel at the right. No markup changed to do it - one box, two children,
   and the border that used to be drawn twice is drawn once. */
.senshi-art .pp-hoverbox{
  min-height:86px; gap:0;
  background:#2c1820;
  border:2px solid #c9a24e;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),
             inset -1px -1px 0 rgba(255,253,246,.18);
}
/* ---- and the box grows to hold it, with the list growing to match ----
   Ash: "if you need to grow the height of the 'still' box once the
   information is moved in, make sure to increase the height of the
   placements/aspects scrollbox to match. make sense?"

   It does, and it is the whole reason this is one number rather than two
   guesses. The band is 72 tall where the "still" row it replaced was 37, so
   the stats box needs 35 more before it starts scrolling its own content -
   and the left column has to take the same 35, or the two columns stop
   ending on the same line and the layout that was squared up in 383 comes
   apart again.

   --pp-band-grow is that one number. Both sides read it. */
/* 78 and 156, and the 156 is deliberate slack rather than a measurement.
   THIS IS THE FAILURE SECTION 389 WARNS ABOUT and it has now been seen
   twice. Moving the learn button out of the box and onto a bar of its own
   added 46px to the right column; the grid row is a fixed height, so the
   only flexible thing in the column paid for it and the chart dropped from
   523 to 491 with every glyph in it going from 1:1 to 0.94. The row grew
   46 to cover it. The button has since gone back inside the box and those
   46 pixels are free again, and this is LEFT at 156 on purpose: swept with
   the real fonts loaded, the wheel sits at its 523px ceiling for anything
   from 148 up and only shrinks below that, so the slack costs nothing and
   the next thing to land in this column does not repeat the lesson.
   naoko_audit.py measures the rendered glyph scale against WHEEL_SCALE and
   is what caught it both times. */
.senshi-art .pp-idbox{ --pp-band-grow:78px; --pp-row-grow:156px; }
/* ...AND ASH'S PAGE TAKES THE SAME TWO NUMBERS. For a day it had its own -
   360 and 152 - because her right column carried the marching band (120px)
   and a trainer card two rows taller than Naoko's, and the wheel was paying
   for both. Ash: "the dimension of the scroll boxs and menus should be the
   same as the naoko template." So the band leaves the column for the
   paragraph row underneath, the badges stop being a double-height band, and
   what is left fits inside Naoko's 956 with the wheel at its full 515: the
   two pages' boxes, tabs and cards measure the same. No override here means
   there is nothing to drift. */
/* AND THE ROW GROWS WITH IT. The grid row is a fixed height, so a taller
   stats box does not make the block taller - it takes the space off the
   only flexible thing in the column, which is the WHEEL. Measured, the
   chart went from 483 to 367 and every glyph in it from 1:1 to 0.75, which
   is the exact failure section 389 warns about: "the stats do not shrink,
   so the only flexible thing left took the whole bill."

   TWO NUMBERS, NOT ONE, and the difference matters. --pp-band-grow is how
   much taller the stats box is ALLOWED to be; --pp-row-grow is how much
   taller its CONTENT actually got. The box went from 256 to 372 - the band
   is 55 more than the "still" row it replaced, and the sect row is the
   rest - so the row needs 116, while the ceiling only needs enough to not
   clip 372.

   The row number is the one that must be right to the pixel: it is what
   leaves the wheel at exactly 483, and the wheel's rendered size is what
   WHEEL_SCALE in pp_profile.py divides by to keep the glyphs at 1:1. Get
   it wrong and every sprite in the chart goes fractional - which is how
   this was caught, by scripts/naoko_audit.py measuring them.

   The same number is added to the row. The wheel keeps its size, the
   stats get their extra, and the left column follows through the tabs'
   min-height above. One measurement, three places, no drift. */
.senshi-art .pp-idcol--r > .pp-places--grown{
  max-height:calc(var(--pp-stats-max, 289px) + var(--pp-band-grow, 0px));
}
.senshi-art .pp-idcol--l .pp-tabs{
  min-height:calc(284px + var(--pp-row-grow, 0px));
}

@media (max-width:620px){
  /* on a phone the columns stack and there is no hover to speak of, so the
     band would be a permanently empty box above the stats. The learn button
     is the half that still has a job, so it stays and goes full width. */
  .senshi-art .pp-hoverbox > .pp-hb{ display:none; }
  .senshi-art .pp-hoverbox{ min-height:0; display:block; }
  .senshi-art .pp-hoverbox > .pp-learnbtn{ width:100%; padding:9px 12px 10px; }
}


/* ========= 391. THE SECOND STAR EFFECT ================================= */
/* Ash: "simple easter egg. well, maybe not simple... when clicking the
   mspaint button, can we add a few seconds effect to the background of the
   chart box. we already have the other snes star effect... how about another
   fun one" - pointing at parallax starfields, the space effect. And, asked
   whether the twinkle should stop while it runs: "keep twinkling."

   AND THEN IT STOPPED BEING AN EGG. Having seen it: "can we keep it as a
   standard function? that's not too much visually is it?... i think i want
   it always on." Measured before agreeing: 45% of the chart box is visible
   sky and 0% of its centre third - the wheel's disc is opaque, so the drift
   is a frame around the drawing and nothing ever moves behind a degree
   number or a glyph.

   WHAT CHANGED WITH IT IS THE SPEED. 74px a second was tuned to be
   unmistakable inside six seconds; left running it is a conveyor belt in the
   corner of the eye. The standing rate is a seventh of that, with the ratio
   between the three depths kept, and the palette click multiplies it by
   seven for a few seconds and ramps back down into it.

   ALL OF IT IS IN js/chartstars.js, which is the file that already owns the
   starfield. There is nothing for the stylesheet to do except say that the
   palette strip is a thing you can click.

   ONE DECLARATION, AND NO LABEL. A cursor is the smallest hint that does the
   job: anyone running their mouse across the strip finds it, and nobody
   reading the page is told there is something to find. */
.senshi-art .pgp-pal{ cursor:pointer; }


/* ========= 392. FAVICONS IN THE PROSE ================================== */
/* Ash, queued after the article writing was done: go to the favicon wall and
   work some favicons into the article text - and she asked Claude to pick
   which, because she wants to see what it comes up with.

   WHICH ONES, and the rule they were picked by, is written up in
   scripts/favicons_naoko.py: the one she already set for the recipe box,
   "easter-egg meme images are placed on a MINORITY of recipes, each MATCHED
   to its dish." Nine of them across eleven sections, each at the end of a
   sentence that names a concrete object - a telescope, a beaker, a trophy,
   a pair of rings - and none at all beside the earthquake, the miscarriage,
   the called-off wedding or the sources.

   20px, NOT 16 OR 24. The wall is drawn at 20 and so is everything else on
   this page; a fraction of a pixel-art sprite drops rows out of it, and
   this site's own rule says so. It is also exactly the size of the glyphs
   in the placements column, which is the point - the icon in a sentence and
   the icon beside Jupiter are the same object at the same size. */
.senshi-art .nk-fav{
  display:inline-block; vertical-align:-5px;
  width:20px; height:20px; margin:0 0 0 6px;
  image-rendering:pixelated;
  /* THE SITE FRAMES EVERY IMG, and a 20px sprite in a line of type must not
     wear a frame. Same four overrides the junk drawer needed: the border,
     the fill behind it, the bevel, and the global clamp that would scale it
     to something that is not 20. */
  border:0; background:none; box-shadow:none; max-width:none; padding:0;
}
/* it is a mark in the margin of a sentence, not punctuation: it never ends
   up alone at the start of the next line */
.senshi-art .nk-fav{ margin-right:1px; }

/* CHARTBOX:start - the chart box, one block for every mode. Written by build_chartbox.py from pp_profile.CHARTBOX_CSS; edit THERE. */
/* ---- the stage: a dark panel with the star field, the wheel over it ---- */
.tw-stage{ position:relative; max-width:804px; margin:0 auto; padding:9px; box-sizing:border-box;
  background:#2c1820 url("images/backgrounds/chartstars.png") repeat;
  border:1px solid #c9a24e; border-radius:10px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08); }
.tw-stage > svg{ display:block; width:100%; height:auto; }   /* the CHILD only: the still nests a second svg that must keep its own size */
.tw-stage .nkw-px{ image-rendering:pixelated; }
/* the profile's star field twinkle under the wheel: js/chartstars.js puts the
   canvas in as the stage's first child; the wheel, the band and the (c) sit
   over it. With no script, or reduced motion, the still tile shows. */
.tw-stage .nkw-stars{ position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%;
  image-rendering:pixelated; pointer-events:none; border-radius:9px; }
.tw-stage > svg, .tw-stage > .tw-foot{ position:relative; z-index:1; }
/* NO FADES. The skies, the glow and the cards all snap: Ash's rule for the
   whole template, "no fade. just jump... old school look". */
.tw-copy{ position:absolute; right:14px; bottom:9px; z-index:1; font-family:basiic,monospace; font-size:12px;
  letter-spacing:.4px; color:rgba(255,253,246,.55); pointer-events:none; }
@keyframes nkw-twinkle{
  0%, 82% { opacity:var(--o); }
  86%     { opacity:calc(var(--o) * .45); }
  90%     { opacity:calc(var(--o) * .12); }
  94%     { opacity:calc(var(--o) * .5); }
  100%    { opacity:var(--o); }
}
.tw-stage .nkw-star--tw{ animation-name:nkw-twinkle; animation-iteration-count:infinite;
  animation-timing-function:steps(1, end); }
/* ---- the hit areas on a teaching wheel ---- */
.tw-teach .tw-hit{ cursor:help; }
.tw-teach .tw-hit--a > text{ pointer-events:none; }
.tw-teach .tw-hit--you > .tw-youlab, .tw-teach .tw-hit--you > .tw-you{ pointer-events:none; }
/* ---- the band, inside the stage under the wheel (teach and live) ----
   the profile hover box's RULES (one panel, a rest line, one card at a time,
   click to hold) in the profile's night-and-gold colouring, half the stage
   wide on the left, with the caption in a box of its own beside it on the
   paragraph box's recipepaper. The profile's own band keeps its surface rules
   in senshi.css (.pp-hoverbox); what the two share is the behaviour below. */
.tw-foot{ display:flex; gap:16px; align-items:stretch; margin:9px 0 22px; }
.tw-hb{ flex:0 0 50%; min-height:112px; margin:0; padding:8px 12px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  background:#2c1820; border:2px solid #c9a24e;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5), inset -1px -1px 0 rgba(255,253,246,.18);
  font-family:rainyhearts,monospace; color:#e7dcc6; text-align:left;
  -webkit-user-select:text; user-select:text; }
.tw-side{ flex:1 1 auto; margin:0; min-height:112px; padding:8px 12px; box-sizing:border-box;
  background-color:#fffaf0; background-image:url("images/backgrounds/recipepaper.png");
  background-size:150px 150px; background-repeat:repeat;
  border:1px solid #c9a24e; border-radius:9px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  font-family:rainyhearts,monospace; font-size:19px; line-height:1.4; color:#4a2a5c; text-align:left; }
.tw-side b{ color:#be4c62; font-weight:400; }
body.--post .post-content p.tw-side{ margin:0; }   /* the post's own p margin would unlevel the pair */
.tw-hb-rest{ margin:0; color:#c3b59a; font-size:20px; line-height:1.35; }
body.--post .post-content .tw-hb-rest i{ font-style:normal; color:#8e8268; font-size:16px; margin-left:7px; }
.tw-hb-c{ display:none; align-items:center; }
.tw-hb-d{ margin:0; font-size:20px; line-height:1.4; color:#e7dcc6; }
.tw-hb .tw-hb-d b{ font-weight:700; color:#fad761; }
body.--post .post-content .tw-hb-d i{ font-style:normal; color:#f0a6a0; }   /* outranks the post's own i */
.tw-hb-live:empty{ display:none; }
.tw-teach:has(.tw-hit:hover) .tw-hb-rest, .tw-teach[data-pin] .tw-hb-rest{ display:none; }
@media (max-width:620px){ .tw-foot{ flex-direction:column; } .tw-hb{ flex-basis:auto; width:100%; } }
/* ---- the hold, for every mode: js/chartbox.js sets data-pin on the box's
   root and cb-card--pin on the card; while one is held, it shows alone and
   the rest line stays away. The profile's sheet carries the same three rules
   against its own classes with !important; these are the neutral copy. ---- */
[data-chartbox][data-pin] .cb-card{ display:none; }
[data-chartbox][data-pin] .cb-card.cb-card--pin{ display:flex; }
[data-chartbox][data-pin] .cb-rest{ display:none; }
/* a term in a card: the rainbow the profile's card titles and the "new to
   charts?" button wear, through the letters, scrolling slowly (Ash: "any key
   terms displayed inside a hover box needs that rainbow gradient to show its
   a term"). A flat gold first; transparent ink only where clip:text works. */
@keyframes tw-rainbow{ 0%{ background-position:0% 50%; } 100%{ background-position:-150% 50%; } }
.cb-band .tw-term{ font-style:normal; font-weight:700; color:#fad761; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cb-band .tw-term{ background-image:linear-gradient(100deg, #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec);
    background-size:300% 100%; background-repeat:repeat;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    animation:tw-rainbow 24s linear infinite; }
}
@media (prefers-reduced-motion:reduce){ .cb-band .tw-term{ animation:none; } }
/* ---- what lights, and which card shows, on a teaching wheel ---- */
.tw-teach:has([data-part="asc"]:hover) .tw-hit--a[data-part="asc"] > text,
.tw-teach[data-pin="asc"] .tw-hit--a[data-part="asc"] > text{ fill:#f7cf62; }
.tw-teach:has([data-part="asc"]:hover) .tw-axtick--asc,
.tw-teach[data-pin="asc"] .tw-axtick--asc{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="dsc"]:hover) .tw-hit--a[data-part="dsc"] > text,
.tw-teach[data-pin="dsc"] .tw-hit--a[data-part="dsc"] > text{ fill:#f7cf62; }
.tw-teach:has([data-part="dsc"]:hover) .tw-axtick--dsc,
.tw-teach[data-pin="dsc"] .tw-axtick--dsc{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="mc"]:hover) .tw-hit--a[data-part="mc"] > text,
.tw-teach[data-pin="mc"] .tw-hit--a[data-part="mc"] > text{ fill:#f7cf62; }
.tw-teach:has([data-part="mc"]:hover) .tw-axtick--mc,
.tw-teach[data-pin="mc"] .tw-axtick--mc{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="ic"]:hover) .tw-hit--a[data-part="ic"] > text,
.tw-teach[data-pin="ic"] .tw-hit--a[data-part="ic"] > text{ fill:#f7cf62; }
.tw-teach:has([data-part="ic"]:hover) .tw-axtick--ic,
.tw-teach[data-pin="ic"] .tw-axtick--ic{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="horizon"]:hover) .tw-axis--asc > .tw-axline,
.tw-teach[data-pin="horizon"] .tw-axis--asc > .tw-axline{ stroke:#f7cf62; stroke-width:4; stroke-dasharray:none; }
.tw-teach:has([data-part="meridian"]:hover) .tw-axis--mc > .tw-axline,
.tw-teach[data-pin="meridian"] .tw-axis--mc > .tw-axline{ stroke:#f7cf62; stroke-width:4; stroke-dasharray:none; }
.tw-teach:has([data-part="sky"]:hover) .tw-hit--sky,
.tw-teach[data-pin="sky"] .tw-hit--sky{ fill-opacity:.16; }
.tw-teach:has([data-part="ground"]:hover) .tw-hit--ground,
.tw-teach[data-pin="ground"] .tw-hit--ground{ fill-opacity:.12; }
.tw-teach:has([data-part="you"]:hover) .tw-earthring,
.tw-teach[data-pin="you"] .tw-earthring{ stroke:#f7cf62; stroke-width:4.5; }
.tw-teach:has([data-part="you"]:hover) .tw-youlab,
.tw-teach[data-pin="you"] .tw-youlab{ fill:#f7cf62; }
.tw-teach:has([data-part="sun"]:hover) .tw-sun > .nkw-tick,
.tw-teach[data-pin="sun"] .tw-sun > .nkw-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="sun"]:hover) .tw-sun > .tw-deg,
.tw-teach[data-pin="sun"] .tw-sun > .tw-deg{ fill:#f7cf62; }
.tw-teach:has([data-part="sun"]:hover) .tw-sun > .nkw-lead,
.tw-teach[data-pin="sun"] .tw-sun > .nkw-lead{ stroke:#f7cf62; stroke-opacity:1; }
.tw-teach:not([data-pin]):has([data-part="asc"]:hover) [data-card="asc"],
.tw-teach[data-pin="asc"] [data-card="asc"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="dsc"]:hover) [data-card="dsc"],
.tw-teach[data-pin="dsc"] [data-card="dsc"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="mc"]:hover) [data-card="mc"],
.tw-teach[data-pin="mc"] [data-card="mc"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="ic"]:hover) [data-card="ic"],
.tw-teach[data-pin="ic"] [data-card="ic"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="horizon"]:hover) [data-card="horizon"],
.tw-teach[data-pin="horizon"] [data-card="horizon"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="meridian"]:hover) [data-card="meridian"],
.tw-teach[data-pin="meridian"] [data-card="meridian"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="sky"]:hover) [data-card="sky"],
.tw-teach[data-pin="sky"] [data-card="sky"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="ground"]:hover) [data-card="ground"],
.tw-teach[data-pin="ground"] [data-card="ground"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="you"]:hover) [data-card="you"],
.tw-teach[data-pin="you"] [data-card="you"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="sun"]:hover) [data-card="sun"],
.tw-teach[data-pin="sun"] [data-card="sun"]{ display:flex; }
.tw-teach:has([data-part="moon"]:hover) .tm-home[data-for="moon"],
.tw-teach[data-pin="moon"] .tm-home[data-for="moon"]{ opacity:1; }
.tw-teach:has([data-part="moon"]:hover) .tm-chord[data-for="moon"],
.tw-teach[data-pin="moon"] .tm-chord[data-for="moon"]{ opacity:1; stroke-width:4; }
.tw-teach:has([data-part="moon"]:hover) .tm-body[data-part="moon"] .tm-tick,
.tw-teach[data-pin="moon"] .tm-body[data-part="moon"] .tm-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="sun"]:hover) .tm-home[data-for="sun"],
.tw-teach[data-pin="sun"] .tm-home[data-for="sun"]{ opacity:1; }
.tw-teach:has([data-part="sun"]:hover) .tm-chord[data-for="sun"],
.tw-teach[data-pin="sun"] .tm-chord[data-for="sun"]{ opacity:1; stroke-width:4; }
.tw-teach:has([data-part="sun"]:hover) .tm-body[data-part="sun"] .tm-tick,
.tw-teach[data-pin="sun"] .tm-body[data-part="sun"] .tm-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="mercury"]:hover) .tm-home[data-for="mercury"],
.tw-teach[data-pin="mercury"] .tm-home[data-for="mercury"]{ opacity:1; }
.tw-teach:has([data-part="mercury"]:hover) .tm-chord[data-for="mercury"],
.tw-teach[data-pin="mercury"] .tm-chord[data-for="mercury"]{ opacity:1; stroke-width:4; }
.tw-teach:has([data-part="mercury"]:hover) .tm-body[data-part="mercury"] .tm-tick,
.tw-teach[data-pin="mercury"] .tm-body[data-part="mercury"] .tm-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="venus"]:hover) .tm-home[data-for="venus"],
.tw-teach[data-pin="venus"] .tm-home[data-for="venus"]{ opacity:1; }
.tw-teach:has([data-part="venus"]:hover) .tm-chord[data-for="venus"],
.tw-teach[data-pin="venus"] .tm-chord[data-for="venus"]{ opacity:1; stroke-width:4; }
.tw-teach:has([data-part="venus"]:hover) .tm-body[data-part="venus"] .tm-tick,
.tw-teach[data-pin="venus"] .tm-body[data-part="venus"] .tm-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="mars"]:hover) .tm-home[data-for="mars"],
.tw-teach[data-pin="mars"] .tm-home[data-for="mars"]{ opacity:1; }
.tw-teach:has([data-part="mars"]:hover) .tm-chord[data-for="mars"],
.tw-teach[data-pin="mars"] .tm-chord[data-for="mars"]{ opacity:1; stroke-width:4; }
.tw-teach:has([data-part="mars"]:hover) .tm-body[data-part="mars"] .tm-tick,
.tw-teach[data-pin="mars"] .tm-body[data-part="mars"] .tm-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="jupiter"]:hover) .tm-home[data-for="jupiter"],
.tw-teach[data-pin="jupiter"] .tm-home[data-for="jupiter"]{ opacity:1; }
.tw-teach:has([data-part="jupiter"]:hover) .tm-chord[data-for="jupiter"],
.tw-teach[data-pin="jupiter"] .tm-chord[data-for="jupiter"]{ opacity:1; stroke-width:4; }
.tw-teach:has([data-part="jupiter"]:hover) .tm-body[data-part="jupiter"] .tm-tick,
.tw-teach[data-pin="jupiter"] .tm-body[data-part="jupiter"] .tm-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="saturn"]:hover) .tm-home[data-for="saturn"],
.tw-teach[data-pin="saturn"] .tm-home[data-for="saturn"]{ opacity:1; }
.tw-teach:has([data-part="saturn"]:hover) .tm-chord[data-for="saturn"],
.tw-teach[data-pin="saturn"] .tm-chord[data-for="saturn"]{ opacity:1; stroke-width:4; }
.tw-teach:has([data-part="saturn"]:hover) .tm-body[data-part="saturn"] .tm-tick,
.tw-teach[data-pin="saturn"] .tm-body[data-part="saturn"] .tm-tick{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:not([data-pin]):has([data-part="moon"]:hover) [data-card="moon"],
.tw-teach[data-pin="moon"] [data-card="moon"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="mercury"]:hover) [data-card="mercury"],
.tw-teach[data-pin="mercury"] [data-card="mercury"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="venus"]:hover) [data-card="venus"],
.tw-teach[data-pin="venus"] [data-card="venus"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="mars"]:hover) [data-card="mars"],
.tw-teach[data-pin="mars"] [data-card="mars"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="jupiter"]:hover) [data-card="jupiter"],
.tw-teach[data-pin="jupiter"] [data-card="jupiter"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="saturn"]:hover) [data-card="saturn"],
.tw-teach[data-pin="saturn"] [data-card="saturn"]{ display:flex; }
.tw-teach:has([data-part="moon"]:hover) .tm-home[data-for="moon"],
.tw-teach[data-pin="moon"] .tm-home[data-for="moon"]{ opacity:1; fill-opacity:.95; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="moon"]:hover) .tm-signlit[data-for="moon"],
.tw-teach[data-pin="moon"] .tm-signlit[data-for="moon"]{ opacity:1; }
.tw-teach:has([data-part="moon"]:hover)[data-show~="homes"] .tm-home:not([data-for="moon"]), .tw-teach:has([data-part="moon"]:hover)[data-show~="homes"] .tm-chord:not([data-for="moon"]),
.tw-teach[data-pin="moon"][data-show~="homes"] .tm-home:not([data-for="moon"]), .tw-teach[data-pin="moon"][data-show~="homes"] .tm-chord:not([data-for="moon"]){ opacity:.22; }
.tw-teach:has([data-part="sun"]:hover) .tm-home[data-for="sun"],
.tw-teach[data-pin="sun"] .tm-home[data-for="sun"]{ opacity:1; fill-opacity:.95; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="sun"]:hover) .tm-signlit[data-for="sun"],
.tw-teach[data-pin="sun"] .tm-signlit[data-for="sun"]{ opacity:1; }
.tw-teach:has([data-part="sun"]:hover)[data-show~="homes"] .tm-home:not([data-for="sun"]), .tw-teach:has([data-part="sun"]:hover)[data-show~="homes"] .tm-chord:not([data-for="sun"]),
.tw-teach[data-pin="sun"][data-show~="homes"] .tm-home:not([data-for="sun"]), .tw-teach[data-pin="sun"][data-show~="homes"] .tm-chord:not([data-for="sun"]){ opacity:.22; }
.tw-teach:has([data-part="mercury"]:hover) .tm-home[data-for="mercury"],
.tw-teach[data-pin="mercury"] .tm-home[data-for="mercury"]{ opacity:1; fill-opacity:.95; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="mercury"]:hover) .tm-signlit[data-for="mercury"],
.tw-teach[data-pin="mercury"] .tm-signlit[data-for="mercury"]{ opacity:1; }
.tw-teach:has([data-part="mercury"]:hover)[data-show~="homes"] .tm-home:not([data-for="mercury"]), .tw-teach:has([data-part="mercury"]:hover)[data-show~="homes"] .tm-chord:not([data-for="mercury"]),
.tw-teach[data-pin="mercury"][data-show~="homes"] .tm-home:not([data-for="mercury"]), .tw-teach[data-pin="mercury"][data-show~="homes"] .tm-chord:not([data-for="mercury"]){ opacity:.22; }
.tw-teach:has([data-part="venus"]:hover) .tm-home[data-for="venus"],
.tw-teach[data-pin="venus"] .tm-home[data-for="venus"]{ opacity:1; fill-opacity:.95; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="venus"]:hover) .tm-signlit[data-for="venus"],
.tw-teach[data-pin="venus"] .tm-signlit[data-for="venus"]{ opacity:1; }
.tw-teach:has([data-part="venus"]:hover)[data-show~="homes"] .tm-home:not([data-for="venus"]), .tw-teach:has([data-part="venus"]:hover)[data-show~="homes"] .tm-chord:not([data-for="venus"]),
.tw-teach[data-pin="venus"][data-show~="homes"] .tm-home:not([data-for="venus"]), .tw-teach[data-pin="venus"][data-show~="homes"] .tm-chord:not([data-for="venus"]){ opacity:.22; }
.tw-teach:has([data-part="mars"]:hover) .tm-home[data-for="mars"],
.tw-teach[data-pin="mars"] .tm-home[data-for="mars"]{ opacity:1; fill-opacity:.95; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="mars"]:hover) .tm-signlit[data-for="mars"],
.tw-teach[data-pin="mars"] .tm-signlit[data-for="mars"]{ opacity:1; }
.tw-teach:has([data-part="mars"]:hover)[data-show~="homes"] .tm-home:not([data-for="mars"]), .tw-teach:has([data-part="mars"]:hover)[data-show~="homes"] .tm-chord:not([data-for="mars"]),
.tw-teach[data-pin="mars"][data-show~="homes"] .tm-home:not([data-for="mars"]), .tw-teach[data-pin="mars"][data-show~="homes"] .tm-chord:not([data-for="mars"]){ opacity:.22; }
.tw-teach:has([data-part="jupiter"]:hover) .tm-home[data-for="jupiter"],
.tw-teach[data-pin="jupiter"] .tm-home[data-for="jupiter"]{ opacity:1; fill-opacity:.95; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="jupiter"]:hover) .tm-signlit[data-for="jupiter"],
.tw-teach[data-pin="jupiter"] .tm-signlit[data-for="jupiter"]{ opacity:1; }
.tw-teach:has([data-part="jupiter"]:hover)[data-show~="homes"] .tm-home:not([data-for="jupiter"]), .tw-teach:has([data-part="jupiter"]:hover)[data-show~="homes"] .tm-chord:not([data-for="jupiter"]),
.tw-teach[data-pin="jupiter"][data-show~="homes"] .tm-home:not([data-for="jupiter"]), .tw-teach[data-pin="jupiter"][data-show~="homes"] .tm-chord:not([data-for="jupiter"]){ opacity:.22; }
.tw-teach:has([data-part="saturn"]:hover) .tm-home[data-for="saturn"],
.tw-teach[data-pin="saturn"] .tm-home[data-for="saturn"]{ opacity:1; fill-opacity:.95; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="saturn"]:hover) .tm-signlit[data-for="saturn"],
.tw-teach[data-pin="saturn"] .tm-signlit[data-for="saturn"]{ opacity:1; }
.tw-teach:has([data-part="saturn"]:hover)[data-show~="homes"] .tm-home:not([data-for="saturn"]), .tw-teach:has([data-part="saturn"]:hover)[data-show~="homes"] .tm-chord:not([data-for="saturn"]),
.tw-teach[data-pin="saturn"][data-show~="homes"] .tm-home:not([data-for="saturn"]), .tw-teach[data-pin="saturn"][data-show~="homes"] .tm-chord:not([data-for="saturn"]){ opacity:.22; }
.tm-signlit{ opacity:0; }
.tw-teach[data-show~="homes"] .tm-chord{ opacity:1; }
.tw-teach[data-show~="homes"] .tm-home{ opacity:1; stroke-opacity:0; }
.tw-teach[data-show~="steps"] .tm-steps{ opacity:1; }
.tw-teach[data-show~="asp"] .tm-asp{ opacity:1; }
.tm-home, .tm-chord, .tm-steps, .tm-asp{ opacity:0; }
.tm-notes{ margin:6px 0 0; color:#e7dcc6; } .tw-teach .tm-notes p.tm-intro, .tw-teach .tm-notes p.tm-note, .tw-teach .tm-notes p.tm-head{ margin:0 0 .35em; line-height:1.3; }
.tm-intro{ color:#cfc2ad; } .tw-teach .tm-notes p.tm-head{ margin:.4em 0 .3em; color:#f0459a; font-weight:700; }
.tm-note b{ color:#fad761; font-weight:700; }
.tm-pg, .tm-sg{ display:inline-block; height:1.05em; width:auto; vertical-align:-.18em; image-rendering:pixelated; } .tm-pg{ margin-right:.3em; } .tm-sg{ margin:0 .2em 0 .1em; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .tw-teach .tm-notes b{ background-image:linear-gradient(100deg, #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec); background-size:300% 100%; background-repeat:repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:tw-rainbow 24s linear infinite; } }
@media (prefers-reduced-motion:reduce){ .tw-teach .tm-notes b{ animation:none; } }
.tm-note--asp{ display:flex; align-items:center; gap:.6em; } .tm-dia{ flex:0 0 auto; width:2.1em; height:2.1em; } .tm-gl{ display:inline-block; width:1em; height:1em; vertical-align:-.15em; }
.cb-tools[data-n="3"]{ flex-wrap:nowrap; gap:8px; } .cb-tools[data-n="3"] .tw-mode{ flex:1 1 0; padding:7px 4px; border-radius:14px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; } .cb-tools[data-n="3"] .tw-mode small{ line-height:1.25; }
.tm-sec{ display:none; } .tm-sec--why{ display:block; }
.tw-teach[data-show~="homes"] .tm-sec--why, .tw-teach[data-show~="homes"] .tm-intro{ display:none; } .tw-teach[data-show~="homes"] .tm-sec--homes{ display:block; }
.tw-teach[data-show~="steps"] .tm-sec--why, .tw-teach[data-show~="steps"] .tm-intro{ display:none; } .tw-teach[data-show~="steps"] .tm-sec--steps{ display:block; }
.tw-teach[data-show~="asp"] .tm-sec--why, .tw-teach[data-show~="asp"] .tm-intro{ display:none; } .tw-teach[data-show~="asp"] .tm-sec--asp{ display:block; }
.tw-teach:has([data-part="moon"]:hover) .tm-note[data-k="moon"], .tw-teach[data-pin="moon"] .tm-note[data-k="moon"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="moon"]:hover) .tm-step[data-for="moon"] circle, .tw-teach[data-pin="moon"] .tm-step[data-for="moon"] circle{ stroke:#fffdf6; stroke-width:4; }
.tw-teach:has([data-part="sun"]:hover) .tm-note[data-k="sun"], .tw-teach[data-pin="sun"] .tm-note[data-k="sun"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="sun"]:hover) .tm-step[data-for="sun"] circle, .tw-teach[data-pin="sun"] .tm-step[data-for="sun"] circle{ stroke:#fffdf6; stroke-width:4; }
.tw-teach:has([data-part="mercury"]:hover) .tm-note[data-k="mercury"], .tw-teach[data-pin="mercury"] .tm-note[data-k="mercury"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="mercury"]:hover) .tm-step[data-for="mercury"] circle, .tw-teach[data-pin="mercury"] .tm-step[data-for="mercury"] circle{ stroke:#fffdf6; stroke-width:4; }
.tw-teach:has([data-part="venus"]:hover) .tm-note[data-k="venus"], .tw-teach[data-pin="venus"] .tm-note[data-k="venus"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="venus"]:hover) .tm-step[data-for="venus"] circle, .tw-teach[data-pin="venus"] .tm-step[data-for="venus"] circle{ stroke:#fffdf6; stroke-width:4; }
.tw-teach:has([data-part="mars"]:hover) .tm-note[data-k="mars"], .tw-teach[data-pin="mars"] .tm-note[data-k="mars"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="mars"]:hover) .tm-step[data-for="mars"] circle, .tw-teach[data-pin="mars"] .tm-step[data-for="mars"] circle{ stroke:#fffdf6; stroke-width:4; }
.tw-teach:has([data-part="jupiter"]:hover) .tm-note[data-k="jupiter"], .tw-teach[data-pin="jupiter"] .tm-note[data-k="jupiter"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="jupiter"]:hover) .tm-step[data-for="jupiter"] circle, .tw-teach[data-pin="jupiter"] .tm-step[data-for="jupiter"] circle{ stroke:#fffdf6; stroke-width:4; }
.tw-teach:has([data-part="saturn"]:hover) .tm-note[data-k="saturn"], .tw-teach[data-pin="saturn"] .tm-note[data-k="saturn"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="saturn"]:hover) .tm-step[data-for="saturn"] circle, .tw-teach[data-pin="saturn"] .tm-step[data-for="saturn"] circle{ stroke:#fffdf6; stroke-width:4; }
.cb-tools{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 10px; }
.cb-tools .tw-mode{ flex:1 1 150px; min-width:0; padding-left:5px; padding-right:5px; }
.tm-body{ cursor:pointer; }
.tw-teach:has([data-part="h1"]:hover) .hg-cell[data-h="1"],
.tw-teach[data-pin="h1"] .hg-cell[data-h="1"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h1"]:hover) .hg-wedge[data-h="1"],
.tw-teach[data-pin="h1"] .hg-wedge[data-h="1"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h2"]:hover) .hg-cell[data-h="2"],
.tw-teach[data-pin="h2"] .hg-cell[data-h="2"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h2"]:hover) .hg-wedge[data-h="2"],
.tw-teach[data-pin="h2"] .hg-wedge[data-h="2"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h3"]:hover) .hg-cell[data-h="3"],
.tw-teach[data-pin="h3"] .hg-cell[data-h="3"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h3"]:hover) .hg-wedge[data-h="3"],
.tw-teach[data-pin="h3"] .hg-wedge[data-h="3"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h4"]:hover) .hg-cell[data-h="4"],
.tw-teach[data-pin="h4"] .hg-cell[data-h="4"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h4"]:hover) .hg-wedge[data-h="4"],
.tw-teach[data-pin="h4"] .hg-wedge[data-h="4"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h5"]:hover) .hg-cell[data-h="5"],
.tw-teach[data-pin="h5"] .hg-cell[data-h="5"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h5"]:hover) .hg-wedge[data-h="5"],
.tw-teach[data-pin="h5"] .hg-wedge[data-h="5"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h6"]:hover) .hg-cell[data-h="6"],
.tw-teach[data-pin="h6"] .hg-cell[data-h="6"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h6"]:hover) .hg-wedge[data-h="6"],
.tw-teach[data-pin="h6"] .hg-wedge[data-h="6"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h7"]:hover) .hg-cell[data-h="7"],
.tw-teach[data-pin="h7"] .hg-cell[data-h="7"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h7"]:hover) .hg-wedge[data-h="7"],
.tw-teach[data-pin="h7"] .hg-wedge[data-h="7"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h8"]:hover) .hg-cell[data-h="8"],
.tw-teach[data-pin="h8"] .hg-cell[data-h="8"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h8"]:hover) .hg-wedge[data-h="8"],
.tw-teach[data-pin="h8"] .hg-wedge[data-h="8"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h9"]:hover) .hg-cell[data-h="9"],
.tw-teach[data-pin="h9"] .hg-cell[data-h="9"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h9"]:hover) .hg-wedge[data-h="9"],
.tw-teach[data-pin="h9"] .hg-wedge[data-h="9"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h10"]:hover) .hg-cell[data-h="10"],
.tw-teach[data-pin="h10"] .hg-cell[data-h="10"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h10"]:hover) .hg-wedge[data-h="10"],
.tw-teach[data-pin="h10"] .hg-wedge[data-h="10"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h11"]:hover) .hg-cell[data-h="11"],
.tw-teach[data-pin="h11"] .hg-cell[data-h="11"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h11"]:hover) .hg-wedge[data-h="11"],
.tw-teach[data-pin="h11"] .hg-wedge[data-h="11"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="h12"]:hover) .hg-cell[data-h="12"],
.tw-teach[data-pin="h12"] .hg-cell[data-h="12"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="h12"]:hover) .hg-wedge[data-h="12"],
.tw-teach[data-pin="h12"] .hg-wedge[data-h="12"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="dharma"]:hover) .hg-cell[data-row="dharma"],
.tw-teach[data-pin="dharma"] .hg-cell[data-row="dharma"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="dharma"]:hover) .hg-wedge[data-row="dharma"],
.tw-teach[data-pin="dharma"] .hg-wedge[data-row="dharma"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="artha"]:hover) .hg-cell[data-row="artha"],
.tw-teach[data-pin="artha"] .hg-cell[data-row="artha"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="artha"]:hover) .hg-wedge[data-row="artha"],
.tw-teach[data-pin="artha"] .hg-wedge[data-row="artha"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="kama"]:hover) .hg-cell[data-row="kama"],
.tw-teach[data-pin="kama"] .hg-cell[data-row="kama"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="kama"]:hover) .hg-wedge[data-row="kama"],
.tw-teach[data-pin="kama"] .hg-wedge[data-row="kama"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="moksha"]:hover) .hg-cell[data-row="moksha"],
.tw-teach[data-pin="moksha"] .hg-cell[data-row="moksha"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="moksha"]:hover) .hg-wedge[data-row="moksha"],
.tw-teach[data-pin="moksha"] .hg-wedge[data-row="moksha"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="angular"]:hover) .hg-cell[data-col="angular"],
.tw-teach[data-pin="angular"] .hg-cell[data-col="angular"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="angular"]:hover) .hg-wedge[data-col="angular"],
.tw-teach[data-pin="angular"] .hg-wedge[data-col="angular"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="succedent"]:hover) .hg-cell[data-col="succedent"],
.tw-teach[data-pin="succedent"] .hg-cell[data-col="succedent"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="succedent"]:hover) .hg-wedge[data-col="succedent"],
.tw-teach[data-pin="succedent"] .hg-wedge[data-col="succedent"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="cadent"]:hover) .hg-cell[data-col="cadent"],
.tw-teach[data-pin="cadent"] .hg-cell[data-col="cadent"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="cadent"]:hover) .hg-wedge[data-col="cadent"],
.tw-teach[data-pin="cadent"] .hg-wedge[data-col="cadent"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="dharma"]:hover) .hg-tri[data-row="dharma"],
.tw-teach[data-pin="dharma"] .hg-tri[data-row="dharma"]{ opacity:1; }
.tw-teach:has([data-part="dharma"]:hover) .hg-lab[data-row="dharma"],
.tw-teach[data-pin="dharma"] .hg-lab[data-row="dharma"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="artha"]:hover) .hg-tri[data-row="artha"],
.tw-teach[data-pin="artha"] .hg-tri[data-row="artha"]{ opacity:1; }
.tw-teach:has([data-part="artha"]:hover) .hg-lab[data-row="artha"],
.tw-teach[data-pin="artha"] .hg-lab[data-row="artha"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="kama"]:hover) .hg-tri[data-row="kama"],
.tw-teach[data-pin="kama"] .hg-tri[data-row="kama"]{ opacity:1; }
.tw-teach:has([data-part="kama"]:hover) .hg-lab[data-row="kama"],
.tw-teach[data-pin="kama"] .hg-lab[data-row="kama"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="moksha"]:hover) .hg-tri[data-row="moksha"],
.tw-teach[data-pin="moksha"] .hg-tri[data-row="moksha"]{ opacity:1; }
.tw-teach:has([data-part="moksha"]:hover) .hg-lab[data-row="moksha"],
.tw-teach[data-pin="moksha"] .hg-lab[data-row="moksha"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:not([data-pin]):has([data-part="h1"]:hover) [data-card="h1"],
.tw-teach[data-pin="h1"] [data-card="h1"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h2"]:hover) [data-card="h2"],
.tw-teach[data-pin="h2"] [data-card="h2"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h3"]:hover) [data-card="h3"],
.tw-teach[data-pin="h3"] [data-card="h3"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h4"]:hover) [data-card="h4"],
.tw-teach[data-pin="h4"] [data-card="h4"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h5"]:hover) [data-card="h5"],
.tw-teach[data-pin="h5"] [data-card="h5"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h6"]:hover) [data-card="h6"],
.tw-teach[data-pin="h6"] [data-card="h6"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h7"]:hover) [data-card="h7"],
.tw-teach[data-pin="h7"] [data-card="h7"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h8"]:hover) [data-card="h8"],
.tw-teach[data-pin="h8"] [data-card="h8"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h9"]:hover) [data-card="h9"],
.tw-teach[data-pin="h9"] [data-card="h9"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h10"]:hover) [data-card="h10"],
.tw-teach[data-pin="h10"] [data-card="h10"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h11"]:hover) [data-card="h11"],
.tw-teach[data-pin="h11"] [data-card="h11"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="h12"]:hover) [data-card="h12"],
.tw-teach[data-pin="h12"] [data-card="h12"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="dharma"]:hover) [data-card="dharma"],
.tw-teach[data-pin="dharma"] [data-card="dharma"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="artha"]:hover) [data-card="artha"],
.tw-teach[data-pin="artha"] [data-card="artha"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="kama"]:hover) [data-card="kama"],
.tw-teach[data-pin="kama"] [data-card="kama"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="moksha"]:hover) [data-card="moksha"],
.tw-teach[data-pin="moksha"] [data-card="moksha"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="angular"]:hover) [data-card="angular"],
.tw-teach[data-pin="angular"] [data-card="angular"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="succedent"]:hover) [data-card="succedent"],
.tw-teach[data-pin="succedent"] [data-card="succedent"]{ display:flex; }
.tw-teach:not([data-pin]):has([data-part="cadent"]:hover) [data-card="cadent"],
.tw-teach[data-pin="cadent"] [data-card="cadent"]{ display:flex; }
.tw-teach:has([data-part="h1"]:hover) .hg-house:not([data-row="dharma"]), .tw-teach:has([data-part="h1"]:hover) .hg-rowlab:not([data-row="dharma"]),
.tw-teach[data-pin="h1"] .hg-house:not([data-row="dharma"]), .tw-teach[data-pin="h1"] .hg-rowlab:not([data-row="dharma"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h1"]:hover) .hg-house[data-row="dharma"]:not([data-part="h1"]) .hg-cell,
.tw-teach[data-pin="h1"] .hg-house[data-row="dharma"]:not([data-part="h1"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h1"]:hover) .hg-house[data-row="dharma"]:not([data-part="h1"]) .hg-wedge,
.tw-teach[data-pin="h1"] .hg-house[data-row="dharma"]:not([data-part="h1"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h2"]:hover) .hg-house:not([data-row="artha"]), .tw-teach:has([data-part="h2"]:hover) .hg-rowlab:not([data-row="artha"]),
.tw-teach[data-pin="h2"] .hg-house:not([data-row="artha"]), .tw-teach[data-pin="h2"] .hg-rowlab:not([data-row="artha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h2"]:hover) .hg-house[data-row="artha"]:not([data-part="h2"]) .hg-cell,
.tw-teach[data-pin="h2"] .hg-house[data-row="artha"]:not([data-part="h2"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h2"]:hover) .hg-house[data-row="artha"]:not([data-part="h2"]) .hg-wedge,
.tw-teach[data-pin="h2"] .hg-house[data-row="artha"]:not([data-part="h2"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h3"]:hover) .hg-house:not([data-row="kama"]), .tw-teach:has([data-part="h3"]:hover) .hg-rowlab:not([data-row="kama"]),
.tw-teach[data-pin="h3"] .hg-house:not([data-row="kama"]), .tw-teach[data-pin="h3"] .hg-rowlab:not([data-row="kama"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h3"]:hover) .hg-house[data-row="kama"]:not([data-part="h3"]) .hg-cell,
.tw-teach[data-pin="h3"] .hg-house[data-row="kama"]:not([data-part="h3"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h3"]:hover) .hg-house[data-row="kama"]:not([data-part="h3"]) .hg-wedge,
.tw-teach[data-pin="h3"] .hg-house[data-row="kama"]:not([data-part="h3"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h4"]:hover) .hg-house:not([data-row="moksha"]), .tw-teach:has([data-part="h4"]:hover) .hg-rowlab:not([data-row="moksha"]),
.tw-teach[data-pin="h4"] .hg-house:not([data-row="moksha"]), .tw-teach[data-pin="h4"] .hg-rowlab:not([data-row="moksha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h4"]:hover) .hg-house[data-row="moksha"]:not([data-part="h4"]) .hg-cell,
.tw-teach[data-pin="h4"] .hg-house[data-row="moksha"]:not([data-part="h4"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h4"]:hover) .hg-house[data-row="moksha"]:not([data-part="h4"]) .hg-wedge,
.tw-teach[data-pin="h4"] .hg-house[data-row="moksha"]:not([data-part="h4"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h5"]:hover) .hg-house:not([data-row="dharma"]), .tw-teach:has([data-part="h5"]:hover) .hg-rowlab:not([data-row="dharma"]),
.tw-teach[data-pin="h5"] .hg-house:not([data-row="dharma"]), .tw-teach[data-pin="h5"] .hg-rowlab:not([data-row="dharma"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h5"]:hover) .hg-house[data-row="dharma"]:not([data-part="h5"]) .hg-cell,
.tw-teach[data-pin="h5"] .hg-house[data-row="dharma"]:not([data-part="h5"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h5"]:hover) .hg-house[data-row="dharma"]:not([data-part="h5"]) .hg-wedge,
.tw-teach[data-pin="h5"] .hg-house[data-row="dharma"]:not([data-part="h5"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h6"]:hover) .hg-house:not([data-row="artha"]), .tw-teach:has([data-part="h6"]:hover) .hg-rowlab:not([data-row="artha"]),
.tw-teach[data-pin="h6"] .hg-house:not([data-row="artha"]), .tw-teach[data-pin="h6"] .hg-rowlab:not([data-row="artha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h6"]:hover) .hg-house[data-row="artha"]:not([data-part="h6"]) .hg-cell,
.tw-teach[data-pin="h6"] .hg-house[data-row="artha"]:not([data-part="h6"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h6"]:hover) .hg-house[data-row="artha"]:not([data-part="h6"]) .hg-wedge,
.tw-teach[data-pin="h6"] .hg-house[data-row="artha"]:not([data-part="h6"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h7"]:hover) .hg-house:not([data-row="kama"]), .tw-teach:has([data-part="h7"]:hover) .hg-rowlab:not([data-row="kama"]),
.tw-teach[data-pin="h7"] .hg-house:not([data-row="kama"]), .tw-teach[data-pin="h7"] .hg-rowlab:not([data-row="kama"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h7"]:hover) .hg-house[data-row="kama"]:not([data-part="h7"]) .hg-cell,
.tw-teach[data-pin="h7"] .hg-house[data-row="kama"]:not([data-part="h7"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h7"]:hover) .hg-house[data-row="kama"]:not([data-part="h7"]) .hg-wedge,
.tw-teach[data-pin="h7"] .hg-house[data-row="kama"]:not([data-part="h7"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h8"]:hover) .hg-house:not([data-row="moksha"]), .tw-teach:has([data-part="h8"]:hover) .hg-rowlab:not([data-row="moksha"]),
.tw-teach[data-pin="h8"] .hg-house:not([data-row="moksha"]), .tw-teach[data-pin="h8"] .hg-rowlab:not([data-row="moksha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h8"]:hover) .hg-house[data-row="moksha"]:not([data-part="h8"]) .hg-cell,
.tw-teach[data-pin="h8"] .hg-house[data-row="moksha"]:not([data-part="h8"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h8"]:hover) .hg-house[data-row="moksha"]:not([data-part="h8"]) .hg-wedge,
.tw-teach[data-pin="h8"] .hg-house[data-row="moksha"]:not([data-part="h8"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h9"]:hover) .hg-house:not([data-row="dharma"]), .tw-teach:has([data-part="h9"]:hover) .hg-rowlab:not([data-row="dharma"]),
.tw-teach[data-pin="h9"] .hg-house:not([data-row="dharma"]), .tw-teach[data-pin="h9"] .hg-rowlab:not([data-row="dharma"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h9"]:hover) .hg-house[data-row="dharma"]:not([data-part="h9"]) .hg-cell,
.tw-teach[data-pin="h9"] .hg-house[data-row="dharma"]:not([data-part="h9"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h9"]:hover) .hg-house[data-row="dharma"]:not([data-part="h9"]) .hg-wedge,
.tw-teach[data-pin="h9"] .hg-house[data-row="dharma"]:not([data-part="h9"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h10"]:hover) .hg-house:not([data-row="artha"]), .tw-teach:has([data-part="h10"]:hover) .hg-rowlab:not([data-row="artha"]),
.tw-teach[data-pin="h10"] .hg-house:not([data-row="artha"]), .tw-teach[data-pin="h10"] .hg-rowlab:not([data-row="artha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h10"]:hover) .hg-house[data-row="artha"]:not([data-part="h10"]) .hg-cell,
.tw-teach[data-pin="h10"] .hg-house[data-row="artha"]:not([data-part="h10"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h10"]:hover) .hg-house[data-row="artha"]:not([data-part="h10"]) .hg-wedge,
.tw-teach[data-pin="h10"] .hg-house[data-row="artha"]:not([data-part="h10"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h11"]:hover) .hg-house:not([data-row="kama"]), .tw-teach:has([data-part="h11"]:hover) .hg-rowlab:not([data-row="kama"]),
.tw-teach[data-pin="h11"] .hg-house:not([data-row="kama"]), .tw-teach[data-pin="h11"] .hg-rowlab:not([data-row="kama"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h11"]:hover) .hg-house[data-row="kama"]:not([data-part="h11"]) .hg-cell,
.tw-teach[data-pin="h11"] .hg-house[data-row="kama"]:not([data-part="h11"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h11"]:hover) .hg-house[data-row="kama"]:not([data-part="h11"]) .hg-wedge,
.tw-teach[data-pin="h11"] .hg-house[data-row="kama"]:not([data-part="h11"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h12"]:hover) .hg-house:not([data-row="moksha"]), .tw-teach:has([data-part="h12"]:hover) .hg-rowlab:not([data-row="moksha"]),
.tw-teach[data-pin="h12"] .hg-house:not([data-row="moksha"]), .tw-teach[data-pin="h12"] .hg-rowlab:not([data-row="moksha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h12"]:hover) .hg-house[data-row="moksha"]:not([data-part="h12"]) .hg-cell,
.tw-teach[data-pin="h12"] .hg-house[data-row="moksha"]:not([data-part="h12"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="h12"]:hover) .hg-house[data-row="moksha"]:not([data-part="h12"]) .hg-wedge,
.tw-teach[data-pin="h12"] .hg-house[data-row="moksha"]:not([data-part="h12"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.hg-wrap{ position:relative; width:100%; } .hg-wrap > svg{ display:block; width:100%; height:auto; }
.hg-top{ position:absolute; display:flex; } .hg-top .cb-tools{ margin:0; width:100%; height:100%; } .hg-top .tw-mode{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding:2px 6px; }
.tw-teach:has([data-part="dharma"]:hover) .hg-svg .hw-wedge[data-row="dharma"],
.tw-teach[data-pin="dharma"] .hg-svg .hw-wedge[data-row="dharma"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="artha"]:hover) .hg-svg .hw-wedge[data-row="artha"],
.tw-teach[data-pin="artha"] .hg-svg .hw-wedge[data-row="artha"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="kama"]:hover) .hg-svg .hw-wedge[data-row="kama"],
.tw-teach[data-pin="kama"] .hg-svg .hw-wedge[data-row="kama"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="moksha"]:hover) .hg-svg .hw-wedge[data-row="moksha"],
.tw-teach[data-pin="moksha"] .hg-svg .hw-wedge[data-row="moksha"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="angular"]:hover) .hg-svg .hw-wedge[data-col="angular"],
.tw-teach[data-pin="angular"] .hg-svg .hw-wedge[data-col="angular"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="succedent"]:hover) .hg-svg .hw-wedge[data-col="succedent"],
.tw-teach[data-pin="succedent"] .hg-svg .hw-wedge[data-col="succedent"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="cadent"]:hover) .hg-svg .hw-wedge[data-col="cadent"],
.tw-teach[data-pin="cadent"] .hg-svg .hw-wedge[data-col="cadent"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="dharma"]:hover) .hg-svg .hw-tris, .tw-teach[data-pin="dharma"] .hg-svg .hw-tris{ display:inline; }
.tw-teach:has([data-part="dharma"]:hover) .hg-svg .hw-tri:not([data-row="dharma"]), .tw-teach[data-pin="dharma"] .hg-svg .hw-tri:not([data-row="dharma"]){ display:none; }
.tw-teach:has([data-part="artha"]:hover) .hg-svg .hw-tris, .tw-teach[data-pin="artha"] .hg-svg .hw-tris{ display:inline; }
.tw-teach:has([data-part="artha"]:hover) .hg-svg .hw-tri:not([data-row="artha"]), .tw-teach[data-pin="artha"] .hg-svg .hw-tri:not([data-row="artha"]){ display:none; }
.tw-teach:has([data-part="kama"]:hover) .hg-svg .hw-tris, .tw-teach[data-pin="kama"] .hg-svg .hw-tris{ display:inline; }
.tw-teach:has([data-part="kama"]:hover) .hg-svg .hw-tri:not([data-row="kama"]), .tw-teach[data-pin="kama"] .hg-svg .hw-tri:not([data-row="kama"]){ display:none; }
.tw-teach:has([data-part="moksha"]:hover) .hg-svg .hw-tris, .tw-teach[data-pin="moksha"] .hg-svg .hw-tris{ display:inline; }
.tw-teach:has([data-part="moksha"]:hover) .hg-svg .hw-tri:not([data-row="moksha"]), .tw-teach[data-pin="moksha"] .hg-svg .hw-tri:not([data-row="moksha"]){ display:none; }
.tw-teach:has([data-part="h1"]:hover) .hg-svg .hw-house:not([data-row="dharma"]),
.tw-teach[data-pin="h1"] .hg-svg .hw-house:not([data-row="dharma"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h1"]:hover) .hg-svg .hw-house[data-row="dharma"]:not([data-part="h1"]) .hw-wedge,
.tw-teach[data-pin="h1"] .hg-svg .hw-house[data-row="dharma"]:not([data-part="h1"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h2"]:hover) .hg-svg .hw-house:not([data-row="artha"]),
.tw-teach[data-pin="h2"] .hg-svg .hw-house:not([data-row="artha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h2"]:hover) .hg-svg .hw-house[data-row="artha"]:not([data-part="h2"]) .hw-wedge,
.tw-teach[data-pin="h2"] .hg-svg .hw-house[data-row="artha"]:not([data-part="h2"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h3"]:hover) .hg-svg .hw-house:not([data-row="kama"]),
.tw-teach[data-pin="h3"] .hg-svg .hw-house:not([data-row="kama"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h3"]:hover) .hg-svg .hw-house[data-row="kama"]:not([data-part="h3"]) .hw-wedge,
.tw-teach[data-pin="h3"] .hg-svg .hw-house[data-row="kama"]:not([data-part="h3"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h4"]:hover) .hg-svg .hw-house:not([data-row="moksha"]),
.tw-teach[data-pin="h4"] .hg-svg .hw-house:not([data-row="moksha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h4"]:hover) .hg-svg .hw-house[data-row="moksha"]:not([data-part="h4"]) .hw-wedge,
.tw-teach[data-pin="h4"] .hg-svg .hw-house[data-row="moksha"]:not([data-part="h4"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h5"]:hover) .hg-svg .hw-house:not([data-row="dharma"]),
.tw-teach[data-pin="h5"] .hg-svg .hw-house:not([data-row="dharma"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h5"]:hover) .hg-svg .hw-house[data-row="dharma"]:not([data-part="h5"]) .hw-wedge,
.tw-teach[data-pin="h5"] .hg-svg .hw-house[data-row="dharma"]:not([data-part="h5"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h6"]:hover) .hg-svg .hw-house:not([data-row="artha"]),
.tw-teach[data-pin="h6"] .hg-svg .hw-house:not([data-row="artha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h6"]:hover) .hg-svg .hw-house[data-row="artha"]:not([data-part="h6"]) .hw-wedge,
.tw-teach[data-pin="h6"] .hg-svg .hw-house[data-row="artha"]:not([data-part="h6"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h7"]:hover) .hg-svg .hw-house:not([data-row="kama"]),
.tw-teach[data-pin="h7"] .hg-svg .hw-house:not([data-row="kama"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h7"]:hover) .hg-svg .hw-house[data-row="kama"]:not([data-part="h7"]) .hw-wedge,
.tw-teach[data-pin="h7"] .hg-svg .hw-house[data-row="kama"]:not([data-part="h7"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h8"]:hover) .hg-svg .hw-house:not([data-row="moksha"]),
.tw-teach[data-pin="h8"] .hg-svg .hw-house:not([data-row="moksha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h8"]:hover) .hg-svg .hw-house[data-row="moksha"]:not([data-part="h8"]) .hw-wedge,
.tw-teach[data-pin="h8"] .hg-svg .hw-house[data-row="moksha"]:not([data-part="h8"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h9"]:hover) .hg-svg .hw-house:not([data-row="dharma"]),
.tw-teach[data-pin="h9"] .hg-svg .hw-house:not([data-row="dharma"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h9"]:hover) .hg-svg .hw-house[data-row="dharma"]:not([data-part="h9"]) .hw-wedge,
.tw-teach[data-pin="h9"] .hg-svg .hw-house[data-row="dharma"]:not([data-part="h9"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h10"]:hover) .hg-svg .hw-house:not([data-row="artha"]),
.tw-teach[data-pin="h10"] .hg-svg .hw-house:not([data-row="artha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h10"]:hover) .hg-svg .hw-house[data-row="artha"]:not([data-part="h10"]) .hw-wedge,
.tw-teach[data-pin="h10"] .hg-svg .hw-house[data-row="artha"]:not([data-part="h10"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h11"]:hover) .hg-svg .hw-house:not([data-row="kama"]),
.tw-teach[data-pin="h11"] .hg-svg .hw-house:not([data-row="kama"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h11"]:hover) .hg-svg .hw-house[data-row="kama"]:not([data-part="h11"]) .hw-wedge,
.tw-teach[data-pin="h11"] .hg-svg .hw-house[data-row="kama"]:not([data-part="h11"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="h12"]:hover) .hg-svg .hw-house:not([data-row="moksha"]),
.tw-teach[data-pin="h12"] .hg-svg .hw-house:not([data-row="moksha"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="h12"]:hover) .hg-svg .hw-house[data-row="moksha"]:not([data-part="h12"]) .hw-wedge,
.tw-teach[data-pin="h12"] .hg-svg .hw-house[data-row="moksha"]:not([data-part="h12"]) .hw-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.hg-svg .hw-top{ display:none; }
.tw-teach:has([data-part="s0"]:hover) .sg-sign .hg-cell[data-h="0"],
.tw-teach[data-pin="s0"] .sg-sign .hg-cell[data-h="0"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s0"]:hover) .sg-sign .hg-wedge[data-h="0"],
.tw-teach[data-pin="s0"] .sg-sign .hg-wedge[data-h="0"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s0"]:hover) .sg-sign:not([data-row="fire"]), .tw-teach:has([data-part="s0"]:hover) .sg-rowlab:not([data-row="fire"]),
.tw-teach[data-pin="s0"] .sg-sign:not([data-row="fire"]), .tw-teach[data-pin="s0"] .sg-rowlab:not([data-row="fire"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s0"]:hover) .sg-sign[data-row="fire"]:not([data-part="s0"]) .hg-cell,
.tw-teach[data-pin="s0"] .sg-sign[data-row="fire"]:not([data-part="s0"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s0"]:hover) .sg-sign[data-row="fire"]:not([data-part="s0"]) .hg-wedge,
.tw-teach[data-pin="s0"] .sg-sign[data-row="fire"]:not([data-part="s0"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s1"]:hover) .sg-sign .hg-cell[data-h="1"],
.tw-teach[data-pin="s1"] .sg-sign .hg-cell[data-h="1"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s1"]:hover) .sg-sign .hg-wedge[data-h="1"],
.tw-teach[data-pin="s1"] .sg-sign .hg-wedge[data-h="1"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s1"]:hover) .sg-sign:not([data-row="earth"]), .tw-teach:has([data-part="s1"]:hover) .sg-rowlab:not([data-row="earth"]),
.tw-teach[data-pin="s1"] .sg-sign:not([data-row="earth"]), .tw-teach[data-pin="s1"] .sg-rowlab:not([data-row="earth"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s1"]:hover) .sg-sign[data-row="earth"]:not([data-part="s1"]) .hg-cell,
.tw-teach[data-pin="s1"] .sg-sign[data-row="earth"]:not([data-part="s1"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s1"]:hover) .sg-sign[data-row="earth"]:not([data-part="s1"]) .hg-wedge,
.tw-teach[data-pin="s1"] .sg-sign[data-row="earth"]:not([data-part="s1"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s2"]:hover) .sg-sign .hg-cell[data-h="2"],
.tw-teach[data-pin="s2"] .sg-sign .hg-cell[data-h="2"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s2"]:hover) .sg-sign .hg-wedge[data-h="2"],
.tw-teach[data-pin="s2"] .sg-sign .hg-wedge[data-h="2"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s2"]:hover) .sg-sign:not([data-row="air"]), .tw-teach:has([data-part="s2"]:hover) .sg-rowlab:not([data-row="air"]),
.tw-teach[data-pin="s2"] .sg-sign:not([data-row="air"]), .tw-teach[data-pin="s2"] .sg-rowlab:not([data-row="air"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s2"]:hover) .sg-sign[data-row="air"]:not([data-part="s2"]) .hg-cell,
.tw-teach[data-pin="s2"] .sg-sign[data-row="air"]:not([data-part="s2"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s2"]:hover) .sg-sign[data-row="air"]:not([data-part="s2"]) .hg-wedge,
.tw-teach[data-pin="s2"] .sg-sign[data-row="air"]:not([data-part="s2"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s3"]:hover) .sg-sign .hg-cell[data-h="3"],
.tw-teach[data-pin="s3"] .sg-sign .hg-cell[data-h="3"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s3"]:hover) .sg-sign .hg-wedge[data-h="3"],
.tw-teach[data-pin="s3"] .sg-sign .hg-wedge[data-h="3"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s3"]:hover) .sg-sign:not([data-row="water"]), .tw-teach:has([data-part="s3"]:hover) .sg-rowlab:not([data-row="water"]),
.tw-teach[data-pin="s3"] .sg-sign:not([data-row="water"]), .tw-teach[data-pin="s3"] .sg-rowlab:not([data-row="water"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s3"]:hover) .sg-sign[data-row="water"]:not([data-part="s3"]) .hg-cell,
.tw-teach[data-pin="s3"] .sg-sign[data-row="water"]:not([data-part="s3"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s3"]:hover) .sg-sign[data-row="water"]:not([data-part="s3"]) .hg-wedge,
.tw-teach[data-pin="s3"] .sg-sign[data-row="water"]:not([data-part="s3"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s4"]:hover) .sg-sign .hg-cell[data-h="4"],
.tw-teach[data-pin="s4"] .sg-sign .hg-cell[data-h="4"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s4"]:hover) .sg-sign .hg-wedge[data-h="4"],
.tw-teach[data-pin="s4"] .sg-sign .hg-wedge[data-h="4"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s4"]:hover) .sg-sign:not([data-row="fire"]), .tw-teach:has([data-part="s4"]:hover) .sg-rowlab:not([data-row="fire"]),
.tw-teach[data-pin="s4"] .sg-sign:not([data-row="fire"]), .tw-teach[data-pin="s4"] .sg-rowlab:not([data-row="fire"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s4"]:hover) .sg-sign[data-row="fire"]:not([data-part="s4"]) .hg-cell,
.tw-teach[data-pin="s4"] .sg-sign[data-row="fire"]:not([data-part="s4"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s4"]:hover) .sg-sign[data-row="fire"]:not([data-part="s4"]) .hg-wedge,
.tw-teach[data-pin="s4"] .sg-sign[data-row="fire"]:not([data-part="s4"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s5"]:hover) .sg-sign .hg-cell[data-h="5"],
.tw-teach[data-pin="s5"] .sg-sign .hg-cell[data-h="5"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s5"]:hover) .sg-sign .hg-wedge[data-h="5"],
.tw-teach[data-pin="s5"] .sg-sign .hg-wedge[data-h="5"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s5"]:hover) .sg-sign:not([data-row="earth"]), .tw-teach:has([data-part="s5"]:hover) .sg-rowlab:not([data-row="earth"]),
.tw-teach[data-pin="s5"] .sg-sign:not([data-row="earth"]), .tw-teach[data-pin="s5"] .sg-rowlab:not([data-row="earth"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s5"]:hover) .sg-sign[data-row="earth"]:not([data-part="s5"]) .hg-cell,
.tw-teach[data-pin="s5"] .sg-sign[data-row="earth"]:not([data-part="s5"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s5"]:hover) .sg-sign[data-row="earth"]:not([data-part="s5"]) .hg-wedge,
.tw-teach[data-pin="s5"] .sg-sign[data-row="earth"]:not([data-part="s5"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s6"]:hover) .sg-sign .hg-cell[data-h="6"],
.tw-teach[data-pin="s6"] .sg-sign .hg-cell[data-h="6"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s6"]:hover) .sg-sign .hg-wedge[data-h="6"],
.tw-teach[data-pin="s6"] .sg-sign .hg-wedge[data-h="6"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s6"]:hover) .sg-sign:not([data-row="air"]), .tw-teach:has([data-part="s6"]:hover) .sg-rowlab:not([data-row="air"]),
.tw-teach[data-pin="s6"] .sg-sign:not([data-row="air"]), .tw-teach[data-pin="s6"] .sg-rowlab:not([data-row="air"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s6"]:hover) .sg-sign[data-row="air"]:not([data-part="s6"]) .hg-cell,
.tw-teach[data-pin="s6"] .sg-sign[data-row="air"]:not([data-part="s6"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s6"]:hover) .sg-sign[data-row="air"]:not([data-part="s6"]) .hg-wedge,
.tw-teach[data-pin="s6"] .sg-sign[data-row="air"]:not([data-part="s6"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s7"]:hover) .sg-sign .hg-cell[data-h="7"],
.tw-teach[data-pin="s7"] .sg-sign .hg-cell[data-h="7"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s7"]:hover) .sg-sign .hg-wedge[data-h="7"],
.tw-teach[data-pin="s7"] .sg-sign .hg-wedge[data-h="7"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s7"]:hover) .sg-sign:not([data-row="water"]), .tw-teach:has([data-part="s7"]:hover) .sg-rowlab:not([data-row="water"]),
.tw-teach[data-pin="s7"] .sg-sign:not([data-row="water"]), .tw-teach[data-pin="s7"] .sg-rowlab:not([data-row="water"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s7"]:hover) .sg-sign[data-row="water"]:not([data-part="s7"]) .hg-cell,
.tw-teach[data-pin="s7"] .sg-sign[data-row="water"]:not([data-part="s7"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s7"]:hover) .sg-sign[data-row="water"]:not([data-part="s7"]) .hg-wedge,
.tw-teach[data-pin="s7"] .sg-sign[data-row="water"]:not([data-part="s7"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s8"]:hover) .sg-sign .hg-cell[data-h="8"],
.tw-teach[data-pin="s8"] .sg-sign .hg-cell[data-h="8"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s8"]:hover) .sg-sign .hg-wedge[data-h="8"],
.tw-teach[data-pin="s8"] .sg-sign .hg-wedge[data-h="8"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s8"]:hover) .sg-sign:not([data-row="fire"]), .tw-teach:has([data-part="s8"]:hover) .sg-rowlab:not([data-row="fire"]),
.tw-teach[data-pin="s8"] .sg-sign:not([data-row="fire"]), .tw-teach[data-pin="s8"] .sg-rowlab:not([data-row="fire"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s8"]:hover) .sg-sign[data-row="fire"]:not([data-part="s8"]) .hg-cell,
.tw-teach[data-pin="s8"] .sg-sign[data-row="fire"]:not([data-part="s8"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s8"]:hover) .sg-sign[data-row="fire"]:not([data-part="s8"]) .hg-wedge,
.tw-teach[data-pin="s8"] .sg-sign[data-row="fire"]:not([data-part="s8"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s9"]:hover) .sg-sign .hg-cell[data-h="9"],
.tw-teach[data-pin="s9"] .sg-sign .hg-cell[data-h="9"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s9"]:hover) .sg-sign .hg-wedge[data-h="9"],
.tw-teach[data-pin="s9"] .sg-sign .hg-wedge[data-h="9"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s9"]:hover) .sg-sign:not([data-row="earth"]), .tw-teach:has([data-part="s9"]:hover) .sg-rowlab:not([data-row="earth"]),
.tw-teach[data-pin="s9"] .sg-sign:not([data-row="earth"]), .tw-teach[data-pin="s9"] .sg-rowlab:not([data-row="earth"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s9"]:hover) .sg-sign[data-row="earth"]:not([data-part="s9"]) .hg-cell,
.tw-teach[data-pin="s9"] .sg-sign[data-row="earth"]:not([data-part="s9"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s9"]:hover) .sg-sign[data-row="earth"]:not([data-part="s9"]) .hg-wedge,
.tw-teach[data-pin="s9"] .sg-sign[data-row="earth"]:not([data-part="s9"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s10"]:hover) .sg-sign .hg-cell[data-h="10"],
.tw-teach[data-pin="s10"] .sg-sign .hg-cell[data-h="10"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s10"]:hover) .sg-sign .hg-wedge[data-h="10"],
.tw-teach[data-pin="s10"] .sg-sign .hg-wedge[data-h="10"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s10"]:hover) .sg-sign:not([data-row="air"]), .tw-teach:has([data-part="s10"]:hover) .sg-rowlab:not([data-row="air"]),
.tw-teach[data-pin="s10"] .sg-sign:not([data-row="air"]), .tw-teach[data-pin="s10"] .sg-rowlab:not([data-row="air"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s10"]:hover) .sg-sign[data-row="air"]:not([data-part="s10"]) .hg-cell,
.tw-teach[data-pin="s10"] .sg-sign[data-row="air"]:not([data-part="s10"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s10"]:hover) .sg-sign[data-row="air"]:not([data-part="s10"]) .hg-wedge,
.tw-teach[data-pin="s10"] .sg-sign[data-row="air"]:not([data-part="s10"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="s11"]:hover) .sg-sign .hg-cell[data-h="11"],
.tw-teach[data-pin="s11"] .sg-sign .hg-cell[data-h="11"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="s11"]:hover) .sg-sign .hg-wedge[data-h="11"],
.tw-teach[data-pin="s11"] .sg-sign .hg-wedge[data-h="11"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="s11"]:hover) .sg-sign:not([data-row="water"]), .tw-teach:has([data-part="s11"]:hover) .sg-rowlab:not([data-row="water"]),
.tw-teach[data-pin="s11"] .sg-sign:not([data-row="water"]), .tw-teach[data-pin="s11"] .sg-rowlab:not([data-row="water"]){ filter:grayscale(1) brightness(.55); }
.tw-teach:has([data-part="s11"]:hover) .sg-sign[data-row="water"]:not([data-part="s11"]) .hg-cell,
.tw-teach[data-pin="s11"] .sg-sign[data-row="water"]:not([data-part="s11"]) .hg-cell{ stroke:#f7cf62; stroke-width:3; stroke-opacity:.5; }
.tw-teach:has([data-part="s11"]:hover) .sg-sign[data-row="water"]:not([data-part="s11"]) .hg-wedge,
.tw-teach[data-pin="s11"] .sg-sign[data-row="water"]:not([data-part="s11"]) .hg-wedge{ fill-opacity:.7; stroke:#f7cf62; stroke-opacity:.5; stroke-width:2; }
.tw-teach:has([data-part="fire"]:hover) .sg-sign .hg-cell[data-row="fire"],
.tw-teach[data-pin="fire"] .sg-sign .hg-cell[data-row="fire"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="fire"]:hover) .sg-sign .hg-wedge[data-row="fire"],
.tw-teach[data-pin="fire"] .sg-sign .hg-wedge[data-row="fire"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="fire"]:hover) .sg-tri[data-row="fire"],
.tw-teach[data-pin="fire"] .sg-tri[data-row="fire"]{ opacity:1; }
.tw-teach:has([data-part="fire"]:hover) .sg-rowlab[data-row="fire"] .hg-lab,
.tw-teach[data-pin="fire"] .sg-rowlab[data-row="fire"] .hg-lab{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="earth"]:hover) .sg-sign .hg-cell[data-row="earth"],
.tw-teach[data-pin="earth"] .sg-sign .hg-cell[data-row="earth"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="earth"]:hover) .sg-sign .hg-wedge[data-row="earth"],
.tw-teach[data-pin="earth"] .sg-sign .hg-wedge[data-row="earth"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="earth"]:hover) .sg-tri[data-row="earth"],
.tw-teach[data-pin="earth"] .sg-tri[data-row="earth"]{ opacity:1; }
.tw-teach:has([data-part="earth"]:hover) .sg-rowlab[data-row="earth"] .hg-lab,
.tw-teach[data-pin="earth"] .sg-rowlab[data-row="earth"] .hg-lab{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="air"]:hover) .sg-sign .hg-cell[data-row="air"],
.tw-teach[data-pin="air"] .sg-sign .hg-cell[data-row="air"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="air"]:hover) .sg-sign .hg-wedge[data-row="air"],
.tw-teach[data-pin="air"] .sg-sign .hg-wedge[data-row="air"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="air"]:hover) .sg-tri[data-row="air"],
.tw-teach[data-pin="air"] .sg-tri[data-row="air"]{ opacity:1; }
.tw-teach:has([data-part="air"]:hover) .sg-rowlab[data-row="air"] .hg-lab,
.tw-teach[data-pin="air"] .sg-rowlab[data-row="air"] .hg-lab{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="water"]:hover) .sg-sign .hg-cell[data-row="water"],
.tw-teach[data-pin="water"] .sg-sign .hg-cell[data-row="water"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="water"]:hover) .sg-sign .hg-wedge[data-row="water"],
.tw-teach[data-pin="water"] .sg-sign .hg-wedge[data-row="water"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="water"]:hover) .sg-tri[data-row="water"],
.tw-teach[data-pin="water"] .sg-tri[data-row="water"]{ opacity:1; }
.tw-teach:has([data-part="water"]:hover) .sg-rowlab[data-row="water"] .hg-lab,
.tw-teach[data-pin="water"] .sg-rowlab[data-row="water"] .hg-lab{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="cardinal"]:hover) .sg-sign .hg-cell[data-col="cardinal"],
.tw-teach[data-pin="cardinal"] .sg-sign .hg-cell[data-col="cardinal"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="cardinal"]:hover) .sg-sign .hg-wedge[data-col="cardinal"],
.tw-teach[data-pin="cardinal"] .sg-sign .hg-wedge[data-col="cardinal"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="fixed"]:hover) .sg-sign .hg-cell[data-col="fixed"],
.tw-teach[data-pin="fixed"] .sg-sign .hg-cell[data-col="fixed"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="fixed"]:hover) .sg-sign .hg-wedge[data-col="fixed"],
.tw-teach[data-pin="fixed"] .sg-sign .hg-wedge[data-col="fixed"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.tw-teach:has([data-part="mutable"]:hover) .sg-sign .hg-cell[data-col="mutable"],
.tw-teach[data-pin="mutable"] .sg-sign .hg-cell[data-col="mutable"]{ stroke:#f7cf62; stroke-width:5; }
.tw-teach:has([data-part="mutable"]:hover) .sg-sign .hg-wedge[data-col="mutable"],
.tw-teach[data-pin="mutable"] .sg-sign .hg-wedge[data-col="mutable"]{ fill-opacity:.9; stroke:#f7cf62; stroke-opacity:1; stroke-width:3; }
.sg-tri{ opacity:0; } .tw-teach[data-show~="sgtri"] .sg-tri{ opacity:1; } .sg-tris{ pointer-events:none; }
.tw-teach[data-show~="sgtri"] .sg-seasons{ opacity:0; }
.sg-sign, .sg-rowlab, .sg-col{ cursor:pointer; }
.pq-fill, .pq-name, .pq-more, .pq-pairs{ opacity:0; } .pq-qm{ opacity:1; }
.tw-teach[data-tool="punnett"] [data-toggle="name"]{ display:none !important; } .pq-box{ cursor:pointer; } .tw-teach[data-tool="punnett"] .tw-modes [data-toggle="pair"]{ flex:1 1 100%; max-width:none; padding:.6em .8em; } .tw-teach[data-tool="punnett"] .tw-modes [data-toggle="pair"] b{ font-size:clamp(15px, 2.3vh, 26px) !important; } .tw-teach[data-tool="punnett"] .tw-modes [data-toggle="pair"] small{ font-size:clamp(11px, 1.6vh, 17px) !important; }
.tw-teach[data-show~="name"] .pq-more, .tw-teach[data-show~="pair"] .pq-more{ opacity:1; }
.tw-teach .pq-notes p.pq-src{ font-size:.72em; opacity:.6; margin-top:.8em; }
.tw-teach[data-show~="name"] .pq-fill, .tw-teach[data-show~="pair"] .pq-fill, .tw-teach[data-show~="name"] .pq-name, .tw-teach[data-show~="pair"] .pq-name{ opacity:1; } .tw-teach[data-show~="name"] .pq-qm, .tw-teach[data-show~="pair"] .pq-qm{ opacity:0; }
.tw-teach[data-show~="pair"] .pq-pairs{ opacity:1; }
.pq-sec{ display:none; } .pq-sec--blank{ display:block; } .tw-teach[data-show~="name"] .pq-sec--blank, .tw-teach[data-show~="pair"] .pq-sec--blank{ display:none; } .tw-teach[data-show~="name"] .pq-sec--name, .tw-teach[data-show~="pair"] .pq-sec--pair{ display:block; }
.pq-notes{ margin:6px 0 0; color:#e7dcc6; } .tw-teach .pq-notes p{ margin:0 0 .5em; line-height:1.3; } .tw-teach .pq-notes p.pq-head{ margin:.3em 0 .45em; color:#f0459a; font-weight:700; } .pq-note i{ display:inline-block; width:.8em; height:.8em; border-radius:3px; margin-right:.4em; vertical-align:-.05em; } .pq-note span{ opacity:.85; } .pq-ask{ font-style:italic; opacity:.85; }
.pq-note b{ color:#fad761; font-weight:700; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .tw-teach .pq-note b{ background-image:linear-gradient(100deg, #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec); background-size:300% 100%; background-repeat:repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:tw-rainbow 24s linear infinite; } }
@media (prefers-reduced-motion:reduce){ .tw-teach .pq-note b{ animation:none; } }
.tw-teach:has([data-part="q-hot"]:hover) .pq-note[data-k="q-hot"], .tw-teach[data-pin="q-hot"] .pq-note[data-k="q-hot"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="q-hot"]:hover) .pq-box[data-q1="hot"] .pq-cell, .tw-teach:has([data-part="q-hot"]:hover) .pq-box[data-q2="hot"] .pq-cell, .tw-teach[data-pin="q-hot"] .pq-box[data-q1="hot"] .pq-cell, .tw-teach[data-pin="q-hot"] .pq-box[data-q2="hot"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="q-cold"]:hover) .pq-note[data-k="q-cold"], .tw-teach[data-pin="q-cold"] .pq-note[data-k="q-cold"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="q-cold"]:hover) .pq-box[data-q1="cold"] .pq-cell, .tw-teach:has([data-part="q-cold"]:hover) .pq-box[data-q2="cold"] .pq-cell, .tw-teach[data-pin="q-cold"] .pq-box[data-q1="cold"] .pq-cell, .tw-teach[data-pin="q-cold"] .pq-box[data-q2="cold"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="q-dry"]:hover) .pq-note[data-k="q-dry"], .tw-teach[data-pin="q-dry"] .pq-note[data-k="q-dry"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="q-dry"]:hover) .pq-box[data-q1="dry"] .pq-cell, .tw-teach:has([data-part="q-dry"]:hover) .pq-box[data-q2="dry"] .pq-cell, .tw-teach[data-pin="q-dry"] .pq-box[data-q1="dry"] .pq-cell, .tw-teach[data-pin="q-dry"] .pq-box[data-q2="dry"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="q-wet"]:hover) .pq-note[data-k="q-wet"], .tw-teach[data-pin="q-wet"] .pq-note[data-k="q-wet"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="q-wet"]:hover) .pq-box[data-q1="wet"] .pq-cell, .tw-teach:has([data-part="q-wet"]:hover) .pq-box[data-q2="wet"] .pq-cell, .tw-teach[data-pin="q-wet"] .pq-box[data-q1="wet"] .pq-cell, .tw-teach[data-pin="q-wet"] .pq-box[data-q2="wet"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="e-fire"]:hover) .pq-note[data-k="e-fire"], .tw-teach[data-pin="e-fire"] .pq-note[data-k="e-fire"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="e-fire"]:hover) .pq-box[data-part="e-fire"] .pq-cell, .tw-teach[data-pin="e-fire"] .pq-box[data-part="e-fire"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="e-fire"]:hover) .pq-qw[data-q="hot"], .tw-teach:has([data-part="e-fire"]:hover) .pq-qw[data-q="dry"], .tw-teach[data-pin="e-fire"] .pq-qw[data-q="hot"], .tw-teach[data-pin="e-fire"] .pq-qw[data-q="dry"]{ stroke:#f7cf62; }
.tw-teach:has([data-part="e-earth"]:hover) .pq-note[data-k="e-earth"], .tw-teach[data-pin="e-earth"] .pq-note[data-k="e-earth"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="e-earth"]:hover) .pq-box[data-part="e-earth"] .pq-cell, .tw-teach[data-pin="e-earth"] .pq-box[data-part="e-earth"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="e-earth"]:hover) .pq-qw[data-q="cold"], .tw-teach:has([data-part="e-earth"]:hover) .pq-qw[data-q="dry"], .tw-teach[data-pin="e-earth"] .pq-qw[data-q="cold"], .tw-teach[data-pin="e-earth"] .pq-qw[data-q="dry"]{ stroke:#f7cf62; }
.tw-teach:has([data-part="e-air"]:hover) .pq-note[data-k="e-air"], .tw-teach[data-pin="e-air"] .pq-note[data-k="e-air"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="e-air"]:hover) .pq-box[data-part="e-air"] .pq-cell, .tw-teach[data-pin="e-air"] .pq-box[data-part="e-air"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="e-air"]:hover) .pq-qw[data-q="hot"], .tw-teach:has([data-part="e-air"]:hover) .pq-qw[data-q="wet"], .tw-teach[data-pin="e-air"] .pq-qw[data-q="hot"], .tw-teach[data-pin="e-air"] .pq-qw[data-q="wet"]{ stroke:#f7cf62; }
.tw-teach:has([data-part="e-water"]:hover) .pq-note[data-k="e-water"], .tw-teach[data-pin="e-water"] .pq-note[data-k="e-water"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="e-water"]:hover) .pq-box[data-part="e-water"] .pq-cell, .tw-teach[data-pin="e-water"] .pq-box[data-part="e-water"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="e-water"]:hover) .pq-qw[data-q="cold"], .tw-teach:has([data-part="e-water"]:hover) .pq-qw[data-q="wet"], .tw-teach[data-pin="e-water"] .pq-qw[data-q="cold"], .tw-teach[data-pin="e-water"] .pq-qw[data-q="wet"]{ stroke:#f7cf62; }
.tw-teach:has([data-part="p-fire-air"]:hover) .pq-note[data-k="p-fire-air"], .tw-teach[data-pin="p-fire-air"] .pq-note[data-k="p-fire-air"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="p-fire-air"]:hover) .pq-box[data-e="fire"] .pq-cell, .tw-teach:has([data-part="p-fire-air"]:hover) .pq-box[data-e="air"] .pq-cell, .tw-teach[data-pin="p-fire-air"] .pq-box[data-e="fire"] .pq-cell, .tw-teach[data-pin="p-fire-air"] .pq-box[data-e="air"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="p-fire-air"]:hover) .pq-pair:not([data-part="p-fire-air"]), .tw-teach[data-pin="p-fire-air"] .pq-pair:not([data-part="p-fire-air"]){ opacity:.3; }
.tw-teach:has([data-part="p-earth-water"]:hover) .pq-note[data-k="p-earth-water"], .tw-teach[data-pin="p-earth-water"] .pq-note[data-k="p-earth-water"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="p-earth-water"]:hover) .pq-box[data-e="earth"] .pq-cell, .tw-teach:has([data-part="p-earth-water"]:hover) .pq-box[data-e="water"] .pq-cell, .tw-teach[data-pin="p-earth-water"] .pq-box[data-e="earth"] .pq-cell, .tw-teach[data-pin="p-earth-water"] .pq-box[data-e="water"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="p-earth-water"]:hover) .pq-pair:not([data-part="p-earth-water"]), .tw-teach[data-pin="p-earth-water"] .pq-pair:not([data-part="p-earth-water"]){ opacity:.3; }
.tw-teach:has([data-part="p-fire-earth"]:hover) .pq-note[data-k="p-fire-earth"], .tw-teach[data-pin="p-fire-earth"] .pq-note[data-k="p-fire-earth"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="p-fire-earth"]:hover) .pq-box[data-e="fire"] .pq-cell, .tw-teach:has([data-part="p-fire-earth"]:hover) .pq-box[data-e="earth"] .pq-cell, .tw-teach[data-pin="p-fire-earth"] .pq-box[data-e="fire"] .pq-cell, .tw-teach[data-pin="p-fire-earth"] .pq-box[data-e="earth"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="p-fire-earth"]:hover) .pq-pair:not([data-part="p-fire-earth"]), .tw-teach[data-pin="p-fire-earth"] .pq-pair:not([data-part="p-fire-earth"]){ opacity:.3; }
.tw-teach:has([data-part="p-air-water"]:hover) .pq-note[data-k="p-air-water"], .tw-teach[data-pin="p-air-water"] .pq-note[data-k="p-air-water"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="p-air-water"]:hover) .pq-box[data-e="air"] .pq-cell, .tw-teach:has([data-part="p-air-water"]:hover) .pq-box[data-e="water"] .pq-cell, .tw-teach[data-pin="p-air-water"] .pq-box[data-e="air"] .pq-cell, .tw-teach[data-pin="p-air-water"] .pq-box[data-e="water"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="p-air-water"]:hover) .pq-pair:not([data-part="p-air-water"]), .tw-teach[data-pin="p-air-water"] .pq-pair:not([data-part="p-air-water"]){ opacity:.3; }
.tw-teach:has([data-part="p-fire-water"]:hover) .pq-note[data-k="p-fire-water"], .tw-teach[data-pin="p-fire-water"] .pq-note[data-k="p-fire-water"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="p-fire-water"]:hover) .pq-box[data-e="fire"] .pq-cell, .tw-teach:has([data-part="p-fire-water"]:hover) .pq-box[data-e="water"] .pq-cell, .tw-teach[data-pin="p-fire-water"] .pq-box[data-e="fire"] .pq-cell, .tw-teach[data-pin="p-fire-water"] .pq-box[data-e="water"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="p-fire-water"]:hover) .pq-pair:not([data-part="p-fire-water"]), .tw-teach[data-pin="p-fire-water"] .pq-pair:not([data-part="p-fire-water"]){ opacity:.3; }
.tw-teach:has([data-part="p-earth-air"]:hover) .pq-note[data-k="p-earth-air"], .tw-teach[data-pin="p-earth-air"] .pq-note[data-k="p-earth-air"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="p-earth-air"]:hover) .pq-box[data-e="earth"] .pq-cell, .tw-teach:has([data-part="p-earth-air"]:hover) .pq-box[data-e="air"] .pq-cell, .tw-teach[data-pin="p-earth-air"] .pq-box[data-e="earth"] .pq-cell, .tw-teach[data-pin="p-earth-air"] .pq-box[data-e="air"] .pq-cell{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="p-earth-air"]:hover) .pq-pair:not([data-part="p-earth-air"]), .tw-teach[data-pin="p-earth-air"] .pq-pair:not([data-part="p-earth-air"]){ opacity:.3; }
.pq-box, .pq-qual, .pq-pair{ cursor:pointer; }
.mo-notes{ margin:6px 0 0; color:#e7dcc6; } .tw-teach .mo-notes p{ margin:0 0 .5em; line-height:1.3; } .tw-teach .mo-notes p.mo-head{ margin:.6em 0 .35em; color:#f0459a; font-weight:700; } .mo-note--day b{ color:#8fa8ff; } .mo-note--step b{ color:#f08aa8; } .mo-round b{ color:#fad761; } .mo-rounds{ display:grid; grid-template-columns:1fr 1fr; column-gap:.6em; } .tw-teach .mo-notes .mo-rounds p{ margin:0 0 .3em; } .tw-teach .mo-notes .mo-rounds p:last-child:nth-child(odd){ grid-column:1 / -1; } .mo-note{ padding:.25em .45em; border-radius:6px; } .tw-teach .mo-notes p.mo-src{ font-style:italic; opacity:.8; }
.tw-teach[data-show~="day"] .mo-note--day{ background:rgba(91,127,224,.22); box-shadow:0 0 0 2px #5b7fe0; } .tw-teach[data-show~="step"] .mo-note--step{ background:rgba(240,138,168,.18); box-shadow:0 0 0 2px #f08aa8; }
.tw-teach:has([data-part="b-moon"]:hover) .mo-round[data-k="b-moon"], .tw-teach[data-pin="b-moon"] .mo-round[data-k="b-moon"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="b-sun"]:hover) .mo-round[data-k="b-sun"], .tw-teach[data-pin="b-sun"] .mo-round[data-k="b-sun"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="b-mercury"]:hover) .mo-round[data-k="b-mercury"], .tw-teach[data-pin="b-mercury"] .mo-round[data-k="b-mercury"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="b-venus"]:hover) .mo-round[data-k="b-venus"], .tw-teach[data-pin="b-venus"] .mo-round[data-k="b-venus"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="b-mars"]:hover) .mo-round[data-k="b-mars"], .tw-teach[data-pin="b-mars"] .mo-round[data-k="b-mars"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="b-jupiter"]:hover) .mo-round[data-k="b-jupiter"], .tw-teach[data-pin="b-jupiter"] .mo-round[data-k="b-jupiter"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="b-saturn"]:hover) .mo-round[data-k="b-saturn"], .tw-teach[data-pin="b-saturn"] .mo-round[data-k="b-saturn"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.mo-body{ cursor:pointer; } .mo-body image, .mo-zg{ image-rendering:pixelated; }
.mo-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 10px; } .mo-btn{ flex:0 0 auto; padding:.45em 1.1em; border-radius:999px; border:2px solid #c9a24e; background:#fffdf6; color:#a33f86; font-family:basiic, monospace; font-size:15px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; line-height:1.2; white-space:nowrap; } .mo-btn[aria-pressed="true"]{ background:#be4d68; border-color:#be4d68; color:#fffdf6; } .mo-btn--play{ background:#7a6cb8; border-color:#7a6cb8; color:#fffdf6; } .dk-player{ position:relative; margin:12px 0 10px; padding:14px 8px 2px; border:2px dashed #9fb8f5; border-radius:10px; background:rgba(111,147,240,.08); } .dk-player-tag{ position:absolute; top:-9px; left:10px; padding:0 .5em; background:#2c1820; font-family:Minecraft, monospace; font-size:11px; line-height:16px; letter-spacing:1px; text-transform:uppercase; color:#9fb8f5; } .dk-player .mo-btns{ margin-bottom:8px; } .dk-player > :last-child{ margin-bottom:6px; } .mo-pairplay .dk-player{ max-width:460px; margin:18px auto 0; } .dk-player-tag{ border-radius:4px; } .dk-player{ min-width:0; box-sizing:border-box; max-width:100%; } .tw-ctl{ min-width:0; } .dk-player .rx-speed{ white-space:normal; min-width:0; line-height:1.15; } .mo-btn--play[aria-pressed="true"]{ background:#5A3268; border-color:#5A3268; } .tw-teach[data-driver="motions"] .tw-deg{ display:none; } .mo-btns--moments{ display:grid; grid-template-columns:1fr 1fr; } .mo-btns--moments .mo-btn{ width:100%; }
.mo-notes--s .mo-rounds{ grid-template-columns:1fr; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .tw-teach .mo-notes--s b{ background-image:linear-gradient(100deg, #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec); background-size:300% 100%; background-repeat:repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:tw-rainbow 24s linear infinite; } }
@media (prefers-reduced-motion:reduce){ .tw-teach .mo-notes--s b{ animation:none; } }
.sc-moments{ grid-template-columns:repeat(4, 1fr); gap:5px; } .sc-moments .mo-btn{ padding:.4em .2em; font-size:12px; letter-spacing:.3px; } .tw-teach .sc-row, .tw-teach .sc-merc, .tw-teach .sc-team p{ font-size:clamp(11px, 1.55vh, 17px); } .sc-row img, .sc-merc img{ width:16px; height:16px; } 
.sc-rosters{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 6px; } .sc-team{ padding:6px 8px 4px; border-radius:9px; border:2px dashed var(--tc); opacity:.92; } .tw-teach[data-sect="day"] .sc-team--day, .tw-teach[data-sect="night"] .sc-team--night{ border-style:solid; box-shadow:0 0 0 2px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 45%, transparent); opacity:1; } .tw-teach .sc-team p{ margin:0 0 3px; } .sc-team-h{ font-family:nes, monospace; font-size:.95em; color:var(--tc); letter-spacing:.5px; } .tw-teach .sc-row, .tw-teach .sc-merc{ display:flex; align-items:center; gap:.35em; margin:0 0 2px; color:#fdf8ee; } .sc-row img, .sc-merc img{ image-rendering:pixelated; } .sc-row b, .sc-merc b{ font-weight:400; } .sc-row small{ font-family:basiic, monospace; font-size:.7em; color:#cfc6e8; } .sc-tag{ margin-left:auto; font-family:Minecraft, monospace; font-size:.8em; } .sc-tag[data-at="home"]{ color:#fad761; } .sc-tag[data-at="away"]{ color:#9aa3c8; } .sc-mbox{ margin:2px 0 8px; padding:6px 8px; border:2px solid #b0aef0; border-radius:9px; background:rgba(52,50,252,.12); } .tw-teach .sc-mbox-h{ display:flex; align-items:center; gap:.35em; margin:0 0 2px; color:#fdf8ee; font-size:clamp(11px, 1.55vh, 17px); } .sc-mbox-h b{ font-weight:400; } .sc-mbox-h small{ font-family:basiic, monospace; font-size:.7em; color:#cfc6e8; } .sc-mbox-h img{ width:16px; height:16px; image-rendering:pixelated; } .sc-msv{ display:block; width:100%; height:auto; max-height:7.5vh; } .tw-teach .sc-mnote{ margin:0 0 6px; color:#cfc6e8; font-size:clamp(10px, 1.35vh, 15px); line-height:1.3; } .sc-mlab{ font-family:Minecraft, monospace; letter-spacing:.4px; } .tw-teach .sc-merc-now{ margin:2px 0 4px; text-align:center; color:#fdf8ee; font-size:clamp(10px, 1.4vh, 15px); font-family:Minecraft, monospace; } .sc-mbtns{ grid-template-columns:repeat(3, 1fr); gap:5px; } .sc-mbtns .mo-btn{ padding:.35em .2em; font-size:12px; } .sc-note b{ color:#f0459a; font-weight:400; } .tw-teach .sc-notes p{ margin:0 0 .55em; line-height:1.32; } .sc-note--why{ display:none; } .tw-teach[data-show~="why"] .sc-note--why{ display:block; } .tw-teach[data-show~="why"] .sc-note--what{ display:none; } .sc-src i{ color:inherit; } .sc-q{ font-style:normal; color:var(--q); } .tw-teach .sc-notes p.sc-src{ font-style:italic; opacity:.8; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .tw-teach .sc-note b{ background-image:linear-gradient(100deg, #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec); background-size:300% 100%; background-repeat:repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:tw-rainbow 24s linear infinite; } }
@media (prefers-reduced-motion:reduce){ .tw-teach .sc-note b{ animation:none; } }
.fr-h{ fill:#fff; fill-opacity:0; cursor:pointer; } .fr-h[data-on="sel"]{ fill:#fad761; fill-opacity:.22; stroke:#fad761; stroke-width:3; } .fr-h[data-on="link"]{ fill:#fad761; fill-opacity:.09; stroke:#fad761; stroke-width:2; stroke-dasharray:6 5; } .fr-thread{ fill:none; stroke:#fad761; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:10 8; display:none; pointer-events:none; animation:fr-march 1.4s linear infinite; } @keyframes fr-march{ to{ stroke-dashoffset:-36; } } .fr-ring{ fill:none; stroke:#fad761; stroke-width:3; display:none; pointer-events:none; } .tw-teach[data-fr-step="3"] .fr-thread, .tw-teach[data-fr-step="3"] .fr-ring{ display:inline; } @keyframes fr-blink{ 0%{ fill-opacity:.55; } 17%{ fill-opacity:.12; } 33%{ fill-opacity:.55; } 50%{ fill-opacity:.12; } 67%{ fill-opacity:.55; } 83%{ fill-opacity:.12; } 100%{ fill-opacity:.22; } } .tw-teach[data-fr-step="1"] .fr-h[data-on="sel"]{ animation:fr-blink 1.2s steps(1, end) 1 forwards; } @keyframes fr-turn{ to{ stroke-dashoffset:-48; } } .tw-teach[data-fr-step="2"] .fr-ring{ display:inline; stroke-width:3.5; stroke-dasharray:7 5; animation:fr-turn 1s steps(8, end) infinite; } @media (prefers-reduced-motion:reduce){ .tw-teach[data-fr-step] .fr-h, .tw-teach[data-fr-step] .fr-ring{ animation:none; } } @media (prefers-reduced-motion:reduce){ .fr-thread{ animation:none; } } 
.fr-houses{ display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; margin:0 0 10px; } .fr-hb{ padding:.3em 0; border-radius:8px; border:2px solid #c9a24e; background:#fffdf6; color:#a33f86; font-family:nes, monospace; font-size:14px; cursor:pointer; } .fr-hb[aria-pressed="true"]{ background:#be4d68; border-color:#be4d68; color:#fffdf6; } .fr-s1, .fr-s2, .fr-s3{ display:none; } .tw-teach:not([data-fr-step="0"]) .fr-s1, .tw-teach:not([data-fr-step="0"]) .fr-s2, .tw-teach:not([data-fr-step="0"]) .fr-s3{ display:block; } .tw-teach:not([data-fr-step="0"]) .fr-s0{ display:none; } .fr-s[data-go]{ cursor:pointer; padding:.3em .45em; border-radius:8px; border:2px solid transparent; opacity:.5; } .fr-s[data-go][data-now]{ opacity:1; border-color:#fad761; background:rgba(250,215,97,.08); } .fr-s .fr-t{ display:none; } .fr-s[data-now] .fr-t{ display:inline; } .fr-s[data-now] .fr-k{ display:none; } .fr-k{ color:#fad761; } .tw-teach[data-tool="ruler"][data-fr-step="3"] .fr-table{ display:none; } .fr-cond, .fr-link{ display:none; } .tw-teach[data-fr-step="3"] .fr-cond, .tw-teach[data-fr-step="3"] .fr-link{ display:block; } .tw-teach[data-tool="ruler"] .tw-ctl > .mo-btns:first-child{ flex-wrap:nowrap; gap:6px; } .tw-teach[data-tool="ruler"] .tw-ctl > .mo-btns:first-child .mo-btn{ flex:1 1 0; min-width:0; padding-left:.3em; padding-right:.3em; white-space:nowrap; } .tw-teach[data-tool="ruler"] .tw-ctl > .mo-btns:first-child .fr-cr{ flex:1.5 1 0; } .tw-teach[data-tool="ruler"] .fr-notes .fr-s[data-go]{ margin:0 0 .25em; padding:.2em .4em; } .tw-teach[data-tool="ruler"] .fr-notes .fr-s3 > p{ margin:0 0 .3em; } .tw-teach[data-tool="ruler"] .fr-notes .fr-cond p{ margin:0 0 .12em; line-height:1.22; } .tw-teach[data-tool="ruler"] .fr-notes .fr-link{ margin:0; } .fr-n{ display:inline-block; min-width:1.3em; margin-right:.3em; font-style:normal; font-family:nes, monospace; color:#fad761; } .tw-teach .fr-notes p{ margin:0 0 .5em; line-height:1.32; } .fr-s b{ color:#f0459a; font-weight:400; } .fr-s em{ font-style:normal; color:#fad761; } .fr-cond{ margin:0 0 .5em; padding-left:.6em; border-left:2px solid rgba(250,215,97,.5); } .tw-teach .fr-cond p{ margin:0 0 .3em; color:#fdf8ee; } .fr-cond p b{ font-family:Minecraft, monospace; font-weight:400; color:#cfc6e8; } .tw-teach .fr-link{ color:#fad761; } .fr-table{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; margin:0 0 10px; padding:6px 2px; border:1px solid rgba(201,162,78,.5); border-radius:8px; } .tw-teach .fr-row{ display:flex; flex-direction:column; align-items:center; gap:3px; margin:0; padding:4px 0; border-radius:6px; opacity:.75; } .fr-row img{ image-rendering:pixelated; } .fr-row .fr-pl{ width:32px; height:32px; } .fr-row b{ font-family:Minecraft, monospace; font-weight:400; font-size:11px; color:#fdf8ee; } .fr-row span{ display:flex; gap:2px; min-height:18px; } .fr-row .fr-z{ height:18px; width:auto; } .tw-teach .fr-row[data-on="1"]{ opacity:1; background:rgba(250,215,97,.18); box-shadow:0 0 0 2px #fad761; } .tw-teach .fr-row[data-on="1"] b{ color:#fad761; } .cc-h{ fill:#fff; fill-opacity:0; pointer-events:none; } .cc-h[data-on="sel"]{ fill:#fad761; fill-opacity:.22; stroke:#fad761; stroke-width:3; } .cc-h[data-on="link"]{ fill:#fad761; fill-opacity:.09; stroke:#fad761; stroke-width:2; stroke-dasharray:6 5; } .cc-ring{ fill:none; stroke:#fad761; stroke-width:3; display:none; pointer-events:none; } .cc-ring[data-on="1"]{ display:inline; } .cc-thread{ fill:none; stroke:#fad761; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:10 8; display:none; pointer-events:none; } .tw-teach[data-cc-thread="on"] .cc-thread{ display:inline; } .cc-passes{ grid-template-columns:repeat(7, 1fr); } .cc-pass, .cc-ask{ display:none; } .tw-teach:not([data-cc-step="0"]) .cc-pass, .tw-teach:not([data-cc-step="0"]) .cc-ask{ display:block; } .tw-teach:not([data-cc-step="0"]) .cc-s0{ display:none; } .tw-teach .cc-notes p{ margin:0 0 .6em; line-height:1.35; } .cc-pn{ color:#f0459a; font-weight:400; } .tw-teach .cc-ask{ color:#fdf8ee; } .tw-teach .cc-s0{ color:#cfc6e8; } .cc-road{ display:block; margin-top:.6em; } .cc-way{ display:block; color:#fdf8ee; } .cc-way i{ font-style:normal; color:#fad761; display:inline-block; min-width:1.2em; } .cc-who{ display:none; } .tw-teach[data-cc-reveal="done"] .cc-who{ display:block; color:#fad761; } .cc-rd{ display:none; } .tw-teach[data-cc-reveal="done"] .cc-rd{ display:inline; } .tw-teach[data-cc-reveal="done"] .tw-rd{ display:none; } .cc-rd text{ text-anchor:middle; dominant-baseline:central; } .cc-rdn, .cc-rdn-sh{ font-family:nes, monospace; font-size:28px; } .cc-rdn{ fill:#5A3268; } .cc-rdn-sh{ fill:#fad761; } .cc-rdd{ font-family:Minecraft, monospace; font-size:30px; fill:#be4d68; letter-spacing:1px; } .cc-rdt{ font-family:Minecraft, monospace; font-size:19px; fill:#8a7aa0; letter-spacing:1px; } .cc-end{ margin-top:8px; } .cc-after, .cc-after-btn{ display:none !important; } .tw-teach[data-cc-reveal="done"] .cc-after{ display:block !important; } .tw-teach[data-cc-reveal="done"] .cc-after-btn{ display:inline-block !important; } .tw-teach[data-cc-reveal="done"] .cc-passes, .tw-teach[data-cc-reveal="done"] .cc-pass, .tw-teach[data-cc-reveal="done"] .cc-ask, .tw-teach[data-cc-reveal="done"] .cc-s0{ display:none; } .cc-walk{ clear:both; margin:.6em 0 0; } .tw-teach .cc-pips{ display:flex; align-items:center; gap:5px; margin:0 0 .5em; } .cc-pip{ flex:1 1 0; height:8px; border-radius:4px; background:rgba(240,69,154,.22); } .cc-pip[data-on="done"]{ background:#be4d68; } .cc-pip[data-on="now"]{ background:#f0459a; box-shadow:0 0 0 2px #fdf8ee; } .cc-pip--p2{ background:rgba(250,215,97,.22); } .cc-pip--p2[data-on="done"]{ background:#c9a24e; } .cc-pip--p2[data-on="now"]{ background:#fad761; box-shadow:0 0 0 2px #fdf8ee; } .cc-pipgap{ width:10px; height:2px; background:repeating-linear-gradient(90deg, #c9a24e 0 3px, transparent 3px 6px); flex:none; } .cc-rv{ position:relative; padding:.45em .6em .5em; border:2px solid #be4d68; border-radius:8px; background:rgba(190,77,104,.12); } .tw-teach .cc-rvh, .tw-teach .cc-p2h{ margin:0 0 .25em; font-family:nes, monospace; font-size:.7em; letter-spacing:1px; text-transform:uppercase; } .tw-teach .cc-rvh{ color:#f0459a; } .tw-teach .cc-rvn{ margin:0; color:#fdf8ee; font-family:Minecraft, monospace; } .tw-teach .cc-rvt{ margin:.15em 0 0; color:#cfc6e8; } .cc-p2{ position:relative; margin:14px 0 0; padding:.45em .6em .5em; border:2px dashed #c9a24e; border-radius:8px; background:rgba(250,215,97,.06); } .cc-p2::before{ content:""; position:absolute; left:50%; top:-16px; height:14px; border-left:2px dashed #c9a24e; } .tw-teach .cc-p2h{ color:#fad761; } .tw-teach[data-cc-walk="review"] .cc-rv{ box-shadow:0 0 0 2px rgba(240,69,154,.35); } .tw-teach[data-cc-walk="review"] .cc-p2{ border-style:solid; background:rgba(250,215,97,.12); } .tw-teach .cc-p2tool{ margin:0; font-family:Minecraft, monospace; color:#fdf8ee; } .tw-teach .cc-p2read{ margin:.2em 0 0; color:#cfc6e8; } .tw-teach[data-cc-walk="review"] .cc-p2tool{ color:#fad761; } .tw-teach[data-cc-walk="review"] .cc-p2read{ color:#fdf8ee; } .tw-teach .cc-p2gold{ color:#fad761; } .tw-teach .cc-k{ font-style:normal; } .tw-teach .cc-p2tool .cc-k--sextile{ color:#60b1ff; } .tw-teach .cc-p2tool .cc-k--square{ color:#ff5a5a; } .tw-teach .cc-p2tool .cc-k--trine{ color:#67deb4; } .tw-teach[data-cc-reveal="done"] .cc-p2{ border-color:#b48ad8; background:rgba(180,138,216,.08); } .tw-teach[data-cc-reveal="done"] .cc-p2::before{ border-color:#b48ad8; } .tw-teach[data-cc-reveal="done"] .cc-p2h{ color:#d2b4f0; } .tw-teach[data-cc-deep="aspect"] .cc-p2{ border-color:#b48ad8; background:rgba(180,138,216,.14); } .tw-teach[data-cc-deep="aspect"] .cc-p2h{ color:#d2b4f0; } .tw-teach[data-cc-deep="aspect"] .cc-p2tool{ color:#fdf8ee; } .tw-teach[data-cc-deep="part2"] .cc-p2{ border-color:#c9a24e; background:rgba(250,215,97,.12); } .tw-teach[data-cc-deep="part2"] .cc-p2::before{ border-color:#c9a24e; } .tw-teach[data-cc-deep="part2"] .cc-p2h{ color:#fad761; } .cc-al, .cc-tri{ display:none; } .cc-al[data-on="1"], .cc-tri[data-on="1"]{ display:inline; } .tw-teach[data-cc-reveal="done"] .cc-h[data-on="sel"]{ fill:#f0459a; fill-opacity:.18; stroke:#f0459a; } .tw-teach[data-cc-reveal="done"] .cc-h[data-on="link"]{ fill:#f0459a; fill-opacity:.07; stroke:#f0459a; } .tw-teach[data-cc-reveal="done"] .cc-ring{ stroke:#f0459a; } .tw-teach[data-cc-reveal="done"] .cc-thread{ stroke:#f0459a; } .tw-teach[data-cc-reveal="done"] .cc-al{ stroke-width:4; filter:drop-shadow(0 0 1.5px #3b2350) drop-shadow(0 0 1px #3b2350); } .tw-teach[data-cc-reveal="done"] .cc-al--sextile{ stroke:#60b1ff; } .tw-teach[data-cc-reveal="done"] .cc-al--trine{ stroke:#67deb4; } .tw-teach[data-cc-reveal="done"] .cc-al--square{ stroke:#ff5a5a; stroke-dasharray:9 6; } .tw-teach[data-cc-reveal="done"] .cc-al--opposition{ stroke:#ff9a3c; } .cc-ad{ display:none; } .cc-lg{ white-space:nowrap; } .cc-lg img{ width:16px; height:16px; image-rendering:pixelated; vertical-align:-3px; margin-right:.2em; } .cc-asp, .cc-dig{ display:none; pointer-events:none; } .tw-teach[data-cc-asp="on"] .cc-asp, .tw-teach[data-cc-dig="on"] .cc-dig{ display:inline; } .cc-al{ stroke-width:3; stroke-linecap:round; } .cc-al--trine{ stroke:#4a86d4; } .cc-al--sextile{ stroke:#3aa66a; } .cc-al--square{ stroke:#d6455d; } .cc-al--opposition{ stroke:#d6455d; stroke-dasharray:8 6; } .cc-ad{ fill:#5A3268; } .cc-tri{ stroke-width:1.5; stroke-linejoin:round; } .cc-tri--up{ fill:#fad761; stroke:#5A3268; } .cc-tri--down{ fill:#5A3268; stroke:#fad761; } .cc-key{ display:inline-block; width:0; height:0; margin:0 1px; border-left:6px solid transparent; border-right:6px solid transparent; vertical-align:1px; } .cc-key--up{ border-bottom:10px solid #fad761; } .cc-key--down{ border-top:10px solid #b48ad8; } .cc-photo{ margin:0 0 .5em .7em; float:right; width:50%; } .cc-photo img{ width:100%; display:block; border:2px solid #c9a24e; } .cc-photo--empty{ aspect-ratio:3 / 4; border:2px dashed rgba(201,162,78,.7); display:flex; align-items:center; justify-content:center; box-sizing:border-box; } .cc-photo--empty span{ font-family:Minecraft, monospace; font-size:.7em; color:#9a90b8; } .cc-photo figcaption{ font-size:.6em; color:#9a90b8; } .ms-note--mercury{ display:none; } .tw-teach[data-ms-pl="mercury"] .ms-note--mercury{ display:block; } .tw-teach[data-ms-pl="mercury"] .ms-note--venus{ display:none; } .ms-pick img{ width:16px; height:16px; image-rendering:pixelated; vertical-align:-3px; } .tw-teach .ms-notes p{ margin:0 0 .5em; line-height:1.32; } .tw-teach .ms-notes p:last-child{ margin-bottom:0; } .ms-note b{ color:#f0459a; font-weight:400; } .tr-sky{ fill:none; stroke:#232a63; stroke-opacity:.92; } .tr-sky-edge{ fill:none; stroke:#c9a24e; stroke-width:1.5; stroke-opacity:.6; } .tr-zone{ fill:#fad761; fill-opacity:.42; stroke:#fad761; stroke-opacity:.8; stroke-width:1.5; display:none; } .tr-pace{ grid-template-columns:repeat(3, 1fr); } .tw-teach[data-tr-zone="on"] .tr-zone{ display:inline; } .tr-tick{ stroke:#fdf8ee; stroke-width:2.4; } .tr-link{ stroke:#fad761; stroke-width:2.5; stroke-dasharray:7 6; stroke-linecap:round; } .tr-link[data-a="sextile"], .tr-glow[data-a="sextile"]{ stroke:#60b1ff; } .tr-glow[data-a="sextile"]{ fill:#60b1ff; } .tr-link[data-a="square"], .tr-glow[data-a="square"]{ stroke:#ff5a5a; } .tr-glow[data-a="square"]{ fill:#ff5a5a; } .tr-link[data-a="trine"], .tr-glow[data-a="trine"]{ stroke:#67deb4; } .tr-glow[data-a="trine"]{ fill:#67deb4; } .tr-link[data-a="opposition"], .tr-glow[data-a="opposition"]{ stroke:#ff9a3c; } .tr-glow[data-a="opposition"]{ fill:#ff9a3c; } .tr-k{ white-space:nowrap; } .tr-k i{ display:inline-block; width:.75em; height:.75em; border-radius:50%; margin:0 .25em 0 0; vertical-align:-.05em; background:#fad761; } .tr-k[data-a="sextile"] i{ background:#60b1ff; } .tr-k[data-a="square"] i{ background:#ff5a5a; } .tr-k[data-a="trine"] i{ background:#67deb4; } .tr-k[data-a="opposition"] i{ background:#ff9a3c; } .tr-an{ font-family:Minecraft, monospace; font-size:.9em; color:#fad761; } .tr-hit[data-a="sextile"] .tr-an{ color:#60b1ff; } .tr-hit[data-a="square"] .tr-an{ color:#ff5a5a; } .tr-hit[data-a="trine"] .tr-an{ color:#67deb4; } .tr-hit[data-a="opposition"] .tr-an{ color:#ff9a3c; } .tr-glow{ fill:#fad761; stroke:#fad761; stroke-width:3; } .tr-glow--exact{ stroke-width:5; } .tr-layer{ pointer-events:none; } .tw-teach .tr-notes p{ margin:0 0 .5em; line-height:1.32; } .tr-note b{ color:#f0459a; font-weight:400; } .tw-teach .tr-hit{ color:#fdf8ee; } .tr-hit img{ width:16px; height:16px; image-rendering:pixelated; vertical-align:-2px; margin:0 .2em 0 0; } .tr-hit b{ font-weight:400; color:#fad761; } .tr-orb{ font-family:Minecraft, monospace; font-size:.85em; color:#cfc6e8; } .tr-hit[data-how="exact"] .tr-orb{ color:#fad761; } .tr-where{ color:#cfc6e8; font-size:.92em; } .tw-teach .tr-quiet{ color:#cfc6e8; font-style:italic; } .tr-lit{ min-height:3.2em; margin:0 0 .4em; padding:0 0 .3em; border-bottom:1px dashed rgba(201,162,78,.5); } .tw-teach .fr-notes p.fr-src{ font-style:italic; opacity:.75; font-size:.85em; } .fr-src i{ color:inherit; }
.rx-pick{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:0 0 10px; } .rx-pl{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px 5px; border-radius:10px; border:2px solid #c9a24e; background:#fffdf6; color:#a33f86; font-family:basiic, monospace; font-size:12px; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; } .rx-pl img{ width:20px; height:20px; image-rendering:pixelated; } .rx-pl[aria-pressed="true"]{ background:#be4d68; border-color:#be4d68; color:#fffdf6; } .rx-pl--off, .rx-pl:disabled{ opacity:.38; filter:grayscale(1); cursor:not-allowed; } .rx-run{ align-items:center; flex-wrap:nowrap; } .rx-speed{ flex:1 1 auto; font-family:Minecraft, monospace; font-size:15px; color:#fad761; text-align:center; white-space:nowrap; } .rx-slow, .rx-fast{ padding:.3em .9em; font-size:18px; } 
.tw-teach:not([data-show~="loops"]) .rx-trail--l, .tw-teach:not([data-show~="loops"]) .rx-st--l, .tw-teach[data-show~="loops"] .rx-trail--z, .tw-teach[data-show~="loops"] .rx-st--z, .tw-teach[data-show~="loops"] .rx-lane{ display:none; } .tw-teach:not([data-show~="sun"]) .rx-sunpx, .tw-teach:not([data-show~="sun"]) .rx-sunline{ display:none; } .tw-teach[data-show~="loops"] .rx-caz{ display:none; } .rx-czm{ stroke:#fad761; stroke-width:3; } .rx-czm--in{ fill:#fad761; } .rx-czm--sup{ fill:#2c1820; } .rx-cz{ display:inline-block; width:.7em; height:.7em; border-radius:50%; border:2px solid #fad761; box-sizing:border-box; vertical-align:-.05em; margin:0 .25em 0 .1em; } .rx-cz--in{ background:#fad761; } .rx-cz--sup{ background:transparent; } .tw-teach[data-show~="loops"] .rx-note--ring{ display:none; } .rx-note--sun, .rx-note--loops{ display:none; } .tw-teach[data-show~="sun"] .rx-note--sun, .tw-teach[data-show~="loops"] .rx-note--loops{ display:block; } .tw-teach[data-wide] .rx-trail--l, .tw-teach[data-wide] .rx-st--l{ display:inline !important; } .tw-teach[data-wide] .rx-trail--z, .tw-teach[data-wide] .rx-st--z, .tw-teach[data-wide] .rx-lane{ display:none !important; } .rx-note--hand{ display:none; } .tw-teach[data-hand="on"] .rx-note--hand{ display:block; } .tw-teach[data-hand="on"] svg{ cursor:grab; touch-action:none; } .tw-teach[data-hand="on"][data-grab] svg{ cursor:grabbing; } .rx-star, .rx-note--star{ display:none; } .tw-teach[data-show~="star"] .rx-star{ display:inline; } .tw-teach[data-show~="star"] .rx-note--star{ display:block; } .tw-teach .rx-notes p{ margin:0 0 .55em; line-height:1.32; } .rx-note b{ color:#f0459a; font-weight:400; } .tw-teach .rx-notes p.rx-src{ font-style:italic; opacity:.8; } .tw-teach .rx-notes{ padding-right:.35em; overflow-wrap:anywhere; }
.mo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; justify-items:center; } .mo-half{ width:100%; max-width:min(100%, 56vh, calc(100vh - 300px)); } .mo-lab{ margin:0 0 8px; text-align:center; font-family:nes, monospace; font-size:18px; color:#5A3268; } .mo-pair .tw-foot{ display:none !important; } .mo-pair .tw-teach{ margin:0; } .mo-btns--pair{ margin-top:16px; } .mo-btns--pair .mo-btn{ font-size:18px; }
.tw-teach .mo-clock{ margin:.5em 0 0; font-family:Minecraft, monospace; font-size:1.05em; color:#fad761; text-align:center; letter-spacing:.5px; }
.hg-tri{ opacity:0; }
.tw-teach[data-show~="tris"] .hg-tri{ opacity:1; }
.hg-house, .hg-rowlab, .hg-col{ cursor:pointer; }
.hg-colinfo{ display:none; } .tw-teach:has([data-part="angular"]:hover) .hg-colinfo[data-col="angular"], .tw-teach[data-pin="angular"] .hg-colinfo[data-col="angular"]{ display:inline; } .tw-teach:has([data-part="succedent"]:hover) .hg-colinfo[data-col="succedent"], .tw-teach[data-pin="succedent"] .hg-colinfo[data-col="succedent"]{ display:inline; } .tw-teach:has([data-part="cadent"]:hover) .hg-colinfo[data-col="cadent"], .tw-teach[data-pin="cadent"] .hg-colinfo[data-col="cadent"]{ display:inline; }
.tw-teach:has([data-part="h1"]:hover) .hw-wedge[data-h="1"],
.tw-teach[data-pin="h1"] .hw-wedge[data-h="1"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h1"]:hover) .hw-band[data-h="1"],
.tw-teach[data-pin="h1"] .hw-band[data-h="1"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h1"]:hover) .hw-num[data-h="1"],
.tw-teach[data-pin="h1"] .hw-num[data-h="1"]{ fill:#2c1820; }
.tw-teach:has([data-part="h1"]:hover) .hw-top[data-h="1"],
.tw-teach[data-pin="h1"] .hw-top[data-h="1"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h1"]:hover) .hw-top2[data-h="1"],
.tw-teach[data-pin="h1"] .hw-top2[data-h="1"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h2"]:hover) .hw-wedge[data-h="2"],
.tw-teach[data-pin="h2"] .hw-wedge[data-h="2"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h2"]:hover) .hw-band[data-h="2"],
.tw-teach[data-pin="h2"] .hw-band[data-h="2"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h2"]:hover) .hw-num[data-h="2"],
.tw-teach[data-pin="h2"] .hw-num[data-h="2"]{ fill:#2c1820; }
.tw-teach:has([data-part="h2"]:hover) .hw-top[data-h="2"],
.tw-teach[data-pin="h2"] .hw-top[data-h="2"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h2"]:hover) .hw-top2[data-h="2"],
.tw-teach[data-pin="h2"] .hw-top2[data-h="2"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h3"]:hover) .hw-wedge[data-h="3"],
.tw-teach[data-pin="h3"] .hw-wedge[data-h="3"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h3"]:hover) .hw-band[data-h="3"],
.tw-teach[data-pin="h3"] .hw-band[data-h="3"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h3"]:hover) .hw-num[data-h="3"],
.tw-teach[data-pin="h3"] .hw-num[data-h="3"]{ fill:#2c1820; }
.tw-teach:has([data-part="h3"]:hover) .hw-top[data-h="3"],
.tw-teach[data-pin="h3"] .hw-top[data-h="3"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h3"]:hover) .hw-top2[data-h="3"],
.tw-teach[data-pin="h3"] .hw-top2[data-h="3"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h4"]:hover) .hw-wedge[data-h="4"],
.tw-teach[data-pin="h4"] .hw-wedge[data-h="4"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h4"]:hover) .hw-band[data-h="4"],
.tw-teach[data-pin="h4"] .hw-band[data-h="4"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h4"]:hover) .hw-num[data-h="4"],
.tw-teach[data-pin="h4"] .hw-num[data-h="4"]{ fill:#2c1820; }
.tw-teach:has([data-part="h4"]:hover) .hw-top[data-h="4"],
.tw-teach[data-pin="h4"] .hw-top[data-h="4"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h4"]:hover) .hw-top2[data-h="4"],
.tw-teach[data-pin="h4"] .hw-top2[data-h="4"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h5"]:hover) .hw-wedge[data-h="5"],
.tw-teach[data-pin="h5"] .hw-wedge[data-h="5"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h5"]:hover) .hw-band[data-h="5"],
.tw-teach[data-pin="h5"] .hw-band[data-h="5"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h5"]:hover) .hw-num[data-h="5"],
.tw-teach[data-pin="h5"] .hw-num[data-h="5"]{ fill:#2c1820; }
.tw-teach:has([data-part="h5"]:hover) .hw-top[data-h="5"],
.tw-teach[data-pin="h5"] .hw-top[data-h="5"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h5"]:hover) .hw-top2[data-h="5"],
.tw-teach[data-pin="h5"] .hw-top2[data-h="5"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h6"]:hover) .hw-wedge[data-h="6"],
.tw-teach[data-pin="h6"] .hw-wedge[data-h="6"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h6"]:hover) .hw-band[data-h="6"],
.tw-teach[data-pin="h6"] .hw-band[data-h="6"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h6"]:hover) .hw-num[data-h="6"],
.tw-teach[data-pin="h6"] .hw-num[data-h="6"]{ fill:#2c1820; }
.tw-teach:has([data-part="h6"]:hover) .hw-top[data-h="6"],
.tw-teach[data-pin="h6"] .hw-top[data-h="6"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h6"]:hover) .hw-top2[data-h="6"],
.tw-teach[data-pin="h6"] .hw-top2[data-h="6"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h7"]:hover) .hw-wedge[data-h="7"],
.tw-teach[data-pin="h7"] .hw-wedge[data-h="7"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h7"]:hover) .hw-band[data-h="7"],
.tw-teach[data-pin="h7"] .hw-band[data-h="7"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h7"]:hover) .hw-num[data-h="7"],
.tw-teach[data-pin="h7"] .hw-num[data-h="7"]{ fill:#2c1820; }
.tw-teach:has([data-part="h7"]:hover) .hw-top[data-h="7"],
.tw-teach[data-pin="h7"] .hw-top[data-h="7"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h7"]:hover) .hw-top2[data-h="7"],
.tw-teach[data-pin="h7"] .hw-top2[data-h="7"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h8"]:hover) .hw-wedge[data-h="8"],
.tw-teach[data-pin="h8"] .hw-wedge[data-h="8"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h8"]:hover) .hw-band[data-h="8"],
.tw-teach[data-pin="h8"] .hw-band[data-h="8"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h8"]:hover) .hw-num[data-h="8"],
.tw-teach[data-pin="h8"] .hw-num[data-h="8"]{ fill:#2c1820; }
.tw-teach:has([data-part="h8"]:hover) .hw-top[data-h="8"],
.tw-teach[data-pin="h8"] .hw-top[data-h="8"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h8"]:hover) .hw-top2[data-h="8"],
.tw-teach[data-pin="h8"] .hw-top2[data-h="8"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h9"]:hover) .hw-wedge[data-h="9"],
.tw-teach[data-pin="h9"] .hw-wedge[data-h="9"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h9"]:hover) .hw-band[data-h="9"],
.tw-teach[data-pin="h9"] .hw-band[data-h="9"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h9"]:hover) .hw-num[data-h="9"],
.tw-teach[data-pin="h9"] .hw-num[data-h="9"]{ fill:#2c1820; }
.tw-teach:has([data-part="h9"]:hover) .hw-top[data-h="9"],
.tw-teach[data-pin="h9"] .hw-top[data-h="9"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h9"]:hover) .hw-top2[data-h="9"],
.tw-teach[data-pin="h9"] .hw-top2[data-h="9"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h10"]:hover) .hw-wedge[data-h="10"],
.tw-teach[data-pin="h10"] .hw-wedge[data-h="10"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h10"]:hover) .hw-band[data-h="10"],
.tw-teach[data-pin="h10"] .hw-band[data-h="10"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h10"]:hover) .hw-num[data-h="10"],
.tw-teach[data-pin="h10"] .hw-num[data-h="10"]{ fill:#2c1820; }
.tw-teach:has([data-part="h10"]:hover) .hw-top[data-h="10"],
.tw-teach[data-pin="h10"] .hw-top[data-h="10"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h10"]:hover) .hw-top2[data-h="10"],
.tw-teach[data-pin="h10"] .hw-top2[data-h="10"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h11"]:hover) .hw-wedge[data-h="11"],
.tw-teach[data-pin="h11"] .hw-wedge[data-h="11"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h11"]:hover) .hw-band[data-h="11"],
.tw-teach[data-pin="h11"] .hw-band[data-h="11"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h11"]:hover) .hw-num[data-h="11"],
.tw-teach[data-pin="h11"] .hw-num[data-h="11"]{ fill:#2c1820; }
.tw-teach:has([data-part="h11"]:hover) .hw-top[data-h="11"],
.tw-teach[data-pin="h11"] .hw-top[data-h="11"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h11"]:hover) .hw-top2[data-h="11"],
.tw-teach[data-pin="h11"] .hw-top2[data-h="11"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h12"]:hover) .hw-wedge[data-h="12"],
.tw-teach[data-pin="h12"] .hw-wedge[data-h="12"]{ fill-opacity:.85; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h12"]:hover) .hw-band[data-h="12"],
.tw-teach[data-pin="h12"] .hw-band[data-h="12"]{ fill:#f7cf62; fill-opacity:1; stroke:#f7cf62; stroke-opacity:1; stroke-width:4; }
.tw-teach:has([data-part="h12"]:hover) .hw-num[data-h="12"],
.tw-teach[data-pin="h12"] .hw-num[data-h="12"]{ fill:#2c1820; }
.tw-teach:has([data-part="h12"]:hover) .hw-top[data-h="12"],
.tw-teach[data-pin="h12"] .hw-top[data-h="12"]{ fill:#f7cf62; }
.tw-teach:has([data-part="h12"]:hover) .hw-top2[data-h="12"],
.tw-teach[data-pin="h12"] .hw-top2[data-h="12"]{ fill:#f7cf62; }
.tw-teach[data-show~="aims"] .hw-band[data-row="dharma"]{ fill:#cdb8ec; fill-opacity:.95; }
.hw-tag[data-row="dharma"]{ background:#cdb8ec; }
.tw-teach[data-show~="aims"] .hw-band[data-row="artha"]{ fill:#f4c99c; fill-opacity:.95; }
.hw-tag[data-row="artha"]{ background:#f4c99c; }
.tw-teach[data-show~="aims"] .hw-band[data-row="kama"]{ fill:#f2a9c0; fill-opacity:.95; }
.hw-tag[data-row="kama"]{ background:#f2a9c0; }
.tw-teach[data-show~="aims"] .hw-band[data-row="moksha"]{ fill:#a9d9d2; fill-opacity:.95; }
.hw-tag[data-row="moksha"]{ background:#a9d9d2; }
.hw-tag{ display:inline-block; margin:4px 0 0; padding:1px 8px; border-radius:999px; color:#3a2a4a; font-size:.86em; letter-spacing:.4px; white-space:nowrap; }
.hw-house{ cursor:pointer; }
.hw-slang, .hw-slangc, .hw-win{ display:none; }
.tw-teach[data-show~="aims"] .hw-slang, .tw-teach[data-show~="aims"] .hw-win{ display:inline; }
.hw-heart{ cursor:pointer; } .hw-heart > circle{ fill:#f7cf62; } .hw-heart:hover > circle{ fill-opacity:.07; } .hw-heart[aria-pressed="true"] > circle{ fill-opacity:.16; }
.tw-teach[data-show~="aims"] .hw-slangc{ display:block; }
.hw-ico{ image-rendering:pixelated; }
.hw-namem{ display:none; } .tw-teach[data-show~="aims"] .hw-namem{ display:inline; }
.tw-teach[data-show~="aims"] .hw-name{ display:none; }
@keyframes hw-flash-on{ from{ visibility:visible; } to{ visibility:hidden; } }
@keyframes hw-flash-off{ from{ visibility:hidden; } to{ visibility:visible; } }
.tw-teach:not([data-show~="aims"]):has([data-part="h1"]:hover) .hw-namem[data-h="1"], .tw-teach:not([data-show~="aims"])[data-pin="h1"] .hw-namem[data-h="1"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h1"]:hover) .hw-name[data-h="1"], .tw-teach:not([data-show~="aims"])[data-pin="h1"] .hw-name[data-h="1"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h2"]:hover) .hw-namem[data-h="2"], .tw-teach:not([data-show~="aims"])[data-pin="h2"] .hw-namem[data-h="2"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h2"]:hover) .hw-name[data-h="2"], .tw-teach:not([data-show~="aims"])[data-pin="h2"] .hw-name[data-h="2"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h3"]:hover) .hw-namem[data-h="3"], .tw-teach:not([data-show~="aims"])[data-pin="h3"] .hw-namem[data-h="3"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h3"]:hover) .hw-name[data-h="3"], .tw-teach:not([data-show~="aims"])[data-pin="h3"] .hw-name[data-h="3"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h4"]:hover) .hw-namem[data-h="4"], .tw-teach:not([data-show~="aims"])[data-pin="h4"] .hw-namem[data-h="4"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h4"]:hover) .hw-name[data-h="4"], .tw-teach:not([data-show~="aims"])[data-pin="h4"] .hw-name[data-h="4"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h5"]:hover) .hw-namem[data-h="5"], .tw-teach:not([data-show~="aims"])[data-pin="h5"] .hw-namem[data-h="5"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h5"]:hover) .hw-name[data-h="5"], .tw-teach:not([data-show~="aims"])[data-pin="h5"] .hw-name[data-h="5"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h6"]:hover) .hw-namem[data-h="6"], .tw-teach:not([data-show~="aims"])[data-pin="h6"] .hw-namem[data-h="6"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h6"]:hover) .hw-name[data-h="6"], .tw-teach:not([data-show~="aims"])[data-pin="h6"] .hw-name[data-h="6"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h7"]:hover) .hw-namem[data-h="7"], .tw-teach:not([data-show~="aims"])[data-pin="h7"] .hw-namem[data-h="7"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h7"]:hover) .hw-name[data-h="7"], .tw-teach:not([data-show~="aims"])[data-pin="h7"] .hw-name[data-h="7"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h8"]:hover) .hw-namem[data-h="8"], .tw-teach:not([data-show~="aims"])[data-pin="h8"] .hw-namem[data-h="8"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h8"]:hover) .hw-name[data-h="8"], .tw-teach:not([data-show~="aims"])[data-pin="h8"] .hw-name[data-h="8"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h9"]:hover) .hw-namem[data-h="9"], .tw-teach:not([data-show~="aims"])[data-pin="h9"] .hw-namem[data-h="9"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h9"]:hover) .hw-name[data-h="9"], .tw-teach:not([data-show~="aims"])[data-pin="h9"] .hw-name[data-h="9"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h10"]:hover) .hw-namem[data-h="10"], .tw-teach:not([data-show~="aims"])[data-pin="h10"] .hw-namem[data-h="10"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h10"]:hover) .hw-name[data-h="10"], .tw-teach:not([data-show~="aims"])[data-pin="h10"] .hw-name[data-h="10"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h11"]:hover) .hw-namem[data-h="11"], .tw-teach:not([data-show~="aims"])[data-pin="h11"] .hw-namem[data-h="11"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h11"]:hover) .hw-name[data-h="11"], .tw-teach:not([data-show~="aims"])[data-pin="h11"] .hw-name[data-h="11"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h12"]:hover) .hw-namem[data-h="12"], .tw-teach:not([data-show~="aims"])[data-pin="h12"] .hw-namem[data-h="12"]{ display:inline; animation:hw-flash-on 3s steps(1,end) forwards; }
.tw-teach:not([data-show~="aims"]):has([data-part="h12"]:hover) .hw-name[data-h="12"], .tw-teach:not([data-show~="aims"])[data-pin="h12"] .hw-name[data-h="12"]{ animation:hw-flash-off 3s steps(1,end) forwards; }
.tw-teach:has([data-part="h1"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="1"], .tw-teach[data-pin="h1"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="1"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h2"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="2"], .tw-teach[data-pin="h2"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="2"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h3"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="3"], .tw-teach[data-pin="h3"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="3"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h4"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="4"], .tw-teach[data-pin="h4"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="4"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h5"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="5"], .tw-teach[data-pin="h5"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="5"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h6"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="6"], .tw-teach[data-pin="h6"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="6"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h7"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="7"], .tw-teach[data-pin="h7"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="7"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h8"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="8"], .tw-teach[data-pin="h8"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="8"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h9"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="9"], .tw-teach[data-pin="h9"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="9"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h10"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="10"], .tw-teach[data-pin="h10"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="10"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h11"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="11"], .tw-teach[data-pin="h11"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="11"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.tw-teach:has([data-part="h12"]:hover) .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="12"], .tw-teach[data-pin="h12"] .hw-svg:not(.hw-svg--nested) .hw-ico[data-h="12"]{ filter:drop-shadow(0 0 2px rgba(255,244,214,.95)) drop-shadow(0 0 5px rgba(247,207,98,.55)); }
.hw-namem, .hw-slangc b{ font-family:grapesoda, sans-serif; font-weight:400; }
.hw-slangc b{ font-size:1.3em; }
.tw-teach[data-show~="tris"] .hw-top{ display:none; }
.tw-hb-c:has(.hw-hook){ flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; }
.tw-hb-c:has(.hw-hook) > p{ width:100%; flex:0 0 auto; }
.hw-cardh{ display:flex; align-items:center; gap:.55em; margin:0 0 .55em !important; padding-bottom:.45em; border-bottom:1px dashed rgba(253,248,238,.3); }
.hw-cardnum{ font-size:2.3em; line-height:1; font-weight:700; color:#fad761; }
.hw-oldname{ display:flex; flex-direction:column; line-height:1.1; font-size:1.2em; color:#fdf8ee; }
.hw-oldname small, .hw-more small{ font-size:.62em; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.hw-kw{ margin:0 0 .45em !important; line-height:1.15; }
.hw-kw span{ display:inline-block; margin:0 .3em .35em 0; padding:.14em .6em; border-radius:999px; font-size:1.08em; background:rgba(253,248,238,.08); border:1px solid rgba(253,248,238,.35); }
.hw-kw em{ font-style:normal; color:#fad761; }
.hw-more{ margin:0 0 .6em !important; font-size:.88em; line-height:1.3; color:#e7dcc6; opacity:.92; } .hw-more small{ display:block; font-size:.7em; margin-bottom:.1em; } .hw-why{ margin:0 0 .5em !important; font-size:.88em; line-height:1.3; color:#fdf8ee; } .hw-why small, .hw-joy small{ display:block; font-size:.62em; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:.1em; } .hw-why .hw-namel{ display:block; margin-bottom:.15em; } .hw-why .hw-namel small{ display:inline; } .hw-why .hw-nm{ font-weight:400; color:#fad761; font-size:1.05em; letter-spacing:.02em; } .hw-joy{ margin:0 0 .5em !important; font-size:.9em; color:#fad761; } .hw-joyimg{ width:1.35em; height:1.35em; image-rendering:pixelated; vertical-align:-.3em; margin-right:.35em; } .hw-joy b{ font-weight:400; margin-right:.3em; }
.hw-q{ font-weight:700; color:#fad761; margin-right:.2em; }
.hw-hook{ display:flex; align-items:center; gap:.7em; margin:0 0 .6em !important; padding:.5em .6em; background:rgba(253,248,238,.06); border:1px dashed rgba(253,248,238,.3); border-radius:10px; }
.hw-hookimg{ flex:0 0 auto; image-rendering:pixelated; }
.hw-hook > span{ display:flex; flex-direction:column; line-height:1.1; }
.hw-hook small, .hw-where small{ font-size:.62em; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.hw-hookw{ font-family:grapesoda, sans-serif; font-weight:400; font-size:1.6em; letter-spacing:.06em; color:#fad761; }
.hw-where{ margin:0 !important; line-height:1.3; } .hw-where small{ display:block; margin-bottom:.1em; } .hw-where b{ color:#fad761; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .hw-cardnum, .hw-hookw, .hw-where b, .hw-q{ background-image:linear-gradient(100deg, #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec); background-size:300% 100%; background-repeat:repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:tw-rainbow 24s linear infinite; } }
@media (prefers-reduced-motion:reduce){ .hw-cardnum, .hw-hookw, .hw-where b, .hw-q{ animation:none; } }
.hw-foot{ margin:.35em 0 0; }
.tw-teach:has(.hw-house:hover) .hw-keybox, .tw-teach[data-pin]:has(.hw-house) .hw-keybox{ display:none !important; }
.tw-teach:has(.hw-house:hover) .tw-hb-rest, .tw-teach[data-pin]:has(.hw-house) .tw-hb-rest{ display:none !important; }
.hw-puru{ margin:0 !important; font-size:.95em; padding:.45em .6em .4em .7em; border-left:4px solid currentColor; line-height:1.3; background:rgba(253,248,238,.05); border-radius:0 8px 8px 0; }
.hw-puru .hw-tag{ display:inline-block; margin:0 0 .35em 0; }
.hw-puru .hw-tag + .hw-q{ display:block; }
.hw-puru small{ display:block; opacity:.75; margin-top:.15em; }
.hw-puru[data-row="dharma"]{ border-left-color:#cdb8ec; }
.hw-puru[data-row="artha"]{ border-left-color:#f4c99c; }
.hw-puru[data-row="kama"]{ border-left-color:#f2a9c0; }
.hw-puru[data-row="moksha"]{ border-left-color:#a9d9d2; }
.hw-slang image, .hw-yeet image{ image-rendering:pixelated; }
.hw-tris{ display:none; } .tw-teach[data-show~="tris"] .hw-tris{ display:inline; }
.hw-tris{ pointer-events:none; }
.hw-keybox{ display:none; margin:0 0 10px; padding:10px 12px; border:1px dashed rgba(253,248,238,.35); border-radius:6px; font-size:1.15em; line-height:1.3; } .tw-teach[data-show~="tris"] .hw-keybox{ display:block; }
.hw-keyintro{ display:block; margin:0 0 .45em; opacity:.92; }
.hw-keyrow{ display:block; margin:0 0 .35em; } .hw-keyhd{ display:block; white-space:nowrap; } .hw-keyrow i{ display:inline-block; width:.9em; height:.9em; margin:0 .45em -.1em 0; border-radius:3px; border:1px solid rgba(58,42,74,.45); }
.dk-boxrow--side .dk-box .hw-keybox{ font-size:clamp(13px, 2.24vh, 28px); line-height:1.25; padding:8px 10px; }
.tw-teach[data-show~="tris"]:has(.hw-keybox) .tw-hb-rest{ display:none !important; }
.hw-keysay{ display:block; padding-left:1.35em; opacity:.85; font-size:.92em; }
.hw-keyrow small{ opacity:.7; letter-spacing:.5px; }
.fl-frame{ visibility:hidden; } .fl-f0{ visibility:visible; }
@keyframes fl-step{ from{ visibility:visible; } to{ visibility:hidden; } }
@keyframes fl-last{ from{ visibility:visible; } to{ visibility:visible; } }
.tw-teach[data-show~="flat"] .fl-f0{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.00s forwards; }
.tw-teach[data-show~="flat"] .fl-f1{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.11s forwards; }
.tw-teach[data-show~="flat"] .fl-f2{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.22s forwards; }
.tw-teach[data-show~="flat"] .fl-f3{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.33s forwards; }
.tw-teach[data-show~="flat"] .fl-f4{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.44s forwards; }
.tw-teach[data-show~="flat"] .fl-f5{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.55s forwards; }
.tw-teach[data-show~="flat"] .fl-f6{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.66s forwards; }
.tw-teach[data-show~="flat"] .fl-f7{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.77s forwards; }
.tw-teach[data-show~="flat"] .fl-f8{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.88s forwards; }
.tw-teach[data-show~="flat"] .fl-f9{ visibility:hidden; animation:fl-step 0.11s steps(1,end) 0.99s forwards; }
.tw-teach[data-show~="flat"] .fl-f10{ visibility:hidden; animation:fl-last 0.11s steps(1,end) 1.10s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f0{ visibility:hidden; animation:fl-last-out 0.11s steps(1,end) 1.10s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f1{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.99s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f2{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.88s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f3{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.77s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f4{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.66s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f5{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.55s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f6{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.44s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f7{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.33s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f8{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.22s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f9{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.11s forwards; }
.tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f10{ visibility:hidden; animation:fl-step-out 0.11s steps(1,end) 0.00s forwards; }
@keyframes fl-step-out{ from{ visibility:visible; } to{ visibility:hidden; } }
@keyframes fl-last-out{ from{ visibility:visible; } to{ visibility:visible; } }
@media (prefers-reduced-motion:reduce){ .tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-frame{ animation:none; visibility:hidden; } .tw-teach[data-was~="flat"]:not([data-show~="flat"]) .fl-f0{ visibility:visible; } }
@media (prefers-reduced-motion:reduce){ .tw-teach[data-show~="flat"] .fl-frame{ animation:none; visibility:hidden; } .tw-teach[data-show~="flat"] .fl-f10{ visibility:visible; } }
.tw-teach:has([data-part="asc"]:hover) .fl-lab[data-k="asc"],
.tw-teach[data-pin="asc"] .fl-lab[data-k="asc"]{ filter:drop-shadow(0 0 4px #f7cf62); }
.tw-teach:has([data-part="dsc"]:hover) .fl-lab[data-k="dsc"],
.tw-teach[data-pin="dsc"] .fl-lab[data-k="dsc"]{ filter:drop-shadow(0 0 4px #f7cf62); }
.tw-teach:has([data-part="mc"]:hover) .fl-lab[data-k="mc"],
.tw-teach[data-pin="mc"] .fl-lab[data-k="mc"]{ filter:drop-shadow(0 0 4px #f7cf62); }
.tw-teach:has([data-part="ic"]:hover) .fl-lab[data-k="ic"],
.tw-teach[data-pin="ic"] .fl-lab[data-k="ic"]{ filter:drop-shadow(0 0 4px #f7cf62); }
.tw-teach:has([data-part="horizon"]:hover) .fl-hz,
.tw-teach[data-pin="horizon"] .fl-hz{ stroke:#f7cf62; stroke-width:5; stroke-opacity:1; }
.tw-teach:has([data-part="zodiac"]:hover) .fl-seg,
.tw-teach[data-pin="zodiac"] .fl-seg{ opacity:1; }
.fl-zg{ image-rendering:pixelated; }
.tw-teach:not([data-pin]):has([data-part="zodiac"]:hover) [data-card="zodiac"],
.tw-teach[data-pin="zodiac"] [data-card="zodiac"]{ display:flex; }
.fl-hit{ cursor:pointer; }
.fl-notes{ margin:6px 0 0; } .fl-note{ margin:0 0 .55em; line-height:1.3; color:#e7dcc6; }
.fl-note b{ color:#fad761; font-weight:700; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .tw-teach .fl-note b{ background-image:linear-gradient(100deg, #df90ec, #ff94b4, #fad761, #67deb4, #60b1ff, #df90ec); background-size:300% 100%; background-repeat:repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:tw-rainbow 24s linear infinite; } }
@media (prefers-reduced-motion:reduce){ .tw-teach .fl-note b{ animation:none; } }
.fl-flt{ display:none; } .tw-teach[data-show~="flat"] .fl-flt{ display:inline; } .tw-teach[data-show~="flat"] .fl-sph{ display:none; }
.tw-teach:has([data-part="asc"]:hover) .fl-note[data-k="asc"], .tw-teach[data-pin="asc"] .fl-note[data-k="asc"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="mc"]:hover) .fl-note[data-k="mc"], .tw-teach[data-pin="mc"] .fl-note[data-k="mc"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="dsc"]:hover) .fl-note[data-k="dsc"], .tw-teach[data-pin="dsc"] .fl-note[data-k="dsc"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="ic"]:hover) .fl-note[data-k="ic"], .tw-teach[data-pin="ic"] .fl-note[data-k="ic"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="horizon"]:hover) .fl-note[data-k="horizon"], .tw-teach[data-pin="horizon"] .fl-note[data-k="horizon"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.tw-teach:has([data-part="zodiac"]:hover) .fl-note[data-k="zodiac"], .tw-teach[data-pin="zodiac"] .fl-note[data-k="zodiac"]{ color:#fffdf6; background:rgba(247,207,98,.14); border-radius:6px; box-shadow:0 0 0 4px rgba(247,207,98,.14); }
.fl-off{ display:contents; } .fl-on{ display:none; } [aria-pressed="true"] > .fl-on{ display:contents; } [aria-pressed="true"] > .fl-off{ display:none; }
.tw-mode[aria-pressed="true"] b, body.--post .post-content .tw-mode[aria-pressed="true"] b{ color:inherit; }
/* ---- the controls of a live wheel, IN the band's box (Ash, 20 Oct 2026:
   "place these buttons inside instead of underneath"): stacked, the slider
   full width, the clock in the band's type ---- */
.tw-hb--ctl{ justify-content:center; padding:10px 12px; }
.tw-hb--ctl .tw-ctl{ flex-direction:column; align-items:stretch; gap:10px; margin:0; max-width:none; }
.tw-hb--ctl .tw-moments, .tw-hb--ctl .tw-modes{ display:flex; justify-content:center; flex-wrap:wrap; }
.tw-hb--ctl .tw-moment{ flex:1 1 auto; text-align:center; }
.tw-hb--ctl .tw-mode{ flex:1 1 150px; min-width:0; text-align:center; padding-left:5px; padding-right:5px; }
/* the two ways to watch are two separate pills, each with its sub-line
   (Ash, 20 Oct: "should be separate... with a little descriptive sentence") */
.tw-modes > *{ border-radius:999px; }
.tw-mode{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:7px 16px 8px; }
.tw-mode b{ font-weight:inherit; }
.tw-mode small{ font-size:11px; letter-spacing:.2px; text-transform:none; opacity:.8; }
.tw-mode[aria-pressed="true"] small{ opacity:.9; }
.tw-hb--ctl .tw-play{ align-self:center; }
.tw-hb--ctl .tw-timelab{ display:flex; }
.tw-hb--ctl .tw-time{ width:100%; }
.tw-hb--ctl .tw-clock{ min-width:0; text-align:center; font-family:rainyhearts,monospace; font-size:18px; color:#e7dcc6; }
/* ---- the controls under a live wheel ---- */
.tw-ctl{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center;
  max-width:804px; margin:10px auto 0; font-family:basiic,monospace; font-size:13px; color:#6E6278; }
.tw-moments{ display:inline-flex; gap:0; }
.tw-modes{ display:inline-flex; gap:10px; }
.tw-mode, .tw-play, .tw-moment{ font:inherit; font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  padding:5px 11px 6px; border:1px solid #c9a24e; background:#fffaf0; color:#423752; cursor:pointer;
  line-height:1.15; }
.tw-moments > :first-child{ border-radius:999px 0 0 999px; }
.tw-moments > :last-child{ border-radius:0 999px 999px 0; }
.tw-moments > * + *{ margin-left:-1px; }
.tw-play{ border-radius:999px; min-width:92px; }
.tw-mode[aria-pressed="true"]{ background:#746aaf; border-color:#746aaf; color:#fffdf6; }
.tw-moment:hover, .tw-mode:hover, .tw-play:hover{ border-color:#5A3268; }
.tw-moment[aria-pressed="true"]{ background:#be4c62; border-color:#be4c62; color:#fffdf6; }
.tw-timelab{ display:inline-flex; align-items:center; }
.tw-time{ width:200px; accent-color:#be4c62; }
.tw-clock{ min-width:21ch; }
.tw-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:620px){ .tw-time{ width:120px; } .tw-hb-d{ font-size:17px; } }
@media (prefers-reduced-motion:reduce){ .tw-stage .nkw-star--tw{ animation:none; } }
/* CHARTBOX:end */