/* My Travel Chronicle — listings.
   The journal archive, the review index and a trip's page. Loaded only on
   those pages; article pages never pay for it. Tokens come from main.css.

   The shape is a LEDGER: a fixed left column (date, or score) that the eye can
   run down, a body column, and a photograph on the right shown whole — never
   cropped — at a fixed height so rows keep a common rhythm. Years divide the
   journal. A trip is one row with its parts listed beneath it. */

/* ---------- filters (a plain GET form; htmx is an enhancement) ---------- */

.facets {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end;
  margin-top: 36px;
  max-width: 1100px;
}
.facets__field { display: flex; flex-direction: column; gap: 4px; }
.facets label {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-kicker);
}
.facets select {
  font-family: var(--ui); font-size: 14px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 0 22px 0 0; min-height: 44px; border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.facets select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.facets__go {
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--ground);
  border: 0; padding: 0 20px; min-height: 44px; cursor: pointer;
}

/* ---------- the place picker (a searchable combobox) ---------- */

.place-picker { position: relative; min-width: 260px; }
.place-picker__control { position: relative; }
.place-picker__input {
  width: 100%; font-family: var(--ui); font-size: 14px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0; padding: 0 36px 0 0; min-height: 44px;
}
.place-picker__input::placeholder { color: var(--ink); opacity: 1; }
.place-picker__input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.place-picker__clear {
  position: absolute; right: 0; top: 0; bottom: 0; width: 36px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--ui); font-size: 20px; line-height: 1; color: var(--ink-meta);
}
.place-picker__clear:hover { color: var(--accent); }
.place-picker__list {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0;
  min-width: 100%; width: max-content; max-width: min(380px, 90vw);
  max-height: 340px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px 0;
  background: var(--ground); border: 1px solid var(--hairline);
  box-shadow: 0 10px 28px rgba(22, 19, 15, 0.12);
}
.place-picker__group {
  font-family: var(--ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-kicker);
  padding: 12px 14px 4px;
}
.place-picker__group:first-child { padding-top: 6px; }
.place-picker__option {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  padding: 9px 14px; font-family: var(--ui); font-size: 15px; color: var(--ink);
}
.place-picker__option.is-active { background: var(--panel); }
.place-picker__option[aria-selected="true"] .place-picker__label { font-weight: 600; }
.place-picker__label { white-space: nowrap; }
.place-picker__context { font-size: 12.5px; color: var(--ink-quiet); }
.place-picker__empty { padding: 10px 14px; font-family: var(--ui); font-size: 14px; color: var(--ink-quiet); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the ledger ---------- */

.journal-index .facets,
.journal-index .ledger-year,
.journal-index .ledger__count,
.journal-index .ledger__pages,
.reviews-index .ledger,
.reviews-index .ledger__count { max-width: 1100px; }

.ledger__count {
  font-family: var(--ui); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-meta); margin: 28px 0 0;
}
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger__count + .ledger { margin-top: 4px; }

/* A year is a section with its own rule, so the archive reads in chapters. */
.ledger-year { margin-top: 40px; }
.ledger__count + .ledger-year { margin-top: 8px; }
.ledger-year__head { padding: 8px 0 0; }
.ledger-year__label {
  font-family: var(--display); font-variation-settings: var(--display-set);
  font-size: 34px; font-weight: 500; line-height: 1; margin: 0;
}
.ledger-year__label--words { font-size: 28px; }

.ledger__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 220px;
  grid-template-areas: "date body thumb";
  column-gap: 36px; align-items: start;
  padding: 30px 0 28px; border-bottom: var(--rule);
}
.ledger__row:hover .ledger__title a { color: var(--accent); }

/* The left column: day large, month small — "6 / SEP" — so a run of rows
   reads like a diary's margin. */
.ledger__date { grid-area: date; padding-top: 6px; }
.ledger__date time,
.ledger__range {
  display: block; font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-meta);
}
.ledger__date b {
  display: block; font-family: var(--display); font-variation-settings: var(--display-set);
  font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: 0;
  color: var(--ink); margin-bottom: 6px;
}
.ledger__range { padding-top: 4px; line-height: 1.5; }

/* Reviews put the score there instead — it is what the reader came for. */
.ledger__score { grid-area: date; padding-top: 2px; }
.ledger__score-value {
  display: block; font-family: var(--display); font-variation-settings: var(--display-set);
  font-size: 40px; font-weight: 500; line-height: 1; color: var(--ink);
}
.ledger__score-of {
  display: block; font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-meta); margin-top: 6px;
}

.ledger__body { grid-area: body; min-width: 0; }
.ledger__label {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-kicker);
  margin: 0 0 8px;
}
.ledger__label a { color: inherit; }
.ledger__label a:hover { color: var(--accent); }
.ledger__title {
  font-family: var(--display); font-variation-settings: var(--display-set);
  font-size: 28px; font-weight: 500; line-height: 1.15; margin: 0 0 8px;
  text-wrap: balance;
}
.ledger__title a { color: var(--ink); }
.ledger__title a:hover { color: var(--accent); text-decoration: none; }
.ledger__dek {
  margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-dek);
  max-width: 62ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ledger__meta {
  font-family: var(--ui); font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink-meta); margin: 10px 0 0; line-height: 1.7;
}
.ledger__meta .keyword-link {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.ledger__meta .keyword-link:hover { color: var(--accent); }
.ledger__read { margin: 6px 0 0; }
.ledger__read a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}

/* The photograph is shown whole. A fixed HEIGHT keeps the rows in rhythm;
   width follows the frame, so a portrait sits narrow and a landscape wide,
   and nothing is cut out of either. */
.ledger__thumb { grid-area: thumb; justify-self: end; padding-top: 6px; }
.ledger__thumb img {
  display: block; height: 150px; width: auto; max-width: 220px;
  object-fit: contain; object-position: top right;
}

.ledger__empty { color: var(--ink-quiet); padding: 28px 0; margin: 0; font-size: 18px; }

/* A trip: one row, its parts beneath it. */
.trip-parts { list-style: none; margin: 14px 0 0; padding: 0; max-width: 62ch; }
.trip-parts li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 12px; align-items: baseline;
  padding: 4px 0;
  font-size: 17px; line-height: 1.4;
}
.trip-parts a { color: var(--ink); }
.trip-parts a:hover { color: var(--accent); }
.trip-parts__n,
.trip-parts__date {
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.08em;
  color: var(--ink-meta);
}
.trip-parts__date { white-space: nowrap; }

/* ---------- a trip's page ---------- */

.trip-facts {
  display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 24px 0 0;
  font-family: var(--ui); font-size: 14px; color: var(--ink);
}
.trip-facts div { display: flex; flex-direction: column; gap: 4px; }
.trip-facts dt {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-kicker);
}
.trip-facts dd { margin: 0; }

/* ---------- pagination ---------- */

.ledger__pages {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; margin-top: 28px;
  font-family: var(--ui); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ledger__pages a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ledger__pages a:last-child { justify-self: end; }
.ledger__pages-where { color: var(--ink-meta); }

.keyword-back { font-family: var(--ui); font-size: 13px; color: var(--ink-meta); margin: 12px 0 0; }
.ledger + .keyword-back, section + .keyword-back { margin-top: 36px; }
.keyword-back a { color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- reflow ---------- */

@media (max-width: 900px) {
  .ledger__row { grid-template-columns: 96px minmax(0, 1fr) 160px; column-gap: 24px; }
  .ledger__thumb img { height: 120px; max-width: 160px; }
  .ledger__title { font-size: 25px; }
}

@media (max-width: 700px) {
  .facets { gap: 16px 24px; }
  .facets__field { flex: 1 1 140px; }
  .facets select { width: 100%; }
  .place-picker { min-width: 0; }

  .ledger__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "date" "body" "thumb";
    row-gap: 8px; padding: 24px 0 22px;
  }
  .ledger__date, .ledger__score { padding-top: 0; }
  .ledger__date time { display: flex; align-items: baseline; gap: 8px; }
  .ledger__date b { display: inline; font-size: 22px; margin: 0; }
  .ledger__score { display: flex; align-items: baseline; gap: 8px; }
  .ledger__score-value { font-size: 30px; }
  .ledger__score-of { margin: 0; }
  .ledger__title { font-size: 24px; }
  .ledger__thumb { justify-self: start; padding-top: 4px; }
  .ledger__thumb img { height: auto; max-height: 220px; max-width: 100%; object-position: left top; }
  .trip-parts li { grid-template-columns: 24px minmax(0, 1fr); }
  .trip-parts__date { grid-column: 2; }
  .ledger-year__label { font-size: 30px; }
}