/*!
Theme Name: Q26
Author: Dan Q
Author URI: https://danq.me/
Description: Dan Q's theme, plus front page tweaks
Version: 1.0.0
Text Domain: q26
*/
/* Sensible defaults */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* Keyword animations (e.g. 0px to auto), where animations permitted */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
/* Keep the same horizontal space regardless of non-overlay scrollbar presence/absence, in case they appear/disappear */
:root {
  scrollbar-gutter: stable both-edges;
}

/* Typographic common sense defaults */
body {
  line-height: 1.5;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Media common sense defaults */
img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

html.no-js .yes-js,
html.yes-js .no-js {
  display: none;
}

body.admin-bar {
  margin-top: 32px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #eee;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

:root {
  --bg: #fff;
  --text: #404040;
  --text-light: #ddd;
  --logo-text-light: var(--text-light);
  --q-pri: #155a93;
  --q-sec: #1d6fb4;
  --alt1-bg: #95b8b8;
  --alt1-text: #000;
  --alt1-link: #0f4570;
  --alt2-bg: #062d4d;
  --alt2-text: var(--text-light);
  --alt3-bg: #c5eded;
  --alt3-text: var(--text);
  --dan-comment-bg: #d6e3e8;
  --comment-author-width: 100px;
  --menu-link-color: color-mix(in oklab, #c3d4d7, white 65%);
  --font-scale: 100%;
}

/* Font scaling */
@media (min-width: 576px) {
  :root {
    --font-scale:106.25% ;
  }
}
@media (min-width: 768px) {
  :root {
    --font-scale:112.5% ;
  }
}
@media (min-width: 980px) {
  :root {
    --font-scale:118.75% ;
  }
}
@font-face {
  font-family: "Raleway";
  src: local(""), url("https://bcdn.danq.me/_q26tf/rv.woff2") format("woff2");
  font-display: swap;
  font-feature-settings: "lnum";
}
body {
  background-color: var(--alt2-bg);
  background-image: url("/_q26t/textures/green-dust-and-scratches.png");
  font-family: "Raleway", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  font-size: var(--font-scale);
}

h1, .h1 {
  font-size: 2rem;
}

h2, .h2 {
  font-size: 1.75rem;
}

h3, .h3 {
  font-size: 1.5rem;
}

h4, .h4 {
  font-size: 1.25rem;
}

h5, .h5 {
  font-size: 1.125rem;
}

h6, .h6 {
  font-size: 1rem;
}

small, .small {
  font-size: 0.875rem;
}

ul, ol, p {
  margin: 1.2rem 0;
}

a {
  color: var(--q-pri);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(from currentColor l c h/50%);
  transition: text-decoration-color 0.1s ease-in-out, color 0.1s ease-in-out, text-underline-offset 0.2s ease-out, text-decoration-thickness 0.3s ease-out;
}
a:hover, a:focus {
  color: var(--q-sec);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
  text-decoration-color: oklch(from currentColor l c h/100%);
}

address {
  display: inline;
  font-style: normal;
  font-family: monospace;
}

.invert-text {
  color: var(--bg);
}
.invert-text a {
  color: var(--front-page-hero-link-color);
}

.alignleft, .alignright {
  margin: 0 1.5em;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.aligncenter {
  clear: both;
  margin: 0 auto;
  display: block;
}

label {
  cursor: pointer;
}

input, textarea {
  color: var(--text);
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
  line-height: 1.65;
}

input[type=submit] {
  padding-left: 0.5ch;
  padding-right: 0.5ch;
}

#page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#site-header,
#site-header .h-card,
.main-navigation,
.front-page-hero,
.site-main,
.site-contact,
.site-footer {
  display: block;
  width: 100%;
  max-width: 980px;
}

.site-footer {
  margin-bottom: 1.5ch;
}

#site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9;
}
#site-header .h-card {
  position: relative;
  --eyebrow-position: 0;
  --eyebrow-rotation: 0deg;
}
#site-header .h-card:hover, #site-header .h-card:focus-within {
  --eyebrow-position: -4px;
  --eyebrow-rotation: 2deg;
}
#site-header .p-name {
  display: flex;
  justify-content: center;
  padding: 50px 170px 30px 0;
  margin: 0;
}
#site-header .u-logo {
  max-height: 86px;
}
#site-header .peekaboo {
  position: absolute;
  bottom: max(-13px, -2.5vw);
  right: 12px;
  max-height: 100%;
}
#site-header .peekaboo-eyebrow2 {
  transition: transform 0.08s ease-in-out;
  transform-origin: center;
  transform: translateY(var(--eyebrow-position)) rotateZ(var(--eyebrow-rotation));
}

.main-navigation {
  background-color: var(--q-sec);
  background-image: url("/_q26t/textures/white-brushed.png");
  border: 8px solid var(--q-pri);
  border-radius: 8px;
  margin-bottom: 24px;
  transition: border-color 0.2s ease-in-out;
}
.main-navigation:hover, .main-navigation:focus-within {
  --border-transparency: 20%;
}
.main-navigation > ul {
  margin: 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.main-navigation > ul > li {
  flex-grow: 1;
}
.main-navigation > ul > li > a, .main-navigation > ul > li > button {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--bg);
  background-color: var(--q-sec);
  background-image: url("/_q26t/textures/black-paper.png");
  border-radius: 8px;
  border: 1px solid var(--q-pri);
  cursor: pointer;
  text-align: center;
  width: 100%;
}
.main-navigation .sub-menu a {
  display: block;
  border: 1px solid var(--q-sec);
  border-radius: 4px;
  background: var(--bg);
  width: 100%;
  color: color-contrast(var(--bg));
  padding: 0.25ch 0.5ch;
  margin: 0 0 0.5ch;
}
.main-navigation #sub-menu-slashes {
  flex-wrap: wrap;
  width: 16em;
  font-size: 80%;
}
.main-navigation #sub-menu-slashes:popover-open {
  display: flex;
}
.main-navigation [popover]:popover-open {
  position-area: bottom center;
  width: 100%;
  position: absolute;
  z-index: 9;
  min-width: 8em;
  max-width: 16em;
  margin: 4px 0 0 7px;
  padding: 4px;
  list-style: none;
  background-color: var(--q-sec);
  background-image: url("/_q26t/textures/white-brushed.png");
  border: 8px solid var(--q-pri);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  transition: border-color 0.2s ease-in-out;
}

@media (max-width: 980px) {
  .main-navigation [popover]:popover-open {
    position-anchor: unset !important;
    position-area: unset !important;
    position: fixed;
    top: 5vh;
    left: 5vw;
    right: 5vw;
    max-width: 90vw;
    border: 3px solid var(--q-pri);
    border-radius: 8px;
    margin: 0;
    color: var(--text);
  }
  .main-navigation [popover]:popover-open[data-sub-menu-title]::before {
    content: attr(data-sub-menu-title);
    display: block;
    padding: 0.5ch 0;
    font-weight: bold;
    text-align: center;
  }
  .main-navigation [popover]:popover-open::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
  }
}
body.force-post-filters-menu-modal .main-navigation [popover]:popover-open {
  position-anchor: unset !important;
  position-area: unset !important;
  position: fixed;
  top: 5vh;
  left: 5vw;
  right: 5vw;
  max-width: 90vw;
  border: 3px solid var(--q-pri);
  border-radius: 8px;
  margin: 0;
  color: var(--text);
}
body.force-post-filters-menu-modal .main-navigation [popover]:popover-open[data-sub-menu-title]::before {
  content: attr(data-sub-menu-title);
  display: block;
  padding: 0.5ch 0;
  font-weight: bold;
  text-align: center;
}
body.force-post-filters-menu-modal .main-navigation [popover]:popover-open::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

/* Prettify footnotes */
.q18-footnotes sup a,
.q18-footnote-ref {
  text-decoration: none;
  color: var(--bg);
  background: var(--q-pri);
  padding: 3px 0.2ch 1px;
  border-radius: 4px;
  font-size: 10px;
  margin: 0 0.2ch;
  line-height: 10px;
  min-width: 1em;
  display: inline-block;
  text-align: center;
}
.q18-footnotes sup a:hover, .q18-footnotes sup a:focus,
.q18-footnote-ref:hover,
.q18-footnote-ref:focus {
  color: var(--bg);
}

/* Don't draw footer footnotes as superscripts */
.q18-footnotes {
  display: grid;
  grid-template-columns: 3ch 1fr;
}
.q18-footnotes h2 {
  grid-column: 1/-1;
}
.q18-footnotes .q18-footnote {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0.4rem 0;
}
.q18-footnotes .q18-footnote sup {
  all: unset;
  grid-column: 1;
  justify-self: center;
}
.q18-footnotes .q18-footnote .q18-footnote-content {
  grid-column: 2;
}

:root {
  --dan-tshirt: #c3d4d7;
  --dan-hair: #3b6f8f;
  --dan-beard: #896a51;
  --dan-waveyboo-arm-angle: 4deg;
  --dan-waveyboo-hand-angle: -4deg;
  --dan-letterboo-eye-contact: 0;
  --dan-letterboo-arm-angle: 0deg;
  --dan-letterboo-arm-offset: 0%;
  --dogaboo-head-angle: 4deg;
  --front-page-hero-link-color: color-mix(in oklab, var(--dan-tshirt), white 65%);
}

/* Comic Dan's Dress-Up! */
:root:has(#dan-tshirt-color-white:checked) {
  --dan-tshirt: #c3d4d7;
}

:root:has(#dan-tshirt-color-purple:checked) {
  --dan-tshirt: #7429a8;
}

:root:has(#dan-tshirt-color-red:checked) {
  --dan-tshirt: #d02828;
}

:root:has(#dan-tshirt-color-green:checked) {
  --dan-tshirt: #2dd028;
}

:root:has(#dan-tshirt-color-blue:checked) {
  --dan-tshirt: #2862d0;
}

:root:has(#dan-tshirt-color-pink:checked) {
  --dan-tshirt: #ee4fd5;
}

:root:has(#dan-hair-color-natural:checked) {
  --dan-hair: #896a51;
}

:root:has(#dan-hair-color-blue:checked) {
  --dan-hair: #3b6f8f;
}

:root:has(#dan-hair-color-black:checked) {
  --dan-hair: #24170d;
}

:root:has(#dan-hair-color-platinum:checked) {
  --dan-hair: #ffffff;
}

:root:has(#dan-hair-color-pink:checked) {
  --dan-hair: #ff00cb;
}

:root:has(#dan-hair-color-lime:checked) {
  --dan-hair: #60c851;
}

:root:has(#dan-hair-color-pride:checked) {
  --dan-hair: url(#pride-rainbow-lg);
  --logo-text-light: url(#pride-rainbow-lg);
}

:root:has(#dan-dye-beard-toggle:checked) {
  --dan-beard: var(--dan-hair);
}

.danaboo-dress-up > li,
.post-filters > li {
  margin: 0.5em 0;
  font-weight: bold;
}
.danaboo-dress-up ul,
.post-filters ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: normal;
}
@supports selector(div:has(div)) {
  .danaboo-dress-up ul input[type=radio],
  .danaboo-dress-up ul input[type=checkbox],
  .post-filters ul input[type=radio],
  .post-filters ul input[type=checkbox] {
    display: none;
  }
}
.danaboo-dress-up ul label,
.post-filters ul label {
  padding: 2px 10px;
  width: 100%;
}
.danaboo-dress-up ul li:has(input[type=radio]),
.danaboo-dress-up ul li:has(input[type=checkbox]),
.post-filters ul li:has(input[type=radio]),
.post-filters ul li:has(input[type=checkbox]) {
  border: 1px solid var(--q-sec);
  border-radius: 4px;
  background: var(--bg);
  margin-left: 36px;
  position: relative;
  display: flex;
  align-items: center;
}
.danaboo-dress-up ul li:has(input[type=radio]):before,
.danaboo-dress-up ul li:has(input[type=checkbox]):before,
.post-filters ul li:has(input[type=radio]):before,
.post-filters ul li:has(input[type=checkbox]):before {
  position: absolute;
  left: 0;
  content: "✅";
  z-index: -1;
  text-align: center;
  font-size: 22px;
  transition: left 0.2s ease-in-out;
}
.danaboo-dress-up ul li:has(input[type=radio]:checked),
.danaboo-dress-up ul li:has(input[type=checkbox]:checked),
.post-filters ul li:has(input[type=radio]:checked),
.post-filters ul li:has(input[type=checkbox]:checked) {
  background-color: var(--q-pri);
  color: var(--bg);
}
.danaboo-dress-up ul li:has(input[type=radio]:checked):before,
.danaboo-dress-up ul li:has(input[type=checkbox]:checked):before,
.post-filters ul li:has(input[type=radio]:checked):before,
.post-filters ul li:has(input[type=checkbox]:checked):before {
  left: -32px;
}

label[for=dan-hair-color-pride] {
  background: linear-gradient(to right, #e60000 0ch, #ff8e00 1ch, #ffef00 2ch, #00821b 3ch, #004bff 4ch, #780089 5ch);
  background-clip: border-box;
  color: transparent;
  background-clip: text;
  font-weight: bold;
  letter-spacing: 5%;
  text-transform: uppercase;
}

.waveyboo-wrapper {
  animation: waveyboo-arm-wave 2.1s cubic-bezier(0.66, 0.33, 0.29, 1.04) alternate infinite, waveyboo-hand-wave 0.25s ease-in-out alternate infinite;
  animation-play-state: paused;
}

.waveyboo-wrapper:target, .waveyboo-wrapper:hover, .waveyboo-wrapper:focus-within {
  animation-play-state: running;
}

@property --dan-waveyboo-arm-angle {
  syntax: "<angle>";
  initial-value: 4deg;
  inherits: true;
}
@keyframes waveyboo-arm-wave {
  0% {
    --dan-waveyboo-arm-angle: 4deg;
  }
  100% {
    --dan-waveyboo-arm-angle: -6deg;
  }
}
@property --dan-waveyboo-hand-angle {
  syntax: "<angle>";
  initial-value: -4deg;
  inherits: true;
}
@keyframes waveyboo-hand-wave {
  0% {
    --dan-waveyboo-hand-angle: -4deg;
  }
  100% {
    --dan-waveyboo-hand-angle: 8deg;
  }
}
.letterboo-wrapper:hover, .letterboo-wrapper:focus-within {
  --dan-letterboo-eye-contact: 1;
  --dan-letterboo-arm-angle: 10deg;
  --dan-letterboo-arm-offset: 12%;
}

.dogaboo-wrapper:hover, .dogaboo-wrapper:focus-within {
  --dogaboo-head-angle: -8deg;
}

/* "Wavey" Danaboos used as avatars e.g. in comments and mentions sections */
.comment:hover .waveyboo-wrapper {
  animation-play-state: running; /* play on hover anywhere on the comment */
}

.comment .waveyboo-wrapper, .mention .waveyboo-wrapper {
  transform: scaleX(-1);
  background: hsl(from var(--dan-tshirt) h s 90);
  position: relative;
}
.comment .waveyboo-wrapper .waveyboo, .mention .waveyboo-wrapper .waveyboo {
  position: absolute;
  width: 100%;
  bottom: 2px;
  right: -7px;
  transform: scale(1.2);
}

/* Mentions are slightly smaller so we need a tweak: */
.mention .waveyboo-wrapper {
  transform: none; /* Don't flip them. */
}
.mention .waveyboo-wrapper .waveyboo {
  bottom: 0;
}

.wp-caption, figure {
  margin-bottom: 1.5em;
  max-width: 100%;
  margin: 0 auto 1.5em;
}
.wp-caption a, .wp-caption img, .wp-caption video, figure a, figure img, figure video {
  display: block;
}
.wp-caption .wp-caption-text, .wp-caption figcaption, figure .wp-caption-text, figure figcaption {
  margin: 0 0 0.8075em 0;
  font-size: 80%;
  color: #767676;
  contain: inline-size;
}
.wp-caption .wp-caption-text a, .wp-caption figcaption a, figure .wp-caption-text a, figure figcaption a {
  display: inline;
}

.wp-caption-text, figcaption {
  text-align: center;
}

body.single #site-header .p-name {
  padding: 20px 90px 15px 0;
}
body.single #site-header .u-logo {
  max-height: 40px;
}
body.single .peekaboo {
  bottom: -8px;
}
body.single .entry-header {
  background-color: color-mix(in oklch, var(--q-pri), transparent 50%);
  background-image: url("/_q26t/textures/white-brushed.png");
  text-align: center;
}

.lightbox {
  --playful-bounce-easing: cubic-bezier(.59,3.15,.57,.58);
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
}
.lightbox:has(img.alignright) {
  float: right;
}
.lightbox:has(img.alignleft) {
  float: left;
}
.lightbox > button {
  background: unset;
  border: unset;
  padding: unset;
  cursor: zoom-in;
}
.lightbox .lightbox-full-image {
  display: flex;
  border: 0;
  background: transparent;
  position: fixed;
  z-index: 11;
  justify-content: center;
  align-items: center;
  padding: 1.5ch;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  transition: none;
  filter: opacity(0);
}
.lightbox .lightbox-full-image img {
  object-fit: contain;
  z-index: 12;
  max-height: 95vh;
  max-width: 95vw;
  background: #eee;
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox .lightbox-full-image img {
    transition: transform 0.2s var(--playful-bounce-easing), box-shadow 0.2s var(--playful-bounce-easing), filter 0.1s ease-in;
  }
}
.lightbox .lightbox-full-image img {
  transform: scale(0.85);
  filter: grayscale(0.6);
  box-shadow: 1px 1px 0px black;
}
.lightbox .lightbox-full-image::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px) grayscale(0.5);
}
.lightbox .lightbox-full-image:popover-open {
  filter: opacity(1);
  transition: filter 0.2s ease-out;
}
.lightbox .lightbox-full-image:popover-open img {
  transform: scale(1);
  filter: grayscale(0);
  box-shadow: 4px 4px 24px black;
}

body:has(.lightbox-full-image:popover-open) {
  overflow: hidden;
}
body:has(.lightbox-full-image:popover-open)::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 11;
  cursor: zoom-out;
}

figure:has(.lightbox img.aligncenter) {
  text-align: center;
}

/* we prevent scrolling when a lightbox is open, so we should stop forcing scrollbar gutters to exist
 * 'cos we can't force the ::backdrop to extend into it - this is fine because we default (via reset.scss)
 * to "stable both-edges" so the width increases equally on both sides and we don't see content-shift:
 */
:root:has(.lightbox-full-image:popover-open) {
  scrollbar-gutter: unset;
}

/* Prevent (not-yet opened) popovers from being parsed on initial page load and contributing to LCP! */
[popover]:not(:popover-open) {
  content-visibility: hidden;
}

.entry-footer {
  background: var(--alt3-bg);
  color: var(--alt3-text);
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.entry-meta details,
.entry-meta .comments-link,
.entry-meta .share-button {
  width: 33%;
  min-width: 220px;
  flex-grow: 1;
  border: 0;
  line-height: 1.65;
}
.entry-meta details {
  font-size: 0.8rem;
}
.entry-meta details, .entry-meta button {
  background: var(--alt2-bg);
  color: var(--alt2-text);
  overflow: hidden;
  padding: 1px 4px;
}
.entry-meta details[open] > summary, .entry-meta button[open] > summary {
  padding-bottom: 0;
}
.entry-meta summary {
  display: block;
  position: relative;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: underline;
}
.entry-meta summary:hover {
  text-decoration: none;
  color: var(--alt2-text);
}
.entry-meta summary::-webkit-details-marker {
  display: none;
}
.entry-meta .entry-meta-geo {
  min-width: min(600px, 100%);
}
.entry-meta .entry-meta-geo img {
  background: #777;
}
.entry-meta .comments-link,
.entry-meta .share-button {
  display: block;
  background: var(--alt2-bg);
  color: var(--alt2-text);
  position: relative;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: underline;
  text-align: center;
}
.entry-meta .comments-link:hover,
.entry-meta .share-button:hover {
  text-decoration: none;
  color: var(--alt2-text);
}
.entry-meta .share-button[disabled] {
  display: none;
}
.entry-meta ul {
  list-style: none;
  padding: 0;
}
.entry-meta a {
  color: var(--alt2-text);
}
.entry-meta a:hover, .entry-meta a:visited {
  color: var(--alt2-text);
}
.entry-meta .mention-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5ch;
}
.entry-meta .mention-list .hide-name {
  display: none;
}
.entry-meta {
  /* Let's make the meta footer more colourful! */
}
.entry-meta details:nth-child(1) {
  background: hsl(from var(--alt2-bg) 0deg s l);
}
.entry-meta details:nth-child(2) {
  background: hsl(from var(--alt2-bg) 36deg s l);
}
.entry-meta details:nth-child(3) {
  background: hsl(from var(--alt2-bg) 72deg s l);
}
.entry-meta details:nth-child(4) {
  background: hsl(from var(--alt2-bg) 108deg s l);
}
.entry-meta details:nth-child(5) {
  background: hsl(from var(--alt2-bg) 144deg s l);
}
.entry-meta details:nth-child(6) {
  background: hsl(from var(--alt2-bg) 180deg s l);
}
.entry-meta details:nth-child(7) {
  background: hsl(from var(--alt2-bg) 216deg s l);
}
.entry-meta details:nth-child(8) {
  background: hsl(from var(--alt2-bg) 252deg s l);
}
.entry-meta .comments-link {
  background: hsl(from var(--alt2-bg) 288deg s l);
}
.entry-meta .share-button {
  background: hsl(from var(--alt2-bg) 324deg s l);
}
.entry-meta {
  /* Make <summary>ies of closed <details> easier hit tagets: */
}
.entry-meta details:not([open]) > summary {
  width: 100%;
  height: 100%;
  place-content: center;
}

.entry-meta-tags ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5ch 1ch;
}

.u-syndication {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  line-height: 1.8;
  padding-bottom: 0.2ch;
}

#reactions {
  border: 8px solid color-mix(in oklch, transparent, transparent 50%);
  border-radius: 8px;
  background-color: var(--bg); /* FALLBACK */
}
@supports (background-color: color-mix(in oklab, red, white)) {
  #reactions {
    background-color: transparent; /* MODERN */
  }
}
#reactions {
  background-image: none;
  color: var(--bg);
  margin-top: 1.2rem;
}

.reactions-title {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.reactions-title:focus {
  background-color: #eee;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
}

.reactions-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5ch;
}

.reaction-option {
  font-size: 2rem;
  line-height: 3rem;
  transition: font-size 0.3s cubic-bezier(0.74, 0.02, 0.21, 5.64);
}

.reaction {
  background: var(--alt3-bg);
  border-radius: 0.5ch;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  white-space: nowrap;
  min-width: 5.8rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: background 0.2s ease-in-out, color 0.15s ease-in;
  user-select: none;
  color: #000;
}
.reaction.reacted {
  background: var(--q-pri);
  color: #333;
}
.reaction.reacted .reaction-option {
  font-size: 3rem;
}
.reaction.overreacted {
  background: red;
}
.reaction.overreacted .reaction-option {
  font-size: 4rem;
}

.reactions-help {
  text-align: center;
  margin: 0.4rem 0 0;
}

#comments {
  border: 8px solid color-mix(in oklch, var(--q-pri), transparent 50%);
  border-radius: 8px;
  background-color: var(--bg); /* FALLBACK */
}
@supports (background-color: color-mix(in oklab, red, white)) {
  #comments {
    background-color: color-mix(in oklch, var(--bg), #770 5%); /* MODERN */
  }
}
#comments {
  background-image: url("/_q26t/textures/natural-paper.png");
  color: var(--text);
  margin-top: 1.2rem;
  padding: 0.6rem;
}

.avatar {
  border-radius: 6px;
}

.comment-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.comment-list ol {
  list-style: none;
}

.comment-detail {
  display: grid;
  grid-template: "comment-content comment-content" "comment-author  comment-meta";
}
@media (min-width: 780px) {
  .comment-detail {
    grid-template: "comment-author comment-content" "comment-meta   comment-meta"/var(--comment-author-width) auto;
  }
}

.comment-content {
  grid-area: comment-content;
  position: relative;
  margin: 0 auto 40px;
  padding: 0 calc(1ch + 2%) 0 1ch; /* 2% pads from the gradient-based "stripe" on the right */
  border: 3px solid var(--text);
  border-radius: 8px;
  width: 100%;
}
.comment-content > * {
  overflow: hidden;
  overflow-wrap: anywhere;
}
.comment-content:before, .comment-content:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
}
.comment-content:before {
  left: 33px;
  bottom: -38px;
  border: 18px solid;
  border-color: var(--text) transparent transparent var(--text);
}
@media (min-width: 780px) {
  .comment-content:before {
    left: -36px;
    top: 20px;
    border-color: var(--text) var(--text) transparent transparent;
  }
}
.comment-content:after {
  left: 36px;
  bottom: -30px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}
@media (min-width: 780px) {
  .comment-content:after {
    left: -30px;
    top: 22px;
    border-color: #fff #fff transparent transparent;
  }
}
@media (min-width: 780px) {
  .comment-content {
    margin: 0 0 0 40px;
    width: calc(100% - 40px);
  }
}

.comment-author {
  grid-area: comment-author;
  display: flex;
  align-items: center;
  font-size: 80%;
  text-align: center;
}
.comment-author .fn {
  margin: 0 0.5ch;
}
@media (min-width: 780px) {
  .comment-author {
    flex-direction: column;
  }
}

.comment-meta {
  grid-area: comment-meta;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  text-align: right;
  font-size: 70%;
  display: none;
}
.comment-meta a {
  color: var(--text);
  text-decoration: none;
}
.comment-meta a:hover, .comment-meta a:focus, .comment-meta a:active {
  text-decoration: underline;
}
@media (min-width: 780px) {
  .comment-meta {
    display: block;
  }
}

.comment-author-dan > .comment-detail {
  grid-template: "comment-content comment-content" "comment-meta    comment-author";
}
@media (min-width: 780px) {
  .comment-author-dan > .comment-detail {
    grid-template: "comment-content comment-author" "comment-meta    comment-meta"/auto var(--comment-author-width);
  }
}
.comment-author-dan > .comment-detail .comment-content {
  background-color: var(--dan-comment-bg);
}
.comment-author-dan > .comment-detail .comment-content:before {
  left: unset;
  right: 33px;
  border-color: var(--text) var(--text) transparent transparent;
}
@media (min-width: 780px) {
  .comment-author-dan > .comment-detail .comment-content:before {
    right: -36px;
    top: 20px;
    border-color: var(--text) transparent transparent var(--text);
  }
}
.comment-author-dan > .comment-detail .comment-content:after {
  left: unset;
  right: 36px;
  border-color: var(--dan-comment-bg) var(--dan-comment-bg) transparent transparent;
}
@media (min-width: 780px) {
  .comment-author-dan > .comment-detail .comment-content:after {
    right: -30px;
    top: 22px;
    border-color: var(--dan-comment-bg) transparent transparent var(--dan-comment-bg);
  }
}
@media (min-width: 780px) {
  .comment-author-dan > .comment-detail .comment-content {
    margin: 0 40px 0 0;
    width: calc(100% - 40px);
  }
}
.comment-author-dan > .comment-detail .comment-author {
  flex-direction: row-reverse;
}
@media (min-width: 780px) {
  .comment-author-dan > .comment-detail .comment-author {
    flex-direction: column;
  }
}
.comment-author-dan > .comment-detail .comment-meta {
  flex-direction: row;
  text-align: left;
}

.comment-form .comment-form-author, .comment-form .comment-form-email, .comment-form .comment-form-url, .comment-form .webmention-source-wrapper, .webmention-form .comment-form-author, .webmention-form .comment-form-email, .webmention-form .comment-form-url, .webmention-form .webmention-source-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0.8em 0;
}
.comment-form .comment-form-comment label, .comment-form .comment-form-author label, .comment-form .comment-form-email label, .comment-form .comment-form-url label, .webmention-form .comment-form-comment label, .webmention-form .comment-form-author label, .webmention-form .comment-form-email label, .webmention-form .comment-form-url label {
  min-width: 5em;
  align-self: center;
}
.comment-form textarea, .webmention-form textarea {
  resize: vertical;
  width: 100%;
}
.comment-form input, .comment-form textarea, .webmention-form input, .webmention-form textarea {
  flex-grow: 1;
}
.comment-form #submit, .comment-form .comment-form-cookies-consent, .webmention-form #submit, .webmention-form .comment-form-cookies-consent {
  margin-left: 5em;
}
.comment-form #webmention-source, .webmention-form #webmention-source {
  border-radius: 3px 0 0 3px;
  border-right: 0;
}
.comment-form #webmention-submit, .webmention-form #webmention-submit {
  border-radius: 0 3px 3px 0;
  flex-grow: 0;
}
.comment-form, .webmention-form {
  /* Hide author, email, and URL fields unless there's content in the textarea (which is marked [required]) */
}
.comment-form:has(#comment:invalid) .comment-form-author, .comment-form:has(#comment:invalid) .comment-form-email, .comment-form:has(#comment:invalid) .comment-form-url,
.comment-form:has(#comment:invalid) .comment-form-cookies-consent, .comment-form:has(#comment:invalid) .form-submit, .webmention-form:has(#comment:invalid) .comment-form-author, .webmention-form:has(#comment:invalid) .comment-form-email, .webmention-form:has(#comment:invalid) .comment-form-url,
.webmention-form:has(#comment:invalid) .comment-form-cookies-consent, .webmention-form:has(#comment:invalid) .form-submit {
  display: none;
}

.reply-elsewhere svg {
  display: inline-block;
}

/* animated drawings for comments */
.q23-slow-svg path, .q23-slow-svg circle {
  opacity: 0;
  transition: opacity 0.05s ease-in-out;
}
.q23-slow-svg.visible path, .q23-slow-svg.visible circle {
  opacity: 1;
}

.site-contact {
  border: 8px solid color-mix(in oklch, var(--q-pri), transparent 50%);
  border-radius: 8px;
  background-color: color-mix(in oklch, var(--bg), #770 5%);
  background-image: url("/_q26t/textures/natural-paper.png");
  color: var(--text);
  margin: 1.2rem 0;
  display: grid;
  grid-template: "🧢 💬" min-content "✉️ 💬" auto/max(120px, 22%) 1fr;
}
.site-contact h2 {
  grid-area: 🧢;
  margin: 12px 26px 12px 12px;
}
.site-contact .letterboo-inner-wrapper {
  grid-area: ✉️;
  position: relative;
  bottom: max(-26px, -2.9vw);
  left: -6%;
  align-self: end;
  pointer-events: none;
}

.site-contact-content {
  margin: 12px 12px 12px -4%;
  grid-area: 💬;
}
.site-contact-content p:first-child {
  margin-top: 0;
}

@media (max-width: 630px) {
  .site-contact {
    grid-template: "🧢" "💬" "✉️"/1fr;
  }
  .site-contact h2 {
    margin: 12px 12px 0;
  }
  .site-contact .letterboo-inner-wrapper {
    bottom: calc(-8px - 8.1vw);
    margin-top: -4ch;
  }
  .site-contact-content {
    margin: 12px;
  }
}
.site-footer {
  background-color: var(--q-sec);
  background-image: url("/_q26t/textures/white-brushed.png");
  border: 8px solid var(--q-pri);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  padding: 1ch 0.5ch;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  padding: 0;
  gap: 2ch;
  margin: 0.5ch 1ch;
  text-align: center;
}
.site-footer a {
  white-space: nowrap;
  color: var(--bg);
}
.site-footer img, .site-footer svg {
  display: inline-block;
}

.site-footer-badges {
  margin: 2ch 0 0.5ch;
}
.site-footer-badges ul {
  justify-content: space-between;
}
.site-footer-badges img {
  image-rendering: pixelated;
  transition: transform 0.1s cubic-bezier(0.3, 0.3, 0.1, 0.9);
}
.site-footer-badges img:hover, .site-footer-badges img:focus {
  transform: scale(2);
  transition-duration: 0.3s;
}

.front-page-hero {
  display: flex;
  flex-direction: row-reverse;
}
.front-page-hero .waveyboo-wrapper-inner {
  min-width: 45%;
  width: 100%;
  align-self: end;
  margin-bottom: max(-37.5px, -3.73vw);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 720px) {
  .front-page-hero {
    flex-direction: column;
  }
  .front-page-hero .front-page-hero-text {
    margin: 0 1ch;
  }
  .front-page-hero .waveyboo-wrapper-inner {
    margin-bottom: -7.6vw;
  }
}

.front-page-hero-text {
  margin: 0 1ch 0 -2ch;
  color: var(--bg);
  font-weight: 500;
  line-height: 1.8;
}
.front-page-hero-text a {
  color: var(--front-page-hero-link-color);
  font-weight: 700;
}

.latest-posts-intro p {
  margin: 1.2rem;
}

.front-page-more-posts {
  flex-grow: 1;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.7ch;
}
.front-page-more-posts small {
  display: block;
  margin-top: -0.5em;
}

body.page article,
body.error404 main,
.podcast-home,
body.tag-bleptember main {
  color: var(--bg);
  --q-pri: --front-page-hero-link-color;
}

body.single-post article,
.posts-list .post,
body.page-id-4376 article,
main > .notification {
  border: 8px solid color-mix(in oklch, var(--q-pri), transparent 50%);
  border-radius: 8px;
  background-color: var(--bg); /* FALLBACK */
}
@supports (background-color: color-mix(in oklab, red, white)) {
  body.single-post article,
  .posts-list .post,
  body.page-id-4376 article,
  main > .notification {
    background-color: color-mix(in oklch, var(--bg), #770 5%); /* MODERN */
  }
}
body.single-post article,
.posts-list .post,
body.page-id-4376 article,
main > .notification {
  background-image: url("/_q26t/textures/natural-paper.png");
  color: var(--text);
}
body.single-post article .entry-header,
.posts-list .post .entry-header,
body.page-id-4376 article .entry-header,
main > .notification .entry-header {
  width: 100%;
  padding: 0 clamp(8px, 3.2rem, 4vw);
  margin-left: auto;
  margin-right: auto;
  color: var(--text);
}
body.single-post article .entry-header.full-width,
.posts-list .post .entry-header.full-width,
body.page-id-4376 article .entry-header.full-width,
main > .notification .entry-header.full-width {
  max-width: 100%;
}
body.single-post article .entry-header.force-full-width,
.posts-list .post .entry-header.force-full-width,
body.page-id-4376 article .entry-header.force-full-width,
main > .notification .entry-header.force-full-width {
  max-width: 100%;
  width: 100%;
}
body.single-post article .entry-header.force-full-width img,
.posts-list .post .entry-header.force-full-width img,
body.page-id-4376 article .entry-header.force-full-width img,
main > .notification .entry-header.force-full-width img {
  width: 100%;
}
body.single-post article .entry-content,
.posts-list .post .entry-content,
body.page-id-4376 article .entry-content,
main > .notification .entry-content {
  --q-pri: #155a93;
  color: var(--text);
}
body.single-post article .entry-content > *,
.posts-list .post .entry-content > *,
body.page-id-4376 article .entry-content > *,
main > .notification .entry-content > * {
  max-width: calc(100cqw - clamp(8px, 3.2rem, 4vw));
  margin-left: auto;
  margin-right: auto;
}
body.single-post article .entry-content > *.full-width,
.posts-list .post .entry-content > *.full-width,
body.page-id-4376 article .entry-content > *.full-width,
main > .notification .entry-content > *.full-width {
  max-width: 100%;
}
body.single-post article .entry-content > *.force-full-width,
.posts-list .post .entry-content > *.force-full-width,
body.page-id-4376 article .entry-content > *.force-full-width,
main > .notification .entry-content > *.force-full-width {
  max-width: 100%;
  width: 100%;
}
body.single-post article .entry-content > *.force-full-width img,
.posts-list .post .entry-content > *.force-full-width img,
body.page-id-4376 article .entry-content > *.force-full-width img,
main > .notification .entry-content > *.force-full-width img {
  width: 100%;
}

main > .notification {
  margin-bottom: 2.5ch;
  padding: 0.6rem 1.2rem;
  background: var(--alt3-bg);
  align-self: center;
}

.posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5ch;
}
.posts-list .post {
  margin: 0;
  /**************************************************************************
   *                         FRONT PAGE POST LAYOUTS                        *
   **************************************************************************/
  /**
   * Default layout - everything in a stack:
   *
   * +------------------------+
   * | img                    |
   * +------------------------+
   * | title                  |
   * +------------------------+
   * | content                |
   * +------------------------+
   * | meta                   |
   * +------------------------+
   */
  display: grid;
  grid-template: "🖼️" "🎩" "📰" "👢"/1fr;
}
@media (min-width: 720px) {
  .posts-list .post {
    /**
    * layout-image-on-left:
    *
    * +------------------------+
    * | img       | title      |
    * |           +------------+
    * |           | content    |
    * +-----------+------------+
    * | meta                   |
    * +------------------------+
    */
  }
  .posts-list .post.layout-image-on-left {
    display: grid;
    grid-template: "🖼️ 🎩" min-content "🖼️ 📰" 1fr "👢 👢" auto/max(40%, 120px) 1fr;
  }
  .posts-list .post.layout-image-on-left img {
    contain: size;
  }
  .posts-list .post {
    /**
     * layout-image-on-right:
     *
     * +------------------------+
     * | title      | img       |
     * +------------+           |
     * | content    |           |
     * +------------+-----------|
     * | meta                   |
     * +------------------------+
     */
  }
  .posts-list .post.layout-image-on-right {
    display: grid;
    grid-template: "🎩 🖼️" min-content "📰 🖼️" 1fr "👢 👢" auto/max(40%, 120px) 1fr;
  }
  .posts-list .post.layout-image-on-right img {
    contain: size;
  }
}
.posts-list .post:not(.post-article) {
  font-size: 16px;
}
.posts-list .post:not(.post-article) h2 {
  font-size: 24px;
}
.posts-list {
  /**
   * Thumbnails cover their containers:
   */
}
.posts-list .post-thumbnail {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.posts-list .post-thumbnail img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.posts-list {
  /**
   * All our grids use the same naming convention:
   */
}
.posts-list .post-thumbnail {
  grid-area: 🖼️;
}
.posts-list .post-title {
  grid-area: 🎩;
  margin: 0.6rem 1.2rem;
}
.posts-list .post-summary {
  grid-area: 📰;
  margin: 0.6rem 1.2rem;
}
.posts-list .post-meta {
  grid-area: 👢;
}
.posts-list {
  /**
   * Post meta:
   */
}
.posts-list .post-meta {
  background-color: color-mix(in oklch, var(--q-pri), transparent 50%);
  background-image: url("/_q26t/textures/white-brushed.png");
  margin: 0;
  padding: 0.6rem 1.2rem;
  font-size: 0.875rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.posts-list .post-meta a {
  color: black;
}
.posts-list .post:not(:first-of-type):not(.post-article) {
  margin: 0 36px;
}
.posts-list .post-article {
  border-color: var(--q-sec);
  box-shadow: -4px -4px 5px rgba(255, 255, 255, 0.4666666667), 4px -4px 5px rgba(255, 255, 255, 0.4666666667), -4px 4px 5px rgba(255, 255, 255, 0.4666666667), 4px 4px 5px rgba(255, 255, 255, 0.4666666667);
}

.q26-entry-notice {
  padding: 0.6rem;
  margin: 0 0 1.2rem 0;
  background-color: color-mix(in oklch, var(--q-pri), transparent 50%);
  color: var(--text);
  font-size: 0.875rem;
  text-align: center;
  font-style: italic;
}
.q26-entry-notice a {
  color: #fff;
}

.entry-content {
  container-type: inline-size;
}
.entry-content ul, .entry-content ol {
  margin-left: 1.2rem;
}
.entry-content li {
  margin: 0.8rem 0;
}
.entry-content blockquote {
  margin: 0 1.2rem 0 2.4rem;
  padding: 0.6rem 1.2rem;
  background: #ddd;
  color: #444;
}
.entry-content blockquote cite {
  display: block;
  font-size: 0.875rem;
  text-align: right;
  font-style: italic;
}

.entry-content, .site-contact, .comments-area {
  /* Regular links are var(--q-pri); use a hue rotation to get a new color for visited links. */
}
.entry-content a:visited, .site-contact a:visited, .comments-area a:visited {
  color: hsl(from var(--q-pri) calc(h + 30) calc(s - 15) l);
}

ins {
  background: #fff9c0;
  text-decoration: none;
}

ins[datetime], del[datetime] {
  position: relative;
  cursor: help;
}
ins[datetime]::before, del[datetime]::before {
  position: absolute;
  top: -24px;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 0.25s;
  hyphens: none;
  white-space: nowrap;
}
ins[datetime]:hover::before, del[datetime]:hover::before {
  opacity: 0.75;
}

ins[datetime]::before {
  content: "inserted " attr(datetime) " " attr(cite);
  background: #050;
}

del[datetime]::before {
  content: "deleted " attr(datetime) " " attr(cite);
  background: #500;
}

figure, .figure {
  width: fit-content;
}
figure .alt-text, .figure .alt-text {
  position: absolute;
  font-size: 80%;
  position-area: bottom center;
  width: 100%;
}
figure .alt-text summary, figure .alt-text p, .figure .alt-text summary, .figure .alt-text p {
  position: absolute;
  bottom: 0;
  margin: 0.65rem;
  background: rgba(0, 0, 0, 0.65);
  color: var(--text-light);
  border-radius: 4px;
}
figure .alt-text summary, .figure .alt-text summary {
  list-style: none;
  cursor: pointer;
  text-transform: uppercase;
  padding: 1px 3px;
  width: fit-content;
}
figure .alt-text p, .figure .alt-text p {
  padding: 0 2px;
  margin-left: calc(1.3rem + 3ch);
}

figure:has(.alignleft), .figure:has(.alignleft), figure:has(.alignright), .figure:has(.alignright) {
  width: auto;
}
figure:has(.alignleft) .alt-text, .figure:has(.alignleft) .alt-text, figure:has(.alignright) .alt-text, .figure:has(.alignright) .alt-text {
  font-size: 60%;
}

body.single-post article .entry-content > figure:has(.full-width) {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
}

.posts-navigation {
  border: 8px solid color-mix(in oklch, var(--q-pri), transparent 50%);
  border-radius: 8px;
  background-color: var(--bg); /* FALLBACK */
}
@supports (background-color: color-mix(in oklab, red, white)) {
  .posts-navigation {
    background-color: color-mix(in oklch, var(--bg), #770 5%); /* MODERN */
  }
}
.posts-navigation {
  background-image: url("/_q26t/textures/natural-paper.png");
  color: var(--text);
  margin-top: 1.2rem;
  background-color: var(--q-sec);
  background-image: url("/_q26t/textures/white-brushed.png");
  border: 8px solid var(--q-pri);
}
.posts-navigation .nav-links {
  margin: 12px;
  display: flex;
  justify-content: space-between;
}
.posts-navigation .nav-links .nav-next:first-child {
  width: 100%;
  text-align: right;
}
.posts-navigation a {
  white-space: nowrap;
  color: var(--front-page-hero-link-color);
  font-weight: bold;
}
.posts-navigation .nav-previous a:before {
  content: "← ";
}
.posts-navigation .nav-next a:after {
  content: " →";
}

.post {
  transition: all 0.2s ease-in-out;
}

.filtered.post {
  --filtered-area-height: 4rem;
  --filtered-area-border-width: 2px;
  border-color: color-mix(in oklch, var(--text), transparent 50%);
}
.filtered.post:not(.unfiltered) {
  overflow: hidden;
  height: var(--filtered-area-height);
  position: relative;
  border-width: var(--filtered-area-border-width);
}
.filtered.post:not(.unfiltered)::after {
  position: absolute;
  content: "filtered";
  width: 100%;
  text-align: center;
  justify-self: center;
  line-height: calc(var(--filtered-area-height) - 2 * var(--filtered-area-border-width));
  color: color-mix(in oklch, var(--text), transparent 50%);
  font-style: italic;
  font-size: 80%;
  background: white;
}
.filtered.post:not(.unfiltered) {
  /* If we recognise the post type, amend the "filtered" text to include it: */
}
.filtered.post:not(.unfiltered).post-article::after {
  content: "filtered (article)";
}
.filtered.post:not(.unfiltered).post-checkin::after {
  content: "filtered (checkin)";
}
.filtered.post:not(.unfiltered).post-note::after {
  content: "filtered (note)";
}
.filtered.post:not(.unfiltered).post-reply::after {
  content: "filtered (reply)";
}
.filtered.post:not(.unfiltered).post-repost::after {
  content: "filtered (repost)";
}
.filtered.post:not(.unfiltered).post-rsvp::after {
  content: "filtered (rsvp)";
}
.filtered.post:not(.unfiltered).post-video::after {
  content: "filtered (video)";
}
.filtered.post:not(.unfiltered).post-collection::after {
  content: "filtered (collection)";
}
.filtered.post:not(.unfiltered).post-comic::after {
  content: "filtered (comic)";
}
.filtered.post:not(.unfiltered).post-review::after {
  content: "filtered (review)";
}

.post-filters > li {
  margin: 0.5em 0;
  font-weight: normal;
}
.post-filters ul li:has(input[type=checkbox]):before {
  content: "🙈";
}

html.yes-js .filtered.post:not(.unfiltered) {
  cursor: ns-resize;
}
html.yes-js .filtered.post:not(.unfiltered)::before {
  content: "ℹ️";
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  height: 100%;
  place-content: center;
  cursor: pointer;
  min-width: 2em;
  text-align: center;
}

draggable-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
@media (min-width: 1000px) {
  draggable-wrapper {
    display: block;
  }
}

body:has(.lightbox[open]) draggable-wrapper {
  display: none;
}

sticker-sheet {
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.1333333333);
  transition: box-shadow 0.1s ease-in-out;
}
sticker-sheet[data-draggable=dragging] {
  box-shadow: 5px 5px 6px 8px rgba(0, 0, 0, 0.0666666667), 0 0 4px 4px rgba(0, 0, 0, 0.0666666667);
}

sticker-sheet {
  position: absolute;
  z-index: 8;
  background-color: #ffffcc;
  cursor: move;
  user-select: none;
  pointer-events: auto;
  padding: 4px 12px;
  width: 216px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  transition: opacity 0.25s ease-out;
  transform-origin: center center;
}
sticker-sheet .sticker-sheet-title, sticker-sheet .sticker-sheet-footer {
  grid-column: span 3;
  text-align: center;
  margin: 0;
  font-size: 16px;
}
sticker-sheet .sticker-collection-spot {
  width: 64px;
  height: 64px;
  justify-self: center;
}
sticker-sheet.removing {
  pointer-events: none;
  opacity: 0;
}

fun-sticker {
  user-select: none;
  font-size: 48px;
  z-index: 2;
  position: absolute;
  filter: url(#stickerize) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.6));
  line-height: 64px;
}

body > fun-sticker[data-draggable=stationary], .stickerable > fun-sticker[data-draggable=stationary] {
  pointer-events: none;
}

.filtered.post > fun-sticker {
  display: none;
}

.stickerable {
  position: relative;
}

@media print {
  .main-navigation {
    display: none;
  }
}
/* /blog/tags/ page */
.q18-tags {
  columns: 12em;
}

/* /blogroll page */
body.page article .blogroll-item a {
  color: #333;
}

.under-construction-banner {
  --bg: black;
  --q-pri: black;
  --text: #ddd;
  border: 8px solid color-mix(in oklch, var(--q-pri), transparent 50%);
  border-radius: 8px;
  background-color: var(--bg); /* FALLBACK */
}
@supports (background-color: color-mix(in oklab, red, white)) {
  .under-construction-banner {
    background-color: color-mix(in oklch, var(--bg), #770 5%); /* MODERN */
  }
}
.under-construction-banner {
  background-image: url("/_q26t/textures/natural-paper.png");
  color: var(--text);
  --ucstripe: #464214;
  background: linear-gradient(135deg, #000 4%, var(--ucstripe) 4%, var(--ucstripe) 8%, #000 8%, #000 12%, var(--ucstripe) 12%, var(--ucstripe) 16%, #000 16%, #000 20%, var(--ucstripe) 20%, var(--ucstripe) 24%, #000 24%, #000 28%, var(--ucstripe) 28%, var(--ucstripe) 32%, #000 32%, #000 36%, var(--ucstripe) 36%, var(--ucstripe) 40%, #000 40%, #000 44%, var(--ucstripe) 44%, var(--ucstripe) 48%, #000 48%, #000 52%, var(--ucstripe) 52%, var(--ucstripe) 56%, #000 56%, #000 60%, var(--ucstripe) 60%, var(--ucstripe) 64%, #000 64%, #000 68%, var(--ucstripe) 68%, var(--ucstripe) 72%, #000 72%, #000 76%, var(--ucstripe) 76%, var(--ucstripe) 80%, #000 80%, #000 84%, var(--ucstripe) 84%, var(--ucstripe) 88%, #000 88%, #000 92%, var(--ucstripe) 92%, var(--ucstripe) 96%, #000 96%);
  position: relative;
  min-height: min(4vw, 4vh);
  padding: 0.6rem clamp(100px, 24vw, 240px) 0.6rem 1.2rem;
  box-shadow: -4px -4px 5px rgba(255, 255, 255, 0.4666666667), 4px -4px 5px rgba(255, 255, 255, 0.4666666667), -4px 4px 5px rgba(255, 255, 255, 0.4666666667), 4px 4px 5px rgba(255, 255, 255, 0.4666666667);
}
.under-construction-banner a {
  color: #fff;
}
.under-construction-banner .compuboo {
  position: absolute;
  bottom: clamp(-20px, -1vw, -10px);
  right: -18px;
  width: clamp(100px, 24vw, 240px);
  pointer-events: none;
}
.under-construction-banner .under-construction-bubble-outer {
  position: absolute;
  right: clamp(-20px, 13vw - 70px, 100px);
  bottom: 0;
  animation: floaty-under-construction-bubble-outer calc(var(--bubble-duration) + -0.7s * (var(--bubble-number) - var(--bubble-count) / 2)) linear infinite;
  animation-delay: calc(-1 * var(--bubble-number) * var(--bubble-duration) / var(--bubble-count));
  pointer-events: none;
}
.under-construction-banner .under-construction-bubble-inner {
  background: url("/_q26t/icons/const.gif") no-repeat center/contain;
  width: 32px;
  height: 32px;
  animation: floaty-under-construction-bubble-inner calc(var(--bubble-duration) * 2 / (var(--bubble-swinginess) + var(--bubble-number))) ease-in-out alternate infinite;
  animation-delay: calc(-1 * var(--bubble-number) * var(--bubble-number) * var(--bubble-duration) / var(--bubble-count));
}

@keyframes floaty-under-construction-bubble-outer {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-380px);
    opacity: 0;
  }
}
@keyframes floaty-under-construction-bubble-inner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-60px);
  }
}
html.yes-js .under-construction-banner .under-construction-bubble-outer {
  pointer-events: unset;
}

.q23-podcast-tag-page .entry-header, .q23-podcast-tag-page .entry-footer {
  display: none;
}
.q23-podcast-tag-page h2 {
  margin-top: 1.5ch;
}
.q23-podcast-tag-page p {
  margin: 0.05ch 0;
}
.q23-podcast-tag-page .postcast-subscribe {
  padding: 1ch 1.4ch 2ch;
  border: 6px dotted #80aed4;
  margin: 1.5ch 0;
  border-radius: 2ch;
}
.q23-podcast-tag-page .postcast-subscribe h2 {
  margin-top: 0;
  text-align: center;
}
.q23-podcast-tag-page .podcast-sub-options {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75ch 2ch;
  margin: 2ch 0.1ch 0.1ch;
  justify-content: center;
}
.q23-podcast-tag-page .podcast-episodes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
  align-items: stretch;
  gap: 2.5ch 1ch;
}
.q23-podcast-tag-page .h-entry {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: stretch;
}
.q23-podcast-tag-page .entry-content {
  container-type: normal;
  width: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
.q23-podcast-tag-page .podcast-metaheader {
  display: grid;
  grid-template: "title" auto "intro" auto "subscribe" auto "micaboo" auto/100%;
}
@media (min-width: 500px) {
  .q23-podcast-tag-page .podcast-metaheader {
    grid-template: "title title" auto "intro intro" auto "micaboo subscribe" auto/max(200px, min(40vw, 392px)) auto;
  }
}
@media (min-width: 576px) {
  .q23-podcast-tag-page .podcast-metaheader {
    grid-template: "title title" auto "micaboo intro" auto "micaboo subscribe" auto/max(200px, min(40vw, 392px)) auto;
  }
}
@media (min-width: 768px) {
  .q23-podcast-tag-page .podcast-metaheader {
    grid-template: "micaboo title" auto "micaboo intro" auto "micaboo subscribe" auto/max(200px, min(40vw, 392px)) auto;
  }
}
.q23-podcast-tag-page .podcast-metaheader .micaboo {
  transform: scaleX(-1) translateY(16px);
  grid-area: micaboo;
  align-self: end;
}
.q23-podcast-tag-page .podcast-metaheader .page-title {
  grid-area: title;
}
.q23-podcast-tag-page .podcast-metaheader .podcast-intro {
  grid-area: intro;
}
.q23-podcast-tag-page .podcast-metaheader .podcast-subscribe {
  grid-area: subscribe;
}

.q23-podcast-player {
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  max-width: 300px;
  box-shadow: 2px 2px 4px 0px #006773;
  transition: all 0.5s linear;
}
.q23-podcast-player .q23-podcast-player-meta {
  border-radius: 7px 7px 0 0;
  background-image: var(--image);
  aspect-ratio: 1;
  background-size: cover;
  position: relative;
  font-size: 75%;
}
.q23-podcast-player .q23-podcast-player-date,
.q23-podcast-player .q23-podcast-player-duration {
  position: absolute;
  right: 0.2ch;
  bottom: 1.2ch;
  padding: 0.05ch 0.1ch;
  background: rgba(255, 255, 255, 0.6666666667);
  margin: 0;
  text-transform: lowercase;
  text-align: right;
  color: #333;
}
.q23-podcast-player .q23-podcast-player-date time,
.q23-podcast-player .q23-podcast-player-duration time {
  font-weight: bold;
}
.q23-podcast-player .q23-podcast-player-date {
  bottom: 4.4ch;
}
.q23-podcast-player .q23-podcast-player-text {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.5ch 1ch;
  font-size: 90%;
  background: rgba(0, 0, 0, 0.6666666667);
  color: #ddd;
}
.q23-podcast-player .q23-podcast-player-text h2 {
  margin: 0;
}
.q23-podcast-player .q23-podcast-player-text p {
  flex-grow: 1;
  align-content: start;
}
.q23-podcast-player ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.q23-podcast-player li {
  margin: 0;
}
.q23-podcast-player audio,
.q23-podcast-player audio::-webkit-media-controls-enclosure {
  width: 100%;
  border-radius: 0 0 7px 7px;
}
.q23-podcast-player:focus, .q23-podcast-player:focus-within, .q23-podcast-player:hover, .q23-podcast-player:has(:hover), .q23-podcast-player:has(:focus), .q23-podcast-player:has(:active) {
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

.q23-podcast-player-inline {
  max-width: none;
  font-size: 80%;
  background: #000;
}
.q23-podcast-player-inline .q23-podcast-player-meta {
  border-radius: 7px 0 0 0;
  width: 200px;
}
.q23-podcast-player-inline .q23-podcast-player-inline-details {
  display: flex;
}
.q23-podcast-player-inline a {
  color: var(--front-page-hero-link-color);
}
@media (max-width: 580px) {
  .q23-podcast-player-inline .q23-podcast-player-meta {
    width: 100%;
  }
  .q23-podcast-player-inline .q23-podcast-player-inline-details {
    flex-direction: column;
  }
}
.q23-podcast-player-inline .q23-podcast-player-text p {
  align-content: unset;
}
.q23-podcast-player-inline audio {
  width: 100%;
}

.q23-variant {
  margin: 1.2rem clamp(8px, 1.6rem, 4vw) 0.6rem;
  background-color: var(--alt3-bg);
  background-position: 0.5em 50%;
  background-repeat: no-repeat;
  border-radius: 7px;
  box-shadow: 2px 2px 4px 0 #006773;
  padding: 0.5em 0.5em 0.5em 42px;
  transition: all 0.5s linear;
}
.q23-variant:focus, .q23-variant:focus-within, .q23-variant:hover, .q23-variant:has(:hover), .q23-variant:has(:focus), .q23-variant:has(:active) {
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

/*# sourceMappingURL=style.css.map */