:root{
  --ink:#15120F;
  --ink-2:#1E1A15;
  --parchment:#EDE6D6;
  --parchment-dim:#B9AF9B;
  --rust:#B0502C;
  --rust-dim:#7A3A22;
  --brass:#C79A47;
  --brass-dim:#8C6D33;
  --pine:#233B33;
  --line: rgba(237,230,214,0.14);
  --display: 'Fraunces', serif;
  --body: 'Inter', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
section{ position:relative; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.field-note{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.field-note .dot{ opacity:0.5; }

/* ---------- NAV ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  background:linear-gradient(to bottom, rgba(21,18,15,0.85), transparent);
  backdrop-filter:blur(2px);
}
.logo{
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  letter-spacing:0.01em;
}
.logo span{ color:var(--rust); }
nav.links{ display:flex; gap:34px; }
nav.links a{
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--parchment-dim);
  transition:color 0.25s var(--ease);
  position:relative;
}
nav.links a:hover{ color:var(--parchment); }
nav.links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--brass); transition:width 0.3s var(--ease);
}
nav.links a:hover::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:none; color:var(--parchment); font-size:22px; cursor:pointer; }
@media (max-width:760px){
  nav.links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:2px;
  transition:all 0.25s var(--ease);
  border:1px solid transparent;
  cursor:pointer;
  background:none;
  font-family:inherit;
}
.btn-rust{ background:var(--rust); color:var(--ink); }
.btn-rust:hover{ background:#c85f37; transform:translateY(-2px); }
.btn-outline{ border-color:var(--line); color:var(--parchment); }
.btn-outline:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------- SECTION HEADS / SPACING ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:52px; gap:24px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--display);
  font-size:clamp(32px,4.5vw,52px);
  font-weight:500;
  line-height:1.05;
}
.section-head .tag{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
}
.section-pad{ padding:64px 0; }
@media (max-width:760px){ .section-pad{ padding:48px 0; } }

/* ---------- PHOTOGRAPHY MASONRY GRID ---------- */
.gallery-grid{
  column-count:3;
  column-gap:28px;
}
@media (max-width:820px){ .gallery-grid{ column-count:2; } }
@media (max-width:520px){ .gallery-grid{ column-count:1; } }
.post{
  position:relative;
  break-inside:avoid;
  margin-bottom:36px;
  display:inline-block;
  width:100%;
}
.post-image{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(135deg, var(--rust-dim), #2a1c14 60%, var(--ink-2));
}
/* Photo-protection: no drag-out, no text-select, no iOS long-press save */
.post-image, .post-image img, .lightbox-image, .lightbox-image img{
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
}
.watermark{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='140'><text x='140' y='75' font-family='monospace' font-size='13' fill='rgba(237,230,214,0.24)' text-anchor='middle' transform='rotate(-22 140 75)'>INNOVATIVEWANDERER.COM</text></svg>");
  background-repeat:repeat;
}
/* Placeholder heights stand in for a photo's aspect ratio until a real image is added */
.post.h-tall .post-image{ aspect-ratio:3/4; }
.post.h-wide .post-image{ aspect-ratio:16/9; }
.post.h-square .post-image{ aspect-ratio:1/1; }
.post.h-pano .post-image{ aspect-ratio:2/1; }
.post-image.placeholder-1{ background:linear-gradient(135deg, var(--rust-dim), #2a1c14 60%, var(--ink-2)); }
.post-image.placeholder-2{ background:linear-gradient(135deg, var(--pine), #142621 70%, var(--ink-2)); }
.post-image.placeholder-3{ background:linear-gradient(135deg, #4a3520, var(--ink-2)); }
.post-image.placeholder-4{ background:linear-gradient(135deg, #3a2a3d, var(--ink-2)); }
.post-image.placeholder-5{ background:linear-gradient(135deg, var(--brass-dim), #2a2114, var(--ink-2)); }
.post-image.placeholder-6{ background:linear-gradient(135deg, #223c46, var(--ink-2)); }
.post-image.has-photo::after{ content:none; }
.post-image::after{
  content:'YOUR PHOTO';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:rgba(237,230,214,0.35);
}
.post-image:hover{ filter:brightness(1.1); }
.post-caption{
  margin-top:14px;
}
.post-caption p{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:16px;
  color:var(--parchment);
  margin-bottom:6px;
}
.post-caption .field-note{ font-size:11px; }

/* ---------- MUSIC LIST ---------- */
.track{
  display:grid;
  grid-template-columns:52px 1fr auto auto;
  align-items:center;
  gap:24px;
  padding:22px 10px;
  border-top:1px solid var(--line);
  transition:background 0.25s var(--ease);
}
.track:last-child{ border-bottom:1px solid var(--line); }
.track:hover{ background:rgba(199,154,71,0.05); }
.play-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--brass-dim);
  display:flex; align-items:center; justify-content:center;
  background:transparent; cursor:pointer; color:var(--brass);
  transition:all 0.25s var(--ease); flex-shrink:0;
  font-size:14px;
}
.play-btn:hover{ background:var(--brass); color:var(--ink); }
.track-info h4{ font-family:var(--display); font-weight:500; font-size:19px; }
.waveform{ display:flex; align-items:center; gap:2px; height:22px; }
.waveform span{
  width:2px; background:var(--brass-dim); border-radius:1px;
  transition:background 0.25s var(--ease);
}
.track.playing .waveform span{
  background:var(--brass);
  animation:wave-pulse 0.9s ease-in-out infinite;
}
@keyframes wave-pulse{
  0%, 100% { transform:scaleY(0.6); }
  50% { transform:scaleY(1); }
}
.duration{ font-family:var(--mono); font-size:12px; color:var(--parchment-dim); }
.sc-hidden-player{
  position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none;
}
@media (max-width:640px){
  .track{ grid-template-columns:40px 1fr; }
  .waveform, .duration{ display:none; }
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(15,13,10,0.94);
  display:none;
  align-items:center; justify-content:center;
  padding:60px 32px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
  max-width:min(900px, 100%);
  width:100%;
}
.lightbox-image{
  width:100%;
  max-height:74vh;
  border-radius:2px;
  background-position:center;
  background-size:cover;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-image::after{
  content:'YOUR PHOTO';
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:rgba(237,230,214,0.35);
}
.lightbox-image.has-photo::after{ content:none; }
.lightbox-image img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.lightbox-caption{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap;
  gap:16px; margin-top:22px;
}
.lightbox-caption p{
  font-family:var(--display); font-style:italic; font-size:19px; color:var(--parchment); max-width:560px;
}
.lightbox-close{
  position:fixed; top:26px; right:32px; z-index:1001;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--parchment);
  font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.25s var(--ease);
}
.lightbox-close:hover{ border-color:var(--brass); color:var(--brass); }
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:1001;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); background:rgba(21,18,15,0.6); color:var(--parchment);
  font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.25s var(--ease);
}
.lightbox-nav:hover{ border-color:var(--brass); color:var(--brass); }
.lightbox-nav.prev{ left:24px; }
.lightbox-nav.next{ right:24px; }
@media (max-width:640px){
  .lightbox-nav{ width:42px; height:42px; font-size:18px; }
  .lightbox-nav.prev{ left:10px; }
  .lightbox-nav.next{ right:10px; }
}

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
.about-photo{
  aspect-ratio:4/5; border-radius:2px;
  background:linear-gradient(150deg, var(--pine), var(--ink-2) 65%);
  position:relative; overflow:hidden;
}
.about-photo::after{
  content:'PORTRAIT'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:rgba(237,230,214,0.3);
}
.about-text p{ color:var(--parchment-dim); font-size:16px; margin-bottom:20px; max-width:520px; }
.about-text p:first-of-type{ color:var(--parchment); font-size:19px; font-family:var(--display); font-weight:400; }

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding:70px 0 40px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px;
  margin-bottom:60px;
}
footer h3{ font-family:var(--display); font-size:clamp(28px,4vw,42px); font-weight:500; max-width:480px; }
.socials{ display:flex; gap:24px; }
.socials a{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--parchment-dim); transition:color 0.25s var(--ease); }
.socials a:hover{ color:var(--brass); }
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--parchment-dim); letter-spacing:0.05em; flex-wrap:wrap; gap:10px;
}