/* Pangea v12. White, timeless, slow. One face (Jost, Pangea's own), photographs carry the colour,
 * and every movement lands softly: one long out-curve for everything watched. */
:root{--paper:#fcfbf8;--ink:#1d1b18;--body:#4a4640;--mute:#6e6a63;--pale:#b3aea4;--line:rgba(29,27,24,.12);--g:20px;
  --caress:cubic-bezier(.22,1,.36,1);--soft:cubic-bezier(.65,0,.35,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.65;color:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
h1,h2,h3{font-weight:200;color:var(--ink);letter-spacing:-.035em;line-height:.96}
h1 em,h2 em,.statement em{font-style:italic;font-weight:200}
h2 .soft{color:var(--pale)}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}

/* the hand-off: everything watched arrives slowly, from a little below, out of a soft blur */
[data-r]{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity 1.6s var(--caress),transform 1.9s var(--caress),filter 1.6s var(--caress)}
[data-r].in{opacity:1;transform:none;filter:none}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:inline-block;transform:translateY(112%);transition:transform 1.7s var(--caress);transition-delay:calc(var(--i) * 120ms)}
.in .ln>span,.ln.in>span{transform:none}
/* photographs unveil from below and settle */
.frame{display:block;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 2s var(--caress)}
.in .frame,.frame.in{clip-path:inset(0 0 0 0)}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 2.8s var(--caress)}
.in .frame img,.frame.in img{transform:scale(1)}
.frame.par img{transform:none;transition:none}

/* links and the one button: feedback on press, never abrupt */
.link{position:relative;display:inline-block;font-size:13px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);padding-bottom:6px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .9s var(--caress)}
.link:hover::after{transform:scaleX(.35)}
.cta{display:inline-flex;align-items:center;gap:18px;height:62px;padding:0 10px 0 30px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font-size:13px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;transition:background .7s var(--caress),color .7s var(--caress),transform .12s}
.cta i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);font-style:normal;font-size:15px;letter-spacing:0;transition:transform .7s var(--caress),background .7s var(--caress),color .7s var(--caress)}
.cta:hover{background:var(--ink);color:var(--paper)}.cta:hover i{background:var(--paper);color:var(--ink);transform:translate(2px,-2px) scale(1.05)}
.cta:active,.row a:active,.link:active{transform:scale(.97)}

/* loader: Pangea's mark drawn in a single fine line */
.loader{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--paper);transition:opacity 1.1s var(--caress),visibility 1.1s}
.loader.gone{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{width:54px;height:88px;overflow:visible}
.loader__mark path{fill:none;stroke:var(--ink);stroke-width:.22;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:draw 1.6s var(--soft) forwards;animation-delay:calc(var(--i) * 90ms)}
@keyframes draw{to{stroke-dashoffset:0}}

/* top: a quiet line of words that steps aside while you read, and returns when you look back */
.top{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) var(--g) 16px;transition:transform 1s var(--caress),background .8s var(--caress)}
.top.solid{background:var(--paper)}
.top.hide{transform:translateY(-105%)}
.top__logo img{height:36px;width:auto}
.top__nav{display:none;gap:36px;font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--ink)}
.top__nav a{position:relative}.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--caress)}.top__nav a:hover::after{transform:scaleX(1)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:calc(120px + env(safe-area-inset-top)) var(--g) 60px}
.hero h1{font-size:clamp(52px,12.5vw,176px);margin:22px 0 34px}
.hero__img{width:100%;aspect-ratio:4/5;max-height:64vh}
.hero__img img{object-position:50% 45%}
.hero__note{margin-top:30px;max-width:30ch;display:grid;gap:22px;justify-items:start}

/* the answer */
.people{padding:110px var(--g) 60px;display:grid;gap:60px}
.people h2{font-size:clamp(46px,8vw,112px);margin-bottom:40px}
.people__together{aspect-ratio:4/3}
.people__list{display:grid;gap:90px}
.person__img{width:78%;aspect-ratio:3/4;margin-bottom:30px}
.person h3{font-size:42px;margin:12px 0 16px}
.person>p:not(.eyebrow){max-width:40ch}
.person blockquote{margin:28px 0 26px;font-size:22px;font-weight:200;line-height:1.4;color:var(--ink);max-width:28ch}
.person blockquote cite,.words__q cite{display:block;margin-top:12px;font-size:11px;font-style:normal;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}

/* journeys that move you: the one full-bleed photograph */
/* a held moment: the photograph stays while the words rise over it */
.moved{position:relative;height:200vh;margin:60px 0 0}
.bleed{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.bleed__cap{position:absolute;right:var(--g);top:calc(90px + env(safe-area-inset-top));z-index:2;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.bleed::after{content:"";position:absolute;inset:0;background:rgba(20,18,15,.34)}
.statement{position:absolute;left:0;right:0;bottom:14vh;z-index:2;padding:0 var(--g);font-size:clamp(36px,6.4vw,104px);font-weight:200;line-height:1.02;letter-spacing:-.03em;color:#fff}
.statement .fade{color:rgba(255,255,255,.8)}

/* moments: an editorial scatter, each at its own depth */
.moments{position:relative;padding:60px var(--g) 120px;display:grid;grid-template-columns:repeat(6,1fr);gap:22px 14px;align-items:start}
.moments__h{grid-column:1/-1;font-size:clamp(44px,8vw,112px);margin-bottom:40px}
.m figcaption{margin-top:12px;font-size:13px;letter-spacing:.04em;color:var(--mute)}
.m .frame{width:100%}
.m1{grid-column:1/-1}.m1 .frame{aspect-ratio:3/2}
.m2{grid-column:1/4}.m2 .frame{aspect-ratio:3/4}
.m3{grid-column:1/-1;margin-top:10px}.m3 .frame{aspect-ratio:2.6/1}
.m4{grid-column:2/6}.m4 .frame{aspect-ratio:2/3}
.m5{grid-column:1/-1}.m5 .frame{aspect-ratio:16/10}
.m6{grid-column:3/7}.m6 .frame{aspect-ratio:4/5}

/* journeys and what they cost: hairline rows, a photograph that follows on desktop */
.journeys{position:relative;padding:120px var(--g)}
.journeys__head{display:grid;gap:30px;margin-bottom:60px}
.journeys h2{font-size:clamp(46px,8vw,112px)}
.journeys__head p{max-width:44ch}
.rows{list-style:none;border-top:1px solid var(--line)}
.row a{position:relative;display:grid;grid-template-columns:76px 1fr;gap:6px 16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);transition:transform .12s}
.r-img{grid-row:1/4;width:76px;height:96px;object-fit:cover;border-radius:2px}
.r-t{font-size:24px;font-weight:200;color:var(--ink);line-height:1.15;letter-spacing:-.02em;transition:transform 1s var(--caress)}
.r-t small{display:block;margin-top:4px;font-size:13px;letter-spacing:.04em;color:var(--mute)}
.r-n{display:none}
.r-w,.r-f{font-size:14px}
.r-s{grid-column:2;font-size:13px;letter-spacing:.03em;color:var(--mute)}
.r-f{color:var(--ink)}
.hover{position:fixed;left:0;top:0;z-index:30;width:300px;height:380px;pointer-events:none;opacity:0;overflow:hidden;border-radius:2px;will-change:transform,opacity}
.hover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--caress)}
.hover img.on{opacity:1}

/* how a journey begins */
.begin{padding:120px var(--g);display:grid;gap:40px}
.begin h2{font-size:clamp(46px,8vw,112px)}
.begin__img{aspect-ratio:4/3}
.steps{list-style:none;display:grid;gap:40px}
.steps span{display:block;font-size:11px;letter-spacing:.3em;color:var(--mute);margin-bottom:14px}
.steps p{font-size:28px;font-weight:200;line-height:1.25;color:var(--ink);max-width:18ch;letter-spacing:-.015em}

/* a traveller's words */
.words{padding:40px var(--g) 100px;display:grid;gap:40px;align-items:center}
.words__img{aspect-ratio:4/3}
.words__q{font-size:clamp(28px,4.2vw,60px);font-weight:200;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}

/* the invitation */
.write{padding:120px var(--g);display:grid;gap:0;align-content:start}
.write__img{aspect-ratio:4/5;width:72%;margin:0 0 50px auto}
.write h2{font-size:clamp(46px,10vw,150px);margin:24px 0 60px}
.write__ways{display:grid;gap:22px;justify-items:start}
.write__line{font-size:clamp(24px,3vw,40px);font-weight:200;color:var(--ink);letter-spacing:-.02em;border-bottom:1px solid transparent;transition:border-color .8s var(--caress)}
.write__line:hover{border-color:var(--ink)}
.foot{padding:40px var(--g) calc(50px + env(safe-area-inset-bottom));overflow:hidden}
.foot__sign{display:flex;align-items:flex-end;gap:28px;margin:30px 0 60px}
.foot__mark{width:clamp(70px,9vw,120px);height:auto;aspect-ratio:41/67;overflow:visible}
.foot__mark path{fill:none;stroke:var(--ink);stroke-width:.2;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 2.4s var(--soft);transition-delay:calc(var(--i) * 120ms)}
.foot__mark.in path{stroke-dashoffset:0}
.foot__name{font-size:clamp(40px,7vw,104px);font-weight:200;font-style:italic;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.foot__name span{font-style:normal;color:var(--pale)}
.foot__cols{display:grid;gap:22px;font-size:14px;line-height:1.7;color:var(--mute)}
.foot__cols a{color:var(--ink)}

/* a journey's own page */
.trip[hidden],#home[hidden]{display:none}
.tp{padding:calc(120px + env(safe-area-inset-top)) var(--g) 120px}
.tp .back{margin-bottom:50px}
.tp h1{font-size:clamp(46px,9vw,150px);margin:20px 0 50px}
.tp__hero{aspect-ratio:3/2;max-height:80vh;width:100%}
.tp__facts{display:grid;grid-template-columns:1fr 1fr;gap:28px 18px;margin:50px 0 40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.tp__facts dt{font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.tp__facts dd{font-size:20px;font-weight:300;color:var(--ink);line-height:1.3}
.tp__line{font-size:clamp(24px,3vw,40px);font-weight:200;line-height:1.25;color:var(--ink);letter-spacing:-.02em;max-width:30ch;margin-bottom:90px}
.tp__days{list-style:none;display:grid;gap:80px;margin-bottom:110px}
.tp__day{display:grid;gap:22px}
.tp__day .frame{aspect-ratio:3/2}
.tp__day h3{font-size:clamp(30px,3.6vw,52px);margin:10px 0 12px}
.tp__day p{max-width:44ch}
.tp__inc{display:grid;gap:40px;margin-bottom:110px;padding-top:50px;border-top:1px solid var(--line)}
.tp__inc h3{font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:16px;letter-spacing:.28em}
.tp__inc ul{list-style:none;display:grid;gap:10px}.tp__inc li{padding-left:22px;position:relative}.tp__inc li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--mute)}
.tp__book{display:grid;gap:26px;padding:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:110px}
.tp__fare{font-size:clamp(40px,6vw,92px);font-weight:200;color:var(--ink);letter-spacing:-.035em;line-height:1}
.tp__fare small{display:block;margin-top:14px;font-size:15px;letter-spacing:0;color:var(--mute);font-weight:300}
.tp__next{display:grid;gap:20px}
.tp__next .frame{aspect-ratio:16/9}
.tp__next h2{font-size:clamp(40px,7vw,110px)}
.veil{position:fixed;inset:0;z-index:70;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .75s var(--caress)}
.veil.on{opacity:1}

@media (min-width:900px){
  :root{--g:64px}
  .top{padding-top:28px}.top__logo img{height:44px}.top__nav{display:flex}
  .hero{padding-top:150px}
  .hero h1{font-size:clamp(52px,8.6vw,150px);position:relative;z-index:2}
  .hero__img{position:absolute;right:var(--g);top:30vh;width:32vw;max-height:none;aspect-ratio:auto;height:80vh;margin:0}
  .hero__note{position:absolute;left:var(--g);bottom:9vh;margin:0}
  .people{grid-template-columns:1fr 1fr;gap:8vw;padding:170px var(--g) 120px;align-items:start}
  .people__held{position:sticky;top:12vh}
  .people__list{padding-top:28vh;gap:160px}
  .person__img{width:72%}
  .moments{grid-template-columns:repeat(12,1fr);gap:0 28px;padding:120px var(--g) 200px}
  .moments__h{grid-column:1/7;margin-bottom:0}
  .m1{grid-column:7/13;grid-row:1}
  .m2{grid-column:2/6;grid-row:2;margin-top:-4vw}
  .m3{grid-column:7/13;grid-row:2;margin-top:10vw}.m3 .frame{aspect-ratio:2.6/1}
  .m4{grid-column:1/5;grid-row:3;margin-top:8vw}
  .m5{grid-column:5/10;grid-row:3;margin-top:16vw}
  .m6{grid-column:10/13;grid-row:3;margin-top:4vw}
  .journeys{padding:180px var(--g)}
  .journeys__head{grid-template-columns:1.2fr 1fr;align-items:end;margin-bottom:90px}
  .row a{grid-template-columns:4em 1.6fr 1.2fr 1.2fr 1.3fr;gap:24px;padding:30px 0}
  .r-img{display:none}
  .r-n{display:block;font-size:12px;letter-spacing:.2em;color:var(--mute)}
  .r-t{font-size:34px}
  .r-s{grid-column:auto;text-align:right}
  .row a:hover .r-t{transform:translateX(14px)}
  .begin{padding:180px var(--g);grid-template-columns:1fr 1fr;gap:40px 7vw;align-items:start}
  .begin__img{grid-column:2;grid-row:1/3;aspect-ratio:3/4;height:auto}
  .begin h2{grid-column:1;grid-row:1}
  .steps{grid-column:1;grid-row:2;align-self:end}
  .steps p{font-size:34px}
  .words{grid-template-columns:1.1fr 1fr;gap:8vw;padding:80px var(--g) 180px}
  .write{padding:180px var(--g);grid-template-columns:1.25fr .75fr;column-gap:6vw;align-items:end}
  .write__img{grid-column:2;grid-row:1/4;width:100%;margin:0}
  .write>.eyebrow,.write h2,.write__ways{grid-column:1}
  .write__ways{grid-template-columns:auto;gap:26px}
  .foot__cols{grid-template-columns:repeat(3,1fr)}
  .tp{padding-top:170px}
  .tp__facts{grid-template-columns:repeat(4,1fr)}
  .tp__day{grid-template-columns:1.2fr 1fr;gap:6vw;align-items:center}
  .tp__day:nth-child(even) .frame{order:2}
  .tp__inc{grid-template-columns:1fr 1fr}
  .tp__book{grid-template-columns:1fr auto;align-items:end}
}
@media (prefers-reduced-motion:reduce){
  [data-r],.ln>span,.frame,.frame img{transform:none!important;filter:none!important;clip-path:none!important;transition:opacity .4s ease!important}
  .loader__mark path,.foot__mark path{animation:none;transition:none;stroke-dashoffset:0}
  .top,.hover{transition:none}
}
@media (prefers-reduced-transparency:reduce){.top.solid{background:var(--paper);backdrop-filter:none}}