/* ============================================================
   VANTAGE — a journal of elevation and distance
   Design system: fixed left rail, ivory/ink/emerald/brass palette,
   bold condensed-sans display type over a warm literary serif body.
   ============================================================ */

:root{
  --ivory:        #f2ede2;
  --ivory-dim:     #ece5d6;
  --paper:        #faf7f0;
  --ink:          #16181a;
  --ink-soft:     #24272a;
  --text:         #26241f;
  --text-muted:   #6f6a5c;
  --text-on-ink:  #efe9db;
  --text-on-ink-muted: #a6a093;
  --emerald:      #1f3d34;
  --emerald-deep: #142822;
  --brass:        #b3894f;
  --brass-light:  #d8b579;
  --rule:         rgba(38,36,31,0.14);
  --rule-on-ink:  rgba(239,233,219,0.16);
  --shadow: 0 20px 60px rgba(15,15,10,0.16);
  --sidebar-w: 264px;
  --maxw: 1280px;
  --radius: 2px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; font-weight:700; letter-spacing:0.01em; }

.eyebrow{
  font-family:"Archivo", sans-serif;
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brass);
}
.eyebrow.on-ink{ color:var(--brass-light); }

/* ---------- layout shell ---------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--ink);
  color:var(--text-on-ink);
  display:flex; flex-direction:column;
  padding:2.4rem 2rem 2rem;
  z-index:100;
  border-right:1px solid rgba(255,255,255,0.06);
}
.sidebar .mark{
  font-family:"Archivo", sans-serif;
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:0.06em;
  color:var(--text-on-ink);
}
.sidebar .mark span{ color:var(--brass-light); }
.sidebar .tagline{
  margin-top:0.5rem;
  font-family:"Source Serif 4", serif;
  font-style:italic;
  font-size:0.85rem;
  color:var(--text-on-ink-muted);
  line-height:1.4;
  max-width:16rem;
}
.sidebar nav{ margin-top:3rem; display:flex; flex-direction:column; gap:0.15rem; }
.sidebar nav a{
  font-family:"Archivo", sans-serif;
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-on-ink-muted);
  padding:0.6rem 0;
  border-bottom:1px solid var(--rule-on-ink);
  transition:color .2s ease, padding-left .2s ease;
}
.sidebar nav a:hover, .sidebar nav a.active{
  color:var(--text-on-ink);
  padding-left:0.35rem;
}
.sidebar nav a.active{ color:var(--brass-light); }

.sidebar .rail-destinations{ margin-top:2.4rem; display:flex; flex-direction:column; gap:0.35rem; }
.sidebar .rail-destinations a{
  font-family:"Source Serif 4", serif;
  font-size:0.86rem;
  color:var(--text-on-ink-muted);
  padding:0.15rem 0;
}
.sidebar .rail-destinations a:hover{ color:var(--brass-light); }

.sidebar-foot{ margin-top:auto; padding-top:2rem; }
.sidebar-foot p{
  font-family:"Archivo", sans-serif;
  font-size:0.68rem;
  letter-spacing:0.05em;
  color:var(--text-on-ink-muted);
  line-height:1.6;
}

.menu-toggle{ display:none; }

main.content{
  margin-left:var(--sidebar-w);
  flex:1;
  min-width:0;
  background:var(--ivory);
}

/* ---------- generic section scaffolding ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 4rem; }
section{ padding:5rem 0; }
.section-tight{ padding:3rem 0; }
hr.rule{ border:none; border-top:1px solid var(--rule); margin:0; }

/* ---------- topbar (mobile) ---------- */
.topbar{
  display:none;
  position:sticky; top:0; z-index:90;
  align-items:center; justify-content:space-between;
  background:var(--ink); color:var(--text-on-ink);
  padding:1rem 1.25rem;
}
.topbar .mark{ font-family:"Archivo",sans-serif; font-weight:800; letter-spacing:0.06em; }
.topbar .mark span{ color:var(--brass-light); }
.topbar button{
  background:none; border:1px solid var(--rule-on-ink); color:var(--text-on-ink);
  font-family:"Archivo",sans-serif; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.5rem 0.8rem; border-radius:var(--radius); cursor:pointer;
}

/* ============ HOME ============ */
.hero-band{
  padding:6.5rem 0 4rem;
  border-bottom:1px solid var(--rule);
}
.hero-band .eyebrow{ margin-bottom:1.4rem; display:block; }
.hero-band h1{
  font-size:clamp(2.6rem, 5.4vw, 4.6rem);
  line-height:1.02;
  text-transform:uppercase;
  max-width:16ch;
}
.hero-band h1 em{
  font-family:"Source Serif 4", serif;
  font-style:italic;
  font-weight:400;
  text-transform:none;
  color:var(--emerald);
}
.hero-band .lede{
  margin-top:1.8rem;
  max-width:38rem;
  font-size:1.14rem;
  color:var(--text-muted);
}
.hero-band .links{ margin-top:2.2rem; display:flex; gap:2rem; flex-wrap:wrap; }
.text-link{
  font-family:"Archivo", sans-serif;
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding-bottom:0.3rem;
  border-bottom:2px solid var(--ink);
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.text-link:hover{ border-color:var(--brass); color:var(--emerald); }
.text-link.muted{ border-color:var(--rule); color:var(--text-muted); }
.text-link.muted:hover{ border-color:var(--brass); color:var(--text); }

/* destination masonry grid */
.dest-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:10rem;
  grid-auto-flow:dense;
  gap:0.9rem;
}
.dest-tile{
  position:relative; overflow:hidden; border-radius:var(--radius);
  grid-column:span 3; grid-row:span 3;
  background:var(--ink);
}
.dest-tile.wide{ grid-column:span 4; }
.dest-tile.narrow{ grid-column:span 2; }
.dest-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.dest-tile:hover img{ transform:scale(1.09); }
.dest-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,0) 40%, rgba(10,10,8,0.78) 100%);
}
.dest-tile .label{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.3rem; z-index:2;
  color:var(--text-on-ink);
}
.dest-tile .label .eyebrow{ color:var(--brass-light); margin-bottom:0.3rem; display:block; }
.dest-tile .label h3{ font-size:1.5rem; text-transform:uppercase; line-height:1.05; }
.dest-tile.big .label h3{ font-size:2rem; }
.dest-tile .label p{
  margin:0.4rem 0 0; font-family:"Source Serif 4", serif; font-style:italic;
  font-size:0.88rem; color:var(--text-on-ink-muted); max-width:26ch;
}

/* featured journal rail */
.rail-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2.4rem; flex-wrap:wrap; gap:1rem; }
.rail-head h2{ font-size:1.9rem; text-transform:uppercase; }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.article-card{ display:block; }
.article-card .thumb{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); background:var(--ink); }
.article-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.article-card:hover .thumb img{ transform:scale(1.06); }
.article-card .meta{ margin-top:1rem; }
.article-card .eyebrow{ display:block; margin-bottom:0.5rem; }
.article-card h3{
  font-family:"Source Serif 4", serif; font-weight:600; text-transform:none;
  font-size:1.24rem; line-height:1.28;
}
.article-card:hover h3{ color:var(--emerald); }
.article-card .hook{ margin-top:0.5rem; color:var(--text-muted); font-size:0.95rem; }

/* pull-quote band */
.quote-band{
  position:relative; padding:7rem 0; margin:1rem 0;
  background:var(--ink); color:var(--text-on-ink);
  overflow:hidden;
}
.quote-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.42; }
.quote-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,12,10,0.92) 20%, rgba(12,12,10,0.5) 85%); }
.quote-band .wrap{ position:relative; z-index:2; }
.quote-band blockquote{
  margin:0; max-width:34rem;
  font-family:"Source Serif 4", serif; font-style:italic; font-weight:400;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem); line-height:1.35;
}
.quote-band cite{ display:block; margin-top:1.6rem; font-style:normal; }

/* values strip */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem; }
.value-item{ border-top:1px solid var(--rule); padding-top:1.2rem; }
.value-item h4{ font-size:0.98rem; text-transform:uppercase; letter-spacing:0.02em; }
.value-item p{ margin-top:0.6rem; color:var(--text-muted); font-size:0.92rem; }

/* ============ DESTINATION / JOURNAL headers ============ */
.page-header{
  padding:5.5rem 0 3rem;
  border-bottom:1px solid var(--rule);
}
.page-header .eyebrow{ margin-bottom:1.2rem; display:block; }
.page-header h1{
  font-size:clamp(2.2rem, 4.4vw, 3.4rem);
  text-transform:uppercase; line-height:1.04; max-width:22ch;
}
.page-header .lede{ margin-top:1.4rem; max-width:42rem; color:var(--text-muted); font-size:1.06rem; }

.cover-band{ position:relative; height:46vh; min-height:22rem; overflow:hidden; }
.cover-band img{ width:100%; height:100%; object-fit:cover; }
.cover-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,8,6,0.86) 0%, rgba(8,8,6,0.4) 32%, rgba(8,8,6,0) 62%); }
.cover-band .cover-caption{
  position:absolute; left:4rem; right:4rem; bottom:2rem; color:var(--text-on-ink);
  text-shadow:0 2px 18px rgba(0,0,0,0.35);
}

/* journal filter tabs */
.filter-tabs{ display:flex; gap:0.5rem; flex-wrap:wrap; margin:2.6rem 0 0; }
.filter-tabs button{
  font-family:"Archivo", sans-serif; font-weight:600; font-size:0.76rem;
  letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--rule); color:var(--text-muted);
  padding:0.6rem 1.1rem; border-radius:100px; cursor:pointer;
  transition:all .2s ease;
}
.filter-tabs button:hover{ border-color:var(--emerald); color:var(--emerald); }
.filter-tabs button.active{ background:var(--ink); border-color:var(--ink); color:var(--text-on-ink); }

.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem 2.4rem; margin-top:3rem; }
.journal-grid .article-card[hidden]{ display:none; }

/* destination article index (alternating rows) */
.index-list{ display:flex; flex-direction:column; }
.index-row{
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:3rem; padding:2.6rem 0; border-top:1px solid var(--rule);
  align-items:center;
}
.index-row:last-child{ border-bottom:1px solid var(--rule); }
.index-row.reverse{ grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); }
.index-row.reverse .index-media{ order:2; }
.index-media{ aspect-ratio:16/11; overflow:hidden; border-radius:var(--radius); background:var(--ink); }
.index-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.index-row:hover .index-media img{ transform:scale(1.05); }
.index-text h3{
  font-family:"Source Serif 4", serif; font-weight:600; text-transform:none;
  font-size:1.7rem; line-height:1.22;
}
.index-row:hover .index-text h3{ color:var(--emerald); }
.index-text .hook{ margin-top:0.9rem; color:var(--text-muted); }
.index-text .text-link{ margin-top:1.3rem; display:inline-block; }

/* related strip on destination pages */
.other-destinations{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.chip{
  font-family:"Archivo", sans-serif; font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--rule); padding:0.5rem 0.9rem; border-radius:100px; color:var(--text-muted);
}
.chip:hover{ border-color:var(--emerald); color:var(--emerald); }

/* ============ ARTICLE ============ */
.article-masthead{ padding:4.5rem 0 0; }
.masthead-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:3.5rem; align-items:end; padding-bottom:3rem; border-bottom:1px solid var(--rule); }
.masthead-text .eyebrow{ margin-bottom:1.1rem; display:block; }
.masthead-text h1{
  font-size:clamp(2rem, 3.6vw, 3.1rem); line-height:1.08; text-transform:uppercase;
}
.masthead-media{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); }
.masthead-media img{ width:100%; height:100%; object-fit:cover; }

.article-body{ padding:3.6rem 0 1rem; }
.article-body .prose{ max-width:42rem; }
.article-body p{ margin:0 0 1.35rem; }
.article-body > .wrap > .prose > p:first-child::first-letter{
  font-family:"Archivo", sans-serif; font-weight:800;
  float:left; font-size:4.1rem; line-height:0.82; padding:0.1rem 0.5rem 0 0;
  color:var(--emerald);
}
.article-body h2{
  font-size:1.5rem; text-transform:uppercase; margin:3rem 0 1.2rem;
  padding-top:2.2rem; border-top:1px solid var(--rule);
}
.article-body .prose > h2:first-child{ padding-top:0; border-top:none; margin-top:0; }
.article-body ul{ margin:0 0 1.35rem; padding-left:1.3rem; }
.article-body li{ list-style:disc; margin-bottom:0.4rem; color:var(--text); }
.article-body .emphasis-line{
  font-family:"Source Serif 4", serif; font-style:italic; font-weight:600;
  font-size:1.28rem; color:var(--emerald); margin:1.7rem 0; line-height:1.4;
}

/* facts plate (Practical Information) */
.facts-plate{
  margin:3rem 0; padding:2.4rem 2.4rem; background:var(--paper);
  border:1px solid var(--rule); border-radius:var(--radius); max-width:42rem;
}
.facts-plate h2{ font-size:1.15rem; text-transform:uppercase; margin:0 0 1.6rem; border:none; padding:0; }
.facts-plate .fact{ padding:1rem 0; border-top:1px solid var(--rule); }
.facts-plate .fact:first-of-type{ border-top:none; padding-top:0; }
.facts-plate .fact h4{
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass);
  margin-bottom:0.5rem;
}
.facts-plate .fact p{ margin:0 0 0.5rem; font-size:0.96rem; }
.facts-plate .fact ul{ margin:0.4rem 0 0.5rem; padding-left:1.1rem; }
.facts-plate .fact li{ font-size:0.94rem; }

/* timeline (Travel Program) */
.timeline{ margin:3rem 0; max-width:42rem; }
.timeline h2{ font-size:1.5rem; text-transform:uppercase; margin:0 0 2rem; border:none; padding:0; }
.timeline-item{ position:relative; padding:0 0 2rem 2.2rem; border-left:1px solid var(--rule); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-5px; top:0.3rem;
  width:9px; height:9px; border-radius:50%; background:var(--emerald);
}
.timeline-item h4{ font-size:1.02rem; text-transform:none; font-family:"Archivo",sans-serif; font-weight:700; }
.timeline-item p{ margin:0.5rem 0 0; color:var(--text-muted); font-size:0.96rem; }

/* card grid sections (city guides, beach guides, etc.) */
.section-cards{ margin:3rem 0; }
.section-cards h2{ font-size:1.6rem; text-transform:uppercase; margin:0 0 2rem; padding:0; border:none; }
.card-set{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:1.6rem; }
.pick-card{
  border:1px solid var(--rule); border-radius:var(--radius); padding:1.7rem;
  background:var(--paper);
}
.pick-card .eyebrow{ display:block; margin-bottom:0.7rem; }
.pick-card h3{
  font-family:"Source Serif 4", serif; font-weight:600; text-transform:none; font-size:1.28rem;
  margin-bottom:0.8rem;
}
.pick-card p{ font-size:0.94rem; color:var(--text-muted); margin:0 0 0.9rem; }
.pick-card .tag-list{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem; }
.pick-card .tag-list span{
  font-family:"Archivo", sans-serif; font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:100px; padding:0.28rem 0.6rem; color:var(--text-muted);
}
.pick-card .tag-list.best span{ border-color:var(--emerald); color:var(--emerald); }

/* ad placement */
.ad-placement{ margin:3rem 0; }
.ad-placement-inner{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; align-items:flex-start; }
.ad-unit{ min-width:300px; min-height:250px; }

/* related + footer */
.related{ padding-top:1rem; }
.related h2{ font-size:1.5rem; text-transform:uppercase; margin-bottom:2rem; }

footer.site-footer{
  margin-top:2rem; padding:3.6rem 0 3rem; border-top:1px solid var(--rule);
  color:var(--text-muted);
}
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.footer-grid .mark{ font-family:"Archivo",sans-serif; font-weight:800; color:var(--text); letter-spacing:0.05em; }
.footer-links{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-links a{ font-family:"Archivo",sans-serif; font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; }
.footer-links a:hover{ color:var(--emerald); }
.footer-fine{ margin-top:2rem; font-size:0.78rem; }

/* about page */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.about-media{ position:sticky; top:4rem; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); }
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-text p{ margin:0 0 1.3rem; max-width:34rem; }
.about-text p:first-of-type::first-letter{
  font-family:"Archivo", sans-serif; font-weight:800; float:left; font-size:3.6rem; line-height:0.8;
  padding:0.1rem 0.5rem 0 0; color:var(--emerald);
}

/* ============ responsive ============ */
@media (max-width: 980px){
  .sidebar{ display:none; }
  .topbar{ display:flex; }
  main.content{ margin-left:0; }
  .wrap{ padding:0 1.4rem; }
  .masthead-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ position:static; }
  .dest-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:11rem; }
  .dest-tile, .dest-tile.wide, .dest-tile.narrow{ grid-column:span 2; grid-row:span 4; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .journal-grid{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .index-row, .index-row.reverse{ grid-template-columns:1fr; }
  .index-row.reverse .index-media{ order:0; }
  section{ padding:3.2rem 0; }
  .cover-band .cover-caption{ left:1.4rem; right:1.4rem; }
}
@media (max-width: 620px){
  .card-grid, .journal-grid, .values-grid{ grid-template-columns:1fr; }
  .hero-band{ padding:3.4rem 0 2.6rem; }
  body{ font-size:16px; }
}

/* mobile nav overlay */
.mobile-nav{
  position:fixed; inset:0; z-index:200; background:var(--ink); color:var(--text-on-ink);
  padding:5.5rem 2rem 2rem; transform:translateX(100%); transition:transform .3s ease;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav nav{ display:flex; flex-direction:column; gap:1.2rem; }
.mobile-nav nav a{ font-family:"Archivo",sans-serif; font-size:1.3rem; text-transform:uppercase; letter-spacing:0.03em; }
.mobile-nav .close-btn{
  position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; color:var(--text-on-ink);
  font-size:1.6rem; cursor:pointer;
}