/* Page-specific styles for Constraints Are the Medium */

/* ===== HERO THEME ===== */
.article-hero { background: linear-gradient(160deg, #1a0f08 0%, #2a1608 55%, #1f1206 100%); }
.article-tag-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.article-hero-sub { color: #c8a888; }
.article-meta-read { color: #8a6a4a; }
.article-cta { background: linear-gradient(135deg, #1a0f08 0%, #2a1608 100%); border: 2px solid #4a2a10; }
.article-cta p { color: #c8a888; }
.article-cta a.secondary { color: #c8a888; border: 2px solid #4a2a10; }

/* ===== CONSTRAINT GRID (Sonnet / Circuit / Sprint) ===== */
.constraint-grid {
  margin: 28px 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.constraint-grid.is-visible { opacity: 1; transform: translateY(0); }
.constraint-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fafaf6;
  border: 1px solid #e6d8c8;
  border-radius: 10px;
  padding: 18px 18px 20px;
}
.constraint-card-name { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #a0451a; }
.constraint-row { border-top: 1px dashed #e0d0bc; padding-top: 8px; }
.constraint-row-label { font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: #9a8a6a; margin-bottom: 3px; }
.constraint-row-text { font-size: 13.5px; color: #2a2016; line-height: 1.5; font-weight: 700; }

/* ===== PRESSURE LINE (before / after the cut) ===== */
.pressure-block {
  margin: 26px 0;
  background: #17110a;
  border: 1px solid #4a2a10;
  border-radius: 10px;
  padding: 22px 26px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pressure-block.is-visible { opacity: 1; transform: translateY(0); }
.pressure-row { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; }
.pressure-tag { flex-shrink: 0; width: 78px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; color: #b06a30; font-family: 'Courier New', monospace; }
.pressure-text { font-size: 14.5px; color: #d8c4a8; line-height: 1.55; }
.pressure-text del { color: #7a6a58; }
.pressure-divider { border: none; border-top: 1.5px solid #3a2410; margin: 6px 0; }
.pressure-final .pressure-text { color: #fff; font-weight: 800; }

/* ===== TACTICS LIST (shared pattern) ===== */
.constraint-tactics { margin: 30px 0 10px; }
.constraint-tactics .tactic { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid #e4e9d4; }
.constraint-tactics .tactic:last-child { border-bottom: 1px solid #e4e9d4; }
.constraint-tactics .tactic-num { font-size: 13px; font-weight: 900; color: #a0451a; font-family: 'Courier New', monospace; flex-shrink: 0; width: 26px; padding-top: 2px; }
.constraint-tactics .tactic-title { font-size: 15.5px; font-weight: 800; color: #1a2a10; margin-bottom: 4px; }
.constraint-tactics .tactic-detail { font-size: 14px; color: #445032; line-height: 1.6; }

@media (max-width: 640px) {
  .constraint-grid { grid-template-columns: 1fr; }
  .pressure-row { flex-direction: column; gap: 4px; }
  .pressure-tag { width: auto; }
}