/* -----------------------------------------
   Global: hide stuff (your originals, kept)
------------------------------------------ */
.sharedaddy, .sd-sharing, .jetpack-likes-widget-wrapper, .jp-relatedposts { display:none !important; }
.entry-meta, .post-meta, .category-links, .tag-links, .byline, .author-box, .author-info { display:none !important; }
.widget-area-below-main, .widget-area-below-content, .below-content, .after-post { display:none !important; }
#comments, .comments-area, .comment-respond { display:none !important; }

/* -----------------------------------------
   Font import (optional, remove if you use system font)
------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap");

/* -----------------------------------------
   Titles: typography + sizes
   - Single posts: strong but not gigantic
   - List/archive cards: smaller cap so they don't crowd images
------------------------------------------ */
.post-title,
.post-title a {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--wp--preset--color--foreground, #111);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Single-post headline (article page) */
.single .post-title,
.single .post-title a {
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem); /* tweak MAX up/down */
}

/* Home + archives card titles (safer cap) */
.blog .post-title,
.archive .post-title,
.blog .post-title a,
.archive .post-title a {
  font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.6rem);
}

/* Links look like text, but keep hover focus */
.post-title a { color: inherit; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.post-title a:hover,
.post-title a:focus-visible { text-decoration: underline; }

/* Extra weight on very small screens, optional */
@media (max-width: 640px) {
  .post-title,
  .post-title a { font-weight: 900; letter-spacing: -0.012em; }
}

/* -----------------------------------------
   Home (front page): HERO POST ONLY
   Scope tightly so other images don't get touched
   - Only first article in the main loop
   - Only on page 1 of home (not /page/2/)
------------------------------------------ */
@media (min-width: 50em) {
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
  }

  /* Reset ALL listing images first so nothing inherits the 100% height */
  .home .loop-container article.entry .featured-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover; /* harmless with auto height */
    display: block !important;
  }

  /* Then style ONLY the hero image to be cinematic */
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type .featured-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: 16/9;          /* hero gets a fixed ratio */
    overflow: hidden !important;
  }
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type .featured-image img {
    height: 100% !important;     /* only the hero image gets this */
    object-fit: cover !important;
  }

  /* Align hero text edge to image edge */
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type .post-header,
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type .post-content,
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type .post-meta {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hero headline size (separate from singles & cards) */
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type .post-title,
  body.home:not(.paged) .content-area .loop-container > article.entry:first-of-type .post-title a {
    font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.008em;
    margin-top: 18px;
    margin-bottom: 10px;
  }
}

/* -----------------------------------------
   Optional: max line length for nicer reading
------------------------------------------ */
.single .post-title { max-width: 42ch; }

/* -----------------------------------------
   Dark mode color
------------------------------------------ */
@media (prefers-color-scheme: dark) {
  .post-title,
  .post-title a { color: #f3f4f6; }
}

/* -----------------------------------------
   Kicker (if you use one) — fixed the stray comment from your snippet
------------------------------------------ */
/* .post-title a span.kicker {
  display: block;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
} */

/* Force readable dark titles on mobile */
@media (max-width: 780px) {
  body .post-title,
  body .post-title a {
    color: #111 !important;
  }
}