@charset "UTF-8";
@font-face {
  font-family: "Product Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Product Sans Bold"), local("ProductSans-Bold"), url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@2/product-sans/product-sans-bold.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("MonoLisa Light"), url("../webfonts/MonoLisa-Light.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local("MonoLisa Light Italic"), url("../webfonts/MonoLisa-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("MonoLisa Regular"), url("../webfonts/MonoLisa-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("MonoLisa Regular Italic"), url("../webfonts/MonoLisa-RegularItalic.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("MonoLisa Medium"), url("../webfonts/MonoLisa-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local("MonoLisa Medium Italic"), url("../webfonts/MonoLisa-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("MonoLisa SemiBold"), url("../webfonts/MonoLisa-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local("MonoLisa SemiBold Italic"), url("../webfonts/MonoLisa-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("MonoLisa Bold"), url("../webfonts/MonoLisa-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local("MonoLisa Bold Italic"), url("../webfonts/MonoLisa-BoldItalic.woff2") format("woff2");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-font);
  background-color: var(--color-bg);
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--color-secondary);
}

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

img.pixel-art,
.pixel-art img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

:root {
  --color-primary: #FF006E;
  --color-secondary: #00D9FF;
  --color-focus: #8B00FF;
  --color-mute: #6B7280;
  --color-font: #1F2937;
  --color-divider: #E5E7EB;
  --color-bg: #F9FAFB;
  --color-codebg: #F3F4F6;
  --color-surface: #F9FAFB;
  --color-surface-offset: rgb(242.88, 244.9, 246.92);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --font-body: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, Arial, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Source Han Sans CN, Source Han Sans SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  --font-title: Product Sans, -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, Arial, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Source Han Sans CN, Source Han Sans SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  --font-mono: MonoLisa, Cascadia Code, SF Mono, Fira Code, Consolas, -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, Arial, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Source Han Sans CN, Source Han Sans SC, Microsoft YaHei, WenQuanYi Micro Hei, monospace;
  --max-width-content: 1200px;
  --max-width-article: 800px;
  --title-logo: url('../images/light/title.png');
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #ff006e;
    --color-secondary: #00f5ff;
    --color-focus: #ff00ff;
    --color-mute: #7a8ba0;
    --color-font: #e0f7fa;
    --color-divider: #2a2f45;
    --color-bg: #0a0e27;
    --color-codebg: #1a1f3a;
    --color-surface: #0a0e27;
    --color-surface-offset: rgb(15.2040816327, 21.2857142857, 59.2959183673);
    --title-logo: url('../images/dark/title.png');
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5, h6 {
  font-size: 1rem;
}

p {
  margin-bottom: var(--space-md);
}

code, pre {
  font-family: var(--font-mono);
  background: var(--color-codebg);
}

code {
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre {
  padding: var(--space-md);
  overflow-x: auto;
  border-radius: 6px;
  margin-bottom: var(--space-md);
}
pre code {
  padding: 0;
  background: transparent;
}

blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  color: var(--color-mute);
  font-style: italic;
}

ul, ol {
  margin-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
}

/* tighten up the margins in docutils-style simple lists */
.article-content ul.simple li p,
.article-content ol.simple li p {
  margin-bottom: 0;
}

/* Simplify MyST/docutils inline literals to look like normal <code> tags */
span.docutils.literal {
  font-family: var(--font-mono);
  background: var(--color-codebg);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  /* Remove the nested span.pre wrapper styling */
}
span.docutils.literal span.pre {
  padding: 0;
  background: transparent;
}

main {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-divider);
}
.section-header h3 {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  main {
    padding: var(--space-lg) var(--space-sm);
  }
}
header {
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  text-align: center;
}

.header-content {
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border: 4px solid var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-primary), 0 8px 16px rgba(138, 162, 211, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.avatar:hover {
  transform: scale(1.05);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.site-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.title-logo {
  background-image: var(--title-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 400px;
  height: 80px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.title-logo:hover {
  transform: scale(1.02);
}

.tagline {
  color: var(--color-mute);
  font-style: italic;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: var(--space-md);
  }
  .title-logo {
    width: 280px;
    height: 56px;
  }
  .avatar {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }
}
nav {
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

nav ul {
  max-width: var(--max-width-content);
  margin: 0 auto;
  list-style: none;
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  justify-content: center;
}

nav li {
  margin: 0;
}

nav a {
  color: var(--color-font);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-weight: 600;
  display: block;
}
nav a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
nav a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (max-width: 768px) {
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
  }
  nav a {
    padding: var(--space-xs);
    font-size: 0.9rem;
  }
}
article {
  margin-bottom: 0;
}

.article-meta {
  color: var(--color-mute);
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}
.article-meta time {
  font-weight: 600;
}
.article-meta .separator {
  color: var(--color-divider);
}
.article-meta a {
  color: var(--color-primary);
  text-decoration: none;
}
.article-meta a:hover {
  text-decoration: underline;
}

.article-content {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}
.article-content p {
  margin-bottom: var(--space-md);
}
.article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}
.article-content img {
  margin: var(--space-lg) 0;
  border-radius: 6px;
}
.article-content figure {
  margin: var(--space-lg) 0;
}
.article-content figure figcaption {
  text-align: center;
  color: var(--color-mute);
  font-size: 0.9rem;
  margin-top: var(--space-xs);
}

.featured-article {
  margin-bottom: var(--space-2xl);
}
.featured-article h2 {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
.featured-article h2 a {
  color: inherit;
  text-decoration: none;
}
.featured-article h2 a:hover {
  color: var(--color-secondary);
}

article > footer {
  margin-top: var(--space-xl);
}

.article-feedback {
  margin-top: var(--space-sm);
  padding-top: 0;
  margin-bottom: 0;
}
.article-feedback h3 {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.article-feedback p {
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.article-feedback a {
  color: var(--color-primary);
  text-decoration: none;
}
.article-feedback a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}
.article-feedback .sc-mastodon {
  font-weight: 600;
}
.article-feedback .comments {
  margin-bottom: 0;
}
.article-feedback .comments p {
  margin-bottom: var(--space-sm);
}

.no-comments p {
  color: var(--color-mute);
}

@media (max-width: 768px) {
  .featured-article h2 {
    font-size: 1.75rem;
  }
  .article-content {
    font-size: 1rem;
  }
}
.admonition {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  padding-left: 4rem;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-surface-offset);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.admonition::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 3.5rem;
  opacity: 0.12;
  color: var(--admonition-color, var(--color-primary));
  pointer-events: none;
  line-height: 1;
}
.admonition .admonition-title {
  margin: 0 0 var(--space-sm) 0;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}
.admonition .admonition-title::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 1.2rem;
  display: inline-block;
  flex-shrink: 0;
}
.admonition p {
  position: relative;
  z-index: 1;
}
.admonition p:last-child {
  margin-bottom: 0;
}
.admonition pre, .admonition code {
  background-color: var(--color-codebg);
  position: relative;
  z-index: 1;
}

.admonition.note {
  --admonition-color: #FF006E;
  border-left-color: var(--admonition-color);
}
.admonition.note::before {
  content: "\f05a";
}
.admonition.note .admonition-title {
  color: var(--admonition-color);
}
.admonition.note .admonition-title::before {
  content: "\f05a";
}

.admonition.warning,
.admonition.caution {
  --admonition-color: #ff9800;
  border-left-color: var(--admonition-color);
}
.admonition.warning::before,
.admonition.caution::before {
  content: "\f071";
}
.admonition.warning .admonition-title,
.admonition.caution .admonition-title {
  color: var(--admonition-color);
}
.admonition.warning .admonition-title::before,
.admonition.caution .admonition-title::before {
  content: "\f071";
}

.admonition.danger,
.admonition.error {
  --admonition-color: #f44336;
  border-left-color: var(--admonition-color);
}
.admonition.danger::before,
.admonition.error::before {
  content: "\f06a";
}
.admonition.danger .admonition-title,
.admonition.error .admonition-title {
  color: var(--admonition-color);
}
.admonition.danger .admonition-title::before,
.admonition.error .admonition-title::before {
  content: "\f06a";
}

.admonition.tip,
.admonition.hint {
  --admonition-color: #4caf50;
  border-left-color: var(--admonition-color);
}
.admonition.tip::before,
.admonition.hint::before {
  content: "\f0eb";
}
.admonition.tip .admonition-title,
.admonition.hint .admonition-title {
  color: var(--admonition-color);
}
.admonition.tip .admonition-title::before,
.admonition.hint .admonition-title::before {
  content: "\f0eb";
}

.admonition.important {
  --admonition-color: #2196f3;
  border-left-color: var(--admonition-color);
}
.admonition.important::before {
  content: "\f06a";
}
.admonition.important .admonition-title {
  color: var(--admonition-color);
}
.admonition.important .admonition-title::before {
  content: "\f06a";
}

.admonition.seealso {
  --admonition-color: #9c27b0;
  border-left-color: var(--admonition-color);
}
.admonition.seealso::before {
  content: "\f35d";
}
.admonition.seealso .admonition-title {
  color: var(--admonition-color);
}
.admonition.seealso .admonition-title::before {
  content: "\f35d";
}

.admonition.attention {
  --admonition-color: #ff5722;
  border-left-color: var(--admonition-color);
}
.admonition.attention::before {
  content: "\f06a";
}
.admonition.attention .admonition-title {
  color: var(--admonition-color);
}
.admonition.attention .admonition-title::before {
  content: "\f06a";
}

@media (prefers-color-scheme: dark) {
  .admonition.note {
    --admonition-color: #ff006e;
  }
  .admonition.warning,
  .admonition.caution {
    --admonition-color: #ffa726;
  }
  .admonition.danger,
  .admonition.error {
    --admonition-color: #ef5350;
  }
  .admonition.tip,
  .admonition.hint {
    --admonition-color: #66bb6a;
  }
  .admonition.important {
    --admonition-color: #42a5f5;
  }
  .admonition.seealso {
    --admonition-color: #ba68c8;
  }
  .admonition.attention {
    --admonition-color: #ff7043;
  }
}
.article-tags,
.post-tags,
.tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  background: var(--color-surface-offset);
  color: var(--color-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  position: relative;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.1s;
}
.tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 2px, transparent 2px), linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary) 2px, transparent 2px), linear-gradient(-90deg, var(--color-secondary) 0%, var(--color-secondary) 2px, transparent 2px), linear-gradient(0deg, var(--color-secondary) 0%, var(--color-secondary) 2px, transparent 2px);
  z-index: -1;
  pointer-events: none;
}
.tag::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  top: -2px;
  left: -2px;
  box-shadow: calc(100% + 4px) 0 0 var(--color-secondary), 0 calc(100% + 4px) 0 var(--color-secondary), calc(100% + 4px) calc(100% + 4px) 0 var(--color-primary);
  pointer-events: none;
}
.tag:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  transform: translate(2px, 2px);
}

.post-card .tag {
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}
.tag-cloud .tag.tag-1 {
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
}
.tag-cloud .tag.tag-2 {
  font-size: 0.8rem;
  padding: 0.18rem 0.7rem;
}
.tag-cloud .tag.tag-3 {
  font-size: 0.85rem;
  padding: 0.2rem 0.8rem;
}
.tag-cloud .tag.tag-4 {
  font-size: 0.9rem;
  padding: 0.22rem 0.85rem;
}

.recent-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .recent-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .recent-posts-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.post-card {
  background: var(--color-surface);
  border: 2px solid var(--color-divider);
  padding: var(--space-md);
  transition: all 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.post-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--color-primary);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(138, 162, 211, 0.2);
}
.post-card:hover::before {
  opacity: 1;
}
.post-card h4 {
  color: var(--color-primary);
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}
.post-card h4 a {
  color: inherit;
  text-decoration: none;
}
.post-card h4 a:hover {
  color: var(--color-secondary);
}
.post-card .meta {
  color: var(--color-mute);
  font-size: 0.8rem;
  margin-bottom: var(--space-sm);
}
.post-card .excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: var(--space-sm);
  color: var(--color-font);
  flex-grow: 1;
}
.post-card .tags {
  margin-top: auto;
}

.photo-gallery {
  margin: 3rem 0;
}
.photo-gallery h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--color-surface);
  background: var(--color-surface);
  transition: all 0.3s ease;
}
.gallery-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: #fff;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

section[id*=gallery] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}
section[id*=gallery] > h1, section[id*=gallery] > h2 {
  grid-column: 1/-1;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
section[id*=gallery] > figure.align-default {
  position: relative;
  margin: 0;
  border: 2px solid var(--color-surface);
  background: var(--color-surface);
  transition: all 0.3s ease;
  overflow: hidden;
}
section[id*=gallery] > figure.align-default:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
section[id*=gallery] > figure.align-default:hover img {
  transform: scale(1.05);
}
section[id*=gallery] > figure.align-default > a.gallery-image {
  display: block;
}
section[id*=gallery] > figure.align-default > a.gallery-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
section[id*=gallery] > figure.align-default figcaption {
  padding: 0.75rem;
  background: var(--color-surface-variant);
}
section[id*=gallery] > figure.align-default figcaption p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
section[id*=gallery] > figure.align-default figcaption p .caption-text {
  color: var(--color-text);
}
section[id*=gallery] > figure.align-default figcaption p .headerlink {
  display: none;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
  }
  .gallery-item img {
    height: 150px;
  }
  section[id*=gallery] {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
  section[id*=gallery] > figure.align-default > a.gallery-image img {
    height: 200px;
  }
}
@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  section[id*=gallery] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  section[id*=gallery] > figure.align-default > a.gallery-image img {
    height: 150px;
  }
}
footer {
  margin-top: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
  background: var(--color-surface);
  border-top: 3px solid var(--color-primary);
}

.footer-content {
  max-width: var(--max-width-content);
  margin: 0 auto;
  text-align: center;
  color: var(--color-mute);
}

.footer-links {
  margin-bottom: var(--space-md);
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.footer-links a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}
.footer-links span {
  color: var(--color-divider);
}

.fa-solid,
.fa-regular,
.fa-brands,
.fa-classic,
.fas,
.far,
.fab,
.fa {
  --_fa-family: var(--fa-family, var(--fa-style-family, 'Font Awesome 7 Free'));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 900);
  line-height: 1;
  text-align: center;
  text-rendering: auto;
  width: var(--fa-width, 1.25em);
}

:is(.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.fa-classic,
.fa)::before {
  content: var(--fa)/"";
}

@supports not (content: ""/"") {
  :is(.fas,
  .far,
  .fab,
  .fa-solid,
  .fa-regular,
  .fa-brands,
  .fa-classic,
  .fa)::before {
    content: var(--fa);
  }
}
/*!
 * Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2025 Fonticons, Inc.
 */
:root, :host {
  --fa-family-classic: 'Font Awesome 7 Free';
  --fa-font-solid: normal 900 1em/1 var(--fa-family-classic);
  /* deprecated: this older custom property will be removed next major release */
  --fa-style-family-classic: var(--fa-family-classic);
}

@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2");
}
.fas {
  --fa-family: var(--fa-family-classic);
  --fa-style: 900;
}

.fa-classic {
  --fa-family: var(--fa-family-classic);
}

.fa-solid {
  --fa-style: 900;
}

.littlefoot {
  --button-background-color:#949494;
  --button-text-color:#fff;
  --button-active-background-color:#3f3f3f;
  --button-active-text-color:#fff;
  --button-border-radius:8px;
  --button-border-radius:0.5rem;
  --button-height:16px;
  --button-height:1rem;
  --button-margin:0 1.6px;
  --button-margin:0 0.1rem;
  --button-padding:0 9.6px;
  --button-padding:0 0.6rem;
  --button-transition:background-color 0.25s ease,color 0.25s ease;
  --popover-background-color:#f5f5f5;
  --popover-text-color:#111;
  --popover-border:1px solid #949494;
  --popover-border-radius:8px;
  --popover-border-radius:0.5rem;
  --popover-max-height:15em;
  --popover-max-width:90%;
  --popover-horizontal-padding:22.4px;
  --popover-horizontal-padding:1.4rem;
  --popover-vertical-padding:9.6px;
  --popover-vertical-padding:0.6rem;
  --popover-shadow:0 0 8px rgba(0,0,0,.302);
  --popover-transform-origin:50% 0;
  --popover-transform:scale(0.1) translateZ(0);
  --popover-active-transform:scale(1) translateZ(0);
  --popover-transition:opacity 0.25s ease,transform 0.25s ease;
  --popover-width:22em;
  --popover-scroll-indicator-color:#3f3f3f;
  --popover-tooltip-size:8px;
  --popover-tooltip-size:0.5rem;
  --popover-z-index:1;
  position: relative;
}

.littlefoot__button {
  background-color: var(--button-background-color);
  border: 0;
  border: var(--button-border, 0);
  border-radius: var(--button-border-radius);
  color: var(--button-text-color);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-size: var(--button-font-size, 12px);
  font-size: 0.75rem;
  font-size: var(--button-font-size, 0.75rem);
  font-weight: 400;
  font-weight: var(--button-font-weight, initial);
  height: var(--button-height);
  margin: var(--button-margin);
  padding: var(--button-padding);
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: var(--button-transition);
  vertical-align: middle;
}

.littlefoot__button.is-active, .littlefoot__button:active, .littlefoot__button:focus, .littlefoot__button:hover {
  background-color: var(--button-active-background-color);
  color: var(--button-active-text-color);
}

.littlefoot__button svg {
  float: left;
  height: 4.8px;
  height: 0.3rem;
}

.littlefoot__popover {
  border: var(--popover-border);
  border-radius: var(--popover-border-radius);
  box-shadow: var(--popover-shadow);
  margin: calc(var(--popover-tooltip-size) + var(--button-height)) 0;
  max-width: var(--popover-max-width);
  position: absolute;
  top: 0;
  transform: var(--popover-transform);
  transform-origin: var(--popover-transform-origin);
  transition: var(--popover-transition);
  width: var(--popover-width);
  z-index: var(--popover-z-index);
}

.littlefoot__popover.is-above {
  bottom: 0;
  top: auto;
}

.littlefoot__popover.is-active {
  transform: var(--popover-active-transform);
}

.littlefoot__wrapper {
  position: relative;
  z-index: var(--popover-z-index);
}

.littlefoot__content, .littlefoot__wrapper {
  border-radius: var(--popover-border-radius);
}

.littlefoot__content {
  -webkit-overflow-scrolling: touch;
  background-color: var(--popover-background-color);
  box-sizing: border-box;
  color: var(--popover-text-color);
  font-family: serif;
  font-family: initial;
  font-family: var(--popover-font-family, initial);
  font-size: medium;
  font-size: var(--popover-font-size, initial);
  font-style: normal;
  font-style: var(--popover-font-style, initial);
  font-weight: 400;
  font-weight: var(--popover-font-weight, initial);
  line-height: normal;
  line-height: var(--popover-line-height, normal);
  max-height: var(--popover-max-height);
  overflow: auto;
  padding: var(--popover-vertical-padding) var(--popover-horizontal-padding);
  width: 100%;
}

.littlefoot__content img {
  max-width: 100%;
}

.littlefoot__content:focus {
  outline: none;
}

.is-scrollable {
  --arrow-x:calc(var(--popover-horizontal-padding)*-1);
  --arrow-y:calc(var(--popover-vertical-padding)/2);
}

.is-scrollable .littlefoot__content:after {
  bottom: 0;
  color: var(--popover-scroll-indicator-color);
  content: "⇣";
  display: block;
  left: 0;
  opacity: 1;
  position: sticky;
  text-align: center;
  transform: translateX(var(--arrow-x)) translateY(var(--arrow-y));
  transition: var(--popover-transition);
  width: var(--popover-horizontal-padding);
}

.is-scrollable.is-fully-scrolled .littlefoot__content:after {
  opacity: 0;
}

.littlefoot__tooltip {
  --tooltip-margin:calc(var(--popover-tooltip-size)*-1);
  background-color: var(--popover-background-color);
  border: var(--popover-border);
  box-shadow: var(--popover-shadow);
  height: calc(var(--popover-tooltip-size) * 2);
  margin-left: var(--tooltip-margin);
  position: absolute;
  transform: rotate(45deg);
  width: calc(var(--popover-tooltip-size) * 2);
}

.is-below .littlefoot__tooltip {
  top: var(--tooltip-margin);
}

.is-above .littlefoot__tooltip {
  bottom: var(--tooltip-margin);
}

@media (max-width: 767.98px) {
  .littlefoot__popover {
    border-radius: 0;
    border-width: 1px 0 0;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0;
    max-width: 100% !important;
    position: fixed;
    right: 0 !important;
    top: auto !important;
    transform: translateY(100%);
    width: 100%;
  }
  .littlefoot__popover.is-active {
    transform: translateY(0);
  }
  .littlefoot__wrapper {
    border-radius: 0;
    max-width: 100% !important;
    transform: none;
  }
  .littlefoot__tooltip {
    display: none;
  }
}
@media not print {
  .littlefoot--print {
    display: none;
  }
}
@media print {
  .littlefoot__button, .littlefoot__popover {
    display: none;
  }
}
.littlefoot {
  --button-background-color: var(--color-primary);
  --button-active-background-color: var(--color-secondary);
  --popover-border: 2px solid var(--color-primary);
  --popover-shadow: 0 0 15px rgba(0, 245, 255, 0.2);
  --popover-background-color: var(--color-bg);
  --popover-text-color: var(--color-font);
  --popover-font-family: var(--font-body);
  --popover-font-size: 1rem;
  --popover-line-height: 1.35rem;
}

@media (prefers-color-scheme: dark) {
  .littlefoot {
    --popover-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
  }
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  transition: transform 0.2s ease;
}
.gallery-item:hover {
  transform: scale(1.02);
}
.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.mfp-bg {
  background: var(--color-bg);
  opacity: 0.95;
}

.mfp-figure figure {
  background: var(--color-surface);
}

.mfp-title {
  color: var(--color-font);
  font-family: var(--font-body);
}

.mfp-arrow:before {
  border-right-color: var(--color-primary);
}
.mfp-arrow:after {
  border-right-color: var(--color-primary);
}

.mfp-arrow-left:before {
  border-right-color: var(--color-primary);
}
.mfp-arrow-left:after {
  border-right-color: var(--color-primary);
}

.mfp-close {
  color: var(--color-primary);
}
.mfp-close:hover {
  color: var(--color-secondary);
}

.mfp-counter {
  color: var(--color-mute);
}

.mfp-title details.mfp-exif-details {
  margin-top: 0.5rem;
}
.mfp-title details.mfp-exif-details summary {
  cursor: pointer;
  color: var(--color-mute);
  font-size: 0.875rem;
  user-select: none;
  transition: color 0.2s ease;
}
.mfp-title details.mfp-exif-details summary:hover {
  color: var(--color-primary);
}
.mfp-title details.mfp-exif-details summary::marker {
  color: var(--color-primary);
}
.mfp-title details.mfp-exif-details small {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-mute);
  font-size: 0.75rem;
  line-height: 1.4;
}

.ftf-dma-note {
  display: block !important;
  pointer-events: all !important;
}

.ftf-dma-note.d-none {
  display: none !important;
  pointer-events: none !important;
}

.ftf-dma-note {
  position: fixed;
  bottom: 5px;
  left: 5px;
  right: 5px;
  z-index: 9999999;
  padding: 0 20px 0;
  text-align: start;
  background: #fff;
  color: #3a3a3a;
  border: 5px solid #3a3a3a;
}

.ftf-dma-note-content-wrapper {
  position: relative;
}

.ftf-dma-note-header {
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: bold;
}

.ftf-dma-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.ftf-dma-close-btn:hover {
  text-decoration: underline;
}

#ftf-dma-note.d-none {
  display: none !important;
}

.recent-posts-heading {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

.archive-link {
  text-align: center;
  margin-top: var(--space-lg);
  color: var(--color-mute);
}

.single-article {
  max-width: var(--max-width-article);
  margin: 0 auto;
}