.ptm { --muted: #56635b; --moss: #53694a; color: var(--forest, #173d32); }
.ptm-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.ptm-heading h2 { margin: 0; font: 400 clamp(2.4rem, 4vw, 4.5rem)/1.05 var(--serif, Georgia, serif); letter-spacing: -.04em; }
.ptm-controls { display: flex; flex-shrink: 0; gap: .6rem; }
.ptm-controls[hidden] { display: none; }
.ptm-controls button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line, #b9c4bc); border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ptm-controls button:disabled { opacity: .35; cursor: default; }
.ptm-controls button:focus-visible, .ptm-track:focus-visible { outline: 2px solid var(--clay, #b7795c); outline-offset: 4px; }
.ptm-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2rem) / 3); gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 1rem; margin: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--moss, #647c55) transparent; }
.ptm-track--1 { grid-auto-columns: min(100%, 720px); }
.ptm-track--2 { grid-auto-columns: calc((100% - 1rem) / 2); }
.ptm-card { min-width: 0; scroll-snap-align: start; }
.ptm-card article { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line, #b9c4bc); border-radius: 1.1rem; background: var(--ivory, #f5f1e8); }
.ptm-photo, .ptm-card video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #e8e8dc; }
.ptm-card video { background: #173d32; }
.ptm-quote { margin: 0; padding: 1.5rem 1.5rem .5rem; font-family: var(--serif, Georgia, serif); font-size: 1.25rem; line-height: 1.5; overflow-wrap: anywhere; }
.ptm-quote p { margin: 0 0 1rem; }
.ptm-name { margin: auto 0 0; padding: 1rem 1.5rem 1.5rem; color: var(--muted, #68736c); font-size: .85rem; }
@media (max-width: 1000px) {
  .ptm-track { grid-auto-columns: calc((100% - 1rem) / 2); }
  .ptm-track--1 { grid-auto-columns: min(100%, 720px); }
}
@media (max-width: 600px) {
  .ptm-track { grid-auto-columns: 100%; }
  .ptm-heading { align-items: start; flex-direction: column; }
  .ptm-heading h2 { font-size: clamp(2.2rem, 9vw, 3.3rem); }
}