/* ==================================================
   Base
================================================== */

:root {
  --text: #212529;
  --muted: #6c757d;
  --line: #ced4da;
  --line-active: #212529;
  --background-subtle: #f8f9fa;
}

body {
  color: var(--text);
  background: #fff;
}

button {
  font: inherit;
}


/* ==================================================
   Hero
================================================== */

.hero-image {
  display: block;
  width: 100%;
  height: min(55vw, 700px);
  object-fit: cover;
}

.trip-date {
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ==================================================
   Trip Timeline
================================================== */

.trip-section {
  overflow: hidden;
}

.trip-timeline {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 3rem;

  margin: 0 auto 5rem;
  max-width: 1000px;
}


/*
   Horizontal line behind the three markers.
*/

.trip-timeline::before {
  content: "";

  position: absolute;

  top: 8px;
  left: 16.666%;
  right: 16.666%;

  height: 1px;

  background: var(--line);
}


/* Individual stage */

.trip-stage {
  position: relative;
  text-align: center;
}


/* Dot on timeline */

.trip-stage-marker {
  position: relative;
  z-index: 2;

  width: 17px;
  height: 17px;

  margin: 0 auto 1.25rem;

  border: 2px solid var(--line-active);
  border-radius: 50%;

  background: #fff;
}


/* Stage title */

.trip-stage-title {
  margin-bottom: 1.25rem;

  font-size: 0.9rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* Links */

.trip-links {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.5rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.trip-link {
  padding: 0.15rem 0.25rem;

  border: 0;

  color: var(--muted);
  background: transparent;

  text-decoration: none;

  transition:
    color 150ms ease,
    transform 150ms ease;
}

.trip-link:hover {
  color: var(--text);
}

.trip-link:focus-visible {
  color: var(--text);

  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.trip-link.is-active {
  color: var(--text);
  font-weight: 600;
}


/* ==================================================
   Content Viewer
================================================== */

.trip-content {
  border-top: 1px solid var(--line);

  padding: 4rem 0;
}

.trip-content-inner {
  max-width: 760px;
  margin: 0 auto;
}

.trip-content-eyebrow {
  margin-bottom: 0.5rem;

  color: var(--muted);

  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trip-content h2 {
  margin-bottom: 1.5rem;
}


/* ==================================================
   Footer
================================================== */

.site-footer {
  color: var(--muted);
}


/* ==================================================
   Mobile Timeline
================================================== */

@media (max-width: 767.98px) {

  .hero-image {
    height: 60vh;
    min-height: 420px;
  }

  .trip-heading {
    text-align: left !important;
  }

  .trip-timeline {
    display: block;

    margin-left: 0.5rem;
    margin-bottom: 4rem;

    padding-left: 2.25rem;
  }


  /*
     Vertical timeline line.
  */

  .trip-timeline::before {
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: auto;

    width: 1px;
    height: auto;
  }


  .trip-stage {
    position: relative;

    margin-bottom: 3rem;

    text-align: left;
  }

  .trip-stage:last-child {
    margin-bottom: 0;
  }


  .trip-stage-marker {
    position: absolute;

    top: 0;
    left: -2.25rem;

    margin: 0;
  }


  .trip-stage-title {
    margin-bottom: 1rem;
  }


  .trip-links {
    align-items: flex-start;
    gap: 0.65rem;
  }


  .trip-link {
    padding-left: 0;
  }


  .trip-content {
    padding-top: 3rem;
  }

}

/* ==================================================
   Songs
================================================== */

.song-list {
  margin: 2rem 0 0;
  padding: 0;

  list-style: none;
}

.song {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 1rem;

  align-items: start;

  padding: 1.25rem 0;

  border-top: 1px solid var(--line);
}

.song:last-child {
  border-bottom: 1px solid var(--line);
}

.song-number,
.song-time {
  color: var(--muted);

  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.song-title {
  margin-bottom: 0.2rem;

  font-weight: 600;
}

.song-artist {
  color: var(--muted);
  font-size: 0.95rem;
}

.song-time {
  text-align: right;
}


/* Mobile */

@media (max-width: 575.98px) {

  .song {
    grid-template-columns: 2rem 1fr auto;
    gap: 0.75rem;
  }

}

/* ==================================================
   Packing List
================================================== */

.packing-list {
  margin-top: 2rem;
}

.packing-group {
  margin-bottom: 3rem;
}

.packing-group:last-child {
  margin-bottom: 0;
}

.packing-group-title {
  margin-bottom: 1rem;

  color: var(--muted);

  font-size: 0.8rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.packing-items {
  margin: 0;
  padding: 0;

  list-style: none;

  border-top: 1px solid var(--line);
}

.packing-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;

  padding: 0.9rem 0;

  border-bottom: 1px solid var(--line);
}

.packing-check {
  color: var(--muted);

  font-size: 0.9rem;
  line-height: 1.5;
}

.packing-item-title {
  font-weight: 500;
}

.packing-note {
  margin-top: 0.15rem;

  color: var(--muted);

  font-size: 0.9rem;
}

/* ==================================================
   Schedule
================================================== */

.schedule {
  margin-top: 2rem;
}

.schedule-day {
  padding: 0 0 3rem;
  margin-bottom: 3rem;

  border-bottom: 1px solid var(--line);
}

.schedule-day-header {
  margin-bottom: 2rem;
}

.schedule-date {
  margin-bottom: 0.35rem;

  color: var(--muted);

  font-size: 0.8rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.schedule-day-header h3 {
  margin: 0;

  font-size: 1.5rem;
  font-weight: 500;
}

.schedule-item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;

  padding: 0.7rem 0;
}

.schedule-label {
  color: var(--muted);

  font-size: 0.8rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-detail {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.schedule-detail strong {
  font-weight: 600;
}

.schedule-note {
  color: var(--muted);
  font-size: 0.9rem;
}


/* Optional / Unscheduled */

.schedule-optional {
  padding-top: 1rem;
}

.schedule-optional-header {
  margin-bottom: 2rem;
}

.schedule-optional-header h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

.schedule-optional-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3rem;
}

.schedule-optional-grid h4 {
  margin-bottom: 0.75rem;

  color: var(--muted);

  font-size: 0.8rem;
  font-weight: 600;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.schedule-optional-grid ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.schedule-optional-grid li {
  padding: 0.3rem 0;

  color: var(--muted);
}

.schedule-optional-grid .was-selected {
  color: var(--text);
  font-weight: 500;
}


/* Mobile */

@media (max-width: 767.98px) {

  .schedule-item {
    grid-template-columns: 1fr;
    gap: 0.2rem;

    padding: 0.85rem 0;
  }

  .schedule-label {
    margin-bottom: 0.15rem;
  }

  .schedule-optional-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

}

.expense-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.expense-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.expense-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.expense-name {
  font-weight: 500;
}

.expense-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.expense-amount {
  text-align: right;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* ==================================================
   Map
================================================== */

.map-artifact {
  margin-top: 2rem;
}

.map-meta {
  margin: 2rem 0;
}

.map-meta > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;

  padding: 0.7rem 0;

  border-top: 1px solid var(--line);
}

.map-meta > div:last-child {
  border-bottom: 1px solid var(--line);
}

.map-meta dt {
  color: var(--muted);

  font-size: 0.8rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-meta dd {
  margin: 0;
}

.map-download {
  margin-top: 2rem;
}

/* ==================================================
   Photographs
================================================== */

.photo-essay {
  width: min(960px, calc(100vw - 2rem));

  margin-top: 3rem;
  margin-left: 50%;

  transform: translateX(-50%);
}

.photo {
  margin: 0 0 3rem;
}

.photo img {
  display: block;

  width: 100%;
  height: auto;
}

.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

  margin-bottom: 3rem;
}

.photo-pair .photo {
  margin: 0;
}


/* The fern comparison benefits from a little more space. */

.photo-pair-vertical {
  gap: 1.5rem;

  width: 85%;

  margin-right: auto;
  margin-bottom: 3rem;
  margin-left: auto;
}


@media (max-width: 575.98px) {

  .photo-essay {
    width: calc(100vw - 2rem);
  }

  .photo-pair:not(.photo-pair-vertical) {
    grid-template-columns: 1fr;
  }

}

/* ==================================================
   Reflections
================================================== */

.reflection {
  margin-top: 2rem;
}

.reflection-header {
  margin-bottom: 2.5rem;
}

.reflection-header h3 {
  margin: 0;

  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
}

.reflection-body {
  max-width: 680px;
}

.reflection-body p {
  margin-bottom: 1.5rem;

  font-size: 1.05rem;
  line-height: 1.75;
}

.reflection-body p:first-child {
  font-size: 1.15rem;
}

.reflection-body p:last-child {
  margin-bottom: 0;
}

.reflection-body em {
  font-style: italic;
}


/* Mobile */

@media (max-width: 575.98px) {

  .reflection-header {
    margin-bottom: 2rem;
  }

  .reflection-body p {
    font-size: 1rem;
    line-height: 1.7;
  }

}