/* 旅の1件（v2/parts/trip.html）と、写真を大きく開く dialog.lb（static/v2/gallery.js）。
   海外の旅（/travel/ の #trips）と、百名山・山行のページのほかの山行（/hiking/ の #climbs）が読む。
   11-10 オーナー「海外旅行と百名山・山行はわけてほしい」で travel.css から移した（前置きは .page-travel から .trip-list に。詳細度は同じ）。
   色と書体は style.css の :root の変数だけを使う */

/* ------------------------------------------------------------ 旅の1件（/travel/ の海外の旅・/hiking/ のほかの山行。v2/parts/trip.html）
   頭に欧文の大きな地名、左に日付・国・道筋の図、右に題と本文、下に写真の並び（段ごとに高さがそろい、切り抜かない） */
.trip-list .trip {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start;
  padding-top: 20px; border-top: 1px solid var(--rule-strong);
}
.trip-list .trip + .trip { margin-top: clamp(80px, 10vw, 144px); }
.trip-list .trip-en {
  grid-column: 1 / -1; margin: 6px 0 clamp(20px, 2.6vw, 36px);
  /* 11-09: 104px あり、ページの題（95px）と章の題（Overseas 70px）より大きかった。章の題より一段小さくする */
  font-family: var(--f-display); font-weight: 400; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 0.92; letter-spacing: 0.004em;
  overflow-wrap: anywhere;
}
.trip-list .trip-meta { grid-column: 1 / span 3; }
.trip-list .trip-date { font-family: var(--f-label); font-weight: 600; font-size: 1.12rem; letter-spacing: 0.04em; line-height: 1.5; }
.trip-list .trip-to { color: var(--fg-3); }
.trip-list .trip-place { margin-top: 4px; font-size: 0.88rem; letter-spacing: 0.06em; color: var(--fg-2); }
.trip-list .trip-main { grid-column: 4 / span 7; }
.trip-list .trip-title { font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: 0.08em; line-height: 1.5; word-break: auto-phrase; }
.trip-list .trip-body { margin-top: 18px; }
.trip-list .trip-count { margin-top: 18px; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--fg-3); }
.trip-list .trip-count strong { font-family: var(--f-label); font-weight: 600; font-size: 1rem; color: var(--fg); letter-spacing: 0.02em; }
/* 道筋の図（pages/travel.py の route_svg）。11-09「もっとスタイリッシュに」: 星図の版のように、
   海の面に陸地・経緯線と度の目盛り・町から町へ弧を描く赤い線・縁取りした町の名。始めの町は赤い点と輪 */
.trip-list .trip-route { --rt-bg: var(--map-water-d); margin-top: 26px; max-width: 300px; }
.trip-list .rt-svg { display: block; width: 100%; max-width: var(--rt-w, 100%); height: auto; background: var(--rt-bg); border: 1px solid var(--rule); border-radius: 4px; }
/* 陸地（Natural Earth 1:50m。11-09「陸の輪郭を描いて」）。面の色が海 */
.trip-list .rt-land { fill: var(--map-land-d); stroke: var(--map-border-d); stroke-width: 0.6; stroke-linejoin: round; }
.trip-list .rt-grid { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 3; }
.trip-list .rt-deg text { fill: var(--fg-3); font-family: var(--f-label); font-weight: 500; font-size: 9.5px; letter-spacing: 0.08em; paint-order: stroke; stroke: var(--rt-bg); stroke-width: 3px; stroke-linejoin: round; }
.trip-list .rt-glow { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.14; }
.trip-list .rt-line { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.trip-list .rt-dots circle { fill: var(--fg); stroke: var(--rt-bg); stroke-width: 1.6; }
.trip-list .rt-dots .rt-first { fill: var(--red); }
.trip-list .rt-dots .rt-ring { fill: none; stroke: var(--red); stroke-width: 1; opacity: 0.55; }
/* 名は面の色で縁取る（線が名を横切っても読める） */
.trip-list .rt-names text {
  fill: var(--fg-2); font-family: var(--f-body); font-size: 11px; letter-spacing: 0.02em;
  paint-order: stroke; stroke: color-mix(in oklch, var(--rt-bg) 82%, transparent); stroke-width: 3.5px; stroke-linejoin: round;
}
.trip-list .rt-names .rt-first { fill: var(--fg); font-weight: 700; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  .trip-list .rt-line, .trip-list .rt-glow { animation: rt-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .trip-list .rt-glow { stroke-dasharray: 1; }
}
}

@keyframes rt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.trip-list .trip-route figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule);
  font-family: var(--f-label); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
}
.trip-list .trip-globe {
  padding: 0; border: 0; background: transparent; color: var(--fg-2); cursor: pointer;
  font-family: var(--f-body); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: none;
  border-bottom: 1px solid var(--rule); transition: color 0.2s, border-color 0.2s;
}
.trip-list .trip-globe:hover { color: var(--fg); border-color: var(--accent); }
.trip-list .trip-fold { display: none; }
.trip-list .trip-globe[hidden] { display: none; }
/* 写真の並び。広い画面: 段ごとに flex で幅を縦横比に比例させる（高さがそろい、切り抜かない） */
.trip-list .trip-gal { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: clamp(36px, 4vw, 56px); }
.trip-list .gal-strip { display: contents; }
.trip-list .gal-row { display: flex; gap: 8px; max-width: calc(var(--sum, 9) * 220px); }
/* ↑ 写真の少ない段（山行の1枚など）は、段の高さが 220px を越えない幅で止める。11-09 に 1枚の段が 1321×991 で画面より高かった。
   同日「写真が大きく載せすぎ」で 440→220px（ほかの段の高さ 約180px にそろえる） */
.trip-list .gal-ph {
  position: relative; display: block; flex: var(--ar) 1 0%; aspect-ratio: var(--ar); min-width: 0; overflow: hidden;
  background: var(--dark-2); border-radius: 2px;
}
.sec--paper .trip-list .gal-ph { background: var(--paper-2); }
.trip-list .gal-ph img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.001);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.trip-list .gal-cap {
  position: absolute; inset: auto 0 0 0; padding: 36px 14px 11px;
  background: linear-gradient(to top, color-mix(in oklch, var(--scrim) 78%, transparent), transparent);
  color: var(--tx-photo); font-size: 0.8rem; letter-spacing: 0.05em; line-height: 1.5;
  opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.trip-list .gal-ph:hover img, .trip-list .gal-ph:focus-visible img { transform: scale(1.045); }
.trip-list .gal-ph:hover .gal-cap, .trip-list .gal-ph:focus-visible .gal-cap { opacity: 1; transform: none; }
.trip-list .gal-ph:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: none) {
  .trip-list .gal-cap { opacity: 1; transform: none; padding-top: 28px; font-size: 0.74rem; }
}
.trip-list .gal-sp { margin-top: 10px; font-size: 0.86rem; }
/* 旅の動画（11-09）。写真の並びと同じく、幅を縦横比に比例させて高さをそろえる。
   縦長が1本だけでも大きくなりすぎないよう、段の幅は「縦横比の合計 × 画面の高さの 62%」まで */
.trip-list .trip-vids { grid-column: 1 / -1; margin-top: clamp(28px, 3vw, 44px); }
.trip-list .vid-label { margin-bottom: 10px; font-family: var(--f-label); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.trip-list .vid-row { display: flex; gap: 8px; max-width: calc(var(--sum) * 26svh); }
/* 62→26svh（写真が大きすぎ・11-09。写真の段と同じくらいの高さ） */
/* 伸びの比は縦横比の100倍（合計が1未満だと余りを配りきらず、縦長1本の段が細くなった） */
.trip-list .vid { flex: calc(var(--ar) * 100) 1 0%; min-width: 0; margin: 0; }
.trip-list .vid video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); background: var(--dark-2); border-radius: 2px; }
.trip-list .vid-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 0.8rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--fg-2); }
.trip-list .vid-len { flex: none; font-family: var(--f-label); font-variant-numeric: tabular-nums; color: var(--fg-3); }
/* 写真の名が長いと1行のままスマホの幅を越え、旅日記のページ全体が横に 587px へ広がっていた（11-09 に測って分かった） */
.trip-list .gal-sp .text-link { display: inline; white-space: normal; }

/* ------------------------------------------------------------ 写真を大きく開く（static/v2/gallery.js の dialog.lb） */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in oklch, var(--night) 96%, transparent); color: var(--tx-d);
}
.lb::backdrop { background: color-mix(in oklch, var(--night) 70%, transparent); }
.lb:focus-visible { outline: none; }
/* 行と列を明示する（auto の行だと大きい写真の高さに引っぱられて、写真と説明が画面の下へはみ出す） */
.lb[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); animation: lb-in 0.35s var(--ease) both; }

@keyframes lb-in { from { opacity: 0; } }
.lb-fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; margin: 0; }
.lb-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: clamp(16px, 4vw, 56px) clamp(16px, 7vw, 96px) 0; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-cap {
  display: flex; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; padding: 14px clamp(16px, 7vw, 96px) 20px;
  font-size: 0.9rem; letter-spacing: 0.05em;
}
.lb-n { margin-left: auto; font-family: var(--f-label); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--tx-d3); font-variant-numeric: tabular-nums; }
.lb-sp[hidden] { display: none; }
.lb-btn {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--line-d); border-radius: 50%; background: color-mix(in oklch, var(--night) 60%, transparent);
  color: var(--tx-d); font-size: 1.1rem; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.lb-btn:hover { border-color: var(--tx-d); background: var(--dark); }
.lb-prev { left: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb-x { right: clamp(8px, 2vw, 28px); top: clamp(8px, 2vw, 24px); }
.lb--one .lb-prev, .lb--one .lb-next { display: none; }
html.lb-open { overflow: hidden; }

@media (max-width: 1080px) {
  .trip-list .trip-meta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); column-gap: var(--col-gap); align-items: start; }
  .trip-list .trip-route { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .trip-list .trip-main { grid-column: 1 / -1; margin-top: 12px; }
}

@media (max-width: 760px) {
  .trip-list .trip-meta { grid-template-columns: minmax(0, 1fr); }
  .trip-list .trip-route { grid-column: 1; grid-row: auto; margin-top: 20px; max-width: 280px; }
  /* スマホ: ルートの地図はたたんでおき、「地図を開く」で開く（static/v2/site.js。JS が無ければ開いたまま）。
     地図は1つ 400〜490px あり、11の旅で 5,000px を占めていた。旅の道筋は上の地球儀でも見られる */
  .trip-list .trip-route.is-foldable:not(.is-open) .rt-svg { display: none; }
  .trip-list .trip-route.is-foldable:not(.is-open) figcaption { margin-top: 0; }
  .trip-list .trip-route.is-foldable { max-width: none; }
  .trip-list .trip-route.is-open .rt-svg { max-width: 300px; }
  .trip-list .trip-fold { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--fg-2); cursor: pointer; font-family: var(--f-body); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: none; }
  .trip-list .trip-route figcaption { align-items: center; }
  /* スマホ: 写真は横に送る1列（11-09 オーナー「スマホだと縦スクロールが多すぎる」）。
     2列で縦に積むと旅1つで約 1,500px・11の旅で旅日記が画面 49 枚分あった。高さをそろえ、幅は縦横比なり（切り抜かない）。
     次の写真の端が見えるよう高さは 52vw（3:2 で幅 270px 前後）。端から端まで送れるよう左右の余白の外まで広げる */
  .trip-list .trip-gal { display: block; margin-top: 24px; }
  .trip-list .gal-strip {
    display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .trip-list .gal-strip::-webkit-scrollbar { display: none; }
  .trip-list .gal-row { display: contents; }
  .trip-list .gal-ph { flex: none; height: 44vw; width: auto; max-width: 86vw; aspect-ratio: var(--ar); scroll-snap-align: start; }
  /* 52→44vw（11-09 写真が大きすぎ） */
  /* スマホ: 動画は1本ずつ縦に。縦長は画面の高さの 72% まで */
  .trip-list .trip-vids { margin-top: 24px; }
  /* スマホ: 動画も写真と同じく横に送る1列（縦に積むと旅1つで最大 1,500px あった）。幅は縦横比なり・高さ 52vw */
  .trip-list .vid-row {
    flex-direction: row; gap: 6px; max-width: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .trip-list .vid-row::-webkit-scrollbar { display: none; }
  /* 横に送る列はキーボードでも送れるよう、列そのものにフォーカスが入る（trip.html の tabindex）。写真の列は中のリンクで送れる */
  .trip-list .vid-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .trip-list .vid { flex: none; width: min(calc(var(--ar) * 44vw), 86vw); max-width: none; scroll-snap-align: start; }
  .lb-btn { width: 42px; height: 42px; }
  .lb-prev, .lb-next { top: auto; bottom: 64px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trip-list .gal-ph img, .trip-list .gal-cap { transition: none; }
  .trip-list .gal-ph:hover img, .trip-list .gal-ph:focus-visible img { transform: none; }
  .lb[open] { animation: none; }
}

/* ---- 11-10 近未来の旅賢者の手記: 道筋のある旅の計器の帯（距離・区間・町・日数・出発の座標）と、見えたときの動き（static/v2/travel_fx.js が .fx-on と .is-seen を付ける） */
.trip-list .trip-data { display: flex; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.trip-list .trip-data > div { display: grid; gap: 1px; padding: 7px 18px 7px 0; margin-right: 18px; border-right: 1px solid var(--rule); }
.trip-list .trip-data > div:last-child { border-right: 0; margin-right: 0; }
.trip-list .trip-data dt { font-family: var(--f-label); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.trip-list .trip-data dd { font-family: var(--f-label); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.04em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.trip-list .trip-data-o small { margin-left: 8px; font-family: var(--f-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--fg-3); }
/* 写真が奥から起きて並ぶ（段ごとに少し遅れて） */
.fx-on .trip-list .trip:not(.is-seen) .gal-ph { opacity: 0; transform: perspective(900px) rotateX(16deg) translate3d(0, 34px, 0); }
.fx-on .trip-list .trip.is-seen .gal-ph { animation: trip-rise 1s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms + 120ms); }
@keyframes trip-rise { from { opacity: 0; transform: perspective(900px) rotateX(16deg) translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
/* 大きな欧文の地名が下からせり上がる */
/* 11-10 その2: 1字ずつ、下の辺を軸に奥から起き上がる（travel_fx.js が字を割る） */
.fx-on .trip-list .trip-en .wd { display: inline-block; white-space: nowrap; }
.fx-on .trip-list .trip-en .ch { display: inline-block; transform-origin: 50% 100%; }
.fx-on .trip-list .trip:not(.is-seen) .trip-en .ch { opacity: 0; transform: perspective(500px) rotateX(-92deg); }
.fx-on .trip-list .trip.is-seen .trip-en .ch { animation: ch-flip 0.9s var(--ease) both; animation-delay: calc(var(--c) * 22ms); }
@keyframes ch-flip { from { opacity: 0; transform: perspective(500px) rotateX(-92deg) translateY(0.2em); } to { opacity: 1; transform: none; } }
/* 写真の傾き（PC のポインタ。travel_fx.js が --rx・--ry を入れる） */
.fx-on .trip-list .gal-ph.is-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out; }
@media (max-width: 760px) {
  .trip-list .trip-data > div { padding-right: 12px; margin-right: 12px; }
  .trip-list .trip-data > div:nth-child(2) { display: none; } /* 区間は町の数とほぼ同じなので、狭い幅では外す */
}
/* 11-10 その2: 旅の通し番号（古い旅が 01）。欧文の地名の右上に、線だけの数字で */
.trip-list .trip--en .trip-en { grid-row: 1; }
.trip-list .trip-no {
  grid-column: 10 / -1; grid-row: 1; justify-self: end; align-self: start; margin-top: 12px; display: flex; align-items: baseline; gap: 6px;
  font-family: var(--f-label); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--fg-3);
}
.trip-list .trip-no b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--fg-2); }
@media (max-width: 760px) { .trip-list .trip-no { display: none; } }
/* 11-10 その2: 写真の段は、スクロールに合わせて奥から起き上がる（画面に入る間ずっと、送った分だけ動く）。
   スクロールに連動する動き（animation-timeline: view()）が使えるブラウザの、段で並ぶ幅だけ。使えないブラウザは上の1回きりの起き上がり */
@supports (animation-timeline: view()) {
  @media (min-width: 761px) {
    .fx-on .trip-list .gal-row { transform-origin: 50% 100%; animation: row-unfold linear both; animation-timeline: view(); animation-range: entry 0% entry 95%; }
    .fx-on .trip-list .trip:not(.is-seen) .gal-ph { opacity: 1; transform: none; }
    .fx-on .trip-list .trip.is-seen .gal-ph { animation: none; }
  }
}
@keyframes row-unfold { from { opacity: 0.2; transform: perspective(1400px) rotateX(24deg) translate3d(0, 70px, -90px) scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .trip-list .gal-ph { animation: none !important; }
}
.fx-on .trip-list .trip.is-seen .gal-ph.is-risen { animation: none; }

/* ------------------------------------------------------------ 11-11 スマホの旅の見せ方（オーナー「もっとスマホでうごきのあってかっこいい、スタイリッシュなものにして」）
   旅の頭に全幅の写真の扉（.trip-cover。旅の1枚目）を敷き、欧文の地名と通し番号を重ねる。写真の列は立体的に流れ、動画は大きくする。
   スクロールに連動する動き（animation-timeline）は、使えるブラウザで .fx-on のときだけ（動きを減らす設定・古いブラウザでは止まった形） */
.trip-list .trip { scroll-margin-top: calc(var(--nav-h) + 6px); }
.trip-list .trip-cover { display: none; }
/* 題と本文は、旅が見えたら下から現れる */
.fx-on .trip-list .trip:not(.is-seen) .trip-meta, .fx-on .trip-list .trip:not(.is-seen) .trip-main { opacity: 0; transform: translateY(18px); }
.fx-on .trip-list .trip.is-seen .trip-meta, .fx-on .trip-list .trip.is-seen .trip-main { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: 0.15s; }
.fx-on .trip-list .trip.is-seen .trip-main { transition-delay: 0.28s; }
@media (max-width: 760px) {
  .trip-list .trip + .trip { margin-top: 64px; }
  .trip-list .trip:has(> .trip-cover) { padding-top: 0; border-top: 0; }
  .trip-list .trip-cover {
    display: block; position: relative; grid-column: 1 / -1; grid-row: 1; height: 60vw; margin-inline: calc(var(--gutter) * -1); overflow: hidden;
    background: var(--dark-2);
  }
  /* 写真は枠より 2 割高く敷き、スクロールに合わせて枠の中を動かす（下の @supports） */
  .trip-list .trip-cover img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; }
  .trip-list .trip-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, color-mix(in oklch, var(--scrim) 84%, transparent) 0%, color-mix(in oklch, var(--scrim) 34%, transparent) 36%, transparent 60%),
      linear-gradient(180deg, color-mix(in oklch, var(--scrim) 50%, transparent) 0%, transparent 28%);
  }
  .trip-list .trip:has(> .trip-cover) .trip-en {
    grid-row: 1; align-self: end; z-index: 1; margin: 0 0 14px; pointer-events: none; color: var(--tx-photo);
    font-size: clamp(2.3rem, 10.5vw, 3rem); text-transform: uppercase;
    text-shadow: 0 0 3px color-mix(in oklch, var(--scrim) 50%, transparent), 0 2px 22px color-mix(in oklch, var(--scrim) 60%, transparent);
  }
  .trip-list .trip:has(> .trip-cover) .trip-no {
    display: flex; grid-column: 1 / -1; grid-row: 1; align-self: start; justify-self: end; z-index: 1; margin-top: 12px; pointer-events: none;
    color: var(--tx-photo); text-shadow: 0 0 2px color-mix(in oklch, var(--scrim) 80%, transparent), 0 1px 10px color-mix(in oklch, var(--scrim) 60%, transparent);
  }
  .trip-list .trip:has(> .trip-cover) .trip-no b { font-size: 1.5rem; color: var(--tx-photo); -webkit-text-stroke: 0; }
  .trip-list .trip:has(> .trip-cover) .trip-meta { margin-top: 16px; }
  /* 扉に出した1枚目は、下の写真の列では出さない（大きく開いたときは1枚目から送れる）。1枚しか無い旅は列ごと出さない */
  .trip-list .trip:has(> .trip-cover) .gal-ph--lead { display: none; }
  .trip-list .trip:has(> .trip-cover) .gal-strip:not(:has(.gal-ph:not(.gal-ph--lead))) { display: none; }
  /* 動画は大きく（前は高さ 44vw ぶんで、縦長の動画は幅 100px ほどしかなかった。11-10 オーナー「動画ももっと多用したい」） */
  .trip-list .vid { width: min(calc(var(--ar) * 68vw), 86vw); }
}
@supports (animation-timeline: view()) {
  @media (max-width: 760px) {
    .fx-on .trip-list .trip-cover img { animation: cover-par linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* 写真の列: 横に送ると、真ん中の写真が正面を向き、左右の写真は奥へ傾く */
    .fx-on .trip-list .gal-strip { perspective: 900px; }
    .fx-on .trip-list .trip .trip-gal .gal-strip .gal-ph { opacity: 1; transform-origin: 50% 50%; animation: ph-flow linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
    .fx-on .trip-list .vid-row { perspective: 900px; }
    .fx-on .trip-list .vid-row .vid { animation: ph-flow linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
  }
}
@keyframes cover-par { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
@keyframes ph-flow {
  0% { transform: rotateY(-34deg) scale(0.86); opacity: 0.5; }
  32%, 68% { transform: none; opacity: 1; }
  100% { transform: rotateY(34deg) scale(0.86); opacity: 0.5; }
}