/* Teens */
.fel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.facts { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 8px; }
.facts li { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--line); }
.facts b { color: var(--cypress); }
.fel__apply { font-size: 1rem; }
@media (max-width: 860px) { .fel { grid-template-columns: 1fr; } }

.run { padding: clamp(22px, 3vw, 34px); background: var(--glass-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--glass-ring), var(--glass-shadow); border-radius: var(--r-m); }
.run__h { font: 700 1.0625rem/1.35 var(--text); margin-bottom: 26px; }
.run__track { --fill: 0px; position: relative; padding: 0 0 4px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: 8px; }
.run.is-drag .run__track { cursor: grabbing; }
.run__track::before, .run__track::after { content: ''; position: absolute; left: 0; top: 13px; height: 4px; border-radius: 2px; }
.run__track::before { right: 0; background: var(--line); }
.run__track::after { width: var(--fill); background: var(--cypress); }
.run__weeks { list-style: none; margin: 0 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); position: relative; z-index: 1; }
.run__weeks li { display: grid; justify-items: center; gap: 10px; }
.run__weeks li::before { content: ''; width: 18px; height: 18px; margin-top: 6px; border-radius: 50%; background: var(--bg-top); box-shadow: inset 0 0 0 2px var(--sage-d); transition: background-color .2s linear, box-shadow .2s linear; }
.run__weeks li.is-done::before { background: var(--candle); box-shadow: inset 0 0 0 2px var(--candle-ink); }
.run__weeks span { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.run__thumb { position: absolute; left: -13px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-top); box-shadow: 0 0 0 2px var(--cypress), 0 4px 10px rgba(22, 36, 31, .25); z-index: 2; will-change: transform; }
.run__track:focus-visible .run__thumb { box-shadow: 0 0 0 2px var(--cypress), 0 0 0 7px rgba(52, 84, 76, .25); }
html.no-js .run__thumb { display: none; }
html.no-js .run__weeks li::before { background: var(--candle); }
.run__total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 26px 0 0; }
.run__n { font: 400 var(--s4)/1 var(--display); color: var(--ink); letter-spacing: -.02em; display: inline-block; }
.run.bump .run__n { animation: bump .32s var(--out); }
@keyframes bump { 0% { transform: translateY(4px); opacity: .6; } 100% { transform: none; opacity: 1; } }
.run__of { color: var(--ink-2); }
.run__hint { font-size: .875rem; color: var(--ink-2); margin: 10px 0 0; }
@media (max-width: 520px) {
  .run__weeks { margin-left: 18px; }
  .run__weeks span { font-size: .6875rem; writing-mode: vertical-rl; transform: rotate(180deg); }
  .run__n { font-size: var(--s3); }
}

.clubs { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.clubs__photos { position: relative; padding-bottom: 18%; }
.clubs__photos .arch { aspect-ratio: 4 / 4.4; width: 82%; }
.clubs__inset { position: absolute; right: 0; bottom: 0; width: 48%; border-radius: var(--r-m); box-shadow: 0 0 0 6px var(--bg-b), 0 24px 40px -20px rgba(0, 0, 0, .35); }
.past-h { font: italic 500 1.0625rem/1.3 var(--text); color: var(--cypress); margin-top: 1.8em; }
.past { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.past li { display: grid; gap: 2px; color: var(--ink-2); }
.past b { color: var(--ink); }
@media (max-width: 860px) { .clubs { grid-template-columns: 1fr; } }