/* Muthnabi clone — clean responsive stylesheet (mobile-first) */

/* Self-hosted variable font, scoped to the Malayalam Unicode block only (via
   unicode-range) so it's picked up automatically for Malayalam glyphs wherever
   --font-sans / --font-serif are used, while English/Latin text keeps using
   Source Sans 3 / Cormorant Garamond from the same font stack. */
@font-face {
  font-family: "Anek Malayalam";
  src: url("/assets/fonts/AnekMalayalam-VariableFont.ttf") format("truetype-variations"),
       url("/assets/fonts/AnekMalayalam-VariableFont.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC;
}

:root {
  --color-bg: #fbfaf6;
  --color-surface: #ffffff;
  --color-ink: #1b2a24;
  --color-ink-soft: #4b5b54;
  --color-muted: #7c8b84;
  --color-border: #e6e2d8;
  --color-primary: #0b5a3f;
  --color-primary-dark: #063f2d;
  --color-primary-light: #eaf3ee;
  --color-accent: #b98a3a;
  --font-serif: "Anek Malayalam", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Anek Malayalam", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(15, 30, 24, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 30, 24, 0.10);
  --header-h: 68px;
  --container-w: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Decorative transforms (e.g. the hero's fanned card stack) can visually bleed a
     little past their box on narrow screens; clip at the page edge instead of
     letting that create a horizontal scrollbar for the whole site. */
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; margin: 0 0 0.5em; color: var(--color-primary-dark); line-height: 1.25; }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}
.brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.brand-tld { color: var(--color-accent); }

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: 0.25rem; flex: 1; justify-content: center; flex-wrap: wrap; }
}
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem; font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { background: var(--color-primary-light); color: var(--color-primary); }
.nav-caret { width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -0.2em; opacity: 0.6; }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px; max-height: 60vh; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 0.5rem; display: none; flex-direction: column;
}
/* Invisible bridge over the gap between the nav link and the dropdown, so moving the
   mouse straight down doesn't pass through a dead zone and close the menu early. */
.dropdown::before {
  content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}
/* Opened via JS (mouseenter/leave with a close-delay, see site.js) rather than pure
   :hover, so crossing the small gap toward the menu doesn't snap it shut mid-move.
   :focus-within is kept as a JS-independent fallback for keyboard navigation. */
.nav-item.is-open .dropdown, .nav-item:focus-within .dropdown { display: flex; }
.dropdown a { padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-ink-soft); }
.dropdown a:hover { background: var(--color-primary-light); color: var(--color-primary); }
.dropdown-overview { font-weight: 700; color: var(--color-primary) !important; }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent; color: var(--color-ink); cursor: pointer;
}
.icon-btn:hover { background: var(--color-primary-light); color: var(--color-primary); }
.mobile-toggle { display: inline-flex; }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }

.hamburger { position: relative; width: 18px; height: 12px; display: block; }
.hamburger span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 5px; }
.hamburger span:nth-child(3) { top: 10px; }
.mobile-nav.open .hamburger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mobile-nav.open .hamburger span:nth-child(2) { opacity: 0; }
.mobile-nav.open .hamburger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.header-search-wrap { position: relative; }
.header-search {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(320px, 88vw);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
  display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; box-shadow: var(--shadow-md);
}
.header-search[hidden] { display: none; }
.header-search input { border: none; outline: none; flex: 1; font: inherit; background: transparent; }
.header-search-icon { color: var(--color-muted); display: flex; }

/* ---------- Mobile nav ---------- */
/* Locks the background page while the mobile menu is open, so scroll gestures always
   act on the menu panel below instead of the page behind it (site.js toggles this). */
body.nav-open { overflow: hidden; }

.mobile-nav-panel {
  display: none; border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-nav-panel.open { display: block; }
@media (min-width: 1024px) { .mobile-nav-panel { display: none !important; } }
.mobile-acc button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 0; background: none; border: none; border-bottom: 1px solid var(--color-border);
  font: inherit; font-weight: 700; color: var(--color-primary-dark); cursor: pointer; text-align: left;
}
.mobile-acc-panel { display: none; padding: 0.25rem 0 0.75rem 0.5rem; }
.mobile-acc.open .mobile-acc-panel { display: block; }
.mobile-acc.open .chevron { transform: rotate(180deg); }
.chevron { transition: transform .2s; color: var(--color-muted); }
.mobile-acc-panel a { display: block; padding: 0.5rem 0.25rem; color: var(--color-ink-soft); font-size: 0.95rem; }
.mobile-links { padding: 0.75rem 0; display: flex; flex-direction: column; }
.mobile-links a { padding: 0.6rem 0; font-weight: 600; border-bottom: 1px solid var(--color-border); }

/* ---------- Hero ---------- */
/* The whole hero is pinned to exactly "viewport minus navbar" on every screen size —
   not just desktop. Text takes only the natural height it needs (kept compact via the
   smaller mobile type scale below); the image stack absorbs whatever space is left
   over via flex, so it can never push the section taller than the visible screen. */
.hero {
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-bg));
  height: calc(100svh - var(--header-h));
  display: flex; align-items: center;
  padding: 0.75rem 0;
  overflow: hidden;
}
.hero-inner {
  display: flex; flex-direction: column; gap: 0.75rem;
  height: 100%; width: 100%;
}
.hero-slides { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-visual { flex: 1 1 auto; min-height: 8rem; min-width: 0; display: flex; }
@media (min-width: 900px) {
  .hero { padding: 1.25rem 0; }
  .hero-inner { flex-direction: row; align-items: stretch; gap: 3rem; }
  .hero-slides { flex: 1.05; justify-content: center; }
  .hero-visual { flex: 0.95; min-height: 0; }
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-primary); background: var(--color-primary-light);
  padding: 0.35rem 0.8rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0.9rem; line-height: 1.15; }
.hero h1 .salawat { color: var(--color-accent); }
.hero p.lede { color: var(--color-ink-soft); font-size: 1.05rem; max-width: 38rem; margin-bottom: 1.4rem; }

/* Compact mobile type scale — keeps the text block short enough that the image stack
   still gets a fair share of the fixed viewport-fit hero height. */
@media (max-width: 899px) {
  .hero-tag { font-size: 0.65rem; padding: 0.25rem 0.55rem; margin-bottom: 0.4rem; gap: 0.35rem; }
  .tag-dot { width: 5px; height: 5px; }
  .hero h1 { font-size: clamp(1.05rem, 5.4vw, 1.5rem); margin-bottom: 0.4rem; line-height: 1.2; }
  .hero p.lede { font-size: 0.78rem; line-height: 1.4; margin-bottom: 0.55rem; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .hero .btn-primary { padding: 0.45rem 0.9rem; font-size: 0.75rem; }
  .hero-controls { margin-top: 0.45rem; gap: 0.6rem; }
  .hero-controls .slider-button { width: 30px; height: 30px; font-size: 0.8rem; }
  .hero-controls .slide-number { font-size: 0.7rem; }
}

.hero-slide { display: none; }
.hero-slide.active { display: block; animation: heroSlideIn 0.45s ease; }
@keyframes heroSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hero-controls { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.hero-controls .slider-button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-primary-dark); font-size: 1rem;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.hero-controls .slider-button:hover { background: var(--color-primary); color: #fff; }
.hero-controls .slide-number { font-size: 0.85rem; font-weight: 700; color: var(--color-muted); letter-spacing: 0.05em; }

/* Fanned card-deck visual: three photos stacked with a slight offset/rotation/scale
   fan, front card active + full size, the two behind it peeking out. Advancing the
   carousel rotates which image sits in each depth slot and flies the front card off
   before the next one settles in (handled in hero.js). Always stretches to exactly
   fill whatever height .hero-visual has left over from the text block above it. */
.hero-visual { position: relative; }
.hero-card-stack {
  position: relative; flex: 1; width: 100%; min-height: 0;
  display: flex; justify-content: center; align-items: flex-start;
}
.hero-stack-card {
  position: absolute; top: 0; left: 50%;
  width: min(440px, 92%);
  height: calc(100% - 0.5rem);
  border-radius: 28px;
  overflow: hidden;
  transform-origin: center top;
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1), opacity 0.5s ease, filter 0.5s ease;
}
.hero-stack-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-stack-card[data-depth="0"] {
  z-index: 5; opacity: 1;
  transform: translateX(-50%) translate(0, 0) rotate(0deg) scale(1);
  box-shadow: 0 40px 90px rgba(6, 63, 45, 0.22);
}
.hero-stack-card[data-depth="1"] {
  z-index: 4; opacity: 0.78;
  transform: translateX(-50%) translate(28px, 12px) rotate(3deg) scale(0.97);
  filter: brightness(0.96);
  box-shadow: 0 26px 60px rgba(6, 63, 45, 0.14);
}
.hero-stack-card[data-depth="2"] {
  z-index: 3; opacity: 0.45;
  transform: translateX(-50%) translate(56px, 26px) rotate(7deg) scale(0.94);
  filter: brightness(0.92);
  box-shadow: 0 18px 40px rgba(6, 63, 45, 0.1);
}
.hero-stack-card.is-flying-next {
  z-index: 8 !important; opacity: 0 !important;
  transform: translateX(-50%) translate(-42%, -8%) rotate(-14deg) scale(0.92) !important;
}
.hero-stack-card.is-flying-prev {
  z-index: 8 !important; opacity: 0 !important;
  transform: translateX(-50%) translate(48%, -6%) rotate(16deg) scale(0.92) !important;
}
.hero-stack-card.is-settling { transition: none !important; }
@media (max-width: 899px) {
  .hero-stack-card { width: min(300px, 82vw); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stack-card { transition: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-ghost { background: transparent; color: var(--color-primary-dark); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- Sections ---------- */
.section { padding: 3rem 0; }
.section-soft { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-head { margin-bottom: 1.75rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head-center { text-align: center; justify-content: center; flex-direction: column; align-items: center; }
.section-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: var(--color-accent); margin-bottom: 0.35rem; }
.section-link { font-weight: 700; color: var(--color-primary); font-size: 0.9rem; }

/* Topic / category grid */
.topics-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .topics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .topics-grid { grid-template-columns: repeat(4, 1fr); } }
.topic-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 3/4; box-shadow: var(--shadow-sm); background: var(--color-primary-dark);
}
.topic-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform .3s, opacity .3s; }
.topic-card:hover img { transform: scale(1.06); opacity: 1; }
.topic-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,63,45,0) 35%, rgba(6,63,45,0.88) 100%);
}
.topic-card-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1rem; color: #fff;
}
.topic-card-label .count { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 0.15rem; }
.topic-card-label h3 { color: #fff; margin: 0; font-size: 1.1rem; }

/* Card grid (articles / subcategories) */
.card-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--color-primary-light); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.card-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: 0.4rem; }
.card-body h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.card-body p { color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: 0; }
.card-count { margin-top: auto; padding-top: 0.6rem; font-size: 0.8rem; color: var(--color-muted); }

/* Breadcrumb */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--color-primary); font-weight: 600; }
.breadcrumbs span.sep { opacity: 0.6; }

/* Category header */
.category-header { padding: 2.5rem 0 1rem; }
.category-cover { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/9; margin: 1rem 0 1.5rem; box-shadow: var(--shadow-sm); }
.category-cover img { width: 100%; height: 100%; object-fit: cover; }
.category-desc { color: var(--color-ink-soft); max-width: 46rem; }

/* Article page */
.article-header { padding: 2.5rem 0 1.5rem; }
.article-header h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.article-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 1rem; }
.article-cover { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; box-shadow: var(--shadow-sm); max-height: 480px; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 3rem; }
@media (min-width: 960px) { .article-layout { grid-template-columns: 2.2fr 1fr; } }
.article-content { font-size: 1.06rem; color: var(--color-ink); }
.article-content p { margin-bottom: 1.15em; }
.article-content h2, .article-content h3 { margin-top: 1.6em; }
.article-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; }
.sidebar-box h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); margin-bottom: 0.8rem; }
.sidebar-list a { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; color: var(--color-ink-soft); }
.sidebar-list a:last-child { border-bottom: none; }
.sidebar-list a:hover { color: var(--color-primary); }

/* ---------- 3D timeline (age navigator) ---------- */
.timeline-3d {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 320px; margin: 0.5rem 0 1.25rem;
}
.timeline-3d-stage {
  position: relative; width: 100%; height: 100%;
  perspective: 1400px; transform-style: preserve-3d;
  touch-action: pan-y;
  /* Cards further out in the deck (up to 6 either side) are shifted well past the
     visible edges by design — clip them here instead of letting that push the whole
     page into a horizontal scrollbar. */
  overflow: hidden;
}
.t3d-card {
  position: absolute; top: 50%; left: 50%;
  width: 168px; height: 224px; margin: 0; padding: 0; border: none;
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-md); background: var(--color-primary-dark);
  transition: transform .45s cubic-bezier(.22,.9,.35,1), opacity .45s ease;
  will-change: transform;
}
.t3d-card img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.t3d-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,63,45,0) 45%, rgba(6,63,45,.88) 100%); }
.t3d-age {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0.7rem; text-align: center;
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: #fff;
}
.t3d-card.is-active { box-shadow: 0 16px 36px rgba(15,30,24,0.22); }
.t3d-card.is-active .t3d-age { font-size: 1.9rem; }
@media (min-width: 640px) { .t3d-card { width: 190px; height: 254px; } }

.timeline-3d-nav {
  position: relative; z-index: 60; flex: none;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-primary-dark); font-size: 1.1rem;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s; margin: 0 0.5rem;
}
.timeline-3d-nav:hover { background: var(--color-primary); color: #fff; }

.timeline-3d-scrubber {
  width: 100%; margin: 0 0 2.25rem; accent-color: var(--color-primary); cursor: pointer;
}

.timeline-3d-detail {
  max-width: 40rem; margin: 0 auto; text-align: center;
}
.t3d-detail-age {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.4rem;
}
.timeline-3d-detail h2 { margin-bottom: 0.6rem; }
.t3d-muted { color: var(--color-muted); }
.t3d-related { margin-top: 1.5rem; text-align: left; }
.t3d-related h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); margin-bottom: 0.6rem; }
.t3d-related-list { display: flex; flex-direction: column; gap: 0.5rem; }
.t3d-related-list a {
  padding: 0.7rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem; color: var(--color-primary-dark);
}
.t3d-related-list a:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Gallery */
.gallery-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-item:hover img { transform: scale(1.07); }

/* Empty state */
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--color-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }

/* Quote / CTA */
.quote-block { background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; }
.quote-block p { font-family: var(--font-serif); font-size: 1.4rem; margin: 0; }
.cta-panel {
  background: var(--color-primary); color: #fff; border-radius: var(--radius-lg);
  padding: 2.5rem; display: grid; gap: 1.5rem; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 800px) { .cta-panel { grid-template-columns: 1.3fr 1fr; } }
.cta-panel h2 { color: #fff; }
.cta-panel p { color: rgba(255,255,255,0.85); }
.cta-panel .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.cta-panel-visual { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.cta-panel-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Static text pages */
.prose { max-width: 46rem; margin: 0 auto; padding-top: 3rem; padding-bottom: 3rem; }
.prose h1 { margin-bottom: 1rem; }
.prose p { color: var(--color-ink-soft); }

/* Search */
.search-box { display: flex; gap: 0.6rem; max-width: 32rem; margin: 0 auto 2rem; }
.search-box input { flex: 1; padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid var(--color-border); font: inherit; }
.search-results { max-width: 40rem; margin: 0 auto; }
.search-result { padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); }
.search-result a { font-weight: 700; color: var(--color-primary-dark); }
.search-result .cat { font-size: 0.8rem; color: var(--color-muted); }

/* Footer */
.site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.82); margin-top: 3rem; }
.footer-inner { padding-top: 3rem; padding-bottom: 1.5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer-logo { font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem; color: #fff; }
.footer-blurb { margin-top: 0.6rem; font-size: 0.9rem; max-width: 22rem; }
.footer-heading { color: #fff; font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.9rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.9rem; }
.footer-links a:hover { color: #fff; }
.footer-contact a { display: block; font-size: 0.9rem; margin-bottom: 0.4rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding: 1.1rem 0; font-size: 0.82rem; text-align: center; }

/* Utility */
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 0.6rem 1rem; z-index: 999; }
.skip-link:focus { left: 1rem; top: 1rem; }
.text-center { text-align: center; }