/*
Theme Name: Cognesism
Theme URI: https://cognesism.com/
Author: Justin Brewer
Description: A dark, cosmic editorial block theme for Cognesism, a personal philosophy. Includes full-page patterns, canonical principle blocks and an on-page table of contents.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cognesism
*/

/* ---------- Base ---------- */

:root {
	--cog-hairline: 1px solid var(--wp--preset--color--line);
	--cog-header-h: 4.5rem;
	--cog-ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cog-header-h) + 1.5rem); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
::selection { background: var(--wp--preset--color--violet-deep); color: var(--wp--preset--color--ivory); }

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color .2s var(--cog-ease); }
:where(a, button, summary, input):focus-visible {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 3px;
	border-radius: 1px;
}

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

.cog-skip-link {
	position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem;
	background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--night);
}
.cog-skip-link:focus { top: 1rem; }

.cog-eyebrow,
p.cog-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silver);
	font-weight: 420;
	line-height: 1.6;
	margin: 0;
}
.cog-eyebrow.has-violet-color { color: var(--wp--preset--color--violet); }

.cog-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--silver); }
.cog-arrow-link a, a.cog-arrow-link { text-decoration: none; }
.cog-arrow-link a::after, a.cog-arrow-link::after { content: " \2192"; display: inline-block; transition: transform .25s var(--cog-ease); }
.cog-arrow-link a:hover::after, a.cog-arrow-link:hover::after { transform: translateX(4px); }

.wp-block-button__link::after { content: " \2192"; }
.wp-block-button.is-style-plain .wp-block-button__link::after { content: none; }

.wp-block-separator.cog-rule-short { width: 3rem; border-top: 1px solid var(--wp--preset--color--violet); margin-left: 0; opacity: .8; }
.cog-footer-art .wp-block-separator.cog-rule-short { margin: 1.25rem auto 0; }
.cog-meta-dot { color: var(--wp--preset--color--mist); }

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

.cog-site-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .cog-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .cog-site-header { top: 0; } }
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside it. */
.cog-header { position: relative; border-bottom: var(--cog-hairline); }
.cog-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(12, 12, 15, .82);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
}
.cog-header__inner { min-height: var(--cog-header-h); }

.cog-brand a { display: inline-flex; align-items: center; gap: .85rem; color: var(--wp--preset--color--ivory); text-decoration: none; }
.cog-brand__emblem, .cog-brand__logo {
	width: 2.25rem; height: auto; flex: none;
	color: var(--wp--preset--color--ivory);
	filter: drop-shadow(0 0 6px rgba(140, 100, 230, .75));
}
.cog-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
	padding-top: .1em;
}
.cog-brand a:hover .cog-brand__emblem { filter: drop-shadow(0 0 10px rgba(160, 120, 240, .95)); }

.cog-header .wp-block-navigation-item__content { padding: .35rem 0; border-bottom: 1px solid transparent; }
.cog-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ivory);
	border-bottom-color: var(--wp--preset--color--violet);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--night) !important; color: var(--wp--preset--color--ivory) !important;
	padding: 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { padding: 0 clamp(1.25rem, 6vw, 2.5rem); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 1.25rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display); font-size: 2rem; letter-spacing: .02em; color: var(--wp--preset--color--ivory);
}

/* ---------- Page heroes ---------- */

.cog-hero.wp-block-cover { min-height: clamp(340px, 52vh, 560px); border-bottom: var(--cog-hairline); }
.cog-hero.wp-block-cover .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.cog-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; }
.cog-hero h1 { max-width: 18ch; text-wrap: balance; font-size: clamp(2.5rem, 5.2vw, 4.6rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.cog-hero .cog-hero__sub { max-width: 34rem; font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--ivory); opacity: .9; }
.cog-hero--compact.wp-block-cover { min-height: clamp(280px, 40vh, 440px); }
@media (max-width: 781px) {
	.cog-hero .wp-block-cover__background,
	.cog-card .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(12, 12, 15, .25) 0%, rgba(12, 12, 15, .7) 55%, rgba(12, 12, 15, .92) 100%) !important;
	}
	.cog-hero.wp-block-cover { align-items: flex-end; }
}

/* Homepage hero */
/*
 * Homepage hero. The "stage" holds the full artwork (1672×941) with a square crop of the ring
 * laid exactly over it. The crop is 884px square at (390,0), centred on the ring's true centre
 * (832,442), so rotating it turns the ring in place. Percentages below come from those numbers.
 */
.cog-home-hero.wp-block-group {
	position: relative; overflow: hidden; border-bottom: var(--cog-hairline);
	min-height: clamp(560px, 80vh, 760px);
	display: flex; flex-direction: column; justify-content: center;
	padding-block: var(--wp--preset--spacing--50);
}
.cog-home-hero h1 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); text-shadow: 0 2px 28px rgba(0, 0, 0, .7); }
.cog-home-hero h1 .cog-h1-accent { display: block; color: #cdbff4; }
.cog-hero-copy { position: relative; z-index: 2; width: 100%; }
.cog-hero-copy > * { max-width: 31rem; }
.cog-hero-copy .cog-lead { color: var(--wp--preset--color--ivory); text-shadow: 0 1px 18px rgba(0, 0, 0, .8); }

.cog-home-hero > .cog-hero-stage.wp-block-group {
	position: absolute; z-index: 0; margin: 0 !important; max-width: none !important;
	top: 50%; left: 70%; height: 100%; width: auto; aspect-ratio: 1672 / 941;
	transform: translate(-49.76%, -46.97%); /* puts the ring's centre at (70%, 50%) */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 88%, transparent 100%);
}
.cog-hero-stage .wp-block-image { margin: 0; }
.cog-hero-stage__art { position: absolute; inset: 0; }
.cog-hero-stage__ring { position: absolute; left: 23.325%; top: 0; width: 52.871%; height: 93.943%; }
.cog-hero-stage img { display: block; width: 100%; height: 100%; max-width: none; }
.cog-hero-stage__ring img {
	-webkit-mask-image: radial-gradient(circle closest-side, #000 93%, transparent 100%);
	mask-image: radial-gradient(circle closest-side, #000 93%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
	.cog-hero-stage__ring img { animation: cog-drift 120s linear infinite; }
}
@keyframes cog-drift { to { transform: rotate(360deg); } }

/* Below 1180px the artwork becomes a banner above the text, ring centred and still turning. */
@media (max-width: 1179px) {
	.cog-home-hero.wp-block-group { display: block; min-height: 0; padding-top: 0; }
	.cog-home-hero > .cog-hero-stage.wp-block-group {
		position: relative; top: auto; left: auto; transform: none;
		height: auto; width: 110%; margin: 0 0 0 -5% !important;
		-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
	}
	.cog-hero-copy { margin-top: calc(-1 * var(--wp--preset--spacing--40)) !important; }
}
@media (max-width: 600px) {
	.cog-home-hero > .cog-hero-stage.wp-block-group { width: 150%; margin-left: -25% !important; }
}

/* ---------- Section heads ---------- */

.cog-section-head { border-bottom: var(--cog-hairline); padding-bottom: var(--wp--preset--spacing--30); }
.cog-section-head h2 { margin: 0; text-transform: uppercase; letter-spacing: .03em; font-weight: 400; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; }
.cog-section-head .cog-num { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--violet); font-size: 1.1rem; letter-spacing: .1em; }

/* ---------- Principle preview cards (homepage) ---------- */

.cog-card.wp-block-cover {
	min-height: 15rem; position: relative; border: var(--cog-hairline); overflow: hidden;
	align-items: flex-end; padding: 1.5rem;
}
/*
 * Legibility: the art stays clear at the top and settles into a dark "veil" behind the text,
 * a deep shade plus a soft frosted blur that both fade upward. On hover the veil lowers a
 * little and the art brightens.
 */
.cog-card .wp-block-cover__background,
.cog-card .wp-block-cover__background.has-background-dim {
	background: linear-gradient(0deg, rgba(12, 12, 15, .96) 0%, rgba(12, 12, 15, .86) 40%, rgba(16, 13, 26, .5) 70%, rgba(12, 12, 15, 0) 95%) !important;
	opacity: 1 !important;
	transition: transform .9s var(--cog-ease);
	transform-origin: bottom;
}
.cog-card::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	-webkit-backdrop-filter: blur(7px) saturate(.85);
	backdrop-filter: blur(7px) saturate(.85);
	-webkit-mask-image: linear-gradient(0deg, #000 38%, transparent 72%);
	mask-image: linear-gradient(0deg, #000 38%, transparent 72%);
	transition: transform .9s var(--cog-ease);
	transform-origin: bottom;
}
.cog-card:hover .wp-block-cover__background,
.cog-card:hover::before { transform: scaleY(.9); }
.cog-card .wp-block-cover__inner-container { position: relative; z-index: 2; }
.cog-card h3, .cog-card p { text-shadow: 0 1px 14px rgba(0, 0, 0, .85); }
/* Numbered like the principles themselves: Principle I … VII. */
.cog-cards--featured > :nth-child(1) { --cog-n: "I"; }
.cog-cards--featured > :nth-child(2) { --cog-n: "II"; }
.cog-cards--featured > :nth-child(3) { --cog-n: "III"; }
.cog-cards:not(.cog-cards--featured) > :nth-child(1) { --cog-n: "IV"; }
.cog-cards:not(.cog-cards--featured) > :nth-child(2) { --cog-n: "V"; }
.cog-cards:not(.cog-cards--featured) > :nth-child(3) { --cog-n: "VI"; }
.cog-cards:not(.cog-cards--featured) > :nth-child(4) { --cog-n: "VII"; }
.cog-card .wp-block-cover__inner-container::before {
	content: "Principle " var(--cog-n, "");
	display: block; margin-bottom: .55rem;
	font-size: var(--wp--preset--font-size--x-small); letter-spacing: .24em; text-transform: uppercase;
	color: var(--wp--preset--color--violet);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .8);
}
.cog-card .wp-block-cover__image-background { transition: transform .9s var(--cog-ease), filter .9s var(--cog-ease); }
.cog-card:hover .wp-block-cover__image-background { transform: scale(1.04); filter: brightness(1.08); }
.cog-card h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 .35rem; line-height: 1.05; }
.cog-card h3 a { color: var(--wp--preset--color--ivory); text-decoration: none; }
.cog-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.cog-card p { font-size: var(--wp--preset--font-size--small); line-height: 1.5; max-width: 17rem; color: var(--wp--preset--color--ivory); opacity: .88; margin: 0; }
.cog-card .wp-block-cover__inner-container::after {
	content: "\2192"; display: block; margin-top: .9rem; color: var(--wp--preset--color--ivory);
	transition: transform .25s var(--cog-ease);
}
.cog-card:hover .wp-block-cover__inner-container::after { transform: translateX(5px); }
.cog-card:focus-within { outline: 2px solid var(--wp--preset--color--violet); outline-offset: 2px; }
.cog-card h3 a:focus-visible { outline: none; }
.cog-cards--featured .cog-card.wp-block-cover { min-height: 19rem; }

/* ---------- Canonical statements ---------- */

.cog-statement { margin: var(--wp--preset--spacing--40) 0; padding: 0; }
.cog-statement__text { margin: 0; padding: .25rem 0 .25rem 1.5rem; border-left: 2px solid var(--wp--preset--color--violet); }
.cog-statement__text p {
	margin: 0; font-family: var(--wp--preset--font-family--display); font-style: italic; font-weight: 400;
	font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.38; color: var(--wp--preset--color--ivory);
}
.cog-statement__label {
	margin-top: .9rem; padding-left: 1.6rem;
	font-size: var(--wp--preset--font-size--x-small); letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--mist);
}

.cog-principle-entry {
	display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem;
	padding: 1.5rem 0; border-top: var(--cog-hairline);
}
.cog-principle-entry__numeral {
	font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; color: var(--wp--preset--color--violet);
	width: 2.6rem; height: 2.6rem; border: 1px solid var(--wp--preset--color--line); border-radius: 50%;
	display: grid; place-items: center; letter-spacing: .02em;
}
.cog-principle-entry__title { margin: .1rem 0 .4rem; font-size: 1.6rem; }
.cog-principle-entry__title a { color: var(--wp--preset--color--ivory); text-decoration: none; }
.cog-principle-entry__title a:hover { color: var(--wp--preset--color--violet); }
.cog-principle-entry__statement { margin: 0; color: var(--wp--preset--color--silver); }

/* ---------- Reading layout with sidebar ---------- */

.cog-reading.wp-block-columns { gap: clamp(2rem, 6vw, 5.5rem); }
.cog-sidebar {
	position: sticky; top: calc(var(--cog-header-h) + 2rem); align-self: flex-start;
	max-height: calc(100vh - var(--cog-header-h) - 4rem); overflow-y: auto; scrollbar-width: thin;
}
.cog-principle-row .cog-statement__label, .cog-essay .cog-statement__label { display: none; }
.admin-bar .cog-sidebar { top: calc(var(--cog-header-h) + 2rem + 32px); }
.cog-sidebar > * + * { margin-top: 2.25rem; padding-top: 2rem; border-top: var(--cog-hairline); }
@media (max-width: 781px) {
	.cog-sidebar { position: static; order: 2; border-top: var(--cog-hairline); padding-top: 2rem; max-height: none; }
}

.cog-toc ol, .cog-principle-nav ol { list-style: none; margin: 1rem 0 0; padding: 0; }
.cog-toc ol { border-left: 1px solid var(--wp--preset--color--line); counter-reset: toc; }
.cog-toc li { counter-increment: toc; }
.cog-toc a {
	display: block; padding: .38rem 0 .38rem 1.1rem; margin-left: -1px; border-left: 1px solid transparent;
	font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--silver); text-decoration: none;
}
.cog-toc a:hover, .cog-toc a.is-active { color: var(--wp--preset--color--ivory); border-left-color: var(--wp--preset--color--violet); }

.cog-principle-nav a {
	display: flex; gap: .9rem; align-items: baseline; padding: .4rem 0;
	font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--silver); text-decoration: none;
}
.cog-principle-nav__num { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--mist); min-width: 1.9rem; font-size: 1rem; }
.cog-principle-nav a:hover, .cog-principle-nav a[aria-current] { color: var(--wp--preset--color--ivory); }
.cog-principle-nav a[aria-current] .cog-principle-nav__num { color: var(--wp--preset--color--violet); }

/* Essay text */
.cog-essay > h2:first-child, .cog-essay > :first-child { margin-top: 0; }
.cog-essay h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-top: var(--wp--preset--spacing--50); margin-bottom: .6rem; }
.cog-essay h3 { font-size: 1.6rem; }
.cog-essay p, .cog-essay li { color: #ddd7cf; }
.cog-essay strong { color: var(--wp--preset--color--ivory); font-weight: 600; }
.cog-essay ul { padding-left: 1.2rem; }
.cog-essay li { margin-bottom: .5rem; }
.cog-essay li::marker { color: var(--wp--preset--color--violet); }

.cog-reflect {
	background: var(--wp--preset--color--charcoal); border: var(--cog-hairline); border-left: 2px solid var(--wp--preset--color--violet-deep);
	padding: 1.5rem 1.75rem 1.5rem 2.75rem !important; list-style: none;
}
.cog-reflect li { position: relative; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.3rem; line-height: 1.45; color: var(--wp--preset--color--ivory) !important; }
.cog-reflect li::before { content: "?"; position: absolute; left: -1.5rem; font-style: normal; color: var(--wp--preset--color--violet); font-size: 1rem; top: .2rem; }

.cog-closing {
	font-family: var(--wp--preset--font-family--display); font-style: italic; text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.3; color: var(--wp--preset--color--ivory);
	max-width: 32ch; margin-inline: auto !important; text-wrap: balance;
}
.cog-closing strong { font-weight: 400; }

/* Full-bleed editorial divider image */
.cog-divider.wp-block-image { margin-block: var(--wp--preset--spacing--60); }
.cog-divider.wp-block-image img { width: 100%; height: clamp(220px, 38vw, 460px); object-fit: cover; display: block; }

/* ---------- Seven Principles overview rows ---------- */

.wp-block-columns.cog-principle-row { gap: 0; margin: 0 !important; border-bottom: var(--cog-hairline); }
.cog-principle-row__media { position: relative; min-height: 420px; overflow: hidden; }
.cog-principle-row__media .wp-block-image { position: absolute; inset: 0; margin: 0; }
.cog-principle-row__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	/* Fade the edge that meets the text column. */
	-webkit-mask-image: linear-gradient(90deg, #000 55%, rgba(0, 0, 0, .55) 80%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 55%, rgba(0, 0, 0, .55) 80%, transparent 100%);
}
.cog-principle-row.is-media-right .cog-principle-row__media img {
	-webkit-mask-image: linear-gradient(270deg, #000 55%, rgba(0, 0, 0, .55) 80%, transparent 100%);
	mask-image: linear-gradient(270deg, #000 55%, rgba(0, 0, 0, .55) 80%, transparent 100%);
}
.cog-principle-row__text { padding: clamp(2.25rem, 5vw, 4.75rem) clamp(1.25rem, 5vw, 4.75rem); }
.cog-principle-row__text > * { max-width: 34rem; }
.cog-principle-row h2 { margin: .35rem 0 .2rem; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 400; }
.cog-tagline { font-family: var(--wp--preset--font-family--display); font-style: italic; color: var(--wp--preset--color--silver); font-size: 1.35rem; margin-top: 0; line-height: 1.35; }
.cog-principle-row .cog-statement { margin: 1.5rem 0; }
.cog-principle-row .cog-statement__text p { font-size: 1.35rem; }
.cog-principle-row p { font-size: 1.04rem; }
.cog-principle-row p.cog-tagline { font-size: 1.35rem; }
@media (max-width: 781px) {
	.cog-principle-row__media { min-height: 240px; order: -1; }
	.cog-principle-row__media img,
	.cog-principle-row.is-media-right .cog-principle-row__media img {
		-webkit-mask-image: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, .55) 78%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, .55) 78%, transparent 100%);
	}
}

.cog-principle-list { margin-block: var(--wp--preset--spacing--40) !important; border-bottom: var(--cog-hairline); }

/* Homepage hero accent line + section heads */
.cog-h1-accent { display: block; color: #cdbff4 !important; background: none !important; }
.cog-section-head.wp-block-group { align-items: end; margin-bottom: var(--wp--preset--spacing--40); }
.cog-section-head .cog-lead { margin: 0; max-width: 30rem; justify-self: end; }
.cog-cards.wp-block-group { gap: 1.25rem; }
.cog-cards + .cog-cards { margin-top: 1.25rem; }

/* Principle page pager and About signature */
.cog-pager { border-top: var(--cog-hairline); margin-top: var(--wp--preset--spacing--50) !important; padding-top: var(--wp--preset--spacing--30); }
.cog-pager a { text-decoration: none; color: var(--wp--preset--color--silver); font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; }
.cog-pager a:hover { color: var(--wp--preset--color--ivory); }
.cog-signature { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; color: var(--wp--preset--color--ivory); margin-top: var(--wp--preset--spacing--40) !important; padding-top: var(--wp--preset--spacing--30); border-top: var(--cog-hairline); }
.cog-signature::before { content: "\2014\00a0"; color: var(--wp--preset--color--violet); }

.cog-faq-group h2 { margin-top: .35rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.cog-faq .wp-block-buttons { justify-content: center; }

/* Orbit of the seven (overview page) */
.cog-orbit { position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; }
.cog-orbit::before {
	content: ""; position: absolute; inset: 12%; border: 1px solid var(--wp--preset--color--line); border-radius: 50%;
}
.cog-orbit__center {
	position: absolute; inset: 39%; opacity: .9; filter: drop-shadow(0 0 8px rgba(140, 100, 230, .8));
	background: var(--wp--preset--color--ivory);
	-webkit-mask: url("assets/images/emblem-256.png") center / contain no-repeat;
	mask: url("assets/images/emblem-256.png") center / contain no-repeat;
}
.cog-orbit ol { list-style: none; margin: 0; padding: 0; }
.cog-orbit li {
	position: absolute; width: 18%;
	left: calc(50% + 38% * sin(var(--a))); top: calc(50% - 38% * cos(var(--a)));
	transform: translate(-50%, -40%);
}
.cog-orbit a { display: block; text-align: center; text-decoration: none; color: var(--wp--preset--color--silver); font-size: .8rem; line-height: 1.25; }
.cog-orbit img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); margin-bottom: .4rem; transition: border-color .2s, transform .3s var(--cog-ease); }
.cog-orbit a:hover img { border-color: var(--wp--preset--color--violet); transform: scale(1.06); }
.cog-orbit a:hover { color: var(--wp--preset--color--ivory); }
.cog-orbit a span { display: block; width: 170%; margin-left: -35%; }
@media (max-width: 480px) { .cog-orbit a span { font-size: .68rem; } }

/* ---------- FAQ ---------- */

.cog-faq .wp-block-details { padding: 0; margin: 0; }
.cog-faq .wp-block-details summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 1.15rem 2.5rem 1.15rem 2.75rem;
	font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; line-height: 1.3; color: var(--wp--preset--color--ivory);
}
.cog-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.cog-faq .wp-block-details summary::before {
	content: "+"; position: absolute; left: 0; top: 1.1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--violet-deep); color: var(--wp--preset--color--violet);
	display: grid; place-items: center; font-family: var(--wp--preset--font-family--body); font-size: 1rem; line-height: 1;
}
.cog-faq .wp-block-details[open] summary::before { content: "\2212"; background: var(--wp--preset--color--violet-deep); color: var(--wp--preset--color--ivory); }
.cog-faq .wp-block-details summary:hover { color: var(--wp--preset--color--violet); }
.cog-faq .wp-block-details > :not(summary) { margin-left: 2.75rem; color: #d6d0c8; }
.cog-faq .wp-block-details > :last-child { padding-bottom: 1.4rem; }
.cog-faq .wp-block-details:first-of-type { border-top: var(--cog-hairline); }

/* ---------- Writings ---------- */

.cog-post-card .wp-block-post-featured-image { margin-bottom: 1.1rem; overflow: hidden; border: var(--cog-hairline); }
.cog-post-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--cog-ease); }
.cog-post-card:hover .wp-block-post-featured-image img { transform: scale(1.035); }
.cog-post-card .wp-block-post-title { font-size: 1.6rem; margin: .35rem 0 .5rem; line-height: 1.15; }
.cog-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--violet); }
.cog-post-meta { gap: .6rem !important; color: var(--wp--preset--color--mist); }
.cog-post-meta > * { margin: 0 !important; }
.cog-post-meta .wp-block-post-terms a { color: var(--wp--preset--color--violet); }

.cog-featured-post .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; }
.cog-featured-post .wp-block-post-title { font-size: clamp(2rem, 3.4vw, 2.75rem); }

.cog-article-meta { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--small); }
.cog-article-meta a { color: var(--wp--preset--color--silver); }
.cog-article-image img { width: 100%; height: clamp(240px, 42vw, 560px); object-fit: cover; }

.cog-empty { color: var(--wp--preset--color--mist); font-style: italic; }

h1.cog-article-title { text-transform: none; letter-spacing: 0; font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1.05; max-width: 20ch; }
.cog-arrow-link .wp-block-post-excerpt__more-link { text-decoration: none; }
.cog-arrow-link .wp-block-post-excerpt__more-link::after { content: " \2192"; }

.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { text-decoration: none; color: var(--wp--preset--color--silver); }
.wp-block-query-pagination .page-numbers.current {
	display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--violet-deep); color: var(--wp--preset--color--ivory);
}

/* ---------- Footer ---------- */

.cog-footer-art.wp-block-cover { min-height: clamp(300px, 34vw, 480px); align-items: flex-end; padding-bottom: clamp(2rem, 5vw, 4rem); }
.cog-footer-art .wp-block-cover__image-background { object-position: 50% 42%; }
.cog-footer-quote {
	font-family: var(--wp--preset--font-family--display); font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.25; letter-spacing: .01em; color: var(--wp--preset--color--ivory);
	text-shadow: 0 2px 24px rgba(0, 0, 0, .85); text-wrap: balance;
}
.cog-footer-bar { border-top: var(--cog-hairline); }
.cog-footer-bar .cog-brand__emblem { width: 1.9rem; }
.cog-footer-bar .cog-brand__name { font-size: 1.1rem; }
.cog-footer-bar .wp-block-navigation { gap: 1.6rem; }
.cog-footer-small { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .08em; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}