@import url('fonts.css');

/* ============================================================
   SHANTINIKETAN SADHNA KENDRA — SITE STYLESHEET
   Built on the Kendra design system, retuned per the latest
   direction: Cormorant Garamond headlines + Noto Sans body,
   reduced saturation, generous whitespace, large photography,
   quiet elegant typography. Inspiration: Aman, Plum Village,
   School of Philosophy, Japanese temple sites.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Fonts */
  --font-display:  'Cormorant Garamond', 'Noto Serif Gujarati', Georgia, serif;
  --font-body:     'Noto Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-gujarati: 'Noto Sans Gujarati', 'Noto Sans', sans-serif;
  --font-gujarati-serif: 'Noto Serif Gujarati', 'Noto Sans Gujarati', serif;

  /* --- Colour: desaturated, drawn from mark + sandstone photography --- */
  /* Sandstone neutrals — warm, quiet */
  --sand-25:  oklch(98.6% 0.004 78);
  --sand-50:  oklch(97.2% 0.007 76);
  --sand-100: oklch(94.4% 0.010 74);
  --sand-200: oklch(89%   0.013 70);
  --sand-300: oklch(80%   0.015 64);
  --sand-400: oklch(67%   0.015 58);
  --sand-500: oklch(55%   0.014 52);
  --sand-600: oklch(45%   0.013 48);
  --sand-700: oklch(35%   0.012 44);
  --sand-800: oklch(26%   0.010 40);
  --sand-900: oklch(19%   0.010 38);

  /* Saffron — muted marigold (chroma pulled well down from the mark) */
  --saffron-50:  #fcf6ee;   /* brand light cream — logo patch ground */
  --saffron-100: oklch(94% 0.030 74);
  --saffron-200: oklch(88% 0.048 70);
  --saffron-300: oklch(80% 0.066 64);
  --saffron-400: oklch(72% 0.082 58);
  --saffron-500: oklch(64% 0.090 52);   /* primary accent — quiet marigold */
  --saffron-600: oklch(56% 0.088 46);
  --saffron-700: oklch(47% 0.078 40);

  /* Palm green — soft, meditative */
  --green-100: oklch(92% 0.020 150);
  --green-300: oklch(66% 0.038 148);
  --green-500: oklch(44% 0.040 148);
  --green-600: oklch(36% 0.036 150);
  --green-700: oklch(29% 0.032 152);
  --green-800: oklch(22% 0.026 154);
  --green-900: oklch(16% 0.020 155);

  /* Maroon / Kumkum — the brand's accent family AND its sanctioned dark-surface hue.
     Per brand guidelines: --surface-inverse #411c1a (maroon) is the signature
     dark section (footers, dark sections). Trustees: no near-black — use maroon. */
  --maroon-50:  #faefed;
  --maroon-100: #f4ddd8;
  --maroon-200: #e7bdb5;
  --maroon-400: #b06a5f;
  --maroon-500: #9a5149;   /* alerts, "Full" status, emphasis (vermillion-500) */
  --maroon-600: #7a3a33;
  --maroon-700: #5a2924;
  --maroon-800: #411c1a;   /* surface-inverse — the signature dark section */
  --maroon-900: #2c1210;   /* deepest maroon ground */

  --vermillion: var(--maroon-500);       /* rare alert accent only */
  --white: oklch(100% 0 0);

  /* Semantic */
  --page:        var(--sand-25);
  --canvas:      var(--sand-50);
  --card:        var(--white);
  --inverse:     var(--maroon-800);      /* footers, dark sections (brand #411c1a) */
  --inverse-2:   var(--maroon-700);      /* lifted maroon for emphasis CTA bands */

  --ink:         var(--sand-800);        /* solid warm brown, never black (#2a221f) */
  --ink-soft:    var(--sand-700);
  --muted:       var(--sand-500);
  --on-dark:     oklch(96% 0.006 78);
  --on-dark-soft:oklch(83% 0.010 74);

  --line:        var(--sand-200);
  --line-strong: var(--sand-300);
  --line-on-dark: oklch(100% 0 0 / 0.16);

  --accent:      var(--saffron-600);
  --accent-ink:  var(--saffron-700);
  --leaf:        var(--green-700);
  --on-saffron:  oklch(29% 0.05 42);     /* deep warm-brown text on saffron buttons (high contrast) */

  /* Spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;
  --s24:96px; --s32:128px; --s40:160px;

  --maxw: 1240px;
  --measure: 40rem;      /* readable text column */
  --pad: clamp(20px, 5vw, 64px);

  --radius-sm: 3px;
  --radius: 5px;

  --shadow-sm: 0 1px 2px oklch(38% 0.02 50 / 0.06);
  --shadow-md: 0 6px 24px oklch(35% 0.02 50 / 0.09);
  --shadow-lg: 0 20px 60px oklch(32% 0.02 50 / 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 640ms;
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--saffron-200); color: var(--sand-900); }

/* ---------- TYPE ---------- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05; font-weight: 500; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.12; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
h4 { font-size: 1.28rem; line-height: 1.3; }
p { margin: 0 0 1.15em; }
strong { font-weight: 600; }
.gu { font-family: var(--font-gujarati); }
.gu-serif { font-family: var(--font-gujarati-serif); }

.overline {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.overline--light { color: var(--saffron-300); }
.lede { font-size: clamp(1.14rem, 1.7vw, 1.4rem); line-height: 1.6; color: var(--ink-soft); font-weight: 300; }
.muted { color: var(--muted); }

/* ---------- LAYOUT ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 860px; margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(72px, 12vw, 152px); }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }
.section--dark { background: var(--inverse); color: var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--on-dark); }
.section--canvas { background: var(--canvas); }
.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

/* generic grid helpers */
.grid { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 860px){ .grid-2 { grid-template-columns: 1fr 1fr; } }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s5); }

/* ---------- BUTTONS / LINKS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 2px; cursor: pointer;
  border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--solid { background: var(--maroon-800); color: var(--on-dark); }
.btn--solid:hover { background: var(--maroon-900); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: oklch(100% 0 0 / 0.5); }
.btn--ghost-light:hover { background: oklch(100% 0 0 / 0.12); border-color: var(--white); }
.btn--saffron { background: var(--saffron-500); color: var(--on-saffron); }
.btn--saffron:hover { background: var(--saffron-400); }

.link-underline {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-underline:hover { border-color: var(--ink); }
.link-underline .arw { transition: transform var(--dur) var(--ease); }
.link-underline:hover .arw { transform: translateX(4px); }
.link-underline--light { color: var(--on-dark); border-color: var(--line-on-dark); }
.link-underline--light:hover { border-color: var(--on-dark); }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* soft legibility scrim over bright hero tops — fades out once solid */
.site-header.over-hero::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  height: 180%;
  background: linear-gradient(180deg, oklch(16% 0.035 28 / 0.80) 0%, oklch(16% 0.035 28 / 0.34) 46%, oklch(16% 0.035 28 / 0) 100%);
  transition: opacity var(--dur) var(--ease);
}
.site-header.over-hero.solid::before { opacity: 0; }
.site-header a.brand { display: flex; align-items: center; gap: 12px; }
.site-header .brand img {
  height: 76px; width: auto; transition: height var(--dur) var(--ease);
  background: var(--saffron-50); padding: 5px 9px; border-radius: 6px;
  box-shadow: 0 5px 18px oklch(14% 0.02 40 / 0.26);
}
.site-header .brand .logo-light { display: none; }   /* original full-colour mark used throughout */
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 32px); }
.site-nav a.navlink {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.09em;
  color: var(--on-dark); position: relative; padding: 4px 0;
  transition: color var(--dur) var(--ease);
}
.site-nav a.navlink::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--saffron-300); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav a.navlink:hover::after,
.site-nav a.navlink[aria-current="page"]::after { transform: scaleX(1); }
.lang-switch { font-size:0.74rem; letter-spacing:0.12em; color: var(--on-dark-soft); display:flex; gap:8px; align-items:center; }
.lang-switch b { color: var(--on-dark); font-weight:600; }
.lang-switch a:hover { color: var(--saffron-300); }
/* header CTA button — a proper button, not a nav link: real padding, dark
   saffron text (consistent with every other saffron button), no nav underline */
.site-nav a.nav-cta { padding: 13px 26px; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--on-saffron); }
.site-nav a.nav-cta::after { display: none; }
.site-nav a.nav-cta:hover { color: var(--on-saffron); }

/* header — scrolled / solid state: a calm dark translucent bar (mark & nav stay light) */
.site-header.solid {
  background: oklch(23% 0.055 28 / 0.86);
  backdrop-filter: saturate(130%) blur(14px);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
  box-shadow: 0 1px 0 var(--line-on-dark), 0 14px 44px oklch(12% 0.02 40 / 0.22);
  padding-top: 11px; padding-bottom: 11px;
}
.site-header.solid .brand img { height: 60px; }
/* pages without a dark hero use the solid header from the top */
.site-header.static-solid { position: sticky; }

.nav-toggle { display: none; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 18s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(18% 0.02 40 / 0.34) 0%, oklch(16% 0.02 40 / 0.12) 40%, oklch(14% 0.02 40 / 0.72) 100%);
}
.hero__inner { position: relative; width: 100%; padding-bottom: clamp(56px, 9vw, 128px); color: var(--white); }
.hero__title { color: var(--white); max-width: 16ch; font-weight: 500; text-shadow: 0 2px 30px oklch(20% 0.02 40 / 0.35); }
.hero__sub { color: var(--on-dark); max-width: 46ch; margin-top: var(--s6); font-weight: 300; font-size: clamp(1.05rem,1.5vw,1.3rem); }
.hero__gu { font-family: var(--font-gujarati-serif); font-size: clamp(1rem,1.4vw,1.25rem); color: var(--saffron-200); margin-bottom: var(--s5); letter-spacing: 0.02em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: var(--s8); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: oklch(100% 0 0 / 0.7); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue .bar { width: 1px; height: 40px; background: linear-gradient(var(--white), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{opacity:0; transform:scaleY(0.3);} 40%{opacity:1;} 100%{opacity:0; transform:scaleY(1);} }

/* page hero (interior pages) — shorter */
.page-hero { position: relative; min-height: 64svh; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero .hero__inner { padding-bottom: clamp(44px, 6vw, 88px); }
.page-hero__title { color: var(--white); max-width: 20ch; }
.page-hero__kicker { margin-bottom: var(--s4); }

/* ---------- SECTION HEADINGS ---------- */
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; }
.section-head .overline { display: block; margin-bottom: var(--s5); }
.section-head h2 + p { margin-top: var(--s5); }

/* ornamental palm/sun divider */
.mark-divider { display:flex; align-items:center; justify-content:center; gap:16px; color: var(--saffron-500); }
.mark-divider::before, .mark-divider::after { content:''; height:1px; width:56px; background: var(--line-strong); }
.mark-divider .dot { width:7px; height:7px; border-radius:50%; background: var(--saffron-500); }

/* ---------- CARDS ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--sand-100); }
.card__media img { width:100%; height:100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--s6) var(--s6) var(--s8); }
.card__eyebrow { font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color: var(--muted); margin-bottom: var(--s3); }
.card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-bottom: var(--s2); }
.card__meta { font-size: 0.85rem; color: var(--muted); }

/* feature row (image + text alternating) */
.feature { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 900px){
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--reverse .feature__media { order: 2; }
}
.feature__media { position: relative; }
.feature__media img { width:100%; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-md); }
.feature__media--tall img { aspect-ratio: 4/5; }

/* stat / value rows */
.pillars { display:grid; gap: clamp(28px,4vw,56px); }
@media (min-width:760px){ .pillars--3 { grid-template-columns: repeat(3,1fr); } }
.pillar { }
.pillar .num { font-family: var(--font-display); font-size: 2.6rem; color: var(--accent-ink); line-height:1; }
.pillar h4 { margin: var(--s4) 0 var(--s3); }
.pillar p { color: var(--ink-soft); font-size: 0.98rem; margin:0; }

/* quote block */
.quote { max-width: 900px; margin-inline:auto; text-align:center; }
.quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.28; color: var(--ink); margin:0; }
.section--dark .quote blockquote { color: var(--on-dark); }
.quote cite { display:block; margin-top: var(--s6); font-style: normal; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.section--dark .quote cite { color: var(--on-dark-soft); }

/* ---------- FORMS ---------- */
.field { display:flex; flex-direction:column; gap: 8px; margin-bottom: var(--s5); }
.field label { font-size: 0.78rem; font-weight:600; letter-spacing:0.08em; color: var(--ink-soft); }
.field .req { color: var(--vermillion); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--white); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--saffron-100);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-row { display:grid; gap: var(--s5); }
@media (min-width:640px){ .form-row-2 { grid-template-columns:1fr 1fr; } }
.help { font-size: 0.82rem; color: var(--muted); }

/* amount chooser (donate) */
.amounts { display:flex; flex-wrap:wrap; gap: 12px; }
.amount-chip {
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 500;
  padding: 14px 22px; border:1px solid var(--line-strong); border-radius: 3px;
  background: var(--white); cursor:pointer; transition: all var(--dur) var(--ease);
}
.amount-chip:hover { border-color: var(--ink); }
.amount-chip.active { background: var(--maroon-800); color: var(--on-dark); border-color: var(--maroon-800); }

/* small feature list with tick */
.ticks { list-style:none; padding:0; margin:0; }
.ticks li { position:relative; padding-left: 30px; margin-bottom: 14px; color: var(--ink-soft); }
.ticks li::before {
  content:''; position:absolute; left:0; top:10px; width:14px; height:8px;
  border-left:1.5px solid var(--leaf); border-bottom:1.5px solid var(--leaf); transform: rotate(-45deg);
}
/* On maroon dark sections: cream text + saffron checkmarks (brand pattern) */
.section--dark .ticks li { color: var(--on-dark-soft); }
.section--dark .ticks li::before { border-color: var(--saffron-300); }

/* chips / tags */
.tag { display:inline-block; font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:5px 11px; border-radius: 2px; background: var(--saffron-100); color: var(--accent-ink); }
.tag--leaf { background: var(--green-100); color: var(--green-700); }
.tag--sand { background: var(--sand-100); color: var(--sand-700); }

/* filter bar */
.filters { display:flex; flex-wrap:wrap; gap: 12px; align-items:center; }
.filters .pill { font-size:0.8rem; letter-spacing:0.04em; padding:9px 18px; border-radius:999px; border:1px solid var(--line-strong); background:var(--white); cursor:pointer; color: var(--ink-soft); transition: all var(--dur) var(--ease); }
.filters .pill:hover { border-color: var(--ink); color: var(--ink); }
.filters .pill.active { background: var(--maroon-800); color: var(--on-dark); border-color: var(--maroon-800); }

/* event list rows */
.event-row { display:grid; grid-template-columns: auto 1fr auto; gap: clamp(16px,3vw,40px); align-items:center; padding: var(--s6) 0; border-top:1px solid var(--line); }
.event-row:last-child { border-bottom:1px solid var(--line); }
.event-date { text-align:center; min-width: 78px; }
.event-date .d { font-family: var(--font-display); font-size: 2.4rem; line-height:1; color: var(--ink); }
.event-date .m { font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color: var(--accent-ink); margin-top:4px; }
.event-body h4 { margin-bottom: 6px; }
.event-body p { margin:0; color: var(--muted); font-size:0.92rem; }
@media (max-width:640px){ .event-row { grid-template-columns: auto 1fr; } .event-row .event-cta { grid-column: 2; justify-self:start; } }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--inverse); color: var(--on-dark-soft); padding-block: clamp(64px, 8vw, 104px) 40px; }
.site-footer a { color: var(--on-dark-soft); transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--on-dark); }
.footer-grid { display:grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 760px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand img {
  height: 92px; width: auto; margin-bottom: var(--s6);
  background: var(--saffron-50); padding: 8px 14px; border-radius: 6px;
  box-shadow: 0 8px 26px oklch(10% 0.02 30 / 0.35);
}
.footer-brand p { color: var(--on-dark-soft); max-width: 34ch; font-size: 0.95rem; }
.footer-col h5 { font-family: var(--font-body); font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color: var(--saffron-300); margin:0 0 var(--s5); }
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { margin-bottom: var(--s3); font-size: 0.95rem; }
.footer-bottom { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-top: clamp(48px,6vw,72px); padding-top: var(--s6); border-top:1px solid var(--line-on-dark); font-size:0.8rem; color: var(--on-dark-soft); }
.footer-gu { font-family: var(--font-gujarati-serif); color: var(--saffron-300); }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero__media img { animation:none; transform:none; }
  .scroll-cue .bar { animation:none; }
  html { scroll-behavior: auto; }
}

/* ---------- GALLERY ---------- */
.gallery-grid { columns: 4 250px; column-gap: 14px; }
@media (max-width: 640px){ .gallery-grid { column-gap: 10px; } }
.gallery-item {
  break-inside: avoid; margin-bottom: 14px; display: block; position: relative;
  overflow: hidden; border-radius: var(--radius); cursor: pointer; background: var(--sand-100);
  box-shadow: var(--shadow-sm);
}
.gallery-item img { width: 100%; display: block; transition: transform 1.4s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 16px 14px; margin: 0;
  color: var(--on-dark); background: linear-gradient(transparent, oklch(14% 0.02 40 / 0.78));
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery-item:hover figcaption { opacity: 1; transform: none; }
.gallery-item figcaption .gc-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.gallery-item figcaption .gc-meta { font-size: 0.74rem; letter-spacing: 0.08em; color: var(--saffron-200); margin-top: 3px; }
.gallery-item .gc-badge {
  position: absolute; top: 12px; left: 12px; font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px;
  background: oklch(14% 0.02 40 / 0.55); color: var(--on-dark); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.gallery-item:hover .gc-badge { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: clamp(20px, 5vw, 64px);
  background: oklch(13% 0.030 26 / 0.95); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox figure { margin: 0; max-width: min(1120px, 94vw); text-align: center; }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 4px; box-shadow: var(--shadow-lg); }
.lightbox figcaption { margin-top: 18px; color: var(--on-dark-soft); font-size: 0.86rem; letter-spacing: 0.04em; }
.lightbox figcaption b { color: var(--on-dark); font-weight: 600; font-family: var(--font-display); font-size: 1.05rem; }
.lb-btn {
  position: absolute; background: oklch(100% 0 0 / 0.08); border: 1px solid oklch(100% 0 0 / 0.24);
  color: var(--on-dark); width: 50px; height: 50px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lb-btn:hover { background: oklch(100% 0 0 / 0.18); border-color: oklch(100% 0 0 / 0.5); }
.lb-close { top: clamp(18px,4vw,32px); right: clamp(18px,4vw,32px); font-size: 1.1rem; }
.lb-prev { left: clamp(12px,3vw,32px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(12px,3vw,32px); top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: clamp(20px,4vw,34px); left: 50%; transform: translateX(-50%); color: var(--on-dark-soft); font-size: 0.74rem; letter-spacing: 0.18em; }
@media (max-width: 640px){ .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-btn { width: 44px; height: 44px; } }

/* ---------- MOBILE NAV ---------- */
@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; background:none; border:0; cursor:pointer; padding:8px; z-index:120;
  }
  .nav-toggle span { width: 26px; height: 1.5px; background: var(--on-dark); transition: all var(--dur) var(--ease); }
  .site-header .brand img { height: 62px; }
  .site-header.solid .brand img { height: 52px; }
  .site-nav {
    position: fixed; inset: 0; z-index: 90; background: var(--inverse); flex-direction: column;
    justify-content: center; gap: 26px; padding: 96px 24px 48px; overflow-y: auto;
    transform: translateX(100%); transition: transform var(--dur) var(--ease);
  }
  .site-nav.open { transform: none; }
  /* the solid header's backdrop-filter makes it the containing block for this
     fixed overlay (trapping it inside the header bar). Disable it while the
     menu is open so the overlay fills the whole viewport and hides the page. */
  body.nav-open .site-header {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: var(--inverse); box-shadow: none;
  }
  body.nav-open .site-header.over-hero::before { opacity: 0; }
  /* keep the logo visible above the open menu (mirrors the X on the right) */
  body.nav-open .site-header .brand { position: relative; z-index: 120; }
  .site-nav a.navlink { color: var(--on-dark); font-size: 1.5rem; font-family: var(--font-display); letter-spacing:0; }
  .site-nav .lang-switch, .site-nav .nav-cta { font-size: 0.85rem; }
  .nav-open .nav-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); background: var(--on-dark);}
  .nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); background: var(--on-dark);}
  body.nav-open { overflow: hidden; }
}