/* Vacation Thyme shared styles: posts. Edit here, not in the HTML files. */

.ta { background: #FBF9F6; padding: 7.2rem 4rem 5rem; }
  .ta-col { max-width: 860px; margin: 0 auto; }
  .ta-crumbs { font-size: .78rem; color: var(--text-muted); margin-bottom: 1.6rem; }
  .ta-crumbs a { color: var(--sea); text-decoration: none; }
  .ta-crumbs a:hover { text-decoration: underline; }
  .ta-meta { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
  .ta-title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--sea); line-height: 1.12; margin-bottom: .9rem; }
  .ta-by { font-size: .9rem; color: var(--text-muted); margin-bottom: 2rem; }
  .ta-hero { margin: 0 0 2rem; }
  .ta-hero img { display: block; width: 100%; border-radius: 12px; background: var(--sea-pale); }
  .ta-lead { font-size: 1.15rem; line-height: 1.8; color: var(--text); margin-bottom: 1.8rem; }
  .ta-read { background: #fff; border: 1px solid rgba(36,75,72,0.12); border-left: 3px solid var(--accent); border-radius: 12px; padding: 1.6rem 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; box-shadow: 0 2px 14px rgba(36,75,72,0.06); margin-bottom: 2.6rem; }
  .ta-read p { font-size: .9rem; color: var(--text-muted); line-height: 1.6; max-width: 460px; }
  .ta-read strong { color: var(--text); font-weight: 500; display: block; margin-bottom: .2rem; }
  .ta-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: .6rem; }
  .ta-gal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; background: var(--sea-pale); }
  .ta-credit { font-size: .74rem; color: var(--text-muted); margin-bottom: 2.6rem; }
  .ta-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid rgba(36,75,72,0.12); padding-top: 1.6rem; margin-bottom: 2rem; }
  .ta-pn a { text-decoration: none; color: var(--sea); font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; line-height: 1.3; }
  .ta-pn a small { display: block; font-family: 'DM Sans', sans-serif; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem; }
  .ta-pn a:hover { text-decoration: underline; }
  .ta-pn .next { text-align: right; }
  .ta-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; font-size: .84rem; }
  .ta-foot a, .ta-foot .soon { display: inline-flex; align-items: center; gap: .45rem; color: var(--sea); text-decoration: none; }
  .ta-foot svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .ta-foot .soon { color: var(--text-muted); }
  @media (max-width: 900px) { .ta { padding: 6rem 1.5rem 3.5rem; } .ta-pn { grid-template-columns: 1fr; } .ta-pn .next { text-align: left; } }