/* =========================
   Reset
   ========================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

/* =========================
   Theme variables
   ========================= */
:root{
  /* Palette (ONLY these colors) */
  --charcoal: #605b56ff;
  --atomic-tangerine: #ff7733ff;
  --muted-olive: #acc18aff;
  --wisteria-blue: #ADA8B6;
  --tea-green: #dafeb7ff;

  /* Layout */
  --radius: 18px;
  --card-w: 340px;
  --gap: 22px;
  --wrap: 90vw;

  /* Typography */
  --big-text: 26px;
  --title-text: 22px;
  --body-text: 18px;
  --small-text: 16px;
}

/* =========================
   Page base
   ========================= */
body{
  margin: 0;
  font-family: "Mouse Memoirs", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--charcoal);

  background:
    radial-gradient(1100px 650px at 12% 8%, var(--atomic-tangerine), transparent 60%),
    radial-gradient(900px 560px at 85% 18%, var(--muted-olive), transparent 62%),
    radial-gradient(1200px 720px at 45% 95%, var(--wisteria-blue), transparent 64%),
    linear-gradient(180deg, var(--tea-green) 0%, var(--muted-olive) 55%, var(--wisteria-blue) 100%);

  overflow-x: hidden;
}

header{
  height: 5vh;
  padding: 28px 18px 8px;
}

main{
  height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}

/* =========================
   Timeline wrapper
   ========================= */
.timeline{
  width: var(--wrap);
  margin: 0 auto;
}

/* =========================
   Horizontal track (desktop)
   ========================= */
.timeline-track{
  max-height: 90vh;
  position: relative;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  align-items: stretch;
  gap: var(--gap);

  padding: 28px 28px 26px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-padding: 28px;
  -webkit-overflow-scrolling: touch;

  border-radius: calc(var(--radius) + 6px);
  border: 2px solid var(--charcoal);
  box-shadow: 0 0 0 2px var(--tea-green) inset;

  /* Timeline line "sticks" because it's a background layer (doesn't scroll with content) */
  background:
    linear-gradient(90deg,
      transparent,
      var(--muted-olive),
      var(--atomic-tangerine),
      var(--wisteria-blue),
      transparent
    ) left 28px top 18px / calc(100% - 56px) 4px no-repeat,
    linear-gradient(180deg, var(--tea-green), var(--wisteria-blue));

  scrollbar-width: thin;
  scrollbar-color: var(--charcoal) var(--tea-green);
}

/* Pretty scrollbar (webkit) */
.timeline-track::-webkit-scrollbar{ height: 10px; }
.timeline-track::-webkit-scrollbar-track{
  background: var(--tea-green);
  border-radius: 999px;
}
.timeline-track::-webkit-scrollbar-thumb{
  background: var(--charcoal);
  border-radius: 999px;
}
.timeline-track::-webkit-scrollbar-thumb:hover{
  background: var(--atomic-tangerine);
}

/* =========================
   Items + dots
   ========================= */
.timeline-item{
  position: relative;
  scroll-snap-align: start;
  padding-top: 35px;
  height: 100%;
  display: flex;
}

.timeline-item .dot{
  position: absolute;
  top: 8px;
  left: 28px;

  width: 14px;
  height: 14px;
  border-radius: 999px;

  background: radial-gradient(circle at 30% 30%, var(--tea-green), var(--wisteria-blue));
  box-shadow:
    0 0 0 4px var(--atomic-tangerine),
    0 0 0 2px var(--charcoal) inset;
}

/* =========================
   Card
   ========================= */
.card{
  display: grid;
  gap: 12px;

  text-decoration: none;
  color: inherit;

  height: 100%;


  border-radius: var(--radius);
  padding: 14px;

  background: linear-gradient(180deg, var(--tea-green), var(--wisteria-blue));
  border: 2px solid var(--charcoal);

  transform: translateY(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.card:hover,
.card:focus-visible{
  transform: translateY(-6px);
  border-color: var(--atomic-tangerine);
  background: linear-gradient(180deg, var(--tea-green), var(--muted-olive));
  outline: none;
}

/* Meta row */
.meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  font-size: var(--big-text);
  color: var(--charcoal);
}

.meta time{
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

.meta span{
  padding: 6px 10px;
  border-radius: 999px;

  background: var(--muted-olive);
  border: 2px solid var(--atomic-tangerine);
  color: var(--charcoal);

  white-space: nowrap;
  font-size: var(--small-text);
}

/* Category pill scroller (hidden scrollbar) */
.label-holder{
  width: 200px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;

  overflow: auto;
  border-radius: 999px;

  -ms-overflow-style: none;
  scrollbar-width: none;
}
.label-holder::-webkit-scrollbar{ display: none; }

/* Thumbnail */
.thumb{
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;

  background: var(--wisteria-blue);
  border: 2px solid var(--charcoal);

  aspect-ratio: 16 / 9;
}

.thumb img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;

  transform: scale(1.02);
  transition: transform .25s ease;
}

.card:hover .thumb img,
.card:focus-visible .thumb img{
  transform: scale(1.06);
}

/* Typography */
h3{
  margin: 2px 0 0;
  font-size: var(--title-text);
  line-height: 1.25;
  letter-spacing: .2px;
  color: var(--charcoal);
}

.card p{
  margin: 0;
  font-size: var(--body-text);
  line-height: 1.35;
  color: var(--charcoal);
}

/* =========================
   Responsive: vertical list (mobile)
   ========================= */
@media (max-width: 800px){
  :root{
    --card-w: 100%;
    --wrap: 94vw;
  }

  .timeline-track{
    grid-auto-flow: row;
    grid-auto-columns: 1fr;

    overflow-x: hidden;
    overflow-y: auto;

    scroll-snap-type: y mandatory;
    scroll-padding: 18px;

    padding: 18px 14px;

    /* Vertical line "sticks" as a background layer */
    background:
      linear-gradient(180deg,
        transparent,
        var(--muted-olive),
        var(--atomic-tangerine),
        var(--wisteria-blue),
        transparent
      ) left 14px top 14px / 4px calc(100% - 28px) no-repeat,
      linear-gradient(180deg, var(--tea-green), var(--wisteria-blue));
  }

  .timeline-item{
    padding-top: 0;
    padding-left: 30px;
  }

  .timeline-item .dot{
    top: 20px;
    left: 6px;
  }

  .card{
    height: auto;
    width: 100%;
  }
}

/* =========================
   Accessibility
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .card,
  .thumb img{ transition: none !important; }
}