:root { color-scheme: light; --paper: #fcfcfb; --ink: #282a28; --muted: #747874; --line: #dedfda; --gap: 4px; --edge: 12px; --header-height: 44px; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif; color: var(--ink); background: var(--paper); font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 4px); scrollbar-gutter: stable; }
body { margin: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, a { color: inherit; }
button { font: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #5d7369; outline-offset: 4px; }
a { text-decoration: none; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 20; padding: 12px 20px; background: var(--paper); }
.skip-link:focus { top: 12px; }
.site-header { height: var(--header-height); position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 0 var(--edge); background: rgb(252 252 251 / .97); border-bottom: 1px solid var(--line); transition: transform 240ms ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }
.site-title { margin: 0; font-weight: 400; font-size: 21px; letter-spacing: .09em; white-space: nowrap; }
.header-divider { height: 15px; width: 1px; background: #c8cbc5; }
.series-title { font-size: 12px; letter-spacing: .13em; }
.trip-date { margin-left: auto; font: 11px/1.5 Georgia, serif; letter-spacing: .13em; color: var(--muted); white-space: nowrap; }
main { padding: var(--header-height) var(--edge) 0; }
.scene { margin: 0 calc(-1 * var(--edge)); padding-inline: var(--edge); padding-bottom: 12px; }
.scene + .scene { border-top: 1px solid var(--line); }
.scene-heading { padding: 12px 0 4px; display: flex; align-items: baseline; gap: 22px; }
.scene-title { margin: 0; font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: .055em; white-space: nowrap; }
.scene-meta { display: flex; align-items: baseline; gap: 13px; color: #686c67; font-size: 12px; line-height: 1.8; letter-spacing: .025em; white-space: nowrap; }
.scene-meta span + span::before { content: '/'; padding-right: 13px; color: #b2b5af; }
.scene-meta time { font-family: Georgia, serif; letter-spacing: .06em; }
.scene-meta .unset { color: #737870; font-size: 11px; }
.scene-images { display: flex; gap: var(--gap); align-items: stretch; width: 100%; }
.photo-tile, .still-placeholder { flex: var(--ratio, 1.5) 1 0%; min-width: 0; aspect-ratio: var(--ratio, 1.5); margin: 0; padding: 0; border: 0; display: block; position: relative; overflow: hidden; background: #eeefec; }
.photo-tile { cursor: zoom-in; }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: contain; transition: filter 200ms ease; }
.photo-tile:hover img { filter: brightness(.96); }
.still-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #eef0ec; color: #6e776e; }
.still-placeholder svg { width: 25px; height: 25px; stroke: #929b91; stroke-width: 1; fill: none; margin-bottom: 5px; }
.placeholder-title { font-size: 13px; letter-spacing: .14em; }
.placeholder-note { font-size: 11px; color: #7d857b; letter-spacing: .035em; }
.travel-photos { margin-top: 18px; border-top: 1px solid #bfc4bb; }
.travel-photos summary { display: flex; align-items: center; gap: 18px; min-height: 44px; cursor: pointer; padding: 0; list-style: none; }
.travel-photos summary::-webkit-details-marker { display: none; }
.travel-title { font-size: 18px; letter-spacing: .07em; }
.photo-count { font-size: 11px; color: var(--muted); }
.accordion-symbol { width: 16px; height: 16px; position: relative; margin-left: auto; }
.accordion-symbol::before, .accordion-symbol::after { position: absolute; content: ''; background: #586052; left: 0; top: 7px; width: 16px; height: 1px; }
.accordion-symbol::after { transform: rotate(90deg); transition: transform 160ms ease; }
.travel-photos[open] .accordion-symbol::after { transform: rotate(0); }
.misc-grid { columns: 6; column-gap: var(--gap); }
.misc-grid .photo-tile { width: 100%; break-inside: avoid; margin: 0 0 var(--gap); }
.site-footer { margin: 16px var(--edge) 0; padding: 14px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.page-message { margin: 60px 25px; }
.lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; padding: 0; overflow: hidden; scrollbar-gutter: auto; outline: none; color: #ededeb; background: #141615; touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
.lightbox::backdrop { background: #141615; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox-stage { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
.lightbox-stage.is-comparing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.lightbox-snapshot { position: absolute; inset: 0; pointer-events: none; }
.lightbox-figure { margin: 0; width: 100%; height: 100%; }
.lightbox-figure img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.lightbox-figure { min-width: 0; min-height: 0; overflow: hidden; }
.lightbox-figure .still-placeholder { width: 100%; height: 100%; aspect-ratio: auto; background: #191c19; color: #b4bcb1; }
.lightbox-figure .placeholder-note { color: #929b8d; }
.lightbox-figure[hidden], .lightbox-figure img[hidden], .lightbox-figure .still-placeholder[hidden] { display: none; }
.compare-button { position: absolute; z-index: 2; top: max(4px, env(safe-area-inset-top)); left: max(4px, env(safe-area-inset-left)); display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 2px; color: #f2f3ef; background: transparent; opacity: .56; filter: drop-shadow(0 1px 2px #000); cursor: pointer; transition: opacity 160ms ease, background 160ms ease; }
.compare-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.compare-button[aria-pressed="true"] { opacity: .8; }
.compare-button:focus-visible { opacity: 1; }
@media (hover: hover) { .compare-button:hover { opacity: 1; background: #ffffff08; } }
.compare-button[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon-button { display: grid; place-items: center; position: absolute; width: 48px; height: 48px; border: 0; background: transparent; color: #edecea; cursor: pointer; }
.icon-button:hover { background: #ffffff0d; }
.icon-button[hidden] { display: none; }
.icon-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.lightbox-close { z-index: 1; right: max(4px, env(safe-area-inset-right)); top: max(4px, env(safe-area-inset-top)); opacity: .65; filter: drop-shadow(0 1px 3px #000); transition: opacity 160ms ease; }
.lightbox-close:hover, .lightbox-close:focus-visible { opacity: 1; }
.lightbox-close svg { width: 18px; height: 18px; }
.photo-arrow { z-index: 1; top: calc(50% - 22px); width: 44px; height: 44px; opacity: .45; filter: drop-shadow(0 1px 2px #000); transition: opacity 160ms ease, background 160ms ease; }
.photo-arrow svg { width: 18px; height: 18px; }
.photo-arrow-prev { left: max(4px, env(safe-area-inset-left)); }
.photo-arrow-next { right: max(4px, env(safe-area-inset-right)); }
.photo-arrow:hover, .photo-arrow:focus-visible { opacity: .95; }
@media (any-pointer: coarse), (hover: none), (pointer: coarse) { .photo-arrow { display: none; } }
body.lightbox-open { overflow: hidden; }
html:has(.lightbox[open]) { scrollbar-gutter: auto; }
@media (max-width: 1100px) and (orientation: landscape) { .scene-heading { gap: 15px; } .scene-title { font-size: 16px; } .scene-meta { font-size: 11px; gap: 9px; } .scene-meta span + span::before { padding-right: 9px; } .misc-grid { columns: 4; } }
@media (orientation: portrait), (max-width: 700px) {
  :root { --edge: 6px; --header-height: 40px; }
  .site-header { gap: 13px; }
  .site-title { font-size: 18px; letter-spacing: .055em; }
  .series-title { font-size: 10px; letter-spacing: .04em; }
  .header-divider { height: 13px; }
  .trip-date { display: none; }
  .scene { padding-bottom: 10px; }
  .scene-heading { display: block; padding: 10px 0 4px; }
  .scene-title { font-size: 17px; line-height: 1.45; white-space: normal; }
  .scene-meta { margin-top: 0; font-size: 11px; gap: 10px; flex-wrap: wrap; white-space: normal; }
  .scene-meta span + span::before { padding-right: 10px; }
  .scene-meta .unset { font-size: 10px; }
  .scene-images { display: flex; flex-direction: column; gap: var(--gap); }
  .photo-tile, .still-placeholder { flex: none; width: 100%; }
  .travel-title { font-size: 17px; }
  .misc-grid { columns: 1; }
  .site-footer { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }