/* ===== A Lost Wanderer Art — stylesheet =====
   Palette sampled from the artist's own watercolours: a wildflower study
   and a moody coastal piece painted on deckle-edged paper on a walnut desk.
   Accent colour is the rust/ochre from that coastal wash, not the florals —
   keeps things closer to weathered leather and campervan hardware than
   a floral card. */

:root{
  --wood: #362514;
  --wood-deep: #23180d;
  --paper: #e9dcc0;
  --paper-deep: #ddccA4;
  --paper-light: #f4ecd8;
  --ink: #241a10;
  --ink-soft: #55462f;
  --rust: #a8501f;
  --rust-light: #d98a4c;
  --moss: #5f7440;
  --plum: #5c4270;
  --slate: #46545c;
  --ochre: #a9793e;
  --magenta: #b8477a;
  --teal: #2f6f7a;
  --crimson: #a13328;
  --forest: #45602f;
  --gold: #c9932f;
  --border: rgba(36,26,16,.2);
  --shadow: 0 14px 34px rgba(18,11,4,.32);
  --radius: 3px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--wood);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* weathered kraft-paper backdrop: mottled watercolour stains + fibre grain over a walnut base */
.paper-texture{
  position: fixed; inset:0; pointer-events:none; z-index: 0;
  background-image:
    radial-gradient(rgba(255,244,220,.05) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(168,80,31,.30), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(70,84,92,.32), transparent 38%),
    radial-gradient(circle at 25% 70%, rgba(95,116,64,.24), transparent 42%),
    radial-gradient(circle at 78% 82%, rgba(169,121,62,.20), transparent 36%),
    radial-gradient(circle at 50% 45%, rgba(92,66,112,.10), transparent 45%),
    linear-gradient(160deg, #40301d, #241a10 60%, #1a1209);
  background-size: 3px 3px, auto, auto, auto, auto, auto, auto;
  background-attachment: fixed;
}

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

h1,h2,h3{ font-family: var(--serif); font-weight: 600; margin: 0 0 .4em; color: var(--ink); }
h1{ font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.06; letter-spacing: .2px; }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3{ font-size: 1.4rem; font-weight: 600; }
p{ margin: 0 0 1em; color: var(--ink-soft); }

.eyebrow{
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; color: var(--rust); margin: 0 0 .8em; font-weight: 500;
}
.eyebrow.center, h2.center{ text-align:center; }

a{ color: var(--slate); }

/* ===== paper sheet — the reusable "painting laid on the desk" card ===== */
.paper-sheet{
  background: var(--paper-light);
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;
  clip-path: polygon(
    0% 1%, 3% 0%, 9% 1.2%, 15% 0.2%, 22% 1%, 29% 0.1%, 36% 1.1%, 44% 0.3%, 52% 1%, 60% 0.2%,
    68% 1.2%, 76% 0.2%, 84% 1%, 92% 0.3%, 100% 1%,
    100% 99%, 96% 100%, 90% 99%, 83% 100%, 76% 99%, 68% 100%, 60% 99%, 52% 100%, 44% 99%, 36% 100%,
    28% 99%, 20% 100%, 12% 99%, 5% 100%, 0% 99%
  );
}

/* ===== buttons ===== */
.btn{
  display:inline-block; padding: .85em 1.9em; border-radius: 2px;
  font-family: var(--sans); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration:none; border: 1.5px solid var(--ink); transition: all .25s ease;
}
.btn.small{ padding: .6em 1.4em; font-size: .74rem; }
.btn-primary{ background: var(--ink); color: var(--paper-light); }
.btn-primary:hover{ background: var(--rust); border-color: var(--rust); }
.btn-ghost{ background: transparent; color: var(--paper-light); border-color: var(--paper-light); }
.btn-ghost:hover{ background: var(--paper-light); color: var(--ink); }
.btn-ghost-light{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost-light:hover{ background: var(--ink); color: var(--paper-light); }

/* ===== header ===== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(35,24,13,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(233,220,192,.15);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-top: 18px; padding-bottom: 18px; }
.logo{ font-family: var(--serif); font-size: 1.4rem; font-weight: 600; text-decoration:none; color: var(--paper-light); letter-spacing: .02em; }
.logo span{ color: var(--rust-light); }

.site-nav{ display:flex; align-items:center; gap: 30px; }
.site-nav a{ text-decoration:none; color: var(--paper-light); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; position:relative; }
.site-nav a:not(.nav-insta)::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--rust-light);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-nav a:not(.nav-insta):hover::after{ transform: scaleX(1); }
.nav-insta{ display:flex; color: var(--paper-light); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background: var(--paper-light); display:block; }

/* ===== hero ===== */
.hero{
  position: relative; overflow:hidden;
  min-height: 88vh; display:flex; align-items:center;
  padding: 120px 0 80px;
  color: var(--paper-light);
  background-size: cover; background-position: center 30%; background-repeat: no-repeat;
}
.hero .eyebrow{ color: var(--rust-light); }
.hero h1{ color: var(--paper-light); }
.hero-inner{ max-width: 760px; }
.hero-sub{ font-size: 1.1rem; max-width: 560px; color: rgba(233,220,192,.85); }
.hero-cta{ display:flex; gap: 18px; margin-top: 2em; flex-wrap: wrap; }

.wash{ position:absolute; border-radius: 50%; filter: blur(60px); opacity:.6; z-index:0; }
.wash-1{ width: 620px; height: 560px; top:-180px; right:-160px; background: radial-gradient(circle at 30% 30%, var(--rust), transparent 70%); opacity:.5; }
.wash-2{ width: 480px; height: 480px; bottom:-220px; left:-140px; background: radial-gradient(circle at 60% 40%, var(--slate), transparent 70%); opacity:.55; }
.wash-3{ width: 320px; height: 320px; top: 30%; left: 55%; background: radial-gradient(circle, var(--ochre), transparent 70%); opacity:.35; }
.wash-4{ width: 560px; height: 520px; top:-200px; right:-180px; background: radial-gradient(circle, var(--moss), transparent 70%); filter: blur(70px); opacity:.32; position:absolute; z-index:0; }

/* ink-splatter dots, echoing the artist's habit of flicking ink across a wash */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(20,14,8,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 24% 26%, rgba(20,14,8,.4), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(20,14,8,.4), transparent 60%),
    radial-gradient(1px 1px at 74% 65%, rgba(20,14,8,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 20%, rgba(20,14,8,.35), transparent 60%);
}

/* ===== about ===== */
.about{ padding: 100px 0; position:relative; }
.about-inner{ display:grid; grid-template-columns: .8fr 1fr; gap: 70px; align-items:center; }
.about .eyebrow, .about h2, .about p{ color: var(--paper-light); }
.about .eyebrow{ color: var(--rust-light); }
.about p{ color: rgba(233,220,192,.82); }
.portrait-frame{ aspect-ratio: 4/5; transform: rotate(-1.2deg); margin: 0; }
.portrait-frame img{ width:100%; height:100%; object-fit: cover; display:block; }
.about-text .signoff{ font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--rust-light); }

/* ===== journey (real photos from the road) ===== */
.journey{ padding: 90px 0 100px; position:relative; overflow:hidden; }
.journey::before{
  content:''; position:absolute; z-index:0; width:520px; height:480px; top:-160px; left:-160px;
  border-radius:50%; filter:blur(70px); opacity:.28;
  background: radial-gradient(circle, var(--teal), transparent 70%);
}
.journey .eyebrow{ color: var(--rust-light); }
.journey h2{ color: var(--paper-light); }
.journey-intro{ max-width: 620px; margin: 0 auto 50px; text-align:center; color: rgba(233,220,192,.78); }
.journey-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.journey-photo{ margin:0; }
.journey-photo img{ width:100%; aspect-ratio: 4/5; object-fit: cover; display:block; }
.journey-photo:nth-child(1){ transform: rotate(-0.8deg); }
.journey-photo:nth-child(2){ transform: rotate(0.7deg); }
.journey-photo:nth-child(3){ transform: rotate(0.6deg); }
.journey-photo:nth-child(4){ transform: rotate(-0.9deg); }
.journey-photo figcaption{
  font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft);
  text-align:center; padding: 12px 8px 2px;
}

.video-heading{ text-align:center; margin: 64px 0 26px; }
.video-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.journey-video{ margin:0; }
.journey-video video{ width:100%; aspect-ratio: 4/5; object-fit: cover; display:block; background: #000; }
.journey-video:nth-child(1){ transform: rotate(0.6deg); }
.journey-video:nth-child(2){ transform: rotate(-0.7deg); }
.journey-video:nth-child(3){ transform: rotate(0.5deg); }
.journey-video:nth-child(4){ transform: rotate(-0.6deg); }
.journey-video figcaption{
  font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink-soft);
  text-align:center; padding: 12px 8px 2px;
}

.tile img{ display:flex; align-items:center; justify-content:center; }

/* ===== gallery ===== */
.gallery{ padding: 90px 0 110px; position:relative; overflow:hidden; }
.gallery .eyebrow{ color: var(--rust-light); }
.gallery h2{ color: var(--paper-light); }
.gallery::before{
  content:''; position:absolute; z-index:0; width:600px; height:560px; bottom:-220px; right:-200px;
  border-radius:50%; filter:blur(75px); opacity:.22;
  background: radial-gradient(circle, var(--crimson), transparent 70%);
}
.gallery::after{
  content:''; position:absolute; z-index:0; width:420px; height:400px; top:-140px; left:-120px;
  border-radius:50%; filter:blur(65px); opacity:.2;
  background: radial-gradient(circle, var(--forest), transparent 70%);
}
.filters{ display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; margin: 34px 0 46px; position:relative; z-index:1; }
.filter-btn{
  display:inline-flex; align-items:center; gap:.5em;
  background: transparent; border: 1px solid rgba(233,220,192,.35); border-radius: 2px;
  padding: .5em 1.3em; font-family: var(--sans); font-size: .76rem; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(233,220,192,.8); cursor:pointer; transition: all .2s ease;
}
.filter-btn:hover{ border-color: var(--paper-light); color: var(--paper-light); }
.filter-btn.active{ background: var(--rust); border-color: var(--rust); color: var(--paper-light); }
.dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; flex:none;
}
.dot-landscapes{ background: var(--forest); }
.dot-coastal{ background: var(--teal); }
.dot-wildlife{ background: var(--gold); }
.dot-botanical{ background: var(--magenta); }
.dot-studies{ background: var(--crimson); }

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
.tile{
  aspect-ratio: 4/5; cursor:pointer; transition: transform .3s ease, box-shadow .3s ease; margin:0;
}
.tile:nth-child(3n+1){ transform: rotate(-1deg); }
.tile:nth-child(3n+2){ transform: rotate(0.8deg); }
.tile:nth-child(3n){ transform: rotate(-0.5deg); }
.tile:hover{ transform: translateY(-4px) rotate(0deg); box-shadow: var(--shadow); }
.tile.hide{ display:none; }
.tile img{ width:100%; height:100%; object-fit: cover; display:block; }

.gallery-cta{
  position:relative; z-index:1; text-align:center; margin-top: 56px;
  padding-top: 44px; border-top: 1px solid rgba(233,220,192,.15);
}
.gallery-cta p{ color: rgba(233,220,192,.8); margin-bottom: 1.4em; }

/* ===== shop ===== */
.shop{ padding: 100px 0; position:relative; overflow:hidden; }
.shop .eyebrow{ color: var(--rust-light); }
.shop h2{ color: var(--paper-light); }
.shop-mockup{ max-width: 380px; margin: 0 auto 20px; position:relative; z-index:1; }
.shop-mockup img{ width:100%; display:block; }
.shop-mockup figcaption{
  font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink-soft);
  text-align:center; padding: 12px 8px 2px;
}
.shop-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 46px; position:relative; z-index:1; }
.shop-card{
  background: var(--paper-light); border-radius: var(--radius);
  padding: 34px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap: .6em;
  box-shadow: var(--shadow);
}
.shop-card.featured{ box-shadow: 0 16px 38px rgba(168,80,31,.4); }
.size-select-label{
  font-size: .74rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft);
  margin-top: .4em;
}
.size-select, .painting-select{
  width: 100%; max-width: 280px;
  font-family: var(--sans); font-size: .88rem; color: var(--ink);
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23241a10" d="M5 7l5 6 5-6z"/></svg>') no-repeat right .9em center/12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7em 2.2em .7em 1em;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.size-select:focus, .painting-select:focus{ outline: none; border-color: var(--rust); }
.price-tag{ font-family: var(--serif); font-weight: 600; color: var(--rust); font-size: 1.1rem; margin: .4em 0 1em; }
.card-actions{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:center; }

/* ===== contact ===== */
.contact{ padding: 100px 0 120px; }
.contact .eyebrow{ color: var(--rust-light); }
.contact h2, .contact > .wrap > .contact-inner > div > p{ color: var(--paper-light); }
.contact-inner{ display:grid; grid-template-columns: .9fr 1fr; gap: 70px; }
.contact-inner > div > p{ color: rgba(233,220,192,.8); }
.insta-link{ display:inline-flex; align-items:center; gap: 10px; text-decoration:none; color: var(--paper-light); border-bottom: 1px solid var(--paper-light); padding-bottom: 4px; }
.contact-form{ display:flex; flex-direction:column; gap: 18px; background: var(--paper-light); padding: 34px; box-shadow: var(--shadow); }
.contact-form label{ display:flex; flex-direction:column; gap: 6px; font-size: .78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); }
.contact-form input, .contact-form textarea{
  font-family: var(--sans); font-size: 1rem; padding: .8em 1em; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; color: var(--ink); resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: var(--rust); }
.form-note{ font-size: .78rem; color: var(--ink-soft); opacity:.75; margin-top: -6px; }

/* ===== footer ===== */
.site-footer{ border-top: 1px solid rgba(233,220,192,.15); padding: 26px 0; }
.footer-inner{ display:flex; justify-content:space-between; font-size: .78rem; letter-spacing:.04em; color: rgba(233,220,192,.6); }
.footer-inner a{ text-decoration:none; color: rgba(233,220,192,.7); }
.footer-inner a:hover{ color: var(--rust-light); }

/* ===== responsive ===== */
@media (max-width: 860px){
  .about-inner, .contact-inner{ grid-template-columns: 1fr; gap: 40px; }
  .journey-grid{ grid-template-columns: 1fr; gap: 34px; max-width: 420px; margin: 0 auto; }
  .video-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
  .shop-grid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top: 100%; left:0; right:0; background: var(--wood-deep);
    flex-direction:column; align-items:flex-start; gap: 0; border-bottom: 1px solid rgba(233,220,192,.15);
    max-height: 0; overflow:hidden; transition: max-height .3s ease;
  }
  .site-nav.open{ max-height: 320px; }
  .site-nav a{ padding: 16px 28px; width:100%; border-top: 1px solid rgba(233,220,192,.12); }
  .nav-insta{ padding: 16px 28px; }
}
@media (max-width: 540px){
  .grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero{ padding-top: 100px; }
}