/* Field notes on the main Apollonaut homepage. */
.travel-details.td-motion-card {container:tdcard / inline-size;scroll-margin-top:16px}
.td-motion-card .travel-details__intro {padding-bottom:24px}
.td-chapters,.td-tools {display:none}
.td-motion-card[data-td-ready] .td-chapters {
  display:flex; flex-wrap:wrap; gap:7px; margin:0 0 13px;
}
.td-motion-card .td-chapter {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 16px;
  border:1px solid #80988a; border-radius:7px; background:transparent; color:#fffefa;
  cursor:pointer; font:600 14px/1.2 DM,Arial,sans-serif;
}
.td-chapter .icon {width:17px;height:17px;color:#f8e46c}
.td-motion-card .td-chapter[aria-pressed="true"] {background:#f8e46c;color:#183c34;border-color:#f8e46c}
.td-chapter[aria-pressed="true"] .icon {color:inherit}
.td-deck {display:grid;gap:16px}
.td-motion-card[data-td-ready] .td-deck {gap:0;touch-action:pan-y pinch-zoom}
.td-motion-card .td-scene {
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-width:0;background:#20483e;border:1px solid #698376;border-radius:12px;overflow:hidden;
}
.td-motion-card[data-td-ready] .td-scene {grid-area:1/1}
.td-motion-card[data-td-ready] .td-scene:not(.is-current) {visibility:hidden;pointer-events:none}
.td-art {
  --wash:#e9f2e6; position:relative; min-width:0; margin:0; padding:15px 6px; display:grid; align-items:center;
  background-color:var(--wash); background-image:radial-gradient(#25463216 .8px,transparent .9px);background-size:9px 9px;
  border-inline-end:1px solid #789082;
}
.td-scene[data-index="1"] .td-art {--wash:#f6ecd6}
.td-scene[data-index="2"] .td-art {--wash:#e4efec}
.td-art > svg {display:block;width:100%;height:auto;max-height:292px}
.td-notes {min-width:0;align-self:center;padding:clamp(22px,3.2cqi,46px);color:#fffefa}
.td-notes .td-mark {display:flex;align-items:center;gap:9px;color:#f8e46c;font:700 11px/1.3 DM,Arial,sans-serif;letter-spacing:.135em}
.td-mark::before {content:"";width:19px;height:1px;background:currentColor}
.td-motion-card .td-notes h3 {margin:12px 0 10px;max-width:19ch;font:700 clamp(25px,3.3cqi,38px)/1.08 DM,Arial,sans-serif;letter-spacing:-.048em;text-wrap:balance;color:#fffefa}
.td-motion-card .td-notes p {max-width:38ch;margin:0;color:#dfebdf;font:400 16px/1.5 DM,Arial,sans-serif}
.td-motion-card[data-td-ready] .td-tools {display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:7px}
.td-position {font:700 12px/1.3 DM,Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#f5e8b0}
.td-replay {display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:44px;background:none;border:0;color:#fffefa;padding:4px 2px;font:600 13px/1.3 DM,Arial,sans-serif;cursor:pointer}
.td-replay[hidden] {display:none}
.td-replay svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.td-motion-card :is(.td-chapter,.td-replay):focus-visible {outline:2px solid #fff3ba;outline-offset:3px}
.td-chapter:hover {border-color:#f8e46c}.td-replay:hover{text-decoration:underline;text-underline-offset:3px}
@container tdcard (max-width:650px) {
  .td-motion-card .travel-details__intro {grid-template-columns:1fr;gap:13px;padding-bottom:18px}
  .td-motion-card[data-td-ready] .td-chapters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:10px}
  .td-motion-card .td-chapter {min-height:46px;padding:5px 2px;gap:5px;font-size:13px}
  .td-chapter .icon {width:15px;height:15px}
  .td-motion-card .td-scene {grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .td-art {padding:6px 1px;border-inline-end:0;border-bottom:1px solid #789082}
  .td-art > svg {max-height:210px}
  .td-notes {align-self:start;padding:17px 17px 20px}
  .td-motion-card .td-notes h3 {font-size:clamp(21px,6.5cqi,29px);margin:8px 0 7px;max-width:25ch}
  .td-motion-card .td-notes p {font-size:15px;line-height:1.43}
  .td-tools {margin-bottom:-8px}
}
@container tdcard (max-width:330px) {
  .td-motion-card .td-chapter {flex-direction:column;gap:3px;font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  .td-motion-card *, .td-motion-card *::before,.td-motion-card *::after {animation:none!important;transition:none!important}
}


    @keyframes aptDetailLensScan{0%{transform:translate(-37px,19px) rotate(-11deg)}57%{transform:translate(5px,-2px) rotate(2deg)}100%{transform:none}}
    @keyframes aptDetailLensSpark{0%,48%{opacity:0;transform:scale(.4)}78%{opacity:1;transform:scale(1.12)}100%{opacity:.85;transform:scale(1)}}
    @keyframes aptDetailPlateRise{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:none}}
    @media(prefers-reduced-motion:no-preference){
      .td-animate .is-current .aptDetail-lens-motion{transform-box:fill-box;transform-origin:55% 45%;animation:aptDetailLensScan 2.05s cubic-bezier(.25,.68,.26,1) both}
      .td-animate .is-current .aptDetail-lens-flash{transform-box:fill-box;transform-origin:center;animation:aptDetailLensSpark 2.16s ease-out both}
      .td-animate .is-current .aptDetail-plate-rise{animation:aptDetailPlateRise .65s ease-out both}
    }
  

    @keyframes tdPavColour{0%,12%{transform:scaleX(0)}85%,100%{transform:scaleX(1)}}
    @keyframes tdPavPencil{0%,10%{transform:translate(-78px,5px)}75%{transform:translate(1px,-3px)}100%{transform:none}}
    @keyframes tdPavTicks{0%,67%{opacity:0}100%{opacity:1}}
    @media(prefers-reduced-motion:no-preference){
      .td-animate .is-current .td-pav-wipe{transform-box:fill-box;transform-origin:left center;animation:tdPavColour 2.15s cubic-bezier(.3,.62,.3,1) both}
      .td-animate .is-current .td-pav-stylus{animation:tdPavPencil 2.2s cubic-bezier(.36,.6,.26,1) both}
      .td-animate .is-current .td-pav-flash{animation:tdPavTicks 2.35s ease-out both}
    }
  

    @keyframes tdMapTrail{0%,8%{stroke-dashoffset:220}100%{stroke-dashoffset:0}}
    @keyframes tdMapTag{0%,48%{opacity:0;transform:translate(7px,-13px) rotate(5deg)}78%{opacity:1;transform:translateY(2px) rotate(-1deg)}100%{opacity:1;transform:none}}
    @keyframes tdMapHalo{0%,52%{opacity:0;transform:scale(.4)}80%{opacity:.9;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
    @media(prefers-reduced-motion:no-preference){
      .td-animate .is-current .td-map-draw{stroke-dasharray:220;animation:tdMapTrail 1.48s ease-out both}
      .td-animate .is-current .td-map-tag{transform-box:fill-box;transform-origin:20% 20%;animation:tdMapTag 2.15s cubic-bezier(.24,.62,.33,1) both}
      .td-animate .is-current .td-map-halo{transform-box:fill-box;transform-origin:center;animation:tdMapHalo 2.08s ease-out both}
    }