/* Project One Heart: calm, quiet, one flame */
.heart-hero { padding-bottom: 24px; }
.heart-tag { font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.2 var(--display); color: var(--cypress); margin: -.2em 0 .7em; }
.heart { padding: 24px 0 clamp(64px, 9vw, 120px); }
.heart__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.heart__flame { position: sticky; top: 120px; aspect-ratio: 3 / 4; border-radius: 999px 999px var(--r-m) var(--r-m); background: linear-gradient(180deg, #1A2A25 0%, #16241F 100%); overflow: hidden; }
.flame__c { position: absolute; inset: 0; width: 100%; height: 100%; }
.flame__still { position: absolute; left: 30%; width: 40%; bottom: 20%; }
.heart__flame.is-live .flame__still { display: none; }
.pillars { list-style: none; margin: 24px 0 40px; padding: 0; display: grid; gap: 0; }
.pillars li { padding: 22px 0; box-shadow: inset 0 1px 0 var(--line); }
.pillars h3 { margin-bottom: .25em; }
.pillars p { color: var(--ink-2); margin: 0; }
.helps { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.helps li { padding: 12px 0 12px 22px; position: relative; box-shadow: inset 0 -1px 0 var(--line); font-weight: 500; }
.helps li::before { content: ''; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cypress); }
@media (max-width: 820px) {
  .heart__in { grid-template-columns: 1fr; }
  .heart__flame { position: relative; top: 0; aspect-ratio: 4 / 3; max-width: 420px; }
  .helps { grid-template-columns: 1fr; }
}