/* CSS variable shims for legacy page styles */
:root { --pink: #f9c; --green: #9f9; --yellow: #ff6; --black: #111; --white: #fff; --gray: #666; }

/* Component classes shared across research pages */
.section { margin-top: 2.5rem; }
.section h2 { font-size: 1.3rem; margin-bottom: 1rem; font-weight: 700; }
.card { padding: 1rem; border: 2px solid #111; border-radius: 12px; background: #fff; box-shadow: 2px 2px 0 #111; }
.card h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.card p.meta { font-size: .9rem; color: #666; margin-bottom: .5rem; }
.chip { display: inline-block; padding: .35rem .85rem; border-radius: 12px; border: 2px solid #111; font-weight: bold; font-size: .9rem; background: #fff; box-shadow: 2px 2px 0 #111; }
.chip.pink { background: #f9c; }
.chip.green { background: #9f9; }
.chip.yellow { background: #ff6; }
.hero { padding: 2rem 1.5rem; border: 2px solid var(--black); border-radius: 12px; background: var(--yellow); box-shadow: 4px 4px 0 var(--black); margin-bottom: 2rem; }
.hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.hero p { font-size: 1rem; margin-bottom: .5rem; }
.hero .meta { font-size: .9rem; color: var(--gray); margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--black); }
.nav-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; position: sticky; top: 5.5rem; background: var(--white); padding: .75rem 0; z-index: 10; border-bottom: 2px dashed var(--black); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.big-card { padding: 1.5rem; border: 2px solid var(--black); border-radius: 12px; background: var(--white); box-shadow: 3px 3px 0 var(--black); height: 100%; display: flex; flex-direction: column; }
.big-card h3 { font-size: 1.2rem; margin-bottom: .75rem; }
.big-card p { margin-bottom: .75rem; flex-grow: 1; font-size: .95rem; }
.highlight-box { background: #f5f5f5; border: 2px solid var(--black); border-radius: 8px; padding: .75rem; margin: .75rem 0; }
.highlight-box h4 { font-size: .85rem; font-weight: 700; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .5px; }
.highlight-box ul { list-style: none; padding-left: 0; }
.highlight-box li { padding: .25rem 0; font-size: .9rem; }
.highlight-box li:before { content: "▸ "; font-weight: bold; margin-right: .5rem; }
.findings-section { background: var(--pink); border: 2px solid var(--black); border-radius: 12px; padding: 2rem 1.5rem; box-shadow: 4px 4px 0 var(--black); margin: 2rem 0; }
.findings-section h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.finding-card { background: var(--white); border: 2px solid var(--black); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; box-shadow: 2px 2px 0 var(--black); }
.finding-card:last-child { margin-bottom: 0; }
.finding-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.finding-card p { font-size: .95rem; line-height: 1.6; }
.triangle-card { padding: 1.5rem; border: 2px solid var(--black); border-radius: 12px; background: var(--white); box-shadow: 3px 3px 0 var(--black); }
.machinations-container { border: 2px solid var(--black); border-radius: 12px; overflow: hidden; box-shadow: 4px 4px 0 var(--black); margin: 1.5rem 0; }
.machinations-label { font-size: .85rem; color: var(--gray); text-align: center; padding: .5rem; border-top: 2px solid var(--black); background: #f5f5f5; }
@media (max-width: 720px) {
  .hero h1 { font-size: 1.5rem; }
  .grid-3 { grid-template-columns: 1fr; }
  .nav-chips { position: relative; top: 0; }
}