:root {
  --color-bg: #f3e6c8;
  --color-bg-alt: #ead6a8;
  --color-paper: #f8efd8;
  --color-ink: #3a2718;
  --color-muted: #6b5138;
  --color-brass: #a9793f;
  --color-brass-dark: #7c5427;
  --color-navy: #1f4340;
  --color-border: #b8955f;
  --max-width: 1100px;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--color-ink);
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.25), transparent 60%),
    repeating-linear-gradient(0deg, rgba(122, 90, 42, 0.06) 0px, rgba(122, 90, 42, 0.06) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(122, 90, 42, 0.06) 0px, rgba(122, 90, 42, 0.06) 1px, transparent 1px, transparent 40px),
    var(--color-bg);
  line-height: 1.65;
}

h1, h2, h3, .logo {
  font-family: var(--font-display);
  color: var(--color-ink);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Brass corner brackets, evoking iron-clad travel trunks */
.corners {
  position: relative;
  background-image:
    linear-gradient(var(--color-brass), var(--color-brass)), linear-gradient(var(--color-brass), var(--color-brass)),
    linear-gradient(var(--color-brass), var(--color-brass)), linear-gradient(var(--color-brass), var(--color-brass)),
    linear-gradient(var(--color-brass), var(--color-brass)), linear-gradient(var(--color-brass), var(--color-brass)),
    linear-gradient(var(--color-brass), var(--color-brass)), linear-gradient(var(--color-brass), var(--color-brass));
  background-repeat: no-repeat;
  background-size:
    22px 3px, 3px 22px,
    22px 3px, 3px 22px,
    22px 3px, 3px 22px,
    22px 3px, 3px 22px;
  background-position:
    top 10px left 10px, top 10px left 10px,
    top 10px right 10px, top 10px right 10px,
    bottom 10px left 10px, bottom 10px left 10px,
    bottom 10px right 10px, bottom 10px right 10px;
}

/* Header */
.site-header {
  border-bottom: 3px double var(--color-brass);
  position: sticky;
  top: 0;
  background: var(--color-paper);
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

.logo-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

nav a {
  margin-left: 28px;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}

nav a:hover {
  color: var(--color-brass-dark);
  border-bottom-color: var(--color-brass);
}

/* Icons */
svg[viewBox] {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy), #142c2a 75%);
  color: #f3e6c8;
  text-align: center;
  padding: 110px 20px;
  margin: 24px;
  border: 1px solid var(--color-brass);
}

.hero-compass {
  position: absolute;
  top: 50%;
  right: -60px;
  width: 420px;
  height: 420px;
  transform: translateY(-50%);
  color: rgba(243, 230, 200, 0.12);
  stroke-width: 1.2;
}

.hero-compass .dashed {
  stroke-dasharray: 2 8;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  color: var(--color-brass);
  margin: 0 0 18px;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #f8efd8;
}

.hero p {
  font-size: 1.2rem;
  max-width: 620px;
  margin: 0 auto 36px;
  opacity: 0.9;
}

.btn {
  display: inline-block;
  background: var(--color-brass);
  color: #241a0f;
  padding: 13px 32px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid var(--color-brass-dark);
  cursor: pointer;
  font-size: 1.05rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover {
  background: #c2924f;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Dividers */
.divider {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--color-brass);
}

.divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-brass);
  opacity: 0.6;
}

.divider-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  stroke-width: 2;
}

/* Sections */
.section {
  padding: 68px 20px;
}

.section-alt {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section h2 {
  font-size: 2.1rem;
  margin-bottom: 28px;
  text-align: center;
}

.section > .container > p {
  color: var(--color-muted);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Photo gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 36px;
}

.photo {
  margin: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  padding: 14px 14px 18px;
}

.photo img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  filter: sepia(20%) saturate(85%) contrast(105%);
  cursor: zoom-in;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.photo img:hover {
  filter: sepia(5%) saturate(100%) contrast(105%);
  transform: scale(1.015);
}

.photo figcaption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-navy);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 20px;
  background: rgba(20, 14, 8, 0.92);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid var(--color-brass);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bg);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-brass);
  background: rgba(58, 39, 24, 0.8);
  color: var(--color-bg);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox-close:hover {
  background: var(--color-brass);
  color: #241a0f;
  transform: scale(1.08);
}

/* Footer */
.site-footer {
  border-top: 3px double var(--color-brass);
  padding: 30px 20px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.95rem;
  background: var(--color-paper);
}

.footer-tagline {
  font-family: var(--font-display);
  color: var(--color-navy);
  font-weight: 600;
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .header-inner {
    flex-direction: column;
    gap: 12px;
  }

  nav a {
    margin: 0 10px;
  }

  .hero {
    padding: 80px 16px;
    margin: 14px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero-compass {
    width: 280px;
    height: 280px;
    right: -100px;
  }
}