/* ===== Blog/Projects Styles — Camera-Ready Paper Look ===== */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Computer Modern Serif', Georgia, serif;
  background: #e8e5df;
  color: #1a1a1a;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* Paper sheet: centered white strip */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: max(10px, calc(50% - 530px));
  width: min(1060px, calc(100% - 20px));
  height: 100%;
  background: #fefefe;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08), 0 0 3px rgba(0, 0, 0, 0.04);
  z-index: -1;
  pointer-events: none;
}

/* ===== Running Header ===== */
.running-header {
  max-width: 1050px;
  margin: 0 auto;
  padding: 1.2rem 0 0.4rem 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(calc(10px + 0.8rem), 1fr)
    min(650px, calc(100% - 20px - 1.6rem))
    minmax(calc(10px + 0.8rem), 1fr);
}

.running-header .header-inner {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 0.6pt solid #bbb;
  padding-bottom: 0.45rem;
  font-variant: small-caps;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: #666;
}

.running-header .header-inner a {
  color: #666;
  text-decoration: none;
}

.running-header .header-inner a:hover {
  color: #c0392b;
}

.running-header .nav-links {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.running-header .nav-links a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}

.running-header .nav-links a:hover,
.running-header .nav-links a.active {
  color: #c0392b;
}

.running-header .nav-links .sep {
  color: #bbb;
}

/* ===== Content Column ===== */
.content-column {
  max-width: 650px;
  margin: 0 auto;
  padding: 0 0.8rem;
}

/* ===== Blog Index ===== */
.blog-header {
  text-align: center;
  padding: 2.2rem 0 1rem 0;
}

.blog-header h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  margin-bottom: 0.3rem;
  line-height: 1.15;
}

.blog-header .subtitle {
  font-style: italic;
  font-size: 1.05rem;
  color: #444;
}

/* ===== Post List ===== */
.post-list {
  list-style: none;
  padding: 0;
}

/* Hide placeholder when real items exist */
.empty-placeholder { list-style: none; }
.post-item ~ .empty-placeholder { display: none; }
.empty-placeholder ~ .post-item + .empty-placeholder { display: none; }

.post-item {
  padding: 1.5rem 0;
  border-bottom: 0.4pt solid #ddd;
}

.post-item:last-child {
  border-bottom: none;
}

.post-item .post-date {
  font-size: 0.82rem;
  color: #888;
  margin-bottom: 0.25rem;
}

.post-item .post-title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.3rem;
}

/* Hand-drawn doodles before post titles */
.post-item .post-title {
  position: relative;
}

.post-item .post-title::before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  right: calc(100% + 0.3em);
  top: 0.25em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}

/* Check mark */
.post-item:nth-child(6n+1) .post-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4,13 C5.5,14 7,16.5 9,19 C12,13 16,8 21,4' fill='none' stroke='%23c0392b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Asterisk */
.post-item:nth-child(6n+2) .post-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,3.5 C12.5,8 11.5,16 12.5,21' fill='none' stroke='%23c0392b' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4,7 C8,10 16,14 20.5,17' fill='none' stroke='%23c0392b' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M20,7.5 C16,10 8,14 4,17.5' fill='none' stroke='%23c0392b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Spiral */
.post-item:nth-child(6n+3) .post-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,12 C12,10 14,8 16,9 C18,10 18,13 16,15 C13,18 8,17 7,13 C5.5,8 9,4 14,4 C19.5,4 22,9 21,14' fill='none' stroke='%23c0392b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Arrow (horizontal) */
.post-item:nth-child(6n+4) .post-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,13 C6,11.5 10,13.5 14,12 C16,11.5 18,12.5 20,12' fill='none' stroke='%23c0392b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M15.5,8 C17,10 19,11 20.5,12 C18.5,13 17,14.5 15,16' fill='none' stroke='%23c0392b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Hyphen / dash */
.post-item:nth-child(6n+5) .post-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4,12 C8,11 12,13.5 20,12' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Box */
.post-item:nth-child(6n+6) .post-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5,4.5 C9,4 15,4.5 19.5,5 C19,8 20,14 19,19.5 C15,19 9,20 4.5,19 C5,15 4.5,9 5,4.5' fill='none' stroke='%23c0392b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.post-item .post-title a {
  color: #1a1a1a;
  text-decoration: none;
  padding: 0.05em 0.15em;
  margin: 0 -0.15em;
  border-radius: 2px;
  transition: color 0.2s;
}

/* Pseudo-random ink underlines on post titles, stable across reloads */
/* Red ink underline */
.post-item:nth-child(4n+1) .post-title a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6' preserveAspectRatio='none'%3E%3Cpath d='M0,4 C8,2.5 16,5 28,3 C40,1 55,4.5 70,3.5 C85,2.5 100,5 118,3 C136,1 155,4.5 172,3 C189,1.5 196,4 200,3' stroke='%23c0392b' stroke-width='1.3' fill='none' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom 1px left;
  background-size: auto 5px;
  padding-bottom: 3px;
}

/* Blue ink underline */
.post-item:nth-child(4n+2) .post-title a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6' preserveAspectRatio='none'%3E%3Cpath d='M0,3.5 C10,5 22,2 38,4 C52,2 68,4.5 82,3 C98,1.5 112,4.5 130,3.5 C148,2 165,5 180,3 C192,1.5 198,3.5 200,3' stroke='%234169E1' stroke-width='1.3' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom 1px left;
  background-size: auto 5px;
  padding-bottom: 3px;
}

/* Green ink underline */
.post-item:nth-child(4n+3) .post-title a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 C12,5 24,2 40,3.5 C56,5 70,2 88,4 C104,2.5 120,4.5 140,3 C158,1.5 175,4.5 190,3 C196,2 200,3.5 200,3' stroke='%232e7d32' stroke-width='1.3' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom 1px left;
  background-size: auto 5px;
  padding-bottom: 3px;
}

/* Purple ink underline */
.post-item:nth-child(4n+4) .post-title a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6' preserveAspectRatio='none'%3E%3Cpath d='M0,4.5 C14,2 26,5 42,3 C58,1.5 72,4 90,3.5 C106,3 122,5 138,2.5 C156,4 170,2 186,4 C194,3 200,2.5 200,3' stroke='%236a3580' stroke-width='1.3' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom 1px left;
  background-size: auto 5px;
  padding-bottom: 3px;
}

.post-item .post-title a:hover {
  color: #c0392b;
}

.post-item .post-excerpt {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.post-item .read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 0.6pt solid #999;
  transition: color 0.2s, border-color 0.2s;
}

.post-item .read-more:hover {
  color: #c0392b;
  border-color: #c0392b;
}

.post-item .read-more .arrow {
  font-size: 0.85em;
}

/* ===== Tags ===== */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.tag {
  font-family: 'Caveat', cursive;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.05em 0.25em;
  color: #4169E1;
  border: none;
}


/* ===== Single Post ===== */
.post-hero {
  text-align: center;
  padding: 2.2rem 0 1rem 0;
}

.post-hero .post-date {
  font-size: 0.82rem;
  color: #888;
  margin-bottom: 0.5rem;
}

.post-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.post-hero .post-subtitle {
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #333;
}

.post-hero .post-authors {
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.4rem;
}

.post-hero .post-authors a {
  color: #555;
  text-decoration: none;
  border-bottom: 0.6pt solid #999;
  transition: color 0.2s, border-color 0.2s;
}

.post-hero .post-authors a:hover {
  color: #c0392b;
  border-color: #c0392b;
}

/* ===== Post Content ===== */
.post-content {
  padding-bottom: 2rem;
}

.post-content p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin-bottom: 0.85rem;
}

.post-content h2 {
  font-size: 1.55rem;
  font-weight: 600;
  margin: 2rem 0 0.7rem 0;
  padding-top: 0.5rem;
  border-top: 0.4pt solid #ccc;
  letter-spacing: 0.01em;
}

.post-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.3rem 0 0.6rem 0;
  font-style: italic;
}

.post-content a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 0.6pt solid #999;
  transition: color 0.2s, border-color 0.2s;
}

.post-content a:hover {
  color: #c0392b;
  border-color: #c0392b;
}

.post-content blockquote {
  border-left: 2pt solid #ccc;
  padding: 0.1rem 0 0.1rem 1.2rem;
  margin: 1.5rem 0;
  color: #555;
  font-style: italic;
}

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

.post-content code {
  font-family: 'Computer Modern Typewriter', 'Courier New', monospace;
  font-size: 0.88em;
  background: #f5f5f5;
  padding: 0.1em 0.35em;
  border: 0.4pt solid #ddd;
}

.post-content pre,
.post-content .highlight {
  background: #f5f5f5;
  border: 0.4pt solid #ddd;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 1.2rem 0;
  font-size: 0.85rem;
  line-height: 1.55;
}

.post-content .highlight pre {
  background: none;
  padding: 0;
  margin: 0;
  border: none;
}

.post-content pre code {
  background: none;
  padding: 0;
  border: none;
  font-size: inherit;
}

.post-content img {
  max-width: 100%;
  border: 0.6pt solid #bbb;
  margin: 1.2rem 0;
}

.post-content ul, .post-content ol {
  margin: 0 0 0.85rem 1.5rem;
}

.post-content li {
  margin-bottom: 0.25rem;
}

.post-content hr {
  border: none;
  border-top: 0.4pt solid #ccc;
  margin: 2rem 0;
}

/* ===== Video Embed ===== */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 1.8rem 0;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
}

/* ===== Post Footer ===== */
.post-footer {
  border-top: 0.4pt solid #ccc;
  padding: 1rem 0 3rem;
  margin-top: 1rem;
}

.post-footer .back-link {
  font-size: 0.88rem;
  color: #666;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s;
}

.post-footer .back-link:hover {
  color: #c0392b;
}

/* ===== Page Footer ===== */
.page-footer {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0.5rem 0 1.5rem 0;
  display: grid;
  grid-template-columns:
    minmax(calc(10px + 0.8rem), 1fr)
    min(650px, calc(100% - 20px - 1.6rem))
    minmax(calc(10px + 0.8rem), 1fr);
}

.page-footer .footer-inner {
  grid-column: 2;
  border-top: 0.6pt solid #bbb;
  padding-top: 0.45rem;
  font-size: 0.82rem;
  color: #888;
  text-align: center;
}

.footer-nav {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.footer-nav a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #c0392b;
}

.footer-nav .sep {
  color: #bbb;
  margin: 0 0.15rem;
}

/* ===== Project Page ===== */
.project-hero {
  text-align: center;
  padding: 2.2rem 0 1rem 0;
}

.project-hero h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.project-hero .project-subtitle {
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #333;
  margin-bottom: 0.2rem;
}

.project-hero .project-collab {
  font-size: 0.92rem;
  color: #666;
  margin-bottom: 0.4rem;
}

.project-hero .project-collab a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 0.6pt solid #999;
  transition: color 0.2s, border-color 0.2s;
}

.project-hero .project-collab a:hover {
  color: #c0392b;
  border-color: #c0392b;
}

.project-status {
  display: inline-block;
  font-size: 0.72rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.5rem;
  border: 0.4pt solid #ccc;
  color: #666;
  margin-bottom: 0.6rem;
}

.status-active {
  border-color: #2e7d32;
  color: #2e7d32;
}

.project-resources {
  border-top: 0.4pt solid #ccc;
  padding: 1rem 0;
  margin-top: 1.5rem;
}

.project-resources h2 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}

.project-resources ul {
  list-style: none;
  padding: 0;
}

.project-resources li {
  margin-bottom: 0.3rem;
}

.project-resources a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 0.6pt solid #999;
  font-size: 0.95rem;
  transition: color 0.2s, border-color 0.2s;
}

.project-resources a:hover {
  color: #c0392b;
  border-color: #c0392b;
}

/* ===== Scroll-to-Top Arrow ===== */
.scroll-to-top {
  position: fixed;
  bottom: 1.5rem;
  left: max(1.2rem, calc(50% - 510px));
  z-index: 1000;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 0.4rem;
  line-height: 0;
}

.scroll-to-top.visible {
  opacity: 0.55;
  pointer-events: auto;
}

.scroll-to-top:hover {
  opacity: 0.9;
}

.scroll-to-top svg {
  width: 28px;
  height: 28px;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .running-header {
    padding-top: 0.8rem;
    padding-bottom: 0;
  }

  .content-column {
    padding: 0 calc(10px + 0.8rem);
  }
}

@media (max-width: 600px) {
  .blog-header h1,
  .post-hero h1,
  .project-hero h1 {
    font-size: 1.6rem;
  }

  .post-item .post-title {
    font-size: 1.1rem;
  }

  .running-header .header-inner {
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
  }
}