:root{
  --canvas: #F1ECE0;
  --canvas-card: #FBF8F2;
  --ink: #262220;
  --ink-soft: #59534B;
  --border: rgba(38,34,32,0.14);
  --blue: #1D3557;
  --ochre: #C89B3C;
  --ochre-tint: #F3E6C9;
  --green: #5B7B5E;
  --green-tint: #E1E8DC;
  --violet: #7A6A8A;
  --violet-tint: #E7E1EC;
  --slate: #536878;
  --slate-tint: #DEE3E6;
  --cerulean: #3C7A89;
  --cerulean-tint: #D8E6E8;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--canvas); color:var(--ink); font-family:'Work Sans', sans-serif; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

header{ padding:28px 0; border-bottom:1px solid var(--border); }
header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:'Fraunces', serif; font-size:21px; font-weight:600; text-decoration:none; color:var(--ink); }
.logo em{ font-style:italic; color:var(--blue); }
nav ul{ list-style:none; display:flex; gap:32px; margin:0; padding:0; }
nav a{ color:var(--ink-soft); text-decoration:none; font-size:14.5px; }
nav a:hover{ color:var(--ink); }

/* HERO */
.hero{ padding:12px 0 40px; }
.hero h1{ font-family:'Fraunces', serif; font-weight:500; font-size:42px; line-height:1.15; margin:8px 0 16px; }
.hero h1 em{ font-style:italic; color:var(--blue); }
.hero p{ font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:520px; margin:0; }
.eyebrow{ font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-soft); }

/* FILTERS */
.filters{ padding:8px 0 36px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.filters-top{ display:flex; align-items:baseline; justify-content:space-between; margin:32px 0 20px; flex-wrap:wrap; gap:12px; }
.filters-top h2{ font-family:'Fraunces', serif; font-weight:500; font-size:20px; margin:0; }
.secondary-filters{ display:flex; gap:12px; }
select{ font-family:'Work Sans', sans-serif; font-size:13.5px; color:var(--ink); background:var(--canvas-card); border:1px solid var(--border); border-radius:3px; padding:9px 12px; }
.palette-row{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.blob-link{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }
.blob{ width:48px; height:48px; border-radius:58% 42% 55% 45% / 52% 58% 42% 48%; border:2px solid transparent; }
.blob-link.active .blob{ border-color:var(--ink); }
.blob-link span{ font-size:12.5px; color:var(--ink-soft); }
.blob-link.active span{ color:var(--ink); font-weight:500; }
.blob.b-ochre{ background:var(--ochre); }
.blob.b-violet{ background:var(--violet); }
.blob.b-slate{ background:var(--slate); }
.blob.b-cerulean{ background:var(--cerulean); }
.blob.b-green{ background:var(--green); }
.blob.b-all{ background:transparent; border:2px solid var(--ink-soft) !important; }

/* LISTINGS GRID */
.listings{ padding:44px 0 20px; }
.listings-head{ margin-bottom:26px; }
.listings-head h2{ font-family:'Fraunces', serif; font-weight:500; font-size:24px; margin:0 0 6px; }
.listings-head p{ color:var(--ink-soft); margin:0; font-size:14.5px; }
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.card{ background:var(--canvas-card); border:1px solid var(--border); border-radius:4px; overflow:hidden; text-decoration:none; color:var(--ink); display:block; }
.card-photo{ height:160px; position:relative; background:linear-gradient(160deg,#D8C9A0,#8FA987 80%); }
.region-dot{ position:absolute; top:12px; left:12px; width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 3px rgba(251,248,242,0.9); }
.card-body{ padding:16px 18px 18px; }
.card-region{ font-size:11.5px; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.card h3{ font-family:'Fraunces', serif; font-weight:500; font-size:18px; margin:0 0 10px; line-height:1.25; }
.card-meta{ display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
.tag{ font-size:11px; padding:4px 9px; border-radius:20px; color:var(--ink); background:var(--ochre-tint); }
.card-foot{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--border); padding-top:12px; }
.duration{ font-size:12.5px; color:var(--ink-soft); }
.price{ font-family:'Fraunces', serif; font-size:16px; font-weight:500; }
.price span{ font-family:'Work Sans', sans-serif; font-size:11.5px; color:var(--ink-soft); font-weight:400; }
.empty-state{ padding:40px 0; color:var(--ink-soft); }

/* LISTING DETAIL */
.breadcrumb{ font-size:13px; color:var(--ink-soft); padding:22px 0 0; }
.breadcrumb a{ color:var(--ink-soft); }
.gallery{ display:grid; grid-template-columns:1.6fr 1fr; gap:12px; margin:20px 0 36px; height:400px; }
.gallery-main{ border-radius:4px; background:linear-gradient(160deg,#E6D3A3,#C89B3C 70%); background-size:cover; background-position:center; }
.gallery-side{ display:grid; grid-template-rows:1fr 1fr; gap:12px; }
.gallery-side div{ border-radius:4px; background:linear-gradient(160deg,#D8C9A0,#8FA987 80%); background-size:cover; background-position:center; }
.layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:52px; padding-bottom:64px; }
h1.detail-title{ font-family:'Fraunces', serif; font-weight:500; font-size:32px; margin:8px 0 14px; }
.meta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.tag.medium{ background:var(--green-tint); color:#334D36; }
h2.section{ font-family:'Fraunces', serif; font-weight:500; font-size:19px; margin:34px 0 12px; }
p.body-text{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0; }
.itinerary-day{ display:grid; grid-template-columns:64px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--border); }
.itinerary-day:first-child{ border-top:none; }
.day-label{ font-family:'Fraunces', serif; font-style:italic; color:var(--blue); font-size:14.5px; }
.day-title{ font-weight:500; font-size:14.5px; margin:0 0 4px; }
.day-desc{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.6; }
.tutor-card{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--border); margin-top:6px; }
.tutor-avatar{ width:48px; height:48px; border-radius:50%; background:linear-gradient(160deg,#7A6A8A,#3C7A89); flex-shrink:0; }
.tutor-name{ font-family:'Fraunces', serif; font-weight:500; font-size:15.5px; margin:0 0 4px; }
.tutor-bio{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }

.panel{ background:var(--canvas-card); border:1px solid var(--border); border-radius:6px; padding:24px; height:fit-content; }
.panel-price{ font-family:'Fraunces', serif; font-size:26px; font-weight:500; }
.panel-price span{ font-family:'Work Sans', sans-serif; font-size:12.5px; color:var(--ink-soft); font-weight:400; }
.panel-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:9px 0; border-top:1px solid var(--border); }
.panel-row span:first-child{ color:var(--ink-soft); }
.panel form{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.panel input, .panel textarea{ font-family:'Work Sans', sans-serif; font-size:14px; padding:10px 12px; border:1px solid var(--border); border-radius:3px; background:#fff; width:100%; }
.panel textarea{ resize:vertical; min-height:80px; }
.btn-primary{ background:var(--blue); color:#FBF8F2; border:none; text-decoration:none; padding:12px; border-radius:3px; font-size:14px; cursor:pointer; text-align:center; display:inline-block; }
.panel-note{ font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.5; }
.panel-success{ background:var(--green-tint); color:#334D36; padding:12px 14px; border-radius:3px; font-size:13.5px; margin-bottom:14px; }
.errorlist{ list-style:none; padding:0; margin:0 0 4px; color:#9E3039; font-size:12.5px; }

footer{ margin-top:60px; border-top:1px solid var(--border); padding:36px 0; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-tagline{ margin:6px 0 0; font-size:13px; color:var(--ink-soft); }
.foot-links{ display:flex; gap:24px; }
.foot-links a{ color:var(--ink-soft); text-decoration:none; font-size:13.5px; }

@media (max-width:880px){
  .hero .wrap, .layout{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; height:auto; }
  .gallery-side{ grid-template-columns:1fr 1fr; grid-template-rows:none; height:130px; }
  nav ul{ display:none; }
}