/* ------------------------------
  Base Reset & Typography
------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* Includes padding & border in element's total width, height */
}

html {
  overflow-y: scroll;  /* Force scrollbar to prevent layout shift when content height changes */
}

@supports (scrollbar-gutter: stable) {
  html {
   overflow-y: auto;  /* Allows auto scrollbars */
   scrollbar-gutter: stable;  /* Reserve space for scrollbar to avoid content shift */
  }
}

html, body {
  height: 100%;  /* Ensure full-height layout for flex-based wrappers */
}

body {
  font-family:
   "Segoe UI",  /* Windows default UI font */
   -apple-system,  /* macOS/iOS San Francisco */
   BlinkMacSystemFont,  /* Chrome on macOS */
   Roboto,  /* Android */
   Oxygen, Ubuntu, Cantarell,  /* Linux */
   "Helvetica Neue", Arial,  /* Older macOS / universal fallback */
   sans-serif;  /* Final generic fallback */
  background-color: #595959;
  color: #333;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
p {
  margin: 0;
}

h2.heading-title {
  margin-top: 0.75em;
  margin-bottom: 1.2em;
}

h2.heading-title-centered {
  text-align: center;
  margin-top: 0.75em;
  margin-bottom: 1.2em;
}

h2.heading-with-subtitle {
  margin-top: 0.75em;
  margin-bottom: 0.2em; /* tighter gap before subtitle */
}

h3.subtitle {
  font-size: 1.05em;
  font-weight: 500;
  margin-top: 0;  /* sits snug under heading */
  margin-bottom: 2em;  /* space before body text */
  color: #666666;
}

p,
.poem {
  font-size: 109%;
  line-height: 1.5;
}

.poem {
  white-space: pre-line;  /* Preserve line breaks in text while collapsing extra spaces */
  margin-top: 0;  /* force no top margin */
  margin-bottom: 1.6em;
}

/* Container for poem with hanging indentation */
.poem-hanging-indents {
  white-space: pre-line;  /* no <br> needed */
  margin-bottom: 1.6em;
  font-size: 109%;
  line-height: 1.5;
}
/* Each line of the poem wrapped in a <span> becomes a block */
.poem-hanging-indents span {
  display: inline-block;  /* each line behaves like its own line */
  padding-left: 1.5em;  /* space for wrapped lines */
  text-indent: -1.5em;  /* pulls first line left, wrapped lines indent */
  width: 100%;
}

.poem-left-centered {
  white-space: pre-line;  /* no <br> needed */
  margin-bottom: 1.6em;  /* spacing below */
  margin-left: 0.25em;  /* or use px value */
  text-align: center;  /* center the lines inside */
  display: inline-block;  /* shrink-wrap to poem width */
}

.poem-centered {
  display: block;  /* full block element */
  text-align: center;  /* center the lines inside */
  white-space: pre-line;  /* no <br> needed */
  margin: 0 auto 1.6em;  /* center the block horizontally + bottom spacing */
  max-width: 40em;  /* optional: keeps very long lines from stretching too wide */
}

/* Ensure custom pagefind elements do not interfere with formatting and act as inline or span only */
pagefind-mytitle,
pagefind-mytxt,
pagefind-mykeywords,
pagefind-myignore {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.search-keywords {
  display: none;
}

/* ------------------------------
  Utility Classes - LIGHT MODE
------------------------------ */
/* Apply to any container that holds or may hold floated elements or floated images */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Spacer element for vertical breathing room (like a <br>) */
spacer {
  display: block;  /* make it take up its own line */
  height: 1.5em;  /* adjust space as needed */
  content: "";  /* not strictly needed, but keeps it clean */
}

/* Make all custom tags behave like inline text by default */
bigger, .bigger,  /* Slightly larger text */
smaller, .smaller,  /* Slightly smaller text */
soft, .soft,  /* Muted gray text */
highlight, .highlight,  /* Warm accent red text */
spread, .spread,  /* Slightly more letter spacing */
tight, .tight,  /* Slightly less letter spacing */
light, .light,  /* Thin/light font weight */
medium, .medium,  /* Semi-bold font weight */
subtle, .subtle,  /* Gentle italic, muted tone */
caps, .caps,  /* Uppercase, spaced letters */
whisper, .whisper,  /* Small, gray, italic aside */
shout, .shout,  /* Bold, uppercase, loud emphasis */
muted, .muted,  /* Very soft gray, almost faded */
accent, .accent {   /* Cool teal accent color */
  display: inline;
}

/* ===== Size Adjustments ===== */
bigger, .bigger   { font-size: 1.1em; }   /* Slightly bigger than surrounding text */
smaller, .smaller { font-size: 0.9em; }   /* Slightly smaller than surrounding text */

/* ===== Color Emphasis ===== */
soft, .soft   { color: #666666; }  /* Muted gray for de-emphasis */
highlight, .highlight { color: #A92B3A; } /* Warm accent red for emphasis */

/* ===== Letter Spacing ===== */
spread, .spread   { letter-spacing: 0.05em; }  /* Slightly more space between letters */
tight, .tight   { letter-spacing: -0.02em; } /* Slightly less space between letters */

/* ===== Weight Adjustments ===== */
light, .light   { font-weight: 300; }   /* Thin/light text weight */
medium, .medium   { font-weight: 500; }   /* Semi-bold text weight */

/* ===== Style Variations ===== */
subtle, .subtle   { font-style: italic; color: #555; }  /* Gentle italic with muted tone */

caps, .caps   { 
  text-transform: uppercase; 
  font-size: 0.95em; 
  letter-spacing: 0.08em; 
}  /* Gentle uppercase with spacing */

/* ===== Extra Fun Tags ===== */
whisper, .whisper { 
  font-size: 0.85em; 
  color: #777; 
  font-style: italic; 
}   /* Looks like a quiet aside */

shout, .shout   { 
  font-size: 1.1em; 
  font-weight: bold; 
  letter-spacing: 0.01em; 
  text-transform: uppercase; 
}   /* Bold, loud emphasis */

muted, .muted   { color: #999; }  /* Very soft gray, almost faded */
accent, .accent   { color: #008b8b; }   /* Cool teal accent color for contrast */

nobr, .nobr {
  white-space: nowrap;  /* Prevents text from wrapping */
  hyphens: none;  /* Disables automatic hyphenation */
}

b, strong { font-weight: bold; }  /* Bold emphasis */
i, em   { font-style: italic; }   /* Italic emphasis */
small   { font-size: smaller; }   /* Smaller text */
strike, s, del { text-decoration: line-through; } /* Strikethrough */
u   { text-decoration: underline; } /* Underline */

mark {
  background-color: #fcefb0;  /* Softened yellow background (highlighting/highlighter) */
  color: inherit;   /* Keep surrounding text color */
  padding: 0.1em 0.2em;   /* Tiny breathing room */
  border-radius: 0.15em;  /* Rounded corners */
}

small-caps, .small-caps {
  font-variant: small-caps;   /* Lowercase shown as small uppercase */
  letter-spacing: 0.01em;
}

small-title, .small-title {
  font-variant: small-caps;   /* Title-like small caps */
  letter-spacing: 0.01em;
}

p.hangingIndent {  /* hanging indents for paragraphs */
  text-indent: -2em;  /* Pull first line left */
  margin: 0 0 0 2em;  /* Indent rest of paragraph */
}

/* ------------------------------
  Page Wrapper - LIGHT MODE
------------------------------ */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* Full viewport height for sticky footer layout */
}

/* ------------------------------
  Header - LIGHT MODE
------------------------------ */
header {
  background-color: #f4f1ee;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;  /* Allow wrapping on small screens */
  gap: 20px;  /* Space between flex items */
}

.logo {
  max-width: clamp(80px, 16.5vw, 100px);  /* min size, scales with xx% of viewport, max size */
  min-width: 80px;  /* optional: match clamp min for consistency */
  height: auto;
  max-height: 100px;
  aspect-ratio: 1 / 1;
}

.logo-title {
  text-decoration: none;  /* remove underline */
  color: inherit;  /* keep text color same as surrounding text */
  display: flex;  /* preserve flex layout */
  align-items: center;  /* vertically center logo and text (changes to flex-start on small screens) */
  gap: 15px;  /* keep spacing between logo and text */
}

@media (max-width: 900px) {
  .logo-title {
   flex-direction: row;  /* keep logo and text side-by-side */
   align-items: flex-start;  /* pin logo to the top of the text block */
   gap: 15px;  /* keep horizontal space between logo and text */
  }
  #tagline { font-size: 0.9rem; /* a touch smaller on mobile */ }
}

.logo-title-text {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center title-tagline block */
}

.logo-title-text h1 {
  margin: 0;
  line-height: 1.2;
}

.logo-title-text #tagline {
  margin-top: 0.25em;  /* Consistent gap between title and tagline */
  line-height: 1.2;
}

header h1 {
  font-size: 1.8rem;
  color: #222;
}

#tagline {
  font-size: 1.04rem;
  font-style: italic;
  color: #666666;
}

/* ------------------------------
  Navigation - LIGHT MODE
------------------------------ */
nav {
  background-color: transparent;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: flex-end;
  gap: 10px;
}

.nav-menu a {
  text-decoration: none;
  color: #3b6f67;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #e8e4e1;        /* subtle button background */
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);  /* tiny shadow for touchability */
  transition: background 0.25s ease, box-shadow 0.25s ease;
  font-size: 110%;
  font-weight: 600;
}

.nav-menu a:hover {
  background-color: #dcd7d3;        /* gentle hover */
  box-shadow: 0 2px 4px rgba(0,0,0,0.16);
}

/* ------------------------------
  Main Content - LIGHT MODE
------------------------------ */
main {
  flex: 1;  /* Push footer down */
  display: flex;
  flex-direction: row;
  padding: 20px;
}

.content-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;  /* Center content horizontally */
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

/* ------------------------------
  Text Column - LIGHT MODE
------------------------------ */
.text-column {
  background-color: #f4f1ee;
  padding: 30px 40px 40px 40px;  /* top, right, bottom, left */
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 715px;
  width: 100%;
}

.text-column::after {
  content: "";
  flex-grow: 1;  /* Fill remaining space so footer stays at bottom on short pages */
}

.text-column .article-heading {
  margin-top: 0.5em;
  margin-bottom: 0.2em;  /* space before date-byline */
}

.text-column .date,
.text-column .byline {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 0.5em;
}

/* -------------------------------------------------------------
  Posts by Date & Lists That Expand+Collapse - LIGHT MODE
--------------------------------------------------------------- */
/* Container spacing */
.link-sections {
  font-size: 105%;
  margin: 0.8em 0;
}

/* Each details block */
.link-sections details {
  margin-bottom: 0.5em;  /* tighter spacing between year groups */
  background-color: #f4f1ee;  /* match site's background style */
  padding: 0.4em 0.8em;  /* reduced padding for compactness */
}

/* Summary headings */
.link-sections summary {
  font-weight: bold;
  cursor: pointer;
}

/* Optional: style the default disclosure arrow */
.link-sections summary::-webkit-details-marker {
  color: #666666;
}

/* List inside each section */
.link-sections ul {
  margin: 0.4em 0 0 0;  /* slightly reduced margins and indent */
  padding-left: 1.85em;  /* bullet-to-text spacing */
  list-style-type: disc;
}

/* Style the bullet itself */
.link-sections li::marker {
  color: #888888;  /* medium gray bullet */
  font-size: 0.95em;  /* slightly smaller than text */
}

.link-sections li {
  margin-bottom: 0.4em;  /* tighter space between list items */
}

/* Link styling */
.link-sections a {
  display: inline-block;  /* allow date to sit next to link; only as wide as the text */
  vertical-align: top;  /* keep bullet aligned with first line of text */
  font-weight: 550;
  color: #25514c;
  text-decoration: none;  /* no underline */
}

.link-sections a:hover {
  color: #ae5448;
  text-decoration: none;  /* no underline */
}

/* Inline date after link */
.link-sections .date-inline {
  margin-left: 0.4em;  /* space between link and date */
  font-size: 0.9em;  /* match .desc size */
  font-style: normal;  /* match .desc style */
  color: #333333;  /* match .desc color */
}

/* Optional description under link */
.link-sections .desc {
  display: block;  /* force onto its own line */
  margin-left: 0.15em;  /* align with link text */
  font-size: 0.9em;  /* slightly smaller */
  font-style: italic;
  color: #555555;
  line-height: 1.4;  /* tighter line height */
}

/* -------------------------
  In-Article Images - LIGHT MODE
-------------------------- */
img {
  max-width: 100%;
  height: auto;
  border-radius: 6px; /* rounded corners */
  display: block;
}

figure {
  margin: 2rem 0;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.4;
  max-width: 60ch;  /* limit caption width to ~60 characters */
  margin-left: auto; /* center caption block if narrower */
  margin-right: auto;
  text-align: center;
}

/* Plain image centered */
.img-centered {
  display: block;
  margin: 2rem auto;  /* center horizontally */
  text-align: center;  /* if used on figure */
}

/* Plain image left-aligned */
.img-left {
  display: block;
  margin: 2rem 0;  /* space above, below */
  text-align: left;
}

/* Plain image right-aligned */
.img-right {
  display: block;
  margin: 2rem 0 2rem auto; /* push it to the right */
}

/* Figure with caption centered */
.figure-centered {
  display: flex;
  flex-direction: column;
  align-items: center;  /* center image horizontally */
  margin: 2rem auto;
  text-align: center;   /* keep caption centered */
  max-width: 100%;
}

.figure-centered img {
  display: block;
  margin: 0 auto;  /* ensure image is centered */
}

/* Figure with caption left-aligned */
.figure-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left-align image */
  margin: 2rem 0;
  text-align: left;  /* caption text left-aligned */
  max-width: 100%;
}

.figure-left img {
  display: block;
  margin: 0;  /* no auto-centering */
}

.figure-left figcaption {
  text-align: left;  /* override global center */
  margin-left: 0;  /* optional: ensure no auto-centering */
  margin-right: 0;
}

.figure-right {
  display: block;
  width: fit-content;  /* shrink to image width */
  margin: 2rem 0 2rem auto;  /* push block to right edge */
  max-width: 100%;  /* don't overflow column */
  text-align: center;  /* center caption under image */
}

.figure-right img {
  display: block;
  height: auto;
  max-width: 100%;  /* responsive scaling */
}

.figure-right figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.4;
}

/* On small screens, ensure images never overflow */
@media (max-width: 600px) {
  img {
   max-width: 100%;
   height: auto;
  }

  figure {
   margin: 1.5rem 0;
  }

  figcaption {
   font-size: 0.8rem;
  }

  /* Responsive override for right-aligned figures */
  .figure-right {
   margin: 1.5rem auto;  /* center figure on small screens */
  }
}

/* ------------------------------
  Post Meta & Extras - LIGHT MODE
------------------------------ */
.post-extra {
  margin-top: 2.5em;
  border-top: 1px solid #ddd;
  font-size: 0.9rem;
  color: #777;
  line-height: 1.5;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.post-meta {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding-top: 1.4em;
  border-top: 1px solid #ddd;
  font-size: 0.875rem;
  color: #333;
  line-height: 1.5;
}

.post-meta p {
  margin: 0.25em 0;  /* margin-top and margin-bottom, margin-left and margin-right */
}

.post-meta .human span,
.post-meta .robot span,
.post-meta .picture span,
.post-meta .dated span,
.post-meta .category span,
.post-meta .tags span, 
.post-meta .notes span {
  color: #333333;
}

.post-meta .human::before {
  content: "☺️ ";
}

.post-meta .robot::before {
  content: "🤖 ";
}

.post-meta .picture::before {
  content: "📸 ";
}

.post-meta .dated::before {
  content: "📅 ";
}

.post-meta .category::before {
  content: "📂 ";
}

.post-meta .tags::before {
  content: "🏷️ ";
}

.post-meta .notes::before {
  content: "📜 ";
}

.post-meta .human::before {
  display: inline-block;
  margin-right: 0.65em;
  filter: grayscale(35%) brightness(70%);  /* Mutes emoji colors */
  opacity: 0.7;
}

.post-meta .robot::before {
  display: inline-block;
  margin-right: 0.65em;
  filter: grayscale(35%) brightness(70%);  /* Mutes emoji colors */
  opacity: 0.7;
}

.post-meta .picture::before {
  display: inline-block;
  margin-right: 0.65em;
  filter: grayscale(35%) brightness(70%);  /* Mutes emoji colors */
  opacity: 0.7;
}

.post-meta .dated::before {
  display: inline-block;
  margin-right: 0.725em;
  filter: grayscale(35%) brightness(70%);  /* Mutes emoji colors */
  opacity: 0.7;
}

.post-meta .category::before,
.post-meta .tags::before,
.post-meta .notes::before {
  display: inline-block;
  margin-right: 0.4em;
  filter: grayscale(25%) brightness(70%);  /* Mutes emoji colors */
  opacity: 0.7;
}

/* ------------------------------
  Sidebar - LIGHT MODE
------------------------------ */
.sidebar {
  width: 295px;
  background-color: #f4f1ee;
  color: #333333;
  padding: 35px 10px 40px 33px;  /* top, right, bottom, left */
  flex-shrink: 0;  /* Prevent sidebar from shrinking on small screens */
}

.sidebar-title {
  font-size: 1.2rem;
  margin-bottom: 0.8em;
  color: #333333;
  border-bottom: 0.5px solid #d3d3d3;
  padding-bottom: 0.5em;
}

/* Sidebar bullet color (light mode only) */
@media (prefers-color-scheme: light) {
  .sidebar ul {
    color: #888888; /* same gray as link-sections bullets */
  }
}

.sidebar a {
  text-decoration: none;
  color: #2f5f58;
}

.sidebar a:hover {
  color: #ae5448;
}

/* ------------------------------
  Back to Top Arrow - LIGHT MODE
------------------------------ */
/* Default: visible for non-JS browsers */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  background: #EFEFED;
  color: #144334;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Back to Top visibility control */
.back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background: #e3e3e3;
}

/* ------------------------------
  Footer - LIGHT MODE
------------------------------ */
footer {
  background-color: #dddddd;
  text-align: center;
  padding: 23px 20px 32px 20px;  /* top, right, bottom, left */
  margin-top: auto;  /* push footer to bottom when content is short */
}

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

.footer a:hover {
  color: #ae5448;
}

/* ------------------------------
  Responsive Design
------------------------------ */
@media (max-width: 900px) {
  /* Stack header elements vertically and left-align them */
  .header-flex {
   flex-direction: column;
   align-items: flex-start;  /* left-align header block */
  }

  .nav-menu{
    flex-wrap: wrap;
    flex-direction: row;  /* horizontal by default */
    justify-content: flex-start;
    margin-top: 10px;
  }

  .nav-menu a{
    width: auto;  /* allow natural size */
    text-align: left;
  }

  /* Stack main content and sidebar vertically */
  .content-wrapper {
   flex-direction: column;
   align-items: center;
   gap: 20px;  /* consistent vertical spacing between stacked items */
  }

  .text-column {
    padding: 25px 35px 35px 35px;  /* top, right, bottom, left of space around body text in main area, on mobile and smaller screens*/
  }

  /* Sidebar matches text column width and is centered */
  .sidebar { width: 100%; max-width: 715px; /* match text-column width */ margin: 16px auto 0 auto !important; /* top spacing only */ padding: 20px 20px !important; }

  .sidebar { padding-bottom: 32px !important; }

  .sidebar-title {
    padding-left: 10px;
  }

  .sidebar ul {
    padding-left: 25px !important;   /* comfortable, matches text column feel */
  }
}

@media (max-width: 900px) {
  /* Unify vertical spacing */
  main {
    padding: 20px 0 !important;   /* consistent top + bottom */
  }

  .content-wrapper {
    gap: 0 !important;            /* remove extra vertical spacing */
  }

  /* Sidebar keeps its own internal padding */
  .sidebar {
    margin-top: 20px;             /* consistent spacing above sidebar */
    margin-bottom: 0;          /* let other element handle this spacing */
  }
}

@media (max-width: 600px) {
  main {
    padding: 16px 0 !important;
  }
  .nav-menu a{
    padding: 6px 10px;
    font-size: 100%;
  }
}

/* ------------------------------
   DARK MODE STYLES
------------------------------ */
@media (prefers-color-scheme: dark) {

  /* Base colors - DARK MODE */
  body {
    background-color: #1a1a19;
    color: #d8d5cf;
  }

  /* Subtitle - DARK MODE */
  .subtitle {
    color: #d0cdc7 !important;
  }

  /* Secondary muted text - DARK MODE */
  #tagline,
  .soft,
  .subtle {
    color: #c4c0ba;
  }

  .whisper,
  .muted {
    color: #9d9892;
  }

  /* Accents - DARK MODE */
  .accent {
    color: #7fa7a0;
  }

  .highlight {
    color: #d97a5c;
  }

  /* Section backgrounds - DARK MODE */
  header,
  footer,
  .sidebar,
  .text-column,
  .link-sections details {
    background-color: #22211f;
  }

  /* Borderless header - DARK MODE */
  header {
    border-bottom: none !important;
  }

  /* Global link colors - DARK MODE */
  a {
    color: #7fa7a0;
  }

  a:hover {
    color: #d97a5c;
  }

  /* Navigation - DARK MODE */
  .nav-menu a {
    background-color: #2c2b29 !important;
    color: #7fa7a0 !important;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
  }

  .nav-menu a:hover {
    background-color: #2c2b29 !important;
    color: #d97a5c !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.55) !important;
  }

  /* Figures - DARK MODE */
  figcaption {
    color: #c4c0ba;
  }

  /* Optional: dark-mode logo swap - DARK MODE */
  .logo-light { display: none; }
  .logo-dark { display: inline; }

  /* Sidebar - DARK MODE */
  .sidebar-title {
    color: #d8d5cf;
    border: none !important;
    background: none !important;
  }

  .sidebar-title::before,
  .sidebar-title::after {
    content: none !important;
    border: none !important;
    background: none !important;
  }

  .sidebar,
  .sidebar li,
  .sidebar .desc,
  .sidebar .date-inline {
    color: #d8d5cf;
  }

  .sidebar a {
    color: #7fa7a0 !important;
  }

  .sidebar a:hover {
    color: #d97a5c !important;
  }

  /* Site title - DARK MODE */
  header h1,
  .logo-title-text h1 {
    color: #e0ddd8;
  }

  /* Link-sections (YEAR lists) - DARK MODE */
  .link-sections summary {
    color: #e0ddd8 !important;
  }

  .link-sections li,
  .link-sections .date-inline,
  .link-sections .desc {
    color: #d8d5cf !important;
  }

  .link-sections a,
  .link-sections li a {
    color: #7fa7a0 !important;
  }

  .link-sections a:hover,
  .link-sections li a:hover {
    color: #d97a5c !important;
  }

  /* Back to Top Arrow - DARK MODE */
.back-to-top {
  background: #2A2A28;
  color: #EFEFED;
  border: 1px solid #444;
}

.back-to-top:hover {
  background: #C0C0C0;
  color: #144334;
}

  /* Footer - DARK MODE */
  footer {
    color: #7fa7a0;
  }

  footer a {
    color: #7fa7a0 !important;
  }

  footer a:hover {
    color: #d97a5c !important;
  }

  /* Post meta - DARK MODE */
  .post-meta,
  .post-meta *,
  .post-extra {
    color: #A7B0A5 !important;
    border-color: #343230 !important;
  }

  .post-meta .human::before,
  .post-meta .robot::before,
  .post-meta .picture::before,
  .post-meta .dated::before,
  .post-meta .category::before,
  .post-meta .tags::before,
  .post-meta .notes::before {
    filter: brightness(0.915) saturate(0.15) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 900px) {
  @media (prefers-color-scheme: dark) {
    footer {
      color: #d8d5cf !important;
    }
    footer a {
      color: #d8d5cf !important;
    }
  }
}

  /* leave one blank line at end of file, below this comment */