/* A blog's theme (<html data-era>, src/design.mjs ERAS), and the look options that came with it:
   the menu, pictures and calendar dates in the list of posts, the size of the words, the width.

   "stage" is the Chobots stage and needs nothing here. The other three are the looks the Chobots
   blog itself has worn, read off its archive (ghost-bridge/archive-assets/archive.css in the
   Chobots repository):

     modern    the Chobots blog today: a sheet of posts under a banner. Follows Light and Space.
     classic   February 2009 on, the "TicTac" page: #edf3fc under a white 900px sheet, #66b5ff
               titles, #6699cc links, grey Arial, a row of tabs.
     y2008     September 2008, "Thisaway Blue": a #859aab page, a 760px column of #f7f0e9
               parchment, #477fba titles, bold #4386ce links, a navy foot.

   A theme is colours, measures and shapes. It never brings Chobots' own logo or banner: the name
   at the top is the blog's, and the platform's strip above it is untouched (it paints from
   literals in blogs.css). 2008 and 2009 had no dark mode, so those two look the same in Light
   and Space.

   How it is done: a theme re-declares the surface tokens on .blog-zone (the writer's part of the
   page), the way "paper" panels do in site.css, so everything inside already paints from them;
   then it takes the glass off the panels. A gadget in a style of its own (a paper note, a badge)
   keeps it: only plain panels are restyled. */

/* ==== What the three themes share: a sheet, a banner, panels without glass ==================== */
:root:where([data-era]:not([data-era="stage"])) .wrap.blog-zone {
  width: min(100% - 24px, var(--era-width)); margin-top: 16px; padding: 0; overflow: hidden; color: var(--text);
  background: var(--era-sheet); border: var(--era-edge); border-radius: var(--era-radius); box-shadow: var(--era-shadow);
}
:root:where([data-era]:not([data-era="stage"])) .blog-zone > .notice, :root:where([data-era]:not([data-era="stage"])) .blog-zone > .blog-notice { margin: 12px 16px; border-radius: 6px; box-shadow: none; }
:root:where([data-era]:not([data-era="stage"])) .hero { display: grid; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
/* (align-self: the header's own "stand at the foot" is for its name, not for its picture, which fills it however high the name makes it.) */
:root:where([data-era]:not([data-era="stage"])) .hero-art { position: relative; inset: auto; grid-area: 1 / 1; align-self: stretch; min-height: clamp(120px, 17vw, 176px); }
:root:where([data-era]:not([data-era="stage"])) .plate { grid-area: 1 / 1; align-self: end; max-width: none; padding: 46px 20px 0; border: 0; border-radius: 0; background: linear-gradient(0deg, rgba(4, 16, 40, 0.72) 0%, rgba(4, 16, 40, 0.4) 55%, transparent 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root:where([data-era]:not([data-era="stage"])) .plate h1 { color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55); }
:root:where([data-era]:not([data-era="stage"])) .plate .tagline { margin-top: 4px; color: #eaf4ff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
:root:where([data-era]:not([data-era="stage"])) .blog-zone .plate .blog-menu { margin: 14px -20px 0; padding: 8px 20px; border-radius: 0; background: var(--era-menu); }
:root:where([data-era]:not([data-era="stage"])) .blog-body { gap: 0; }
:root:where([data-era]:not([data-era="stage"])) .blog-main { min-width: 0; padding: 22px 20px 6px; }
:root:where([data-era]:not([data-era="stage"])) .blog-side { align-self: stretch; min-width: 0; padding: 22px 18px 6px; background: var(--era-side); border-left: var(--era-side-edge); }
:root:where([data-era]:not([data-era="stage"]))[data-side="left"] .blog-side { border-left: 0; border-right: var(--era-side-edge); }
:root:where([data-era]:not([data-era="stage"]))[data-side="below"] .blog-side { border-left: 0; border-top: var(--era-side-edge); }

:root:where([data-era]:not([data-era="stage"])) .blog-zone :is(.blog-main, .gs-panel, .gs-plain) .panel {
  overflow: visible; margin: 0 0 26px; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root:where([data-era]:not([data-era="stage"])) .blog-zone :is(.blog-main, .gs-panel, .gs-plain) .panel > .band {
  width: auto; max-width: none; min-height: 0; margin: 0 0 12px; padding: 0 0 6px; transform: none;
  background: none; box-shadow: none; border: 0; border-bottom: var(--era-head-rule); border-radius: 0; color: var(--era-head);
}
:root:where([data-era]:not([data-era="stage"])) .blog-zone :is(.blog-main, .gs-panel, .gs-plain) .panel > .band .disc { display: none; }
:root:where([data-era]:not([data-era="stage"])) .blog-zone :is(.blog-main, .gs-panel, .gs-plain) .panel > .band :is(h1, h2) { font: var(--era-head-font); letter-spacing: var(--era-head-space, 0); text-transform: var(--era-head-case, none); text-shadow: none; }
:root:where([data-era]:not([data-era="stage"])) .blog-zone :is(.blog-main, .gs-panel, .gs-plain) .panel > .panel-body { padding: 0; }
:root:where([data-era]:not([data-era="stage"])) .gadget { margin-bottom: 22px; }
/* A post on its own page: the heading of the panel is the post's name. */
:root:where([data-era]:not([data-era="stage"])) .blog-main .panel.post > .band :is(h1, h2), :root:where([data-era]:not([data-era="stage"])) .blog-main .panel.page-sheet > .band :is(h1, h2) {
  font: var(--era-title-font); font-size: 1.7em; letter-spacing: 0; text-transform: none; color: var(--era-title);
}
:root:where([data-era]:not([data-era="stage"])) .blog-main .post-tile { margin: 0 0 16px; padding: 0 0 16px; border: 0; border-bottom: var(--era-rule); border-radius: 0; background: none; box-shadow: none; transform: none; }
:root:where([data-era]:not([data-era="stage"])) .blog-main .feed > .post-tile:last-child { border-bottom: 0; margin-bottom: 0; }
:root:where([data-era]:not([data-era="stage"])) .blog-main .post-tile h3 { font: var(--era-title-font); }
:root:where([data-era]:not([data-era="stage"])) .blog-main .post-tile h3 a { color: var(--era-title); }
:root:where([data-era]:not([data-era="stage"])) .blog-main .post-tile h3 a:hover { color: var(--era-title-hover); text-decoration: underline; }
:root:where([data-era]:not([data-era="stage"])) .blog-main .post-tile.has-stamp { padding-left: 72px; }
:root:where([data-era]:not([data-era="stage"])) .blog-main .post-tile .stamp { left: 0; top: 2px; }
:root:where([data-era]:not([data-era="stage"])) .blog-foot { width: auto; max-width: none; margin: 0; border: 0; border-top: var(--era-side-edge); border-radius: 0; box-shadow: none; background: var(--era-foot); color: var(--era-foot-ink); }
:root:where([data-era]:not([data-era="stage"])) .blog-foot :is(a, .blog-foot-name, .blog-foot-host) { color: var(--era-foot-ink); }
:root:where([data-era]:not([data-era="stage"])) .blog-foot .blog-foot-name { text-shadow: none; }
:root:where([data-era]:not([data-era="stage"])) .foot-big .blog-foot-links a { background: none; border-color: currentColor; }

/* ==== Chobots blog (today) ===================================================================== */
:root[data-era="modern"] .blog-zone {
  --era-width: 1000px; --era-radius: 18px; --era-sheet: #04142f; --era-edge: 1px solid rgba(110, 188, 244, 0.32); --era-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  --era-menu: rgba(6, 28, 60, 0.92); --era-side: transparent; --era-side-edge: 1px solid rgba(110, 188, 244, 0.18); --era-foot: rgba(6, 28, 60, 0.92); --era-foot-ink: #bfe5ff;
  --era-head: #ffffff; --era-head-rule: 0; --era-head-font: 800 19px/1.2 var(--display); --era-rule: 1px solid rgba(110, 188, 244, 0.2);
  --era-title: #63c0ff; --era-title-hover: #a5dcff; --era-title-font: 800 21px/1.25 var(--display);
  --text: #dbeeff; --heading: #ffffff; --muted: #8fb8dc; --heading-shadow: none; --panel-line: rgba(110, 188, 244, 0.2);
  --ink-red: var(--ink-red-d); --ink-orange: var(--ink-orange-d); --ink-gold: var(--ink-gold-d); --ink-green: var(--ink-green-d); --ink-teal: var(--ink-teal-d); --ink-blue: var(--ink-blue-d); --ink-purple: var(--ink-purple-d); --ink-pink: var(--ink-pink-d);
  --tile-bg: rgba(12, 44, 88, 0.6); --tile-bg-hi: rgba(20, 60, 112, 0.8); --tile-edge: rgba(110, 188, 244, 0.24);
  --chip-bg: rgba(6, 28, 60, 0.88); --chip-bg-hi: rgba(20, 60, 112, 0.9); --chip-edge: rgba(110, 188, 244, 0.32); --chip-ink: #bfe5ff; --field-bg: rgba(4, 16, 44, 0.8);
}
:root[data-theme="light"][data-era="modern"] .blog-zone {
  --era-sheet: #ffffff; --era-edge: 1px solid #cfe3f7; --era-shadow: 0 18px 46px rgba(12, 60, 140, 0.22);
  --era-menu: #eef6ff; --era-side-edge: 1px solid #e1ecf7; --era-foot: #eef6ff; --era-foot-ink: #1f4d86;
  --era-head: #0b2a55; --era-rule: 1px solid #e1ecf7; --era-title: #1684dc; --era-title-hover: #0b5fa8;
  --text: #24405f; --heading: #0b2a55; --muted: #4f6a8b; --panel-line: #e1ecf7;
  --ink-red: var(--ink-red-l); --ink-orange: var(--ink-orange-l); --ink-gold: var(--ink-gold-l); --ink-green: var(--ink-green-l); --ink-teal: var(--ink-teal-l); --ink-blue: var(--ink-blue-l); --ink-purple: var(--ink-purple-l); --ink-pink: var(--ink-pink-l);
  --tile-bg: #f3f8ff; --tile-bg-hi: #e4efff; --tile-edge: #d3e4f6;
  --chip-bg: #ffffff; --chip-bg-hi: #e9f3ff; --chip-edge: #bdd6f0; --chip-ink: #1667b8; --field-bg: #ffffff;
}
:root[data-era="modern"] .plate h1 { font-size: clamp(32px, 5vw, 54px); }
@media (min-width: 861px) { :root[data-era="modern"][data-layout="classic"] .blog-body { grid-template-columns: minmax(0, 1fr) 290px; } }
:root[data-era="modern"] .blog-main .post-tile .meta { font-size: 0.86rem; }
:root[data-era="modern"] .blog-main .labels .chip { background: none; border: 0; padding: 0 8px 0 0; min-height: 0; color: #ff8a3d; }
:root[data-theme="light"][data-era="modern"] .blog-main .labels .chip { color: #c2470a; }

/* ==== Chobots blog 2009 ("TicTac") ============================================================= */
:root[data-era="classic"] { color-scheme: light; --page-bg: linear-gradient(180deg, #bcd8f5 0, #edf3fc 250px, #edf3fc 100%); }
:root[data-era="classic"] .site-shell::before, :root[data-era="classic"] .site-shell::after,
:root[data-era="y2008"] .site-shell::before, :root[data-era="y2008"] .site-shell::after { display: none; }
:root[data-era="classic"] .blog-zone {
  --era-width: 900px; --era-radius: 0; --era-sheet: #ffffff; --era-edge: 0; --era-shadow: 0 0 0 1px #d6e4f4, 0 12px 34px rgba(60, 110, 170, 0.2);
  --era-menu: none; --era-side: #ffffff; --era-side-edge: 1px solid #dddddd; --era-foot: #ffffff; --era-foot-ink: #666666;
  --era-head: #666666; --era-head-rule: 0; --era-head-font: 700 19px/1.2 var(--display); --era-rule: 1px solid #dddddd;
  --era-title: var(--accent-ink); --era-title-hover: #555555; --era-title-font: 700 24px/1.2 var(--display);
  --accent-text: var(--accent-ink);
  --text: #5f5f5f; --heading: #555555; --muted: #646464; --heading-shadow: none; --panel-line: #dddddd;
  --ink-red: var(--ink-red-l); --ink-orange: var(--ink-orange-l); --ink-gold: var(--ink-gold-l); --ink-green: var(--ink-green-l); --ink-teal: var(--ink-teal-l); --ink-blue: var(--ink-blue-l); --ink-purple: var(--ink-purple-l); --ink-pink: var(--ink-pink-l);
  --tile-bg: #f4f8fd; --tile-bg-hi: #ddedfa; --tile-edge: #cfe0f2;
  --chip-bg: #ddedfa; --chip-bg-hi: #c9e1f7; --chip-edge: #b7d3f0; --chip-ink: #0f5fa8; --field-bg: #ffffff;
  --plate-bg: #ffffff; --plate-edge: #dddddd; --green: #167f45; --warn: #a34b00; --danger: #b3261e; --focus-ring: #0b1d45;
  font-size: 15px;
}
/* The blog's own blues, unless the writer picked another colour. */
:root[data-era="classic"][data-accent="blue"] .blog-zone { --accent: #6699cc; --accent-ink: #3f73a8; --era-title: #1672c4; --band-top: #91c5ee; --band-bottom: #6fb0e6; --band-ink: #0f2e57; --band-shadow: rgba(255, 255, 255, 0.35); }
:root[data-era="classic"][data-heading="crow"] .blog-zone, :root[data-era="y2008"][data-heading="crow"] .blog-zone { --display: Arial, Helvetica, "Trebuchet MS", sans-serif; }
:root[data-era="classic"][data-text="wave"] .blog-zone, :root[data-era="y2008"][data-text="wave"] .blog-zone { --font-text: Arial, Helvetica, Verdana, sans-serif; }
/* The 2009 header: tabs on the left, the name on the right, and the picture as a strip under both. */
:root[data-era="classic"] .hero { display: flex; flex-direction: column; align-items: stretch; overflow: visible; }
:root[data-era="classic"] .hero-art { order: 2; min-height: clamp(90px, 13vw, 132px); }
:root[data-era="classic"] .plate { align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(62%); grid-template-areas: "menu badge" "menu name" "menu tag"; column-gap: 20px; align-items: end; padding: 18px 18px 12px 10px; background: none; }
:root[data-era="classic"] .plate h1 { grid-area: name; text-align: right; font-weight: 700; font-size: clamp(28px, 4.2vw, 44px); color: var(--era-title); text-shadow: none; }
:root[data-era="classic"] .plate .tagline { grid-area: tag; text-align: right; color: #707070; font-weight: 400; text-shadow: none; }
:root[data-era="classic"] .plate .plate-badge { grid-area: badge; justify-self: end; margin: 0 0 4px; }
:root[data-era="classic"] .blog-zone .plate .blog-menu { grid-area: menu; align-self: end; margin: 0; padding: 0; background: none; }
@media (min-width: 861px) { :root[data-era="classic"][data-layout="classic"] .blog-body { grid-template-columns: minmax(0, 1fr) 275px; } }
:root[data-era="classic"] .blog-side { font-size: 0.9em; border-left: 0; }
:root[data-era="classic"] .blog-side .gadget { padding-bottom: 12px; border-bottom: 1px solid #dddddd; }
:root[data-era="classic"] .blog-main .post-tile .meta, :root[data-era="y2008"] .blog-main .post-tile .meta { font-weight: 400; font-size: 0.88em; }
:root[data-era="classic"] .blog-zone .story li::marker { color: #f7941d; }
:root[data-era="classic"] .blog-side li::marker { color: #7cc04b; }
:root[data-era="classic"] .blog-foot { padding: 28px 20px; }

/* ==== Chobots blog 2008 ("Thisaway Blue") ====================================================== */
:root[data-era="y2008"] { color-scheme: light; --page-bg: #859aab; }
:root[data-era="y2008"] .blog-zone {
  --era-width: 760px; --era-radius: 10px; --era-sheet: #f7f0e9; --era-edge: 0; --era-shadow: 0 0 0 1px rgba(32, 64, 99, 0.18), 0 14px 36px rgba(20, 40, 70, 0.3);
  --era-menu: #204063; --era-side: #eef3f8; --era-side-edge: 1px solid #d3deea; --era-foot: #204063; --era-foot-ink: #e6eef7;
  --era-head: #4a6a8a; --era-head-rule: 0; --era-head-font: 700 12.5px/1.3 var(--display); --era-head-space: 0.1em; --era-head-case: uppercase; --era-rule: 3px solid #d8e7f7;
  --era-title: var(--accent-ink); --era-title-hover: #2462a5; --era-title-font: 700 20px/1.25 var(--display);
  --accent-text: var(--accent-ink);
  --text: #204063; --heading: #204063; --muted: #405d7a; --heading-shadow: none; --panel-line: #d8e7f7;
  --ink-red: var(--ink-red-l); --ink-orange: var(--ink-orange-l); --ink-gold: var(--ink-gold-l); --ink-green: var(--ink-green-l); --ink-teal: var(--ink-teal-l); --ink-blue: var(--ink-blue-l); --ink-purple: var(--ink-purple-l); --ink-pink: var(--ink-pink-l);
  --tile-bg: #efe7dd; --tile-bg-hi: #e7dccd; --tile-edge: #d9ccba;
  --chip-bg: #e4ecf5; --chip-bg-hi: #d2e1f1; --chip-edge: #bdd4eb; --chip-ink: #2462a5; --field-bg: #ffffff;
  --plate-bg: #f7f0e9; --plate-edge: #d9ccba; --green: #167f45; --warn: #a34b00; --danger: #b3261e; --focus-ring: #0b1d45;
  font-size: 14.5px;
}
:root[data-era="y2008"][data-accent="blue"] .blog-zone { --accent: #4386ce; --accent-ink: #2a63a4; --era-title: #477fba; --band-top: #477fba; --band-bottom: #2462a5; --band-ink: #ffffff; --band-shadow: rgba(20, 50, 90, 0.5); }
:root[data-era="y2008"] .hero { border-radius: 10px 10px 0 0; }
:root[data-era="y2008"] .plate h1 { font-weight: 700; font-size: clamp(26px, 4.4vw, 40px); }
@media (min-width: 861px) { :root[data-era="y2008"][data-layout="classic"] .blog-body { grid-template-columns: minmax(0, 1fr) 250px; } }
/* Thisaway made every link bold, and put a little mark before each heading. */
:root[data-era="y2008"] .blog-zone :is(.story, .blog-side, .comment-body, .excerpt) a { font-weight: 700; }
:root[data-era="y2008"] :is(.blog-main, .gs-panel, .gs-plain) .panel > .band :is(h1, h2)::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; background: #9ec1e6; box-shadow: 3px 3px 0 #d8e7f7; }
:root[data-era="y2008"] .blog-main .panel.post > .band :is(h1, h2)::before, :root[data-era="y2008"] .blog-main .panel.page-sheet > .band :is(h1, h2)::before { content: none; }
:root[data-era="y2008"] .blog-foot { padding: 20px; }

/* ==== The two old themes: buttons and labels as they were, square and plain ==================== */
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .btn {
  min-height: 32px; padding: 0 12px; border-radius: 3px; background: var(--chip-bg); border: 2px outset var(--chip-edge); color: var(--chip-ink);
  font: 700 13px/1 var(--display); letter-spacing: 0; text-shadow: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .btn::before { display: none; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .btn:hover { transform: none; background: var(--chip-bg-hi); filter: none; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .btn:active { border-style: inset; transform: none; box-shadow: none; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .btn.chosen { background: #fff3c4; border-color: #e8c765; color: #6b4700; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .chip { min-height: 26px; padding: 3px 9px; border-radius: 3px; border-width: 1px; font: 700 12.5px/1.25 var(--display); letter-spacing: 0; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .chip.gold { background: #fff3c4; border-color: #e8c765; color: #6b4700; box-shadow: none; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone :is(.field, .comment, .tile:not(.post-tile), .cho-card, .tile-pic img) { border-radius: 3px; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .cho-card-kind { border-radius: 2px; }
/* A gallery's strip as square as the pictures in it (story.mjs): a round one cut their corners. */
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .cho-gallery { border-radius: 3px; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .cho-gallery-n { border-radius: 2px; }
:root:is([data-era="classic"], [data-era="y2008"]) .blog-zone .stamp { border-radius: 3px; box-shadow: none; }

/* ==== The menu (<html data-menu>): buttons are the default and need nothing ==================== */
:root[data-menu="tabs"] .blog-menu { gap: 3px; padding: 0 4px; border-bottom: 3px solid var(--band-top); }
:root[data-menu="tabs"] .blog-menu .chip { min-height: 38px; padding: 0 16px; border-radius: 12px 12px 0 0; border-bottom: 0; font-size: 15px; }
:root[data-menu="tabs"] .blog-menu .chip.gold { background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); border-color: transparent; color: var(--band-ink); box-shadow: none; }
:root[data-menu="bar"] .blog-menu { gap: 2px; padding: 4px; border-radius: 12px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); }
:root[data-menu="bar"] .blog-menu .chip { min-height: 36px; border-radius: 9px; background: none; border-color: transparent; color: var(--band-ink); font-size: 15px; }
:root[data-menu="bar"] .blog-menu a.chip:hover { background: rgba(255, 255, 255, 0.2); }
:root[data-menu="bar"] .blog-menu .chip.gold { background: rgba(255, 255, 255, 0.94); color: #16305e; box-shadow: none; }
:root[data-menu="links"] .blog-menu { gap: 4px 22px; }
:root[data-menu="links"] .blog-menu .chip { min-height: 0; padding: 4px 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--accent-text); font-size: 16px; }
:root[data-menu="links"] .blog-menu a.chip:hover { background: none; border-bottom-color: currentColor; }
:root[data-menu="links"] .blog-menu .chip.gold { color: var(--heading); border-bottom-color: var(--accent-text); box-shadow: none; }
/* In a theme the menu is a strip of the sheet, so each kind is drawn for it. */
:root:where([data-era]:not([data-era="stage"]))[data-menu="tabs"] .blog-zone .plate .blog-menu { padding-bottom: 0; border-bottom: 0; align-items: flex-end; }
:root:where([data-era]:not([data-era="stage"]))[data-menu="bar"] .blog-zone .plate .blog-menu { background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); }
:root[data-era="modern"][data-menu="tabs"] .blog-menu .chip { border-radius: 11px 11px 0 0; background: none; border-color: transparent; color: #d8f5ff; }
:root[data-era="modern"][data-menu="tabs"] .blog-menu a.chip:hover { background: rgba(28, 102, 184, 0.62); }
:root[data-era="modern"][data-menu="tabs"] .blog-menu .chip.gold { background: linear-gradient(180deg, #cbf2ff, #7cd2ff); color: #093166; }
:root[data-theme="light"][data-era="modern"][data-menu="tabs"] .blog-menu .chip { color: #1684dc; }
:root[data-theme="light"][data-era="modern"][data-menu="tabs"] .blog-menu a.chip:hover { background: #ddf2ff; }
:root[data-theme="light"][data-era="modern"][data-menu="tabs"] .blog-menu .chip.gold { background: linear-gradient(180deg, #b6e5ff, #5faee4); color: #ffffff; }
:root[data-era="classic"][data-menu="tabs"] .blog-menu { gap: 5px; }
:root[data-era="classic"][data-menu="tabs"] .blog-menu .chip { min-height: 0; padding: 14px 15px; border: 0; border-radius: 0; background: none; color: #1684dc; font: 400 17px/1 var(--display); }
:root[data-era="classic"][data-menu="tabs"] .blog-menu a.chip:hover { background: #ddedfa; border-radius: 0 0 9px 9px; }
:root[data-era="classic"][data-menu="tabs"] .blog-menu .chip.gold { background: var(--band-top); color: var(--band-ink); border-radius: 0 0 9px 0; }
:root[data-era="y2008"][data-menu="tabs"] .blog-menu .chip, :root[data-era="y2008"][data-menu="chips"] .blog-menu .chip { background: none; border-color: rgba(255, 255, 255, 0.4); color: #ffffff; }
:root[data-era="y2008"][data-menu="tabs"] .blog-menu .chip.gold, :root[data-era="y2008"][data-menu="chips"] .blog-menu .chip.gold { background: #f7f0e9; border-color: #f7f0e9; color: #204063; }
:root[data-era="y2008"][data-menu="links"] .blog-menu .chip { color: #cfe2f6; }
:root[data-era="y2008"][data-menu="links"] .blog-menu .chip.gold { color: #ffffff; border-bottom-color: #ffffff; }
:root[data-era="classic"][data-menu="bar"] .blog-zone .plate .blog-menu { padding: 4px; border-radius: 6px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); }

/* ==== Pictures in the list of posts (<html data-thumb>) ======================================== */
.tile-pic { display: block; }
.tile-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--tile-edge); }
.tile-pic.pic-sticker img { object-fit: contain; padding: 6px; background: var(--tile-bg-hi); }
:root[data-thumb="side"] .blog-main .post-tile.has-pic { display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 30%, 230px); column-gap: 18px; align-items: start; }
:root[data-thumb="side"] .blog-main .post-tile.has-pic > :not(.tile-pic, .stamp) { grid-column: 1; }
:root[data-thumb="side"] .blog-main .post-tile.has-pic > .tile-pic { grid-column: 2; grid-row: 1 / span 4; }
:root[data-thumb="top"] .blog-main .post-tile.has-pic > .tile-pic { margin: 0 0 12px; }
:root[data-thumb="top"] .blog-main .post-tile.has-pic > .tile-pic img { aspect-ratio: 16 / 7; }
:root[data-thumb="top"] .blog-main .post-tile.has-pic > .tile-pic.pic-sticker img { aspect-ratio: auto; height: 150px; }

/* ==== A post's date as a page off a calendar (<html data-dates="stamp">) ======================= */
.post-tile.has-stamp { position: relative; min-height: 84px; padding-left: 84px; }
.stamp { position: absolute; left: 14px; top: 14px; display: grid; width: 56px; overflow: hidden; text-align: center; border-radius: 10px; background: #ffffff; color: #16305e; border: 2px solid var(--band-bottom); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); }
.stamp-month { padding: 4px 0 3px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); font: 800 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.stamp-day { padding: 5px 0 6px; font: 800 24px/1 var(--display); }

/* ==== The size of the words and the width of the page ========================================= */
:root[data-scale="large"] .blog-zone .story { font-size: 1.26rem; }
:root[data-scale="large"] .blog-zone :is(.excerpt, .comment-body, .words) { font-size: 1.12rem; }
:root[data-scale="small"] .blog-zone .story { font-size: 0.95rem; }
:root[data-scale="small"] .blog-zone :is(.excerpt, .comment-body, .words) { font-size: 0.9rem; }
:root[data-width="narrow"] .wrap.blog-zone { width: min(100% - 24px, 860px); }
:root[data-width="wide"] .wrap.blog-zone { width: min(100% - 24px, 1360px); }
:root[data-era="modern"][data-width="narrow"] .blog-zone { --era-width: 840px; }
:root[data-era="modern"][data-width="wide"] .blog-zone { --era-width: 1180px; }
:root[data-era="classic"][data-width="narrow"] .blog-zone { --era-width: 780px; }
:root[data-era="classic"][data-width="wide"] .blog-zone { --era-width: 1080px; }
:root[data-era="y2008"][data-width="narrow"] .blog-zone { --era-width: 680px; }
:root[data-era="y2008"][data-width="wide"] .blog-zone { --era-width: 920px; }
:root:where([data-era]:not([data-era="stage"]))[data-width] .wrap.blog-zone { width: min(100% - 24px, var(--era-width)); }

/* ==== On the main site: a blog's card in its theme, and the studio's swatches ================== */
.look-card[data-era="classic"] { --card-page: #ffffff; --card-ink: #555555; --card-soft: #646464; --card-chip: #ddedfa; --card-edge: #b7d3f0; border-radius: 2px; }
.look-card[data-era="classic"] strong, .look-card[data-era="classic"] h3 a { color: #1672c4; }
.look-card[data-era="y2008"] { --card-page: #f7f0e9; --card-ink: #204063; --card-soft: #405d7a; --card-chip: #e4ecf5; --card-edge: #6f8aa3; border-radius: 9px; }
.look-card[data-era="y2008"] strong, .look-card[data-era="y2008"] h3 a { color: #2f66a3; }
.look-card[data-era="modern"] { --card-page: #04142f; --card-ink: #dbeeff; --card-soft: #8fb8dc; --card-chip: rgba(6, 28, 60, 0.88); --card-edge: rgba(110, 188, 244, 0.45); }
.look-card[data-era="modern"] strong, .look-card[data-era="modern"] h3 a { color: #63c0ff; }
.look-card[data-era="classic"][data-heading="crow"], .look-card[data-era="y2008"][data-heading="crow"] { --display: Arial, Helvetica, sans-serif; }
.look-card[data-era="classic"][data-heading="crow"] strong, .look-card[data-era="y2008"][data-heading="crow"] strong, .look-card[data-era="classic"][data-heading="crow"] h3, .look-card[data-era="y2008"][data-heading="crow"] h3 { font-weight: 700; }

.picker-era { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.picker-era .swatch, .picker-menu .swatch, .picker-thumb .swatch, .picker-dates .swatch, .picker-scale .swatch, .picker-width .swatch { background-color: var(--tile-bg-hi); background-repeat: no-repeat; }
.picker-era .swatch { height: 78px; }
.picker-menu .swatch, .picker-thumb .swatch, .picker-dates .swatch, .picker-scale .swatch, .picker-width .swatch { height: 44px; }
.picker-note { grid-column: 1 / -1; margin: 0; }
.swatch.era-stage { background: var(--stars), linear-gradient(180deg, #04071c, #164a9a); }
.swatch.era-modern, .swatch.preset-blognow {
  background:
    linear-gradient(#63c0ff, #63c0ff) 14% 58% / 44% 6px no-repeat, linear-gradient(#8fb8dc, #8fb8dc) 14% 73% / 52% 3px no-repeat, linear-gradient(#8fb8dc, #8fb8dc) 14% 85% / 40% 3px no-repeat,
    linear-gradient(#2a5d9e, #2a5d9e) 90% 78% / 22% 30% no-repeat, linear-gradient(180deg, #58b4f2 0 36%, #04142f 36%);
}
.swatch.era-classic, .swatch.preset-blog2009 {
  background:
    linear-gradient(#91c5ee, #91c5ee) 8% 10% / 20% 16% no-repeat, linear-gradient(#4aa3f5, #4aa3f5) 88% 16% / 34% 8px no-repeat,
    linear-gradient(#4aa3f5, #4aa3f5) 10% 52% / 44% 6px no-repeat, linear-gradient(#bdbdbd, #bdbdbd) 10% 68% / 52% 3px no-repeat, linear-gradient(#bdbdbd, #bdbdbd) 10% 80% / 40% 3px no-repeat,
    linear-gradient(#e2e2e2, #e2e2e2) 92% 76% / 22% 38% no-repeat, #ffffff;
  box-shadow: inset 0 0 0 3px #dbe8f8;
}
.swatch.era-y2008, .swatch.preset-blog2008 {
  background:
    linear-gradient(#477fba, #477fba) 22% 54% / 34% 6px no-repeat, linear-gradient(#9fb4c8, #9fb4c8) 24% 68% / 40% 3px no-repeat,
    linear-gradient(#e4ecf5, #e4ecf5) 80% 66% / 16% 34% no-repeat,
    linear-gradient(180deg, #3d5f8f 0 30%, #f7f0e9 30% 86%, #204063 86%) 50% 50% / 74% 84% no-repeat, #859aab;
}
.swatch.menu-chips { background-image: radial-gradient(ellipse 14% 26% at 20% 50%, var(--accent-text) 0 96%, transparent 100%), radial-gradient(ellipse 14% 26% at 50% 50%, var(--muted) 0 96%, transparent 100%), radial-gradient(ellipse 14% 26% at 80% 50%, var(--muted) 0 96%, transparent 100%); }
.swatch.menu-tabs { background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--accent-text), var(--accent-text)); background-position: 12% 46%, 46% 46%, 80% 46%, 50% 78%; background-size: 24% 36%, 24% 36%, 24% 36%, 88% 4px; }
.swatch.menu-bar { background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(var(--accent-text), var(--accent-text)); background-position: 14% 50%, 50% 50%; background-size: 22% 30%, 88% 52%; }
.swatch.menu-links { background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--accent-text), var(--accent-text)); background-position: 12% 44%, 46% 44%, 80% 44%, 12% 66%; background-size: 22% 5px, 22% 5px, 22% 5px, 22% 3px; }
.swatch.thumb-none { background-image: linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)); background-position: 50% 28%, 30% 52%, 40% 76%; background-size: 80% 5px, 62% 4px, 70% 4px; }
.swatch.thumb-side { background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)); background-position: 90% 50%, 12% 28%, 12% 52%, 12% 76%; background-size: 28% 70%, 50% 5px, 44% 4px, 48% 4px; }
.swatch.thumb-top { background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)); background-position: 50% 16%, 16% 72%, 20% 90%; background-size: 80% 44%, 60% 5px, 70% 4px; }
.swatch.dates-line { background-image: linear-gradient(var(--heading), var(--heading)), linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(var(--muted), var(--muted)); background-position: 14% 28%, 12% 52%, 16% 76%; background-size: 60% 6px, 34% 4px, 70% 4px; }
.swatch.dates-stamp { background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(#ffffff, #ffffff), linear-gradient(var(--heading), var(--heading)), linear-gradient(var(--muted), var(--muted)); background-position: 10% 22%, 10% 68%, 78% 34%, 84% 64%; background-size: 22% 26%, 22% 44%, 50% 6px, 56% 4px; }
.swatch.scale-normal, .swatch.scale-large, .swatch.scale-small { display: grid; place-items: center; }
.swatch.scale-normal::after, .swatch.scale-large::after, .swatch.scale-small::after { content: "Aa"; font: 800 18px/1 "ChoUiDisplay", "Arial Black", sans-serif; color: var(--heading); }
.swatch.scale-large::after { font-size: 26px; }
.swatch.scale-small::after { font-size: 13px; }
.swatch.width-normal { background-image: linear-gradient(var(--muted), var(--muted)); background-position: 50% 50%; background-size: 62% 64%; }
.swatch.width-narrow { background-image: linear-gradient(var(--muted), var(--muted)); background-position: 50% 50%; background-size: 40% 64%; }
.swatch.width-wide { background-image: linear-gradient(var(--muted), var(--muted)); background-position: 50% 50%; background-size: 88% 64%; }

@media (max-width: 860px) {
  :root:where([data-era]:not([data-era="stage"])) .blog-body { grid-template-columns: minmax(0, 1fr); }
  :root:where([data-era]:not([data-era="stage"])) .blog-side { border-left: 0; border-right: 0; border-top: var(--era-side-edge); }
  :root[data-era="classic"] .plate { grid-template-columns: minmax(0, 1fr); grid-template-areas: "badge" "name" "tag" "menu"; padding: 14px 14px 8px; }
  :root[data-era="classic"] .plate h1, :root[data-era="classic"] .plate .tagline { text-align: left; }
  :root[data-era="classic"] .plate .plate-badge { justify-self: start; }
  :root[data-era="classic"] .blog-zone .plate .blog-menu { margin-top: 10px; }
}
@media (max-width: 560px) {
  :root[data-thumb="side"] .blog-main .post-tile.has-pic { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; }
  :root:where([data-era]:not([data-era="stage"])) .blog-main { padding: 16px 14px 4px; }
  :root:where([data-era]:not([data-era="stage"])) .blog-side { padding: 16px 14px 4px; }
  .post-tile.has-stamp { padding-left: 72px; }
  .stamp { left: 10px; width: 50px; }
  /* A calendar page on one side and a picture on the other left the words a column of 125px (a
     title on four lines). With a calendar page, the picture goes under the words on a phone. */
  :root[data-thumb="side"] .blog-main .post-tile.has-pic.has-stamp { grid-template-columns: minmax(0, 1fr); }
  :root[data-thumb="side"] .blog-main .post-tile.has-pic.has-stamp > .tile-pic { grid-column: 1; grid-row: auto; margin-top: 10px; }
}

/* ==== The scrollbar (<html data-scroll>) =======================================================
   "site" is the main site's own and needs nothing here; "plain" is the browser's. The machinery
   and the variables are in site.css. A theme from 2008 or 2009 is a pale page whoever reads it,
   so there the site's scrollbar is its daytime one. */
:root:is([data-era="classic"], [data-era="y2008"])[data-scroll="site"] { --sb-thumb: linear-gradient(180deg, #8fd0fb 0%, #3f8fe6 55%, #2a6fd0 100%); --sb-track: #cfe6fb; --sb-ff-thumb: #3f8fe0; --sb-ff-track: #cfe6fb; }
:root[data-scroll="slim"] { --sb-size: 9px; --sb-gap: 2px; --sb-thumb: #8fa9c8; --sb-track: transparent; --sb-ff-thumb: #8fa9c8; --sb-ff-track: transparent; --sb-ff-width: thin; }
:root[data-scroll="blog"] { --sb-thumb: linear-gradient(180deg, var(--band-top), var(--band-bottom)); --sb-track: rgba(0, 0, 0, 0.28); --sb-ff-thumb: var(--band-top); --sb-ff-track: rgba(0, 0, 0, 0.28); }
:root[data-scroll="gold"] { --sb-thumb: linear-gradient(180deg, #ffe27a 0%, #ffb300 55%, #e08a00 100%); --sb-track: #3a2500; --sb-ff-thumb: #ffb300; --sb-ff-track: #3a2500; }
:root[data-scroll="candy"] { --sb-thumb: repeating-linear-gradient(135deg, #ff7fb8 0 8px, #ffffff 8px 16px); --sb-track: #ffe3f0; --sb-ff-thumb: #ff7fb8; --sb-ff-track: #ffe3f0; }
:root[data-scroll="rainbow"] { --sb-thumb: linear-gradient(180deg, #ff5f6d, #ffa63d, #e8c900, #3dbb6c, #2f9fe0, #9b5de5); --sb-track: #1b1d2b; --sb-ff-thumb: #9b5de5; --sb-ff-track: #1b1d2b; }
:root[data-scroll="bubble"] { --sb-size: 18px; --sb-thumb: radial-gradient(circle at 34% 12%, #ffffff 0%, #b9e6ff 30%, #4aa8f0 100%); --sb-track: rgba(120, 190, 255, 0.2); --sb-ff-thumb: #7cc6f7; --sb-ff-track: transparent; }
:root[data-scroll="pixel"] { --sb-size: 16px; --sb-gap: 0px; --sb-radius: 0; --sb-thumb: #24bdff; --sb-track: conic-gradient(#1b2740 25%, #10182b 0 50%, #1b2740 0 75%, #10182b 0) 0 0 / 16px 16px; --sb-ff-thumb: #24bdff; --sb-ff-track: #10182b; }
:root[data-scroll="pixel"]::-webkit-scrollbar-thumb, :root[data-scroll="pixel"] ::-webkit-scrollbar-thumb { border: 3px solid #10131c; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.55), inset -3px -3px 0 rgba(0, 0, 0, 0.3); }
:root[data-scroll="retro"] { --sb-size: 17px; --sb-gap: 0px; --sb-radius: 0; --sb-thumb: #c0c0c0; --sb-track: conic-gradient(#ffffff 25%, #c0c0c0 0 50%, #ffffff 0 75%, #c0c0c0 0) 0 0 / 2px 2px; --sb-ff-thumb: #c0c0c0; --sb-ff-track: #e4e4e4; }
:root[data-scroll="retro"]::-webkit-scrollbar-thumb, :root[data-scroll="retro"] ::-webkit-scrollbar-thumb { border: 2px outset #ffffff; }

.picker-scroll .swatch { height: 44px; background-color: var(--tile-bg-hi); background-repeat: no-repeat; }
.swatch.scroll-site   { background: linear-gradient(180deg, #8ad9ff, #1f66c8) 88% 34% / 10px 58% no-repeat, linear-gradient(#06173a, #06173a) 88% 50% / 14px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-plain  { background: linear-gradient(#9a9a9a, #9a9a9a) 88% 34% / 10px 58% no-repeat, linear-gradient(#ececec, #ececec) 88% 50% / 14px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-slim   { background: linear-gradient(#8fa9c8, #8fa9c8) 90% 34% / 5px 58% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-blog   { background: linear-gradient(180deg, var(--band-top), var(--band-bottom)) 88% 34% / 10px 58% no-repeat, linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)) 88% 50% / 14px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-gold   { background: linear-gradient(180deg, #ffe27a, #e08a00) 88% 34% / 10px 58% no-repeat, linear-gradient(#3a2500, #3a2500) 88% 50% / 14px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-candy  { background: repeating-linear-gradient(135deg, #ff7fb8 0 5px, #ffffff 5px 10px) 88% 34% / 10px 58% no-repeat, linear-gradient(#ffe3f0, #ffe3f0) 88% 50% / 14px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-rainbow { background: linear-gradient(180deg, #ff5f6d, #ffa63d, #e8c900, #3dbb6c, #2f9fe0, #9b5de5) 88% 34% / 10px 58% no-repeat, linear-gradient(#1b1d2b, #1b1d2b) 88% 50% / 14px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-bubble { background: radial-gradient(circle at 34% 12%, #ffffff, #b9e6ff 30%, #4aa8f0) 88% 34% / 14px 58% no-repeat, linear-gradient(rgba(120, 190, 255, 0.3), rgba(120, 190, 255, 0.3)) 88% 50% / 18px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-pixel  { background: linear-gradient(#24bdff, #24bdff) 88% 34% / 12px 52% no-repeat, linear-gradient(#10182b, #10182b) 88% 50% / 16px 100% no-repeat, var(--tile-bg-hi); }
.swatch.scroll-retro  { background: linear-gradient(#c0c0c0, #c0c0c0) 88% 34% / 14px 52% no-repeat, linear-gradient(#e4e4e4, #e4e4e4) 88% 50% / 16px 100% no-repeat, var(--tile-bg-hi); }

/* ==== The header: its height, where the name sits, and the picture behind it ==================
   <html data-tall data-platepos data-artpos data-artzoom data-tint data-tintpower data-artfx>.
   The wash and the effect live inside .hero-art, so they cover the picture and never the name. */
:root[data-tall="short"] .hero { min-height: 190px; }
:root[data-tall="tall"] .hero { min-height: 430px; }
:root[data-platepos="cb"] .hero, :root[data-platepos="ct"] .hero, :root[data-platepos="cc"] .hero { justify-content: center; text-align: center; }
:root[data-platepos="rb"] .hero, :root[data-platepos="rt"] .hero { justify-content: flex-end; }
:root[data-platepos="lt"] .hero, :root[data-platepos="ct"] .hero, :root[data-platepos="rt"] .hero { align-items: flex-start; }
:root[data-platepos="cc"] .hero { align-items: center; }
:root[data-platepos="cb"] .plate .chips, :root[data-platepos="ct"] .plate .chips, :root[data-platepos="cc"] .plate .chips { justify-content: center; }

:root[data-artpos="lt"] .hero-art { background-position: left top; }
:root[data-artpos="t"] .hero-art { background-position: center top; }
:root[data-artpos="rt"] .hero-art { background-position: right top; }
:root[data-artpos="l"] .hero-art { background-position: left center; }
:root[data-artpos="r"] .hero-art { background-position: right center; }
:root[data-artpos="lb"] .hero-art { background-position: left bottom; }
:root[data-artpos="b"] .hero-art { background-position: center bottom; }
:root[data-artpos="rb"] .hero-art { background-position: right bottom; }
:root[data-artzoom="close"] .hero-art { background-size: 150% auto; }
:root[data-artzoom="closer"] .hero-art { background-size: 215% auto; }

.hero-art::before, .hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; display: none; }
:root[data-tint]:not([data-tint="none"]) .hero-art::after { display: block; background: var(--hero-wash); opacity: 0.5; }
:root[data-tintpower="soft"] .hero-art::after { opacity: 0.3; }
:root[data-tintpower="strong"] .hero-art::after { opacity: 0.76; }
:root[data-tint="dusk"] { --hero-wash: linear-gradient(180deg, transparent 15%, #04071c 100%); }
:root[data-tint="dawn"] { --hero-wash: linear-gradient(180deg, #fff3c9 0%, transparent 72%); }
:root[data-tint="blog"] { --hero-wash: linear-gradient(135deg, var(--band-top), var(--band-bottom)); }
:root[data-tint="sunset"] { --hero-wash: linear-gradient(160deg, #ff7a1a 0%, #e2569f 58%, #5b2bb5 100%); }
:root[data-tint="ocean"] { --hero-wash: linear-gradient(160deg, #17c7b7 0%, #1f6fe0 58%, #0b1d45 100%); }
:root[data-tint="berry"] { --hero-wash: linear-gradient(160deg, #ff7fb8 0%, #8a55e0 100%); }
:root[data-tint="rainbow"] { --hero-wash: linear-gradient(90deg, #ff5f6d, #ffa63d, #e8c900, #3dbb6c, #2f9fe0, #9b5de5); }
:root[data-tint="spot"] { --hero-wash: radial-gradient(ellipse 55% 85% at 50% 42%, transparent 0 28%, #04071c 100%); }
:root[data-tint="edges"] { --hero-wash: radial-gradient(ellipse at center, transparent 42%, #000000 100%); }
:root[data-artfx="soft"] .hero-art { filter: blur(3px); scale: 1.04; }
:root[data-artfx="grey"] .hero-art { filter: grayscale(1); }
:root[data-artfx="sepia"] .hero-art { filter: sepia(0.85) contrast(0.95); }
:root[data-artfx="vivid"] .hero-art { filter: saturate(1.7) contrast(1.08); }
:root[data-artfx="lines"] .hero-art::before { display: block; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 5px); }
:root[data-artfx="dots"] .hero-art::before { display: block; background: radial-gradient(circle, rgba(0, 0, 0, 0.36) 0 1.5px, transparent 2px) 0 0 / 7px 7px; }

/* ==== Who stands in the header ==================================================================
   Three things can stand in a blog's header: the writer's own Chobot (.hero-self), a character
   from the library (.hero-mascot) and, on a group blog, its writers together (.hero-crew). The
   header says which it holds (.with-self, .with-mascot, .with-crew: render.mjs, heroCast),
   because a Chobot whose profile is not public is not drawn at all, and room made for nobody
   would be a hole in the header.

   THE RULE: nobody stands on the blog's name, and the name is never laid over anybody. Whoever
   stands in the header is given room of their own BY THE HEADER (padding on the side they stand,
   or a band under the name), so it holds at every width and for a name of any length, with no
   sums about how wide the name came out:
     - on a wide screen they stand BESIDE the name, on the side the look says;
     - on a narrow one, and wherever they stand in the middle, they stand in a band UNDER it;
     - a group stands under the name, or beside it when the name keeps to one side.
   Sizes follow the screen smoothly (clamp), so a header is the same picture from a phone to a
   wide monitor and does not jump at one width.

   <html data-self data-selfcrop data-selfside data-selfsize data-selfpose data-selflook>. A
   Chobot's picture is always the whole Chobot on a square; how much of it shows is cut here,
   with the avatar service's own measures for "head and shoulders" and "head". Poses turn the
   picture: they never ask the service for anything. */
@keyframes self-float { 0%, 100% { translate: 0 -4%; } 50% { translate: 0 -12%; } }

.hero {
  --self: clamp(112px, 17vw, 190px);       /* how wide the writer's Chobot stands */
  --self-in: clamp(10px, 6%, 72px);        /* how far in from its side */
  --self-wide: min(var(--self), 46%);
  --self-seen: 1;                          /* how much of its height is in sight (a peek is less) */
  --self-sway: 0;                          /* how far it leans out of its square, as a part of it */
  --self-lift: 0px;                        /* how far off the floor (a ring floats a little) */
  --mascot: clamp(92px, 14vw, 190px);
  --mascot-in: clamp(10px, 5%, 64px);
  --mascot-wide: min(var(--mascot), 34%);
  --crew: clamp(92px, 11.5vw, 132px);      /* how wide one writer of a group stands */
  --cast-gap: 16px;                        /* between whoever stands there and the name */
  /* What each needs kept clear for it: beside the name, and under it. */
  --self-beside: calc(var(--self-in) + var(--self-wide) * (1 + var(--self-sway)) + var(--cast-gap));
  --self-under: calc(var(--self-wide) * var(--self-seen) + var(--self-lift) + var(--cast-gap));
  --mascot-beside: calc(var(--mascot-in) + var(--mascot-wide) + var(--cast-gap));
  --mascot-under: calc(var(--mascot-wide) * 1.25 + var(--cast-gap));
  --crew-band: calc(var(--crew) * 1.25);   /* a front row and a back row, standing */
  --crew-part: 50%;                        /* how much of the header a group has, beside the name */
}
.hero.crew-one { --crew-part: 24%; }
.hero.crew-few { --crew-part: 36%; }
:root[data-selfsize="small"] .hero { --self: clamp(84px, 12vw, 130px); --crew: clamp(74px, 9vw, 100px); }
:root[data-selfsize="large"] .hero { --self: clamp(140px, 23vw, 270px); --crew: clamp(118px, 15vw, 172px); }

/* ---- the writer's own Chobot ------------------------------------------------------------------- */
.hero-self { position: absolute; z-index: 1; bottom: var(--self-lift); right: var(--self-in); width: var(--self-wide); aspect-ratio: 1; max-height: 96%; pointer-events: none; }
.hero-self img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; }
:root[data-selfside="left"] .hero-self { right: auto; left: var(--self-in); }
:root[data-selfside="center"] .hero-self { right: auto; left: 50%; translate: -50% 0; }
:root[data-selfcrop="bust"] .hero-self, :root[data-selfcrop="head"] .hero-self { overflow: hidden; border-radius: 0 0 18px 18px; }
:root[data-selfcrop="bust"] .hero-self img { width: 150.6%; height: 150.6%; max-width: none; margin: -8.9% 0 0 -25.3%; object-fit: fill; }
:root[data-selfcrop="head"] .hero-self img { width: 237%; height: 237%; max-width: none; margin: -15.6% 0 0 -68.5%; object-fit: fill; }
:root[data-selfpose="flip"] .hero-self img { scale: -1 1; }
:root[data-selfpose="lean"] .hero-self img { rotate: -9deg; }
:root[data-selfpose="back"] .hero-self img { rotate: 9deg; }
:root[data-selfpose="lean"] .hero, :root[data-selfpose="back"] .hero { --self-sway: 0.16; }
/* Peeking over the foot of the header: the top six tenths of its square, whatever the header's
   height and however the picture is cut (it used to sink by a part of the HEADER's height, so a
   taller header hid more of it). */
:root[data-selfpose="peek"] .hero { --self-seen: 0.6; }
:root[data-selfpose="peek"] .hero-self { translate: 0 40%; clip-path: inset(-40% -40% 40% -40%); max-height: none; }
:root[data-selfpose="peek"][data-selfside="center"] .hero-self { translate: -50% 40%; }
:root[data-selfpose="peek"] .hero-self img { rotate: 4deg; }
:root[data-selfpose="float"] .hero-self img { animation: self-float 4.5s ease-in-out infinite; }
:root[data-selflook="shadow"] .hero-self img { filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.45)); }
:root[data-selflook="sticker"] .hero-self img { filter: drop-shadow(3px 0 0 #ffffff) drop-shadow(-3px 0 0 #ffffff) drop-shadow(0 3px 0 #ffffff) drop-shadow(0 -3px 0 #ffffff) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.35)); }
:root[data-selflook="glow"] .hero-self img { filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 20px var(--accent)); }
:root[data-selflook="ghost"] .hero-self img { opacity: 0.55; }
:root[data-selflook="ring"] .hero { --self-lift: 14px; }
:root[data-selflook="ring"] .hero-self { overflow: hidden; border-radius: 50%; border: 4px solid #ffffff; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); box-shadow: 0 0 0 3px var(--band-bottom), 0 10px 22px rgba(0, 0, 0, 0.4); }
@media (prefers-reduced-motion: reduce) { :root[data-selfpose="float"] .hero-self img { animation: none; } }

/* ---- a character from the library --------------------------------------------------------------
   On the right; on the left when the writer's own Chobot has the right. */
.hero-mascot { position: absolute; bottom: 0; right: var(--mascot-in); width: var(--mascot-wide); height: auto; aspect-ratio: 4 / 5; max-height: 96%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.35)); pointer-events: none; }
:root[data-selfside="right"] .hero.with-self .hero-mascot { right: auto; left: var(--mascot-in); }

/* ---- a group picture: a group blog's writers together ------------------------------------------
   Each writer is a square picture standing on a spot the look names: nine across the front
   (crew-f1 to crew-f9) and nine across the back (crew-b1 to crew-b9), which stand higher,
   smaller and in the gaps. A spot is a class here and never a style on the page. How big, how
   they stand and how they are drawn are the dials one Chobot has, and are for everybody;
   "turned" is one writer facing the other way. */
.hero-crew { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.crew-member { position: absolute; bottom: 0; width: min(var(--crew), 26%); aspect-ratio: 1; translate: -50% 0; }
.crew-member img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; }
.crew-member.turned { scale: -1 1; }
.crew-f1 { left: 10%; } .crew-f2 { left: 20%; } .crew-f3 { left: 30%; } .crew-f4 { left: 40%; } .crew-f5 { left: 50%; } .crew-f6 { left: 60%; } .crew-f7 { left: 70%; } .crew-f8 { left: 80%; } .crew-f9 { left: 90%; }
.crew-b1 { left: 5%; } .crew-b2 { left: 15%; } .crew-b3 { left: 25%; } .crew-b4 { left: 35%; } .crew-b5 { left: 45%; } .crew-b6 { left: 55%; } .crew-b7 { left: 65%; } .crew-b8 { left: 75%; } .crew-b9 { left: 85%; }
.crew-member[class*="crew-b"] { bottom: min(calc(var(--crew) * 0.4), 20%); width: min(calc(var(--crew) * 0.84), 22%); }
/* (One writer, or a few, stand at their full size: the part of the header they have is too narrow to measure them by.) */
.hero:is(.crew-one, .crew-few) .crew-member { width: var(--crew); }
.hero:is(.crew-one, .crew-few) .crew-member[class*="crew-b"] { width: calc(var(--crew) * 0.84); }
/* Two or three writers stand side by side, in the order of their places, however close those
   places are. Placed by tenths of the band, the three of them stood in a pile with their faces
   hidden: on a phone a tenth of the band is a third of a figure. (A back-row writer still
   stands a little higher and smaller.) */
.hero.crew-few .hero-crew { display: flex; justify-content: space-evenly; align-items: flex-end; }
.hero.crew-few .crew-member { position: relative; left: auto; bottom: auto; translate: none; flex: 0 1 var(--crew); min-width: 0; }
.hero.crew-few .crew-member[class*="crew-b"] { flex-basis: calc(var(--crew) * 0.84); margin-bottom: min(calc(var(--crew) * 0.3), 12%); }
.hero.crew-few :is(.crew-f1, .crew-b1) { order: 1; } .hero.crew-few :is(.crew-f2, .crew-b2) { order: 2; } .hero.crew-few :is(.crew-f3, .crew-b3) { order: 3; }
.hero.crew-few :is(.crew-f4, .crew-b4) { order: 4; } .hero.crew-few :is(.crew-f5, .crew-b5) { order: 5; } .hero.crew-few :is(.crew-f6, .crew-b6) { order: 6; }
.hero.crew-few :is(.crew-f7, .crew-b7) { order: 7; } .hero.crew-few :is(.crew-f8, .crew-b8) { order: 8; } .hero.crew-few :is(.crew-f9, .crew-b9) { order: 9; }
:root[data-selfpose="flip"] .crew-member img { scale: -1 1; }
:root[data-selfpose="lean"] .crew-member img { rotate: -9deg; }
:root[data-selfpose="back"] .crew-member img { rotate: 9deg; }
:root[data-selfpose="peek"] .crew-member img { translate: 0 34%; rotate: 4deg; }
:root[data-selfpose="float"] .crew-member img { animation: self-float 4.5s ease-in-out infinite; }
:root[data-selfpose="float"] .crew-member:nth-child(3n + 2) img { animation-delay: -1.5s; }
:root[data-selfpose="float"] .crew-member:nth-child(3n) img { animation-delay: -3s; }
:root[data-selflook="shadow"] .crew-member img { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.45)); }
:root[data-selflook="sticker"] .crew-member img { filter: drop-shadow(2px 0 0 #ffffff) drop-shadow(-2px 0 0 #ffffff) drop-shadow(0 2px 0 #ffffff) drop-shadow(0 -2px 0 #ffffff) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)); }
:root[data-selflook="glow"] .crew-member img { filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px var(--accent)); }
:root[data-selflook="ghost"] .crew-member img { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { :root[data-selfpose="float"] .crew-member img { animation: none; } }

/* ==== Room for them: the stage ===================================================================
   The header is a picture with the name on a plate over it. Whoever stands in it stands on its
   floor; the header keeps the name out of their way with its own padding. Should anything ever
   meet all the same, the name is the one on top. */
:root[data-era="stage"] .hero .plate { z-index: 2; }
@media (min-width: 721px) {
  :root[data-era="stage"]:not([data-top="split"])[data-selfside="right"] .hero.with-self { padding-right: var(--self-beside); }
  :root[data-era="stage"]:not([data-top="split"])[data-selfside="left"] .hero.with-self { padding-left: var(--self-beside); }
  :root[data-era="stage"]:not([data-top="split"]) .hero.with-mascot { padding-right: var(--mascot-beside); }
  :root[data-era="stage"]:not([data-top="split"])[data-selfside="right"] .hero.with-mascot.with-self { padding-right: var(--self-beside); padding-left: var(--mascot-beside); }
}
:root[data-era="stage"]:not([data-top="split"])[data-selfside="center"] .hero.with-self { padding-bottom: var(--self-under); }
@media (max-width: 720px) {
  :root[data-era="stage"]:not([data-top="split"]) .hero.with-self { padding-bottom: var(--self-under); }
  :root[data-era="stage"]:not([data-top="split"]) .hero.with-mascot { padding-bottom: var(--mascot-under); }
  :root[data-era="stage"]:not([data-top="split"]) .hero.with-mascot.with-self { padding-bottom: max(var(--self-under), var(--mascot-under)); }
  /* Two in one band: the character keeps to its corner. */
  :root[data-selfside="center"] .hero.with-self { --mascot-wide: min(var(--mascot), 22%); }
}
/* A group stands in a band under the name... */
:root[data-era="stage"]:not([data-top="split"]) .hero.with-crew { padding-bottom: calc(var(--crew-band) + var(--cast-gap)); }
/* (Their spots run from a tenth to nine tenths of the way across: the band is drawn in a little at
   each end, so the writers at the ends stand inside the header.) */
:root[data-era="stage"]:not([data-top="split"]) .hero-crew { inset: auto calc(var(--crew) * 0.3) 0; height: var(--crew-band); }
/* ...or beside it, on a wide screen, when the name keeps to one side of a banner. */
@media (min-width: 861px) {
  /* (Their spots run from a tenth to nine tenths of their part: it is drawn in by two fifths of a
     writer at each end, so the ones at the ends stand inside it.) */
  :root[data-era="stage"][data-top="banner"]:is([data-platepos="lb"], [data-platepos="lt"]) .hero.with-crew { padding-bottom: 20px; padding-right: calc(var(--crew-part) + var(--cast-gap)); }
  :root[data-era="stage"][data-top="banner"]:is([data-platepos="lb"], [data-platepos="lt"]) .hero-crew { inset: 0 calc(var(--crew) * 0.4) 0 calc(100% - var(--crew-part) + var(--crew) * 0.4); height: auto; }
  :root[data-era="stage"][data-top="banner"]:is([data-platepos="rb"], [data-platepos="rt"]) .hero.with-crew { padding-bottom: 20px; padding-left: calc(var(--crew-part) + var(--cast-gap)); }
  :root[data-era="stage"][data-top="banner"]:is([data-platepos="rb"], [data-platepos="rt"]) .hero-crew { inset: 0 calc(100% - var(--crew-part) + var(--crew) * 0.4) 0 calc(var(--crew) * 0.4); height: auto; }
}

/* ---- half and half: the name has its half, and whoever stands there stands in the picture's ---- */
@media (min-width: 861px) {
  :root[data-top="split"] .hero { --self-wide: min(var(--self), 38%); --mascot-wide: min(var(--mascot), 18%); }
  :root[data-top="split"][data-selfside="left"] .hero-self { left: calc(50% + 12px); }
  :root[data-top="split"][data-selfside="center"] .hero-self { left: 75%; }
  :root[data-top="split"][data-selfside="right"] .hero.with-self .hero-mascot { left: calc(50% + 12px); }
  :root[data-top="split"] .hero-crew { left: 50%; }
}
@media (max-width: 860px) {
  /* One above the other: the picture is 180px high (site.css), and they stand in it. */
  :root[data-top="split"] .hero-self, :root[data-top="split"] .hero-mascot { top: 0; bottom: auto; height: 180px; max-height: none; aspect-ratio: auto; }
  :root[data-top="split"] .hero-crew { inset: 0 0 auto 0; height: 180px; }
  :root[data-top="split"] .hero { --crew: clamp(74px, 11.5vw, 132px); }
}

/* ==== Room for them: the three other themes =======================================================
   The Chobots blog of today and of 2008 lay the name along the foot of the picture, with the menu
   under it; whoever stands in the header stands at the top of the picture. The words of the name
   run round a space kept for them (a float the size of whoever it is), and the menu starts under
   that space, so nobody stands on a word or on the menu however many rows either takes. */
:root:not([data-era="stage"]) .hero { --self: clamp(96px, 13vw, 140px); --self-wide: var(--self); --self-in: clamp(10px, 4%, 40px); --mascot: clamp(84px, 12vw, 128px); --mascot-wide: var(--mascot); --mascot-in: clamp(10px, 4%, 40px); --crew: clamp(78px, 9.5vw, 104px); --plate-top: 46px; }
:root:not([data-era="stage"])[data-selfsize="small"] .hero { --self: clamp(76px, 10vw, 104px); --crew: clamp(64px, 8vw, 84px); }
:root:not([data-era="stage"])[data-selfsize="large"] .hero { --self: clamp(112px, 16vw, 172px); --crew: clamp(92px, 11.5vw, 124px); }
:root:is([data-era="modern"], [data-era="y2008"]) .hero-self, :root:is([data-era="modern"], [data-era="y2008"]) .hero-mascot { top: 8px; bottom: auto; z-index: 3; max-height: none; }
/* (Nothing to peek over up there: a Chobot that peeks stands, a little askew.) */
:root:is([data-era="modern"], [data-era="y2008"])[data-selfpose="peek"] .hero-self { translate: none; clip-path: none; }
:root:is([data-era="modern"], [data-era="y2008"])[data-selfpose="peek"][data-selfside="center"] .hero-self { translate: -50% 0; }
:root:is([data-era="modern"], [data-era="y2008"]) .hero-crew { inset: 8px calc(var(--crew) * 0.3) auto; height: var(--crew-band); z-index: 3; }
:root:is([data-era="modern"], [data-era="y2008"]) .hero:is(.with-self, .with-mascot, .with-crew) .plate .blog-menu { clear: both; }
:root:is([data-era="modern"], [data-era="y2008"]) .hero:is(.with-self, .with-crew) .plate::before,
:root:is([data-era="modern"], [data-era="y2008"]) .hero.with-mascot .plate h1::before { content: ""; display: block; }
/* The space, measured from the top of the name's words: whoever it is stands 8px down, and the
   words begin --plate-top down. */
:root:is([data-era="modern"], [data-era="y2008"]) .hero.with-self .plate::before { height: calc(var(--self-wide) + var(--self-lift) + 20px - var(--plate-top)); }
:root:is([data-era="modern"], [data-era="y2008"]) .hero.with-mascot .plate h1::before { height: calc(var(--mascot-wide) * 1.25 + 20px - var(--plate-top)); }
:root:is([data-era="modern"], [data-era="y2008"]) .hero.with-crew .plate::before { height: calc(var(--crew-band) + 20px - var(--plate-top)); }
@media (min-width: 721px) {
  :root:is([data-era="modern"], [data-era="y2008"])[data-selfside="right"] .hero.with-self .plate::before { float: right; width: calc(var(--self-beside) - 20px); }
  :root:is([data-era="modern"], [data-era="y2008"])[data-selfside="left"] .hero.with-self .plate::before { float: left; width: calc(var(--self-beside) - 20px); }
  :root:is([data-era="modern"], [data-era="y2008"]) .hero.with-mascot .plate h1::before { float: right; width: calc(var(--mascot-beside) - 20px); }
  :root:is([data-era="modern"], [data-era="y2008"])[data-selfside="right"] .hero.with-mascot.with-self .plate h1::before { float: left; }
  /* A group has its part of the header on the right, and the name the rest. */
  :root:is([data-era="modern"], [data-era="y2008"]) .hero-crew { left: calc(100% - var(--crew-part) + var(--crew) * 0.4); right: calc(var(--crew) * 0.4); }
  :root:is([data-era="modern"], [data-era="y2008"]) .hero.with-crew .plate::before { float: right; width: calc(var(--crew-part) - 4px); }
}
@media (max-width: 720px) {
  /* A band of their own over the name; a character beside the writer's Chobot shares it. */
  :root:is([data-era="modern"], [data-era="y2008"]) .hero.with-mascot .plate h1::before { display: none; }
  :root:is([data-era="modern"], [data-era="y2008"]) .hero.with-mascot .plate::before { content: ""; display: block; height: calc(var(--mascot-wide) * 1.25 + 20px - var(--plate-top)); }
  :root:is([data-era="modern"], [data-era="y2008"]) .hero.with-mascot.with-self .plate::before { height: calc(max(var(--self-wide) + var(--self-lift), var(--mascot-wide) * 1.25) + 20px - var(--plate-top)); }
}

/* February 2009 put the name on white with the picture in a strip under it: whoever stands in
   the header stands in the strip, and is no taller than it. */
:root[data-era="classic"] .hero { --strip: clamp(90px, 13vw, 132px); --self-part: 0.88; --crew: clamp(66px, 9.6vw, 98px); }
:root[data-era="classic"][data-selfsize="small"] .hero { --self-part: 0.7; --crew: clamp(54px, 8vw, 80px); }
:root[data-era="classic"][data-selfsize="large"] .hero { --self-part: 1; --crew: clamp(70px, 10.4vw, 106px); }
:root[data-era="classic"] .hero-self { top: auto; bottom: 0; width: auto; height: calc(var(--strip) * var(--self-part)); max-height: none; }
:root[data-era="classic"] .hero-mascot { top: auto; bottom: 0; width: auto; height: var(--strip); max-height: none; max-width: 30%; }
:root[data-era="classic"] .hero-crew { inset: auto calc(var(--crew) * 0.3) 0; height: var(--strip); }

/* ==== Gadgets in their places ==================================================================
   A row across the page (under the header, or under the posts) and a second column on the other
   side of the posts. Beside the posts is .blog-side as it always was.
   The second column is a column only where the layout has a side column at all, the plain
   layout and the newspaper: a magazine, a scrapbook, a journal or a timeline lays its gadgets
   out under the posts, and the second column joins them there. When nothing sits beside the
   posts (.no-side), the posts take that room. */
.blog-row { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.blog-row-bottom { margin-top: 4px; }
/* The rows and what is between them are in a box of their own, which is not there (contents)
   except on a phone on any page but the blog's front page: there a row of gadgets across the top
   goes under what the reader asked for. It stood between them and it on every page (a post began
   a screen and a half down, and every press looked as if it had done nothing). */
.blog-rows { display: contents; }
@media (max-width: 720px) {
  .blog-rows.inner { display: flex; flex-direction: column; }
  .blog-rows.inner > .blog-row-top { order: 1; }
  .blog-rows.inner > .blog-row-bottom { order: 2; }
}
.blog-body > .blog-other { order: 3; }
.blog-body.no-side > .blog-side:not(.blog-other) { display: none; }
:root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.no-side { grid-template-columns: minmax(0, 1fr); }
:root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.has-other { grid-template-columns: 250px minmax(0, 1fr) 290px; }
:root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.has-other > .blog-other { order: -1; }
:root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.has-other.no-side { grid-template-columns: 250px minmax(0, 1fr); }
:root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="left"] .blog-body.has-other { grid-template-columns: 290px minmax(0, 1fr) 250px; }
:root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="left"] .blog-body.has-other > .blog-other { order: 3; }
:root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="left"] .blog-body.has-other.no-side { grid-template-columns: minmax(0, 1fr) 250px; }
:root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="below"] .blog-body.has-other { grid-template-columns: minmax(0, 1fr); }
:root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="below"] .blog-body.has-other > .blog-other { order: 3; }
:root:where([data-era]:not([data-era="stage"])) .blog-row { padding: 20px 20px 0; }
:root:where([data-era]:not([data-era="stage"])) .blog-row-bottom { padding-bottom: 6px; border-top: var(--era-side-edge); }
@media (min-width: 1101px) {
  :root[data-era]:not([data-era="stage"])[data-layout="classic"] .blog-body.has-other { grid-template-columns: 210px minmax(0, 1fr) 240px; }
  :root[data-era]:not([data-era="stage"])[data-layout="classic"] .blog-body.has-other.no-side { grid-template-columns: 210px minmax(0, 1fr); }
  :root[data-era]:not([data-era="stage"])[data-layout="classic"] .blog-body.has-other > .blog-other { border-left: 0; border-right: var(--era-side-edge); }
}
:root[data-era]:not([data-era="stage"])[data-layout="classic"] .blog-body.no-side:not(.has-other) { grid-template-columns: minmax(0, 1fr); }
/* Three columns need room: on a narrower screen the second column goes under the other two. */
@media (max-width: 1100px) {
  :root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.has-other { grid-template-columns: minmax(0, 1fr) 290px; }
  :root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="left"] .blog-body.has-other { grid-template-columns: 290px minmax(0, 1fr); }
  :root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.has-other.no-side, :root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="left"] .blog-body.has-other.no-side, :root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="below"] .blog-body.has-other { grid-template-columns: minmax(0, 1fr); }
  :root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.has-other > .blog-other { order: 3; grid-column: 1 / -1; display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
}
@media (max-width: 860px) {
  :root:is([data-layout="classic"], [data-layout="newspaper"]) .blog-body.has-other, :root:is([data-layout="classic"], [data-layout="newspaper"])[data-side="left"] .blog-body.has-other, :root[data-era]:not([data-era="stage"])[data-layout="classic"] .blog-body.has-other { grid-template-columns: minmax(0, 1fr); }
}

/* ==== The studio's swatches for all of the above =============================================== */
.picker-artpos, .picker-platepos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.picker-platepos .choice:has(input[value="cc"]) { grid-column: 2; }
.picker-platepos .choice:has(input[value="lb"]) { grid-column: 1; }
.picker-artpos .swatch, .picker-platepos .swatch, .picker-artzoom .swatch, .picker-tint .swatch, .picker-tintpower .swatch, .picker-artfx .swatch, .picker-tall .swatch,
.picker-self .swatch, .picker-selfact .swatch, .picker-selfcrop .swatch, .picker-selfside .swatch, .picker-selfsize .swatch, .picker-selfpose .swatch, .picker-selflook .swatch { position: relative; display: grid; place-items: center; height: 44px; overflow: hidden; background-color: var(--tile-bg-hi); background-repeat: no-repeat; }
.picker-artpos .swatch::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-text); }
.swatch.artpos-lt::after { left: 6px; top: 6px; }      .swatch.artpos-t::after { top: 6px; }      .swatch.artpos-rt::after { right: 6px; top: 6px; }
.swatch.artpos-l::after { left: 6px; }                                                            .swatch.artpos-r::after { right: 6px; }
.swatch.artpos-lb::after { left: 6px; bottom: 6px; }   .swatch.artpos-b::after { bottom: 6px; }   .swatch.artpos-rb::after { right: 6px; bottom: 6px; }
.picker-platepos .swatch::after { content: ""; position: absolute; width: 44%; height: 12px; border-radius: 4px; background: var(--heading); }
.swatch.platepos-lt::after { left: 6px; top: 6px; }    .swatch.platepos-ct::after { top: 6px; }   .swatch.platepos-rt::after { right: 6px; top: 6px; }
.swatch.platepos-lb::after { left: 6px; bottom: 6px; } .swatch.platepos-cb::after { bottom: 6px; } .swatch.platepos-rb::after { right: 6px; bottom: 6px; }
.picker-artzoom .swatch { background-image: url("../img/rooms2/loc0.webp"); background-position: center; background-size: cover; }
.swatch.artzoom-close { background-size: 170% auto; }
.swatch.artzoom-closer { background-size: 260% auto; }
.picker-tint .swatch { background-image: linear-gradient(180deg, #58b4f2, #bfe8ff); }
.swatch.tint-dusk { background-image: linear-gradient(180deg, rgba(4, 7, 28, 0) 15%, #04071c 100%), linear-gradient(180deg, #58b4f2, #bfe8ff); }
.swatch.tint-dawn { background-image: linear-gradient(180deg, #fff3c9 0%, rgba(255, 243, 201, 0) 72%), linear-gradient(180deg, #58b4f2, #2a74de); }
.swatch.tint-blog { background-image: linear-gradient(135deg, var(--band-top), var(--band-bottom)); }
.swatch.tint-sunset { background-image: linear-gradient(160deg, #ff7a1a 0%, #e2569f 58%, #5b2bb5 100%); }
.swatch.tint-ocean { background-image: linear-gradient(160deg, #17c7b7 0%, #1f6fe0 58%, #0b1d45 100%); }
.swatch.tint-berry { background-image: linear-gradient(160deg, #ff7fb8 0%, #8a55e0 100%); }
.swatch.tint-rainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffa63d, #e8c900, #3dbb6c, #2f9fe0, #9b5de5); }
.swatch.tint-spot { background-image: radial-gradient(ellipse 55% 85% at 50% 42%, rgba(4, 7, 28, 0) 0 28%, #04071c 100%), linear-gradient(180deg, #58b4f2, #bfe8ff); }
.swatch.tint-edges { background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, #000000 100%), linear-gradient(180deg, #58b4f2, #bfe8ff); }
.swatch.tintpower-soft { background-image: linear-gradient(rgba(4, 7, 28, 0.3), rgba(4, 7, 28, 0.3)), linear-gradient(180deg, #58b4f2, #bfe8ff); }
.swatch.tintpower-medium { background-image: linear-gradient(rgba(4, 7, 28, 0.5), rgba(4, 7, 28, 0.5)), linear-gradient(180deg, #58b4f2, #bfe8ff); }
.swatch.tintpower-strong { background-image: linear-gradient(rgba(4, 7, 28, 0.76), rgba(4, 7, 28, 0.76)), linear-gradient(180deg, #58b4f2, #bfe8ff); }
.picker-artfx .swatch { background-image: url("../img/rooms2/loc0.webp"); background-position: center; background-size: cover; }
.swatch.artfx-soft { filter: blur(2px); }
.swatch.artfx-grey { filter: grayscale(1); }
.swatch.artfx-sepia { filter: sepia(0.85); }
.swatch.artfx-vivid { filter: saturate(1.7) contrast(1.08); }
.swatch.artfx-lines::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 5px); }
.swatch.artfx-dots::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0 1.5px, transparent 2px) 0 0 / 7px 7px; }
.picker-tall .swatch::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 14px; translate: 0 -50%; border-radius: 4px; background: var(--accent-text); }
.swatch.tall-short::after { height: 8px; }
.swatch.tall-tall::after { height: 28px; }
/* A little figure, for the choices about the writer's Chobot: a head on a body. */
.picker-self .swatch::after, .picker-selfact .swatch::after, .picker-selfcrop .swatch::after, .picker-selfside .swatch::after, .picker-selfsize .swatch::after, .picker-selfpose .swatch::after, .picker-selflook .swatch::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; width: 16px; height: 30px; translate: -50% 0; transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% 8px, var(--accent-text) 0 7px, transparent 7.5px), linear-gradient(var(--accent-text), var(--accent-text)) 50% 100% / 12px 15px no-repeat;
}
.swatch.self-none::after { opacity: 0.25; }
.picker-self .swatch::before { position: absolute; top: 4px; right: 7px; font: 800 13px/1 "ChoUiDisplay", "Arial Black", sans-serif; color: var(--heading); }
.swatch.self-live::before { content: "now"; }
.swatch.self-outfit1::before { content: "1"; } .swatch.self-outfit2::before { content: "2"; } .swatch.self-outfit3::before { content: "3"; }
.swatch.self-outfit4::before { content: "4"; } .swatch.self-outfit5::before { content: "5"; }
.swatch.selfcrop-bust::after { height: 44px; width: 24px; bottom: -14px; background: radial-gradient(circle at 50% 11px, var(--accent-text) 0 10px, transparent 10.5px), linear-gradient(var(--accent-text), var(--accent-text)) 50% 100% / 20px 22px no-repeat; }
.swatch.selfcrop-head::after { height: 34px; width: 34px; bottom: 5px; border-radius: 50%; background: var(--accent-text); }
.swatch.selfside-left::after { left: 22%; }
.swatch.selfside-right::after { left: 78%; }
.swatch.selfsize-small::after { scale: 0.7; }
.swatch.selfsize-large::after { scale: 1.3; }
.picker-selfpose .swatch::after { border-right: 3px solid var(--heading); border-radius: 0 3px 0 0; }
.swatch.selfpose-flip::after { scale: -1 1; }
.swatch.selfpose-lean::after { rotate: -14deg; }
.swatch.selfpose-back::after { rotate: 14deg; }
.swatch.selfpose-peek::after { bottom: -14px; }
.swatch.selfpose-float::after { bottom: 11px; }
/* What the figure is doing (a pose drawn by the game): an arm or two, or the whole of it turned.
   A pose this file has no drawing for is the plain figure. */
.picker-selfact .swatch::before { position: absolute; left: 50%; bottom: 19px; width: 3px; height: 14px; border-radius: 2px; background: var(--accent-text); transform-origin: 50% 100%; }
.swatch.selfact-wave::before { content: ""; translate: 6px 0; rotate: 32deg; }
.swatch.selfact-lookout::before { content: ""; translate: -8px 0; rotate: -24deg; height: 11px; }
.swatch.selfact-dance::before { content: ""; translate: -8px 0; rotate: -58deg; }
.swatch.selfact-cheer::before { content: ""; width: 14px; height: 12px; translate: -50% 0; border: solid var(--accent-text); border-width: 0 3px; border-radius: 0; background: none; box-sizing: content-box; }
.swatch.selfact-breakdance::after { bottom: 20px; rotate: 118deg; }
.swatch.selfact-walk::after { rotate: 9deg; }
.swatch.selfact-turn::after { scale: 0.8 1; }
.swatch.selfact-side::after { scale: 0.58 1; }
.swatch.selfact-back::after { filter: brightness(0.72); }
/* "All of us": three of the figure, side by side. */
.swatch.self-group::after { width: 48px; background: radial-gradient(circle at 50% 8px, var(--accent-text) 0 7px, transparent 7.5px) 0 0 / 16px 30px repeat-x, repeating-linear-gradient(90deg, transparent 0 2px, var(--accent-text) 2px 14px, transparent 14px 16px) 0 100% / 48px 15px no-repeat; }

/* ==== The studio's part for a group picture ====================================================
   Three boxes for each writer (crew-row), which are all that is sent. The board above them
   (public/js/crew.js, shown only with script) is a drawing of the header: the back row of spots
   over the front row, each writer a round counter on one of them, and a bench for whoever is
   left out. */
.crew { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.crew legend { padding: 0; margin-bottom: 10px; font: 800 15px/1.3 var(--display); color: var(--heading); }
.crew .meta { margin: 0 0 10px; }
.crew-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.crew-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 10px; align-items: end; padding: 10px; border-radius: 12px; border: 1.5px solid var(--chip-edge); background: var(--tile-bg-hi); }
.crew-who { grid-column: 1 / -1; overflow-wrap: anywhere; }
.crew-who small { font-weight: 600; opacity: 0.8; }
.crew-row label { display: grid; gap: 4px; margin: 0; font: 700 13px/1.3 var(--font-text); }
.crew-row select { width: 100%; min-width: 0; }
.crew-stage { display: grid; gap: 6px; padding: 10px 14px 8px; border-radius: 12px; border: 1.5px solid var(--chip-edge); background: linear-gradient(180deg, #2a74de, #58b4f2 62%, #3dbb6c 62%, #2e9a55); }
.crew-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
/* The back row stands in the gaps of the front one, half a spot to the left. */
.crew-line:first-child { translate: -2.8% 0; scale: 0.94; transform-origin: 50% 100%; }
.crew-line:last-child { translate: 2.8% 0; }
.crew-spot { display: grid; place-items: center; min-height: 44px; border-radius: 10px; border: 2px dashed rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.16); }
.crew-spot.over { border-style: solid; background: rgba(255, 255, 255, 0.55); }
.crew-bench { display: flex; gap: 10px; align-items: center; margin: 8px 0 0; font: 700 13px/1.3 var(--font-text); }
.crew-out { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; padding: 4px 8px; border-color: var(--chip-edge); background: var(--tile-bg-hi); }
.crew-token { position: relative; display: grid; place-items: center; width: 36px; height: 36px; max-width: 100%; padding: 0; overflow: hidden; border-radius: 50%; border: 2px solid #ffffff; background: var(--grad-gold); color: #3a2500; font: 800 13px/1 var(--display); cursor: grab; touch-action: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); }
.crew-token img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.crew-token.held { z-index: 3; cursor: grabbing; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45); }
.crew-token.full { animation: crew-no 0.3s; }
.crew-token:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@keyframes crew-no { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.swatch.selflook-shadow::after { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.6)); }
.swatch.selflook-sticker::after { filter: drop-shadow(2px 0 0 #ffffff) drop-shadow(-2px 0 0 #ffffff) drop-shadow(0 2px 0 #ffffff) drop-shadow(0 -2px 0 #ffffff); }
.swatch.selflook-glow::after { filter: drop-shadow(0 0 5px var(--accent-text)) drop-shadow(0 0 9px var(--accent-text)); }
.swatch.selflook-ghost::after { opacity: 0.45; }
.swatch.selflook-ring { background-image: radial-gradient(circle at 50% 50%, var(--band-top) 0 17px, #ffffff 17.5px 20px, transparent 20.5px); }