/* WordPress-only additions on top of the prototype's styles: the logged-in toolbar, paging through lists,
   and the blocks an older post or page can contain (images, galleries, embeds, buttons, tables). */

.wp-site-blocks, .wp-site-blocks > main { margin: 0; padding: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the WordPress toolbar (when logged in) sits above the sticky header */
.admin-bar .site-head { top: 32px; }
/* logged in, the admin bar pushes the header down too, so jumps to a section stop that much lower */
html:has(body.admin-bar) { scroll-padding-top: 128px; }
@media (max-width: 782px) { html:has(body.admin-bar) { scroll-padding-top: 142px; } }
@media (max-width: 600px) { html:has(body.admin-bar) { scroll-padding-top: 96px; } }
.admin-bar .stage { top: 98px; }
/* the flat hero (no 3D) isn't pinned, so the toolbar must not push it down: that only left an empty band on top */
.no-gl .admin-bar .stage { top: 0; }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } .admin-bar .nav { top: 112px; } }
@media (max-width: 600px) { .admin-bar .site-head { top: 0; } }

/* paging through a list: the same dashed chips as the topic labels */
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.pager .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--fg); background: var(--surface); border: 2px dashed var(--rule); font: 800 .9375rem/1 var(--f-title); }
.pager a.page-numbers:hover, .pager a.page-numbers:focus-visible { background: var(--amber); color: var(--ink); border-style: solid; border-color: var(--ink); }
.pager .current { background: var(--ink); color: var(--amber); border-style: solid; border-color: var(--ink); font-family: var(--f-pixel); font-weight: 400; }
.pager .dots { border-color: transparent; background: none; }

/* the paper sheet: WordPress blocks inside an article or page */
.prose img, .prose video { max-width: 100%; height: auto; }
.prose figure { margin: 1.4em 0 0; }
.prose figcaption, .prose .wp-element-caption { margin-top: 8px; font-size: .9375rem; color: var(--muted); }
.prose .wp-block-image img { border: 2px solid var(--rule); }
.prose .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.prose .alignleft { float: left; margin: .4em 1.4em 1em 0; } .prose .alignright { float: right; margin: .4em 0 1em 1.4em; }
.prose::after { content: ""; display: table; clear: both; }
.prose .wp-block-embed__wrapper, .prose .wp-block-video { position: relative; }
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.prose .wp-has-aspect-ratio iframe, .prose iframe[src*="youtube"] { width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; }
.prose iframe { max-width: 100%; }
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.prose .wp-block-gallery figure { margin: 0; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 20px; }   /* at least 20 px between buttons */
.prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; text-decoration: none; color: var(--btn-fg); background: var(--btn-bg); border: 2px solid var(--rule); box-shadow: var(--sh-s) var(--sh-s) 0 var(--coral); font: 800 1rem/1 var(--f-title); }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: 8px 10px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose hr, .prose .wp-block-separator { border: 0; border-top: 2px dashed var(--rule); margin: 2em 0; }

/* older pages and posts were made with the editor's fixed colours (light grey boxes, white or grey text). On the new
   site they follow the theme instead, so they work in dark mode too: a box with a background becomes a card, the
   amber/orange ones stay brand amber with dark text, and fixed text colours are dropped */
.prose .has-text-color, .prose .has-inline-color, .prose [style*="color:"] { color: inherit !important; }
.prose .has-background { padding: 18px 20px; color: var(--fg) !important; background: var(--surface) !important; border: 2px solid var(--rule); box-shadow: var(--sh-s) var(--sh-s) 0 var(--shade); }
.prose .has-luminous-vivid-amber-background-color, .prose .has-luminous-vivid-orange-background-color, .prose .has-vivid-red-background-color, .prose .has-pale-pink-background-color { color: var(--ink) !important; background: var(--amber) !important; border-color: var(--ink); box-shadow: var(--sh-s) var(--sh-s) 0 var(--ink); }
.prose .has-luminous-vivid-amber-background-color a, .prose .has-luminous-vivid-orange-background-color a { color: var(--ink); }
.prose .has-background > :first-child { margin-top: 0; }
.prose .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 1.4em; }
.prose .wp-block-column > :first-child { margin-top: 0; }
/* long links (bit.ly and store addresses) wrap instead of pushing the page wider */
.prose a { overflow-wrap: anywhere; }

/* the affiliate-links note at the top of a post with such links (inc/links.php): quiet, but there before the links */
/* the affiliate notice after the text uses the About box's styles (.authors); the pointer under the title jumps to it */
.aff-note { scroll-margin-top: 96px; }
.post .meta .aff { display: inline-block; padding-block: 2px; color: var(--accent); text-underline-offset: 4px; }

/* the About page: Who we are with our photo, the pixel alter egos (tap them), then the page's own text.
   The duo and photo rules match the homepage's (home.css isn't loaded on pages). */
.about-intro { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.about-intro h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.about-intro p { margin-top: 14px; font-size: 1.125rem; color: var(--muted); }
.about-intro .photo, .post .photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--block-bg); border: 2px solid var(--rule); }
.post .photo img { width: 100%; height: 100%; object-fit: cover; }
.about-intro .egos { margin-top: 30px; margin-bottom: 18px; font-size: .625rem; letter-spacing: .14em; color: var(--muted); }
.about-intro .backstory { margin-top: 22px; font-size: .9375rem; font-weight: 600; }
.about-intro .backstory a { color: var(--accent); text-underline-offset: 4px; display: inline-block; padding-block: 3px; }   /* 24 px to tap */
.post .duo { display: flex; gap: 8px; margin-top: 12px; }
.post .duo figure { margin: 0; text-align: center; }
.post .duo .mage-box { position: relative; width: 190px; height: 117px; overflow: hidden; }
.post .duo .mage { position: absolute; left: 0; bottom: 0; height: 117px; }
.post .duo figcaption { display: inline-block; margin-top: 6px; padding: 5px 9px; background: var(--ink); color: var(--paper); font: 400 .75rem/1 var(--f-pixel); }
.post .duo figcaption i { font-style: normal; color: var(--amber); }
.post > .duo { margin-top: 28px; }
@media (max-width: 760px) { .about-intro { grid-template-columns: 1fr; } .about-intro .photo { max-width: 420px; } }
@media (max-width: 420px) { .post .duo .mage-box { width: 150px; } }
@media (max-width: 360px) { .post .duo .mage-box { width: 128px; } .post .duo .mage { left: -12px; } }
/* the About page's Cas and Chary: photo and bio side by side, the two cards next to each other on big screens */
.people { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.person { padding: 22px; background: var(--surface); border: 2px solid var(--rule); box-shadow: var(--sh-l) var(--sh-l) 0 var(--shade); }
.person img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--rule); }
.person h2 { margin-top: 16px; font-size: 1.6rem; font-weight: 900; }
.person .label { margin-top: 6px; }
.person p:not(.label) { margin-top: 12px; color: var(--muted); }
@media (max-width: 700px) { .people { grid-template-columns: 1fr; } }