/* ==========================================================================
   year.css
   Styles used only on the year pages of the Scientific Initiatives
   (2026.html, …). The folding sections and link tags: components.css.
   ========================================================================== */

/* back to the year's row on the Initiatives page */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.25rem;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* the title has two lines (the year, then the places): a little smaller than on other pages */
.year-title {
  font-size: clamp(2.6rem, 7vw, 5.25rem);
}

.year-page {
  padding-top: .5rem;
}

.year-lead {
  max-width: 46rem;
  margin: 0 0 1.25rem;
  font-size: var(--fs-sub);
  color: var(--ink-soft);
}

/* the year's activities, each title linking to its section below */
.year-overview {
  display: grid;
  gap: 1.1rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
}

.year-overview li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .75rem;
}

.year-overview .icon {
  grid-row: span 2;
  margin-top: .3em;
  color: var(--icon);
}

.year-overview-title {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.year-overview-title:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.year-overview-text {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.year-overview + .year-lead {
  margin-bottom: 2.5rem;
}

/* inside a section */
.year-event {
  max-width: 52rem;
}

.year-event p {
  margin: 0;
}

.year-event a:not(.icon-link) {
  color: var(--link);
  text-decoration-color: var(--link-mark);
  text-underline-offset: .2em;
}

/* the "where / when" line: map marker, place and date, then the link as a small round button */
.year-event .where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

.year-event .where > .icon:first-child {
  color: var(--icon);
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  vertical-align: middle;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  text-decoration: none;
}

.icon-link .icon {
  font-size: .8em;
}

.icon-link:hover {
  color: var(--accent-ink);
  background: var(--accent);
}

@media print {
  .back-link {
    display: none;
  }
}

/* a second heading line in the page head (e.g. 2024-25, 2021), above the dates */
.year-tagline {
  font-weight: 600;
  color: var(--ink);
}

.year-tagline + .page-sub {
  margin-top: .35rem;
}

/* content outside the sections (opening lines; on 2017, all of it) */
.year-intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52rem;
  margin-bottom: 1.25rem;
}

.year-intro .year-lead,
.year-intro p {
  margin: 0;
}

/* pictures, lists and quotes inside the year pages */
.year-img {
  width: 100%;
  max-width: 52rem;
  border-radius: var(--img-radius);
}

.year-list {
  margin: 0;
  padding-left: 1.25rem;
}

.year-list li + li {
  margin-top: .3rem;
}

.year-list li::marker {
  color: var(--accent);
}

.year-event blockquote,
.year-intro blockquote {
  margin: 0;
  padding-left: 1.1rem;
  font-style: italic;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
}

.year-event > h3.item-sub + h3.item-sub {
  margin-top: -.5rem;                  /* two subtitle lines in a row stay together */
}

/* at the foot: ‹ the year before · Initiatives · the year after › (Mehul, 7 October 2026) */
.year-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}

.year-step {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.year-step.is-older {
  justify-self: start;
}

.year-step.is-newer {
  justify-self: end;
}

.year-step.is-older,
.year-step.is-newer {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.year-step.is-all {
  color: var(--ink-soft);
}

.year-step:hover,
.year-step:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .25em;
}