/* Home + trip pages. Editorial "paper" look: warm beige, charcoal, italic serif headlines, small caps eyebrows,
   dark pill buttons. Scoped to body.site so the music and japan pages are untouched. */
body.site {
  --bg: #eee7d9; --fg: #2a2928; --muted: #6f6a5f; --card: #f6f1e6; --line: rgba(42,41,40,.18);
  --accent: #2a2928; --ink-bg: #2a2928; --ink-fg: #f6f1e6; --dot: #c8482b;
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--fg); font: 400 15px/1.8 var(--sans); letter-spacing: .04em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  body.site {
    --bg: #1f1e1c; --fg: #ece5d6; --muted: #a29b8c; --card: #292724; --line: rgba(236,229,214,.2);
    --accent: #ece5d6; --ink-bg: #ece5d6; --ink-fg: #1f1e1c; --dot: #ff8a68;
    background-image: none;
  }
}
.site .wrap { max-width: 1080px; padding: 0 24px; }
.site a { color: inherit; }

/* top bar */
.site .bar { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 0; }
.site .logo { font: italic 700 1.7rem/1 var(--serif); letter-spacing: 0; text-decoration: none; }
.site .logo i { color: var(--dot); font-style: normal; }
.site .menu { display: flex; align-items: center; gap: 22px; font: italic 400 1.05rem var(--serif); letter-spacing: .02em; }
.site .menu a { text-decoration: none; }
.site .menu a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site .menu::after { content: ""; width: 74px; height: 7px; border-block: 1px solid var(--fg); }

/* type */
.site .eyebrow { font: 500 .72rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.site .title { font: italic 500 clamp(2rem, 5.2vw, 3.4rem)/1.35 var(--serif); letter-spacing: .01em; margin: 0; }
.site .muted { color: var(--muted); font-size: .85rem; }
.site .section { padding: 84px 0 0; }

/* pill button */
.site .pill { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink-bg); color: var(--ink-fg);
  border-radius: 10px; padding: 18px 22px; font-weight: 500; text-decoration: none; transition: transform .2s; }
.site .pill::after { content: "›"; font-size: 1.4rem; line-height: 1; }
.site .pill:hover { transform: translateX(4px); }
.site .back.pill { display: inline-flex; padding: 10px 16px; font-size: .85rem; gap: 10px; }
.site .back.pill::after { content: none; }

/* home hero */
.site .intro { padding: 88px 0 0; }
.site .intro h1 { font: italic 500 clamp(2.6rem, 8vw, 5.4rem)/1.2 var(--serif); letter-spacing: 0; margin: 0 0 26px; }
.site .intro h1 .dot { color: var(--dot); font-style: normal; }
.site .intro .lede { max-width: 34em; color: var(--fg); font-size: 1.05rem; margin: 0; }
.site .scroll { display: inline-block; margin-top: 44px; font: 500 .7rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.site .scroll::after { content: ""; display: block; width: 1px; height: 56px; background: var(--fg); margin: 12px 0 0 4px; }

/* trip cards */
.site .grid { display: grid; gap: 56px 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); margin-top: 34px; }
.site .card { background: none; border: 0; border-radius: 0; overflow: visible; display: block; text-decoration: none; }
.site .card .ph { overflow: hidden; border-radius: 6px; aspect-ratio: 4/3; background: var(--card); }
.site .card img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; filter: grayscale(1) contrast(1.05); transition: filter .5s, transform .6s; }
.site .card:hover img { filter: none; transform: scale(1.04); }
.site .card .num { font: italic 400 .95rem var(--serif); color: var(--muted); margin: 18px 0 6px; }
.site .card h3 { font: italic 500 1.55rem/1.4 var(--serif); letter-spacing: .01em; margin: 0 0 4px; }
.site .card p { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.site .card .go { display: inline-block; margin-top: 14px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--fg); padding-bottom: 3px; }

/* trip hero */
.site .hero { position: relative; margin: 28px calc(50% - 50vw) 0; width: 100vw; max-width: none; aspect-ratio: 1024 / 583; max-height: 85vh; border-radius: 0; overflow: hidden; background: #222; }
.site .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: brightness(.7); }
.site .hero .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 max(24px, calc(50vw - 516px)) 44px; color: #f6f1e6; }
.site .hero .eyebrow { color: rgba(246,241,230,.8); }
.site .hero h1 { font: italic 500 clamp(2rem, 6vw, 4rem)/1.3 var(--serif); letter-spacing: .01em; margin: 0; }
.site .tripintro h1 { font: italic 500 clamp(2rem, 6vw, 4rem)/1.3 var(--serif); margin: 70px 0 0; }
.site .tripintro .lede, .site .hero .lede { margin: 14px 0 0; font-size: 1rem; }
.site .hero .lede { color: rgba(246,241,230,.88); }

/* overview */
.site .overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; margin: 46px 0 0; border-top: 1px solid var(--line); }
.site .overview div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); }
.site .overview dt { font: 500 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.site .overview dd { margin: 0; font-size: .95rem; line-height: 1.6; }

/* itinerary */
.site .region { font: italic 500 clamp(1.8rem, 4.4vw, 2.8rem)/1.3 var(--serif); letter-spacing: .01em; border: 0; padding: 0; margin: 90px 0 6px; }
.site .region small { display: block; font: 500 .72rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.site .day { display: grid; grid-template-columns: 190px 1fr; gap: 6px 36px; border: 0; border-top: 1px solid var(--line); padding: 26px 0; margin: 0; }
.site .day .date { grid-column: 1; grid-row: 1 / span 4; font: italic 400 1rem/1.5 var(--serif); color: var(--muted); letter-spacing: .01em; }
.site .day h3 { grid-column: 2; font: 500 1.2rem/1.5 var(--sans); letter-spacing: .06em; margin: 0; }
.site .day ul, .site .day p, .site .day .photos { grid-column: 2; }
.site .day ul { list-style: none; margin: 6px 0 0; padding: 0; }
.site .day li { padding: 4px 0; }
.site .time { display: inline-block; min-width: 5.5em; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site .photos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 12px; }
.site .photos img { width: 100%; border-radius: 6px; display: block; }
@media (max-width: 640px) {
  .site .day { grid-template-columns: 1fr; }
  .site .day .date, .site .day h3, .site .day ul, .site .day p, .site .day .photos { grid-column: 1; grid-row: auto; }
  .site .menu::after { display: none; }
}

/* moments: keep the tilted prints, now on paper */
.site .scrap { columns: 230px; column-gap: 22px; margin-top: 34px; }
.site .scrap figure { background: #fbf8f0; border-radius: 2px; box-shadow: 0 8px 22px rgba(42,41,40,.22); }
.site .scrap figcaption { color: #3a3835; }

/* flights: dark cards like the reference's rounded dark rows */
.site .flight { background: var(--ink-bg); color: var(--ink-fg); border: 0; border-radius: 10px; padding: 24px 26px; margin: 16px 0; }
.site .flight h3 { font: italic 500 1.35rem/1.4 var(--serif); margin: 0; }
.site .flight .date { color: inherit; opacity: .7; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.site .flight .leg { border-top: 1px solid rgba(246,241,230,.2); margin-top: 14px; padding: 12px 0 0; gap: 4px 14px; }
.site .flight .muted { color: inherit; opacity: .65; }
.site .flight .arrow { opacity: .6; }
@media (prefers-color-scheme: dark) { .site .flight .leg { border-top-color: rgba(31,30,28,.25); } }

/* before you go */
.site .info { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.site .info li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.site .info strong { display: inline-block; min-width: 11em; font-weight: 500; letter-spacing: .08em; }

.site footer { padding: 90px 24px 50px; text-align: center; font: italic 400 .95rem var(--serif); color: var(--muted); }

/* narrow screens: keep faces clear, title goes under the photo instead of over it */
@media (max-width: 900px) {
  .site .hero { aspect-ratio: auto; max-height: none; overflow: visible; background: none; }
  .site .hero img { height: auto; aspect-ratio: 1024 / 583; filter: none; }
  .site .hero .cap { position: static; color: var(--fg); padding: 26px 24px 0; }
  .site .hero .eyebrow { color: var(--muted); }
  .site .hero .lede { color: var(--fg); }
}