@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------
## Theme variables
Every colour and font below traces back to one of these custom
properties. Defaults match the theme's original hardcoded values
exactly, so nothing changes visually until a value is overridden -
either here, or via inline :root CSS output by the Customizer
(see inc/customizer.php).
--------------------------------------------------------------*/
:root {
	--o11-color-accent: #0035FF;
	--o11-color-button: #0035FF;
	--o11-color-button-hover: #0035FF;
	--o11-color-button-text: #ffffff;
	--o11-color-button-outline: #333333;
	--o11-color-button-text-hover: #0035FF;
	--o11-color-button-outline-hover: #0035FF;
	--o11-color-category-button: #2d2d2d;
	--o11-color-category-button-hover: #0035FF;
	--o11-color-category-button-text: #000000;
	--o11-color-category-button-outline: lightgrey;
	--o11-color-category-button-text-hover: #0035FF;
	--o11-color-category-button-outline-hover: #0035FF;
	--o11-color-menu-icon: #ffffff;
	--o11-color-heading: #ffffff;
	--o11-color-text: #ffffff;
	--o11-color-link: lightgrey;
	--o11-color-footer-text: #ffffff;
	--o11-color-footer-link: lightgrey;

	--o11-color-bg-site: #121212;
	--o11-color-bg-header: #363636;
	--o11-color-bg-subheader: #242424;
	--o11-color-bg-footer: #232323;
	--o11-color-grid-overlay: #7a7a7a;
	--o11-color-cursor: #ffffff;
	--o11-cursor-blend-mode: difference;
	--o11-cursor-size: 14px;
	--o11-cursor-hover-size: 17.5px;

	--o11-font-heading: 'IBM Plex Mono', monospace;
	--o11-font-body: 'IBM Plex Mono', monospace;

	--o11-anim-speed: 1;
}

html {
  background-color: var(--o11-color-bg-site, #121212);
}

/*--------------------------------------------------------------
## Custom cursor
--------------------------------------------------------------*/
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
	cursor: none;
}

#custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--o11-cursor-size, 14px);
	height: var(--o11-cursor-size, 14px);
	border-radius: 50%;
	background-color: var(--o11-color-cursor, #ffffff);
	mix-blend-mode: var(--o11-cursor-blend-mode, difference);
	pointer-events: none;
	z-index: 10001;
	opacity: 0;
	/* transform is set directly on every mousemove in JS with no CSS
	   transition on it at all - that's what gives pixel-perfect 1:1
	   tracking with zero lag/wiggle. The centering offset (-50%, -50%)
	   is percentage-based, so it recalculates automatically off the
	   element's current width/height - which is why growing on hover is
	   done via width/height below instead of via transform: it never has
	   to fight the position updates, and stays perfectly centered for free.
	*/
	transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
	transition: width .2s ease, height .2s ease, opacity .3s ease;
}

#custom-cursor.is-visible {
	opacity: 1;
}

#custom-cursor.is-hovering {
	width: var(--o11-cursor-hover-size, 17.5px);
	height: var(--o11-cursor-hover-size, 17.5px);
}

/* Cursor > Shrink on Click: a quick, snappier transition than the
   hover-grow, since it needs to read as an immediate press response. */
#custom-cursor.is-clicking {
	width: calc(var(--o11-cursor-size, 14px) * 0.5);
	height: calc(var(--o11-cursor-size, 14px) * 0.5);
	transition: width .15s ease, height .15s ease, opacity .3s ease;
}

/*--------------------------------------------------------------
## Lightbox
--------------------------------------------------------------*/
.lightbox-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(10, 10, 10, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	opacity: 0;
	transition: opacity .35s ease;
}

.lightbox-overlay.is-active {
	opacity: 1;
}

.lightbox-image {
	max-width: 90vw;
	max-height: 90vh;
	-o-object-fit: contain;
	   object-fit: contain;
	transform: scale(.96);
	opacity: 1;
	transition: transform .35s ease, opacity .25s ease;
}

.lightbox-overlay.is-active .lightbox-image {
	transform: scale(1);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
	position: fixed;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox-close span,
.lightbox-prev span,
.lightbox-next span {
	display: block;
	background-color: lightgrey;
	transition: background-color .25s ease;
}

.lightbox-close:hover span,
.lightbox-prev:hover span,
.lightbox-next:hover span {
	background-color: var(--o11-color-accent, #0035FF);
}

/* Lightbox > Theme: Light. Dark is the default and needs no override. */
body.lightbox-theme-light .lightbox-overlay {
	background-color: rgba(245, 245, 245, 0.97);
}

body.lightbox-theme-light .lightbox-close span {
	background-color: #333333;
}

/* Close: an X made of two thin bars, same 1px stroke weight as the burger icon */
.lightbox-close {
	top: 2rem;
	right: 2rem;
	width: 20px;
	height: 20px;
}

.lightbox-close span {
	position: absolute;
	width: 20px;
	height: 1px;
}

.lightbox-close span:first-child {
	transform: rotate(45deg);
}

.lightbox-close span:last-child {
	transform: rotate(-45deg);
}

/* Prev / next: thin chevrons drawn from a bordered corner, same weight as the burger */
.lightbox-prev,
.lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
}

.lightbox-prev span,
.lightbox-next span {
	width: 18px;
	height: 18px;
	background: none;
	border-left: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;
	transition: border-color .25s ease;
}

.lightbox-prev:hover span,
.lightbox-next:hover span {
	border-color: var(--o11-color-accent, #0035FF);
}

body.lightbox-theme-light .lightbox-prev span,
body.lightbox-theme-light .lightbox-next span {
	border-left-color: #333333;
	border-bottom-color: #333333;
}

.lightbox-prev {
	left: 1.5rem;
}

.lightbox-prev span {
	transform: rotate(45deg);
}

.lightbox-next {
	right: 1.5rem;
}

.lightbox-next span {
	transform: rotate(-135deg);
}

body {
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
}

p {
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
a {
	color: var(--o11-color-link, lightgrey);
}

a:hover {
	color: var(--o11-color-accent, #0035FF);
	text-decoration: line-through;
}

a:visited {
	color: grey;
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--o11-color-text, #ffffff);
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: var(--o11-color-heading, #ffffff);
	font-family: var(--o11-font-heading, 'IBM Plex Mono', monospace);
}

/* Comment form */
#commentform textarea,
.comment-form textarea {
	background-color: #242424;
	border: 1px solid #242424;
	color: #7A7A7A;
}

.title {
	color: var(--o11-color-heading, #ffffff);
}

.site-description {
	font-weight: 400;
}
.subtitle {
	color: var(--o11-color-heading, #ffffff);
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

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

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--o11-color-bg-site, #121212);
}

/* WordPress's native Background feature (still kept active for its
   working image-upload capability) auto-adds a .custom-background body
   class and prints its own inline background-color rule scoped to
   body.custom-background - which, being a class+tag selector, is more
   specific than the plain `body` rule above and would silently win
   regardless of load order. !important guarantees our Site Background
   Colour control stays the one source of truth for the colour, while
   leaving any uploaded background image completely untouched. */
body.custom-background {
	background-color: var(--o11-color-bg-site, #121212) !important;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 1em;
}

ul {
	list-style: disc;
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

/* Grid thumbnails: crop to fill the 3:4 box instead of stretching.
   Bulma's is-3by4 helper sizes the box but doesn't itself crop the
   image, so object-fit does the actual cropping here. */
.thumbnail figure.image img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* Post Grid hover overlay. Replaces Bulma's static .has-background-grey
   utility class (previously hardcoded in the markup) so the colour is
   controllable via Theme Colours > Post Grid Thumbnail Hover Overlay
   Colour. Default matches Bulma's grey (#7a7a7a) exactly. */
.grid-hover-overlay {
	background-color: var(--o11-color-grid-overlay, #7a7a7a);
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

.container.is-fluid {
	padding-left: 0 !important;
	padding-right: 0 !important;

}

/* Header > Header Width: Full Width. The post grid gets its 1.5rem inset
   from .section's own padding (its .container.is-fluid inside has zero
   padding of its own, per the rule above) - matching that same 1.5rem
   here keeps the header's content edge aligned with the grid's, instead
   of running flush to the very edge of the viewport. */
#site-hero .container.is-fluid {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

.section {
	padding: 1.5rem 1.5rem !important;
}

.tags-links a:visited {
	color: grey;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/

/* Header background. Bulma's .hero.is-dark default is #363636 - this
   override just makes that value controllable via the Customizer while
   keeping the exact same default appearance. */
#site-hero {
	background-color: var(--o11-color-bg-header, #363636);
}

/* Bulma's .hero.is-dark .title / .subtitle rules (two classes) are more
   specific than the plain .title / .subtitle rules above (one class),
   so they'd otherwise always win inside the hero regardless of what the
   Headline Text Colour control is set to. Scoping to the #site-hero ID
   beats that specificity outright. */
#site-hero .title,
#site-hero .subtitle {
	color: var(--o11-color-heading, #ffffff);
}

/* Force one consistent hamburger layout at every breakpoint - only when
   Header > Menu Style is set to "Hamburger, always" (the default). When
   set to "Full menu at desktop" instead, none of this applies and Bulma's
   own native responsive nav takes over untouched (horizontal menu at
   desktop, hamburger below it). The actual flex container around the
   brand/menu is .navbar > .container (Bulma swaps it between
   display:flex at desktop and display:block on mobile, which is what let
   the menu sit beside the brand at desktop) - forcing it to always be a
   wrapping flex row makes brand/burger/menu behave identically
   everywhere, with the menu always wrapping below. */
.menu-style-hamburger .navbar > .container {
	display: flex !important;
	flex-wrap: wrap !important;
}

.menu-style-hamburger .navbar-brand {
	flex-grow: 1;
	flex-shrink: 0;
}

/* Menu icon colour applies regardless of menu style, since the burger is
   still shown on mobile/tablet even in "Full menu at desktop" mode. */
.navbar-burger {
	color: var(--o11-color-menu-icon, #ffffff);
}
.navbar-burger:hover {
	background-color: rgba(0, 0, 0, 0.25);
}

.menu-style-hamburger .navbar-burger {
	display: flex !important; /* Bulma hides this above 1024px by default; force it at every breakpoint */
	margin-left: auto;
}

/* Animated collapse: applies at mobile/tablet widths regardless of Menu
   Style, since the burger toggle exists there either way (Bulma's own
   native mobile behaviour, or our forced-everywhere Hamburger mode).
   Bulma's own mobile toggle swaps display:none/block directly, which
   can't be animated at all - this is what gave "Full menu at desktop"
   no animation on mobile even though Hamburger mode has always had it.
   The JS in footer.php sets max-height inline to the menu's real
   scrollHeight on open, so the fixed max-height here is only ever a
   base/closed value, not a ceiling. */
@media screen and (max-width: 1023px) {
	.navbar-menu {
		display: flex !important; /* keep it always rendered, like Hamburger mode - relying on Bulma's own display:none/block toggle here would fight the max-height transition, since display can't animate and the element wouldn't have been painted at all beforehand */
		flex-direction: column;
		max-height: 0;
		overflow: hidden;
		box-shadow: none; /* Bulma adds a drop-shadow behind the mobile dropdown by default */
		transition: max-height calc(.5s * var(--o11-anim-speed, 1)) ease; /* Categories panel is .4s; a touch slower here */
	}
}

/* Desktop-only: force the same collapsed/animated behaviour above
   1024px too, where Bulma would otherwise always show the full
   horizontal menu regardless of .is-active. */
.menu-style-hamburger .navbar-menu {
	display: flex !important;
	flex-direction: column;
	flex-basis: 100%;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	box-shadow: none;
	transition: max-height calc(.5s * var(--o11-anim-speed, 1)) ease;
}

.menu-style-hamburger .navbar-end {
	flex-direction: column;
}

@media screen and (min-width: 1024px) {
	.menu-style-hamburger .navbar-end {
		align-items: flex-end;
	}
}

.navbar-item {
	transition: color .25s ease;
}

/* Logo position (Header > Logo Position). Left is the default and needs
   no override - the brand's contents (logo/title) already sit left with
   the burger pushed to the far right via its own margin-left:auto. */
.header-logo-right .navbar-brand {
	flex-direction: row-reverse;
}

.header-logo-right .navbar-burger {
	margin-left: 0;
	margin-right: auto;
}

.header-logo-center .navbar-brand {
	justify-content: center;
}

.header-logo-center .navbar-burger {
	position: absolute;
	right: 0;
	margin-left: 0;
}

/* Scroll shrink: collapses the hero once scrolled, restores it at the top */
#site-hero .hero-body,
#site-hero .title {
	transition: padding calc(.8s * var(--o11-anim-speed, 1)) ease, font-size calc(.8s * var(--o11-anim-speed, 1)) ease;
}

/* Description / curated-by: slower reveal with a short hold so the title
   settles first, but a quicker, delay-free collapse when scrolling down */
#site-hero .site-description,
#site-hero .site-curated-by {
	transition: opacity calc(.6s * var(--o11-anim-speed, 1)) ease calc(.35s * var(--o11-anim-speed, 1)), max-height calc(.6s * var(--o11-anim-speed, 1)) ease calc(.35s * var(--o11-anim-speed, 1)), margin calc(.6s * var(--o11-anim-speed, 1)) ease calc(.35s * var(--o11-anim-speed, 1));
}

body.is-scrolled #site-hero .site-description,
body.is-scrolled #site-hero .site-curated-by {
	transition: opacity calc(.3s * var(--o11-anim-speed, 1)) ease, max-height calc(.3s * var(--o11-anim-speed, 1)) ease, margin calc(.3s * var(--o11-anim-speed, 1)) ease;
}

#site-hero .site-description {
	max-height: 6rem;
}

#site-hero .site-curated-by {
	max-height: 4rem;
}

body.is-scrolled #site-hero .hero-body {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* Scroll-shrunk title size, per breakpoint. Must stay smaller than each
   breakpoint's own resting size (title's is-size-4/-5-touch/-6-mobile
   classes in header.php) - a single fixed value here previously meant
   this was a no-op at desktop and actually grew the title on tablet/
   mobile once the resting sizes were reduced in later rounds. */
body.is-scrolled #site-hero .title {
	font-size: 1.1rem !important;
}

@media screen and (max-width: 1023px) {
	body.is-scrolled #site-hero .title {
		font-size: 0.95rem !important;
	}
}

@media screen and (max-width: 768px) {
	body.is-scrolled #site-hero .title {
		font-size: 0.8rem !important;
	}
}

body.is-scrolled #site-hero .site-description,
body.is-scrolled #site-hero .site-curated-by {
	opacity: 0;
	max-height: 0;
	margin: 0;
	overflow: hidden;
}

.site-curated-by {
	color: lightgrey;
	font-size: .95rem;
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
}

.site-curated-by a {
	color: var(--o11-color-accent, #0035FF);
	border-bottom: 1px solid var(--o11-color-accent, #0035FF);
}

.site-curated-by a:hover {
	text-decoration: line-through;
}

/* Category expansion menu */
.category-toggle-wrap {
	padding: .75rem 0;
	background-color: var(--o11-color-bg-subheader, #242424);
}

.category-toggle {
	background: none;
	border: none;
	color: var(--o11-color-text, #ffffff);
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
	font-size: 1rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
}

.category-toggle:hover {
	color: var(--o11-color-accent, #0035FF);
}

.category-toggle-icon {
	font-size: 1.4rem;
	line-height: 1;
}

.category-panel {
	background-color: var(--o11-color-bg-subheader, #242424);
	overflow: hidden;
	max-height: 0;
	transition: max-height calc(.4s * var(--o11-anim-speed, 1)) ease;
}

.category-panel .container {
	padding: 1.5rem;
}

.category-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
}

.category-panel li {
	margin: 0;
}

/* Category Buttons: independent from Pagination Buttons, its own
   Button Colour / Button Hover Colour / Style. Base rule below reflects
   the "Rounded Solid" style (filled, 5px radius) - the default, matching
   the pills' original appearance exactly. Border is transparent by
   default so the Outline variants have something to colour in. */
.category-panel a {
	display: inline-block;
	padding: .4rem .9rem;
	background-color: var(--o11-color-category-button, #2d2d2d);
	border: 1px solid transparent;
	border-radius: 0;
	color: lightgrey;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

body.cat-btn-style-rounded-outline .category-panel a,
body.cat-btn-style-rounded-solid .category-panel a {
	border-radius: 5px;
}

body.cat-btn-style-outline .category-panel a,
body.cat-btn-style-rounded-outline .category-panel a {
	background-color: transparent;
	border-color: var(--o11-color-category-button-outline, lightgrey);
}

/* Solid / Rounded Solid hover: fills with Button Hover Colour, text uses
   Button Text Colour (matches Pagination's solid hover behaviour). */
body.cat-btn-style-solid .category-panel a:hover,
body.cat-btn-style-rounded-solid .category-panel a:hover,
body.cat-btn-style-solid .category-panel .current-cat a,
body.cat-btn-style-rounded-solid .category-panel .current-cat a {
	background-color: var(--o11-color-category-button-hover, #0035FF);
	border-color: var(--o11-color-category-button-hover, #0035FF);
	color: var(--o11-color-category-button-text, #000000);
	text-decoration: none;
}

/* Outline / Rounded Outline hover: stays unfilled - only the border and
   text swap to their own dedicated hover colours. */
body.cat-btn-style-outline .category-panel a:hover,
body.cat-btn-style-rounded-outline .category-panel a:hover,
body.cat-btn-style-outline .category-panel .current-cat a,
body.cat-btn-style-rounded-outline .category-panel .current-cat a {
	background-color: transparent;
	border-color: var(--o11-color-category-button-outline-hover, #0035FF);
	color: var(--o11-color-category-button-text-hover, #0035FF);
	text-decoration: none;
}

/*--------------------------------------------------------------
## Content
--------------------------------------------------------------*/
.archive .page-header, .search .page-header, .error404 .page-header {
    margin:1rem 0;
}

.entry-meta {
	margin:1rem 0;
}

.hentry:first-of-type {
margin-top: 0;
}

.hentry {
	margin-top: calc(6 * 1rem);
}

.hentry .entry-footer {
    margin:calc(2 * 1rem) 0;
}

.hentry .entry-meta > span, .hentry .entry-footer > span {
    margin-right: 1rem;
}

.post-navigation .nav-links a .meta-nav {
    color: #767676;
    user-select:none
}

.post-navigation .nav-previous:before,  .post-navigation .nav-next:before {
    display: none;
    content: "—";
    width: 2em;
    color: #767676;
    height:1em;
}

.post-navigation .nav-links a .post-title {
    hyphens:auto
}

.post-navigation .nav-links a:hover {
    color: var(--o11-color-accent, #0035FF);
    text-decoration: line-through;
}

/*--------------------------------------------------------------
## Pagination (archive / blog listing)
--------------------------------------------------------------*/
.pagination {
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
	margin: calc(2 * 1rem) 0;
}

.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pagination .page-numbers {
	color: var(--o11-color-link, lightgrey);
	padding: 0.5em 0.9em;
	text-decoration: none;
	border: 1px solid var(--o11-color-button-outline, #333333);
	transition: color .25s ease, border-color .25s ease, background-color .25s ease, opacity .25s ease;
}

.pagination .page-numbers:hover {
	color: var(--o11-color-button-text-hover, #0035FF);
	border-color: var(--o11-color-button-outline-hover, #0035FF);
	text-decoration: line-through;
}

.pagination .page-numbers.current {
	color: var(--o11-color-button-text-hover, #0035FF);
	border-color: var(--o11-color-button-outline-hover, #0035FF);
}

.pagination .page-numbers.dots {
	border: none;
	color: #767676;
}

/* Post Grid > Pagination Type: Load More / Infinite Scroll. The Load
   More button reuses the same Pagination Buttons colour variables and
   btn-style-* variants as the Regular pagination, so it stays visually
   consistent whatever style/colours are chosen there. */
.o11-load-more-wrap {
	text-align: center;
	margin: calc(2 * 1rem) 0;
}

.o11-load-more-btn {
	background: transparent;
	color: var(--o11-color-link, lightgrey);
	padding: 0.6em 1.4em;
	border: 1px solid var(--o11-color-button-outline, #333333);
	border-radius: 0;
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease, opacity .25s ease;
}

.o11-load-more-btn:hover {
	color: var(--o11-color-button-text-hover, #0035FF);
	border-color: var(--o11-color-button-outline-hover, #0035FF);
}

body.btn-style-rounded-outline .o11-load-more-btn,
body.btn-style-rounded-solid .o11-load-more-btn {
	border-radius: 6px;
}

body.btn-style-solid .o11-load-more-btn,
body.btn-style-rounded-solid .o11-load-more-btn {
	background-color: var(--o11-color-button, #0035FF);
	border-color: var(--o11-color-button, #0035FF);
	color: var(--o11-color-button-text, #ffffff);
}

body.btn-style-solid .o11-load-more-btn:hover,
body.btn-style-rounded-solid .o11-load-more-btn:hover {
	background-color: var(--o11-color-button-hover, #0035FF);
	border-color: var(--o11-color-button-hover, #0035FF);
	color: var(--o11-color-button-text, #ffffff);
	opacity: .85;
}

.o11-load-more-wrap.is-loading .o11-load-more-btn {
	opacity: .5;
	cursor: wait;
}

.o11-infinite-scroll-sentinel {
	height: 1px;
}

.o11-infinite-scroll-loading {
	text-align: center;
	min-height: 1.5rem;
	color: var(--o11-color-link, lightgrey);
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
	font-size: .9rem;
}

.o11-load-more-wrap.is-loading .o11-infinite-scroll-loading::after {
	content: "Loading\2026";
}

/* Comment form submit button, styled to match the pagination buttons */
.comment-form input#submit,
#commentform input#submit {
	background: transparent;
	color: var(--o11-color-link, lightgrey);
	padding: 0.5em 0.9em;
	border: 1px solid var(--o11-color-button-outline, #333333);
	border-radius: 0;
	font-family: var(--o11-font-body, 'IBM Plex Mono', monospace);
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease, opacity .25s ease;
}

.comment-form input#submit:hover,
#commentform input#submit:hover {
	color: var(--o11-color-button-text-hover, #0035FF);
	border-color: var(--o11-color-button-outline-hover, #0035FF);
	text-decoration: line-through;
}

/* Pagination Buttons: applies to pagination + the comment submit button
   only. Category Buttons (below) are fully independent, with their own
   Button Colour / Button Hover Colour / Style. */
body.btn-style-rounded-outline .pagination .page-numbers,
body.btn-style-rounded-outline .comment-form input#submit,
body.btn-style-rounded-outline #commentform input#submit {
	border-radius: 6px;
}

body.btn-style-solid .pagination .page-numbers,
body.btn-style-rounded-solid .pagination .page-numbers,
body.btn-style-solid .comment-form input#submit,
body.btn-style-rounded-solid .comment-form input#submit,
body.btn-style-solid #commentform input#submit,
body.btn-style-rounded-solid #commentform input#submit {
	background-color: var(--o11-color-button, #0035FF);
	border-color: var(--o11-color-button, #0035FF);
	color: var(--o11-color-button-text, #ffffff);
}

body.btn-style-rounded-solid .pagination .page-numbers,
body.btn-style-rounded-solid .comment-form input#submit,
body.btn-style-rounded-solid #commentform input#submit {
	border-radius: 6px;
}

/* Solid buttons dim slightly on hover, on top of swapping to the Button
   Hover Colour - so there's always visible feedback even when that
   colour is left matching the Button Colour (its default). */
body.btn-style-solid .pagination .page-numbers:hover,
body.btn-style-rounded-solid .pagination .page-numbers:hover,
body.btn-style-solid .pagination .page-numbers.current,
body.btn-style-rounded-solid .pagination .page-numbers.current,
body.btn-style-solid .comment-form input#submit:hover,
body.btn-style-rounded-solid .comment-form input#submit:hover,
body.btn-style-solid #commentform input#submit:hover,
body.btn-style-rounded-solid #commentform input#submit:hover {
	background-color: var(--o11-color-button-hover, #0035FF);
	border-color: var(--o11-color-button-hover, #0035FF);
	color: var(--o11-color-button-text, #ffffff);
	text-decoration: none;
	opacity: .85;
}

.comments-area .comments-title-wrap .comments-title:before {
background: #767676;
content: "\020";
display: block;
height: 2px;
margin: 1rem 0;
width: 1em;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
/* Footer > Fold Effect. The footer sits fixed behind the main content
   (#o11-fold-content), which reserves exactly enough scroll space (set
   via JS in footer.php, since footer height varies with column count)
   to reveal it at the true bottom of the page. The shadow on the content
   wrapper's trailing edge sells the illusion of it lifting/folding away
   as the footer comes into view underneath. */
#o11-fold-content {
	position: relative;
	z-index: 1;
	background-color: var(--o11-color-bg-site, #121212);
	box-shadow: 0 -25px 50px rgba(0, 0, 0, .5);
}

#o11-footer-fold-layer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}

.footer {
	background-color: var(--o11-color-bg-footer, #232323);
	color: var(--o11-color-footer-text, #ffffff);
}

.widget-area .widget {
	margin-bottom: 2rem;
	text-align: left;
}

.widget-area .widget .title {
	color: var(--o11-color-footer-text, #ffffff);
	font-family: var(--o11-font-heading, 'IBM Plex Mono', monospace);
	font-weight: 400;
	font-size: 2rem;
	text-align: left;
	margin-bottom: 1rem;
}

.widget-area ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.widget-area li {
	margin: 0 0 0.6em;
}

/* Menu items inherit Bulma's .navbar-item class site-wide (see the
   add_menuclass filter in functions.php), which brings padding and a
   light hover background meant for the navbar — strip that back out
   here so footer links read as plain, left-aligned text. */
.widget-area li a.navbar-item {
	display: inline;
	padding: 0;
	background: none;
	color: var(--o11-color-footer-link, lightgrey);
	font-size: 1.15rem;
}

.widget-area li a.navbar-item:hover {
	background: none;
	color: var(--o11-color-accent, #0035FF);
	text-decoration: line-through;
}

.footer strong {
  color: var(--o11-color-footer-text, #ffffff);
}
.footer a {
  color: var(--o11-color-footer-link, lightgrey);
}
.footer a:hover {
  color: var(--o11-color-accent, #0035FF);
}


/*--------------------------------------------------------------
## Selection
--------------------------------------------------------------*/
::-moz-selection{
	background: var(--o11-color-accent, #0035FF);
	color:#000000;
}

::selection {
	background: var(--o11-color-accent, #0035FF);
	color:#000000;
}

code::-moz-selection {
	background: var(--o11-color-accent, #0035FF);
}

code::selection {
	background: var(--o11-color-accent, #0035FF);
}