/* Travel News list — newspaper front page. Tokens from landing.css. */
.tn {
  --tn-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  max-width: 1100px;
  margin: 68px auto 0; /* fixed Nav height */
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 2rem) clamp(3rem, 7vw, 5rem);
  color: var(--ink);
}
.tn a { color: inherit; text-decoration: none; }
.tn img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Masthead */
.tn-masthead { text-align: center; padding-bottom: 1rem; border-bottom: 3px double var(--ink); margin-bottom: 2rem; }
.tn-masthead-title { font-family: var(--tn-serif); font-weight: 700; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.1; margin: 0; }
.tn-masthead-date { margin: 0.5rem 0 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: capitalize; color: var(--muted); }

/* Shared story bits */
.tn-thumb { display: block; overflow: hidden; background: var(--cream); }
.tn-text { display: block; }
.tn-date { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.tn-headline { font-family: var(--tn-serif); font-weight: 700; line-height: 1.25; margin: 0 0 0.5rem; }
.tn-standfirst { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.95rem; }
.tn-lead:hover .tn-headline, .tn-card:hover .tn-headline, .tn-row:hover .tn-headline { color: var(--ochre); }
.tn a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

/* Lead story */
.tn-lead { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.75rem; align-items: center; padding-bottom: 2rem; }
.tn-lead .tn-thumb { aspect-ratio: 16 / 10; }
.tn-lead .tn-headline { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.tn-lead .tn-standfirst { font-size: 1.05rem; }

/* Secondary stories */
.tn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tn-card { display: block; }
.tn-card .tn-thumb { aspect-ratio: 3 / 2; margin-bottom: 0.75rem; }
.tn-card .tn-headline { font-size: 1.2rem; }

/* More stories */
.tn-more { margin-top: 2.5rem; }
.tn-more-title { font-family: var(--tn-serif); font-size: 1.4rem; margin: 0 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.tn-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 1.25rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--border); min-height: 44px; }
.tn-row .tn-thumb { order: 2; width: 128px; height: 88px; }
.tn-row .tn-headline { font-size: 1.1rem; margin-bottom: 0.3rem; }
.tn-row .tn-standfirst { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tn-empty { text-align: center; padding: 5rem 1rem; color: var(--muted); }
.tn-empty p { font-family: var(--tn-serif); font-size: 1.4rem; color: var(--ink); margin: 0 0 0.5rem; }


  .tn-lead { grid-template-columns: minmax(0, 1fr); }
  .tn-cards { grid-template-columns: minmax(0, 1fr); }
  .tn-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: start; }
  .tn-card .tn-thumb { margin: 0; aspect-ratio: 4 / 3; }


@media (max-width: 560px){
  .tn-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .tn-row .tn-thumb { width: 96px; height: 72px; }
}

/* Stories without a cover image: no reserved image column */
.tn-lead.tn-nothumb { grid-template-columns: minmax(0, 1fr); }
.tn-row.tn-nothumb { grid-template-columns: minmax(0, 1fr); }

  .tn-card.tn-nothumb { display: block; }


/* Mobile field-guide: travel journal index */
.tn {
  width: 100%;
  margin-top: 60px;
  padding: 28px var(--m-gutter) 56px;
}
.tn-masthead {
  margin-bottom: 20px;
  padding-bottom: 14px;
  text-align: left;
  border-bottom: 1px solid var(--m-ink);
}
.tn-masthead::before {
  content: "FIELD NOTES / JOURNAL";
  display: block;
  margin-bottom: 10px;
  color: var(--m-departure);
  font: 800 11px/1 var(--m-mono);
  letter-spacing: 0.1em;
}
.tn-masthead-title {
  font-size: clamp(38px, 12vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.tn-masthead-date { font-family: var(--m-mono); font-size: 10px; }
.tn-lead {
  display: block;
  padding-bottom: 26px;
}
.tn-lead .tn-thumb {
  aspect-ratio: 4 / 3;
  margin: 0 calc(var(--m-gutter) * -1) 18px;
}
.tn-lead .tn-text { padding: 0; }
.tn-lead .tn-headline { font-size: clamp(28px, 8vw, 36px); line-height: 1.12; }
.tn-date { color: var(--m-departure); font-family: var(--m-mono); font-size: 10px; }
.tn-cards {
  display: flex;
  gap: 12px;
  margin: 0 calc(var(--m-gutter) * -1);
  padding: 22px var(--m-gutter);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  border-color: var(--m-line);
}
.tn-card {
  display: block;
  flex: 0 0 min(78vw, 310px);
  padding: 8px;
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  scroll-snap-align: start;
}
.tn-card .tn-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 12px;
  border-radius: 12px;
}
.tn-card .tn-text { padding: 0 8px 8px; }
.tn-more { margin-top: 32px; }
.tn-more-title { font-size: 24px; border-bottom-width: 1px; }
.tn-row {
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 14px;
  min-height: 116px;
  padding: 16px 0;
  border-bottom-color: var(--m-line);
}
.tn-row .tn-thumb { width: 94px; height: 86px; border-radius: 10px; }
.tn-row .tn-standfirst { display: none; }