/* Blog post specific styles */
#main.post .post-title {
  font-family: 'Iowan Old Style BT', Georgia, serif;
  font-weight: 600;
  font-size: 30px;
  max-width: 480px;
  margin: 1.5rem auto 0;
  line-height: 1.4;
}

#main.post .post-subtitle {
  font-family: 'Iowan Old Style BT', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  color: var(--fg4);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-style: italic;
}

#main.post .post-heading {
  text-align: center;
}

#main.post .post-heading .publish-metadata {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--fg3);
  font-size: 15px;
  line-height: 17px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-family: var(--font-sans);
}

#main.post .post-heading .publish-metadata .author {
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.24px;
  color: var(--fg);
  font-family: var(--font-sans);
  text-transform: none;
  display: block;
}

#main.post .post-heading .publish-metadata svg {
  display: inline-block;
  margin: auto;
}

#main.post .post-heading .publish-metadata > span {
  display: inline-block;
  padding-top: 0.6em;
  font-family: var(--font-sans);
}

#main.post article h1 {
  font-family: 'Iowan Old Style BT', Georgia, serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.4;
  text-align: left;
}

/* Post cover image styling */
#main.post .post-cover {
  text-align: center;
  margin: 2rem 0;
}

#main.post .post-cover svg {
  display: block;
  width: 80%;
  max-width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

#main.post .post-cover .cover-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Blog post specific layout adjustments */
#main.post {
  margin-left: auto;
  margin-right: auto;
  max-width: 950px; /* Base width for smaller viewports */
  position: relative;
  /* Shared margin variables for sidenotes and left TOC */
  --sidenote-width: 200px;
  --sidenote-gap: 28px;
  /* Slightly narrower TOC than sidenotes */
  --toc-width: var(--sidenote-width);
  /* Make TOC gap a bit wider than sidenote gap */
  --toc-gap: calc(var(--sidenote-gap) + 6px);
}

/* Increase container width as sidenotes grow */
@media (min-width: 1200px) {
  #main.post {
    max-width: 970px;
    --sidenote-width: 210px;
  }
}

@media (min-width: 1400px) {
  #main.post {
    max-width: 990px;
    --sidenote-width: 220px;
  }
}

@media (min-width: 1600px) {
  #main.post {
    max-width: 1010px;
    --sidenote-width: 250px;
  }
}

@media (min-width: 1800px) {
  #main.post {
    max-width: 1030px;
    --sidenote-width: 280px;
  }
}

/* Center the article content independently */
#main.post article.content {
  margin-left: auto;
  margin-right: auto;
  max-width: 660px;
  position: relative; /* Anchor for absolute-positioned left toc */
  overflow: visible;
}


/* Removed first-word small-caps styling */

/* Counter for figures and sidenotes */
#main.post {
  counter-reset: sidenote-counter figure-counter;
}

/* Sidenotes and margin notes - use float for automatic stacking */
#main.post .sidenote,
#main.post .marginnote {
  float: right;
  clear: right; /* Each note clears previous right-floated elements */
  /* Base values for smaller viewports */
  --sidenote-width: 200px;
  --sidenote-gap: 35px; /* Gap between content and sidenote */
  width: var(--sidenote-width);
  margin-right: calc(-1 * var(--sidenote-width) - var(--sidenote-gap));
  margin-left: var(--sidenote-gap);
  margin-top: 0.3rem;
  margin-bottom: 20px; /* Space between stacked notes */
  font-size: 0.9rem;
  line-height: 1.4;
  vertical-align: baseline;
  position: relative;
}

/* Left margin Table of Contents (TOC) */
#main.post .left-toc {
  position: absolute;
  top: 10px;
  left: calc(-1 * var(--toc-width) - var(--toc-gap));
  width: var(--toc-width);
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--fg2);
}

#main.post .left-toc .toc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#main.post .left-toc .toc-item {
  margin: 0 0 0.25rem 0;
}

#main.post .left-toc a {
  color: var(--fg4);
  text-decoration: none;
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  position: relative;
}

#main.post .left-toc a:hover {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg1) 20%, var(--bg) 20%);
  text-underline-offset: 2px;
}

#main.post .left-toc .toc-level-2 {
  padding-left: 0.75rem;
}

#main.post .left-toc .toc-level-3 {
  padding-left: 1.25rem;
  color: var(--fg4);
}

/* Scale sidenote width based on viewport (now inherited from #main.post) */

#main.post .sidenote-number {
  counter-increment: sidenote-counter;
  pointer-events: none;
}

#main.post .sidenote-number:after,
#main.post .sidenote:before {
  font-family: 'Iowan Old Style BT', Georgia, serif;
  position: relative;
  vertical-align: baseline;
  color: var(--fg4);
}

#main.post .sidenote-number:after {
  content: counter(sidenote-counter);
  font-size: 0.8rem;
  top: -0.5rem;
  left: -0.05rem;
  color: var(--fg4);
}

#main.post .sidenote:before {
  content: counter(sidenote-counter);
  padding-right: 0.2rem;
  font-size: 0.8rem;
  top: -0.4rem;
  left: -0.1rem;
  color: var(--fg4);
}

/* Adjust margin notes in blockquotes - positioned with the new absolute layout */
#main.post blockquote .sidenote,
#main.post blockquote .marginnote {
  /* Blockquotes inherit the dynamic width and positioning */
  text-align: left;
}

/* Figure caption styling - positioned in margin like sidenotes */
#main.post figure {
  position: relative;
  counter-increment: figure-counter;
  /* Clear floats to ensure proper layout */
  overflow: visible;
  /* Ensure figure establishes a block formatting context */
  display: block;
}

/* Very light border variant for specific figures */
#main.post figure.figure-light-border .figure-box {
  border: 1px solid color-mix(in srgb, var(--fg4) 20%, var(--bg) 80%);
  border-radius: 0.2rem; /* match code block radius */
  padding: 0.75rem;
}

#main.post figure figcaption {
  /* Always place captions below figures (not in margin) */
  position: static;
  display: block;
  width: 100%;
  /* Put spacing above the caption (between image and caption),
     and reduce spacing below the caption */
  margin: 0.5rem 0 2rem;
  font-size: 0.9rem;
  line-height: 1.4;
  font-family: 'Iowan Old Style BT', Georgia, serif;
  text-align: left;
  color: var(--fg3);
}

/* Remove previous responsive margin-caption sizing; captions are full-width below figures now */

#main.post figure figcaption:before {
  content: "Figure " counter(figure-counter) ": ";
  font-weight: 600;
  /* color: var(--fg2); */
}

/* Half-width figures: scale contained images to 50% and center */
#main.post figure.half-width img {
  display: block;
  width: 70%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Slightly larger Matmul figures */
#main.post figure.half-width.matmul img {
  width: 90%;
}

/* Prevent image dragging/selection within blog post content */
#main.post article.content img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Prevent list-ending sidenote floats from overlapping following content */
#main.post article.content ol,
#main.post article.content ul {
  /* Establish a new block formatting context so floats inside lists
     (e.g., sidenotes at the end of a list item) are contained and the
     next paragraph starts below them instead of wrapping alongside. */
  display: flow-root;
}

/* Margin note toggle for mobile */
input.margin-toggle {
  display: none;
}

label.sidenote-number {
  display: inline-block;
  max-height: 2rem;
  cursor: pointer;
}

label.margin-toggle:not(.sidenote-number) {
  display: none;
}

/* Canvas styling for JS figures */
#main.post canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Make inline SVGs responsive within post content */
#main.post article.content svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Paginator (prev/next/back to top) — align to content column and use GT America */
#main.post .paginator {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-sans);
  display: flex;                /* Even horizontal distribution */
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  width: 100%              /* Match top nav size */
}

#main.post .paginator a {
  font-family: var(--font-sans) !important;
  color: var(--fg4);
  text-decoration: none;
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  position: relative;
}

#main.post .paginator a:hover {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg1) 20%, var(--bg) 20%);
  text-underline-offset: 2px;
}

/* Ensure back-to-top hover matches prev/next underline styling */
#main.post .paginator #back-to-top:hover {
  color: var(--fg1);
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--fg1) 20%, var(--bg) 20%) !important;
  text-underline-offset: 2px !important;
}

/* Center link should be in the middle cell, not absolutely positioned */
#main.post .paginator #back-to-top {
  position: static;
  left: auto;
  transform: none;
  margin-left: auto;            /* Center the middle link */
  margin-right: auto;
}

/* Mobile responsive adjustments for blog posts only */
@media (max-width: 1170px) {
  #main.post .sidenote,
  #main.post .marginnote {
    /* Show by default on mobile */
    display: block !important;
    position: static; /* Reset absolute positioning */
    width: 95%;
    margin: 1rem 2.5%;
    clear: both;
  }

  /* Hide left TOC on narrow viewports to match margin note behavior */
  #main.post .left-toc {
    display: none;
  }

  /* Override any checkbox-based hiding - always show */
  #main.post .margin-toggle:checked + .sidenote,
  #main.post .margin-toggle:checked + .marginnote,
  #main.post .margin-toggle:not(:checked) + .sidenote,
  #main.post .margin-toggle:not(:checked) + .marginnote {
    display: block !important;
  }

  #main.post .sidenote-number {
    pointer-events: none; /* Disable clicking since notes are expanded by default */
    cursor: default;
  }

  label.margin-toggle:not(.sidenote-number) {
    display: none; /* Hide toggle labels since notes are expanded by default */
  }

  /* Show figure captions below figures on mobile */
  #main.post figure figcaption {
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem;
    color: var(--fg3);
  }

  /* Adjust main content for mobile on blog posts only */
  #main.post {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    max-width: 100%;
  }

  /* Keep content width fixed but center it when sidenotes disappear */
  #main.post article.content,
  #main.post .post-cover {
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 660px);
  }

  /* Reset cover SVG zoom on small screens to avoid overflow */
  #main.post .post-cover svg {
    width: 120%;
    max-width: 120%;
    margin-left: -10%; /* slight overscan for visual impact */
    margin-top: -1rem;
  }
}

/* Tweet embed styling - for custom shortcode */
#main.post .tweet-embed {
  margin: 2rem auto;
  display: flex;
  justify-content: center;
  max-width: 420px !important;
}

#main.post .tweet-embed .twitter-tweet {
  margin: 0 !important;
  max-width: 420px !important;
  width: 420px !important;
}

/* Hugo's built-in twitter/x shortcode styling */
#main.post twitter-widget {
  margin: 2rem auto !important;
  max-width: 420px !important;
  width: 420px !important;
  display: block !important;
}

/* Force Twitter iframe sizing */
#main.post .tweet-embed iframe,
#main.post .twitter-tweet-rendered,
#main.post .twitter-tweet iframe,
#main.post twitter-widget iframe {
  max-width: 420px !important;
  width: 420px !important;
  min-width: auto !important;
  margin: 0 auto !important;
}

/* Override Twitter's default sizing on the container */
#main.post .twitter-tweet {
  max-width: 420px !important;
  width: 420px !important;
  margin: 0 auto 1.8rem !important;
}

/* Direct targeting of Hugo's output */
#main.post > twitter-widget,
#main.post article.content twitter-widget {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}