stays in the DOM
for screen readers. */
.apg-enter {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.apg-portal::after {
content: "Scroll to enter";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--apg-accent-pale);
font-size: clamp(.6rem, 1.05vw, .82rem);
letter-spacing: .24em;
text-transform: uppercase;
text-shadow: 0 2px 12px var(--apg-void), 0 0 26px var(--apg-void);
animation: apg-blink 2.4s ease-in-out infinite;
pointer-events: none;
}
/* 15c · Dust concentrated INSIDE the ring opening.
Percentage-positioned so it scales with the portal at any size. */
.apg-portal::before {
content: "";
position: absolute;
inset: 20%;
border-radius: 50%;
background-image: radial-gradient(circle 1.6px at 22% 34%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 68% 22%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 40% 62%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 76% 58%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 30% 76%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 58% 44%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 15% 55%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 85% 40%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 50% 18%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 62% 80%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 35% 45%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 72% 68%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px);
background-repeat: no-repeat;
filter: drop-shadow(0 0 4px var(--apg-accent));
animation: apg-core-drift 14s ease-in-out infinite alternate;
will-change: transform, opacity;
}
@keyframes apg-core-drift {
0% { transform: translate3d(0,0,0) scale(1); opacity: .45; }
50% { transform: translate3d(2%,-4%,0) scale(1.06); opacity: .9; }
100% { transform: translate3d(-2%,-8%,0) scale(1.02); opacity: .55; }
}
/* 15d · Site-wide dust — two fixed layers, one behind content and one in
front, so page elements read as floating inside the portal.
On
, so every page gets it without markup.
Deliberately sparse in front: readability wins over sparkle. */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-repeat: no-repeat;
}
body::before {
z-index: 1;
background-image: radial-gradient(circle 1.6px at 5% 18%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 14% 62%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 23% 88%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 31% 27%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 44% 71%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 52% 12%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 61% 49%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 69% 82%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 77% 33%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 86% 66%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 93% 21%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 9% 44%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 38% 95%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 58% 90%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px);
filter: drop-shadow(0 0 5px var(--apg-accent));
opacity: .75;
animation: apg-dust-rise 34s linear infinite;
}
body::after {
z-index: 60;
background-image: radial-gradient(circle 1.6px at 12% 40%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 29% 74%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 47% 25%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 66% 60%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 81% 15%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 90% 85%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px);
filter: drop-shadow(0 0 6px var(--apg-accent));
opacity: .45;
animation: apg-dust-rise 52s linear infinite reverse;
}
@keyframes apg-dust-rise {
0% { transform: translate3d(0, 4vh, 0); }
100% { transform: translate3d(1.5vw, -8vh, 0); }
}
/* 15e · Scroll entry — the suction.
Uses the standalone `scale` property, NOT transform, so it composes with
the jelly wobble (transform) and the breathing glow (filter) instead of
overriding them. Scroll-driven, so scrolling back up reverses it. */
@keyframes apg-suction {
0% { scale: 1; opacity: 1; }
55% { scale: 1.6; opacity: .95; }
100% { scale: 8; opacity: 0; }
}
.apg-portal {
animation:
apg-jelly 7s ease-in-out infinite,
apg-breathe 4.5s ease-in-out infinite,
apg-suction linear both;
animation-timeline: auto, auto, scroll(root block);
animation-range: normal, normal, 0 100svh;
}
@keyframes apg-gate-recede {
0% { opacity: 1; translate: 0 0; }
100% { opacity: 0; translate: 0 -6vh; }
}
.apg-gate-inner {
animation: apg-gate-recede linear both;
animation-timeline: scroll(root block);
animation-range: 0 62svh;
}
/* 15f · Reduced motion + mobile */
@media (prefers-reduced-motion: reduce) {
body::before, body::after,
.apg-portal::before, .apg-portal::after { animation: none !important; }
.apg-portal { animation: apg-suction linear both; animation-timeline: scroll(root block); animation-range: 0 100svh; }
}
@media (max-width: 767px) {
body::after { opacity: .3; }
body::before { opacity: .6; }
}
/* =========================================================================
16 · GATE FIT + CUE CONTRAST
The v2 portal is large enough that the subtitle was clipping on shorter
viewports, and the cue was losing contrast against the lit ring.
========================================================================= */
.apg-gate {
padding: 5vh 1.25rem 6vh;
gap: clamp(.4rem, 1.6vh, 1.1rem);
justify-content: center;
}
/* Leave headroom for the type block at every viewport height */
.apg-portal { width: clamp(230px, min(52vw, 50svh), 780px); }
@media (max-width: 767px) { .apg-portal { width: min(82vw, 40svh); } }
@media (max-height: 620px) { .apg-portal { width: min(38vw, 58svh); } }
@media (min-width: 1600px) { .apg-portal { width: clamp(230px, min(44vw, 56svh), 780px); } }
/* Cue: read it against the ring's lit interior, not the void */
.apg-portal::after {
color: #FFFFFF;
font-weight: 600;
text-shadow:
0 0 3px rgba(10,11,14,.95),
0 1px 10px rgba(10,11,14,.9),
0 0 24px rgba(10,11,14,.85),
0 0 42px rgba(10,11,14,.7);
}
.apg-gate-inner h1 { font-size: clamp(1.35rem, 3.1vw, 2.3rem); }
.apg-gate-sub { font-size: clamp(.86rem, 1.4vw, 1.02rem); }
/* =========================================================================
17 · GATE v3 — locked portal stage
The gate is now a real stage, not a scroll section:
· dark void + dust only (book background does NOT show yet)
· logo floats inside the ring, filled with the theme gradient
· "Scroll to enter" sits BELOW the portal in Cardo
· first scroll in either direction fires the blow-out; page is locked
until it finishes, so the portal never scrolls away mid-animation
· scrolling up past the top of the site brings the portal back
Driven by html classes set in page 4557's inline script:
.apg-js .apg-locked .apg-entering .apg-entered .apg-exiting
Cubic slide page transitions are UNTOUCHED.
========================================================================= */
/* Cardo is already shipped by WooCommerce — reuse it, no new request */
/* 8 Sep 2026 — REPOINTED IN PLACE, and the one deliberate exception to the
append-only rule. A @font-face cannot be un-declared from a later block.
This rule carries no unicode-range, so it covers U+0-10FFFF, and Chrome
went on fetching the 143 KB WooCommerce file even with a later full-range
face shadowing it — measured twice on staging. Editing the src is the only
fix. Same typeface: a self-hosted latin subset at 15,516 B, verified
against the WooCommerce file across 84 characters with zero advance-width
mismatches, so nothing reflows. Block 81a adds the latin-ext subset.
Reverting means putting the plugin path back here, not deleting 81a. */
@font-face {
font-family: "APG Cardo";
src: url("/wp-content/uploads/fonts/apg-cardo-400-latin.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
/* 17a · Scroll lock */
html.apg-locked, html.apg-locked body { overflow: hidden !important; height: 100%; }
/* 17b · The stage. Only becomes an overlay once JS is present, so without JS
the page degrades to a normal scrolling document. */
.apg-gate {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1rem, 4vh, 2.6rem);
min-height: 100svh;
padding: 4vh 1.25rem;
background: radial-gradient(circle at 50% 46%,
color-mix(in srgb, var(--apg-accent-bg) 55%, #000) 0%,
#05060A 62%, #000 100%);
overflow: hidden;
}
html.apg-js .apg-gate {
position: fixed;
inset: 0;
z-index: 9000;
transform: none;
width: 100vw;
margin: 0;
}
html.apg-entered .apg-gate { display: none; }
/* 17c · Void dust — the only thing in the void besides the portal */
.apg-voiddust {
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(circle 1.6px at 6% 18%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 14% 62%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 23% 88%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 31% 27%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 44% 71%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 52% 12%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 61% 49%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 69% 82%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 77% 33%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 86% 66%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 93% 21%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 9% 44%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 38% 95%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 58% 90%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 20% 8%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 72% 7%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 48% 40%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 35% 58%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 83% 48%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px),radial-gradient(circle 1.6px at 66% 30%, var(--apg-accent-pale) 0 1.6px, transparent 2.4px);
background-repeat: no-repeat;
filter: drop-shadow(0 0 5px var(--apg-accent));
opacity: .85;
animation: apg-dust-rise 30s linear infinite;
}
/* Book background stays hidden until the visitor is through the portal */
.apg-bg { opacity: 0; transition: opacity .9s ease .15s; }
html.apg-entered .apg-bg { opacity: 1; }
html.apg-js.apg-locked body::before,
html.apg-js.apg-locked body::after { opacity: 0; }
/* 17d · Portal + logo */
.apg-portal-wrap {
position: relative;
display: grid;
place-items: center;
flex: none;
}
.apg-portal {
animation: apg-jelly 7s ease-in-out infinite, apg-breathe 4.5s ease-in-out infinite;
animation-timeline: auto, auto;
animation-range: normal, normal;
scale: 1;
width: clamp(260px, min(62vw, 66svh), 900px);
}
.apg-portal::after { content: none; }
@media (max-width: 767px) { .apg-portal { width: min(88vw, 52svh); } }
@media (max-height: 620px) { .apg-portal { width: min(46vw, 74svh); } }
/* Logo masked with the portal art's own theme gradient — the one place the
logo takes theme colour instead of its fixed magenta. */
.apg-portal-logo {
position: absolute;
width: 34%;
aspect-ratio: 1;
-webkit-mask-image: url("/wp-content/uploads/2024/07/Logo-website.png");
mask-image: url("/wp-content/uploads/2024/07/Logo-website.png");
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
background: linear-gradient(140deg,
var(--apg-accent-pale) 0%,
var(--apg-accent) 42%,
var(--apg-accent-soft) 70%,
var(--apg-accent-pale) 100%);
background-size: 200% 200%;
filter: drop-shadow(0 0 14px var(--apg-accent));
animation: apg-logo-shimmer 9s ease-in-out infinite, apg-logo-float 7s ease-in-out infinite;
}
@keyframes apg-logo-shimmer {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes apg-logo-float {
0%,100% { translate: 0 0; }
50% { translate: 0 -2%; }
}
/* 17e · "Scroll to enter" — below the portal, Cardo, theme coloured */
.apg-enter {
position: static !important;
width: auto; height: auto;
overflow: visible;
clip-path: none;
margin: 0;
font-family: "APG Cardo", Cardo, "Iowan Old Style", Georgia, serif;
font-style: italic;
font-size: clamp(1rem, 2.1vw, 1.45rem);
letter-spacing: .14em;
color: var(--apg-accent-pale);
text-shadow: 0 0 14px var(--apg-accent), 0 2px 20px var(--apg-void);
animation: apg-blink 2.6s ease-in-out infinite;
pointer-events: none;
}
/* 17f · The blow-out and its reverse */
@keyframes apg-blowout {
0% { scale: 1; opacity: 1; }
22% { scale: .9; opacity: 1; }
100% { scale: 10; opacity: 0; }
}
@keyframes apg-blowin {
0% { scale: 10; opacity: 0; }
70% { scale: 1.05; opacity: 1; }
100% { scale: 1; opacity: 1; }
}
html.apg-entering .apg-portal-wrap { animation: apg-blowout 1.15s cubic-bezier(.6,0,.3,1) both; }
html.apg-exiting .apg-portal-wrap { animation: apg-blowin .9s cubic-bezier(.4,0,.3,1) both; }
html.apg-entering .apg-enter,
html.apg-entering .apg-voiddust { animation: apg-fade-away .5s ease both; }
@keyframes apg-fade-away { to { opacity: 0; } }
html.apg-entering .apg-gate { animation: apg-gate-clear 1.15s ease both; }
@keyframes apg-gate-clear {
0%,55% { opacity: 1; }
100% { opacity: 0; }
}
/* 17g · The hero, now the first thing inside the portal */
.apg-hero { text-align: center; padding-top: clamp(3.5rem, 12vh, 8rem); }
.apg-hero h1 {
color: var(--apg-parchment);
font-size: clamp(1.5rem, 3.4vw, 2.6rem);
line-height: 1.15;
margin: 0 0 .6rem;
text-shadow: 0 2px 26px var(--apg-void);
}
.apg-hero .apg-gate-sub {
color: rgba(244,247,250,.8);
font-size: clamp(.9rem, 1.5vw, 1.08rem);
max-width: 60ch;
margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
.apg-voiddust, .apg-portal-logo, .apg-enter { animation: none !important; }
html.apg-entering .apg-portal-wrap,
html.apg-exiting .apg-portal-wrap { animation-duration: .06s; }
}
/* =========================================================================
18 · LOGO ALIGNMENT + GATE CENTRING
Each portal PNG has its glowing ring off image-centre (~58% down, and the
horizontal varies per artwork). Measured centroids below; the logo is
pinned to the ring rather than to the image box.
========================================================================= */
:root { --apg-ring-x: 48.1%; --apg-ring-y: 57.7%; } /* b2 default */
body:has(#apg-t1:checked) { --apg-ring-x: 52.8%; --apg-ring-y: 58.6%; }
body:has(#apg-t2:checked) { --apg-ring-x: 48.1%; --apg-ring-y: 57.7%; }
body:has(#apg-t3:checked) { --apg-ring-x: 51.6%; --apg-ring-y: 57.2%; }
.apg-portal-wrap { position: relative; }
.apg-portal-logo {
position: absolute;
left: var(--apg-ring-x);
top: var(--apg-ring-y);
translate: -50% -50%;
width: 26%;
animation: apg-logo-shimmer 9s ease-in-out infinite;
}
/* During the blow-out the logo must ride the portal, not run its own
animation — otherwise it just fades while the ring expands. */
html.apg-entering .apg-portal-logo,
html.apg-exiting .apg-portal-logo { animation: none; }
/* Gate centring — the cue was inheriting left alignment */
.apg-gate { text-align: center; }
.apg-enter { width: 100%; text-align: center; }
.apg-gate-inner { text-align: center; }
/* 19 · CUE RESET — clear every leftover from the earlier in-ring version */
.apg-enter {
position: static !important;
inset: auto !important;
width: auto !important;
height: auto !important;
max-width: 90vw;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
clip-path: none !important;
white-space: normal !important;
display: block !important;
text-align: center !important;
align-self: center !important;
}
/* 20 · CUE PINNED — flex centring was being skewed by inherited layout;
pin to the fixed gate instead so it is exactly under the portal. */
html.apg-js .apg-gate { position: fixed; }
html.apg-js .apg-enter {
position: absolute !important;
left: 50% !important;
right: auto !important;
bottom: 8vh !important;
translate: -50% 0;
margin: 0 !important;
width: max-content !important;
max-width: 90vw;
text-align: center !important;
}
/* 21 · CUE CENTRING, FINAL — translate was resolving to -100%.
Span the gate edge to edge and centre the text instead. */
html.apg-js .apg-enter {
left: 0 !important;
right: 0 !important;
translate: none !important;
transform: none !important;
width: auto !important;
max-width: none !important;
text-align: center !important;
}
/* =========================================================================
22 · LOGO SCALE · AMBIENT PORTAL LIGHT · GLOW DUST
Replaces the drifting-particle dust with fading glow motes, sizes the
logo to each portal's inner ring, and bleeds theme light into the void.
========================================================================= */
/* --- 22a · Ring geometry, measured per artwork.
x/y are the ring centre and size is its INNER diameter, both as a
percentage of the portal box (not the source image, which is letter-
boxed by background-size: contain). --- */
:root { --apg-ring-x: 48.7%; --apg-ring-y: 58.2%; --apg-logo-size: 38.5%; }
body:has(#apg-t1:checked) { --apg-ring-x: 52.7%; --apg-ring-y: 58.6%; --apg-logo-size: 36.0%; }
body:has(#apg-t2:checked) { --apg-ring-x: 48.7%; --apg-ring-y: 58.2%; --apg-logo-size: 38.5%; }
body:has(#apg-t3:checked) { --apg-ring-x: 51.4%; --apg-ring-y: 57.8%; --apg-logo-size: 42.2%; }
.apg-portal-logo {
width: var(--apg-logo-size);
filter: drop-shadow(0 0 18px var(--apg-accent))
drop-shadow(0 0 42px color-mix(in srgb, var(--apg-accent) 55%, transparent));
}
/* --- 22b · Ambient light. The void is no longer flat black: theme colour
pools around the portal and falls off to true black at the edges. --- */
.apg-gate {
background:
radial-gradient(circle at 50% 46%,
color-mix(in srgb, var(--apg-accent) 20%, transparent) 0%,
color-mix(in srgb, var(--apg-accent) 11%, transparent) 16%,
color-mix(in srgb, var(--apg-accent-bg) 55%, transparent) 34%,
color-mix(in srgb, var(--apg-accent-bg) 22%, transparent) 52%,
#05060A 74%,
#000 100%),
#000;
}
/* Same pooled light behind the rest of the site, under the book background */
html.apg-entered body {
background:
radial-gradient(circle at 50% 0%,
color-mix(in srgb, var(--apg-accent) 9%, transparent) 0%,
transparent 55%),
var(--apg-void);
}
/* --- 22c · Glow motes. Bigger, softer, and they breathe in and out on the
spot rather than drifting up and vanishing. Three layers on separate
cycles so they twinkle independently. --- */
@keyframes apg-mote-breathe {
0%, 100% { opacity: 0; }
18% { opacity: .85; }
46% { opacity: .35; }
70% { opacity: .95; }
}
.apg-voiddust,
.apg-voiddust::before,
.apg-voiddust::after {
position: absolute;
inset: 0;
content: "";
pointer-events: none;
background-repeat: no-repeat;
filter: blur(.4px) drop-shadow(0 0 6px var(--apg-accent));
will-change: opacity;
}
.apg-voiddust {
background-image:
radial-gradient(circle 9.9px at 45.4% 55.7%, var(--apg-accent-pale) 0 3.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.6px, transparent 9.9px),
radial-gradient(circle 8.1px at 46.7% 50.8%, var(--apg-accent-pale) 0 2.7px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.6px, transparent 8.1px),
radial-gradient(circle 8.4px at 19.7% 51.1%, var(--apg-accent-pale) 0 2.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.8px, transparent 8.4px),
radial-gradient(circle 6.9px at 78.1% 11.0%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 8.7px at 10.7% 79.7%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 9.9px at 6.0% 96.3%, var(--apg-accent-pale) 0 3.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.6px, transparent 9.9px),
radial-gradient(circle 6.3px at 64.8% 61.1%, var(--apg-accent-pale) 0 2.1px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.6px, transparent 6.3px),
radial-gradient(circle 5.7px at 3.4% 52.7%, var(--apg-accent-pale) 0 1.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.2px, transparent 5.7px),
radial-gradient(circle 5.4px at 20.3% 25.2%, var(--apg-accent-pale) 0 1.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.1px, transparent 5.4px),
radial-gradient(circle 9.3px at 46.5% 44.3%, var(--apg-accent-pale) 0 3.1px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.3px, transparent 9.3px),
radial-gradient(circle 7.8px at 51.8% 63.5%, var(--apg-accent-pale) 0 2.6px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.4px, transparent 7.8px),
radial-gradient(circle 6.6px at 65.6% 45.9%, var(--apg-accent-pale) 0 2.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.7px, transparent 6.6px),
radial-gradient(circle 9.3px at 97.8% 97.6%, var(--apg-accent-pale) 0 3.1px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.3px, transparent 9.3px),
radial-gradient(circle 6.6px at 69.9% 32.3%, var(--apg-accent-pale) 0 2.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.7px, transparent 6.6px),
radial-gradient(circle 9.0px at 29.7% 8.7%, var(--apg-accent-pale) 0 3.0px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.1px, transparent 9.0px),
radial-gradient(circle 7.2px at 40.4% 83.3%, var(--apg-accent-pale) 0 2.4px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.1px, transparent 7.2px),
radial-gradient(circle 5.4px at 94.0% 83.3%, var(--apg-accent-pale) 0 1.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.1px, transparent 5.4px),
radial-gradient(circle 7.8px at 22.1% 89.4%, var(--apg-accent-pale) 0 2.6px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.4px, transparent 7.8px),
radial-gradient(circle 5.7px at 96.1% 40.2%, var(--apg-accent-pale) 0 1.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.2px, transparent 5.7px),
radial-gradient(circle 6.6px at 62.4% 76.7%, var(--apg-accent-pale) 0 2.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.7px, transparent 6.6px),
radial-gradient(circle 9.9px at 10.4% 33.9%, var(--apg-accent-pale) 0 3.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.6px, transparent 9.9px),
radial-gradient(circle 6.6px at 74.8% 13.3%, var(--apg-accent-pale) 0 2.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.7px, transparent 6.6px);
animation: apg-mote-breathe 7s ease-in-out infinite;
}
.apg-voiddust::before {
background-image:
radial-gradient(circle 5.4px at 94.0% 15.5%, var(--apg-accent-pale) 0 1.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.1px, transparent 5.4px),
radial-gradient(circle 6.0px at 97.9% 19.7%, var(--apg-accent-pale) 0 2.0px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.4px, transparent 6.0px),
radial-gradient(circle 9.6px at 64.5% 35.2%, var(--apg-accent-pale) 0 3.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.4px, transparent 9.6px),
radial-gradient(circle 6.9px at 24.2% 94.1%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 8.7px at 59.7% 91.5%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 5.7px at 90.7% 70.0%, var(--apg-accent-pale) 0 1.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.2px, transparent 5.7px),
radial-gradient(circle 6.9px at 86.6% 58.6%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 8.1px at 20.3% 83.6%, var(--apg-accent-pale) 0 2.7px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.6px, transparent 8.1px),
radial-gradient(circle 9.9px at 92.0% 76.3%, var(--apg-accent-pale) 0 3.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.6px, transparent 9.9px),
radial-gradient(circle 8.4px at 56.4% 69.0%, var(--apg-accent-pale) 0 2.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.8px, transparent 8.4px),
radial-gradient(circle 6.9px at 26.8% 93.8%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 8.4px at 77.0% 93.6%, var(--apg-accent-pale) 0 2.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.8px, transparent 8.4px),
radial-gradient(circle 8.7px at 15.7% 81.2%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 8.1px at 19.8% 6.7%, var(--apg-accent-pale) 0 2.7px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.6px, transparent 8.1px),
radial-gradient(circle 7.8px at 5.1% 90.8%, var(--apg-accent-pale) 0 2.6px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.4px, transparent 7.8px),
radial-gradient(circle 8.7px at 51.7% 41.3%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 7.2px at 90.0% 31.5%, var(--apg-accent-pale) 0 2.4px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.1px, transparent 7.2px),
radial-gradient(circle 8.4px at 57.9% 30.5%, var(--apg-accent-pale) 0 2.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.8px, transparent 8.4px),
radial-gradient(circle 8.7px at 54.1% 43.6%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 10.2px at 52.7% 10.5%, var(--apg-accent-pale) 0 3.4px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.8px, transparent 10.2px);
animation: apg-mote-breathe 9.5s ease-in-out infinite -3.2s;
}
.apg-voiddust::after {
background-image:
radial-gradient(circle 9.3px at 56.8% 62.7%, var(--apg-accent-pale) 0 3.1px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.3px, transparent 9.3px),
radial-gradient(circle 9.6px at 28.6% 64.6%, var(--apg-accent-pale) 0 3.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.4px, transparent 9.6px),
radial-gradient(circle 8.4px at 89.2% 19.9%, var(--apg-accent-pale) 0 2.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.8px, transparent 8.4px),
radial-gradient(circle 9.9px at 61.2% 50.3%, var(--apg-accent-pale) 0 3.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.6px, transparent 9.9px),
radial-gradient(circle 9.9px at 52.7% 44.7%, var(--apg-accent-pale) 0 3.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.6px, transparent 9.9px),
radial-gradient(circle 6.9px at 63.0% 30.9%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 8.4px at 49.6% 7.0%, var(--apg-accent-pale) 0 2.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.8px, transparent 8.4px),
radial-gradient(circle 9.6px at 72.6% 42.9%, var(--apg-accent-pale) 0 3.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.4px, transparent 9.6px),
radial-gradient(circle 8.7px at 91.1% 55.3%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 10.2px at 13.3% 7.4%, var(--apg-accent-pale) 0 3.4px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.8px, transparent 10.2px),
radial-gradient(circle 9.6px at 29.3% 22.5%, var(--apg-accent-pale) 0 3.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.4px, transparent 9.6px),
radial-gradient(circle 6.9px at 74.0% 13.8%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 5.4px at 25.3% 28.2%, var(--apg-accent-pale) 0 1.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.1px, transparent 5.4px),
radial-gradient(circle 7.2px at 52.4% 31.2%, var(--apg-accent-pale) 0 2.4px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.1px, transparent 7.2px),
radial-gradient(circle 5.7px at 19.8% 12.6%, var(--apg-accent-pale) 0 1.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.2px, transparent 5.7px),
radial-gradient(circle 8.1px at 85.8% 73.7%, var(--apg-accent-pale) 0 2.7px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.6px, transparent 8.1px),
radial-gradient(circle 6.0px at 13.9% 16.3%, var(--apg-accent-pale) 0 2.0px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.4px, transparent 6.0px),
radial-gradient(circle 6.6px at 32.4% 7.5%, var(--apg-accent-pale) 0 2.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.7px, transparent 6.6px);
animation: apg-mote-breathe 12s ease-in-out infinite -6.7s;
}
/* Site-wide motes, behind and in front of content */
body::before, body::after {
background-repeat: no-repeat;
filter: blur(.4px) drop-shadow(0 0 7px var(--apg-accent));
}
body::before {
background-image:
radial-gradient(circle 9.6px at 41.2% 54.0%, var(--apg-accent-pale) 0 3.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.4px, transparent 9.6px),
radial-gradient(circle 5.4px at 19.0% 23.6%, var(--apg-accent-pale) 0 1.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.1px, transparent 5.4px),
radial-gradient(circle 6.3px at 13.2% 2.8%, var(--apg-accent-pale) 0 2.1px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.6px, transparent 6.3px),
radial-gradient(circle 8.7px at 51.3% 97.0%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 8.7px at 38.3% 40.9%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 9.3px at 33.3% 9.1%, var(--apg-accent-pale) 0 3.1px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.3px, transparent 9.3px),
radial-gradient(circle 5.7px at 61.3% 12.8%, var(--apg-accent-pale) 0 1.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.2px, transparent 5.7px),
radial-gradient(circle 6.0px at 11.1% 94.1%, var(--apg-accent-pale) 0 2.0px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.4px, transparent 6.0px),
radial-gradient(circle 5.7px at 62.0% 95.1%, var(--apg-accent-pale) 0 1.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.2px, transparent 5.7px),
radial-gradient(circle 9.9px at 39.0% 47.8%, var(--apg-accent-pale) 0 3.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.6px, transparent 9.9px),
radial-gradient(circle 6.6px at 20.1% 26.8%, var(--apg-accent-pale) 0 2.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.7px, transparent 6.6px),
radial-gradient(circle 9.3px at 6.7% 66.7%, var(--apg-accent-pale) 0 3.1px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 5.3px, transparent 9.3px),
radial-gradient(circle 8.7px at 43.9% 5.6%, var(--apg-accent-pale) 0 2.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.9px, transparent 8.7px),
radial-gradient(circle 6.9px at 72.8% 64.7%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 8.1px at 81.7% 62.5%, var(--apg-accent-pale) 0 2.7px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.6px, transparent 8.1px),
radial-gradient(circle 7.5px at 53.9% 24.4%, var(--apg-accent-pale) 0 2.5px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.2px, transparent 7.5px),
radial-gradient(circle 7.2px at 78.2% 67.6%, var(--apg-accent-pale) 0 2.4px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.1px, transparent 7.2px),
radial-gradient(circle 5.7px at 80.7% 82.6%, var(--apg-accent-pale) 0 1.9px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.2px, transparent 5.7px),
radial-gradient(circle 5.4px at 17.1% 23.4%, var(--apg-accent-pale) 0 1.8px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.1px, transparent 5.4px),
radial-gradient(circle 8.1px at 74.3% 64.1%, var(--apg-accent-pale) 0 2.7px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.6px, transparent 8.1px);
opacity: 1;
animation: apg-mote-breathe 10s ease-in-out infinite;
}
body::after {
background-image:
radial-gradient(circle 4.8px at 10.7% 93.3%, var(--apg-accent-pale) 0 1.6px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 2.7px, transparent 4.8px),
radial-gradient(circle 6.9px at 73.0% 82.8%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 6.9px at 31.0% 35.8%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 6.0px at 94.7% 65.6%, var(--apg-accent-pale) 0 2.0px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.4px, transparent 6.0px),
radial-gradient(circle 6.9px at 39.2% 41.0%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px),
radial-gradient(circle 6.6px at 43.2% 53.3%, var(--apg-accent-pale) 0 2.2px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.7px, transparent 6.6px),
radial-gradient(circle 5.1px at 62.7% 5.9%, var(--apg-accent-pale) 0 1.7px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 2.9px, transparent 5.1px),
radial-gradient(circle 7.2px at 69.8% 56.8%, var(--apg-accent-pale) 0 2.4px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 4.1px, transparent 7.2px),
radial-gradient(circle 6.0px at 7.0% 24.2%, var(--apg-accent-pale) 0 2.0px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.4px, transparent 6.0px),
radial-gradient(circle 6.9px at 73.7% 20.7%, var(--apg-accent-pale) 0 2.3px, color-mix(in srgb, var(--apg-accent) 55%, transparent) 3.9px, transparent 6.9px);
opacity: 1;
animation: apg-mote-breathe 14s ease-in-out infinite -5s;
}
@media (max-width: 767px) {
.apg-voiddust::after { display: none; }
body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.apg-voiddust, .apg-voiddust::before, .apg-voiddust::after,
body::before, body::after { animation: none !important; opacity: .5 !important; }
}
/* =========================================================================
23 · MOTE CORRECTION + LOGO HOLD
Reverts the oversized particles from block 22 back to fine dust with a
mild glow, gives each layer its own wandering path, and stops the logo
scaling with the portal during the blow-out.
========================================================================= */
/* --- 23a · Fine motes again. Small, gently glowing, fading in and out. --- */
.apg-voiddust,
.apg-voiddust::before,
.apg-voiddust::after {
filter: drop-shadow(0 0 3px var(--apg-accent));
}
.apg-voiddust { background-image: radial-gradient(circle 2.74px at 88.4% 24.5%, var(--apg-accent-pale) 0 1.44px, transparent 2.74px),radial-gradient(circle 2.43px at 4.0% 57.7%, var(--apg-accent-pale) 0 1.28px, transparent 2.43px),radial-gradient(circle 2.62px at 89.7% 13.0%, var(--apg-accent-pale) 0 1.38px, transparent 2.62px),radial-gradient(circle 3.25px at 49.8% 62.1%, var(--apg-accent-pale) 0 1.71px, transparent 3.25px),radial-gradient(circle 2.39px at 67.6% 66.8%, var(--apg-accent-pale) 0 1.26px, transparent 2.39px),radial-gradient(circle 2.17px at 4.4% 40.2%, var(--apg-accent-pale) 0 1.14px, transparent 2.17px),radial-gradient(circle 3.25px at 91.8% 54.0%, var(--apg-accent-pale) 0 1.71px, transparent 3.25px),radial-gradient(circle 2.43px at 94.1% 41.7%, var(--apg-accent-pale) 0 1.28px, transparent 2.43px),radial-gradient(circle 2.17px at 65.0% 62.0%, var(--apg-accent-pale) 0 1.14px, transparent 2.17px),radial-gradient(circle 3.12px at 26.0% 58.9%, var(--apg-accent-pale) 0 1.64px, transparent 3.12px),radial-gradient(circle 3.25px at 56.2% 34.5%, var(--apg-accent-pale) 0 1.71px, transparent 3.25px),radial-gradient(circle 2.85px at 49.2% 43.5%, var(--apg-accent-pale) 0 1.50px, transparent 2.85px),radial-gradient(circle 3.42px at 86.0% 82.2%, var(--apg-accent-pale) 0 1.80px, transparent 3.42px),radial-gradient(circle 2.77px at 2.9% 30.8%, var(--apg-accent-pale) 0 1.46px, transparent 2.77px),radial-gradient(circle 2.09px at 17.5% 15.8%, var(--apg-accent-pale) 0 1.10px, transparent 2.09px),radial-gradient(circle 2.87px at 79.9% 63.9%, var(--apg-accent-pale) 0 1.51px, transparent 2.87px),radial-gradient(circle 2.56px at 81.5% 46.1%, var(--apg-accent-pale) 0 1.35px, transparent 2.56px),radial-gradient(circle 2.58px at 69.2% 11.9%, var(--apg-accent-pale) 0 1.36px, transparent 2.58px),radial-gradient(circle 2.41px at 8.9% 12.1%, var(--apg-accent-pale) 0 1.27px, transparent 2.41px),radial-gradient(circle 2.30px at 36.7% 21.4%, var(--apg-accent-pale) 0 1.21px, transparent 2.30px),radial-gradient(circle 2.74px at 14.6% 21.0%, var(--apg-accent-pale) 0 1.44px, transparent 2.74px),radial-gradient(circle 3.02px at 66.9% 50.1%, var(--apg-accent-pale) 0 1.59px, transparent 3.02px),radial-gradient(circle 2.64px at 88.7% 56.2%, var(--apg-accent-pale) 0 1.39px, transparent 2.64px),radial-gradient(circle 2.51px at 63.8% 50.1%, var(--apg-accent-pale) 0 1.32px, transparent 2.51px),radial-gradient(circle 2.30px at 52.9% 77.9%, var(--apg-accent-pale) 0 1.21px, transparent 2.30px),radial-gradient(circle 2.38px at 26.0% 68.3%, var(--apg-accent-pale) 0 1.25px, transparent 2.38px); }
.apg-voiddust::before{ background-image: radial-gradient(circle 3.23px at 78.9% 80.1%, var(--apg-accent-pale) 0 1.70px, transparent 3.23px),radial-gradient(circle 3.32px at 21.9% 65.3%, var(--apg-accent-pale) 0 1.75px, transparent 3.32px),radial-gradient(circle 2.36px at 67.7% 79.6%, var(--apg-accent-pale) 0 1.24px, transparent 2.36px),radial-gradient(circle 2.39px at 91.3% 61.7%, var(--apg-accent-pale) 0 1.26px, transparent 2.39px),radial-gradient(circle 2.85px at 36.4% 38.6%, var(--apg-accent-pale) 0 1.50px, transparent 2.85px),radial-gradient(circle 2.22px at 85.3% 5.0%, var(--apg-accent-pale) 0 1.17px, transparent 2.22px),radial-gradient(circle 2.93px at 86.8% 3.8%, var(--apg-accent-pale) 0 1.54px, transparent 2.93px),radial-gradient(circle 3.36px at 67.0% 28.7%, var(--apg-accent-pale) 0 1.77px, transparent 3.36px),radial-gradient(circle 2.58px at 13.9% 18.3%, var(--apg-accent-pale) 0 1.36px, transparent 2.58px),radial-gradient(circle 2.28px at 48.8% 29.6%, var(--apg-accent-pale) 0 1.20px, transparent 2.28px),radial-gradient(circle 2.20px at 85.4% 29.2%, var(--apg-accent-pale) 0 1.16px, transparent 2.20px),radial-gradient(circle 2.24px at 35.8% 5.2%, var(--apg-accent-pale) 0 1.18px, transparent 2.24px),radial-gradient(circle 2.45px at 39.5% 94.2%, var(--apg-accent-pale) 0 1.29px, transparent 2.45px),radial-gradient(circle 2.30px at 20.1% 69.0%, var(--apg-accent-pale) 0 1.21px, transparent 2.30px),radial-gradient(circle 3.23px at 13.1% 68.3%, var(--apg-accent-pale) 0 1.70px, transparent 3.23px),radial-gradient(circle 3.04px at 8.0% 4.7%, var(--apg-accent-pale) 0 1.60px, transparent 3.04px),radial-gradient(circle 2.22px at 4.2% 51.5%, var(--apg-accent-pale) 0 1.17px, transparent 2.22px),radial-gradient(circle 2.39px at 66.3% 78.7%, var(--apg-accent-pale) 0 1.26px, transparent 2.39px),radial-gradient(circle 2.74px at 21.1% 65.0%, var(--apg-accent-pale) 0 1.44px, transparent 2.74px),radial-gradient(circle 2.81px at 29.2% 48.4%, var(--apg-accent-pale) 0 1.48px, transparent 2.81px),radial-gradient(circle 2.55px at 28.9% 9.1%, var(--apg-accent-pale) 0 1.34px, transparent 2.55px),radial-gradient(circle 2.74px at 53.6% 77.1%, var(--apg-accent-pale) 0 1.44px, transparent 2.74px),radial-gradient(circle 2.94px at 43.7% 59.2%, var(--apg-accent-pale) 0 1.55px, transparent 2.94px),radial-gradient(circle 3.08px at 6.4% 12.2%, var(--apg-accent-pale) 0 1.62px, transparent 3.08px); }
.apg-voiddust::after { background-image: radial-gradient(circle 3.13px at 69.3% 39.7%, var(--apg-accent-pale) 0 1.65px, transparent 3.13px),radial-gradient(circle 2.83px at 54.8% 16.4%, var(--apg-accent-pale) 0 1.49px, transparent 2.83px),radial-gradient(circle 2.22px at 22.8% 63.4%, var(--apg-accent-pale) 0 1.17px, transparent 2.22px),radial-gradient(circle 2.11px at 71.1% 27.6%, var(--apg-accent-pale) 0 1.11px, transparent 2.11px),radial-gradient(circle 3.04px at 39.3% 66.6%, var(--apg-accent-pale) 0 1.60px, transparent 3.04px),radial-gradient(circle 2.74px at 65.0% 33.5%, var(--apg-accent-pale) 0 1.44px, transparent 2.74px),radial-gradient(circle 3.10px at 77.8% 20.4%, var(--apg-accent-pale) 0 1.63px, transparent 3.10px),radial-gradient(circle 2.96px at 8.8% 77.4%, var(--apg-accent-pale) 0 1.56px, transparent 2.96px),radial-gradient(circle 2.20px at 97.3% 44.2%, var(--apg-accent-pale) 0 1.16px, transparent 2.20px),radial-gradient(circle 3.02px at 15.5% 65.1%, var(--apg-accent-pale) 0 1.59px, transparent 3.02px),radial-gradient(circle 2.55px at 79.1% 87.2%, var(--apg-accent-pale) 0 1.34px, transparent 2.55px),radial-gradient(circle 2.60px at 30.4% 8.2%, var(--apg-accent-pale) 0 1.37px, transparent 2.60px),radial-gradient(circle 3.06px at 24.9% 75.6%, var(--apg-accent-pale) 0 1.61px, transparent 3.06px),radial-gradient(circle 2.89px at 95.3% 41.8%, var(--apg-accent-pale) 0 1.52px, transparent 2.89px),radial-gradient(circle 2.39px at 58.7% 63.1%, var(--apg-accent-pale) 0 1.26px, transparent 2.39px),radial-gradient(circle 2.09px at 89.9% 44.7%, var(--apg-accent-pale) 0 1.10px, transparent 2.09px),radial-gradient(circle 3.15px at 90.1% 27.0%, var(--apg-accent-pale) 0 1.66px, transparent 3.15px),radial-gradient(circle 2.81px at 12.7% 21.5%, var(--apg-accent-pale) 0 1.48px, transparent 2.81px),radial-gradient(circle 2.30px at 16.0% 63.4%, var(--apg-accent-pale) 0 1.21px, transparent 2.30px),radial-gradient(circle 3.02px at 51.3% 43.6%, var(--apg-accent-pale) 0 1.59px, transparent 3.02px),radial-gradient(circle 2.75px at 62.5% 78.5%, var(--apg-accent-pale) 0 1.45px, transparent 2.75px),radial-gradient(circle 2.70px at 40.1% 49.5%, var(--apg-accent-pale) 0 1.42px, transparent 2.70px); }
body::before, body::after { filter: drop-shadow(0 0 3px var(--apg-accent)); }
body::before { background-image: radial-gradient(circle 2.30px at 59.7% 95.4%, var(--apg-accent-pale) 0 1.21px, transparent 2.30px),radial-gradient(circle 2.72px at 61.8% 54.4%, var(--apg-accent-pale) 0 1.43px, transparent 2.72px),radial-gradient(circle 2.62px at 9.0% 58.0%, var(--apg-accent-pale) 0 1.38px, transparent 2.62px),radial-gradient(circle 2.30px at 72.1% 33.4%, var(--apg-accent-pale) 0 1.21px, transparent 2.30px),radial-gradient(circle 2.30px at 5.6% 85.4%, var(--apg-accent-pale) 0 1.21px, transparent 2.30px),radial-gradient(circle 3.04px at 60.8% 38.7%, var(--apg-accent-pale) 0 1.60px, transparent 3.04px),radial-gradient(circle 2.58px at 57.8% 76.2%, var(--apg-accent-pale) 0 1.36px, transparent 2.58px),radial-gradient(circle 2.39px at 96.5% 97.6%, var(--apg-accent-pale) 0 1.26px, transparent 2.39px),radial-gradient(circle 2.17px at 13.9% 59.8%, var(--apg-accent-pale) 0 1.14px, transparent 2.17px),radial-gradient(circle 2.75px at 45.5% 69.0%, var(--apg-accent-pale) 0 1.45px, transparent 2.75px),radial-gradient(circle 2.15px at 84.3% 62.7%, var(--apg-accent-pale) 0 1.13px, transparent 2.15px),radial-gradient(circle 2.41px at 58.9% 72.5%, var(--apg-accent-pale) 0 1.27px, transparent 2.41px),radial-gradient(circle 2.66px at 69.2% 39.6%, var(--apg-accent-pale) 0 1.40px, transparent 2.66px),radial-gradient(circle 2.56px at 19.6% 27.7%, var(--apg-accent-pale) 0 1.35px, transparent 2.56px),radial-gradient(circle 2.17px at 63.1% 75.3%, var(--apg-accent-pale) 0 1.14px, transparent 2.17px),radial-gradient(circle 2.15px at 40.3% 93.0%, var(--apg-accent-pale) 0 1.13px, transparent 2.15px),radial-gradient(circle 3.31px at 71.5% 68.3%, var(--apg-accent-pale) 0 1.74px, transparent 3.31px),radial-gradient(circle 2.43px at 47.9% 62.6%, var(--apg-accent-pale) 0 1.28px, transparent 2.43px),radial-gradient(circle 2.38px at 23.5% 66.2%, var(--apg-accent-pale) 0 1.25px, transparent 2.38px),radial-gradient(circle 2.83px at 90.6% 68.8%, var(--apg-accent-pale) 0 1.49px, transparent 2.83px),radial-gradient(circle 3.10px at 27.8% 4.4%, var(--apg-accent-pale) 0 1.63px, transparent 3.10px),radial-gradient(circle 2.11px at 25.7% 55.0%, var(--apg-accent-pale) 0 1.11px, transparent 2.11px),radial-gradient(circle 2.28px at 10.4% 9.6%, var(--apg-accent-pale) 0 1.20px, transparent 2.28px),radial-gradient(circle 2.96px at 6.3% 95.9%, var(--apg-accent-pale) 0 1.56px, transparent 2.96px); }
body::after { background-image: radial-gradient(circle 2.81px at 50.1% 55.0%, var(--apg-accent-pale) 0 1.48px, transparent 2.81px),radial-gradient(circle 2.77px at 68.8% 18.0%, var(--apg-accent-pale) 0 1.46px, transparent 2.77px),radial-gradient(circle 2.20px at 83.4% 84.0%, var(--apg-accent-pale) 0 1.16px, transparent 2.20px),radial-gradient(circle 3.36px at 60.9% 49.2%, var(--apg-accent-pale) 0 1.77px, transparent 3.36px),radial-gradient(circle 2.96px at 95.9% 2.8%, var(--apg-accent-pale) 0 1.56px, transparent 2.96px),radial-gradient(circle 2.93px at 13.3% 72.9%, var(--apg-accent-pale) 0 1.54px, transparent 2.93px),radial-gradient(circle 2.43px at 65.9% 40.8%, var(--apg-accent-pale) 0 1.28px, transparent 2.43px),radial-gradient(circle 3.34px at 22.0% 22.7%, var(--apg-accent-pale) 0 1.76px, transparent 3.34px),radial-gradient(circle 2.32px at 51.8% 22.3%, var(--apg-accent-pale) 0 1.22px, transparent 2.32px),radial-gradient(circle 3.13px at 97.6% 38.4%, var(--apg-accent-pale) 0 1.65px, transparent 3.13px),radial-gradient(circle 2.60px at 44.8% 19.2%, var(--apg-accent-pale) 0 1.37px, transparent 2.60px),radial-gradient(circle 2.45px at 89.6% 22.2%, var(--apg-accent-pale) 0 1.29px, transparent 2.45px); }
/* --- 23b · Wandering drift. Each layer takes a different meandering path
on its own cycle, so nothing moves in unison or in a straight line.
Opacity (breathe) and translate (wander) are separate properties, so
the two animations compose instead of overriding. --- */
@keyframes apg-wander-a {
0%,100% { translate: 0 0; }
20% { translate: 1.1vw -1.4vh; }
42% { translate: -0.7vw -2.2vh; }
63% { translate: -1.6vw -0.5vh; }
82% { translate: 0.5vw 1.2vh; }
}
@keyframes apg-wander-b {
0%,100% { translate: 0 0; }
24% { translate: -1.3vw 0.9vh; }
47% { translate: 0.9vw 1.8vh; }
68% { translate: 1.7vw -0.6vh; }
86% { translate: -0.4vw -1.5vh; }
}
@keyframes apg-wander-c {
0%,100% { translate: 0 0; }
17% { translate: 0.8vw 1.6vh; }
39% { translate: -1.5vw 0.4vh; }
58% { translate: -0.9vw -1.9vh; }
79% { translate: 1.4vw -0.9vh; }
}
.apg-voiddust { animation: apg-mote-breathe 7s ease-in-out infinite,
apg-wander-a 23s ease-in-out infinite; }
.apg-voiddust::before { animation: apg-mote-breathe 9.5s ease-in-out infinite -3.2s,
apg-wander-b 31s ease-in-out infinite -8s; }
.apg-voiddust::after { animation: apg-mote-breathe 12s ease-in-out infinite -6.7s,
apg-wander-c 27s ease-in-out infinite -14s; }
body::before { animation: apg-mote-breathe 10s ease-in-out infinite,
apg-wander-b 37s ease-in-out infinite -11s; }
body::after { animation: apg-mote-breathe 14s ease-in-out infinite -5s,
apg-wander-a 43s ease-in-out infinite -19s; }
/* --- 23c · Logo holds its size and fades.
The wrap scales 1 -> 10 during the blow-out; these keyframes are its
numeric inverse, so the logo stays visually the same size while it
dissolves instead of rushing at the viewer with the ring. --- */
@keyframes apg-logo-hold {
0% { scale: 1; opacity: 1; }
22% { scale: 1.111; opacity: .92; }
40% { scale: .333; opacity: .5; }
55% { scale: .22; opacity: 0; }
100% { scale: .1; opacity: 0; }
}
@keyframes apg-logo-return {
0% { scale: .1; opacity: 0; }
45% { scale: .28; opacity: 0; }
70% { scale: .952; opacity: .7; }
100% { scale: 1; opacity: 1; }
}
html.apg-entering .apg-portal-logo {
animation: apg-logo-hold 1.15s cubic-bezier(.6,0,.3,1) both !important;
}
html.apg-exiting .apg-portal-logo {
animation: apg-logo-return .9s cubic-bezier(.4,0,.3,1) both !important;
}
@media (prefers-reduced-motion: reduce) {
.apg-voiddust, .apg-voiddust::before, .apg-voiddust::after,
body::before, body::after { animation: none !important; opacity: .5 !important; }
}
/* ═══ 24 · Portal larger on desktop; logo reads in front of the ring ═══
The logo already painted above the portal (later sibling, both z-index:auto).
It only *looked* recessed because it is a mask filled with the same theme
gradient as the ring, sitting in the ring's dark well — so this is a
contrast fix, not a stacking fix. Logo width stays 26% of the portal box,
so it grows in proportion with the portal automatically. */
@media (min-width: 1025px) {
.apg-portal { width: clamp(260px, min(70vw, 74svh), 1020px); }
}
.apg-portal-logo {
z-index: 2;
filter:
drop-shadow(0 0 2px rgba(0,0,0,.90))
drop-shadow(0 3px 12px rgba(0,0,0,.65))
drop-shadow(0 0 16px var(--apg-accent))
brightness(1.22);
}
/* ============================================================
18 · SITE HEADER & FOOTER — added 12 Aug 2026
Hello Elementor native header/footer, themed to the portal.
Markup: #site-header .header-inner / #site-footer .footer-inner
Deliberately NOT Elementor — keeps the payload off every page.
============================================================ */
/* ---- 18a · Header shell ---- */
#site-header {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 58;
background: color-mix(in srgb, var(--apg-void) 86%, transparent);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border-bottom: 1px solid color-mix(in srgb, var(--apg-accent) 20%, transparent);
padding: 0;
}
#site-header .header-inner {
max-width: 1180px;
margin-inline: auto;
padding: 0.55rem 1.25rem;
gap: 1.5rem;
}
#site-header .site-title a,
#site-header .site-title {
color: var(--apg-logo);
font-family: Cardo, Georgia, serif;
font-size: 1.28rem;
letter-spacing: .04em;
text-decoration: none;
}
#site-header .custom-logo-link img { max-height: 46px; width: auto; }
/* ---- 18b · Header nav ---- */
#menu-primary { gap: .15rem; }
#menu-primary a {
color: var(--apg-parchment);
font-size: 1rem;
letter-spacing: .02em;
text-decoration: none;
padding: .62rem .78rem; /* keeps tap target >= 44px tall */
border-radius: 6px;
transition: color .18s ease, background-color .18s ease;
}
#menu-primary a:hover,
#menu-primary a:focus-visible { color: var(--apg-accent-pale); background: color-mix(in srgb, var(--apg-accent) 14%, transparent); }
#menu-primary .current-menu-item > a,
#menu-primary .current_page_item > a { color: var(--apg-accent); }
#menu-primary .sub-menu {
background: color-mix(in srgb, var(--apg-void) 96%, transparent);
border: 1px solid color-mix(in srgb, var(--apg-accent) 24%, transparent);
border-radius: 10px;
padding: .35rem;
min-width: 218px;
box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
#menu-primary .sub-menu a { padding: .55rem .7rem; font-size: .96rem; }
#site-header .site-navigation-toggle,
#site-header .site-navigation-toggle-holder .site-navigation-toggle {
background: transparent;
color: var(--apg-accent);
border: 1px solid color-mix(in srgb, var(--apg-accent) 34%, transparent);
border-radius: 8px;
min-width: 48px; min-height: 48px; /* mobile tap target */
}
#site-header .site-navigation-dropdown ul,
#site-header .site-navigation-dropdown {
background: color-mix(in srgb, var(--apg-void) 97%, transparent);
}
#site-header .site-navigation-dropdown a { color: var(--apg-parchment); padding: .8rem 1.1rem; font-size: 1rem; }
/* ---- 18c · Header must not fight the portal gate ----
While the gate is locked the header is hidden; it fades in on entry.
Uses visibility (not display) so the nav stays in the DOM for crawlers. */
html.apg-js.apg-locked #site-header,
html.apg-js.apg-entering #site-header {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
html.apg-js #site-header { transition: opacity .55s ease .15s, visibility .55s ease .15s; }
/* ---- 18d · Footer shell ---- */
#site-footer {
background: linear-gradient(180deg,
color-mix(in srgb, var(--apg-void) 82%, transparent) 0%,
var(--apg-void) 55%);
border-top: 1px solid color-mix(in srgb, var(--apg-accent) 24%, transparent);
padding: 3.1rem 1.25rem 1.6rem;
position: relative;
z-index: 2;
}
#site-footer .footer-inner {
max-width: 1180px;
margin-inline: auto;
display: block;
}
#site-footer .site-branding { justify-content: center; margin-bottom: 1.8rem; }
#site-footer .custom-logo-link img { max-height: 62px; width: auto; opacity: .95; }
/* ---- 18e · The four columns ---- */
#site-footer .site-navigation { display: block; width: 100%; }
#menu-footer {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem 1.75rem;
list-style: none;
margin: 0;
padding: 0;
align-items: start;
}
#menu-footer > li.apg-fcol { display: block; margin: 0; }
/* column heading — a menu item needs a URL, so it is an anchor to '#'
that we neutralise here rather than render as a dead link */
#menu-footer > li.apg-fcol > a {
display: block;
pointer-events: none;
cursor: default;
color: var(--apg-accent);
font-family: Cardo, Georgia, serif;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
text-decoration: none;
padding: 0 0 .7rem;
border-bottom: 1px solid color-mix(in srgb, var(--apg-accent) 26%, transparent);
margin-bottom: .55rem;
}
#menu-footer .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
transform: none;
background: none;
border: 0;
box-shadow: none;
list-style: none;
margin: 0;
padding: 0;
min-width: 0;
}
#menu-footer .sub-menu li { margin: 0; }
#menu-footer .sub-menu a {
display: block;
color: color-mix(in srgb, var(--apg-parchment) 88%, transparent);
font-size: 1rem; /* >= 16px: stops iOS auto-zoom */
line-height: 1.35;
text-decoration: none;
padding: .5rem 0; /* generous vertical tap target */
transition: color .16s ease, padding-left .16s ease;
}
#menu-footer .sub-menu a:hover,
#menu-footer .sub-menu a:focus-visible {
color: var(--apg-accent-pale);
padding-left: .3rem;
}
/* ---- 18f · Copyright strip ---- */
#site-footer .copyright {
max-width: 1180px;
margin: 2.6rem auto 0;
padding-top: 1.4rem;
border-top: 1px solid color-mix(in srgb, var(--apg-accent) 16%, transparent);
text-align: center;
}
#site-footer .copyright p {
color: color-mix(in srgb, var(--apg-parchment) 62%, transparent);
font-size: .93rem;
line-height: 1.7;
margin: 0;
}
/* ---- 18g · Responsive ---- */
@media (max-width: 900px) {
#menu-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.1rem 1.4rem; }
}
@media (max-width: 540px) {
#menu-footer { grid-template-columns: 1fr; gap: 1.9rem; }
#site-footer { padding-top: 2.4rem; }
#site-header .header-inner { padding: .45rem .9rem; }
}
/* ---- 18h · Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
#menu-footer .sub-menu a,
#menu-primary a,
html.apg-js #site-header { transition: none; }
}
/* ---- 18i · Strip Hello Elementor's default footer-menu chrome ----
The theme puts a border-bottom on every footer
and a dropdown
caret on parent items. Both are wrong in a column layout. */
#site-footer #menu-footer li,
#site-footer #menu-footer .sub-menu li { border: 0 !important; }
#site-footer #menu-footer li::after,
#site-footer #menu-footer li::before,
#site-footer #menu-footer a::after,
#site-footer #menu-footer .sub-arrow,
#site-footer #menu-footer .menu-item-has-children > a::after { display: none !important; content: none !important; }
#site-footer #menu-footer > li.apg-fcol > a { border-bottom: 1px solid color-mix(in srgb, var(--apg-accent) 26%, transparent) !important; }
/* ============================================================
19 · TRILOGY ROTATOR — added 12 Aug 2026
Blender turntable (VP9 + alpha). One book holds face-on for
~3.3s; hover snaps to the nearest hold and labels it, so the
click target never moves under the cursor.
Holds: t=0.000 Legacy Academy / 3.375 Astoria / 6.583 Immortal
============================================================ */
/* ---- 19a · Rotator stage ---- */
.apg-rotator {
position: relative;
width: min(420px, 78vw);
margin: 2.2rem auto 1.7rem;
aspect-ratio: 864 / 1080;
}
.apg-rotator-js { cursor: pointer; }
.apg-rotator-vid {
width: 100%; height: 100%;
display: block;
object-fit: contain;
filter: drop-shadow(0 18px 38px rgba(0,0,0,.60));
transition: filter .35s ease, transform .35s ease;
}
.apg-rotator.is-held .apg-rotator-vid {
transform: scale(1.02);
filter:
drop-shadow(0 0 26px color-mix(in srgb, var(--apg-accent) 42%, transparent))
drop-shadow(0 18px 38px rgba(0,0,0,.60));
}
/* ---- 19b · Hit area + label ----
tabindex=-1 in the markup: the three real links below are the
keyboard path, so this overlay never becomes a duplicate stop. */
.apg-rotator-hit {
position: absolute; inset: 0;
display: flex; align-items: flex-end; justify-content: center;
text-decoration: none;
}
.apg-rotator-label {
opacity: 0;
transform: translateY(9px);
transition: opacity .26s ease, transform .26s ease;
background: color-mix(in srgb, var(--apg-void) 88%, transparent);
border: 1px solid color-mix(in srgb, var(--apg-accent) 46%, transparent);
color: var(--apg-accent-pale);
font-family: Cardo, Georgia, serif;
font-size: 1.02rem;
letter-spacing: .045em;
padding: .5rem 1.05rem;
border-radius: 999px;
margin-bottom: -.5rem;
white-space: nowrap;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
.apg-rotator-label:not(:empty)::after { content: ' \2192'; }
.apg-rotator.is-held .apg-rotator-label { opacity: 1; transform: translateY(0); }
/* ---- 19c · The three real links (the crawlable content) ---- */
.apg-rotator-books {
list-style: none;
margin: 0 auto 1.3rem;
padding: 0;
max-width: 780px;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 1rem;
}
.apg-rotator-books li { margin: 0; }
.apg-rotator-books a {
display: block;
height: 100%;
text-decoration: none;
padding: .9rem .95rem;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--apg-accent) 18%, transparent);
background: color-mix(in srgb, var(--apg-void) 52%, transparent);
transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.apg-rotator-books a:hover,
.apg-rotator-books a:focus-visible {
border-color: color-mix(in srgb, var(--apg-accent) 55%, transparent);
background: color-mix(in srgb, var(--apg-void) 76%, transparent);
transform: translateY(-2px);
}
.apg-rotator-books strong {
display: block;
color: var(--apg-accent);
font-family: inherit;
font-size: 1.07rem;
font-weight: 700;
letter-spacing: normal;
margin-bottom: .32rem;
}
.apg-rotator-books span {
display: block;
color: color-mix(in srgb, var(--apg-parchment) 78%, transparent);
font-size: .94rem;
line-height: 1.45;
}
.apg-rotator-all { text-align: center; margin: 0; }
.apg-rotator-all a {
color: var(--apg-accent-pale);
font-size: 1rem;
text-underline-offset: .22em;
}
/* ---- 19d · Fallback: no JS, or codec refused (Safari VP9 alpha) ----
The poster attribute carries the first hold frame, so something
correct is always on screen and the links below still work. */
.apg-rotator.is-fallback .apg-rotator-vid { visibility: hidden; }
.apg-rotator.is-fallback {
background: url("/wp-content/uploads/2026/08/apg-trilogy-poster.webp") center / contain no-repeat;
}
/* ---- 19e · Responsive ---- */
@media (max-width: 720px) {
.apg-rotator-books { grid-template-columns: 1fr; gap: .7rem; max-width: 420px; }
.apg-rotator { width: min(320px, 74vw); margin-top: 1.6rem; }
}
/* ---- 19f · Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.apg-rotator-vid,
.apg-rotator-label,
.apg-rotator-books a { transition: none; }
.apg-rotator.is-held .apg-rotator-vid { transform: none; }
}
/* ============================================================
20 · CAMP EPIPHANY LAUNCH CARD — added 12 Aug 2026
Announcement + ARC funnel. Cover is a placeholder until the
final art lands; swap .apg-ce-cover for a real then.
ARC window: 15 Aug - 30 Sept. Release: 15 Oct 2026.
============================================================ */
/* ---- 20a · Launch card shell ---- */
.apg-ce {
border: 1px solid color-mix(in srgb, var(--apg-accent) 30%, transparent);
border-radius: 16px;
background:
radial-gradient(120% 90% at 50% 0%,
color-mix(in srgb, var(--apg-accent) 11%, transparent) 0%,
transparent 62%),
color-mix(in srgb, var(--apg-void) 62%, transparent);
padding: 2.2rem 1.6rem 2.4rem;
}
/* ---- 20b · New badge ---- */
.apg-ce-badge {
display: inline-block;
margin: 0 auto .9rem;
padding: .34rem 1rem;
border-radius: 999px;
background: color-mix(in srgb, var(--apg-accent) 88%, var(--apg-void));
color: var(--apg-void);
font-size: .8rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
/* ---- 20c · Cover placeholder (temporary) ---- */
.apg-ce-cover {
width: min(210px, 52vw);
aspect-ratio: 2 / 3;
margin: 1.3rem auto 1.5rem;
display: grid;
place-items: center;
border: 2px dashed color-mix(in srgb, var(--apg-accent) 40%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--apg-void) 55%, transparent);
color: color-mix(in srgb, var(--apg-accent-pale) 70%, transparent);
font-family: Cardo, Georgia, serif;
font-size: .95rem;
line-height: 1.5;
text-align: center;
letter-spacing: .04em;
}
/* ---- 20d · ARC note ---- */
.apg-ce-arc {
max-width: 620px;
margin-inline: auto;
font-size: .95rem;
line-height: 1.6;
color: color-mix(in srgb, var(--apg-parchment) 72%, transparent);
border-top: 1px solid color-mix(in srgb, var(--apg-accent) 16%, transparent);
padding-top: 1.1rem;
margin-top: 1.4rem;
}
@media (max-width: 540px) {
.apg-ce { padding: 1.7rem 1.1rem 1.9rem; border-radius: 12px; }
}
/* ---- 20e · Button corrections (site-wide) ----
Core's button styles inherit the global link underline, and
is-style-outline was still painting the filled background.
Fixes the launch CTAs and the bestseller CTAs together. */
.wp-block-button__link,
.apg-cta .wp-block-button__link {
text-decoration: none;
font-weight: 600;
letter-spacing: .02em;
padding: .78rem 1.5rem;
border-radius: 999px;
min-height: 48px; /* tap target */
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible { transform: translateY(-1px); text-decoration: none; }
/* filled */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
background-color: var(--apg-accent);
color: var(--apg-void);
border: 1px solid var(--apg-accent);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
background-color: var(--apg-accent-pale);
border-color: var(--apg-accent-pale);
}
/* outline — was rendering filled */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
background-color: transparent;
background-image: none;
color: var(--apg-accent);
border: 1px solid color-mix(in srgb, var(--apg-accent) 58%, transparent);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
background-color: color-mix(in srgb, var(--apg-accent) 15%, transparent);
color: var(--apg-accent-pale);
border-color: var(--apg-accent);
}
.apg-cta { gap: .8rem; justify-content: center; flex-wrap: wrap; }
/* ---- 20f · Badge sits centred ----
its core/html wrapper inherits text-align:start, so centre it directly */
.apg-ce-badge {
display: block;
width: fit-content;
margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
.wp-block-button__link { transition: none; }
.wp-block-button__link:hover { transform: none; }
}
/* ==========================================================================
24 · INTERIOR PORTAL TREATMENT
The gate and .apg-bg are front-page only, so every other page inherited
Hello Elementor's white body and rendered gold dust on white.
Fix: void + book art go on itself, the same way the dust already
does. Scoped off .home so the gate's dark void is untouched.
body::before / body::after ARE the dust layers -- never reuse them here.
========================================================================== */
body:not(.home) {
background-color: var(--apg-void);
background-image:
radial-gradient(circle at 50% 38%, transparent 0%,
color-mix(in srgb, var(--apg-void) 90%, transparent) 88%),
var(--apg-bg-img);
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: cover, cover;
background-attachment: fixed, fixed;
color: var(--apg-parchment);
}
/* Rear dust layer is body::before at z-index 1 -- lift real content over it. */
/* Header keeps whatever position block 18a gave it (sticky) -- only the
stacking context is set here. Forcing position:relative on #site-header
silently killed the sticky header; do not put it back. */
body:not(.home) #site-header { z-index: 20; }
body:not(.home) .site-main,
body:not(.home) #site-footer { position: relative; z-index: 2; }
/* Readability scrim, same recipe as the homepage .apg-section scrim.
z-index -1 keeps it inside .site-main's stacking context, behind its
content but in front of the body art -- no child rules needed. */
body:not(.home) .site-main {
padding-block: clamp(2.25rem, 5.5vw, 4rem);
}
/* Scrim moved to html::after in block 33. It used to live on .site-main,
but .site-main is now the view-transition capture target, so the scrim
travelled with the sliding content and dragged a dark band across the art. */
/* Type ------------------------------------------------------------------- */
body:not(.home) .site-main,
body:not(.home) .site-main :is(p, li, dd, dt, td, th, blockquote, figcaption, label, span) {
color: var(--apg-parchment);
}
body:not(.home) .site-main :is(h1, h2) { color: var(--apg-accent); }
body:not(.home) .site-main :is(h3, h4, h5, h6) { color: var(--apg-accent-pale); }
body:not(.home) .site-main hr { border-color: color-mix(in srgb, var(--apg-accent) 28%, transparent); }
/* Preset colour classes from the block editor were picked against white.
Neutralise the dark ones; leave anything with a background alone. */
body:not(.home) .site-main :is(.has-tertiary-color, .has-secondary-color, .has-foreground-color,
.has-black-color, .has-dark-gray-color, .has-medium-gray-color):not(.has-background) {
color: var(--apg-parchment);
}
body:not(.home) .site-main a:not(.wp-block-button__link):not(.button):not(.apg-back) {
color: var(--apg-accent-pale);
text-decoration-color: color-mix(in srgb, var(--apg-accent) 55%, transparent);
text-underline-offset: .18em;
}
body:not(.home) .site-main a:not(.wp-block-button__link):not(.button):not(.apg-back):hover,
body:not(.home) .site-main a:not(.wp-block-button__link):not(.button):not(.apg-back):focus-visible {
color: var(--apg-accent);
}
/* Fields were white-on-white against the old white body. */
body:not(.home) .site-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select) {
background: color-mix(in srgb, var(--apg-void) 70%, transparent);
color: var(--apg-parchment);
border: 1px solid color-mix(in srgb, var(--apg-accent) 38%, transparent);
border-radius: 8px;
}
body:not(.home) .site-main :is(input, textarea, select)::placeholder {
color: color-mix(in srgb, var(--apg-parchment) 55%, transparent);
}
body:not(.home) .site-main :is(input, textarea, select):focus-visible {
outline: 2px solid var(--apg-accent);
outline-offset: 2px;
}
/* Images that were cut out against white need a little separation now. */
body:not(.home) .site-main .wp-block-image img {
filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
}
/* ==========================================================================
25 · INTERIOR BACK AFFORDANCE
Markup is printed by the apg-portal mu-plugin as the first thing inside
the content, on singular pages only. Never on the front page.
========================================================================== */
.apg-back {
display: inline-flex; align-items: center; gap: .55rem;
margin: 0 0 clamp(1.1rem, 3vw, 1.9rem);
padding: .46rem 1.05rem .46rem .85rem;
font-family: Cardo, Georgia, "Times New Roman", serif;
font-style: italic;
font-size: clamp(.88rem, 1.5vw, 1rem);
letter-spacing: .06em;
line-height: 1;
color: var(--apg-accent-pale) !important;
text-decoration: none !important;
border: 1px solid color-mix(in srgb, var(--apg-accent) 42%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--apg-void) 55%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: color .28s ease, border-color .28s ease,
background .28s ease, box-shadow .28s ease;
}
.apg-back::before {
content: "\2190";
font-style: normal;
transition: transform .28s ease;
}
.apg-back:hover,
.apg-back:focus-visible {
color: var(--apg-accent) !important;
border-color: color-mix(in srgb, var(--apg-accent) 78%, transparent);
background: color-mix(in srgb, var(--apg-void) 72%, transparent);
box-shadow: 0 0 18px color-mix(in srgb, var(--apg-accent) 28%, transparent);
}
.apg-back:hover::before,
.apg-back:focus-visible::before { transform: translateX(-3px); }
.apg-back:focus-visible { outline: 2px solid var(--apg-accent); outline-offset: 3px; }
/* ==========================================================================
26 · CUBIC SLIDE -- DIRECTION
Block 9 already had valid @view-transition + old/new keyframes. It was
never firing for a different reason: WordPress sends
"Cache-Control: ... no-store, private" to logged-in users and on a
private "Coming soon" site, and Chrome disables cross-document view
transitions on no-store responses. Nothing to fix in CSS -- it will run
for logged-out visitors on public production.
What WAS missing is direction. Types are set by the mu-plugin script from
pageswap / pagereveal; block 9 stays the forward default.
========================================================================== */
@keyframes apg-slide-out-right { to { transform: translateX(28%) scale(.96); opacity: 0; } }
@keyframes apg-slide-in-left { from { transform: translateX(-100%) scale(.96); opacity: 0; } }
html:active-view-transition-type(apg-back)::view-transition-old(root) {
animation-name: apg-slide-out-right;
}
html:active-view-transition-type(apg-back)::view-transition-new(root) {
animation-name: apg-slide-in-left;
}
@media (prefers-reduced-motion: reduce) {
html:active-view-transition-type(apg-back)::view-transition-old(root),
html:active-view-transition-type(apg-back)::view-transition-new(root) {
animation: none !important;
}
}
/* ==========================================================================
27 · MOXXI SLOT + AUTHOR SECTION
.apg-moxxi-slot holds the Book 1 cover at exactly the trilogy rotator's
footprint -- min(420px, 78vw) at 4:5 -- so when the Moxxi turntable is
ready it drops straight in with no layout shift. Both are 4:5 already
(rotator 864x1080, cover 2400x3000).
========================================================================== */
.apg-moxxi-slot {
width: min(420px, 78vw);
aspect-ratio: 864 / 1080;
margin: 2.2rem auto 1.7rem;
position: relative;
display: block;
}
.apg-moxxi-slot img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .60));
transition: filter .35s ease, transform .35s ease;
}
.apg-moxxi-slot a { display: block; width: 100%; height: 100%; }
.apg-moxxi-slot:hover img,
.apg-moxxi-slot a:focus-visible img {
transform: translateY(-4px);
filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .68))
drop-shadow(0 0 22px color-mix(in srgb, var(--apg-accent) 34%, transparent));
}
.apg-moxxi-slot a:focus-visible { outline: 2px solid var(--apg-accent); outline-offset: 6px; border-radius: 6px; }
/* core/image adds its own margins on the figure */
.apg-moxxi-slot.wp-block-image { margin: 2.2rem auto 1.7rem !important; }
/* Author section -------------------------------------------------------- */
.apg-author {
display: grid;
grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 2.75rem);
align-items: start;
margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}
.apg-author-photo {
margin: 0;
position: relative;
border-radius: 14px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--apg-accent) 34%, transparent);
box-shadow: 0 18px 38px rgba(0, 0, 0, .55),
0 0 26px color-mix(in srgb, var(--apg-accent) 16%, transparent);
}
.apg-author-photo img {
display: block; width: 100%; height: auto;
filter: none !important;
}
.apg-author-bio > p:first-child { margin-top: 0; }
.apg-author-bio p { line-height: 1.72; }
.apg-socials {
list-style: none;
display: flex; flex-wrap: wrap; gap: .6rem;
margin: 1.4rem 0 0; padding: 0;
}
.apg-socials li { margin: 0; }
.apg-socials a {
display: inline-flex; align-items: center;
padding: .44rem 1rem;
font-size: .92rem; letter-spacing: .05em;
border-radius: 999px;
text-decoration: none !important;
color: var(--apg-accent-pale) !important;
border: 1px solid color-mix(in srgb, var(--apg-accent) 34%, transparent);
background: color-mix(in srgb, var(--apg-void) 52%, transparent);
transition: color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.apg-socials a:hover,
.apg-socials a:focus-visible {
color: var(--apg-accent) !important;
border-color: color-mix(in srgb, var(--apg-accent) 72%, transparent);
box-shadow: 0 0 16px color-mix(in srgb, var(--apg-accent) 26%, transparent);
}
.apg-substack {
margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
max-width: 640px;
padding: clamp(1.15rem, 3vw, 1.6rem);
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--apg-accent) 30%, transparent);
background: color-mix(in srgb, var(--apg-void) 66%, transparent);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
text-align: center;
}
.apg-substack h3 { margin: 0 0 .45rem; }
.apg-substack p { margin: 0 0 1.05rem; opacity: .92; }
.apg-substack-cta {
display: inline-block;
padding: .62rem 1.6rem;
border-radius: 999px;
font-weight: 600; letter-spacing: .05em;
text-decoration: none !important;
color: var(--apg-void) !important;
background: linear-gradient(135deg, var(--apg-accent), var(--apg-accent-soft));
border: 1px solid color-mix(in srgb, var(--apg-accent) 80%, transparent);
transition: box-shadow .28s ease, transform .28s ease;
}
.apg-substack-cta:hover,
.apg-substack-cta:focus-visible {
transform: translateY(-2px);
box-shadow: 0 0 24px color-mix(in srgb, var(--apg-accent) 44%, transparent);
}
@media (max-width: 640px) {
.apg-author { grid-template-columns: 1fr; justify-items: center; text-align: left; }
.apg-author-photo { max-width: 240px; }
.apg-socials { justify-content: center; }
}
/* ==========================================================================
28 · INTERIOR TREATMENT -- ELEMENTOR OVERRIDE [RETIRED 13 Aug 2026]
Kept as a record, deliberately inert.
Every Elementor page used to carry a per-page white background from its
Elementor page settings:
body.elementor-page-393:not(.elementor-motion-effects-element-type-background)
That is (0,3,1) and silently outranked block 24's body:not(.home) at
(0,1,1), so the portal treatment only ever landed on the four plain
Gutenberg pages. This block forced it back with !important.
Elementor was removed from the render path on 13 Aug 2026 -- all pages are
core blocks now and nothing competes for the body background -- so the
!important is gone and block 24 stands on its own. If a white body ever
returns on an interior page, something has reintroduced a per-page
background rule; fix that at the source rather than restoring this.
========================================================================== */
/* Elementor sections are gone, but leave this in place: it costs nothing and
keeps any stray .elementor-* wrapper from punching a panel through the art. */
body:not(.home) .elementor-section,
body:not(.home) .elementor-container,
body:not(.home) .elementor-widget-wrap,
body:not(.home) .e-con,
body:not(.home) .e-con-inner {
background-color: transparent;
}
/* ==========================================================================
29 · WOOCOMMERCE NOTICES
Woo's default notice is a white panel with dark text -- fine on the old
white body, a bright slab on the portal. Only the notice family is themed
here; the rest of the storefront waits until real products exist.
========================================================================== */
body:not(.home) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error,
.woocommerce-noreviews, .wc-block-components-notice-banner) {
background: color-mix(in srgb, var(--apg-void) 72%, transparent);
color: var(--apg-parchment);
border-top: 3px solid var(--apg-accent);
border-radius: 8px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
body:not(.home) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) a {
color: var(--apg-accent-pale);
}
body:not(.home) :is(.woocommerce-info, .woocommerce-message)::before {
color: var(--apg-accent);
}
body:not(.home) .woocommerce-breadcrumb,
body:not(.home) .woocommerce-breadcrumb a {
color: var(--apg-accent-pale);
}
/* ==========================================================================
30 · BOOK PAGES + BOOKS INDEX
These were Elementor. Rebuilt as core blocks in the homepage's section
language so the site stops looking like two websites. Covers use the
woocommerce_single size deliberately -- see the note in block 31.
========================================================================== */
.apg-book { max-width: 760px; margin-inline: auto; }
.apg-book-tagline {
font-family: Cardo, Georgia, "Times New Roman", serif;
font-style: italic;
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
color: var(--apg-accent-pale);
margin: 0 auto 1.2rem;
max-width: 46ch;
}
.apg-book-cover {
width: min(340px, 68vw);
margin: 1.8rem auto 2rem !important;
}
.apg-book-cover img {
width: 100%; height: auto; display: block;
filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .62));
}
.apg-book-hook {
font-size: clamp(1rem, 1.9vw, 1.12rem);
line-height: 1.65;
color: var(--apg-parchment);
border-left: 2px solid color-mix(in srgb, var(--apg-accent) 55%, transparent);
padding-left: 1.1rem;
text-align: left;
margin-bottom: 1.8rem;
}
.apg-book-blurb { text-align: left; }
.apg-book-blurb p { line-height: 1.78; margin-bottom: 1.05rem; }
/* Books index ----------------------------------------------------------- */
.apg-books-grid {
list-style: none; padding: 0;
margin: 2rem auto 0;
max-width: 1040px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(1.2rem, 3vw, 2rem);
}
.apg-books-grid li { margin: 0; }
.apg-books-grid a {
display: flex; flex-direction: column; height: 100%;
padding: 1.1rem 1.1rem 1.3rem;
border-radius: 12px;
text-decoration: none !important;
color: var(--apg-parchment) !important;
border: 1px solid color-mix(in srgb, var(--apg-accent) 26%, transparent);
background: color-mix(in srgb, var(--apg-void) 58%, transparent);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.apg-books-grid a:hover,
.apg-books-grid a:focus-visible {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--apg-accent) 68%, transparent);
box-shadow: 0 14px 30px rgba(0, 0, 0, .5),
0 0 20px color-mix(in srgb, var(--apg-accent) 22%, transparent);
}
.apg-books-grid img {
width: 100%; height: auto; display: block;
border-radius: 6px; margin-bottom: .9rem;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5));
}
.apg-books-grid strong {
display: block;
font-size: 1.06rem;
color: var(--apg-accent);
margin-bottom: .3rem;
}
.apg-books-grid span {
font-size: .93rem; line-height: 1.55;
color: color-mix(in srgb, var(--apg-parchment) 84%, transparent);
}
.apg-books-grid .apg-book-order {
display: block; margin-top: .7rem;
font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
color: color-mix(in srgb, var(--apg-accent) 78%, transparent);
}
/* ==========================================================================
31 · THEME SWITCHING, SITE-WIDE
Block 2 keys off the radio inputs, and those only exist in block 0 of the
homepage -- so every interior page fell back to the :root default and the
site was permanently B2 amber no matter what the toggle said.
The toggle now writes data-apg-theme onto and persists it, so the
choice survives navigation. Block 2 still wins on the homepage because
body:has(#apg-t1:checked) carries ID specificity (1,1,1); the two are kept
in sync by the runtime script, and block 2 remains the no-JS fallback.
========================================================================== */
html[data-apg-theme="b1"] {
--apg-accent: var(--apg-b1-core); --apg-accent-soft: var(--apg-b1);
--apg-accent-pale: var(--apg-b1-pale); --apg-accent-bg: var(--apg-b1-bg);
--apg-portal-img: url("/wp-content/uploads/2026/08/apg-portal-b1.webp");
--apg-bg-img: url("/wp-content/uploads/2026/08/apg-bg-b1.webp");
}
html[data-apg-theme="b2"] {
--apg-accent: var(--apg-b2-core); --apg-accent-soft: var(--apg-b2);
--apg-accent-pale: var(--apg-b2-pale); --apg-accent-bg: var(--apg-b2-bg);
--apg-portal-img: url("/wp-content/uploads/2026/08/apg-portal-b2.webp");
--apg-bg-img: url("/wp-content/uploads/2026/08/apg-bg-b2.webp");
}
html[data-apg-theme="b3"] {
--apg-accent: var(--apg-b3-core); --apg-accent-soft: var(--apg-b3);
--apg-accent-pale: var(--apg-b3-pale); --apg-accent-bg: var(--apg-b3-bg);
--apg-portal-img: url("/wp-content/uploads/2026/08/apg-portal-b3.webp");
--apg-bg-img: url("/wp-content/uploads/2026/08/apg-bg-b3.webp");
}
/* ==========================================================================
32 · HEADER-ANCHORED BACK BUTTON + ARC MENU CTA
The back link used to sit inside the content, which meant it slid away with
every page transition. It belongs to the frame, not the page, so it is now
fixed into the header band and printed at wp_body_open by the mu-plugin.
Deliberately NOT given a view-transition-name -- unnamed elements are not
captured, so it renders live from the incoming document and appears to
never move. Same reasoning for the header, footer, background and dust.
Supersedes the inline pill styling in block 25.
========================================================================== */
.apg-back {
position: fixed;
top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
left: clamp(.6rem, 2vw, 1.5rem);
z-index: 30;
margin: 0;
padding: .42rem 1rem .42rem .8rem;
line-height: 1;
}
.apg-back[hidden] { display: none; }
/* Mobile: shrink to a single chevron on the left edge. */
@media (max-width: 900px) {
.apg-back {
left: 2px;
padding: .5rem .55rem;
gap: 0;
border-radius: 0 999px 999px 0;
}
.apg-back .apg-back-text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.apg-back::before { content: "\2039"; font-size: 1.5rem; line-height: .8; }
}
/* ARC call to action in the primary menu ---------------------------------
Toggle it from Settings > Reading > "Show the ARC request button".
Turning it off removes the markup entirely -- it is not just hidden. */
#site-header .menu-item.apg-arc-cta > a {
display: inline-flex; align-items: center;
padding: .42rem 1.05rem;
border-radius: 999px;
color: var(--apg-void) !important;
background: linear-gradient(135deg, var(--apg-accent), var(--apg-accent-soft));
border: 1px solid color-mix(in srgb, var(--apg-accent) 80%, transparent);
font-weight: 600;
transition: box-shadow .28s ease, transform .28s ease;
}
#site-header .menu-item.apg-arc-cta > a:hover,
#site-header .menu-item.apg-arc-cta > a:focus-visible {
transform: translateY(-1px);
box-shadow: 0 0 20px color-mix(in srgb, var(--apg-accent) 45%, transparent);
}
/* ==========================================================================
33 · PORTAL NAVIGATION -- ONLY THE CONTENT MOVES
The whole point of the effect: the portal frame (header, background art,
dust, back button) is the room you are standing in, and navigating just
turns your head. So the root is explicitly un-named, which stops the
browser snapshotting the entire page, and only .site-main is captured.
Everything else renders live from the incoming document and never moves.
Block 9's ::view-transition-*(root) rules are inert now by design.
Forward = right to left. Back = left to right, set as a transition type by
the mu-plugin from pageswap / pagereveal.
STILL GATED BY no-store: WordPress sends Cache-Control: no-store to
logged-in users and on a private site, and Chrome refuses cross-document
view transitions on no-store. Log out on public production to see it.
========================================================================== */
:root { view-transition-name: none; }
.site-main { view-transition-name: apg-content; }
::view-transition-old(apg-content) {
animation: apg-slide-out-left .58s cubic-bezier(.65, 0, .35, 1) both;
}
::view-transition-new(apg-content) {
animation: apg-slide-in-right .58s cubic-bezier(.65, 0, .35, 1) both;
}
html:active-view-transition-type(apg-back)::view-transition-old(apg-content) {
animation-name: apg-slide-out-right;
}
html:active-view-transition-type(apg-back)::view-transition-new(apg-content) {
animation-name: apg-slide-in-left;
}
/* Scrim relocated here from .site-main::before. Fixed to the viewport and
attached to html, so it is outside the captured content and holds still. */
html:has(body:not(.home))::after {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: color-mix(in srgb, var(--apg-void) 62%, transparent);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(apg-content),
::view-transition-new(apg-content) { animation: none !important; }
}
/* ==========================================================================
34 · BOOK PAGE TWO-COLUMN + INDEX ALIGNMENT
Single column meant a 340px cover, then a long scroll of dead space, then
the buy buttons somewhere below the fold. Cover left, everything else
right, and the cover sticks while the blurb scrolls past it.
========================================================================== */
@media (min-width: 900px) {
.apg-book {
display: grid;
grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
align-items: start;
max-width: 1040px;
text-align: left;
}
/* Everything lands in the right column; the cover is pulled into the left
and spans the lot. span 20 rather than -1 -- these rows are implicit, and
-1 resolves to the end of the explicit grid, which is row 1. */
.apg-book > * { grid-column: 2; }
.apg-book-cover {
grid-column: 1;
grid-row: 1 / span 20;
width: 100%;
margin: .35rem 0 0 !important;
position: sticky;
top: calc(var(--wp-admin--admin-bar--height, 0px) + 76px);
}
/* WP's constrained layout gives every child margin-inline:auto, and the
portal headings shrink-wrap, so the h1 sat centred in its column while
the body copy sat left. Pin the whole right column to the left edge. */
.apg-book > *:not(.apg-book-cover) {
margin-left: 0 !important;
margin-right: 0 !important;
width: auto;
max-width: none;
text-align: left;
}
.apg-book > h1 { margin-top: 0; }
.apg-book-tagline { margin-left: 0; margin-right: 0; max-width: none; }
.apg-book .wp-block-buttons { justify-content: flex-start; }
.apg-book > .has-text-align-center { text-align: left !important; }
}
/* Index cards: covers ship at different ratios (1197x1759 for the trilogy,
728x965 for Immortal Eyes), so the titles sat at different heights. Give
every cover the same box and letterbox inside it. */
.apg-books-grid img {
aspect-ratio: 3 / 4;
object-fit: contain;
object-position: center bottom;
}
.apg-books-grid a { justify-content: flex-start; }
.apg-books-grid .apg-book-order { margin-top: auto; padding-top: .7rem; }
/* Camp Epiphany has no cover yet, so its card had no image box and the whole
card collapsed out of line with The Backrooms. Same box, same ratio. */
.apg-books-grid .apg-cover-tbd {
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 3 / 4;
margin-bottom: .9rem;
border-radius: 6px;
border: 1px dashed color-mix(in srgb, var(--apg-accent) 34%, transparent);
background: color-mix(in srgb, var(--apg-void) 52%, transparent);
color: color-mix(in srgb, var(--apg-accent) 78%, transparent);
font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
text-align: center; line-height: 1.7;
}
/* ===== 35. Blog index cards ===== */
.apg-blog-list .apg-blog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(240px,28vw,320px),1fr));gap:2rem;list-style:none;margin:2.5rem 0 0;padding:0}
.apg-blog-list .apg-blog-cards>li{display:flex;flex-direction:column;background:color-mix(in srgb,var(--apg-void) 68%,transparent);backdrop-filter:blur(3px);border:1px solid color-mix(in srgb,var(--apg-accent) 20%,transparent);border-radius:10px;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.apg-blog-list .apg-blog-cards>li:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--apg-accent) 55%,transparent)}
.apg-blog-thumb{margin:0;line-height:0}
.apg-blog-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.apg-blog-title{margin:1.05rem 1.15rem .3rem;font-size:1.18rem;line-height:1.28}
.apg-blog-title a{text-decoration:none;color:var(--apg-parchment)}
.apg-blog-title a:hover{color:var(--apg-accent-pale);text-decoration:underline}
.apg-blog-date{margin:0 1.15rem;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
.apg-blog-excerpt{margin:.6rem 1.15rem 1.3rem;font-size:.94rem;line-height:1.58;opacity:.88}
.apg-blog-excerpt .wp-block-post-excerpt__more-link{display:inline-block;margin-top:.55rem;font-style:italic;color:var(--apg-accent-soft)}
.apg-blog-pagination{margin-top:2.75rem}
.apg-blog-pagination .page-numbers{padding:.2rem .55rem;border-radius:4px}
.apg-blog-pagination .page-numbers.current{background:color-mix(in srgb,var(--apg-accent) 25%,transparent)}
@media(max-width:600px){.apg-blog-list .apg-blog-cards{grid-template-columns:1fr;gap:1.5rem}}
/* ===== 36. Slight background lift =====
The art files are dark by nature (b3 measures mean luma 21.7/255, max 44), so the
pattern barely registered. Lifted the cheap way: one extra flat layer blended with
screen to raise the blacks, and a slightly softer vignette on interior pages.
No filters, no masks, no animation, no new elements — same number of composited
layers as before, so this costs nothing at scroll time. Deliberately modest.
The homepage paints the art through .apg-bg (opacity 1 once the gate is passed);
interior pages paint it on body under a vignette. Both need lifting separately. */
.apg-bg{background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),var(--apg-bg-img);background-size:cover,cover;background-position:center,center;background-blend-mode:screen,normal}
body:not(.home){background-image:radial-gradient(circle at 50% 38%,transparent 0%,color-mix(in srgb,var(--apg-void) 82%,transparent) 92%),linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),var(--apg-bg-img);background-size:cover,cover,cover;background-position:center,center,center;background-attachment:fixed,fixed,fixed;background-blend-mode:normal,screen,normal}
/* ===== 37. Group mockup loops =====
Square 1:1 loops showing all three editions of a title. They replace the single
cover on book pages, the catalogue grid and product pages. Poster-first and only
fetched near the viewport (apg-groupmock.php), so they cost nothing until seen. */
.apg-groupmock-wrap{margin:0;line-height:0;max-width:100%}
.apg-groupmock{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:8px;background:transparent}
.apg-groupmock.is-fallback{display:none}
.apg-book-cover.apg-groupmock-wrap{max-width:min(520px,100%);margin-inline:auto}
.apg-books-grid .apg-grid-mock{width:100%}
.apg-books-grid .apg-grid-mock .apg-groupmock{aspect-ratio:1/1;object-fit:contain}
.apg-groupmock-product{max-width:min(560px,100%);margin:0 auto 1.5rem}
@media(max-width:781px){.apg-book-cover.apg-groupmock-wrap{max-width:100%}}
/* ---------------------------------------------------------------------------
Book pages - group mockup sizing.
Appended last so it wins over the earlier .apg-book / .apg-groupmock rules.
Was: .apg-book is a 330px + 52px gap + 658px grid capped at 1040px, while
.apg-section reserved 410px of side padding at a 1920px viewport - so the
mockup rendered 330px square no matter how much room was available, and the
page used barely half the screen. Scoped to body.parent-pageid-393 (the four
book pages) so no other .apg-section is affected.
--------------------------------------------------------------------------- */
body.parent-pageid-393 .apg-section {
padding-left: clamp(20px, 5vw, 110px);
padding-right: clamp(20px, 5vw, 110px);
}
body.parent-pageid-393 .apg-book {
max-width: 1340px;
grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
}
body.parent-pageid-393 .apg-book-cover.apg-groupmock-wrap {
width: 100%;
max-width: 100%;
}
@media (max-width: 1180px) {
body.parent-pageid-393 .apg-book {
grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
}
}
@media (max-width: 900px) {
body.parent-pageid-393 .apg-book {
grid-template-columns: minmax(0, 1fr);
}
body.parent-pageid-393 .apg-book-cover.apg-groupmock-wrap {
width: 100%;
max-width: 620px;
margin-inline: auto;
}
}
/* ===== 38. Drop the group mockup letterbox =====
The loops are yuv420p with no alpha, so the black card is baked into the frames
and shows as a rectangle against the void. screen blending makes pure black
vanish exactly — screen(backdrop, 0) leaves the backdrop untouched — and the
corners measure (1,1,1), so the card disappears. Dark parts of the covers lift
only very slightly because the page behind them is near-black too.
Replace with an alpha re-export (yuva420p) when there is one, then delete this. */
.apg-groupmock{mix-blend-mode:screen;border-radius:0;background:transparent}
.apg-groupmock-wrap{background:transparent;border:0}
/* ===== 39. WooCommerce controls: readability and theme fit =====
Woo ships #7F54B3 purple for primary buttons and #E9E6ED grey for secondary ones,
plus white tabs — all of which are invisible or off-brand on the void. Primary
actions become accent-filled pills matching the site buttons, secondary actions
become outlines so three solid accent buttons never crowd one row. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce .single_add_to_cart_button,.woocommerce .checkout-button,
.woocommerce a.added_to_cart,.woocommerce #respond input#submit,
.wc-block-components-button{background:var(--apg-accent)!important;background-image:none!important;color:var(--apg-void)!important;border:0!important;border-radius:999px!important;font-weight:600;padding:.62rem 1.4rem;text-decoration:none;transition:filter .2s ease,transform .2s ease}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,.woocommerce .checkout-button:hover,
.woocommerce a.added_to_cart:hover{filter:brightness(1.12);transform:translateY(-1px)}
/* Secondary: apply coupon and update cart sit next to the cart table, not in the buy path. */
.woocommerce button[name="apply_coupon"],.woocommerce button[name="update_cart"],
.woocommerce input[name="apply_coupon"],.woocommerce input[name="update_cart"]{background:transparent!important;color:var(--apg-accent-pale)!important;border:1px solid color-mix(in srgb,var(--apg-accent) 48%,transparent)!important;border-radius:999px!important;font-weight:600}
.woocommerce button[name="apply_coupon"]:hover,.woocommerce button[name="update_cart"]:hover{background:color-mix(in srgb,var(--apg-accent) 16%,transparent)!important;filter:none;transform:none}
.woocommerce button:disabled,.woocommerce button.button:disabled,
.woocommerce button[name="update_cart"]:disabled{background:transparent!important;color:color-mix(in srgb,var(--apg-parchment) 42%,transparent)!important;border-color:color-mix(in srgb,var(--apg-parchment) 20%,transparent)!important;opacity:1!important;cursor:not-allowed}
/* Coupon field was 80px, so the placeholder read "Coupon c". */
.woocommerce .coupon{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.woocommerce #coupon_code.input-text{width:auto!important;min-width:13rem;flex:1 1 13rem;padding:.55rem .9rem;border-radius:8px}
/* Tabs: Woo paints them white with decorative corner curls. */
.woocommerce-tabs ul.tabs::before,.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{display:none!important}
.woocommerce-tabs ul.tabs{border-bottom:1px solid color-mix(in srgb,var(--apg-accent) 28%,transparent);padding:0;margin:0 0 1.4rem;display:flex;gap:.4rem;flex-wrap:wrap}
.woocommerce-tabs ul.tabs li{background:color-mix(in srgb,var(--apg-void) 78%,transparent)!important;border:1px solid color-mix(in srgb,var(--apg-accent) 22%,transparent)!important;border-bottom:0!important;border-radius:8px 8px 0 0!important;margin:0!important;box-shadow:none!important}
.woocommerce-tabs ul.tabs li a{color:color-mix(in srgb,var(--apg-parchment) 76%,transparent)!important;font-weight:600;text-decoration:none}
.woocommerce-tabs ul.tabs li.active{background:color-mix(in srgb,var(--apg-accent) 15%,var(--apg-void))!important;border-color:color-mix(in srgb,var(--apg-accent) 50%,transparent)!important}
.woocommerce-tabs ul.tabs li.active a{color:var(--apg-accent-pale)!important}
/* Shipment row: the carrier, destination and address editor all repeat at checkout. */
.woocommerce-shipping-totals .woocommerce-shipping-methods{margin:0;padding:0;list-style:none}
.woocommerce-shipping-totals .woocommerce-shipping-methods label{font-size:0!important}
.woocommerce-shipping-totals .woocommerce-shipping-methods label .woocommerce-Price-amount{font-size:1rem!important;font-weight:600;color:var(--apg-parchment)}
.woocommerce-shipping-destination,.woocommerce-shipping-calculator,
.woocommerce-shipping-totals .shipping-calculator-button{display:none!important}
/* ===== 40. Camp Epiphany placeholder cover ===== */
/* Attachment 4758 is the front crop of the KDP teaser wrap and is only
440px wide, while the shared .apg-book-cover slot is 620px, so it was
being upscaled 1.4x. Cap it at native width until the final cover
mockup lands, then delete this block. Cheap by design: no filters,
no masks, nothing animated. */
.apg-book .apg-ce-teaser { max-width: 440px; margin-inline: auto; }
.apg-book .apg-ce-teaser img { width: 100%; height: auto; }
.apg-book .apg-ce-teaser figcaption {
text-align: center;
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .55;
margin-top: .6rem;
}
/* ===== 41. Blog index — horizontal alternating rows ===== */
/* Replaces the vertical card grid from block 35 on the blog index only.
Each post is one full-width row: image one side, text the other,
alternating down the page. Heights are held uniform by giving the
image a fixed 4:3 cell and line-clamping the text. */
.apg-blog-cards { grid-template-columns: 1fr; gap: 1.75rem; }
.apg-blog-cards > li {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr;
column-gap: 0;
overflow: hidden;
min-height: 16rem;
}
.apg-blog-cards > li > .wp-block-post-featured-image {
grid-column: 1; grid-row: 1 / -1;
margin: 0; height: 100%; min-height: 100%;
}
.apg-blog-cards > li > .wp-block-post-featured-image a,
.apg-blog-cards > li > .wp-block-post-featured-image img {
display: block; width: 100%; height: 100%;
object-fit: cover; border-radius: 0;
}
.apg-blog-cards > li > .wp-block-post-title {
grid-column: 2; grid-row: 1;
margin: 1.35rem 1.5rem 0;
font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.2;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apg-blog-cards > li > .wp-block-post-date { grid-column: 2; grid-row: 2; margin: .5rem 1.5rem 0; }
.apg-blog-cards > li > .apg-blog-sub {
grid-column: 2; grid-row: 3;
margin: .55rem 1.5rem 0;
font-size: .92rem; line-height: 1.35; opacity: .72;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apg-blog-cards > li > .wp-block-post-excerpt { grid-column: 2; grid-row: 4; margin: .55rem 1.5rem 1.35rem; align-self: start; }
.apg-blog-cards > li .wp-block-post-excerpt__excerpt {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.apg-blog-cards > li:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
.apg-blog-cards > li:nth-child(even) > .wp-block-post-featured-image { grid-column: 2; }
.apg-blog-cards > li:nth-child(even) > .wp-block-post-title,
.apg-blog-cards > li:nth-child(even) > .wp-block-post-date,
.apg-blog-cards > li:nth-child(even) > .apg-blog-sub,
.apg-blog-cards > li:nth-child(even) > .wp-block-post-excerpt { grid-column: 1; }
@media (max-width: 782px) {
.apg-blog-cards > li,
.apg-blog-cards > li:nth-child(even) {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
min-height: 0;
}
.apg-blog-cards > li > *,
.apg-blog-cards > li:nth-child(even) > * { grid-column: 1; }
.apg-blog-cards > li > .wp-block-post-featured-image,
.apg-blog-cards > li:nth-child(even) > .wp-block-post-featured-image {
grid-row: 1; height: auto; min-height: 0; aspect-ratio: 16 / 9;
}
.apg-blog-cards > li > .wp-block-post-title { grid-row: 2; margin-top: 1.1rem; }
.apg-blog-cards > li > .wp-block-post-date { grid-row: 3; }
.apg-blog-cards > li > .apg-blog-sub { grid-row: 4; }
.apg-blog-cards > li > .wp-block-post-excerpt { grid-row: 5; }
.apg-blog-cards > li, .apg-blog-cards > li:nth-child(even) { grid-template-rows: auto auto auto auto 1fr; }
}
/* ===== 42. Blog index — specificity patch for block 41 ===== */
/* Block 35 sets the column track on `.apg-blog-list .apg-blog-cards`, which
outranks the single-class selector used in block 41, so the outer grid stayed
two-up. Same declarations, matched specificity. */
.apg-blog-list .apg-blog-cards { grid-template-columns: 1fr; gap: 1.75rem; }
.apg-blog-list .apg-blog-cards > li { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.apg-blog-list .apg-blog-cards > li:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
@media (max-width: 782px) {
.apg-blog-list .apg-blog-cards > li,
.apg-blog-list .apg-blog-cards > li:nth-child(even) { grid-template-columns: 1fr; }
}
/* ===== 43. Blog index — horizontal rows, full rule set ===== */
/* Supersedes blocks 41 and 42. Those used single-class selectors and lost to
block 35's `.apg-blog-list .apg-blog-cards` rules — notably display:flex on
the card, which left the grid placement computed but inert. Everything below
is the same design at matching specificity. If blocks 41 and 42 are ever
removed, this one stands alone. */
.apg-blog-list .apg-blog-cards > li {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr;
column-gap: 0;
overflow: hidden;
min-height: 16rem;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image {
grid-column: 1; grid-row: 1 / -1;
margin: 0; height: 100%; min-height: 100%; aspect-ratio: auto;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image a {
display: block; height: 100%;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image img {
display: block; width: 100%; height: 100%;
aspect-ratio: auto; object-fit: cover; border-radius: 0;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-title {
grid-column: 2; grid-row: 1;
margin: 1.35rem 1.5rem 0;
font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.2;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-date { grid-column: 2; grid-row: 2; margin: .5rem 1.5rem 0; }
.apg-blog-list .apg-blog-cards > li > .apg-blog-sub {
grid-column: 2; grid-row: 3;
margin: .5rem 1.5rem 0;
font-size: .92rem; line-height: 1.35; opacity: .72;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-excerpt {
grid-column: 2; grid-row: 4; margin: .5rem 1.5rem 1.35rem; align-self: start;
}
.apg-blog-list .apg-blog-cards > li .wp-block-post-excerpt__excerpt {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .5rem;
}
.apg-blog-list .apg-blog-cards > li:nth-child(even) > .wp-block-post-featured-image { grid-column: 2; }
.apg-blog-list .apg-blog-cards > li:nth-child(even) > .wp-block-post-title,
.apg-blog-list .apg-blog-cards > li:nth-child(even) > .wp-block-post-date,
.apg-blog-list .apg-blog-cards > li:nth-child(even) > .apg-blog-sub,
.apg-blog-list .apg-blog-cards > li:nth-child(even) > .wp-block-post-excerpt { grid-column: 1; }
@media (max-width: 782px) {
.apg-blog-list .apg-blog-cards > li,
.apg-blog-list .apg-blog-cards > li:nth-child(even) {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto 1fr;
min-height: 0;
}
.apg-blog-list .apg-blog-cards > li > *,
.apg-blog-list .apg-blog-cards > li:nth-child(even) > * { grid-column: 1; }
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image,
.apg-blog-list .apg-blog-cards > li:nth-child(even) > .wp-block-post-featured-image {
grid-row: 1; height: auto; min-height: 0; aspect-ratio: 16 / 9;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-title { grid-row: 2; margin-top: 1.1rem; }
.apg-blog-list .apg-blog-cards > li > .wp-block-post-date { grid-row: 3; }
.apg-blog-list .apg-blog-cards > li > .apg-blog-sub { grid-row: 4; }
.apg-blog-list .apg-blog-cards > li > .wp-block-post-excerpt { grid-row: 5; }
}
/* ===== 44. Blog index - row height evening ===== */
/* Tunes block 43. Most rows settle at 264px, two with a wrapping subtitle
at 293px. Raising the floor to 18rem brings the short ones up to meet them
rather than clipping the tall ones, which would have cut the Keep reading
link. */
.apg-blog-list .apg-blog-cards > li { min-height: 18rem; }
@media (max-width: 782px) { .apg-blog-list .apg-blog-cards > li { min-height: 0; } }
/* ===== 45. Group mock loops - alpha, so no screen blend ===== */
/* Block 38 stripped a baked-in black card with mix-blend-mode:screen, which
also destroyed the books contact shadows. The loops were re-exported with
real VP9 alpha on 14 Aug and the posters are transparent too (corners read
alpha 0-18), so the blend is no longer needed and now actively washes the
footage out. Block 38 can be deleted outright next time the CSS is tidied. */
.apg-groupmock-wrap video.apg-groupmock, .apg-groupmock-wrap .apg-groupmock { mix-blend-mode: normal; }
/* ===== 46. Single post reading layout ===== */
/* Posts were 1140px wide at 16px/24px with the featured image at full size and
no title at all. The title, date and reading time now come from the
apg-post-header mu-plugin; everything below is the reading treatment. */
.single-post .page-content {
max-width: 44rem;
margin-inline: auto;
}
/* --- header from apg-post-header.php --- */
.single-post .apg-post-head { margin: 0 0 2.25rem; }
.single-post .apg-post-kicker {
font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--apg-accent); opacity: .8; margin: 0 0 .6rem;
}
.single-post .apg-post-title {
font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1;
margin: 0 0 .7rem; text-wrap: balance;
}
.single-post .apg-post-meta {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
opacity: .55; margin: 0;
}
.single-post .apg-post-dot {
width: 3px; height: 3px; border-radius: 50%;
background: currentColor; display: inline-block;
}
/* --- standfirst: every post opens with an h3 subtitle --- */
.single-post .page-content > h3:first-of-type:not(.jp-relatedposts-headline) {
font-size: clamp(1.15rem, 2vw, 1.4rem);
line-height: 1.45; font-weight: 400; font-style: italic;
color: var(--apg-accent-pale, var(--apg-parchment));
opacity: .85; margin: 0 0 1.75rem; padding: 0 0 1.5rem;
border-bottom: 1px solid color-mix(in srgb, var(--apg-accent) 28%, transparent);
}
/* --- body copy --- */
.single-post .page-content p {
font-size: 1.075rem; line-height: 1.78; margin: 0 0 1.4em;
text-wrap: pretty;
}
.single-post .page-content > h2,
.single-post .page-content > h3:not(:first-of-type):not(.jp-relatedposts-headline),
.single-post .page-content > h4 {
margin: 2.4rem 0 .9rem; line-height: 1.25;
}
.single-post .page-content a:not(.wp-block-button__link) {
text-underline-offset: .18em;
text-decoration-color: color-mix(in srgb, var(--apg-accent) 55%, transparent);
}
/* --- images: cap the lead shot, let the rest breathe --- */
.single-post .page-content img {
display: block; height: auto; max-width: 100%;
border-radius: 12px; margin-inline: auto;
}
.single-post .page-content p:has(> img) { margin-block: 2rem; }
.single-post .page-content p > img {
max-height: 62vh; width: auto;
box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
@media (min-width: 1100px) {
.single-post .page-content p:first-of-type > img,
.single-post .page-content > p:nth-of-type(-n+2) > img {
max-width: calc(100% + 7rem); margin-inline: -3.5rem;
}
}
/* --- tags --- */
.single-post .post-tags {
margin: 3rem 0 0; padding-top: 1.5rem;
border-top: 1px solid color-mix(in srgb, var(--apg-accent) 22%, transparent);
}
.single-post .post-tags a {
display: inline-block; margin: 0 .4rem .5rem 0; padding: .3rem .8rem;
font-size: .78rem; letter-spacing: .04em; text-decoration: none;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--apg-accent) 35%, transparent);
opacity: .85;
}
.single-post .post-tags a:hover {
opacity: 1; border-color: var(--apg-accent);
background: color-mix(in srgb, var(--apg-accent) 12%, transparent);
}
/* --- Jetpack related posts --- */
.single-post .jp-relatedposts { margin-top: 3rem; }
.single-post .jp-relatedposts-headline {
font-size: .75rem !important; letter-spacing: .18em; text-transform: uppercase;
color: var(--apg-accent); opacity: .8; margin-bottom: 1rem;
}
.single-post .jp-relatedposts-headline em:before { display: none; }
.single-post .jp-relatedposts-items { display: grid; gap: 1.25rem; }
@media (min-width: 720px) {
.single-post .jp-relatedposts-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) {
.single-post .page-content { max-width: 100%; }
.single-post .page-content p > img { max-height: none; }
}
/* ===== 47. Blog cards: whole-card link, and the post lead image ===== */
/* Stretched link rather than wrapping the card in an anchor: wrapping would nest
the Keep reading link inside another link (invalid) and give screen readers one
giant link whose text is the entire card. The real anchor stays on the title and
an overlay expands its hit area. Trade-off: card text is no longer selectable. */
.apg-blog-list .apg-blog-cards > li { position: relative; transition: border-color .18s ease, transform .18s ease; }
.apg-blog-list .apg-blog-cards > li .apg-card-link::after {
content: ""; position: absolute; inset: 0; z-index: 2;
}
.apg-blog-list .apg-blog-cards > li:hover { border-color: var(--apg-accent); transform: translateY(-2px); }
.apg-blog-list .apg-blog-cards > li:has(.apg-card-link:focus-visible) {
outline: 2px solid var(--apg-accent); outline-offset: 3px;
}
.apg-blog-list .apg-blog-cards > li .apg-card-link:focus-visible { outline: none; }
/* the image link and Keep reading both point at the same place; let the overlay win */
.apg-blog-list .apg-blog-cards > li .wp-block-post-featured-image a,
.apg-blog-list .apg-blog-cards > li .wp-block-post-excerpt__more-link { pointer-events: none; }
.apg-blog-list .apg-blog-cards > li:hover .wp-block-post-excerpt__more-link { color: var(--apg-accent); }
/* --- single post: lead image beside the opening text, not above it --- */
/* Post content always begins with an empty paragraph, then the image paragraph,
then the h3 standfirst. Guarded with :has so it only fires when that second
paragraph really does hold an image. */
@media (min-width: 900px) {
.single-post .page-content > p:nth-of-type(2):has(> img) {
float: left; width: 45%; max-width: 45%;
margin: .35rem 2rem .75rem 0;
}
.single-post .page-content > p:nth-of-type(2):has(> img) > img {
width: 100%; max-width: 100%; max-height: none;
margin-inline: 0;
}
/* give the standfirst its own block so its rule does not run under the image */
.single-post .page-content > h3:first-of-type:not(.jp-relatedposts-headline) {
overflow: hidden; margin-top: 0;
}
.single-post .post-tags, .single-post .jp-relatedposts { clear: both; }
}
/* ===== 48. Post lead image - corrects the selector in block 47 ===== */
/* Block 47 targeted p:nth-of-type(2), on the assumption that content opens with an
empty paragraph. Once apg-post-header injects its , the image paragraph is
the FIRST p. Guarded with :has so it only fires when that paragraph holds an image. */
@media (min-width: 900px) {
.single-post .page-content > p:first-of-type:has(> img) {
float: left; width: 45%; max-width: 45%;
margin: .35rem 2rem .75rem 0;
}
.single-post .page-content > p:first-of-type:has(> img) > img {
width: 100%; max-width: 100%; max-height: none;
margin-inline: 0;
}
}
/* ===== 49. Emoji must stay inline ===== */
/* Some emoji in older posts are stored as bare
WITHOUT the .emoji class, so core emoji CSS (which is !important) never reaches
them. Block 46 then treated them as content images: display:block, max-width:100%,
and a 150px SVG stretched to the full 586px measure. Match on the source as well
as the class so both forms are covered. Unscoped on purpose - this should never
happen anywhere on the site. */
img.emoji,
img.wp-smiley,
img[src*="s.w.org/images/core/emoji"],
img[src*="/core/emoji/"] {
display: inline !important;
width: 1.15em !important;
height: 1.15em !important;
max-width: 1.15em !important;
max-height: 1.15em !important;
margin: 0 .07em !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: none !important;
vertical-align: -0.18em;
}
/* the lead-image float must not fire on a paragraph whose only image is an emoji */
@media (min-width: 900px) {
.single-post .page-content > p:first-of-type:has(> img.emoji):not(:has(> img:not(.emoji):not([src*="/core/emoji/"]))),
.single-post .page-content > p:first-of-type:has(> img[src*="/core/emoji/"]):not(:has(> img:not(.emoji):not([src*="/core/emoji/"]))) {
float: none; width: auto; max-width: none; margin: 0 0 1.4em;
}
}
/* ===== 50. Shop catalogue, one buy button, product copy ===== */
/* --- 50a. Three across, on a grid --------------------------------------
Woo ships li.product as a 22.05% float, and floats stagger the moment two
cards differ in height — which is what looked broken once the square group
shots landed beside the 4:5 covers. Grid removes the staircase.
Three columns, not four: at a 1140px container that is a 357px card, wide
enough that no book title wraps and the art can be read at a glance. */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 52px 3%;
margin: 0 0 2em;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }
.woocommerce ul.products.columns-1, .woocommerce-page ul.products.columns-1 { grid-template-columns: 1fr; }
.woocommerce ul.products.columns-2, .woocommerce-page ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: none !important;
clear: none !important;
width: auto !important;
margin: 0 !important;
display: flex;
flex-direction: column;
text-align: left;
}
/* --- 50b. One image plinth per card -------------------------------------
Fixed slot so every card shares one image box and every title lands on the
same baseline. object-position is LEFT bottom, not centre bottom, so the
art's own left edge sits on the column rail the type is set from.
That only works because the catalogue images are cropped to their visible
art — the original files carry 6-17% transparent margin a side, which is
what made the books look inset while the text hung out to the left of them.
See the media note: card images are the -card- crops, not the solo shots
or the raw group posters. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
width: 100%;
height: 360px;
object-fit: contain;
object-position: 0% 100%;
margin: 0 0 2px;
box-shadow: none;
}
/* --- 50c. Type scale ----------------------------------------------------
Before this the button was the largest, boldest thing on the card: 16px
600 in a filled amber pill, against a 16px 500 title and a 13.7px 400
price in a muddy olive. The name and the price now lead and the button
supports. Left, matching every other surface on the site — and the art is
centred inside its own canvas by a different amount per file, so type was
never going to line up with it anyway. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 1.31rem;
line-height: 1.25;
font-weight: 600;
color: var(--apg-accent, #FFA200);
margin: 0 0 .4rem;
padding: 0; /* the theme sets .5em vertical padding, which collapses to 0 on the font-size:0 cards below and would knock the two title shapes out of step */
min-height: 50px;
text-align: left;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi {
display: block;
font-size: 1.06rem;
font-weight: 600;
color: var(--apg-parchment, #F4F7FA);
text-align: left;
}
.woocommerce ul.products li.product .price { margin: 0 0 .95rem; }
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi { display: inline; margin: 0; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
margin-top: auto;
align-self: flex-start;
font-size: .9rem;
padding: .72em 1.5em;
}
/* --- 50d. One buy button at a time --------------------------------------
apg-shop-runtime sets link.hidden on the Amazon button whenever a physical
format is selected, but Woo's .button rule (display:inline-block) outranks
the UA sheet's low-specificity [hidden]{display:none}, so Add to cart and
Buy the ebook on Amazon were both on screen. */
.apg-ebook-buy[hidden],
a.apg-ebook-buy[hidden] { display: none !important; }
/* --- 50e. Series kicker -------------------------------------------------
Every card is a two-line block: series above, book name below. The series
line is generated, so no product is renamed — the real name stays in the
cart, the order emails, the admin order screen and the product page H1,
and it stays in the link's accessible name. Sizes are in rem so they
survive the font-size:0 below. */
.woocommerce ul.products li.product .woocommerce-loop-product__title::before {
display: block;
font-size: .78rem;
line-height: 1.4;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--apg-parchment, #F4F7FA);
opacity: .55;
margin: 0 0 .3rem;
}
.woocommerce ul.products li.product.post-4723 .woocommerce-loop-product__title::before,
.woocommerce ul.products li.product.post-4730 .woocommerce-loop-product__title::before,
.woocommerce ul.products li.product.post-4737 .woocommerce-loop-product__title::before { content: "Magdalena Basil Trilogy"; }
/* Moxxi, Camp Epiphany and the set already carry the series inside the
product name. Splitting a text node is not possible in CSS, so the name is
collapsed to zero and both lines are drawn — same result, same markup,
and the name is untouched everywhere it actually matters. */
.woocommerce ul.products li.product.post-4744 .woocommerce-loop-product__title,
.woocommerce ul.products li.product.post-4805 .woocommerce-loop-product__title,
.woocommerce ul.products li.product.post-4747 .woocommerce-loop-product__title { font-size: 0; line-height: 0; }
.woocommerce ul.products li.product.post-4744 .woocommerce-loop-product__title::after,
.woocommerce ul.products li.product.post-4805 .woocommerce-loop-product__title::after,
.woocommerce ul.products li.product.post-4747 .woocommerce-loop-product__title::after {
display: block;
font-size: 1.31rem;
line-height: 1.25;
font-weight: 600;
color: var(--apg-accent, #FFA200);
}
.woocommerce ul.products li.product.post-4744 .woocommerce-loop-product__title::before,
.woocommerce ul.products li.product.post-4805 .woocommerce-loop-product__title::before { content: "Pursuits of Moxxi"; }
.woocommerce ul.products li.product.post-4747 .woocommerce-loop-product__title::before { content: "Magdalena Basil Trilogy"; }
.woocommerce ul.products li.product.post-4744 .woocommerce-loop-product__title::after { content: "The Backrooms"; }
.woocommerce ul.products li.product.post-4805 .woocommerce-loop-product__title::after { content: "Camp Epiphany"; }
.woocommerce ul.products li.product.post-4747 .woocommerce-loop-product__title::after { content: "Complete Set"; }
@media (max-width: 900px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 40px 3%; }
.woocommerce ul.products.columns-1, .woocommerce-page ul.products.columns-1 { grid-template-columns: 1fr; }
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img { height: 260px; }
}
@media (max-width: 560px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: 1fr; gap: 36px 0; }
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img { height: 300px; }
}
/* --- 50f. Product copy: hook, summary, highlights ----------------------- */
.apg-prod-hook {
margin: 0 0 1.5em;
padding: .1em 0 .1em 18px;
border-left: 3px solid var(--apg-accent, #FFA200);
font-size: 1.05rem;
line-height: 1.65;
}
.apg-prod-summary { max-width: 704px; } /* the site measure, same as block 46 */
.apg-prod-summary p { line-height: 1.72; margin: 0 0 1.15em; }
.apg-prod-highlights {
list-style: none;
margin: 2.2em 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.apg-prod-highlights li {
margin: 0;
padding: 20px 22px 22px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.14);
border: 1px solid color-mix(in srgb, var(--apg-accent, #FFA200) 32%, transparent);
background: rgba(255,255,255,.04);
background: color-mix(in srgb, var(--apg-accent, #FFA200) 7%, transparent);
}
.apg-prod-highlights li::before {
content: "\2605";
display: block;
color: var(--apg-accent, #FFA200);
font-size: 1.15rem;
line-height: 1;
margin: 0 0 .6em;
}
.apg-hl-label {
display: block;
font-weight: 700;
letter-spacing: .01em;
color: var(--apg-accent, #FFA200);
margin: 0 0 .4em;
}
.apg-hl-body { display: block; font-size: .95rem; line-height: 1.6; opacity: .92; }
.apg-prod-ship {
max-width: 960px;
margin: 2.2em 0 0;
padding-top: 1.2em;
border-top: 1px solid rgba(255,255,255,.12);
font-size: .92rem;
opacity: .78;
}
.apg-set-books { max-width: 960px; margin: 1.8em 0 0; display: grid; gap: 20px; }
.apg-set-book { margin: 0; padding-left: 18px; border-left: 2px solid rgba(255,255,255,.18); }
.apg-set-book h3 {
margin: 0 0 .35em;
font-size: 1.02rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--apg-accent, #FFA200);
}
.apg-set-book p { margin: 0; line-height: 1.65; }
/* ===== 51. Homepage book covers ===== */
/* The Camp Epiphany figure carried a tinted panel and a rounded corner from the
days when it held a flat, edge-to-edge crop of the wrap. The cover is now a
transparent paperback mockup, so the panel showed up as a black box.
The gaps above and below the book were never CSS — they were 12% transparent
padding baked into the file, ~48px at this size. Hero crop 4929 cuts the dead
space off the top and trims the faintest of the render's own shadow off the
bottom, which is why no drop-shadow filter is applied here: the file has one. */
.apg-ce-cover {
background: none;
border-radius: 0;
box-shadow: none;
margin: 18px auto 0;
}
.apg-ce-cover img {
border-radius: 0 !important;
}
.apg-ce .apg-lede {
margin-top: 18px;
}
/* ===== 52. Blog index cards - mobile stack ===== */
/* Block 43 collapses the row below 782px by resetting its children with
`> li > *` - two classes. The desktop column assignments it has to beat are
`> li > .wp-block-post-title` and friends - three classes - so the reset lost and
the two-column row survived onto phones. The image and the text each held a
column, one of which sized to 0, so a card showed either a squashed image or no
image at all depending on whether that img had decoded when the row was laid out.
Fix: mirror the full ancestor chain, one selector per child. */
@media (max-width: 782px) {
.apg-blog-list .apg-blog-cards > li,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto 1fr;
min-height: 0;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-featured-image,
.apg-blog-list .apg-blog-cards > li > .wp-block-post-title,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-title,
.apg-blog-list .apg-blog-cards > li > .wp-block-post-date,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-date,
.apg-blog-list .apg-blog-cards > li > .apg-blog-sub,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .apg-blog-sub,
.apg-blog-list .apg-blog-cards > li > .wp-block-post-excerpt,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-excerpt {
grid-column: 1 / -1;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-featured-image {
grid-row: 1;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
margin: 0;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image a,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-featured-image a {
display: block;
width: 100%;
height: 100%;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-featured-image img,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-featured-image img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
.apg-blog-list .apg-blog-cards > li > .wp-block-post-title,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-title { grid-row: 2; margin-top: 1.1rem; }
.apg-blog-list .apg-blog-cards > li > .wp-block-post-date,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-date { grid-row: 3; }
.apg-blog-list .apg-blog-cards > li > .apg-blog-sub,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .apg-blog-sub { grid-row: 4; }
.apg-blog-list .apg-blog-cards > li > .wp-block-post-excerpt,
.apg-blog-list .apg-blog-cards > li:nth-child(2n) > .wp-block-post-excerpt { grid-row: 5; }
}
/* ===== 53. Mobile header - two-column layout, and drop the back button ===== */
/* Below 782px the header is two columns. LEFT: 56px logo with the ARC pill beside it,
the pill narrow enough that "Request an ARC" breaks to two lines. RIGHT: all eight
menu items in a 4 x 2 grid. Was 143px - logo on its own row, then the nav wrapping to
two 44px rows, six items then three and a pill. It read as overflow, not layout.
*** DO NOT SET position: relative ON THIS HEADER. ***
It is position: sticky WITH top: 46px (the admin-bar offset). Under sticky that top is
a scroll anchor; under relative it becomes a 46px downward SHOVE, which opens a band of
dead space above the bar and drops the whole header onto the page content. Sticky is
already a positioned ancestor, so the absolutely positioned ARC pill below needs
nothing extra. This was shipped broken once - do not reintroduce it.
Four more things that will bite:
1. The ARC pill is an
inside #menu-primary. CSS cannot reparent a node, so it
cannot be moved beside the logo by reordering - it is absolute, with a reserved
width on .site-branding standing in for the room it no longer takes in flow.
2. THAT RESERVED WIDTH MUST EQUAL THE PILL'S RENDERED WIDTH. Written content-box first,
it came out 18px short and the pill overlapped "Home" by 9px. Border-box now, same
number in both places - change one, change the other.
3. `.site-navigation ul#menu-primary > li > a` (4 classes, id, 3 elements) OUT-SPECIFIES
`li.apg-arc-cta > a`. The pill silently inherited white-space: nowrap and a one-line
height and spilled its second line outside its own background. It looked exactly like
"the text is too big"; it was specificity. The ARC overrides run through the same
ancestor chain, and the label sits at full size.
4. .site-branding is flex-direction: column, so justify-content is its VERTICAL axis,
and the theme caps the logo at max-height: 46px. */
@media (max-width: 782px) {
.apg-back { display: none !important; }
header#site-header.site-header {
flex-wrap: nowrap;
align-items: center;
column-gap: .55rem;
padding: .45rem .6rem;
}
/* --- left column: logo, ARC pill beside it --- */
header#site-header.site-header .site-branding { flex: 0 0 auto; }
header#site-header.site-header .site-branding .custom-logo-link { display: block; line-height: 0; }
header#site-header.site-header .site-branding .custom-logo {
display: block;
width: 56px;
height: 56px;
max-height: none; /* theme caps this at 46px */
max-width: none;
}
/* 56 logo + 10 gap + 78 pill = 144. Keep in step with the pill width below. */
header#site-header.site-header:has(.apg-arc-cta) .site-branding {
width: 144px;
justify-content: center; /* column flex - this is the vertical one */
align-self: center;
}
header#site-header.site-header .site-navigation ul#menu-primary > li.apg-arc-cta {
position: absolute;
left: calc(.6rem + 66px);
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
display: block;
}
header#site-header.site-header .site-navigation ul#menu-primary > li.apg-arc-cta > a {
display: block;
box-sizing: border-box;
width: 78px;
height: auto;
min-height: 0;
max-height: none;
white-space: normal;
text-align: center;
font-size: 12.5px;
line-height: 1.15;
padding: 6px 8px;
}
/* --- right column: 4 x 2 grid --- */
header#site-header.site-header .site-navigation { flex: 1 1 auto; min-width: 0; }
header#site-header.site-header .site-navigation ul#menu-primary {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: end;
justify-items: end;
align-items: center;
gap: 4px 6px;
}
header#site-header.site-header .site-navigation ul#menu-primary > li { padding-right: 0; }
header#site-header.site-header .site-navigation ul#menu-primary > li > a {
font-size: .8rem;
padding: .26rem .24rem;
line-height: 1.3;
white-space: nowrap;
}
header#site-header.site-header #menu-primary > li::after { content: none; }
/* --- after 30 September: ARC off at Settings -> Reading --- */
/* The li stops rendering, :not(:has()) takes over, the reserved 144px is released and
spent on the menu instead: 60px logo squared off at the left edge and vertically
centred, and the eight items get a bigger face and real breathing room. Shop takes
over the CTA slot IN PLACE - the existing menu item is promoted, nothing is
duplicated into the header. Delete the #menu-item-4721 rule to undo just that. */
header#site-header.site-header:not(:has(.apg-arc-cta)) .site-branding { width: auto; }
header#site-header.site-header:not(:has(.apg-arc-cta)) .site-branding .custom-logo { width: 60px; height: 60px; }
header#site-header.site-header:not(:has(.apg-arc-cta)) .site-navigation ul#menu-primary { gap: 6px 14px; }
header#site-header.site-header:not(:has(.apg-arc-cta)) .site-navigation ul#menu-primary > li > a {
font-size: .9rem;
padding: .32rem .45rem;
}
header#site-header.site-header:not(:has(.apg-arc-cta)) .site-navigation ul#menu-primary > li#menu-item-4721 > a {
background: var(--apg-accent);
color: var(--apg-void);
border-radius: 999px;
font-weight: 600;
padding: .32rem .8rem;
}
}
/* ===== 54. Shop catalogue - centred cards ===== */
/* Replaces block 50b's horizontal left rail on the author's call - the left-aligned art
read badly on a phone, where the card is 358px wide and the art hugged one edge.
The FLOOR LINE IS KEPT: object-position stays at 100% vertically, which is what stands
every book on the same baseline. Only the horizontal axis moves to centre.
Specificity, twice over:
- Block 50b targets the art through `li.product a img` - three classes and FOUR
elements. A rule written `li.product img` is one element short and loses silently
while looking perfectly correct in the stylesheet.
- The title and price carry their OWN text-align, so centring the card or the link does
nothing to them. They have to be named. The series kicker (::before) and the second
name line (::after) do inherit, so they follow the title for free. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
object-position: 50% 100%;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price * {
text-align: center;
}
.woocommerce ul.products li.product a.button {
margin-inline: auto;
align-self: center;
}
/* ===== 55. Shop toolbar - sorting hidden ===== */
/* THE TOGGLE: delete the one rule marked HIDE to bring sorting back. Everything under
SHOWN STYLE is inert while it is hidden and takes effect the moment it is not.
WHY IT IS HIDDEN: the sort does not merely look wrong, IT SORTS ON THE WRONG NUMBER.
Every product is variable, so WooCommerce sorts by the MINIMUM variation price in
_price - and the minimum variation is the EBOOK:
Legacy Academy _price 0.99 displayed 14.99
Astorias Secret _price 0.99 displayed 14.99
Immortal Eyes _price 0.99 displayed 14.99
Moxxi Backrooms _price 2.99 displayed 9.99
Trilogy set _price 44.97 displayed 44.97
The displayed price is the PAPERBACK price, produced by the single-paperback-price
filter in apg-shop-runtime.php. So the number on the card and the number being sorted
are different numbers, and price-low-to-high puts the three 14.99 titles above the 9.99
one. Not a stylesheet bug - the ebook variations carry their Amazon Kindle prices while
the site deliberately never sells or shows an ebook.
TO FIX IT PROPERLY rather than hide it, one of:
a) a woocommerce_get_catalog_ordering_args filter sorting on a paperback-price meta
key - PHP, so a companion mu-plugin over SFTP;
b) drop the ebook variations and let Buy-on-Amazon be a plain link, which changes the
cart and the runtime swap;
Neither is worth doing for five products. Revisit when the catalogue grows. */
/* HIDE - this is the toggle */
.woocommerce .woocommerce-ordering { display: none; }
/* SHOWN STYLE - inert until the rule above is removed. */
/* The native control was a fixed 232px box with the UA arrow pinned to its far right, so
a short selection left a wide gap between the label and the arrow. This drops the UA
appearance, draws its own chevron a fixed 0.9rem from the right edge, and lets the box
size to its widest option instead of a hardcoded width. */
.woocommerce .woocommerce-ordering select {
appearance: none;
-webkit-appearance: none;
width: auto;
max-width: 100%;
padding: .5rem 2.1rem .5rem .9rem;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 1.15rem) 55%, calc(100% - .9rem) 55%;
background-size: .3rem .3rem, .3rem .3rem;
background-repeat: no-repeat;
}
.woocommerce .woocommerce-result-count { margin-top: .55rem; }
/* ===== 56. Desktop logo - overhang badge ===== */
/* The logo used to be sized BY the bar - 46px because the bar is 53px, capped by the theme
at max-height 46px, and it could not grow without making the bar taller on every page. At
46px the mark reads as a smudge: measured, it is only 15.5% ink, a thin magenta ring on
near-black. Its file has just 5% transparent margin, so the crop trick that fixed the book
mockups does not apply - the art already fills its canvas.
So the logo sits ON the bar rather than in it: 96px in a dark disc that overhangs below.
The bar stays 47px, so this costs nothing vertically, and at 96px the wordmark inside the
mark is legible.
THE BACK BUTTON KEEPS ITS CORNER. .apg-back is fixed at x=24 and ~96px wide, while the
1140px container starts at (100vw - 1140px) / 2 - only 70px at a 1280 viewport, so a badge
on the container edge lands underneath it. The left offset is the clearance calculation:
push right by however much the gutter falls short of 136px, and by zero once it is wide
enough. Measured 9px clear at 1280, 103px at 1600. Change 136 if Back changes width.
THE DISC IS A BACKGROUND ON THE LINK, NOT A ::before. It was a ::before with z-index 1
under an img at z-index 2, and the disc painted OVER the logo at some widths - an empty
ring with nothing in it, while the img reported complete with a 1200x1200 natural size and
every srcset candidate returning 200. A parent background cannot paint over its own child,
so this version has no stacking question to get wrong. Do not refactor it back.
overflow: visible on the header is load-bearing - without it the badge is clipped to the
bar and the effect disappears. */
@media (min-width: 783px) {
header#site-header { overflow: visible; }
header#site-header .site-branding {
width: 96px;
min-height: 46px; /* holds the bar height once the logo leaves the flow */
overflow: visible;
position: relative;
}
header#site-header .custom-logo-link {
position: absolute;
top: 2px;
left: max(0px, calc(136px - (100vw - 1140px) / 2)); /* clears .apg-back */
display: block;
line-height: 0;
border-radius: 50%;
background: #0A0B0E;
box-shadow: 0 0 0 8px #0A0B0E, 0 0 0 9px rgba(255, 162, 0, .35), 0 8px 26px rgba(0, 0, 0, .65);
}
header#site-header .custom-logo {
display: block;
width: 96px;
height: 96px;
max-height: none; /* theme caps this at 46px */
max-width: none;
border-radius: 50%;
}
}
/* ===== 57. Books index — section panel removed, POM row parity ===== */
/* 17 Aug, author's call: the void panel was hiding the portal artwork, so it is
removed outright with no per-theme patch. Contrast measured against all three
background layers with parchment text before writing — b3 worst pixel 11.57:1,
b2 7.01:1, b1 99th percentile 14.11:1. b1's night sky carries lightning in
0.127% of its pixels where contrast falls below AAA. Known, and accepted.
Card anchors keep their own void 58% backing; that is what blurb text sits on. */
.apg-section { background: transparent; }
/* auto-fit COLLAPSES empty tracks, so the two-item Pursuits of Moxxi row threw its
third track away and gave each book a 504px slot against the trilogy's 325px —
which is why the two POM covers rendered 3x the size of a trilogy book.
auto-fill keeps the empty track. Verified identical slot widths on BOTH rows at
393 / 600 / 782 / 900 / 1100 and at desktop. Do not revert this to auto-fit:
the entire row-parity fix is this one word. */
.apg-books-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Group mocks are aspect-ratio 1/1; the POM stills were 3/4 and stood 622px against
288px. A square box puts every cover on one baseline. Specificity: the rule this
beats is .apg-books-grid img, 1 class 1 element — this is 1 class 3 elements. */
.apg-books-grid li a img { aspect-ratio: 1 / 1; }
/* ===== 58. Logo overhang badge — ring follows the active theme ===== */
/* Block 56 baked the badge's accent ring in as rgba(255,162,0,.35), which is b2 amber.
That is also the value --apg-accent falls back to when no theme is set, so it looked
correct until the site switched to b1 or b3 and the ring stayed amber regardless.
Only the middle layer changes: layer 1 is the void disc, layer 2 is the 1px accent
ring, layer 3 is the drop shadow. All three are restated because box-shadow cannot
be overridden one layer at a time.
Verified in-DOM before writing — b1 #0598FC, b2 #FFA200, b3 #00FF86, and with no
data-apg-theme it still resolves to amber exactly as before, so the un-themed state
cannot regress. Selector matches block 56's exactly and wins on source order. */
@media (min-width: 783px) {
header#site-header .custom-logo-link {
box-shadow:
var(--apg-void, #0A0B0E) 0 0 0 8px,
color-mix(in srgb, var(--apg-accent, #FFA200) 35%, transparent) 0 0 0 9px,
rgba(0, 0, 0, .65) 0 8px 26px;
}
}
/* ===== 59. Legacy character quiz — Forminator on theme ===== */
/* Forminator generates a per-module stylesheet of 44 rules with !important on EVERY
declaration, at .forminator-ui.forminator-quiz-489 … (3 to 6 classes, 0 elements).
Every rule below therefore carries !important and uses the prefix
body form.forminator-ui.forminator-quiz.forminator-quiz
— .forminator-quiz is deliberately DOUBLED. That is not a typo: a repeated class is
valid and counts twice toward specificity, which is what beats Forminator's longest
selectors (its start-button rule is (0,5,1); a single-class prefix only reached
(0,4,2) and lost on class count). Using the generic .forminator-quiz rather than
.forminator-quiz-489 means this survives the quiz being rebuilt as a new module.
The module's own styles hardcode three different blues — #85C1E9 on the title and
Start button, #81A3C1 on the question legend, rgba(33,99,177,.68) on Next — plus the
GodofWar and Nunito faces, neither used anywhere else on the rebuilt site. Everything
here reads var(--apg-accent) instead, so the quiz follows b1/b2/b3. Verified live:
b1 #0598FC, b2 #FFA200, b3 #00FF86.
⚠️ Forminator sets transition:.2s on its buttons. In the automated browser those
transitions never advance, so getComputedStyle returns the PRE-transition value and a
working override reads as a total failure. Inject
*{transition:none!important;animation:none!important} before measuring anything here. */
/* The quiz's own title and description duplicate the page H1 and lede — and its H3
rendered at 48px against the page H1's 40px, in a different face. Page heading stands alone. */
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--title,
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--description { display: none !important; }
/* Question */
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-question .forminator-legend { color: var(--apg-parchment, #F4F7FA) !important; font-family: inherit !important; font-size: 1.5rem !important; font-weight: 600 !important; line-height: 1.35 !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-question::after { background-color: color-mix(in srgb, var(--apg-accent) 18%, transparent) !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-page-indicator { color: color-mix(in srgb, var(--apg-parchment, #F4F7FA) 62%, transparent) !important; font-family: inherit !important; font-size: .82rem !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
/* Answer tiles — same language as the book and shop cards: void 58%, 12px, accent hairline */
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer .forminator-answer--design { background-color: color-mix(in srgb, var(--apg-void) 58%, transparent) !important; border-color: color-mix(in srgb, var(--apg-accent) 24%, transparent) !important; border-radius: 12px !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer .forminator-answer--design:hover,
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer .forminator-answer--design:focus { background-color: color-mix(in srgb, var(--apg-void) 70%, transparent) !important; border-color: color-mix(in srgb, var(--apg-accent) 55%, transparent) !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer input:checked + .forminator-answer--design { background-color: color-mix(in srgb, var(--apg-accent) 14%, transparent) !important; border-color: var(--apg-accent) !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer .forminator-answer--name { color: var(--apg-parchment, #F4F7FA) !important; font-family: inherit !important; font-size: 1rem !important; font-weight: 500 !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer input:checked + .forminator-answer--design .forminator-answer--name { color: var(--apg-accent) !important; font-weight: 600 !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer .forminator-answer--status { border-color: color-mix(in srgb, var(--apg-accent) 45%, transparent) !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-answer input:checked + .forminator-answer--design .forminator-answer--status { background-color: var(--apg-accent) !important; border-color: var(--apg-accent) !important; }
/* Buttons — matches the Woo button token exactly: accent fill, void text, 999px, .9rem/600 */
body form.forminator-ui.forminator-quiz.forminator-quiz button.forminator-button.forminator-quiz-start,
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-pagination-footer button.forminator-button,
body form.forminator-ui.forminator-quiz.forminator-quiz button.forminator-button-submit { background-color: var(--apg-accent) !important; color: var(--apg-void, #0A0B0E) !important; font-family: inherit !important; font-size: .9rem !important; font-weight: 600 !important; border-radius: 999px !important; padding: .72em 1.5em !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz button.forminator-button.forminator-quiz-start:hover,
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-pagination-footer button.forminator-button:hover,
body form.forminator-ui.forminator-quiz.forminator-quiz button.forminator-button-submit:hover { background-color: var(--apg-accent-pale, #D3E9FF) !important; color: var(--apg-void, #0A0B0E) !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-pagination-footer button.forminator-button.forminator-disabled { background-color: color-mix(in srgb, var(--apg-void) 45%, transparent) !important; color: color-mix(in srgb, var(--apg-parchment, #F4F7FA) 40%, transparent) !important; }
/* Result */
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--result { border-top-color: color-mix(in srgb, var(--apg-accent) 18%, transparent) !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--result .forminator-result { background-color: color-mix(in srgb, var(--apg-void) 58%, transparent) !important; border-color: color-mix(in srgb, var(--apg-accent) 24%, transparent) !important; border-radius: 12px !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--result .forminator-result--title { color: var(--apg-accent) !important; font-family: inherit !important; font-size: 2rem !important; font-weight: 600 !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--result .forminator-result .forminator-result--content .forminator-result--description,
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--result .forminator-result .forminator-result--content .forminator-result--description p { color: var(--apg-parchment, #F4F7FA) !important; font-family: inherit !important; font-size: 1.02rem !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz button.forminator-button.forminator-result--retake,
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-result--view-answers { color: var(--apg-accent) !important; font-family: inherit !important; }
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-quiz--result .forminator-quiz--social { border-top-color: color-mix(in srgb, var(--apg-accent) 18%, transparent) !important; }
/* ===== 60. Legacy character quiz — the question clears the sticky header ===== */
/* Forminator's scroll_to_top_form() animates the page so the FORM's border-box
top lands at viewport y=0 — y=35 when #wpadminbar is present, its only
offset. It knows nothing about #site-header, which is position:sticky and
owns the top 47px (71px below 782px) — exactly where the question legend
sits. So every Start / Next / Previous parked the question behind the header
and left only the answers on screen. Ten questions out of ten, measured:
legend top 40, header bottom 79.
The padding goes on the STEP WRAPPER, not on the form. Padding inside the
form does not move its offset().top, so Forminator's scroll target is
unchanged; and .forminator-pagination generates no box on the intro screen,
so the pre-Start layout stays identical to the pixel. Padding the form
itself does not — it clamps the intro's content height to zero and adds 33px
to the page.
Clearance = max(headerH, adminBarH + headerH - 35) + air:
desktop max(47, 32+47-35) = 47 -> 80px, measured 41px clear
<=782px max(71, 46+71-35) = 82 -> 104px, measured 27px clear
.forminator-quiz is doubled per block 59: every Forminator rule carries
!important, so this has to out-specify them, not merely come after them. */
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-pagination {
padding-top: 80px !important;
}
@media (max-width: 782px) {
body form.forminator-ui.forminator-quiz.forminator-quiz .forminator-pagination {
padding-top: 104px !important;
}
}
/* ===== 61. Share pill on dark + related-posts cards ===== */
/* 61a. Jetpack share button — was a white pill with a near-white label */
.sharedaddy h3.sd-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--apg-accent-pale, #FAB462); }
.sharedaddy .sd-content ul li a.sd-button,
.sharedaddy .sd-content ul li a.sd-button:visited {
background: transparent !important;
border: 1px solid color-mix(in srgb, var(--apg-accent, #FFA200) 35%, transparent) !important;
border-radius: 999px !important;
box-shadow: none !important;
color: var(--apg-accent-pale, #FAB462) !important;
padding: .38em 1.15em .38em .95em !important;
transition: border-color .2s, color .2s;
}
.sharedaddy .sd-content ul li a.sd-button span { color: inherit !important; }
.sharedaddy .sd-content ul li a.sd-button::before { color: currentColor !important; }
.sharedaddy .sd-content ul li a.sd-button:hover {
border-color: var(--apg-accent, #FFA200) !important;
color: var(--apg-parchment, #F4F7FA) !important;
}
/* 61b. Jetpack related posts — card grid; works with and without thumbnails
(staging is private so Jetpack serves the minimal, image-free variant;
the visual variant's img/anchor rules below are for post-launch) */
.jp-relatedposts { margin-top: 2.5rem !important; padding-top: 0 !important; border-top: 0 !important; }
.jp-relatedposts h3.jp-relatedposts-headline { margin-bottom: 1.1rem; }
.jp-relatedposts h3.jp-relatedposts-headline em { font-style: normal; }
.jp-relatedposts .jp-relatedposts-items { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.1rem !important; }
.jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
float: none !important; width: auto !important; max-width: none !important;
display: flex; flex-direction: column; gap: .3rem;
margin: 0 !important; padding: 1rem 1.1rem 1.1rem;
background: rgba(255,255,255,.035);
border: 1px solid color-mix(in srgb, var(--apg-accent, #FFA200) 18%, transparent);
border-radius: 12px;
opacity: 1 !important;
}
.jp-relatedposts .jp-relatedposts-post > a.jp-relatedposts-post-a { order: -1; }
.jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-img,
.jp-relatedposts .jp-relatedposts-post a.jp-relatedposts-post-a img {
width: 100% !important; height: auto !important; max-width: 100% !important;
border-radius: 8px; margin: 0 0 .55rem !important; order: -1;
}
.jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-title {
display: block; width: auto !important; float: none !important;
font-size: 1.02rem !important; line-height: 1.4 !important; margin: 0 !important;
}
.jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-title a {
color: var(--apg-accent-pale, #FAB462) !important; font-weight: 600 !important; text-decoration: none !important;
}
.jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-title a:hover { color: var(--apg-parchment, #F4F7FA) !important; }
.jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-date {
display: block; width: auto !important; float: none !important;
font-size: .8rem !important; color: color-mix(in srgb, var(--apg-parchment, #F4F7FA) 55%, transparent) !important;
margin: 0 !important; opacity: 1 !important;
}
/* every post is in the Blog category, so the 'In "Blog"' context line is noise */
.jp-relatedposts .jp-relatedposts-post .jp-relatedposts-post-context { display: none !important; }
@media (max-width: 782px) {
.jp-relatedposts .jp-relatedposts-items { grid-template-columns: 1fr !important; }
}
/* ===== 62. Accolade seal — Amazon #1, Pursuits of Moxxi: The Backrooms ===== */
/* An award seal pinned to the corner of the book art, not a text label.
One inline