:root{
  --bg: #ffffff;
  --text: #000000;
  --muted: #666666;
  --rule: #e0e0e0;
  --max: 720px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; margin: 0; padding: 0; }
html, body{ height:100%; }
html{ overflow-y: scroll; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a{
  color: var(--text);
  text-decoration: none;
}
a:hover{ opacity: 0.6; }

.wrap{
  padding: 60px;
}

.content-wrap{
  max-width: var(--max);
}

/* Site header */
header{
  margin-bottom: 0px;
  border-bottom: none;
}

nav{
  display: flex;
  gap: 20px;
}

nav a{
  color: var(--text);
  font-size: 15px;
}

nav a.active{
  font-weight: 600;
}

nav a.active:hover{
  opacity: 1;
}

.site-rule{
  border: 0;
  height: 0.5px;
  background-image: linear-gradient(90deg, #6a00ff, #22ff0e);
}

.site-rule--header{
  margin-top: 8px;
  margin-bottom: 120px;
}

.site-rule--footer{
  margin-top: 120px;
  margin-bottom: 8px;
}

/* Journal list */
.item{
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
}

.date{
  flex: 0 0 88px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.title{
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.excerpt{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 65ch;
  margin-top: 4px;
}

/* Footer */
footer{
  font-size: 14px;
  color: var(--muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

footer a,
footer a:visited,
footer a:hover,
footer a:active{
  color: var(--muted);
  text-decoration: none;
}

footer a:hover{
  opacity: 0.6;
}

/* --- Post page hierarchy --- */


/* Post header block */
.post-head{
  margin-bottom: 20px;
  border-bottom: none;
}

.post-title{
  font-size: 18px;
  font-weight: 600;
}

/* Date (post page) */
.meta{
  color: var(--muted);
  font-size: 13px;
}

/* Subtitle / deck */
.subtitle{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

/* Body typography */
.content{
  font-size: 16px;
  line-height: 1.65;
}

.content p{
  margin: 0 0 20px;
  max-width: 70ch;
}

.content h2{
  font-size: 18px;
  font-weight: 600;
  margin: 40px 0 20px;
  border-bottom: 1px solid var(--rule);
}

.content h3{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin: 26px 0 10px;
}

.content blockquote{
  border-left: 3px solid var(--rule);
  padding-left: 18px;
  margin: 22px 0;
  color: var(--muted);
  font-style: italic;
}

.content hr{
  border: none;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}

.content .note{
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  max-width: 100%;
  margin-top: 20px;
}

.content .note a{
  color: var(--muted);
}

/* Code */
.content code{
  font-family: var(--mono);
  font-size: 14px;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.content pre{
  background: #f5f5f5;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 22px 0;
  font-size: 14px;
  line-height: 1.5;
}

.content pre code{
  background: none;
  padding: 0;
}

/* Images (default single-image flow) */
.content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 40px 0;
}

/* Figures (image + caption blocks) */
.content figure{
  margin: 40px 0 40px;
}

.content figure img{
  margin: 0 0 10px 0; /* overrides .content img margin for figure images */
}

.content figcaption{
  color: var(--muted);
  font-size: 13px;
  font-style: normal;

}

/* Multi-image layouts (opt-in via HTML in Markdown) */

/* Two (or more) images in a row, wrapping on small screens */
.content .image-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 40px 0 40px;
}

.image-row figure{
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.content .image-row figure img{
  display: block;
  width: 100%;
  margin: 0 0 10px 0;
}

.image-row figcaption{
  font-size: 13px;
  color: var(--muted);
  font-style: normal;

}

/* Simple grid (if you use <div class="image-grid"> with <img> children) */
.content .image-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0;
}

.image-grid img{
  margin: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 520px){
  .wrap{
    margin-left: 0;
    padding: 40px 18px 80px;
  }

  header{ margin-bottom: 40px; }

  .post-title{ font-size: 24px; }

  .content h2{ font-size: 18px; }
}