/* ========================================
   FONT DECLARATIONS
   ======================================== */

@font-face {
  font-family: 'Minion Variable Concept';
  src: url('mvc-roman.otf.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Minion Variable Concept';
  src: url('mvc-italic.otf.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* ========================================
   LOADING SPINNER & FADE-IN ANIMATION
   ======================================== */

/* Loading overlay that covers the entire screen */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #282A36;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

/* Spinner container */
.spinner {
  position: relative;
  width: 60px;
  height: 60px;
}

/* Animated spinner ring */
.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(206, 206, 206, 0.2);
  border-top: 3px solid #cecece;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Main content wrapper - initially hidden */
.main-content {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

/* Show main content when fonts are loaded */
.main-content.loaded {
  opacity: 1;
}

/* Hide loading overlay when fonts are loaded */
.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Light mode spinner colors */
@media (prefers-color-scheme: light) {
  .loading-overlay {
    background-color: #f3f4f6;
  }

  .spinner-ring {
    border: 3px solid rgba(31, 41, 55, 0.2);
    border-top: 3px solid #1f2937;
  }
}

/* Dark mode spinner colors */
@media (prefers-color-scheme: dark) {
  .loading-overlay {
    background-color: #1a1a1a;
  }

  .spinner-ring {
    border: 3px solid rgba(248, 248, 242, 0.2);
    border-top: 3px solid #f8f8f2;
  }
}

/* ========================================
   UNIVERSAL RESETS & BASE STYLES
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  font-family: "Minion Variable Concept", "Apple Garamond", "Baskerville", "Libre Baskerville", "Droid Serif", "Times New Roman", "Times", serif, "Noto Emoji", "Quivira";
  font-display: swap;
  height: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always;
  /* Non-standard but supported */
  font-synthesis: none;
  hanging-punctuation: first allow-end last;
  margin: 0 auto;
  max-width: 79ch;
  padding: 1.5ch;
  display: flex;
  flex-direction: column;
  text-align: justify;
  line-height: 1.4rem;
  word-break: normal;
  overflow-wrap: anywhere;
  overflow-wrap: break-word;
  font-kerning: normal;
  -webkit-font-kerning: normal;
  font-feature-settings: "liga", "clig", "kern", "tnum";
  font-stretch: normal;
  hanging-punctuation: first;
  color: #cecece;
  background-color: #282A36;
  font-variation-settings: 'opsz' 26;
}

html,
body {
  height: 100%;
}

html:focus-within {
  scroll-behavior: smooth;
}

body>main {
  flex: 1;
  counter-reset: h2;
}

/* ========================================
   TUFTE TYPOGRAPHY & HEADINGS
   ======================================== */
h1 {
  font-weight: 600;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  line-height: 1.25;
  text-align: left;
}

h2 {
  font-style: italic;
  font-weight: 400;
  margin-top: 2.3rem;
  margin-bottom: 1.4rem;
  font-size: 1.5rem;
  line-height: 1.15;
  text-align: left;
}

h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 1.2rem;
  line-height: 1.15;
  text-align: left;
}

h4 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  margin-top: 1.8rem;
  margin-bottom: 1.15rem;
  line-height: 1.15;
  text-align: left;
}

h5 {
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  margin-top: 1.6rem;
  margin-bottom: 1rem;
  line-height: 1.15;
  text-align: left;
}

h6 {
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
  margin-top: 1.4rem;
  margin-bottom: 0.8rem;
  line-height: 1.15;
  text-align: left;
}

/* Remove automatic numbering - Tufte prefers clean headings */
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  display: none;
}

subtitle {
  font-style: italic;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  display: block;
  line-height: 1;
}

/* Drop cap styling */
.drop-cap:not(blockquote .drop-cap)::first-letter {
  color: #e96262;
  font-size: 5.15rem;
  float: left;
  padding-right: 0.2ch;
  padding-top: 1.41rem;
  font-variation-settings: 'wght' 600;
  text-transform: uppercase;
  font-family: "Minion Variable Concept", serif;
  font-weight: normal;
}

.drop-cap .first-three-words {
  text-transform: lowercase;
  font-family: "Minion Variable Concept", serif;
  font-variant: small-caps;
  font-weight: normal;
  letter-spacing: 0.05rem;
}

/* ========================================
   PARAGRAPHS & TEXT ELEMENTS
   ======================================== */

p {
  margin-bottom: 1rem;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Bold elements using font-variation-settings */
strong,
b,
.bold {
  font-variation-settings: 'wght' 600;
  font-weight: 600;
  /* Fallback for non-variable fonts */
}

p:has(time) {
  text-align: left;
}

blockquote {
  padding: 0rem 3ch;
  border-left: 3px solid #e2e8f0;
  margin: 1rem 0;
}

/* ========================================
   LINKS & ANIMATIONS
   ======================================== */

@keyframes pulseGlow {
  0% {
    text-shadow: 0 0 2px currentColor;
  }

  50% {
    text-shadow: 0 0 6px currentColor;
  }

  100% {
    text-shadow: 0 0 2px currentColor;
  }
}

a,
a:visited {
  color: inherit;
  text-decoration: none;
  transition: text-shadow 0.3s ease;
}

a:hover,
a:focus {
  color: inherit;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* ========================================
   LISTS
   ======================================== */
ul,
ol {
  list-style: none;
  padding-left: 0;
}

ul,
ol {
  margin-left: 2ch;
  margin-right: 2ch;
  margin-bottom: 1rem;
}

li {
  text-align: left;
}

li span {
  display: inline;
}

li time {
  font-style: normal;
  margin-right: 2ch;
}

/* Blog post lists */
ul.embedded.blog-posts>li {
  list-style: none;
  margin: 1rem 2ch;
  display: flex;
  align-items: baseline;
  gap: 1ch;
}

ul.embedded.blog-posts>li>span:has(time) {
  min-width: 22ch;
}

ul.embedded.blog-posts>time[datetime] {
  display: block;
  margin: 1rem 0;
}

.post-content ol>li {
  margin-bottom: 0.5rem;
}

/* .post-content p {
  hyphens: auto;
} */

/* ========================================
   NAVIGATION & LAYOUT SECTIONS
   ======================================== */

nav {
  text-align: left;
  line-height: 1.5rem;
  border-bottom: 1px solid #222;
}

nav a:not(:last-child) {
  margin-right: 1ch;
}

header {
  padding: 1ch 0rem;
}

header>a>h1 {
  margin-top: 0;
}

footer {
  font-size: 0.8rem;
  color: #718096;
  margin-top: 3rem;
}

.copyright {
  text-align: center;
}

/* ========================================
   MEDIA ELEMENTS
   ======================================== */

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

input,
button,
textarea,
select {
  font: inherit;
}

.upvote-button {
  background: none;
  border: none;
  padding: 0.5ch 1ch;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  color: inherit;
  font-family: 'Linux Libertine O', serif;
  font-size: 0.9rem;
  line-height: 1;
  text-align: left;
  transition: transform 0.1s ease-in-out;
}

.upvote-button:hover,
.upvote-button:focus {
  transform: scale(1.05);
  outline: none;
  color: #2b6cb0;
}

.upvote-button:active {
  transform: scale(0.98);
}

.upvote-button svg {
  stroke: currentColor;
  width: 1.2rem;
  height: 1.2rem;
}

.upvote-button .upvote-count {
  font-size: 0.85rem;
  line-height: 1;
}

/* ========================================
   TABLES
   ======================================== */

table {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

table td,
table th {
  padding: 1rem 1ch;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

/* ========================================
   footnote
   ======================================== */

sup,
.footnote-ref {
  margin: 0;
  padding: 0;
}

.footnote-ref {
  font-size: 0.8rem;
  /* Smaller than base font */
  /* Keeps it raised like a superscript */
  line-height: 0;
  /* Prevents extra line-height impact */
}

sup {
  line-height: 0;
  /* Prevent superscript from affecting line height */
}

sup.footnote-ref a {
  text-decoration: none;
  color: #4a5568;
}

.footnote {
  font-size: 1rem;
  margin-top: 1rem;
  padding-top: 2rem;
}

#footnote-tooltip {
  position: fixed;
  max-width: 400px;
  background: #282A36;
  border: 1px solid #ccc;
  padding: 0.75rem;
  font-size: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  color: inherit;
  pointer-events: none;
  text-align: left;
}

/* Specific styles for footnote list - override global list styles */
.footnote ul,
ol {
  list-style: decimal;
  padding-left: 2ch;
  margin-left: 0ch;
  margin-right: 0;
  margin-bottom: 1rem;
}

.footnote ol>li {
  margin-bottom: 0.75rem;
  text-align: left;
  line-height: 1.4;
  white-space: normal;
  /* Ensure normal wrapping */
  overflow-wrap: anywhere;
  /* Break anywhere if needed */
  word-break: break-word;
  /* Fallback for older browsers */
}

.footnote ol>li::before {
  content: none;
  /* Remove global dash styling */
}

.footnote ol {
  padding-top: 1rem;
}

.footnote li p {
  display: inline;
  margin: 0;
}

.footnote a.footnote {
  text-decoration: none;
  font-size: 0.8rem;
  margin-left: 0.25ch;
  color: #4a5568;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

html:not(:has(meta[property="og:type"][content="article"])) .translate {
  display: none;
}

html:not(:has(meta[property="og:type"][content="article"])) h2::before {
  display: none;
}

html:not(:has(meta[property="og:type"][content="article"])) h3::before {
  display: none;
}

html:not(:has(meta[property="og:type"][content="article"])) h4::before {
  display: none;
}

/* ========================================
   RESPONSIVE & ACCESSIBILITY
   ======================================== */

@media screen and (min-width: 768px) {
  /* Placeholder for desktop-specific styles */
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}

/* ========================================
   POST NAVIGATION
   ======================================== */

.post-navigation {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2ch;
  margin-bottom: 1rem;
}

.nav-previous,
.nav-next {
  flex: 1;
}

.nav-previous {
  text-align: left;
}

.nav-next {
  text-align: right;
}

.post-navigation a {
  display: inline-block;
  padding: 0.5rem 1ch;
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 100%;
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}

.post-navigation a:hover {
  color: inherit;
  text-shadow: 0 0 4px currentColor;
}

/* Responsive navigation */
@media screen and (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-previous,
  .nav-next {
    text-align: center;
    width: 100%;
  }
}

/* ========================================
   CODE BLOCKS & SYNTAX HIGHLIGHTING
   ======================================== */

.codehilite {
  background-color: #1e1e1e;
  color: #d4d4d4;
  border-radius: 6px;
  border: 1px solid #30363d;
  margin: 1.5rem 0;
  overflow: hidden;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  position: relative;
}

.codehilite code {
  display: block;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  white-space: pre;
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  margin: 0;
}

/* Inline code styling */
code:not(.codehilite code) {
  background-color: rgba(110, 118, 129, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 400;
  border: 1px solid rgba(110, 118, 129, 0.2);
}

/* Remove font ligatures and features for code */
.codehilite,
.codehilite *,
code {
  font-variant-ligatures: none;
  font-feature-settings: normal;
  -webkit-font-feature-settings: normal;
}

/* Syntax highlighting tokens */
.codehilite .nb {
  color: #569cd6;
}

/* Built-ins */
.codehilite .nv {
  color: #9cdcfe;
}

/* Variables */
.codehilite .k {
  color: #c586c0;
}

/* Keywords */
.codehilite .kn {
  color: #c586c0;
}

/* Keyword namespace */
.codehilite .kd {
  color: #c586c0;
}

/* Keyword declaration */
.codehilite .s2 {
  color: #ce9178;
}

/* String literals */
.codehilite .s1 {
  color: #ce9178;
}

/* String literals */
.codehilite .s {
  color: #ce9178;
}

/* Strings */
.codehilite .o {
  color: #d4d4d4;
}

/* Operators */
.codehilite .w {
  color: inherit;
}

/* Whitespace */
.codehilite .m {
  color: #b5cea8;
}

/* Numbers */
.codehilite .mi {
  color: #b5cea8;
}

/* Integer literals */
.codehilite .mf {
  color: #b5cea8;
}

/* Float literals */
.codehilite .c1 {
  color: #6a9955;
  font-style: italic;
}

/* Comments */
.codehilite .c {
  color: #6a9955;
  font-style: italic;
}

/* Comments */
.codehilite .cm {
  color: #6a9955;
  font-style: italic;
}

/* Multi-line comments */
.codehilite .p {
  color: #d4d4d4;
}

/* Punctuation */
.codehilite .si {
  color: #dcdcaa;
}

/* String interpolation */
.codehilite .n {
  color: #9cdcfe;
}

/* Names */
.codehilite .na {
  color: #92c5f8;
}

/* Attribute names */
.codehilite .nc {
  color: #4ec9b0;
}

/* Class names */
.codehilite .nf {
  color: #dcdcaa;
}

/* Function names */
.codehilite .nt {
  color: #569cd6;
}

/* Tags */

/* Shell/terminal specific styling */
.codehilite .gp {
  color: #6a9955;
  font-weight: bold;
}

/* Generic prompt */
.codehilite .go {
  color: #d4d4d4;
}

/* Generic output */

/* ========================================
   LIGHT & DARK MODE BASED ON SYSTEM PREF
   ======================================== */

@media (prefers-color-scheme: light) {
  body {
    background-color: #f3f4f6;
    color: #1f2937;
  }

  blockquote {
    border-left-color: #d1d5db;
  }

  nav {
    border-bottom-color: #d1d5db;
  }

  footer {
    color: #4b5563;
  }

  .status ul.embedded.blog-posts>li {
    border-color: #d1d5db;
    background-color: #ffffff;
  }

  .codehilite {
    background-color: #f8f9fa;
    border-color: #e5e7eb;
    color: #24292f;
  }

  .codehilite .nb {
    color: #0969da;
  }

  /* Built-ins */
  .codehilite .nv {
    color: #953800;
  }

  /* Variables */
  .codehilite .k {
    color: #cf222e;
  }

  /* Keywords */
  .codehilite .kn {
    color: #cf222e;
  }

  /* Keyword namespace */
  .codehilite .kd {
    color: #cf222e;
  }

  /* Keyword declaration */
  .codehilite .s2,
  .codehilite .s1,
  .codehilite .s {
    color: #0a3069;
  }

  /* Strings */
  .codehilite .o {
    color: #24292f;
  }

  /* Operators */
  .codehilite .m,
  .codehilite .mi,
  .codehilite .mf {
    color: #0550ae;
  }

  /* Numbers */
  .codehilite .c1,
  .codehilite .c,
  .codehilite .cm {
    color: #6e7781;
    font-style: italic;
  }

  /* Comments */
  .codehilite .p {
    color: #24292f;
  }

  /* Punctuation */
  .codehilite .si {
    color: #0550ae;
  }

  /* String interpolation */
  .codehilite .n {
    color: #953800;
  }

  /* Names */
  .codehilite .na {
    color: #0969da;
  }

  /* Attribute names */
  .codehilite .nc {
    color: #8250df;
  }

  /* Class names */
  .codehilite .nf {
    color: #8250df;
  }

  /* Function names */
  .codehilite .nt {
    color: #116329;
  }

  /* Tags */
  .codehilite .gp {
    color: #0969da;
    font-weight: bold;
  }

  /* Generic prompt */
  .codehilite .go {
    color: #24292f;
  }

  /* Generic output */

  code:not(.codehilite code) {
    background-color: rgba(175, 184, 193, 0.2);
    border-color: rgba(175, 184, 193, 0.4);
    color: #24292f;
  }

  sup.footnote-ref a,
  .footnote a.footnote {
    color: #6b7280;
  }

  .post-navigation {
    border-top-color: #d1d5db;
  }

  /* Typst Gallery Light Mode */
  .gallery-item {
    background-color: white;
    border-color: #ddd;
  }

  .gallery-item-title {
    color: #1f2937;
  }

  .gallery-link.source-link {
    color: #1f2937;
    border-color: #ddd;
  }

  .gallery-link.source-link:hover {
    background-color: #f3f4f6;
    color: #1f2937;
  }

  .gallery-empty {
    color: #666;
  }

  .thumbnail-container {
    background-color: #f8f9fa;
  }

  .thumbnail-fallback {
    background-color: #f8f9fa;
  }

  .thumbnail-icon,
  .thumbnail-title {
    color: #495057;
  }

  .thumbnail-message {
    color: #6c757d;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f8f8f2;
  }

  nav {
    border-bottom-color: #303030;
  }

  blockquote {
    color: #f8f8f2;
    border-left-color: #3a3a3a;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #ffffff;
  }

  h2::before,
  h3::before,
  h4::before {
    color: #b3b3b3;
  }

  body>main>p:nth-of-type(2)::first-letter {
    color: #e96262;
  }

  ol>li::before,
  li time {
    color: #b3b3b3;
  }

  footer {
    color: #b3b3b3;
  }

  .upvote-button:hover,
  .upvote-button:focus {
    color: #facc15;
  }

  sup.footnote-ref a,
  .footnote a.footnote {
    color: #b3b3b3;
  }

  .status ul.embedded.blog-posts>li {
    border-color: #3a3a3a;
    background-color: #111111;
  }

  .footnote {
    border-top-color: #3a3a3a;
  }

  table td,
  table th {
    border-bottom-color: #3a3a3a;
  }

  .codehilite {
    border-color: #3a3a3a;
  }

  .post-navigation {
    border-top-color: #3a3a3a;
  }
}

code {
  font-size: 0.8rem;
  font-family: 'Share-TechMono', monospace;
}

/* ========================================
   TYPST GALLERY STYLES
   ======================================== */

.gallery-container {
  margin-top: 2rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.gallery-item {
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1e1e1e;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.thumbnail-container {
  width: 100%;
  aspect-ratio: 210 / 297;
  /* A4 paper ratio (width/height) */
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.thumbnail-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 1rem;
  background-color: #f5f5f5;
}

.thumbnail-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  opacity: 0.7;
  color: #666;
}

.thumbnail-title {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.thumbnail-message {
  font-size: 0.75rem;
  color: #888;
  font-style: italic;
}

.gallery-item-info {
  padding: 1rem;
}

.gallery-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #cecece;
}

.gallery-item-links {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
}

.gallery-link {
  padding: 0.5rem 1rem;
  border: 1px solid #555;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.gallery-link.pdf-link {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}

.gallery-link.pdf-link:hover {
  background-color: #c82333;
  border-color: #c82333;
  transform: translateY(-1px);
}

.gallery-link.source-link {
  background-color: transparent;
  color: #cecece;
  border-color: #555;
}

.gallery-link.source-link:hover {
  background-color: #555;
  color: white;
  transform: translateY(-1px);
}

.gallery-empty {
  text-align: center;
  padding: 3rem;
  color: #888;
  font-style: italic;
}

.gallery-intro {
  margin-bottom: 2rem;
}

/* Blog post list styles - specific to post-date and post-title classes */
ul li {
  display: list-item;
  align-items: baseline;
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

ul {
  list-style: disc;
}

ul li:last-child {
  border-bottom: none;
}

.post-date {
  flex-shrink: 0;
  min-width: 5rem;
}

.post-title {
  flex: 1;
}

.post-title a {
  text-decoration: none;
  line-height: 1.3;
}

.post-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

/* Responsive design for smaller screens */
@media (max-width: 640px) {
  ul li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .post-date {
    min-width: auto;
  }
}

.post-list-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.post-list-table td {
  padding: 0.3rem 0;
  vertical-align: top;
  border: none !important;
}

.post-list-table .post-date {
  width: 160px;
  padding-right: 2ch;
  white-space: nowrap;
  text-align: left;
}

.post-list-table .post-title a {
  font-weight: 600;
  font-variation-settings: "wght" 600;
}