/*
Theme Name: Wayfinder
Theme URI: https://bhaskarwagle.com.np
Author: Bhaskar Wagle
Author URI: https://bhaskarwagle.com.np
Description: An editorial, cartography-inspired journal theme for travel notes, curated finds and field logs. Lightweight, dependency-free, built for fast loading on shared hosting.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: wayfinder
*/

/* ---------------------------------------------
   0. TOKENS
--------------------------------------------- */
:root{
  --paper:      #EDEAE1;
  --paper-dim:  #E4E0D3;
  --ink:        #1B211C;
  --ink-soft:   #333930;
  --pine:       #2F4B3C;
  --pine-deep:  #223a2d;
  --rust:       #A75B2E;
  --slate:      #5C6660;
  --line:       #C9C4B4;
  --white:      #FBFAF6;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --container: 1220px;
  --radius: 3px;
}

/* ---------------------------------------------
   1. RESET
--------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0 0 0.5em; line-height:1.1; }
p{ margin:0 0 1.2em; }
.container{ max-width: var(--container); margin:0 auto; padding: 0 var(--gap); }
.visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; }

.eyebrow-plain{ color: var(--slate); font-size: 0.85rem; letter-spacing: 0.01em; margin: 0 0 0.6em; }

/* underline-draw link style, used for inline text links */
.ink-link{
  position:relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .35s ease;
  padding-bottom: 1px;
}
.ink-link:hover, .ink-link:focus-visible{ background-size: 100% 1px; }

/* ---------------------------------------------
   2. SITE HEADER / NAV
--------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(237,234,225,0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.site-logo{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.site-logo small{
  display:block; font-family: var(--font-body); font-weight:400;
  font-size: 0.62rem; letter-spacing: 0.14em; color: var(--slate); margin-top: 2px;
}

.primary-nav{ display:flex; align-items:center; }
.primary-nav > ul{ display:flex; gap: 2.1rem; }
.primary-nav > ul > li{ position:relative; }
.primary-nav > ul > li > a{
  font-size: 0.98rem;
  padding: 0.4rem 0.1rem;
  display:inline-flex; align-items:center; gap:6px;
  position:relative;
}
.primary-nav > ul > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--pine); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.primary-nav > ul > li:hover > a::after,
.primary-nav > ul > li.current-menu-ancestor > a::after,
.primary-nav > ul > li.current_page_item > a::after{ transform: scaleX(1); }

.menu-caret{ font-size: 0.6rem; transform: translateY(1px); opacity:.6; }

.sub-menu{
  position:absolute; top: calc(100% + 14px); left: -1.1rem;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 34px -18px rgba(27,33,28,0.35);
  padding: 0.5rem 0;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform: translateY(0);
}
.sub-menu li a{
  display:block; padding: 0.6rem 1.1rem; font-size: 0.92rem; color: var(--ink-soft);
  border-left: 2px solid transparent;
}
.sub-menu li a:hover{ border-left-color: var(--rust); background: var(--paper-dim); color: var(--ink); }

.nav-toggle{ display:none; }

@media (max-width: 900px){
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; width:26px; z-index: 110;
  }
  .nav-toggle span{ height:2px; background: var(--ink); width:100%; transition: transform .25s ease, opacity .25s ease; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .primary-nav{
    position:fixed; inset:0 0 0 auto; top:76px; height: calc(100vh - 76px);
    width: min(86vw, 360px); background: var(--white);
    border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .3s ease;
    overflow-y:auto; padding: 1.5rem 0;
  }
  .primary-nav.is-open{ transform: translateX(0); }
  .primary-nav > ul{ flex-direction:column; gap:0; }
  .primary-nav > ul > li{ border-bottom:1px solid var(--line); }
  .primary-nav > ul > li > a{ padding: 1rem 1.5rem; width:100%; }
  .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-top:1px dashed var(--line);
    display:none; background: var(--paper-dim);
  }
  .primary-nav li.is-expanded > .sub-menu{ display:block; }
}

/* ---------------------------------------------
   3. HERO
--------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding: clamp(3rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem);
  border-bottom: 1px solid var(--line);
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--gap); align-items:end; }
.hero-coords{ font-size: 0.78rem; color: var(--slate); letter-spacing: 0.06em; margin-bottom: 1.1rem; display:flex; align-items:center; gap:.5rem; }
.hero-coords .dot{ width:6px; height:6px; border-radius:50%; background: var(--rust); display:inline-block; }
.hero h1{
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  max-width: 14ch;
  opacity:0; transform: translateY(14px);
  animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
.hero .lede{
  font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; margin-top: 1rem;
  opacity:0; transform: translateY(14px);
  animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .55s forwards;
}
.hero-actions{
  margin-top:1.6rem; display:flex; gap:1.6rem; align-items:center;
  opacity:0; transform: translateY(14px);
  animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .7s forwards;
}
@keyframes heroRise{ to{ opacity:1; transform:none; } }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--pine); color: var(--white);
  padding: 0.85rem 1.5rem; font-size: 0.92rem; border-radius: var(--radius);
  transition: background .25s ease, transform .25s ease;
}
.btn:hover{ background: var(--pine-deep); transform: translateY(-2px); }
.btn.btn-outline{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
.btn.btn-outline:hover{ background: var(--ink); color: var(--white); }

.hero-map{ position:relative; aspect-ratio: 4/5; }
.hero-map svg{ width:100%; height:100%; }
.contour-path{
  fill:none; stroke: var(--pine); stroke-width:1.4; opacity:.75;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: drawContour 2.6s cubic-bezier(.3,.6,.2,1) .2s forwards;
}
.contour-path.alt{ stroke: var(--rust); opacity:.5; animation-delay: .5s; }
.contour-path.alt2{ stroke: var(--slate); opacity:.4; animation-delay: .8s; }
@keyframes drawContour{ to{ stroke-dashoffset:0; } }
.hero-pin{
  position:absolute; top:38%; left:52%;
  width:10px; height:10px; border-radius:50%;
  background: var(--rust); box-shadow: 0 0 0 4px rgba(167,91,46,.18);
  opacity:0; animation: pinPop .5s ease 2.1s forwards;
}
@keyframes pinPop{ to{ opacity:1; } }

@media (max-width: 820px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-map{ order:-1; aspect-ratio: 16/10; margin-bottom: 1rem; }
}

/* ---------------------------------------------
   4. SECTION HEADINGS
--------------------------------------------- */
.section{ padding: clamp(3rem,6vw,5.5rem) 0; border-bottom: 1px solid var(--line); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  margin-bottom: 2.4rem;
}
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-head .desc{ color: var(--slate); max-width: 42ch; margin-top:.4rem; font-size:.98rem; }
.section-link{ font-size:0.92rem; white-space:nowrap; }

/* reveal-on-scroll utility, applied by JS to section wrappers only (not per-card) */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------------------------------------
   5. EXPERIENCES — asymmetric tile grid
--------------------------------------------- */
.experience-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap);
}
.tile{
  position:relative; overflow:hidden; border-radius: var(--radius);
  background: var(--ink); color: var(--white);
  min-height: 320px; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1.6rem;
}
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.62; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.tile:hover img{ transform: scale(1.045); opacity:.72; }
.tile::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,33,28,0) 30%, rgba(20,24,20,.92) 100%);
}
.tile-label{ position:relative; z-index:1; font-size:.76rem; letter-spacing:.05em; color:#D9D4C4; margin-bottom:.35rem; }
.tile h3{ position:relative; z-index:1; font-size:1.55rem; margin:0; }
.tile-count{ position:relative; z-index:1; font-size:.82rem; color:#C7C2B2; margin-top:.4rem; }

.tile--travel{ grid-column: span 3; }
.tile--observations{ grid-column: span 3; }
.tile--art{ grid-column: span 2; min-height:260px; }
.tile--movies{ grid-column: span 4; min-height:260px; }

@media (max-width: 900px){
  .experience-grid{ grid-template-columns: 1fr 1fr; }
  .tile--travel,.tile--observations,.tile--art,.tile--movies{ grid-column: span 1; min-height:240px; }
}
@media (max-width: 560px){
  .experience-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------
   6. BEST OF THE INTERNET — dispatch list
--------------------------------------------- */
.dispatch-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); }
.dispatch-item{
  display:grid; grid-template-columns: 88px 1fr; gap:1.1rem;
  padding: 1.4rem 0; border-top: 1px solid var(--line);
}
.dispatch-item:nth-last-child(-n+1){ border-bottom: 1px solid var(--line); }
.dispatch-tag{
  font-size: .72rem; letter-spacing:.04em; color: var(--rust);
  border: 1px solid currentColor; border-radius: 999px;
  padding: .28rem .1rem; text-align:center; height: fit-content;
}
.dispatch-item h3{ font-size: 1.12rem; margin: 0 0 .3rem; }
.dispatch-item p{ font-size: .93rem; color: var(--ink-soft); margin:0; }
.dispatch-item a.stretched{ position:absolute; inset:0; }
.dispatch-item{ position:relative; }

@media (max-width: 760px){ .dispatch-list{ grid-template-columns: 1fr; } }

/* ---------------------------------------------
   7. LEARN — logbook entries
--------------------------------------------- */
.logbook{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.logbook-entry{
  border: 1px solid var(--line); background: var(--white);
  padding: 1.8rem; border-radius: var(--radius);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.logbook-entry:hover{ border-color: var(--pine); box-shadow: 0 16px 30px -22px rgba(27,33,28,.4); }
.logbook-meta{ display:flex; justify-content:space-between; font-size:.76rem; color: var(--slate); margin-bottom: 1rem; padding-bottom:.9rem; border-bottom:1px dashed var(--line); }
.logbook-entry h3{ font-size:1.28rem; margin-bottom:.5rem; }
.logbook-entry p{ font-size:.94rem; color: var(--ink-soft); }
.logbook-entry .ink-link{ font-size:.9rem; font-weight:600; }

@media (max-width: 900px){ .logbook{ grid-template-columns: 1fr; } }

/* ---------------------------------------------
   8. GALLERY
--------------------------------------------- */
.masonry{
  columns: 3 220px; column-gap: var(--gap);
}
.masonry figure{
  break-inside: avoid; margin: 0 0 var(--gap); position:relative; overflow:hidden;
  border-radius: var(--radius); cursor: zoom-in;
}
.masonry img{ transition: transform .5s ease; width:100%; }
.masonry figure:hover img{ transform: scale(1.04); }
.masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: .8rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(20,24,20,.85));
  color:#fff; font-size:.82rem; opacity:0; transition: opacity .25s ease;
}
.masonry figure:hover figcaption{ opacity:1; }
@media (max-width:700px){ .masonry{ columns: 2 160px; } }

.lightbox{
  position:fixed; inset:0; background: rgba(15,17,14,.92); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding: 4vh 4vw;
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-height:90vh; max-width:92vw; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:24px; right:28px; color:#fff; font-size:1.8rem; line-height:1; }

/* ---------------------------------------------
   9. SINGLE POST / PAGE / ARCHIVE
--------------------------------------------- */
.page-hero{ padding: 3rem 0 2.2rem; border-bottom:1px solid var(--line); }
.page-hero .eyebrow-plain{ margin-bottom: .8rem; }
.page-hero h1{ font-size: clamp(2rem,4vw,3rem); max-width: 22ch; }
.page-hero .desc{ color: var(--slate); max-width: 60ch; margin-top:.8rem; }

.post-meta{ font-size:.85rem; color: var(--slate); display:flex; gap:.9rem; flex-wrap:wrap; }

.content-wrap{ padding: 3rem 0 4.5rem; }
.content-wrap .container{ display:grid; grid-template-columns: minmax(0,72ch) 1fr; gap: 3rem; }
.entry-content{ font-size: 1.08rem; }
.entry-content h2{ font-size:1.6rem; margin-top:1.8em; }
.entry-content h3{ font-size:1.3rem; margin-top:1.5em; }
.entry-content p{ margin-bottom: 1.4em; }
.entry-content img{ border-radius: var(--radius); margin: 1.6em 0; }
.entry-content a{ color: var(--pine); text-decoration: underline; text-underline-offset:3px; }
.entry-content blockquote{
  border-left: 3px solid var(--rust); margin: 1.8em 0; padding: .2em 0 .2em 1.4em;
  font-family: var(--font-display); font-size:1.2rem; color: var(--ink-soft);
}
.post-sidebar{ font-size:.9rem; }
.post-sidebar .widget{ margin-bottom: 2.2rem; padding-bottom:2.2rem; border-bottom:1px dashed var(--line); }
.post-sidebar h4{ font-size:.78rem; letter-spacing:.05em; color: var(--slate); margin-bottom:1rem; }
.post-sidebar ul li{ margin-bottom:.6rem; }

@media (max-width: 820px){
  .content-wrap .container{ grid-template-columns: 1fr; }
}

.archive-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.post-card{ border:1px solid var(--line); background:var(--white); border-radius: var(--radius); overflow:hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.post-card:hover{ border-color: var(--pine); box-shadow: 0 18px 30px -22px rgba(27,33,28,.4); }
.post-card .thumb{ aspect-ratio: 4/3; overflow:hidden; background: var(--paper-dim); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.post-card:hover .thumb img{ transform: scale(1.05); }
.post-card .body{ padding: 1.3rem 1.4rem 1.5rem; }
.post-card h3{ font-size:1.14rem; margin-bottom:.4rem; }
.post-card p{ font-size:.9rem; color: var(--ink-soft); margin-bottom:.8rem; }
@media (max-width: 900px){ .archive-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .archive-grid{ grid-template-columns: 1fr; } }

.pagination{ display:flex; gap: 1rem; margin-top: 3rem; justify-content:center; }
.pagination a, .pagination span{ padding: .6rem 1.1rem; border:1px solid var(--line); border-radius: var(--radius); font-size:.9rem; }
.pagination .current{ background: var(--pine); color:#fff; border-color: var(--pine); }

.empty-state{ text-align:center; padding: 4rem 1rem; color: var(--slate); }

/* ---------------------------------------------
   10. FOOTER
--------------------------------------------- */
.site-footer{ background: var(--ink); color: var(--paper); padding: 3.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap); margin-bottom: 2.5rem; }
.footer-brand .site-logo{ color: var(--paper); }
.footer-brand p{ color: #A9AA9E; max-width: 40ch; margin-top:1rem; font-size:.94rem; }
.footer-col h4{ font-size:.78rem; letter-spacing:.05em; color:#9A9C90; margin-bottom:1.1rem; }
.footer-col ul li{ margin-bottom:.7rem; font-size:.94rem; }
.footer-col ul li a:hover{ color: var(--rust); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(237,234,225,.15);
  font-size:.82rem; color:#8C8E82;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }