/* -------------------------------------------------------------------------- */
/* 1. CSS Custom Properties (Variables)                                       */
/* Stark, high-contrast palette and aggressive typography scale.           */
/* -------------------------------------------------------------------------- */
:root {
  /* Colors - Bold, fun, and high-contrast (WCAG 2.2 AAA compliant) */
  --color-background-body: #004d40; /* Deep Teal for the overall body background */
  --color-background-content: #CCFF00; /* Vibrant Yellow-Green for content areas */

  --color-body-text-on-dark-bg: #d9ffd9;
  --color-text-on-dark-bg: #CCFF00; /* Vibrant Yellow-Green for text on dark backgrounds */
  --color-text-on-light-bg: #111111; /* Near-black for text on light backgrounds */
  --color-secondary-text-on-light-bg: #333333; /* Dark grey for secondary text on light backgrounds */

  --color-primary: #FF00FF; /* Vibrant Magenta - for links/accents on light content background */
  --color-primary-dark: #CC00CC; /* Darker Magenta for active states */

  --color-link-on-dark-bg: #00FFFF; /* Electric Blue - for links on dark backgrounds */

  --color-focus: #FF0000; /* Bright Red - intentionally jarring focus indicator */
  --color-code-bg: #EFEFEF; /* Light grey for code blocks */

  /* Typography - Bold, impactful sans-serif for poster-like effect */
  --font-family-primary: "IBM Plex Sans", "Inter", sans-serif; /* Primary sans-serif */
  --font-family-mono: "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* For code snippets */

  /* Type Scale (Highly impactful, based on 1.414 - Augmented Fourth/Tritone) */
  --font-size-base: 1.8rem; /* Significantly larger base font size for dazzling body text (28.8px) */
  --font-size-sm: 0.888rem; /* ~17.7px */
  --font-size-md: 1.25rem; /* 20px */
  --font-size-lg: 1.768rem; /* ~28.3px */
  --font-size-xl: 2.5rem; /* 40px */
  --font-size-2xl: 3.536rem; /* ~56.5px */
  --font-size-3xl: 5rem; /* 80px - very large */
  --font-size-4xl: 7.071rem; /* ~113.1px - massive for poster effect */

  /* Spacing - Deliberate, often exaggerated whitespace for vertical rhythm */
  --line-height-base: 1.4; /* Tighter line height for a denser feel */
  --rhythm-unit: calc(var(--font-size-base) * var(--line-height-base)); /* Base for vertical rhythm */

  --spacing-unit: 1rem; /* Base unit for general spacing */
  --spacing-xxs: calc(0.25 * var(--spacing-unit));
  --spacing-xs: calc(0.5 * var(--spacing-unit));
  --spacing-sm: calc(0.75 * var(--spacing-unit));
  --spacing-md: var(--spacing-unit);
  --spacing-lg: calc(1.5 * var(--spacing-unit));
  --spacing-xl: calc(2 * var(--spacing-unit));
  --spacing-2xl: calc(3 * var(--spacing-unit));
  --spacing-3xl: calc(4 * var(--spacing-unit));
  --spacing-4xl: calc(6 * var(--spacing-unit)); /* Even larger for dramatic breaks */

  /* NEW: Centralized Gutters for Layout Control */
  --gutter-horizontal: var(--spacing-xl);
  --gutter-vertical: var(--spacing-2xl);

  /* Border Radius - Uniformly zero for flat, stark aesthetic */
  --border-radius-none: 0;

  /* Transitions - Abrupt changes for anti-design feel */
  --transition-speed: 0.05s; /* Very fast, almost instant */
  --transition-ease: linear; /* No easing, just direct change */
}

/* -------------------------------------------------------------------------- */
/* 2. Global Resets & Base Styles                                             */
/* Minimalist resets, typography-first application.                        */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base); /* Apply base line height */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-primary);
  color: var(--color-text-on-light-bg); /* Default text color for content */
  background-color: var(--color-background-body); /* Bold background for the entire page */
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ensure consistent vertical rhythm */
  line-height: var(--line-height-base);
}

/* Images - No adornments, just content */
img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--border-radius-none); /* No rounding */
  border: none; /* No borders */
}

/* Links - High contrast, abrupt change on hover */
a {
  color: var(--color-primary); /* Links in content areas */
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

a:hover {
  color: var(--color-text-on-light-bg); /* Stark color change on hover */
  text-decoration: underline; /* Still provide clear indication */
}

/* Accessibility: Focus Indicators - Unmissable, even if visually disruptive */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 5px solid var(--color-focus); /* Very thick, jarring outline */
  outline-offset: 0px; /* No offset, directly on the element */
  border-radius: var(--border-radius-none); /* No rounding */
  box-shadow: none; /* No shadows */
}

/* Headings - Dominant, poster-like typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  line-height: 1; /* Very tight for a solid block of text */
  margin-top: calc(1.5 * var(--rhythm-unit)); /* Tighter margin-top */
  margin-bottom: calc(0.75 * var(--rhythm-unit)); /* Tighter margin-bottom */
  color: var(--color-text-on-light-bg);
  font-weight: 700; /* Bold and impactful */
  letter-spacing: -0.05em; /* Aggressively tight letter spacing */
  text-transform: uppercase; /* Common in anti-design posters */
  word-spacing: -0.07em; /* Tighter word spacing for large, bold headings */
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

/* Paragraphs - Generous vertical rhythm, dazzling size */
p {
  margin-top: 0;
  margin-bottom: var(--rhythm-unit); /* Aligned to vertical rhythm */
  line-height: var(--line-height-base); /* Consistent with body */
  font-weight: 400; /* Standard weight, but larger size makes it impactful */
  hyphens: auto; /* Enable hyphenation for better text flow */
  word-break: break-word; /* Ensure long words break */
  word-spacing: -0.02em; /* Slightly tighter word spacing for body text */
}

/* Lists - Simple, functional, aligned to rhythm */
ul, ol {
  margin-top: 0;
  margin-bottom: var(--rhythm-unit); /* Aligned to vertical rhythm */
  padding-left: var(--spacing-xl);
}

li {
  margin-bottom: calc(0.5 * var(--rhythm-unit)); /* Half rhythm unit below list items */
}

/* Code snippets - Clean, distinct, no frills */
code, pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-code-bg);
  border-radius: var(--border-radius-none); /* No rounding */
  border: none; /* No borders */
}

code,
code.highlighter-rouge,
pre {
  color: var(--color-text-on-dark-bg);
  background-color: var(--color-text-on-light-bg);
}

code {
  padding: 0.2em 0.4em;
  white-space: nowrap;
}

code.highlighter-rouge {
  white-space: wrap;
}


pre {
  padding: var(--spacing-md);
  overflow-x: auto;
  line-height: 1.4;
  margin-bottom: var(--rhythm-unit); /* Aligned to vertical rhythm */
}

/* Blockquotes - Marked by color and indentation, not borders */
blockquote {
  margin: calc(1.5 * var(--rhythm-unit)) 0; /* Tighter margin */
  padding: var(--rhythm-unit) var(--spacing-lg);
  border-left: 8px solid var(--color-primary); /* Thick, bold left border */
  background-color: transparent; /* No background color */
  color: var(--color-text-on-light-bg); /* Use dark text for contrast */
  font-style: italic;
  font-weight: 600; /* Make it stand out */
  border-radius: var(--border-radius-none);
}

/* -------------------------------------------------------------------------- */
/* 3. Layout & Structure                                                      */
/* Single-column, raw layout, emphasizing typography.                      */
/* -------------------------------------------------------------------------- */

/* Header Notification (The "My gopherhole..." notice) */
.header-notification {
  background-color: var(--color-primary); /* Vibrant Magenta background */
  color: var(--color-text-on-light-bg); /* Dark text for high contrast */
  text-align: center;
  padding: var(--rhythm-unit) var(--gutter-horizontal); /* Use horizontal gutter */
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  word-spacing: 0.05em;
  line-height: 1.2;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(3 * var(--rhythm-unit));
  position: relative;
  overflow: hidden;
}

/* Aesthetic Blockquotes within header-notification */
.header-notification blockquote {
  position: absolute;
  font-family: var(--font-family-primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  opacity: 0.1;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  margin: 0;
  padding: 0;
  border-left: none;
  background-color: transparent;
}

.header-notification blockquote:nth-of-type(1) {
  right: -2em;
  font-size: var(--font-size-3xl);
  transform: rotate(10deg) scale(1.2);
  transform-origin: top right;
  color: var(--color-link-on-dark-bg);
  opacity: 0.15;
}

.header-notification blockquote:nth-of-type(2) {
  right: -1em;
  font-size: var(--font-size-2xl);
  transform: rotate(-8deg) scale(1.1);
  transform-origin: bottom right;
  color: var(--color-primary-dark);
  opacity: 0.8;
}

.header-notification p {
  position: relative;
  z-index: 1;
  color: var(--color-text-on-light-bg);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.header-notification p a {
  color: var(--color-background-content);
  text-decoration: underline;
}

.header-notification p a:hover {
  color: var(--color-link-on-dark-bg);
}

/* Wrapper for content - Constrained width for readability */
.wrap {
  max-width: 38em;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-horizontal); /* Use horizontal gutter */
  padding-right: var(--gutter-horizontal); /* Use horizontal gutter */
  padding-top: var(--gutter-vertical); /* Use vertical gutter */
  padding-bottom: var(--gutter-vertical); /* Use vertical gutter */
  background-color: transparent;
  position: relative;
  overflow: visible;
}

/* Skip links for accessibility - Functionally present, visually stark */
.skip-links {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.skip-links:focus-within {
  position: static;
  width: auto;
  height: auto;
  left: 0;
  top: 0;
  background-color: var(--color-focus);
  padding: var(--spacing-sm);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-none);
  text-align: center;
  color: var(--color-text-on-light-bg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  word-spacing: 0.05em;
  margin: var(--spacing-sm) auto;
  display: block;
  max-width: 300px;
}

.skip-links h2 {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: transparent !important;
}

.skip-links li {
  margin-bottom: 0;
  display: inline-block;
}

.skip-links a {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--color-text-on-light-bg);
  font-weight: bold;
  text-decoration: none;
}

.skip-links a:hover,
.skip-links a:focus {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Navigation - Bold, blocky, high-contrast */
.navigation-wrapper {
  background-color: var(--color-text-on-light-bg);
  padding: var(--spacing-lg) 0;
  text-align: center;
  border: none;
}

#menu-toggle {
  display: none;
  color: var(--color-background-content);
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--color-background-content);
  border-radius: var(--border-radius-none);
  cursor: pointer;
  font-weight: bold;
  transition: background-color var(--transition-speed) var(--transition-ease);
}

#menu-toggle:hover,
#menu-toggle:focus {
  background-color: var(--color-primary);
  color: var(--color-text-on-light-bg);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.site-nav li {
  margin: 0 var(--spacing-xl);
}

.site-nav a {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-on-dark-bg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--border-radius-none);
  transition: background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
}

.site-nav a:hover,
.site-nav a:focus {
  background-color: var(--color-link-on-dark-bg);
  color: var(--color-text-on-light-bg);
  text-decoration: none;
}

/* Active Navigation Link Style */
.site-nav li.active a,
.site-nav li.active a:hover,
.site-nav li.active a:focus {
  background-color: transparent;
  color: var(--color-link-on-dark-bg);
  transform: rotate(-20deg);
  text-decoration: none;
}


/* Masthead (Header) - Raw, typographic branding */
.masthead {
  background-color: var(--color-background-content);
  padding: var(--gutter-vertical) 0;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 10;
  perspective: 1000px;
}

/* Aesthetic Blockquotes within masthead */
.masthead blockquote {
  position: absolute;
  font-family: var(--font-family-primary);
  font-weight: 900;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 0;
  margin: 0;
  padding: 0;
  border-left: none;
  background-color: transparent;
  text-align: left;
  line-height: 1;
}

.masthead blockquote:nth-of-type(1) {
  top: 10%;
  left: 5%;
  max-width: 40%;
  font-size: var(--font-size-3xl);
  color: var(--color-link-on-dark-bg);
  opacity: 0.15;
  transform: rotate(-15deg) scale(1.1);
  transform-origin: top left;
  letter-spacing: 0.05em;
  white-space: normal;
  animation: drift1 15s infinite alternate ease-in-out;
}

.masthead blockquote:nth-of-type(2) {
  width: 150%;
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  opacity: 0.1;
  transform: rotate(8deg) skewX(15deg) scale(1.1) translateY(5%) perspective(500px) rotateY(20deg);
  transform-origin: bottom left;
  letter-spacing: 0.15em;
  word-spacing: 0.1em;
  white-space: nowrap;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.3);
  animation: drift2 18s infinite alternate-reverse ease-in-out;
}

@keyframes drift1 {
  0% { transform: rotate(-15deg) scale(1.1) translate(0, 0); }
  50% { transform: rotate(-17deg) scale(1.12) translate(5%, 2%); }
  100% { transform: rotate(-15deg) scale(1.1) translate(0, 0); }
}

@keyframes drift2 {
  0% { transform: rotate(8deg) skewX(15deg) scale(1.1) translateY(5%) perspective(500px) rotateY(20deg) translate(0, 0); }
  50% { transform: rotate(10deg) skewX(17deg) scale(1.12) translateY(7%) perspective(500px) rotateY(22deg) translate(-5%, -3%); }
  100% { transform: rotate(8deg) skewX(15deg) scale(1.1) translateY(5%) perspective(500px) rotateY(20deg) translate(0, 0); }
}

@keyframes spin3D {
  0% { transform: translate(-50%, -50%) rotate(20deg) rotateY(0deg) scale(1.2); }
  100% { transform: translate(-50%, -50%) rotate(20deg) rotateY(360deg) scale(1.2); }
}

.masthead .wrap {
  position: relative;
  z-index: 1;
}

.site-logo-img {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%) rotate(20deg) scale(1.2);
  z-index: 2;
  opacity: 0.8;
  max-width: 200px;
  animation: spin3D 20s infinite linear;
  transform-style: preserve-3d;
}

.site-title {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
  padding-right: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: left;
}

.site-description {
  position: relative;
  z-index: 3;
  margin-top: 0;
}

/* Main Content Area - Single column, raw text flow */
.main-content {
  padding: 0;
  color: var(--color-body-text-on-dark-bg);
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  color: var(--color-text-on-dark-bg);
}

.page-wrapper {
  background-color: transparent;
  border-radius: var(--border-radius-none);
  box-shadow: none;
  padding: var(--gutter-vertical) var(--gutter-horizontal);
}

.page-header {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-title {
  font-size: var(--font-size-3xl);
  margin-top: 0;
  margin-bottom: calc(0.5 * var(--rhythm-unit));
  text-align: left;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.page-content {
  line-height: var(--line-height-base);
}

.page-content > blockquote.warning {
  margin-top: 0;
  font-size: var(--font-size-sm);
}

.page-content blockquote {
  margin: var(--rhythm-unit) 0;
  color: var(--color-body-text-on-dark-bg);
  padding: calc(0.5 * var(--rhythm-unit)) var(--font-size-md);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-background-mid);
  font-style: normal;
  font-weight: 400;
  border-radius: var(--border-radius-none);
}

.page-content blockquote p:last-child {
  margin-bottom: 0;
}

.page-content blockquote h1,
.page-content blockquote h2,
.page-content blockquote h3,
.page-content blockquote h4,
.page-content blockquote h5,
.page-content blockquote h6 {
  font-size: var(--font-size-lg);
  text-transform: none;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: 1.2;
}

.page-content blockquote h1 {
  margin-top: 0;
  margin-bottom: var(--rhythm-unit);
}

/* Entry List (Articles) - Raw, separated blocks of text */
.entries-list {
  display: block;
  margin-top: calc(2 * var(--rhythm-unit));
}

.entry {
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-none);
  overflow: visible;
  box-shadow: none;
  transition: none;
  display: flex;
  flex-direction: column;
  margin-bottom: calc(2 * var(--rhythm-unit));
  padding: 0;
}

.entry:hover {
  background-color: transparent;
  transform: none;
  box-shadow: none;
}

.entry-header {
  padding: 0;
  hyphens: auto;
  margin-bottom: calc(0.5 * var(--rhythm-unit));
}

.entry-title {
  font-size: var(--font-size-2xl);
  margin-top: 0;
  margin-bottom: calc(0.25 * var(--rhythm-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.entry-title a {
  color: var(--color-text-on-dark-bg);
  transition: color var(--transition-speed) var(--transition-ease);
}

.entry-title a:hover,
.entry-title-a:focus {
  color: var(--color-primary);
  text-decoration: none;
}

.entry-image {
  width: 100%;
  height: 10.5em;
  object-fit: cover;
  border: none;
  border-radius: var(--border-radius-none);
  margin-bottom: var(--rhythm-unit);
}

.entry-excerpt {
  padding: 0;
  flex-grow: 1;
  margin-bottom: calc(0.75 * var(--rhythm-unit));
}

.entry-excerpt h1 {
  font-size: var(--font-size-xl);
  margin-top: 0;
  margin-bottom: calc(0.5 * var(--rhythm-unit));
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.entry-meta {
  padding: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-on-light-bg);
  border: none;
  margin-top: 0;
  padding-top: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.entry-date {
  display: block;
  margin-top: 0;
}

.e-content {
  margin-top: var(--rhythm-unit);
}

/* Page Sidebar (for post meta info) */
.page-sidebar {
  padding: 0 var(--spacing-md);
  margin-bottom: var(--rhythm-unit);
  text-align: left;
}

.page-author {
  margin-bottom: calc(0.5 * var(--rhythm-unit));
}

.page-date {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-on-light-bg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: calc(0.5 * var(--rhythm-unit));
}

.page-date a {
  color: inherit;
  text-decoration: none;
}

.page-date a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.page-taxonomies-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: calc(1.75 * var(--font-size-md));
  margin-bottom: calc(0.25 * var(--font-size-md));
  color: var(--color-secondary-text-on-light-bg);
}

.page-taxonomies {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--rhythm-unit);
}

.page-taxonomies li {
  margin-bottom: var(--spacing-xxs);
  font-size: var(--font-size-sm);
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

.page-taxonomies a {
  color: var(--color-primary);
}

.page-taxonomies a:hover {
  color: var(--color-primary-dark);
}

/* Page Pagination */
.page-pagination {
  display: block;
  margin-top: calc(4 * var(--rhythm-unit));
  padding-top: 0;
  border-top: none;
  font-family: var(--font-family-primary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: var(--font-size-md);
  padding-bottom: var(--rhythm-unit);
}

.page-pagination a {
  display: block;
  padding: 0;
  margin-bottom: var(--rhythm-unit);
  color: var(--color-text-on-dark-bg);
  text-decoration: none;
}

.page-pagination a:hover {
    background-color: transparent;
    text-decoration: none;
}

.page-pagination a:hover .page-pagination-label,
.page-pagination a:hover .page-pagination-title {
    color: var(--color-primary);
}

.page-pagination-label {
  font-size: var(--font-size-sm);
  color: var(--color-secondary-text-on-dark-bg);
  margin-bottom: calc(0.25 * var(--rhythm-unit));
  display: block;
}

.page-pagination-title {
  display: block;
  color: var(--color-text-on-dark-bg);
  font-size: var(--font-size-lg);
  line-height: 1.2;
  padding-left: var(--spacing-lg);
  text-decoration: none;
}

.page-pagination .page-next {
  text-align: left;
}

.page-pagination .fas {
  font-size: var(--font-size-md);
  font-weight: 900;
  display: inline-block;
  margin-right: var(--spacing-sm);
}

.page-pagination .page-next .fas {
    margin-left: var(--spacing-sm);
    margin-right: 0;
}

/* Footer - Stark, functional block */
.site-footer {
  background-color: var(--color-text-on-light-bg);
  color: var(--color-text-on-dark-bg);
  padding: calc(1.5 * var(--rhythm-unit)) 0;
  text-align: center;
  font-size: var(--font-size-md);
  border: none;
}

.site-footer a {
  color: var(--color-link-on-dark-bg);
  transition: color var(--transition-speed) var(--transition-ease);
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--color-primary);
}

.social-icons {
  margin-bottom: var(--rhythm-unit);
}

.social-icon {
  margin: 0 var(--spacing-md);
  display: inline-block;
}

.social-icon i {
  color: var(--color-text-on-dark-bg);
  transition: none;
}

.social-icon i:hover,
.social-icon i:focus {
  color: var(--color-primary);
}

.copyright {
  margin-top: var(--rhythm-unit);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------- */
/* 4. Animations (Removed for anti-design static feel)                        */
/* -------------------------------------------------------------------------- */
/* All previous .animated classes and @keyframes are removed.               */
/* Only abrupt transitions for hover/focus states remain.                   */

/* -------------------------------------------------------------------------- */
/* 5. Responsive Design (Mobile-First)                                        */
/* Adapts to various screen sizes with anti-design principles.             */
/* -------------------------------------------------------------------------- */

/* Small devices (phones, 767px and down) */
@media (max-width: 767px) {
  /* Redefine base font size and layout gutters for mobile */
  :root {
    --font-size-base: 1.1rem; /* Further reduced for better comfort on small screens */
    --font-size-lg: 1.3rem;
    --font-size-xl: 1.6rem;
    --font-size-2xl: 2.0rem;
    --font-size-3xl: 2.7rem;
    --font-size-4xl: 3.5rem;
    --gutter-horizontal: var(--spacing-sm); /* Tighter horizontal padding */
    --gutter-vertical: var(--spacing-lg);   /* Reduced vertical padding */
  }

  .navigation-wrapper {
    padding: var(--spacing-md) 0;
  }

  #menu-toggle {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
  }

  .site-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-text-on-light-bg);
    padding-bottom: var(--spacing-md);
  }

  .site-nav.is-open {
    max-height: 500px;
    padding-top: var(--spacing-md);
  }

  /* When the nav element is targeted via the anchor link, reveal it */
  #menu-toggle:target + #primary-nav {
    max-height: unset;
    padding-top: var(--spacing-md);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: center;
    background-color: transparent !important;
  }

  .site-nav li {
    margin: var(--spacing-sm) 0;
    width: 90%;
    text-align: center;
  }

  .site-nav a {
    padding: var(--spacing-md) var(--spacing-lg);
    width: 100%;
    font-size: var(--font-size-lg);
  }

  .masthead {
    padding: var(--gutter-vertical) 0; /* Use mobile vertical gutter */
  }

  /* Aesthetic Blockquotes within masthead for mobile */
  .masthead blockquote:nth-of-type(1) {
    font-size: var(--font-size-2xl);
    left: 2%;
    transform: rotate(-10deg) scale(1);
  }

  .masthead blockquote:nth-of-type(2) {
    font-size: var(--font-size-xl);
    right: 2%;
    transform: rotate(5deg) skewX(5deg) scale(1) translate(-10%, 2%);
  }

  .site-logo-img {
    max-width: 100px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    top: 50%;
    animation: spin3D 20s infinite linear;
  }

  .site-title {
    font-size: 12vw; /* Use viewport width for fluid scaling on mobile */
    padding-right: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
    line-height: 1.1;
  }

  .site-description {
    font-size: var(--font-size-md);
  }

  .page-wrapper {
    padding: var(--gutter-vertical) var(--gutter-horizontal); /* Use mobile gutters */
  }

  /* Post page specific adjustments for mobile */
  .page-header {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .page-title {
    margin-bottom: calc(0.25 * var(--rhythm-unit));
  }

  .page-sidebar {
    padding: 0; /* No extra padding needed, .wrap handles it */
    margin-top: 0;
    margin-bottom: calc(0.75 * var(--rhythm-unit));
  }

  .page-author {
    margin-bottom: calc(0.25 * var(--rhythm-unit));
  }

  .page-date {
    font-size: var(--font-size-base);
    margin-bottom: calc(0.5 * var(--rhythm-unit));
  }

  .page-taxonomies-title {
    font-size: var(--font-size-sm);
    margin-top: 0;
    margin-bottom: calc(0.25 * var(--rhythm-unit));
  }

  .page-taxonomies {
    padding-left: 0;
    margin-bottom: calc(0.5 * var(--rhythm-unit));
  }

  .page-taxonomies li {
    margin-bottom: var(--spacing-xxs);
    font-size: var(--font-size-sm);
  }

  .page-content blockquote {
    margin: var(--rhythm-unit) 0;
    padding: var(--spacing-sm);
    border-left: 4px solid var(--color-primary);
    padding-bottom: calc(0.25 * var(--rhythm-unit));
    margin-bottom: calc(0.5 * var(--rhythm-unit));
  }

  .page-content blockquote p:last-child {
    margin-bottom: 0;
  }

  .page-content blockquote h1,
  .page-content blockquote h2,
  .page-content blockquote h3,
  .page-content blockquote h4,
  .page-content blockquote h5,
  .page-content blockquote h6 {
    font-size: var(--font-size-md);
    margin-bottom: calc(0.25 * var(--rhythm-unit));
  }

  .page-pagination {
    margin-top: calc(1 * var(--rhythm-unit));
    padding-top: calc(0.5 * var(--rhythm-unit));
    flex-direction: column;
    align-items: center;
    padding-bottom: calc(0.5 * var(--rhythm-unit));
  }

  .page-pagination-label {
    margin-bottom: calc(0.125 * var(--rhythm-unit));
  }

  .page-pagination a {
    text-align: center;
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  .page-pagination a:last-child {
      margin-bottom: 0;
  }

  .page-pagination .page-next {
    text-align: center;
    align-items: center;
  }

  .site-footer {
    padding: calc(0.75 * var(--rhythm-unit)) 0;
  }
}

/* Search Input Styling */
.search-input {
  width: 100%;
  background-color: var(--color-background-content);
  color: var(--color-text-on-light-bg);
  border: none;
  border-radius: var(--border-radius-none);
  padding: var(--spacing-lg) var(--spacing-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--rhythm-unit);
}

.search-input::placeholder {
  color: var(--color-secondary-text-on-light-bg);
  opacity: 0.7;
  font-style: italic;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #menu-toggle {
    display: none;
  }

  .site-nav {
    max-height: none;
    overflow: visible;
    background-color: transparent;
    padding-bottom: 0;
  }

  .site-nav ul {
    flex-direction: row;
  }

  .site-nav li {
    margin: 0 var(--spacing-xl);
  }

  .site-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .page-pagination {
    flex-direction: row;
  }
}

/* -------------------------------------------------------------------------- */
/* 6. Accessibility Enhancements                                              */
/* -------------------------------------------------------------------------- */

/* Screen reader text helper (already defined in skip-links h2) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Buttons - Ensure contrast and clear states */
button {
  background-color: var(--color-primary);
  color: var(--color-background-content);
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  border-radius: var(--border-radius-none);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
}

button:hover {
  background-color: var(--color-text-on-light-bg); /* Stark change on hover */
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------- */
/* 7. Performance Optimization Considerations                                 */
/* -------------------------------------------------------------------------- */

/* Font Loading Strategy */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700;900&family=Inter:wght@400;600;700&family=Fira+Code:wght@400&display=swap');