:root {
  --ie-blue: #000066;
  --ie-electric: #47BFFF;
  --ie-ink: #172B36;
  --ie-text: #2F3A45;
  --ie-muted: #687381;
  --ie-paper: #F5F7FA;
  --ie-white: #FFFFFF;
  --autumn: #FF9932;
  --winter: #47BFFF;
  --spring: #3FCB7D;
  --summer: #FFC801;
  --line-soft: rgba(0, 0, 102, .18);
  --card-shadow: 10px 10px 0 rgba(0, 0, 102, .055);
  --axis-width: 170px;
  --card-width: min(420px, calc(50vw - 150px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--ie-text);
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 46%, #FFFFFF 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 102, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .55;
}

.hero {
  position: relative;
  padding: 48px clamp(24px, 6vw, 92px) 42px;
  color: var(--ie-white);
  background: var(--ie-blue);
}

.hero__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.hero__stamp {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .56);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 880px;
  margin: 22px 0 12px;
  font-size: clamp(2.25rem, 5.5vw, 5.1rem);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 400;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
  color: var(--ie-electric);
}

.hero h1 small {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  color: #ffffff;
}

.hero h1 span {
  display: block;
  color: var(--ie-electric);
  font-weight: 800;
}

.hero p {
  max-width: 620px;
  margin: 0;
  font-size: clamp(.95rem, 1.4vw, 1.2rem);
  line-height: 1.45;
  font-weight: 500;
}

.season-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.season-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 14px;
  color: var(--ie-white);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .09);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.season-link:hover,
.season-link:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .72);
  outline: none;
}

.season-link__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, .12);
}

.timeline {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 74px 0 110px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50px;
  bottom: 70px;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--autumn) 0 27%, var(--winter) 27% 43%, var(--spring) 43% 82%, var(--summer) 82% 100%);
}

.month-block {
  position: relative;
  min-height: 168px;
  padding: 26px 0 34px;
  scroll-margin-top: 26px;
}

.month-block::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(760px, 74vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-soft), transparent);
}

.month-axis {
  position: sticky;
  top: 18px;
  z-index: 3;
  width: var(--axis-width);
  margin: 0 auto 22px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.season-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--ie-blue);
  background: var(--ie-white);
  border: 3px solid var(--season-color);
  box-shadow: 0 0 0 7px #FFFFFF;
  font-size: 1.45rem;
  line-height: 1;
}

.month-name {
  display: inline-block;
  padding: 7px 11px;
  color: var(--ie-blue);
  background: var(--ie-white);
  border: 1px solid rgba(0, 0, 102, .16);
  box-shadow: 6px 6px 0 rgba(0, 0, 102, .05);
  font-size: clamp(.82rem, 1.15vw, 1rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.month-events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--axis-width) + 26px);
  row-gap: 16px;
  align-items: start;
}

.event-card {
  --accent: var(--ie-electric);
  position: relative;
  width: var(--card-width);
  min-height: 112px;
  padding: 18px 20px 17px;
  background: var(--ie-white);
  border: 1px solid rgba(0, 0, 102, .16);
  box-shadow: var(--card-shadow);
  animation: lift .42s ease both;
  animation-delay: var(--delay);
}

.event-card.side-left {
  grid-column: 1;
  justify-self: end;
}

.event-card.side-right {
  grid-column: 2;
  justify-self: start;
}

.event-connector {
  position: absolute;
  top: 34px;
  height: 2px;
  width: calc((var(--axis-width) / 2) + 28px);
  background: var(--accent);
}

.event-dot {
  position: absolute;
  top: 26px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  border: 4px solid var(--ie-white);
  outline: 2px solid var(--accent);
}

.event-card.side-left .event-connector { right: calc((var(--axis-width) / -2) - 28px); }
.event-card.side-left .event-dot { right: calc((var(--axis-width) / -2) - 38px); }
.event-card.side-right .event-connector { left: calc((var(--axis-width) / -2) - 28px); }
.event-card.side-right .event-dot { left: calc((var(--axis-width) / -2) - 38px); }

.event-date {
  display: inline-block;
  color: var(--ie-blue);
  font-size: .7rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-card h2 {
  margin: 7px 0 0;
  color: var(--ie-blue);
  font-size: clamp(.98rem, 1.38vw, 1.24rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.03em;
}

.event-location {
  margin: 10px 0 0;
  color: var(--ie-muted);
  font-size: .74rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.season-autumn { --season-color: var(--autumn); }
.season-winter { --season-color: var(--winter); }
.season-spring { --season-color: var(--spring); }
.season-summer { --season-color: var(--summer); }

.event-autumn { --accent: var(--autumn); }
.event-winter { --accent: var(--winter); }
.event-spring { --accent: var(--spring); }
.event-summer { --accent: var(--summer); }

.is-tbc {
  border-style: dashed;
  background: repeating-linear-gradient(135deg, #FFFFFF 0, #FFFFFF 10px, rgba(0, 0, 102, .025) 10px, rgba(0, 0, 102, .025) 20px);
}

.is-tbc .event-date::after {
  content: ' · TBC';
  color: var(--accent);
}

@keyframes lift {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  :root { --axis-width: 118px; --card-width: min(360px, calc(50vw - 92px)); }
  .timeline { width: calc(100% - 28px); }
  .month-events { column-gap: calc(var(--axis-width) + 18px); }
  .event-card { padding: 16px 17px; min-height: 106px; }
}

@media (max-width: 740px) {
  :root { --axis-width: 74px; --card-width: 100%; }
  .hero { padding: 38px 20px 32px; }
  .hero h1 { font-size: clamp(2rem, 10vw, 3.3rem); }
  .season-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .season-link { flex: 0 0 auto; }
  .timeline { width: calc(100% - 24px); padding: 42px 0 78px; }
  .timeline::before { left: 36px; top: 34px; bottom: 42px; }
  .month-block { padding: 22px 0 30px 82px; min-height: 0; }
  .month-block::before { left: 36px; width: calc(100% - 36px); transform: none; }
  .month-axis {
    position: relative;
    top: auto;
    width: auto;
    margin: 0 0 18px;
    justify-items: start;
    text-align: left;
  }
  .season-icon {
    position: absolute;
    left: -68px;
    top: -4px;
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px #FFFFFF;
  }
  .month-events { display: grid; grid-template-columns: 1fr; row-gap: 14px; }
  .event-card,
  .event-card.side-left,
  .event-card.side-right {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }
  .event-connector,
  .event-card.side-left .event-connector,
  .event-card.side-right .event-connector {
    left: -46px;
    right: auto;
    width: 46px;
  }
  .event-dot,
  .event-card.side-left .event-dot,
  .event-card.side-right .event-dot {
    left: -56px;
    right: auto;
  }
}

@media print {
  body { background: #fff; }
  body::before { display: none; }
  .hero { padding: 36px; }
  .season-nav { display: none; }
  .timeline { width: 100%; padding: 34px 24px; }
  .month-axis { position: relative; top: auto; }
  .event-card { break-inside: avoid; box-shadow: none; }
}

/* --- V2 refinement: flat seasonal icons + true staggered alternation --- */
.season-link__icon,
.season-icon {
  color: var(--season-color, currentColor);
}

.season-link--autumn { --season-color: var(--autumn); }
.season-link--winter { --season-color: var(--winter); }
.season-link--spring { --season-color: var(--spring); }
.season-link--summer { --season-color: var(--summer); }

.season-link__icon {
  background: transparent;
}

.season-link__icon svg,
.season-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.season-icon {
  padding: 9px;
  color: var(--season-color);
}

.month-events {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.event-card {
  margin-top: var(--event-offset, 0px);
  min-height: auto;
}

.event-card.side-left {
  align-self: flex-start;
  margin-left: calc(50% - var(--axis-width) / 2 - var(--card-width) - 34px);
  margin-right: 0;
}

.event-card.side-right {
  align-self: flex-start;
  margin-left: calc(50% + var(--axis-width) / 2 + 34px);
  margin-right: 0;
}

.event-card.side-left .event-connector {
  right: calc(-1 * (var(--axis-width) / 2 + 34px));
  width: calc(var(--axis-width) / 2 + 34px);
  background: var(--accent);
}

.event-card.side-right .event-connector {
  left: calc(-1 * (var(--axis-width) / 2 + 34px));
  width: calc(var(--axis-width) / 2 + 34px);
  background: var(--accent);
}

.event-card.side-left .event-dot {
  right: calc(-1 * (var(--axis-width) / 2 + 43px));
  background: var(--accent);
  outline-color: var(--accent);
}

.event-card.side-right .event-dot {
  left: calc(-1 * (var(--axis-width) / 2 + 43px));
  background: var(--accent);
  outline-color: var(--accent);
}

.is-tbc .event-dot {
  background: var(--ie-white);
}

.event-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.event-card.side-left::before {
  left: auto;
  right: 0;
}

@media (max-width: 980px) {
  .event-card.side-left {
    margin-left: calc(50% - var(--axis-width) / 2 - var(--card-width) - 22px);
  }

  .event-card.side-right {
    margin-left: calc(50% + var(--axis-width) / 2 + 22px);
  }

  .event-card.side-left .event-connector {
    right: calc(-1 * (var(--axis-width) / 2 + 22px));
    width: calc(var(--axis-width) / 2 + 22px);
  }

  .event-card.side-right .event-connector {
    left: calc(-1 * (var(--axis-width) / 2 + 22px));
    width: calc(var(--axis-width) / 2 + 22px);
  }

  .event-card.side-left .event-dot {
    right: calc(-1 * (var(--axis-width) / 2 + 31px));
  }

  .event-card.side-right .event-dot {
    left: calc(-1 * (var(--axis-width) / 2 + 31px));
  }
}

@media (max-width: 740px) {
  .month-events {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .event-card,
  .event-card.side-left,
  .event-card.side-right {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    align-self: stretch;
  }

  .event-card.side-left::before {
    left: 0;
    right: auto;
  }

  .event-card.side-left .event-connector,
  .event-card.side-right .event-connector {
    left: -46px;
    right: auto;
    width: 46px;
  }

  .event-card.side-left .event-dot,
  .event-card.side-right .event-dot {
    left: -56px;
    right: auto;
  }
}

/* --- Final refinements requested: event title weight, compact cards, corrected seasonal axis --- */
.timeline::before {
  background: linear-gradient(
    to bottom,
    var(--summer) 0% 7%,
    var(--autumn) 7% 39%,
    var(--winter) 39% 59%,
    var(--spring) 59% 92%,
    var(--summer) 92% 100%
  );
}

.event-card h2 {
  font-weight: 700;
}

.month-events {
  gap: 2px;
}

.event-card {
  margin-top: var(--event-offset, 0px);
}

@media (max-width: 740px) {
  .month-events {
    row-gap: 6px;
  }
}