@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --ivory:#f7f4ee;
  --ivory-dim:#efe9df;
  --charcoal:#161513;
  --charcoal-soft:#242320;
  --navy:#1c2733;
  --blue:#4a6b82;
  --beige:#c9b79c;
  --gold:#b89968;
  --line:rgba(22,21,19,0.1);
  --line-light:rgba(247,244,238,0.16);
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw:1440px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%; max-width:100vw;}
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  position:relative;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px);}
.eyebrow{
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  font-weight:500; color:var(--gold);
}
.serif{font-family:var(--serif);}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Nav ---------- */
/* z-index:206 (above .scrim's 204): .nav is `position:fixed`, which makes it
   its own stacking context — its children (.nav-links, .nav-toggle) are
   stacked ONLY relative to each other and to nav's own z-index, never
   directly against siblings like #scrim outside <nav>. With .nav below the
   scrim, the open mobile drawer visually appeared but the scrim silently
   sat on top of it and absorbed every tap — the menu "did nothing" when
   opened on a real device, even though it looked fine in a static review. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:206;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(20px,5vw,64px);
  transition:background .5s ease, padding .4s ease, box-shadow .4s ease;
  background:transparent;
}
.nav.scrolled{
  background:rgba(247,244,238,0.97);
  padding:16px clamp(20px,5vw,64px);
  box-shadow:0 1px 0 var(--line);
}
.nav-logo{
  font-family:var(--serif); font-size:19px; letter-spacing:0.04em;
  color:var(--ivory); transition:color .4s ease;
}
.nav.scrolled .nav-logo, .nav.solid .nav-logo{color:var(--charcoal);}
.nav-links{display:flex; gap:44px; list-style:none;}
.nav-links a{
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500;
  color:var(--ivory); opacity:0.88; transition:opacity .3s, color .4s ease;
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .35s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav.scrolled .nav-links a, .nav.solid .nav-links a{color:var(--charcoal);}
.nav-links a:hover{opacity:1;}
/* 44x44 minimum touch target (accessibility guideline) even though the
   drawn icon is smaller — a real thumb, not just a mouse pointer, needs to
   be able to hit this reliably. A subtle always-visible backdrop circle
   keeps the icon legible over any hero photo, not just once scrolled. */
.nav-toggle{
  display:none; width:44px; height:44px; position:relative; z-index:210;
  margin:-12px -10px -12px 0; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.nav-toggle::before{
  content:''; position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%;
  background:rgba(10,9,7,0.22); backdrop-filter:blur(3px); transition:background .35s ease;
}
.nav.scrolled .nav-toggle::before, .nav.solid .nav-toggle::before{background:rgba(22,21,19,0.06);}
.nav-toggle span{
  position:absolute; left:12px; right:12px; height:1.5px; background:var(--ivory); transition:all .35s ease;
  pointer-events:none;
}
.nav.scrolled .nav-toggle span, .nav.solid .nav-toggle span{background:var(--charcoal);}
.nav-toggle span:nth-child(1){top:16px;}
.nav-toggle span:nth-child(2){top:22px;}
.nav-toggle span:nth-child(3){top:28px;}
.nav-toggle.open span:nth-child(1){top:22px; transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){top:22px; transform:rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--charcoal);
}
.hero-media{position:absolute; inset:0; overflow:hidden;}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  animation:heroZoom 22s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,0.28) 0%, rgba(10,10,8,0.08) 32%, rgba(10,10,8,0.55) 78%, rgba(10,10,8,0.85) 100%);
}
.hero-content{
  position:relative; z-index:2; color:var(--ivory);
  width:100%; padding:0 clamp(20px,5vw,64px) 88px;
}
.hero-eyebrow{
  font-size:13px; letter-spacing:0.35em; text-transform:uppercase; color:var(--beige); font-weight:500;
  opacity:0; animation:fadeUp 1s ease .4s forwards;
}
.hero-title{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(48px,9vw,128px); line-height:0.98; margin:10px 0 18px;
  letter-spacing:-0.01em;
  opacity:0; animation:fadeUp 1.1s ease .6s forwards;
}
.hero-route{
  font-size:clamp(14px,1.6vw,19px); letter-spacing:0.08em; font-weight:300;
  color:rgba(247,244,238,0.86);
  opacity:0; animation:fadeUp 1.1s ease .85s forwards;
}
.hero-route span{margin:0 10px; color:var(--gold);}
.hero-cta{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory);
  opacity:0; animation:fadeUp 1s ease 1.3s forwards;
}
.hero-cta .arrow{font-size:16px; animation:bounce 2.2s ease-in-out infinite;}
@keyframes fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

/* ---------- Intro ---------- */
.intro{padding:150px 0 130px; background:var(--ivory);}
.intro-grid{display:grid; grid-template-columns:0.9fr 1.4fr; gap:90px; align-items:start;}
.intro-heading{font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(30px,3.4vw,44px); line-height:1.2;}
.intro-body p{font-size:17px; line-height:1.85; color:var(--charcoal-soft); font-weight:300; margin-bottom:20px; max-width:56ch;}
.intro-stats{display:flex; gap:56px; margin-top:44px; flex-wrap:wrap;}
.stat-num{font-family:var(--serif); font-size:38px; font-style:italic;}
.stat-label{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8a8578; margin-top:6px;}

/* ---------- Section shell ---------- */
.section{padding:120px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; flex-wrap:wrap; gap:24px;}
.section-title{font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,58px); font-style:italic; margin-top:8px;}
.section-desc{max-width:44ch; font-size:15px; color:#77716399; color:#6b6459; font-weight:300; line-height:1.7;}
.section.alt{background:var(--charcoal); color:var(--ivory);}
.section.alt .section-desc{color:rgba(247,244,238,0.62);}

/* ---------- Filter bar ---------- */
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:48px;}
.filter-btn{
  padding:9px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--line); border-radius:100px; color:var(--charcoal-soft);
  transition:all .3s ease;
}
.filter-btn:hover{border-color:var(--gold);}
.filter-btn.active{background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal);}
.filter-spacer{flex:1;}
.dl-all-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;
  color:var(--charcoal); border-bottom:1px solid var(--gold); padding-bottom:3px;
  transition:opacity .3s;
}
/* Dark ("alt") sections — like Shelley's Photos — sit on a charcoal
   background, so the filter pills and the download link need their own
   light-on-dark colors instead of the default dark-on-light ones above. */
.section.alt .filter-btn{border-color:var(--line-light); color:rgba(247,244,238,0.72);}
.section.alt .filter-btn:hover{border-color:var(--gold); color:var(--ivory);}
.section.alt .filter-btn.active{background:var(--ivory); color:var(--charcoal); border-color:var(--ivory);}
.section.alt .dl-all-btn{color:var(--ivory);}
.section.alt .dl-all-btn:hover{opacity:0.7;}
.dl-all-btn:hover{opacity:0.6;}

/* ---------- Masonry grid ---------- */
/* Grid (not CSS multi-column) so photos read left-to-right, top-to-bottom
   in true chronological order — column-count used to fill each column
   top-to-bottom first, which visually scrambled the timeline. Tiles are
   cropped to a consistent aspect ratio to keep the grid perfectly row-major
   regardless of each photo's native orientation. */
.masonry{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.masonry-item{
  position:relative; overflow:hidden; aspect-ratio:1/1;
  border-radius:2px; cursor:pointer; background:#e6e0d3;
  opacity:0; transform:translateY(18px) scale(0.985);
  transition:opacity .6s ease, transform .6s ease;
}
.masonry-item.in{opacity:1; transform:translateY(0) scale(1);}
.masonry-item img{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,.8,.24,1), filter .6s ease;
}
.masonry-item:hover img{transform:scale(1.045);}
.masonry-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 18px 14px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%);
  color:#fff; opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.masonry-item:hover .masonry-caption{opacity:1;}
.masonry-caption .loc{font-size:13px; font-weight:500; letter-spacing:0.02em;}
.masonry-caption .meta{font-size:11px; opacity:0.75; margin-top:2px; letter-spacing:0.04em;}

@media (max-width:1100px){ .masonry{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .masonry{grid-template-columns:repeat(2,1fr); gap:10px;} }
@media (max-width:480px){ .masonry{grid-template-columns:1fr;} }

/* Destination groups: each city/place gets its own header + mini masonry,
   so browsing "All" reads as a sequence of chapters rather than one flat
   shuffle of every country together. */
.photo-group{margin-bottom:76px;}
.photo-group:last-child{margin-bottom:0;}
.group-header{
  display:flex; align-items:baseline; gap:16px; margin-bottom:22px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.section.alt .group-header{border-bottom-color:var(--line-light);}
.group-header h3{font-family:var(--serif); font-style:italic; font-weight:500; font-size:24px;}
.group-meta{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:#8a8578;}
.section.alt .group-meta{color:rgba(247,244,238,0.5);}

/* ---------- Destinations ---------- */
.dest-layout{display:grid; grid-template-columns:1.05fr 0.95fr; gap:70px; align-items:start;}
.euro-map{width:100%; aspect-ratio:1/1.06;}
.euro-map svg{width:100%; height:100%;}
.map-country{fill:rgba(247,244,238,0.09); stroke:rgba(247,244,238,0.4); stroke-width:0.5; transition:fill .35s ease, stroke .35s ease; cursor:pointer;}
.map-country:hover{fill:rgba(247,244,238,0.16);}
.map-country.active{fill:rgba(184,153,104,0.4); stroke:var(--gold);}
.map-country-sicily{cursor:default;}
.map-pin{cursor:pointer;}
.map-pin circle.dot{fill:var(--gold); transition:r .3s ease; stroke:rgba(10,9,7,0.5); stroke-width:0.3;}
.map-pin:hover circle.dot, .map-pin.active circle.dot{ r:2.4; }
.map-pin circle.ring{fill:none; stroke:var(--gold); stroke-width:0.4; opacity:0; transform-origin:center;}
.map-pin.active circle.ring{animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{ 0%{opacity:0.7; transform:scale(0.6);} 100%{opacity:0; transform:scale(2.6);} }
.map-label{font-family:var(--sans); letter-spacing:0.05em; fill:rgba(247,244,238,0.8); text-transform:uppercase; font-weight:500;}
.route-line{fill:none; stroke:var(--beige); stroke-width:0.35; stroke-dasharray:1.4 1.4; opacity:0.55;}

.dest-list{display:flex; flex-direction:column; gap:0;}
.dest-card{
  padding:30px 0; border-top:1px solid var(--line-light); cursor:pointer;
  transition:padding .35s ease;
}
.dest-card:last-child{border-bottom:1px solid var(--line-light);}
.dest-card-head{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.dest-card-title{font-family:var(--serif); font-style:italic; font-size:26px; display:flex; align-items:center; gap:12px;}
.dest-card-count{font-size:12px; letter-spacing:0.08em; color:var(--beige);}
.dest-card-tag{font-size:12px; letter-spacing:0.06em; color:rgba(247,244,238,0.55); margin-top:6px;}
.dest-card-body{
  max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,.8,.24,1);
}
.dest-card.open .dest-card-body{max-height:1000px;}
.dest-card-body-inner{padding-top:20px;}
.dest-card-body p{font-size:14.5px; line-height:1.8; color:rgba(247,244,238,0.72); font-weight:300; max-width:56ch; margin-bottom:18px;}
.dest-city-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.dest-city-chip{
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:7px 14px;
  border:1px solid rgba(247,244,238,0.25); border-radius:100px; color:rgba(247,244,238,0.85);
  transition:all .3s ease;
}
.dest-city-chip:hover{border-color:var(--gold); color:var(--gold);}
.dest-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px;}
.dest-thumbs img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:2px;}
.dest-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Journal timeline ---------- */
.timeline{position:relative; max-width:920px; margin:0 auto;}
.timeline::before{
  content:''; position:absolute; left:120px; top:0; bottom:0; width:1px; background:var(--line);
}
@media (max-width:720px){ .timeline::before{left:20px;} }
.tl-item{display:grid; grid-template-columns:100px 40px 1fr; gap:0; padding-bottom:80px; position:relative;}
@media (max-width:720px){
  .tl-item{grid-template-columns:40px 1fr;}
  .tl-item .tl-day{display:none;}
  .tl-item .tl-dot-col{grid-column:1;}
  .tl-item .tl-content{grid-column:2;}
}
.tl-day{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--gold); padding-top:4px; text-align:right; padding-right:20px;}
.tl-dot-col{display:flex; justify-content:center; position:relative;}
.tl-dot{
  width:11px; height:11px; border-radius:50%; background:var(--ivory); border:2px solid var(--charcoal);
  margin-top:6px; z-index:2; transition:background .3s, border-color .3s;
}
.tl-item.in .tl-dot{background:var(--gold); border-color:var(--gold);}
.tl-content{padding-left:8px;}
.tl-meta{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8a8578; margin-bottom:8px;}
.tl-title{font-family:var(--serif); font-style:italic; font-size:clamp(24px,3vw,32px); margin-bottom:14px;}
.tl-text{font-size:15px; line-height:1.85; color:var(--charcoal-soft); font-weight:300; max-width:58ch; margin-bottom:22px;}
.tl-photos{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.tl-photos img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:2px; cursor:pointer; transition:transform .4s ease;}
.tl-photos img:hover{transform:scale(1.03);}
@media (max-width:560px){ .tl-photos{grid-template-columns:repeat(3,1fr);} }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(10,9,7,0.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s ease;
}
.lightbox.open{opacity:1; visibility:visible;}
.lb-stage{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:70px 90px;}
.lb-img-wrap{position:relative; max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center;}
.lb-img{max-width:100%; max-height:82vh; object-fit:contain; opacity:0; transform:scale(0.97); transition:opacity .45s ease, transform .45s ease; border-radius:1px;}
.lb-img.show{opacity:1; transform:scale(1);}
.lb-top{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:26px 34px; color:#f2ede2; z-index:5;}
.lb-counter{font-size:12px; letter-spacing:0.1em; font-weight:300;}
.lb-close{font-size:26px; font-weight:300; line-height:1; padding:6px; opacity:0.8; transition:opacity .3s, transform .3s;}
.lb-close:hover{opacity:1; transform:rotate(90deg);}
.lb-bottom{
  position:absolute; left:0; right:0; bottom:0; padding:22px 34px 30px;
  display:flex; justify-content:space-between; align-items:flex-end; color:#f2ede2;
  background:linear-gradient(0deg, rgba(0,0,0,0.5), transparent);
}
.lb-info .lb-loc{font-family:var(--serif); font-style:italic; font-size:20px;}
.lb-info .lb-meta{font-size:11.5px; letter-spacing:0.08em; opacity:0.65; margin-top:4px; text-transform:uppercase;}
.lb-dl{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border:1px solid rgba(242,237,226,0.5);
  border-radius:100px; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  transition:all .3s ease;
}
.lb-dl:hover{background:#f2ede2; color:var(--charcoal); border-color:#f2ede2;}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#f2ede2; font-size:20px; border:1px solid rgba(242,237,226,0.3);
  transition:all .3s ease;
}
.lb-nav:hover{background:rgba(242,237,226,0.14); border-color:rgba(242,237,226,0.7);}
.lb-prev{left:24px;}
.lb-next{right:24px;}
@media (max-width:720px){
  .lb-stage{padding:60px 12px;}
  .lb-nav{width:40px; height:40px; font-size:16px;}
  .lb-prev{left:6px;} .lb-next{right:6px;}
  .lb-bottom{flex-direction:column; align-items:flex-start; gap:14px;}
}

/* ---------- Download panel ---------- */
.dlpanel-overlay{
  position:fixed; inset:0; z-index:900; background:rgba(10,9,7,0.55);
  opacity:0; visibility:hidden; transition:opacity .35s ease;
}
.dlpanel-overlay.open{opacity:1; visibility:visible;}
.dlpanel{
  position:fixed; right:0; top:0; bottom:0; width:min(420px,90vw); z-index:901;
  background:var(--ivory); padding:80px 40px 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform .5s cubic-bezier(.16,.8,.24,1);
}
.dlpanel-overlay.open .dlpanel{transform:translateX(0);}
.dlpanel h3{font-family:var(--serif); font-style:italic; font-size:28px; margin-bottom:8px;}
.dlpanel p{font-size:13.5px; color:var(--charcoal-soft); margin-bottom:30px; line-height:1.6;}
.dlpanel-close{position:absolute; top:28px; right:32px; font-size:24px;}
.dl-row{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--line);}
.dl-row-name{font-size:14px; font-weight:500;}
.dl-row-count{font-size:11.5px; color:#8a8578; margin-top:2px;}
.dl-row-btn{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--gold); padding-bottom:2px;}

/* ---------- Footer ---------- */
.footer{padding:80px 0 50px; background:var(--charcoal); color:rgba(247,244,238,0.55);}
.footer .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-logo{font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ivory);}
.footer-sub{font-size:12px; letter-spacing:0.06em; margin-top:6px;}
.footer-nav{display:flex; gap:28px; list-style:none;}
.footer-nav a{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; opacity:0.75; transition:opacity .3s;}
.footer-nav a:hover{opacity:1;}

/* ---------- Mobile nav drawer ---------- */
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:78vw; max-width:340px; background:var(--ivory);
    flex-direction:column; justify-content:center; gap:34px; padding:40px;
    transform:translateX(100%); transition:transform .5s cubic-bezier(.16,.8,.24,1); z-index:205;
    box-shadow:-10px 0 40px rgba(0,0,0,0.15);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{color:var(--charcoal) !important; font-size:15px;}
  .nav-toggle{display:block;}
  .intro-grid{grid-template-columns:1fr; gap:36px;}
  .dest-layout{grid-template-columns:1fr; gap:50px;}
}

@media (max-width:720px){
  .section{padding:80px 0;}
  .section-head{margin-bottom:34px;}
  .intro{padding:100px 0 80px;}
}

.scrim{
  position:fixed; inset:0; z-index:204; background:rgba(10,9,7,0.4); opacity:0; visibility:hidden; transition:opacity .4s;
}
.scrim.open{opacity:1; visibility:visible;}

::selection{background:var(--gold); color:#fff;}