/* Blog content styles for The Currie Dish.
   Site nav/footer come from /css/site-chrome.css. */

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

html{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:#0a0a0a;
  color:#d0d0d0;
  -webkit-font-smoothing:antialiased;
}
body{line-height:1.7}

a{color:#00d4ff;text-decoration:none;transition:color .2s}
a:hover{color:#5ce0ff}

.blog-main{
  max-width:740px;
  margin:0 auto;
  padding:6.5rem 1.5rem 3rem;
}

.blog-kicker{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#00d4ff;margin-bottom:.75rem;
}
.blog-kicker a{color:#00d4ff}
.blog-kicker a:hover{color:#5ce0ff}

.blog-index-title{
  font-size:1.85rem;font-weight:700;color:#fff;line-height:1.25;
  margin:0 0 1.5rem;
}

.post-index{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #1a1a1a;
}
.post-index li{
  display:grid;
  grid-template-columns:9.5rem 1fr;
  gap:.75rem 1.25rem;
  align-items:baseline;
  padding:.85rem 0;
  border-bottom:1px solid #1a1a1a;
}
.post-index time{
  font-size:.85rem;
  color:#666;
  white-space:nowrap;
}
.post-index a{
  color:#e8e8e8;
  font-size:1.05rem;
  font-weight:500;
  line-height:1.35;
}
.post-index a:hover{color:#00d4ff}

/* Medium rows: the title column stacks the title over a small, muted source
   label, so the origin is noted quietly beneath the title without a badge
   competing with it. */
.post-index-entry{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}
.post-index .medium-label{
  align-self:flex-start;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#555;
  border:1px solid #333;
  border-radius:3px;
  padding:.1rem .32rem;
  line-height:1.2;
}
.post-index .medium-label:hover{color:#888;border-color:#555}

/* Truncation marker between the fetched Medium posts and the local archive.
   Overrides the two-column grid so the ellipsis sits on its own, with generous
   space above and below to read as a deliberate break rather than a post row. */
.post-index li.post-index-more{
  display:block;
  padding:1.75rem 0;
  color:#555;
  font-size:1.4rem;
  line-height:1;
  letter-spacing:.15em;
  cursor:default;
}

article.hentry{
  padding:2rem 0 2.5rem;
  border-bottom:1px solid #1a1a1a;
}
.article-list article.hentry:last-of-type{border-bottom:none}

.entry-title{
  font-size:1.85rem;font-weight:700;color:#fff;line-height:1.25;
  margin-bottom:.6rem;
}
.entry-title a{color:#fff}
.entry-title a:hover{color:#00d4ff}
.article-list .entry-title{font-size:1.35rem}

.meta,.date,time.published{
  font-size:.85rem;color:#666;
}
.meta{margin-bottom:1.25rem}

.entry-content{
  font-size:1.02rem;color:#c8c8c8;line-height:1.75;
}
.entry-content p{margin:0 0 1.1rem}
.entry-content p:last-child{margin-bottom:0}
.entry-content strong{color:#e8e8e8;font-weight:600}
.entry-content em{color:#bbb}
.entry-content ul,.entry-content ol{
  margin:0 0 1.1rem 1.3rem;
}
.entry-content li{margin-bottom:.35rem}
.entry-content blockquote{
  margin:1.2rem 0;
  padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid #333;
  color:#aaa;
}
.entry-content pre,.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#161616;
  border-radius:4px;
}
.entry-content code{padding:.1em .35em;font-size:.9em}
.entry-content pre{
  padding:1rem 1.1rem;overflow-x:auto;margin:0 0 1.1rem;
  border:1px solid #222;
}
.entry-content pre code{padding:0;background:none}
.entry-content img,
.special-content img{
  max-width:100%;height:auto;display:block;
  margin:1.25rem 0;border-radius:4px;
}
.entry-content figure,
.special-content figure{margin:1.25rem 0}
.entry-content figcaption,
.special-content figcaption{
  font-size:.82rem;color:#666;margin-top:.5rem;
}

/* YouTube embeds: framed 16:9 slot stays visible when youtube.com is blocked. */
.video-embed{
  margin:1.5rem 0 1.75rem;
}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#141414;
  border:1px solid #2a2a2a;
  border-radius:6px;
  overflow:hidden;
}
.video-frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
.video-embed figcaption{
  margin-top:.65rem;
  font-size:.88rem;
  color:#888;
  line-height:1.45;
}
.video-embed figcaption a{
  color:#00d4ff;
  font-weight:500;
}
.video-embed figcaption a:hover{color:#5ce0ff}

/* Flatten leftover Squarespace layout wrappers so content reads as prose. */
.entry-content .sqs-layout,
.entry-content .sqs-row,
.entry-content .sqs-col,
.entry-content .sqs-block,
.entry-content .sqs-block-content,
.entry-content .sqs-html-content,
.entry-content .image-block-outer-wrapper,
.entry-content .image-block-wrapper,
.entry-content .sqs-image-shape-container-element,
.special-content .sqs-layout,
.special-content .sqs-row,
.special-content .sqs-col,
.special-content .sqs-block,
.special-content .sqs-block-content,
.special-content .image-block-outer-wrapper,
.special-content .image-block-wrapper,
.special-content .sqs-image-shape-container-element{
  display:contents;
}
.entry-content .sqs-block-image-figure,
.special-content .sqs-block-image-figure{
  display:block;margin:1.25rem 0;
}

.pagination{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:2rem 0 1rem;
  font-size:.92rem;
}
.pagination a{color:#888}
.pagination a:hover{color:#fff}
.pagination .older-posts,
.pagination .next-item{margin-left:auto}
.pagination .newer-posts,
.pagination .prev-item{margin-right:auto}

@media(max-width:768px){
  .blog-main{padding:5.5rem 1rem 2.5rem}
  .entry-title{font-size:1.5rem}
  .blog-index-title{font-size:1.5rem}
  .post-index li{
    grid-template-columns:1fr;
    gap:.25rem;
  }
}