:root { --paper: #fff; --ink: #212921; --muted: #6e7369; --route: #7b8b72; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: "Manrope", sans-serif; -webkit-font-smoothing: antialiased; }
.paper-grain { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E"); }
main { width: min(1440px, 100%); min-height: 100svh; margin: 0 auto; padding: 36px clamp(22px, 5vw, 72px) 28px; display: flex; flex-direction: column; }
.masthead, footer { display: flex; justify-content: space-between; align-items: center; }
.masthead a { color: var(--ink); font-size: 1.05rem; text-decoration: none; }
.masthead span, footer, .scroll-invite, .countdown > p, .feed-index, .feed-note { font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.masthead span { color: var(--muted); font-size: .62rem; }
.journey { flex: 1; padding: clamp(42px, 6vw, 78px) 0 46px; }
.title-wrap { text-align: center; }
h1 { margin: 0; display: flex; justify-content: center; align-items: center; gap: clamp(12px, 2vw, 28px); font-size: clamp(2.05rem, 4vw, 3.45rem); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; }
h1 .arrow { color: var(--route); font-family: "DM Mono", monospace; font-size: .8em; font-weight: 300; }
.scroll-invite { margin: 18px 0 0; color: var(--muted); font-size: clamp(.62rem, .8vw, .72rem); }
.collage { position: relative; aspect-ratio: 1300 / 510; margin: clamp(54px, 7vw, 96px) auto 0; overflow: hidden; box-shadow: inset 0 0 80px rgba(65, 72, 57, .035); }
.landmarks { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.route { position: absolute; width: 61.54%; height: 56.86%; left: 21.15%; top: 7.45%; }
.plane { position: absolute; width: 10.34%; height: auto; left: 63.08%; top: 12.7%; transform: rotate(-1deg); animation: float 4s ease-in-out infinite; }
.countdown { margin: clamp(42px, 5vw, 66px) auto 0; text-align: center; }
.countdown > p { margin: 0; color: var(--muted); font-size: .61rem; }
.timer { margin-top: 12px; display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 1.5vw, 22px); font-family: "Caveat", cursive; }
.timer div { min-width: clamp(38px, 5vw, 64px); }
.timer strong { display: block; font-size: clamp(2.25rem, 4.2vw, 3.7rem); line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }
.timer span { display: block; margin-top: 7px; color: var(--muted); font-size: clamp(.58rem, .9vw, .76rem); text-transform: uppercase; }
.timer i { margin-top: .09em; color: var(--route); font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-style: normal; line-height: 1; }
.arrival-date { margin-top: 20px !important; }
.landed-message { margin-top: 16px !important; color: var(--ink) !important; }
.infinite-feed { width: min(880px, 100%); margin: clamp(100px, 14vw, 190px) auto 0; }
.feed-items { display: grid; gap: clamp(80px, 12vw, 150px); }
.feed-card { min-height: min(55vh, 520px); display: grid; grid-template-columns: 70px 1fr; gap: clamp(18px, 4vw, 58px); align-items: center; border-top: 1px solid rgba(33, 41, 33, .22); padding-top: 24px; }
.feed-index { align-self: start; color: var(--muted); font-size: .58rem; }
.feed-copy { margin: 0; font-family: "Caveat", cursive; font-size: clamp(3rem, 7vw, 6.2rem); font-weight: 400; line-height: .95; letter-spacing: -.035em; }
.feed-note { grid-column: 2; align-self: end; margin: 0; color: var(--muted); font-size: .58rem; }
.feed-sentinel { height: 2px; margin-top: 20vh; }
.back-to-top { position: fixed; right: clamp(16px, 2vw, 30px); bottom: clamp(16px, 2vw, 30px); z-index: 30; width: 58px; height: 58px; border: 1px solid var(--ink); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font-family: "DM Mono", monospace; font-size: 1rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, visibility .2s; backdrop-filter: blur(6px); }
.back-to-top span { display: block; font-size: .45rem; letter-spacing: .08em; text-transform: uppercase; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--ink); color: var(--paper); }
footer { color: var(--muted); font-size: .58rem; }
@keyframes float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(0, -8px, 0) rotate(1deg); } }
@media (max-width: 700px) {
  main { padding-top: 24px; }
  .masthead span { display: none; }
  .journey { padding-top: 48px; }
  h1 { flex-direction: column; gap: 2px; }
  h1 .arrow { transform: rotate(90deg); margin: 5px 0; }
  .collage { width: calc(100% + 44px); margin-left: -22px; aspect-ratio: 1300 / 510; }
  .landmarks { object-position: center; }
  .route { width: 75%; left: 13%; top: 12%; }
  .plane { width: 16%; left: 62%; top: 18%; }
  .timer { gap: 5px; }
  .timer i { margin-inline: -2px; }
  .arrival-date { line-height: 1.6; }
  .infinite-feed { margin-top: 110px; }
  .feed-card { min-height: 48vh; grid-template-columns: 42px 1fr; gap: 12px; }
  .feed-note { grid-column: 1 / -1; text-align: right; }
  .back-to-top { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .plane { animation: none; } }