/* ===== Four silences grid ===== */
.silence-grid { display: grid; grid-template-columns: 1fr 1fr; }
.silence-cell { padding: var(--space-lg) var(--space-md); border-right: var(--border); border-bottom: var(--border); display: flex; flex-direction: column; gap: var(--space-xs); }
.silence-cell:nth-child(2n) { border-right: none; }
.silence-cell:nth-child(n+3) { border-bottom: none; }
.silence-title { font-family: var(--serif); font-size: var(--text-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.silence-sub { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--fg-muted); }
.silence-body { font-size: var(--text-base); line-height: 1.55; color: var(--fg-muted); }

/* ===== Product rows ===== */
.product-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md); border-bottom: var(--border); gap: var(--space-md); transition: background 0.2s; }
.product-row:hover { background: var(--fg-ghost); }
.product-row:last-child { border-bottom: none; }
.product-left { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.product-name-row { display: flex; align-items: center; gap: var(--space-sm); }
.product-name-row .tag, .product-name-row .tag-fill { font-size: 0.45rem; padding: 2px 5px; }
.product-name { font-family: var(--serif); font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; }
.product-desc { font-size: var(--text-sm); line-height: 1.5; color: var(--fg-muted); max-width: 560px; }
.product-right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

/* ===== Flagship section ===== */
.flagship-split { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-md); gap: var(--space-md); }
.flagship { position: relative; display: block; text-decoration: none; color: var(--fg); cursor: pointer; border-right: var(--border); overflow: hidden; }
.flagship-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s; }
.flagship-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: var(--text-display); font-weight: 400; letter-spacing: -0.02em; background: rgba(240,237,232,0.8); color: var(--fg); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
body.parchment .flagship-overlay { background: rgba(232,220,200,0.8); color: var(--fg); }
body.dark .flagship-overlay { background: rgba(20,20,20,0.75); color: var(--fg); }
.flagship:hover .flagship-overlay { opacity: 1; }
.flagship-details { padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); justify-content: center; }
.flagship-title { display: inline-flex; align-items: flex-start; gap: 6px; }
.live-badge { font-family: var(--sans); font-size: 0.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: #2E7D32; padding: 2px 5px; border-radius: 2px; position: relative; top: -0.3em; margin-left: -2px; }
.flagship-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .flagship-split { grid-template-columns: 1fr; }
  .flagship { border-right: none; border-bottom: var(--border); }
  .flagship-actions .pill { padding: 3px var(--space-xs); font-size: 0.5rem; }
}

/* ===== Blog grid ===== */
.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.blog-card {
  padding: var(--space-md); border-right: var(--border);
  display: flex; flex-direction: column; gap: var(--space-xs);
  text-decoration: none; color: var(--fg);
  transition: background 0.2s;
}
.blog-card:last-child { border-right: none; }
.blog-card:hover { background: var(--fg-ghost); }
.blog-date { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); font-weight: 500; }
.blog-title { font-family: var(--serif); font-size: var(--text-lg); font-weight: 400; line-height: 1.35; }
.blog-tag { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); font-weight: 600; margin-top: auto; }

/* ===== Landing responsive — 1024px ===== */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card:nth-child(2) { border-right: none; }
  .blog-card:nth-child(-n+2) { border-bottom: var(--border); }
  .heading-display { font-size: clamp(1.2rem, 2.5vw, 2rem); }
}

/* ===== Landing responsive — 768px ===== */
@media (max-width: 768px) {
  .silence-grid { grid-template-columns: 1fr; }
  .silence-cell { border-right: none; border-bottom: var(--border); }
  .silence-cell:nth-child(n+3) { border-bottom: var(--border); }
  .silence-cell:last-child { border-bottom: none; }
  .product-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); transition: background 0.2s; }
  .product-row:hover { background: var(--fg-ghost); }
  .product-right { display: none; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card { border-right: none; border-bottom: var(--border); }
  .blog-card:last-child { border-bottom: none; }
}

/* ===== Landing responsive — 420px ===== */
@media (max-width: 420px) {
  .hero-title { font-size: clamp(2.8rem, 15vw, 4rem); }
}