/* ==========================================================================
   Day trips — page layer.

   The day trips page is an index, not an essay. Every trip is a card with a
   photograph, one line of description and a short run of facts in the mono
   face. Prose is demoted to a single "worth knowing" note under each card.

   Nothing new is invented here: six colours, three faces, the existing radius
   and easing. The only new token is --dt-key, a label colour that survives
   both themes (pine is too dark to read on the dark surface).
   ====================================================================== */

:root { --dt-key: var(--pine); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dt-key: var(--shallow); }
}
:root[data-theme="dark"] { --dt-key: var(--shallow); }

/* ----------------------------------------------------- jump row
   One navigation system on this page. The site's own contents rail handles
   the sections; this row handles the nine trips, and it sits directly above
   the cards it points at rather than stacking under the masthead. */
.tripjump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 34px;
}
.tripjump > span {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dt-key);
  margin-right: 6px;
}
.tripjump a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.tripjump a:hover,
.tripjump a:focus-visible {
  color: var(--text);
  border-color: var(--dt-key);
  transform: translateY(-2px);
}

/* ----------------------------------------------------- the trip cards */
/* min() on every track floor. A bare minmax(300px, 1fr) is a 300px hard
   minimum, so on a 320px phone the card is wider than the column it sits in
   and pushes the whole page sideways. min(300px, 100%) lets the last step
   collapse instead. */
.tcards {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
}
/* Two cards should share the row, not sit in a third of it. */
.tcards.two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.tcard {
  padding: 0;
  overflow: hidden;
  cursor: auto;
  scroll-margin-top: 90px;
}

.tcard-ph { margin: 0; position: relative; overflow: hidden; background: var(--sandy); }
/* height:auto matters. The markup carries width/height attributes to reserve
   space, and a fixed height would beat aspect-ratio and stretch the crop. */
.tcard-ph img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.tcard:hover .tcard-ph img { transform: scale(1.05); }
.tcard-ph figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 14px 9px;
  /* Same two values the site already uses for a caption over a hero
     photograph, so a card caption and a hero caption sit on the same dark. */
  background: linear-gradient(to top, rgba(4, 22, 34, .82) 15%, rgba(4, 22, 34, 0));
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #dbeaf5;
}
.tcard-ph .ph-cap { color: #fff; font-weight: 500; }
.tcard-ph .ph-credit a { color: #dbeaf5; }

.tcard-bd {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tcard .dt-tag {
  margin: 0 0 7px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.tcard h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.tcard .lead {
  margin: 0 0 16px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* The facts. Label in mono, value in sans, every number back in mono. */
.tfacts { list-style: none; margin: 0 0 16px; padding: 0; }
.tfacts li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.tfacts li:first-child { border-top: 0; padding-top: 0; }
.tfacts .k {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dt-key);
  line-height: 1.7;
}
.tfacts .v { font-size: .92rem; line-height: 1.5; }
.tfacts .v b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .88em;
  letter-spacing: -.01em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}

/* Two class names on purpose. The site has a global rule that turns any
   paragraph opening with a bold lead-in into a ruled block, and it would
   otherwise beat this one on specificity and undo the padding and the
   auto top margin that pins the note to the bottom of the card. */
.tcard .tnote {
  margin: auto 0 0;
  padding: 14px 16px;
  border-left: 0;
  background: var(--bg-sunk);
  border-radius: 10px;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.tcard .tnote > strong:first-child { color: var(--text); }
.tcard .tnote strong { color: var(--text); font-weight: 600; }
.tcard .tnote b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .9em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}

.tgo {
  align-self: flex-start;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dt-key);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.tgo:hover { color: var(--bougie); }

/* The headline trip gets the wide slot and reads across, not down. */
@media (min-width: 900px) {
  .tcard.feature { grid-column: 1 / -1; flex-direction: row; }
  .tcard.feature .tcard-ph { width: 45%; flex: none; }
  .tcard.feature .tcard-ph { display: flex; }
  .tcard.feature .tcard-ph img { height: 100%; min-height: 100%; aspect-ratio: auto; object-position: 50% 58%; }
  .tcard.feature .tcard-bd { width: 55%; padding: 26px 28px 28px; }
  .tcard.feature h3 { font-size: 1.75rem; }
  .tcard.feature .lead { font-size: 1.02rem; }
}

/* ----------------------------------------------------- side by side table */
.dttable { width: 100%; border-collapse: collapse; font-size: .93rem; }
.dttable th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dt-key);
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dttable td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--text-soft);
}
.dttable td:first-child { color: var(--text); font-weight: 600; }
.dttable td:first-child a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.dttable td:first-child a:hover { border-bottom-color: var(--dt-key); }
.dttable .m {
  font-family: var(--font-mono);
  font-size: .85em;
  letter-spacing: -.01em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
  white-space: nowrap;
}
.dttable tbody tr:hover td { background: color-mix(in srgb, var(--shallow) 12%, transparent); }

/* ----------------------------------------------------- the two harbours */
.harbours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}
.harbour {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow);
}
.harbour h3 {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
}
.harbour .where {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dt-key);
}
.harbour ul { margin: 0; padding-left: 18px; }
.harbour li { margin-bottom: 6px; font-size: .94rem; line-height: 1.5; }
.harbour li::marker { color: var(--shallow); }

/* ----------------------------------------------------- plain bullet runs */
.dtlist { margin: 0; padding-left: 18px; max-width: 70ch; }
.dtlist li { margin-bottom: 10px; line-height: 1.55; }
.dtlist li::marker { color: var(--shallow); }
.dtlist b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .88em;
  font-feature-settings: "tnum" 1;
}

/* ----------------------------------------------------- not a day trip */
.dtnope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 22px;
}
.dtnope > div {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}
.dtnope h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}
.dtnope p { margin: 0 0 10px; font-size: .93rem; line-height: 1.55; color: var(--text-soft); }
.dtnope p:last-child { margin-bottom: 0; }
.dtnope b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .9em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}

/* ----------------------------------------------------- FAQ */
.dtfaq { max-width: 80ch; }
.dtfaq > div { padding: 18px 0; border-top: 1px solid var(--line); }
.dtfaq > div:first-child { border-top: 0; padding-top: 0; }
.dtfaq h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
}
.dtfaq p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--text-soft); }
.dtfaq b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .9em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}

/* ----------------------------------------------------- narrow screens */
@media (max-width: 560px) {
  .tcard-bd { padding: 18px 18px 20px; }
  .tfacts li { grid-template-columns: 76px 1fr; gap: 10px; }
  .tripjump { gap: 7px; }
  .tripjump a { font-size: .62rem; padding: 6px 11px; }
  .dttable { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tcard:hover .tcard-ph img,
  .tripjump a:hover { transform: none !important; }
}