/* === Seen & Red Brand Tokens (Scoped) === */
:root {
  --sr-red: #C8102E;           /* primary accent (deep red) */
  --sr-red-soft: #E63946;      /* hover/secondary accent */
  --sr-ink: #1A1A1A;           /* near-black body text */
  --sr-bg: #FFFFFF;            /* page background */
  --sr-muted: #666666;         /* meta text */
  --sr-border: #EDEDED;        /* subtle borders */
  --sr-radius: 12px;           /* card rounding */
  --sr-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* === Base Typography === */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sr-bg);
  color: var(--sr-ink);
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.65;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a { color: var(--sr-red); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--sr-red-soft); }

/* === Article Layout === */
.sr-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.sr-article h1, .sr-article h2, .sr-article h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  line-height: 1.25;
  letter-spacing: .2px;
  color: var(--sr-ink);
}

.sr-article h1 {
  font-size: clamp(30px, 4.5vw, 44px);
  margin: 16px 0 14px;
}
.sr-article .sr-meta {
  color: var(--sr-muted);
  font-size: .94rem;
  margin-bottom: 18px;
}
.sr-article h2 { font-size: clamp(22px, 3.5vw, 28px); margin: 28px 0 10px; }
.sr-article h3 { font-size: clamp(19px, 3vw, 22px); margin: 22px 0 10px; }

.sr-article p { margin: 12px 0; font-size: 1.05rem; }
.sr-article ul, .sr-article ol { margin: 12px 0 16px 20px; }
.sr-article li { margin: 6px 0; }

.sr-article blockquote {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--sr-red-soft);
  background: #FFF6F7;
  border-radius: 8px;
  font-style: italic;
}

.sr-article img, .sr-article figure { max-width: 100%; border-radius: 10px; }
.sr-article hr { border: 0; border-top: 1px solid var(--sr-border); margin: 28px 0; }

/* CTA buttons (optional utility) */
.sr-btn {
  display: inline-block;
  background: var(--sr-red);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .08s ease, background .2s ease;
}
.sr-btn:hover { background: var(--sr-red-soft); transform: translateY(-1px); }

/* --- Button Base (mobile-first, accessible) --- */
.btn {
  --brand-red: #c00;              /* brand primary */
  --brand-red-dark: #a00;         /* hover/active */
  --ring: 3px solid rgba(0,0,0,0.35);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: 1rem;                /* >=16px for legibility */
  line-height: 1.2;
  text-decoration: none;
  border-radius: 10px;
  padding: 14px 20px;             /* 44px+ tap target with line-height */
  min-height: 48px;               /* WCAG/Apple tap target */
  cursor: pointer;

  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease-in-out;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Primary: solid brand red */
.btn-primary {
  background-color: var(--brand-red);
  color: #fff;
  border: 2px solid var(--brand-red);
  box-shadow: 0 6px 18px rgba(204,0,0,0.25);
}
.btn-primary:hover { background-color: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.btn-primary:active { transform: translateY(1px); }

/* Secondary: white with red border */
.btn-secondary {
  background-color: #fff;
  color: var(--brand-red);
  border: 2px solid var(--brand-red);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.btn-secondary:hover { background-color: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.btn-secondary:active { transform: translateY(1px); }

/* Keyboard focus visibility */
.btn:focus-visible {
  outline: var(--ring);
  outline-offset: 2px;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* --- Hero Buttons Layout --- */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Mobile-first: stack and full-width on small screens */
@media (max-width: 640px) {
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-buttons .btn {
    width: 100%;
  }
}

/* Larger screens: inline with spacing */
@media (min-width: 641px) {
  .hero-buttons .btn + .btn { margin-left: 8px; }
}

/* --- Optional nav polish for consistency --- */
.site-nav .nav-list {
  display: flex; gap: 20px; align-items: center; list-style: none; margin: 0; padding: 0;
}
.site-nav .nav-list a {
  text-decoration: none; color: inherit; padding: 8px 6px; border-radius: 6px;
}
.site-nav .nav-list a:focus-visible { outline: 3px solid rgba(0,0,0,0.35); outline-offset: 2px; }

/* === Blog Index Card === */
.post-card {
  background: #fff;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden;
  margin: 0 0 22px 0;
}
.post-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }

.post-link {
  display: block;
  padding: 18px 18px 16px;
  color: inherit;
  text-decoration: none;
}

.post-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(20px, 3vw, 24px);
  margin: 0 0 6px;
}
.post-card:hover .post-title { color: var(--sr-red); }

.post-meta {
  color: var(--sr-muted);
  font-size: .92rem;
  margin: 0 0 8px;
}

.post-excerpt {
  color: var(--sr-ink);
  opacity: .92;
  margin: 0;
}

/* === HERO container === */
.sr-hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: clamp(340px, 68vh, 680px);
  border-radius: 16px;
  overflow: hidden;
}
.sr-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
/* Optional: if hero uses background-image instead of <img> */
header.hero, .hero {
  height: clamp(340px, 68vh, 680px);
  background-size: cover;
  background-position: 50% 15%;
  border-radius: 16px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

/* HERO overlay */
.sr-hero-content {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
  color: #fff;
}
.sr-hero-title { font-size: clamp(26px, 4.5vw, 42px); margin: 0 0 6px 0; }
.sr-hero-sub { font-size: clamp(14px, 2.2vw, 18px); margin: 0 0 12px 0; opacity: .95; }

/* === Responsive Tweaks === */
@media (min-width: 900px) {
  .sr-article { padding: 36px 24px 100px; }
}
@media (max-width: 420px) {
  .sr-article { padding: 18px 14px 70px; }
  .post-link { padding: 16px; }
}
@media (max-width: 640px) {
  .sr-hero { height: clamp(260px, 52vh, 440px); }
  .sr-hero-content { padding: 16px; }
}
/* ===== Blog Index Refresh ===== */
:root{
  --sr-red:#C8102E;           /* brand deep red */
  --sr-red-soft:#E63946;      /* hover red */
  --sr-ink:#1A1A1A;           /* body text */
  --sr-muted:#666666;         /* meta text */
  --sr-border:#EDEDED;        /* hairline */
  --sr-card:#FFFFFF;          /* card bg */
  --sr-radius:16px;           /* bigger rounding for hero/cards */
  --sr-shadow:0 6px 20px rgba(0,0,0,.08);
}

html, body { margin:0; }

/* Page container */
.sr-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 80px;
}

/* Page title */
.sr-page-title{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 5vw, 40px);
  margin: 8px 0 10px;
}

/* Intro/strapline under title (optional) */
.sr-page-sub{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--sr-muted);
  margin: 0 0 20px;
}

/* Grid for posts */
.post-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 720px){
  .post-grid{ grid-template-columns: 1fr 1fr; }
}

/* Card (with or without image) */
.post-card{
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  overflow: hidden;
  box-shadow: var(--sr-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}

.post-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }

/* Card link wrapper */
.post-link{ display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; }

/* Thumbnail (optional) */
.post-thumb{
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder when no image is provided */
.post-thumb.placeholder{
  background: linear-gradient(135deg, #fff 0%, #fdecef 100%);
  display: grid; place-items: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px; color: var(--sr-red);
}

/* Card thumbnails: consistent crop */
.blog-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* prevents layout shift; requires modern browsers */
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
  background: #f6f6f6;
}

/* Article hero: full content width, capped height */
.post-hero-img {
  width: 100%;
  height: auto;
  max-height: 520px;      /* adjust to taste */
  object-fit: cover;
  display: block;
  border-radius: 12px;
  margin: 0 0 1rem 0;
  background: #f6f6f6;
}

@supports not (aspect-ratio: 1) {
  /* fallback for very old browsers */
  .blog-card-img { height: 220px; }
}

/* Content */
.post-body{ padding: 16px 16px 18px; }

.post-title{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(20px, 2.4vw, 24px);
  margin: 0 0 6px;
}

.post-meta{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--sr-muted);
  font-size: .92rem;
  margin: 0 0 8px;
}

.post-excerpt{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  margin: 0;
  opacity: .95;
}

/* CTA row at bottom of index */
.sr-cta{
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  background: #fff;
  box-shadow: var(--sr-shadow);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}

.sr-cta-text{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  margin: 0 8px 0 0; color: var(--sr-ink);
}

.sr-btn{
  display:inline-block; background:var(--sr-red); color:#fff; padding:12px 18px;
  border-radius:999px; text-decoration:none; font-weight:600;
  transition: transform .08s ease, background .2s ease;
}
.sr-btn:hover{ background: var(--sr-red-soft); transform: translateY(-1px); }

/* Clean up that top UL nav if present inside blog index content */
.blog-inline-nav ul{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-wrap:wrap; gap:12px; }
.blog-inline-nav a{ text-decoration:none; color:var(--sr-red); }
.blog-inline-nav a:hover{ color:var(--sr-red-soft); }

/* Article layout tightening */
.content, main article, .article-container { max-width: 760px; margin: 0 auto; }
article p { margin: 14px 0; }
article h2 { margin: 28px 0 12px; }
.callout, .note, .tip { background:#f7f7f8; border:1px solid #ececec; padding:16px 20px; border-radius:12px; }

/* Breadcrumbs & badges */
.breadcrumb{font-size:14px;color:#6b7280;margin:12px 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep,.breadcrumb .chev{opacity:.6}
.back-link{margin-right:6px}
.current{font-weight:600;color:#374151}
@media (max-width:640px){.breadcrumb{font-size:13px}}

.article-badges{margin:6px 0 14px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:600;font-size:12px;letter-spacing:.02em;line-height:1.6}
.badge-category{text-transform:uppercase;background:#f3f4f6;border:1px solid #e5e7eb;color:#1f2937}

/* tighten top spacing */
main,.article-container,.content{padding-top:16px;margin-top:0}
/* Blog card component */
.blog-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}
.blog-card img {
  width: 100%;
  height: auto;
  display: block;
}
.blog-card h2 {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}
.blog-card p {
  color: #555;
  font-size: 1rem;
}

/* === Mobile Header Navigation === */
@media (max-width: 640px) {
  header .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  header nav {
    width: 100%;
    margin-top: 0.5rem;
  }

  header nav ul {
    flex-direction: column;
    gap: 0.75rem;
  }
}