/*!
 * The Better Website — thebetterwebsite.com
 * Hand-coded static rebuild of the Pivot deck theme.
 * Motion recreates hrtzt's "One Page Navigation CSS Menu" pen with original code.
 */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
	--c1: #138ECF;
	--c2: #EFCCAE;
	--deck-dur: .8s;
	--deck-ease: cubic-bezier(.54, .35, .29, .99);
	/* the pen's slide easing */
	--bounce: cubic-bezier(.25, 1, .5, 1.25);
	/* the pen's overshoot */
	--ink: #fff;
	--grey: #1E293B;
	--light: #D1D5DB;
	--back: rgba(0, 0, 0, .5);
	--primary: #00f1ff;
	--dark: #050505;
	--transition: .5s ease-in-out;
	--nav-w: 175px;

	/* Circle graphic */
	--circle_background: black;
	--arrow_width: 20px;
	--inner_circle_width: 60%;
	--center_content_width: 75%;
	--inner_circle_color: var(--c2);
	--inner_padding: 4rem;
	--secondary_color: rgba(0, 0, 0, .4);
}

/* ==========================================================================
   BASE
   ========================================================================== */
* {
	box-sizing: border-box;
}

body {
	margin: auto;
	background: black;
	overflow-x: hidden;
	font-family: "Orbitron", sans-serif;
	color: var(--light);
	transition: var(--transition);
}

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

p,
button {
	font-family: "Smooch Sans", serif;
}

button {
	font-size: 25px;
}

p {
	font-size: 20px;
}

a {
	color: var(--c1);
}

/* ==========================================================================
   DECK MODE — inert until deck.js adds .deck to <html>
   Window scroll is frozen; one 100svh section renders at a time.
   ========================================================================== */
html.deck,
html.deck body {
	height: 100svh;
	overflow: hidden;
	overscroll-behavior: none;
	/* stops rubber-band / pull-to-refresh at edges */
}

html.deck main>section {
	height: 100svh;
	min-height: 0;
}

html.deck main>section[hidden] {
	display: none !important;
}

/* Section content flies in with the pen's overshoot after the panel lands.
   display:none → visible restarts CSS animations, so this replays on every
   section swap AND on page load — same entrance everywhere. */
.section_content {
	animation: content-in .5s var(--bounce) .55s backwards;
}

@keyframes content-in {
	from {
		transform: translateX(60vw);
		opacity: 0;
	}
}

/* ==========================================================================
   VIEW TRANSITIONS — one animation, two scopes.
   The same fwd/back panel slide fires for same-document section swaps and
   for cross-document page navigations.
   ========================================================================== */
@view-transition {
	navigation: auto;
}

/* The deck panel gets its own snapshot. Root (black body, nav) is visually
   identical on every page, so its default cross-fade is invisible — it IS
   the pen's persistent base layer, already dark. */
main[data-deck] {
	view-transition-name: page;
}

/* Stepped, like the pen reads: old panel exits during the first half, new
   panel enters from the right during the second half. */
::view-transition-old(page) {
	animation: panel-out calc(var(--deck-dur) / 2) var(--deck-ease) both;
}

::view-transition-new(page) {
	animation: panel-in calc(var(--deck-dur) / 2) var(--deck-ease) calc(var(--deck-dur) / 2) both;
}

@keyframes panel-in {
	from {
		transform: translateX(100%);
	}
}

@keyframes panel-out {
	to {
		transform: translateX(100%);
	}
}

/* --------------------------------------------------------------------------
   NAV DURING VIEW TRANSITIONS
   The nav is snapshotted separately from root so it holds still while the
   page slides beneath it. The marker is snapshotted separately again, so it
   morphs from the old page's link to the new one.
   -------------------------------------------------------------------------- */
#main_nav {
	view-transition-name: site-nav;
}

/* Snapshot groups stack in capture order, which puts the marker's layer ON
   TOP of the nav's — the pill covers the active icon/label for the whole
   transition (the live z-index:-1 doesn't apply between snapshot layers).
   Lift the nav group above the marker group to restore live stacking. */
::view-transition-group(site-nav) {
	z-index: 1;
}

/* Nav pair: NO cross-fade — the fade itself reads as a blink. Old snapshot
   hidden, new pinned solid; the marker slide carries the motion. */
::view-transition-old(site-nav) {
	animation: none;
	opacity: 0;
}

::view-transition-new(site-nav) {
	animation: none;
	opacity: 1;
}

/* Marker group: the group animation IS the slide between links. Sync it to
   the page slide. */
::view-transition-group(nav-marker) {
	animation-duration: var(--deck-dur);
	animation-timing-function: var(--deck-ease);
}

/* Marker pair: flat box — old/new fading against each other only reads as
   flicker. Pin both opaque and let them stretch with the morphing group. */
::view-transition-old(nav-marker),
::view-transition-new(nav-marker) {
	animation: none;
	width: 100%;
	height: 100%;
}

.fit {
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	.section_content,
	.hsr {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   NAV
   ========================================================================== */
#main_nav {
	position: fixed;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	z-index: 99;
	padding: 1rem;
	top: 50%;
	transform: translatey(-50%);
	width: var(--nav-w);
	grid-gap: 1rem;
}

#main_nav a {
	width: 100%;
	color: var(--light);
	position: relative;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nav_label {
	text-align: center;
	opacity: 0;
	font-weight: bold;
	justify-content: center;
	font-size: 10px;
	transition: all .2s ease;
}

#main_nav a:hover .nav_label,
#main_nav a:focus-visible .nav_label,
#main_nav a[aria-current="page"] .nav_label {
	opacity: 1;
	margin-bottom: 1rem;
}

#main_nav svg {
	fill: white;
	margin: auto;
	display: flex;
	width: 25px;
	height: 25px;
}

#main_nav a[aria-current="page"] svg {
	fill: var(--dark);
	width: 35px;
	height: 35px;
}

#main_nav a[aria-current="page"] .nav_label {
	padding: 5px;
	color: var(--dark);
}

.nav_marker {
	position: absolute;
	top: -.5rem;
	z-index: -1;
	width: 100%;
	border-radius: 15px;
	height: 100%;
	/* same c2→c1 sweep the gradientback layers produce */
	background: linear-gradient(217deg, var(--c2) 0%, var(--c1) 100%);
	view-transition-name: nav-marker;
}

/* ==========================================================================
   TYPOGRAPHY & UTILITIES
   ========================================================================== */
.display,
.center_content p {
	font-family: "Orbitron", sans-serif;
	font-weight: 500;
}

.subheader,
.display {
	margin: 0;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.display {
	font-size: clamp(2.5rem, 8vw, 6rem);
	color: var(--ink);
}

.display2 {
	font-family: "Orbitron", sans-serif;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--ink);
}

.display2 sup {
	font-size: .4em;
}

.subheader {
	color: var(--c2);
	transition: color .5s ease-in-out;
}

.text-center {
	text-align: center;
}

/* visually hidden, still read by screen readers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.text-light {
	color: var(--light);
}

.dark {
	color: var(--dark);
}

.smallfont {
	font-size: 16px;
	opacity: .7;
}

.px {
	padding-left: 2rem;
	padding-right: 2rem;
}

.py {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.pb {
	padding-bottom: 2rem;
}

.mb {
	margin-bottom: 2rem;
}

.my {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.blur {
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
}

.shadow {
	box-shadow: rgba(0, 0, 0, .3) 0 30px 60px -12px, rgba(0, 0, 0, .4) 0 18px 36px -18px;
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.col-md-6 {
	width: 100%;
}

@media (min-width: 768px) {
	.col-md-6 {
		width: 50%;
	}
}

.container {
	width: 100%;
	max-width: 1500px;
	padding-left: 2rem;
	padding-right: 2rem;
	margin: auto;
}

.mybutton {
	display: inline-block;
	font-family: "Orbitron", sans-serif;
	font-size: 14px;
	border: 4px solid rgba(0, 0, 0, .5);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dark);
	background: linear-gradient(217deg, var(--c2) 0%, var(--c1) 100%);
	padding: .8rem 1.6rem;
	border-radius: 10px;
	cursor: pointer;
	transition: transform .2s ease;
}

.mybutton:hover,
.mybutton:focus-visible {
	transform: scale(.99);
}

.adamleft {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	align-self: start;
	text-align: end;
}

.adamleft p,
.gradientheader {
	background: linear-gradient(217deg, var(--c1) 0%, var(--c2) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200%;
	background-position: left;
	animation: gradientHeader 10s ease infinite;
}

.big_ol_header {
	font-size: 5svw;
	color: var(--dark);
	opacity: .5;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.big_ol_header span {
	display: flex;
}

@keyframes gradientHeader {
	50% {
		background-position: right;
	}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
section {
	position: relative;
	padding: 2rem;
}

@media screen and (min-width: 768px) {
	section {
		max-width: calc(100% - var(--nav-w));
		margin-left: auto;
	}
}

/* Center a deck section's content vertically */
.section_inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 100%;
	max-width: 900px;
}

.section_inner.centered {
	align-items: center;
	text-align: center;
	margin: auto;
}

.squares {
	position: absolute;
	width: 50%;
	right: 0;
	top: 0;
	fill: rgba(255, 255, 255, .05);
	pointer-events: none;
}

/* ==========================================================================
   FIXED HERO (contact/blog style headers)
   ========================================================================== */
section.fixed {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
}

.site_header {
	position: relative;
	z-index: 2;
}

.bottom_text {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	font-size: clamp(1rem, 2vw, 1.5rem);
	color: var(--c2);
	z-index: 2;
}

.bottom_text sup {
	font-size: .6em;
	text-transform: lowercase;
}

.svg_wrap {
	position: absolute;
	top: 50%;
	right: 8%;
	transform: translateY(-50%);
	width: min(35vw, 420px);
	opacity: .35;
	pointer-events: none;
	z-index: 1;
}

/* ==========================================================================
   GRADIENT CARDS
   ========================================================================== */
.gradientback {
	border-radius: 20px;
}

section.gradientback {
	max-height: calc(100svh - 2rem);
	padding: 0;
	margin-top: 1rem;
}

.gradientback .display {
	color: rgba(0, 0, 0, .9);
}

.gradient_content {
	position: relative;
	z-index: 3;
	display: flex;
	grid-gap: 1rem;
}

/* Color layers — c2 base with a c1 gradient mask over it */
.gradientback::before,
.gradientback::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	border-radius: inherit;
	transition: background-color .5s ease-in-out;
}

.gradientback::before {
	background-color: var(--c1);
	-webkit-mask-image: linear-gradient(black, transparent);
	mask-image: linear-gradient(217deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	z-index: 1;
}

.gradientback::after {
	background-color: var(--c2);
}

.primary {
	background-color: var(--c2);
	transition: background-color .5s ease;
}

/* ==========================================================================
   SCROLL-REVEAL ANIMATIONS (.hsr + variant class; main.js adds .animated)
   ========================================================================== */
.hsr {
	animation-play-state: paused;
}

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-play-state: running;
}

.fadeInLeft {
	opacity: 0;
	transform: translateX(-2.5rem);
	animation-name: fadeInSlide;
}

.fadeInRight {
	opacity: 0;
	transform: translateX(2.5rem);
	animation-name: fadeInSlide;
}

.fadeInUp {
	opacity: 0;
	transform: translateY(2.5rem);
	animation-name: fadeInSlide;
}

.canvasFade {
	opacity: 0;
	animation-name: fadeInSlide;
}

@keyframes fadeInSlide {
	to {
		opacity: 1;
		transform: none;
	}
}

.delay-md {
	animation-delay: .5s;
}

.delay-long {
	animation-delay: 1s;
}


.gradientreveal {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(232, 187, 4, 0) 50%);
	background-size: 250% 100%;
	background-position: right bottom;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation-name: gradientreveal;
	animation-duration: 2s !important;
	animation-fill-mode: forwards;
}

@keyframes gradientreveal {
	to {
		background-position: left bottom;
	}
}

/* ==========================================================================
   COLOR SELECTOR UI (fixed corner widget)
   ========================================================================== */
#footer {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 999;
}

.selection-container,
.popup {
	background: rgba(0, 0, 0, .4);
	padding: 4px;
	text-align: center;
}

.selection-container {
	display: flex;
	flex-wrap: wrap;
	width: 50px;
	justify-content: center;
}

.popup {
	display: none;
}

.shuffle,
.reset {
	background: transparent;
	line-height: 0;
	padding: 5px;
	border: 2px solid white;
	opacity: .5;
	cursor: pointer;
}

.shuffle:hover,
.reset:hover {
	transform: scale(.95);
}

.colors {
	display: flex;
	justify-content: center;
}

input[type="color"] {
	opacity: 0;
	width: 15px;
	height: 80px;
	cursor: pointer;
}

.color-wrapper {
	cursor: pointer;
	margin: 4px;
	transition: background-color .5s ease;
}

#cw1 {
	background-color: var(--c1);
}

#cw2 {
	background-color: var(--c2);
}

.material-icons,
.material-symbols-outlined {
	color: white;
}

/* ==========================================================================
   CIRCLE GRAPHIC — shared (all viewports)
   ========================================================================== */
.circle_graphic * {
	transition: .2s ease-in-out;
}

.circle_section svg {
	display: none;
}

.circle_label {
	position: absolute;
	top: 0;
	height: 50%;
	display: flex;
	justify-content: center;
	cursor: pointer;
	transform-origin: bottom;
	z-index: 1;
	padding: 0;
	background: none;
	border: none;
}

.circle_label:after {
	content: '';
	position: absolute;
	top: 0;
	width: 5px;
	height: 100%;
	background: var(--circle_background);
}

.circle_label h3 {
	position: absolute;
	font-size: clamp(.8rem, 1.2vw, 1.2rem);
	min-width: 150px;
	margin: 0;
	line-height: 1;
	color: black;
	text-transform: uppercase;
	font-family: "Smooch Sans", serif;
}

.circle_section:nth-child(2) h3,
.circle_section:nth-child(6) h3 {
	bottom: 108%;
}

.circle_section:nth-child(3) h3,
.circle_section:nth-child(5) h3,
.circle_section:nth-child(7) h3,
.circle_section:nth-child(9) h3 {
	bottom: 115%;
}

.circle_section:nth-child(4) h3 {
	bottom: 130%;
}

.circle_section:nth-child(8) h3 {
	bottom: 125%;
}

.circle_number {
	position: absolute;
	top: -10px;
	display: flex;
	justify-content: center;
	font-weight: bold;
	align-items: center;
	width: 25px;
	height: 25px;
	margin: 0;
	border-radius: 100%;
	outline: 5px solid var(--circle_background);
	z-index: 20;
}

.circle_content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--inner_circle_width);
	height: var(--inner_circle_width);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--inner_circle_color);
	border-radius: 100%;
	outline: 10px solid var(--secondary_color);
	transform: translate(-50%, -50%) scale(0);
	z-index: 30;
}

.circle_content p {
	position: absolute;
	margin: 0;
	max-width: 75%;
	font-weight: 600;
	font-size: 20px;
	color: black;
}

.circle_content a {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	width: 90%;
	height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 100%;
}

.circle_content span {
	font-size: 400%;
	color: var(--dark);
}

.circle_content a:hover {
	animation: boing .5s ease forwards;
}

@keyframes boing {
	33% {
		transform: scale(.9);
	}

	66% {
		transform: scale(1.05);
	}

	100% {
		transform: none;
	}
}

/* Active / hover states */
.circle_active .circle_content {
	transform: translate(-50%, -50%) scale(1);
}

.circle_interacted .circle_active .circle_content {
	transition-delay: .2s;
}

.circle_active h3 {
	color: var(--light);
}

.circle_active .circle_number,
.circle_label:hover .circle_number {
	background: var(--c1);
	box-shadow: 0px 0px 1px 20px rgba(0, 0, 0, .2);
}

/* ==========================================================================
   CIRCLE GRAPHIC — desktop layout
   ========================================================================== */
@media screen and (min-width: 768px) {
	.gradient_content {
		width: 100%;
		height: 100%;
		padding: 1rem;
	}

	.circle_graphic {
		position: relative;
		top: 50%;
		transform: translatey(-50%);
		height: 100%;
		padding: 1rem;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 15px solid var(--secondary_color);
		border-radius: 100%;
	}

	.circle_inner {
		position: relative;
		display: flex;
		justify-content: center;
		width: var(--inner_circle_width);
		padding-top: var(--inner_circle_width);
		background: var(--secondary_color);
		border-radius: 100%;
	}

	.center_content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: var(--center_content_width);
		height: var(--center_content_width);
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--c2);
		border: 50px solid var(--circle_background);
		border-radius: 100%;
		z-index: 10;
	}

	.center_content p {
		max-width: 78%;
		margin: 0;
		font-size: 1.2rem;
		font-weight: bold;
		color: var(--dark);
	}
}

/* ==========================================================================
   CIRCLE GRAPHIC — mobile accordion
   ========================================================================== */
@media screen and (max-width: 767px) {
	.gradientback {
		max-height: 100%;
		overflow-y: auto;
	}

	.circle_section svg {
		display: inline-block;
		width: var(--arrow_width);
		fill: white;
		opacity: .6;
	}

	.circle_active svg {
		transform: rotate(180deg);
	}

	.circle_label {
		position: static;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 10px;
		padding: 10px;
		border: none;
		cursor: pointer;
		background: var(--secondary_color);
	}

	.circle_label:after {
		display: none;
	}

	.circle_label h3 {
		position: static;
		min-width: 0;
		text-align: left;
		color: var(--light);
	}

	.circle_content {
		position: static;
		width: 100%;
		height: auto;
		display: block;
		overflow: hidden;
		max-height: 0;
		margin: 5px 0;
		border-radius: 20px;
		outline: none;
		transform: none;
	}

	.circle_section.circle_active .circle_content {
		max-height: 250px;
		padding: 1rem;
		transform: none;
	}

	.circle_content p {
		position: static;
		max-width: 100%;
	}

	.circle_number {
		display: none;
	}

	.center_content {
		background: var(--c2);
		border-radius: 20px;
		padding: 1rem;
		margin-bottom: 10px;
	}

	.center_content p {
		color: var(--dark);
		margin: 0;
	}
}

/* ==========================================================================
   HOME — circle section sizing in deck mode
   ========================================================================== */
.page_content {
	height: 100%;
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.form_wrap {
	width: 100%;
	max-width: 700px;
	margin: auto;
}

.contact_form label {
	display: block;
	font-family: "Orbitron", sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: .4rem;
	color: var(--light);
}

.contact_form input,
.contact_form textarea {
	width: 100%;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 10px;
	color: var(--ink);
	font-family: "Smooch Sans", serif;
	font-size: 20px;
	padding: .7rem 1rem;
	margin-bottom: 1.2rem;
}

.contact_form input:focus,
.contact_form textarea:focus {
	outline: 2px solid var(--c1);
	border-color: transparent;
}

.contact_form textarea {
	min-height: 140px;
	resize: vertical;
}

/* honeypot */
.contact_form .hp_field {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.form_status {
	font-family: "Smooch Sans", serif;
	font-size: 20px;
	min-height: 1.5em;
	margin-top: .5rem;
}

.form_status.ok {
	color: #7CFC9B;
}

.form_status.err {
	color: #FF7B7B;
}

.call_icons {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 2rem;
}

.contact_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 100%;
	text-decoration: none;
	transition: transform .2s ease;
}

.contact_icon:hover {
	transform: scale(1.1);
}

.contact_icon .icon {
	font-size: 28px;
}

/* ==========================================================================
   BLOG (normal scrolling pages — no deck)
   ========================================================================== */
.posts {
	position: relative;
	z-index: 2;
}


.blog_grid {
	display: grid;
	grid-gap: 5px;
	margin: 5px;
	grid-template-columns: repeat(4, 4fr);
	grid-auto-rows: minmax(150px, auto);
}

.post_wrap {
	background: rgba(0, 0, 0, .5);
	border-radius: 5px;
	display: flex;
	transition: all .2s ease-in-out;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 2rem;
	position: relative;
	z-index: 1;
	grid-column: span 2;
	grid-row: span 2;
	color: white;
}

.post_wrap:nth-child(10n-8) {
	grid-row: span 4;
}

.post_wrap:nth-child(10n-6) {
	grid-column: span 3;
}

.post_wrap:nth-child(10n-5) {
	grid-column: span 1;
}

.post_wrap:nth-child(10n-4) {
	grid-row: span 4;
}

.post_wrap:nth-child(10n-1) {
	grid-column: span 1;
}

.post_wrap:nth-child(10n) {
	grid-column: span 3;
}

@media screen and (max-width:700px) {
	.blog_grid .post_wrap {
		grid-column: span 2;
		grid-row: span 2;
	}
}

@media screen and (max-width:500px) {
	.blog_grid .post_wrap {
		grid-column: span 4;
		grid-row: span 2;
	}
}

/* Card internals — shared by the blog mosaic and the home "latest posts" grid.
   The photo fills the tile behind a dark tint; text sits on top. */
.post_card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	border-radius: 5px;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	text-decoration: none;
}

.post_card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease-in-out;
}

.post_card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	transition: background .2s ease-in-out;
}

.post_card:hover img,
.post_card:focus-visible img {
	transform: scale(1.05);
}

.post_card:hover::after,
.post_card:focus-visible::after {
	background: rgba(0, 0, 0, .35);
}

.post_card_body {
	position: relative;
	z-index: 1;
	padding: 1.25rem;
	max-width: 55ch;
}

.post_date {
	font-family: "Orbitron", sans-serif;
	font-size: .75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c2);
	transition: color .5s ease-in-out;
	margin: 0 0 .5rem;
}

.post_title {
	font-family: "Orbitron", sans-serif;
	font-size: clamp(1rem, 1.8vw, 1.4rem);
	line-height: 1.3;
	margin: 0 0 .5rem;
}

.post_excerpt {
	font-size: .95rem;
	line-height: 1.5;
	margin: 0 0 .75rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post_more {
	display: inline-block;
	font-family: "Orbitron", sans-serif;
	font-size: .75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-bottom: 2px solid var(--c1);
	padding-bottom: 2px;
	transition: border-color .5s ease-in-out;
}

/* ==========================================================================
   BLOG TIMELINE (home) — grab & move slider, from the yLxNZZp pen.
   Recolored: pen's page bg → the section's .gradientback, pen's green band
   → var(--c2), pen's white lines/text → var(--dark), accents → var(--c1).
   ========================================================================== */
.timeline_deck {
	position: relative;
	padding: 1rem 0rem 1rem 1rem;
	z-index: 3;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, 2rem, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 2rem, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 100%);
}

/* --- top area: header + arrows riding the horizontal line --- */
.timeline_top {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 110px;
}

.tl_line {
	position: absolute;
	background: var(--c1);
}

.rounded {
	border-radius: 5000px 0 0 5000px;
}

.tl_line_mid {
	width: 100%;
	height: 2px;
	top: 50%;
}

/* drops from the mid line to the band below, continued by .timeline_left_line */
.tl_line_left {
	display: none;
	width: 2px;
	left: 0;
	top: 50%;
	height: 50%;
}

.timeline_header {
	position: relative;
	width: fit-content;
	margin: 0;
	padding: .5rem 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: clamp(1rem, 2vw, 1.4rem);
	background: var(--dark);
	border: 2px solid var(--c1);
	color: var(--ink);
}

.timeline_nav {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
}

.timeline_nav button {
	background: transparent;
	border: none;
	padding: 0 .15rem;
	cursor: pointer;
	transition: transform .2s ease;
}

.timeline_nav button:hover {
	transform: scale(1.1);
}

.timeline_nav button span {
	display: block;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	font-size: 36px;
	border-radius: 100%;
	background: var(--dark);
	border: 2px solid var(--dark);
	color: var(--ink);
}

/* --- band: the pen's green area = second custom color --- */
.timeline_bottom {

	transition: background-color .5s ease-in-out;
	/* bleed through the section's 2rem padding */
}

/* --tl-y: y of the horizontal line = padding-top + date row + dot margin
   + half the dot, so the dots always sit exactly ON the line. */
.timeline_content {
	--tl-date-h: 30px;
	--tl-y: calc(3rem + var(--tl-date-h) + 10px + 10px);
	position: relative;
	padding: 3rem 0 2rem;
	color: var(--dark);
}


.timeline_wrap {
	overflow: hidden;
}

/* continues .tl_line_left down to the horizontal line */
.timeline_left_line {
	display: none;
	position: absolute;
	width: 2px;
	background: var(--dark);
	left: 0;
	top: 0;
	height: var(--tl-y);
}

.timeline_line {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	top: var(--tl-y);
	background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, var(--dark) 10%, var(--dark) 90%, rgba(0, 0, 0, 0) 100%);
}

#timeline_slider {
	position: relative;
	z-index: 1;
	padding-left: 15%;
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	cursor: grab;
}

#timeline_slider::-webkit-scrollbar {
	display: none;
}

.timeline_slide {
	min-width: min(300px, 80vw);
	padding: 0 1rem;
	user-select: none;
	-webkit-user-select: none;
}

.timeline_date {
	display: block;
	background: var(--dark);
	border-radius: 50px;
	height: var(--tl-date-h);
	line-height: var(--tl-date-h);
	text-align: center;
	font-size: 1rem;
	color: var(--c2);
	font-weight: bold;
	letter-spacing: 2px;
	transition: color .5s ease-in-out;
}

.timeline_dot {
	width: 20px;
	height: 20px;
	padding: 4px;
	margin: 10px auto;
	border: 2px solid var(--dark);
	border-radius: 100%;
	background: var(--c2);
	transition: background-color .5s ease-in-out;
}

.timeline_dot_center {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background: var(--dark);
}

.timeline_slide .post_card {
	height: 200px;
	margin-top: 6px;
}

.timeline_slide .post_card img {
	pointer-events: none;
}

.timeline_slide .post_title {
	font-size: 1.05rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.timeline_cta {
	margin-top: 1.5rem;
	align-self: flex-start;
}

@media screen and (min-width: 768px) {
	.timeline_top {
		width: 100%;
	}

	.tl_line_left,
	.timeline_left_line {
		display: block;
	}

	.timeline_header {
		margin-left: 10%;
	}

	.timeline_nav {
		right: 10%;
	}


	.timeline_line {
		background: var(--c1);
	}

	.timeline_cta {
		margin-left: auto;
		display: flex;
		justify-content: flex-end;
	}
}

.post_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 1.5rem;
}

.post_content a {
	text-decoration: none;
}

.post_content h2 {
	font-family: "Orbitron", sans-serif;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	color: var(--ink);
	line-height: 1.3;
	margin: 0 0 .5rem;
}

.post_content a:hover h2 {
	color: var(--c1);
}

/* alternate image side on desktop */
@media (min-width: 768px) {
	.altme:nth-child(even) .col-md-6:first-child {
		order: 2;
	}
}

/* Single post article */
.article_wrap {
	max-width: 800px;
	margin: auto;
	padding-bottom: 4rem;
}

.article_wrap h1 {
	font-family: "Orbitron", sans-serif;
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.2;
	color: var(--ink);
}

.article_wrap h2,
.article_wrap h3,
.article_wrap h4 {
	font-family: "Orbitron", sans-serif;
	color: var(--ink);
	line-height: 1.3;
	margin-top: 2.5rem;
}

.article_wrap p,
.article_wrap li {
	font-family: "Smooch Sans", serif;
	font-size: 22px;
	line-height: 1.5;
	color: var(--light);
}

.article_wrap img {
	border-radius: 20px;
	margin: 1rem 0;
}

.article_meta {
	font-family: "Orbitron", sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c2);
	margin-bottom: 2rem;
}

.article_hero {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: 20px;
	margin-bottom: 2rem;
}

/* ==========================================================================
   MOBILE — nav becomes a bottom bar
   ========================================================================== */
@media screen and (max-width: 767px) {
	:root {
		--nav-w: 0px;
	}

	#main_nav {
		flex-direction: row;
		width: 100%;
		height: auto;
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		justify-content: space-around;
		align-items: flex-end;
		padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
		background: rgba(0, 0, 0, .7);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	#main_nav a {
		width: auto;
		min-width: 44px;
	}

	.nav_label {
		display: none;
	}

	#main_nav a[aria-current="page"] svg {
		width: 28px;
		height: 28px;
	}

	.nav_marker {
		top: -.35rem;
		left: -.5rem;
		right: -.5rem;
		width: auto;
		height: calc(100% + .7rem);
	}

	html.deck main>section {
		/* leave room for the bottom nav bar */
		padding-bottom: 5rem;
	}

	#footer {
		bottom: 5.5rem;
	}

	.bottom_text {
		bottom: 6rem;
	}
}