/* Homepage editorial redesign V3
   Direction: contemporary home magazine — strong photography,
   restrained typography, asymmetric feature hierarchy.
*/

.home-hero-editorial {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 30px;
  background: var(--v2-paper);
  box-shadow: none;
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 78px);
}

.home-hero-editorial .home-hero-kicker {
  margin-bottom: 20px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.home-hero-editorial h1 {
  max-width: 600px;
  margin: 0 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5.2vw, 5rem);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.home-hero-editorial .home-hero-description {
  max-width: 510px;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
}

.home-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
}

.home-hero-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 19px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: var(--v2-paper);
  font-size: .86rem;
  font-weight: 750;
  text-decoration: none;
}

.home-hero-button:hover {
  background: var(--v2-accent-dark);
  color: #fff;
}

.home-hero-text-link {
  color: var(--v2-ink-soft);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--v2-line);
  padding-bottom: 4px;
}

.home-hero-text-link:hover {
  color: var(--v2-accent-dark);
  border-color: var(--v2-accent);
}

.home-hero-editorial .hero-trust-row {
  margin-top: 38px;
  justify-content: flex-start;
  font-size: .72rem;
  letter-spacing: .02em;
}

.home-hero-image {
  position: relative;
  display: block;
  min-height: 560px;
  overflow: hidden;
  background: var(--v2-warm);
}

.home-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(18, 23, 20, .58));
  pointer-events: none;
}

.home-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.65,.2,1);
}

.home-hero-image:hover img {
  transform: scale(1.035);
}

.home-hero-image-caption {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
}

.home-hero-image-caption span {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
}

.home-hero-image-caption strong {
  max-width: 570px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.15;
  font-weight: 500;
}

.category-filter-section {
  margin-top: 70px;
}

.category-filter-header {
  margin-bottom: 18px;
}

.category-filter-header h2,
.home-section-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.035em;
}

.category-filters {
  gap: 9px;
}

.category-filter {
  min-height: 40px;
  padding: 7px 16px;
  border-radius: 999px;
  background: transparent;
}

.featured-section {
  margin-top: 72px;
}

.featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 18px;
}

.featured-card {
  border-radius: 24px;
  box-shadow: none;
}

.featured-card-primary {
  grid-row: span 2;
}

.featured-card-primary .featured-card-image {
  aspect-ratio: 1.32 / 1;
}

.featured-card:not(.featured-card-primary) {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
}

.featured-card:not(.featured-card-primary) .featured-card-image {
  height: 100%;
  min-height: 180px;
  aspect-ratio: auto;
}

.featured-card:not(.featured-card-primary) .featured-card-body {
  align-self: center;
}

.featured-card-primary .featured-card-body {
  padding: 24px 26px 27px;
}

.featured-card-primary .featured-card-body h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}

.featured-card:not(.featured-card-primary) .featured-card-body h3 {
  font-size: 1.05rem;
}

.featured-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-posts {
  margin-top: 86px;
}

.home-posts .posts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
}

.home-post-card {
  border-radius: 18px;
  box-shadow: none;
}

.home-post-card-image {
  aspect-ratio: 1.2 / 1;
}

.home-post-card-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.025em;
}

.home-post-card-body {
  padding: 17px 4px 24px;
}

.home-post-card {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.home-post-card:hover {
  transform: none;
  box-shadow: none;
}

.home-post-card:hover .home-post-card-image img {
  transform: scale(1.025);
}

@media (max-width: 900px) {
  .home-hero-editorial {
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    padding: 48px 38px 42px;
  }

  .home-hero-image {
    min-height: 430px;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-card-primary {
    grid-row: auto;
  }

  .featured-card:not(.featured-card-primary) {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .home-hero-editorial {
    border-radius: 22px;
  }

  .home-hero-copy {
    padding: 40px 22px 36px;
  }

  .home-hero-editorial h1 {
    font-size: clamp(2.25rem, 11vw, 3.4rem);
  }

  .home-hero-editorial .hero-trust-row {
    margin-top: 28px;
    flex-wrap: wrap;
  }

  .home-hero-image {
    min-height: 360px;
  }

  .home-hero-image-caption {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .category-filter-section {
    margin-top: 48px;
  }

  .featured-section,
  .home-posts {
    margin-top: 54px;
  }

  .featured-card:not(.featured-card-primary) {
    grid-template-columns: 125px minmax(0, 1fr);
  }

  .featured-card-primary .featured-card-image {
    aspect-ratio: 1.15 / 1;
  }

  .home-posts .posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }

  .home-post-card-title {
    font-size: 1.12rem;
  }
}

@media (max-width: 540px) {
  .home-posts .posts-grid {
    grid-template-columns: 1fr;
  }

  .featured-card:not(.featured-card-primary) {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

/* Site V2 — editorial visual system
   Inspired by successful home-organization publishers:
   clear editorial hierarchy, real-room photography, generous whitespace,
   useful navigation, and calm visual rhythm. No competitor assets or copy.
*/

:root {
  --v2-ink: #24302b;
  --v2-ink-soft: #5f6964;
  --v2-paper: #fbfaf7;
  --v2-card: #ffffff;
  --v2-line: #e7e3dc;
  --v2-accent: #6f7d62;
  --v2-accent-dark: #55634a;
  --v2-accent-soft: #eef1e9;
  --v2-warm: #f2eee6;
  --v2-shadow: 0 14px 40px rgba(36, 48, 43, .08);
  --v2-on-accent: #ffffff;

  /* Step A: one palette. Legacy tokens from custom.css (red accent, grey
     muted text) now resolve to the HomeOrg palette so every component that
     still uses var(--accent) / var(--muted) follows the same colours. */
  --accent: var(--v2-accent-dark);
  --accent-hover: var(--v2-ink);
  --accent-light: var(--v2-accent-soft);
  --muted: var(--v2-ink-soft);
}

body {
  background: var(--v2-paper);
  color: var(--v2-ink);
}

.site-header {
  background: rgba(251, 250, 247, .94);
  border-bottom: 1px solid var(--v2-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header-inner {
  min-height: 56px;
}

.site-logo {
  width: 42px;
  height: 42px;
}

.site-logo-mark {
  stroke-width: 1.8;
}

.site-logo-accent {
  fill: var(--v2-accent);
}

.site-title {
  color: var(--v2-ink);
  font-size: 1.02rem;
}

.site-description {
  color: var(--v2-ink-soft);
}

.site-nav-link {
  color: var(--v2-ink-soft);
}

.site-nav-link:hover {
  color: var(--v2-accent-dark);
  background: var(--v2-accent-soft);
}

.site-main {
  padding-top: 34px;
}

.home-hero {
  margin: 0 0 52px;
  padding: clamp(52px, 8vw, 92px) 28px clamp(46px, 7vw, 76px);
  border: 1px solid var(--v2-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 18%, rgba(111,125,98,.13), transparent 26%),
    linear-gradient(135deg, var(--v2-warm), var(--v2-paper));
  box-shadow: none;
}

.home-hero::after {
  width: 240px;
  height: 240px;
  right: -110px;
  bottom: -130px;
  border-color: var(--v2-accent);
}

.home-hero-kicker,
.home-section-kicker {
  color: var(--v2-accent-dark);
  letter-spacing: .14em;
}

.home-hero h1 {
  color: var(--v2-ink);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2.35rem, 6.5vw, 4.65rem);
  letter-spacing: -.055em;
}

.home-hero-description {
  color: var(--v2-ink-soft);
  max-width: 690px;
}

.home-search input {
  min-height: 56px;
  border-color: var(--v2-line);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(36,48,43,.07);
  background: #fff;
}

.home-search input:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 4px var(--v2-accent-soft), 0 8px 28px rgba(36,48,43,.07);
}

.hero-trust-row {
  color: var(--v2-ink-soft);
}

.category-filter-section {
  margin-bottom: 52px;
}

.category-filter-header h2,
.home-section-heading h2 {
  color: var(--v2-ink);
}

.category-filter {
  border-color: var(--v2-line);
  background: transparent;
  color: var(--v2-ink-soft);
}

.category-filter:hover,
.category-filter.is-active {
  border-color: var(--v2-accent-dark);
  background: var(--v2-accent-dark);
  color: var(--v2-on-accent);
}

.featured-section {
  margin-bottom: 64px;
}

.featured-grid {
  gap: 18px;
}

.featured-card,
.home-post-card {
  border-color: var(--v2-line);
  border-radius: 20px;
  background: var(--v2-card);
  box-shadow: 0 2px 10px rgba(36,48,43,.035);
}

.featured-card:hover,
.home-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow);
}

.featured-card-image,
.home-post-card-image {
  background: var(--v2-warm);
  aspect-ratio: 16 / 10.5;
}

.featured-card-image img,
.home-post-card-image img {
  transition: transform .55s cubic-bezier(.2,.65,.2,1);
}

.featured-badge {
  background: var(--v2-accent-dark);
  box-shadow: none;
}

.featured-card-body,
.home-post-card-body {
  padding: 20px 21px 22px;
}

.featured-card-body h3 a,
.home-post-card-title a {
  color: var(--v2-ink);
}

.featured-card-body h3 a:hover,
.home-post-card-title a:hover {
  color: var(--v2-accent-dark);
}

.home-post-card-description,
.featured-card-body p {
  color: var(--v2-ink-soft);
}

.home-post-card-link {
  color: var(--v2-accent-dark);
}

.home-post-card-meta {
  color: #7c837f;
}

.post-single {
  max-width: 790px;
}

.breadcrumb {
  color: #7c837f;
}

.post-header {
  margin-bottom: 32px;
}

.post-title {
  max-width: 820px;
  color: var(--v2-ink);
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -.045em;
  line-height: 1.08;
}

.post-meta {
  color: #737b76;
}

.post-hero {
  margin: 34px 0 44px;
}

.post-hero-image {
  border-radius: 22px;
  box-shadow: var(--v2-shadow);
}

.post-content {
  color: var(--v2-ink);
  font-size: 1.075rem;
  line-height: 1.86;
}

.post-content h2 {
  position: relative;
  margin-top: 58px;
  margin-bottom: 20px;
  color: var(--v2-ink);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  letter-spacing: -.025em;
}

.post-content h2::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 99px;
  background: var(--v2-accent);
}

.post-content h3 {
  color: var(--v2-ink);
}

.post-content a {
  color: var(--v2-accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.post-content img {
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(36,48,43,.07);
  margin: 34px auto;
}

.post-content blockquote {
  border-left-color: var(--v2-accent);
  background: var(--v2-accent-soft);
}

.post-content th {
  background: var(--v2-warm);
}

.author-box {
  border-color: var(--v2-line);
  border-radius: 20px;
  background: var(--v2-warm);
}

.author-avatar {
  background: linear-gradient(135deg, var(--v2-accent-dark), var(--v2-ink));
}

.site-footer {
  background: #f2efe8;
  border-top: 1px solid var(--v2-line);
}

.site-footer a {
  color: var(--v2-ink-soft);
}

.site-footer a:hover {
  color: var(--v2-accent-dark);
}

@media (max-width: 780px) {
  .site-container {
    width: min(100% - 28px, var(--page-width));
  }

  .site-main {
    padding-top: 22px;
  }

  .home-hero {
    border-radius: 22px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 38px;
  }

  .featured-grid,
  .posts-grid {
    gap: 16px;
  }

  .post-content {
    font-size: 1.03rem;
  }

  .post-content h2 {
    margin-top: 46px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --v2-ink: #edf0eb;
    --v2-ink-soft: #b9c0ba;
    --v2-paper: #141715;
    --v2-card: #1b1f1c;
    --v2-line: #303630;
    --v2-accent: #a9b89a;
    --v2-accent-dark: #b9c9aa;
    --v2-accent-soft: #263025;
    --v2-warm: #1d211e;
    --v2-on-accent: #141715;
  }

  .site-header {
    background: rgba(20, 23, 21, .94);
  }

  .home-search input {
    background: var(--v2-card);
  }

  .site-footer {
    background: #101210;
  }
}


/* Visitor-first polish: clearer editorial hierarchy and safer image presentation */
.home-hero-editorial,
.featured-card,
.home-post-card {
  border-color: color-mix(in srgb, var(--v2-line) 82%, var(--v2-accent) 18%);
}

.home-hero-image img,
.featured-card-image img,
.home-post-card-image img,
.post-hero-image,
.post-content img {
  background: var(--v2-warm);
}

.home-hero-image,
.featured-card-image,
.home-post-card-image {
  overflow: hidden;
}

.post-hero {
  margin: 28px 0 42px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--v2-warm);
}

.post-hero-image {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}

.post-content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (max-width: 820px) {
  .home-hero-editorial {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 22px;
  }

  .home-hero-copy {
    padding: 38px 24px 30px;
  }

  .home-hero-image {
    min-height: 360px;
  }

  .featured-grid,
  .home-posts .posts-grid {
    grid-template-columns: 1fr;
  }

  .featured-card-primary {
    grid-row: auto;
  }

  .featured-card:not(.featured-card-primary) {
    display: block;
  }

  .featured-card:not(.featured-card-primary) .featured-card-image {
    min-height: 240px;
  }

  .home-post-card-image {
    aspect-ratio: 1.45 / 1;
  }
}

/* Affiliate call-to-action button (rendered only for Awin links) */
.post-content a.aff-btn {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 1.6rem auto;
  padding: .85rem 1.7rem;
  background: var(--v2-accent-dark);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  box-shadow: var(--v2-shadow);
  transition: background .2s ease, transform .2s ease;
}

.post-content a.aff-btn:hover,
.post-content a.aff-btn:focus-visible {
  background: #44503b;
  transform: translateY(-1px);
}

.post-content a.aff-btn:focus-visible {
  outline: 3px solid var(--v2-accent);
  outline-offset: 3px;
}


/* Homepage refinement — calm editorial layout, stronger rhythm, accessible controls.
   Scoped to existing homepage components; no templates or article content changed. */
.home-hero-editorial {
  margin-bottom: clamp(34px, 5vw, 58px);
  border-radius: 26px;
  border-color: var(--v2-line);
  background: var(--v2-card);
  box-shadow: 0 10px 34px rgba(36, 48, 43, .045);
}

.home-hero-copy {
  padding: clamp(30px, 4.3vw, 62px);
}

.home-hero-editorial .home-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--v2-accent-dark);
  letter-spacing: .16em;
  line-height: 1.5;
}

.home-hero-editorial .home-hero-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.home-hero-editorial h1 {
  max-width: 560px;
  font-size: clamp(2.35rem, 4.15vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -.048em;
  text-wrap: balance;
}

.home-hero-editorial .home-hero-description {
  max-width: 470px;
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.78;
}

.home-hero-actions {
  gap: 14px 20px;
}

.home-hero-button {
  min-height: 48px;
  padding-inline: 21px;
  transition: transform .2s ease, background-color .2s ease;
}

.home-hero-button:hover {
  transform: translateY(-2px);
}

.home-hero-image {
  min-height: 520px;
  background: var(--v2-warm);
}

.home-hero-image img {
  object-position: center;
}

.home-hero-image-caption {
  right: 24px;
  bottom: 24px;
  left: 24px;
}

.home-search {
  max-width: 760px;
  margin: 0 auto clamp(46px, 6vw, 70px);
}

.home-search input {
  width: 100%;
  min-height: 58px;
  padding-inline: 48px 18px;
  font-size: 1rem;
}

.category-filter-section {
  margin-top: 0;
  margin-bottom: clamp(44px, 6vw, 68px);
}

.category-filter-header {
  margin-bottom: 20px;
}

.category-filter-header h2,
.home-section-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.15;
  text-wrap: balance;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-filter {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 650;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.category-filter:hover {
  transform: translateY(-1px);
}

.category-filter:focus-visible,
.home-hero-button:focus-visible,
.home-hero-text-link:focus-visible,
.site-nav-link:focus-visible,
.featured-card a:focus-visible,
.home-post-card a:focus-visible {
  outline: 3px solid var(--v2-accent);
  outline-offset: 3px;
}

.featured-section,
.home-posts {
  margin-top: clamp(48px, 6vw, 72px);
}

.home-section-heading {
  align-items: end;
  gap: 18px;
  margin-bottom: 22px;
}

.home-section-kicker {
  display: inline-block;
  margin-bottom: 9px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.featured-grid {
  gap: 20px;
}

.featured-card,
.home-post-card {
  overflow: hidden;
  border-radius: 18px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.featured-card-primary .featured-card-image {
  aspect-ratio: 1.38 / 1;
}

.featured-card:not(.featured-card-primary) .featured-card-image {
  min-height: 160px;
}

.featured-card-image img,
.home-post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-card-body h3,
.home-post-card-title {
  line-height: 1.28;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.featured-card-body p,
.home-post-card-description {
  line-height: 1.7;
}

.home-posts .posts-grid {
  gap: 30px 22px;
}

.home-post-card-image {
  aspect-ratio: 1.42 / 1;
}

.home-post-card-body {
  padding: 18px 20px 22px;
}

.home-post-card-meta {
  font-size: .76rem;
  line-height: 1.5;
}

.home-post-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-weight: 750;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .featured-card:hover,
  .home-post-card:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 900px) {
  .home-hero-editorial {
    min-height: 0;
  }

  .home-hero-copy {
    padding: 38px 30px;
  }

  .home-hero-image {
    min-height: 390px;
  }

  .featured-card:not(.featured-card-primary) {
    grid-template-columns: 145px minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .home-hero-editorial {
    border-radius: 20px;
  }

  .home-hero-copy {
    padding: 32px 22px 28px;
  }

  .home-hero-editorial h1 {
    max-width: 16ch;
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    line-height: 1.04;
  }

  .home-hero-actions {
    align-items: flex-start;
    gap: 14px;
  }

  .home-hero-image {
    min-height: 320px;
  }

  .home-hero-image-caption {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .category-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin-inline: -2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .category-filter {
    flex: 0 0 auto;
  }

  .featured-section,
  .home-posts {
    margin-top: 46px;
  }

  .featured-grid,
  .home-posts .posts-grid {
    gap: 18px;
  }

  .featured-card:not(.featured-card-primary) {
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .featured-card:not(.featured-card-primary) .featured-card-image {
    min-height: 150px;
  }
}

@media (max-width: 480px) {
  .home-hero-editorial .home-hero-description {
    font-size: .96rem;
  }

  .home-hero-image {
    min-height: 270px;
  }

  .home-hero-editorial .hero-trust-row {
    gap: 7px;
    font-size: .68rem;
  }

  .featured-card:not(.featured-card-primary) {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .featured-card:not(.featured-card-primary) .featured-card-image {
    min-height: 138px;
  }

  .featured-card-body,
  .home-post-card-body {
    padding: 15px;
  }

  .featured-card-body h3 {
    font-size: 1rem;
  }

  .home-section-heading h2 {
    font-size: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-button,
  .category-filter,
  .featured-card,
  .home-post-card,
  .featured-card-image img,
  .home-post-card-image img {
    transition: none !important;
  }

  .home-hero-button:hover,
  .category-filter:hover,
  .featured-card:hover,
  .home-post-card:hover {
    transform: none !important;
  }
}

/* Step A: filled accent surfaces use the on-accent token so text stays
   readable in both colour schemes. */
.featured-badge,
.skip-link {
  color: var(--v2-on-accent);
}

/* Step A2: layout workaround for a markup bug in layouts/index.html.
   A stray </div> after the category buttons closes .site-container early:
   (1) .featured-section and .home-posts render outside the page gutters, and
   (2) the category buttons sit inside .home-search next to the input and get
   squeezed into narrow ovals.
   These rules only match while that markup is unchanged (direct children of
   main / buttons inside .home-search); once the markup is fixed they stop
   applying. */
.site-main > .featured-section,
.site-main > .home-posts {
  width: min(var(--page-width), calc(100% - 40px));
  margin-inline: auto;
}

@media (max-width: 780px) {
  .site-main > .featured-section,
  .site-main > .home-posts {
    width: min(100% - 28px, var(--page-width));
  }
}

.home-search {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 8px;
}

.home-search input {
  flex: 1 1 100%;
}

.home-search .category-filter {
  flex: 0 0 auto;
  white-space: nowrap;
}

.home-search-icon {
  top: 29px;
  transform: translateY(-50%);
}

/* Step A3: mobile polish, based on real phone screenshots of the live page.
   1. .home-hero (defined later in this file) re-applied its padding to the
      editorial hero, which insets the photo inside the card. Restore the
      flush layout the editorial hero was written for.
   2. The caption over the hero photo was hard to read on light photos.
   3. Portrait photos made the secondary featured cards a full screen tall.
   4. Meta text was too pale and its separator dot wrapped alone onto the
      first line in the two-column grid. */
.home-hero.home-hero-editorial {
  padding: 0;
}

@media (max-width: 780px) {
  .home-hero-copy {
    padding: 36px 24px 30px;
  }
}

.home-hero-image::after {
  background: linear-gradient(180deg, transparent 28%, rgba(18, 23, 20, .8));
}

.home-hero-image-caption span {
  opacity: 1;
}

@media (max-width: 900px) {
  .featured-card:not(.featured-card-primary) .featured-card-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .featured-card:not(.featured-card-primary) .featured-card-image img {
    position: absolute;
    inset: 0;
  }
}

.home-post-card-meta {
  color: var(--v2-ink-soft);
}

@media (max-width: 560px) {
  .home-posts .home-post-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .home-posts .home-post-card-meta > [aria-hidden="true"] {
    display: none;
  }

  .home-search .category-filter {
    min-height: 44px;
    padding: 8px 14px;
    font-size: .85rem;
  }
}

/* Step A4: remaining low-contrast text found by the Preview Audit (PR #116).
   competitive.css still defined its own muted/accent colours, and two rules in
   this file used hard-coded greys. Everything now follows the HomeOrg palette. */
:root {
  --competitive-muted: var(--v2-ink-soft);
  --competitive-accent: var(--v2-accent-dark);
  --competitive-accent-hover: var(--v2-ink);
}

.breadcrumb,
.post-meta {
  color: var(--v2-ink-soft);
}