/* Homepage-only: social ticker, experience bento, week cards */

/* Instagram ticker: seamless marquee, pauses on hover, static for reduced motion */
.ig-ticker { background: var(--ink); padding: 18px 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); }
.ig-track { display: flex; gap: 12px; width: max-content; animation: ig-scroll 70s linear infinite; }
.ig-ticker:hover .ig-track { animation-play-state: paused; }
.ig-track .ig { width: 190px; flex: 0 0 auto; aspect-ratio: 9/14; }
@keyframes ig-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ig-track { animation: none; } .ig-ticker { overflow-x: auto; } }

/* Experience bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 14px; }
.tile { position: relative; border-radius: 12px; overflow: hidden; background: var(--ink); color: #fff; }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile.tall { grid-row: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,22,58,0) 35%, rgba(21,22,58,.92)); }
.tile .cap { position: absolute; inset: auto 0 0 0; padding: 20px; z-index: 1; }
.tile h3 { font-size: clamp(22px, 2.2vw, 30px); }
.tile.big h3 { font-size: clamp(32px, 3.6vw, 52px); }
.tile p { font-size: 14px; opacity: .85; margin-top: 6px; max-width: 42ch; }

/* Week cards */
.week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.day { border: 1px solid rgba(255,255,255,.14); border-radius: 18px 18px 8px 8px; padding: 24px; background: rgba(255,255,255,.03); }
.day .num { font-family: var(--display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); font-size: 14px; }
.day .dname { font-family: var(--display); font-weight: 800; font-size: 56px; line-height: 1; text-transform: uppercase; margin: 4px 0; }
.day h3 { font-size: 24px; margin-bottom: 14px; color: rgba(255,255,255,.8); }
.day ul { list-style: none; display: grid; gap: 8px; font-size: 15px; color: rgba(255,255,255,.8); }
.day li { padding-left: 18px; position: relative; }
.day li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); }

@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, 1fr); } .week { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .bento { grid-auto-rows: 200px; }
  .tile.big { grid-column: span 2; grid-row: span 1; }
  .tile.tall { grid-row: span 1; }
  .week { grid-template-columns: 1fr; }
  .ig-track .ig { width: 150px; }
}