/* === Base === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: #FBFAF6;          /* same as container — no side bands */
  display: block;               /* NOT flex */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* === Page column (mobile: 430px centered column) === */
.page-col {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background: #FBFAF6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* === Utilities === */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
select.fd-sort { -webkit-appearance: none; appearance: none; }
.content-wrap { display: contents; } /* mobile: unwrap */

/* === Animations === */
@keyframes drawerIn { from { transform: translateX(-26px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: .25; } to { opacity: 1; } }
.fd-drawer-panel { animation: drawerIn .24s cubic-bezier(.2,.8,.2,1) both; }
.fd-drawer-overlay { animation: fadeIn .2s ease both; }

/* === Drawer === */
#fd-drawer { display: none; position: fixed; inset: 0; z-index: 40; }
#fd-drawer.open { display: block; }

/* === Nav links === */
.fd-nav-link:hover { background: #F3F0E9; }
.desktop-nav-link {
  text-decoration: none;
  color: #4A4339;
  font-weight: 600;
  font-size: 14.5px;
  padding: 8px 13px;
  border-radius: 10px;
}
.desktop-nav-link:hover { background: #F3F0E9; color: #2A2622; }

/* === Desktop nav: hidden on mobile === */
.desktop-nav { display: none; }

/* ─── 768px: tablet / desktop ─── */
@media (min-width: 768px) {
  /* Container: fill width up to 1180px */
  .page-col { width: 100% !important; max-width: 1180px !important; }

  /* Spacing utilities */
  .pad-x { padding-left: 40px !important; padding-right: 40px !important; }
  .mx { margin-left: 40px !important; margin-right: 40px !important; }

  /* Header: hide hamburger, show inline nav, center bar to 1180 */
  .hamburger { display: none !important; }
  .desktop-nav { display: flex !important; align-items: center; gap: 4px; margin-left: auto; }
  .hdr-inner, .search-box {
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hdr-wordmark { flex: 0 0 auto !important; }

  /* Home hero: two columns */
  .hero {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 40px;
    padding-top: 48px !important;
    padding-bottom: 28px !important;
  }
  .hero-h1 { font-size: 52px !important; }
  .hero-stats { flex-direction: column !important; gap: 0 !important; align-self: stretch; }
  .hero-stats > div { border-right: none !important; border-bottom: 1px solid #F0ECE4; padding: 16px 0 !important; }
  .hero-stats > div:last-child { border-bottom: none; }

  /* A–Z strip: wrap instead of scroll */
  .az-row { flex-wrap: wrap !important; overflow: visible !important; }
  .az-row > div { flex: 1 0 auto; }

  /* Card lists: 2-col grid */
  .cards-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px !important; }

  /* Individual page photo gallery: 4-col */
  .gallery-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Text-heavy pages: padded inner wrapper */
  .content-wrap { display: block; width: 100%; padding-left: 22px; padding-right: 22px; }
}

/* ─── 1440px ─── */
@media (min-width: 1440px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 1920px ─── */
@media (min-width: 1920px) {
  .cards-grid   { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { grid-template-columns: repeat(6, 1fr) !important; }
}