/* =========================================================
   Wanderlust Lama — production stylesheet
   Direction: field journal kept in a shipping crate
   (Eclectic/Maximalist + Bohemian + Industrial, calmed down
   specifically on itinerary/cost pages for readability.)
   ========================================================= */

:root{
  --kraft:#E8D9BC;
  --kraft-dark:#D9C49C;
  --card:#F3EAD3;
  --ink:#1E1A16;
  --ink-soft:#5B4C3A;
  --stamp:#A63A2E;
  --stamp-light:#D9705A;
  --teal:#1F6F6B;
  --ochre:#C98B2E;
  --brass:#8C6A3F;
  --line:#B9A77E;
  --max-width:1200px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background-color:var(--kraft);
  background-image:
    repeating-linear-gradient(115deg, rgba(30,26,22,0.025) 0px, rgba(30,26,22,0.025) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(25deg, rgba(30,26,22,0.02) 0px, rgba(30,26,22,0.02) 1px, transparent 1px, transparent 4px);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--stamp); }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.15; color:var(--ink); }
p{ margin:0; line-height:1.65; color:var(--ink-soft); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.font-display{ font-family:'Fraunces', serif; }
.font-stencil{ font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.font-stamp{ font-family:'Special Elite', monospace; }

.wrap{ max-width:var(--max-width); width:100%; margin:0 auto; padding:0 40px; }
.section{ padding:64px 0; }
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .section{ padding:44px 0; }
}

/* ---------- header / nav ---------- */
.crate-panel{ background:var(--ink); color:#EADFC4; }
.crate-panel a{ color:#EADFC4; }
.crate-panel a:hover{ color:var(--ochre); }
/* Buttons keep their own (dark-on-light) text color even when a .crate-panel
   parent would otherwise win on specificity — without this, a light button's
   label is nearly invisible against its own light background. */
.crate-panel a.btn-light, .crate-panel a.btn-primary{ color:var(--ink); }
.crate-panel a.btn-light:hover, .crate-panel a.btn-primary:hover{ color:var(--ink); opacity:.85; }

.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px; flex-wrap:wrap; gap:16px;
}
.site-nav .brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:19px;
  letter-spacing:.04em; text-transform:uppercase;
}
.site-nav .brand img{ width:42px; height:42px; border-radius:50%; }
.site-nav .nav-links{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.nav-link{
  font-family:'Oswald', sans-serif; font-weight:500; font-size:13.5px;
  letter-spacing:.05em; text-transform:uppercase;
}
.nav-link.is-active{ color:var(--stamp-light) !important; }
@media (max-width:640px){
  .site-nav{ padding:14px 20px; }
  .site-nav .nav-links{ gap:16px; font-size:12px; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase;
  border:2px solid var(--ink); border-radius:2px; background:transparent; color:var(--ink);
}
.btn-primary{ background:var(--ink); color:var(--kraft); }
.btn-light{ background:#EADFC4; color:var(--ink); border-color:#EADFC4; }
.btn-outline-light{ background:transparent; border-color:#EADFC4; color:#EADFC4; }

/* ---------- stamp badge (core motif) ---------- */
.stamp{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:116px; height:116px; border-radius:50%; flex-shrink:0; padding:8px; text-align:center;
  border:3px solid var(--stamp); outline:1px solid var(--stamp); outline-offset:4px;
  color:var(--stamp); mix-blend-mode:multiply; background:transparent;
}
.stamp.stamp-sm{ width:92px; height:92px; }
.stamp.stamp-teal{ border-color:var(--teal); outline-color:var(--teal); color:var(--teal); }
.stamp.stamp-ochre{ border-color:var(--ochre); outline-color:var(--ochre); color:var(--ochre); }
.stamp-label{ font-size:12px; line-height:1.3; }
.stamp-label.small{ font-size:10px; }

/* ---------- tags ---------- */
.tag{
  display:inline-block; padding:5px 13px; font-family:'Oswald', sans-serif; font-weight:600;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  border:1.5px solid var(--ink); color:var(--ink); border-radius:2px;
}
.tag-stamp{ border-color:var(--stamp); color:var(--stamp); }
.tag-teal{ border-color:var(--teal); color:var(--teal); }
.tag-ochre{ border-color:var(--ochre); color:var(--ochre); }
.tag-solid{ background:var(--ink); color:var(--kraft); border-color:var(--ink); }

/* ---------- cards ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:4px; }
.card-flat{ background:var(--card); border-left:4px solid var(--ink); }

/* ---------- photo collage treatment ---------- */
.photo-frame{
  background:#FAF6EA; padding:10px 10px 28px;
  box-shadow:0 10px 18px rgba(30,26,22,.22); border-radius:2px; display:inline-block;
}
.washi{ position:absolute; width:76px; height:26px; opacity:.85; box-shadow:0 2px 4px rgba(30,26,22,.25); }
.washi-ochre{ background:repeating-linear-gradient(45deg, var(--ochre), var(--ochre) 6px, #DFA85A 6px, #DFA85A 12px); }
.washi-teal{ background:repeating-linear-gradient(45deg, var(--teal), var(--teal) 6px, #3A9490 6px, #3A9490 12px); }

/* ---------- grids ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
@media (max-width:900px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

/* ---------- hero ---------- */
.hero{ position:relative; width:100%; display:flex; align-items:flex-end; overflow:hidden; min-height:420px; }
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(30,26,22,0.88) 0%, rgba(30,26,22,0.25) 55%, rgba(30,26,22,0.05) 100%); }
.hero .hero-content{ position:relative; padding:0 40px 48px; display:flex; flex-direction:column; gap:16px; max-width:740px; }
@media (max-width:640px){
  .hero .hero-content{ padding:0 20px 32px; }
}

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#EADFC4; padding:56px 40px 32px; }
.site-footer a{ color:#EADFC4; }
.site-footer a:hover{ color:var(--ochre); }
.footer-head{ font-family:'Oswald', sans-serif; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#A4906E; }
.footer-cols{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.footer-links{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }

/* ---------- misc ---------- */
.eyebrow{ font-family:'Oswald', sans-serif; font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stamp); }
.eyebrow-light{ font-family:'Oswald', sans-serif; font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#D98A5E; }
.rule-thick{ border:none; border-top:3px solid var(--ink); margin:0; }
.manifest-no{ font-family:'Special Elite', monospace; font-size:12px; color:var(--ink-soft); }
.facts-bar{ display:flex; border-top:3px solid var(--ink); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.facts-bar > div{ flex:1 1 180px; padding:18px 20px; border-right:1px solid var(--line); }
.facts-bar > div:last-child{ border-right:none; }