/* Trips, already packed. Built on tgc-system.css tokens. 4-column grid; photos never cropped. */
.trips-page { background: var(--paper); color: var(--ink); }
.tr-main { max-width: 1320px; margin: 0 auto; padding: var(--s7) var(--margin) var(--s8); display: grid; gap: var(--s8); }
.tr-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--gap); }
.tr-head > * { grid-column: 1 / -1; }
.tr-head h1 { font: 700 clamp(var(--t-5), 9vw, var(--t-8))/.86 var(--display); margin: 0; text-wrap: balance; }
.tr-lede { grid-column: 1 / span 3; font: 400 var(--t-xl)/1.45 var(--serif); max-width: var(--measure); margin: 0; }
.tr-index { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.tr-index li { border-bottom: 1px solid var(--rule); }
.tr-index a { display: flex; gap: var(--s2); align-items: baseline; padding: var(--s3) var(--s3) var(--s3) 0; color: var(--ink); text-decoration: none; font: 600 var(--t-l)/1.15 var(--display); }
.tr-index a span { font: 500 var(--t-xs)/1 var(--mono); color: var(--signal); }
.tr-index a:hover { color: var(--signal); }

.tr-trip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: start; scroll-margin-top: 90px; border-top: 1px solid var(--ink); padding-top: var(--s5); }
.tr-photo { margin: 0; grid-column: 1 / span 2; position: sticky; top: 90px; }
.tr-photo figure { margin: 0; }
.tr-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.tr-copy { grid-column: 3 / span 2; min-width: 0; display: grid; gap: var(--s3); }
.tr-right .tr-photo { grid-column: 3 / span 2; grid-row: 1; }
.tr-right .tr-copy { grid-column: 1 / span 2; grid-row: 1; }
.tr-copy h2 { font: 700 clamp(var(--t-3), 5vw, var(--t-6))/.9 var(--display); margin: 0; text-wrap: balance; }
.tr-deck { font: 400 var(--t-l)/1.5 var(--serif); margin: 0; max-width: 46ch; }
.tr-days { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; }
.tr-days li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.tr-days p { margin: 0; font: 400 var(--t-m)/1.55 var(--text); }
.tr-when { font: 500 var(--t-xs)/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tr-pack { border-top: 1px solid var(--ink); padding-top: var(--s3); display: grid; gap: var(--s2); }
.tr-pack > div { display: flex; gap: var(--s3); flex-wrap: wrap; }
.tr-good { display: grid; grid-template-columns: 72px auto; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; font: 600 var(--t-m)/1.2 var(--display); }
.tr-good img { width: 72px; height: 72px; object-fit: contain; background: var(--stock); border-radius: var(--radius); }
.tr-good:hover span { color: var(--signal); }
.tr-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; }
.tr-links a { color: var(--ink); font: 600 var(--t-m)/1.3 var(--text); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.tr-fine { font: 500 var(--t-xs)/1.6 var(--mono); color: var(--mute); margin: 0; }

@media (max-width: 900px) {
  .tr-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-lede { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tr-main { padding-top: var(--s5); gap: var(--s7); }
  .tr-head { grid-template-columns: minmax(0, 1fr); }
  .tr-lede { font-size: var(--t-l); }
  .tr-index { grid-template-columns: minmax(0, 1fr); }
  .tr-trip, .tr-right { grid-template-columns: minmax(0, 1fr); }
  .tr-photo, .tr-copy, .tr-right .tr-photo, .tr-right .tr-copy { grid-column: 1; grid-row: auto; position: static; top: auto; }
  .tr-days li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}
.tr-main .tr-trip { border-radius: 0; border-width: 1px 0 0; background: none; box-shadow: none; }
.tr-head .page-save { justify-self: start; grid-column: 1; width: auto; }