/* AnimatedTimes — homepage (magazine) layout. Loaded only on the front page.
   Shared primitives live in main.css; spacing uses the base-8 token ramp. */

.at-home { padding: var(--at-s4) 0 var(--at-s5); }

/* Hero */
.at-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--at-s3); align-items: center; margin-bottom: var(--at-s4); }
.at-hero__media { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--at-surface-2); }
.at-hero__body { display: flex; flex-direction: column; gap: var(--at-s1); }
.at-hero__title { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; margin: 0; }
.at-hero__title a { color: var(--at-text); }
.at-hero__title a:hover { color: var(--at-accent-hover); }
.at-hero__excerpt { color: var(--at-muted); margin: 0; line-height: 1.6; font-size: 1.0625rem; }

/* Top-stories row */
.at-toplist { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--at-s2); margin-bottom: var(--at-s5); padding-bottom: var(--at-s4); border-bottom: 1px solid var(--at-border); }
.at-toplist__item { display: flex; flex-direction: column; gap: var(--at-s1); }
.at-toplist__media { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--at-surface-2); }
.at-toplist__title { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--at-text); }
.at-toplist__item:hover .at-toplist__title { color: var(--at-accent-hover); }

/* Vertical section */
.at-section { margin: var(--at-s5) 0; }
.at-section__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--at-accent); padding-bottom: var(--at-s1); margin-bottom: var(--at-s3); }
.at-section__title { font-size: 22px; text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.at-section__more { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; color: var(--at-muted); }
.at-section__more:hover { color: var(--at-accent-hover); }

/* Responsive */
@media (max-width: 1024px) { .at-hero { grid-template-columns: 1fr; } .at-toplist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .at-toplist { grid-template-columns: 1fr; } }