.region-story {
  --region-forest: #123528;
  --region-cream: #f4efe4;
  --region-gold: #cba76b;
  --region-rust: #a85f3d;
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 11vw, 160px) 0;
  color: var(--region-forest);
  background:
    radial-gradient(circle at 90% 5%, rgba(203, 167, 107, .18), transparent 28%),
    linear-gradient(180deg, #f8f4eb 0%, var(--region-cream) 100%);
}

.region-story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.region-shell { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.region-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--region-rust); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.region-kicker::before { content: ""; width: 42px; height: 1px; background: currentColor; }
.region-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .65fr); gap: clamp(40px, 8vw, 120px); align-items: end; margin-bottom: 58px; }
.region-title { margin: 0; max-width: 780px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(48px, 7vw, 92px); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
.region-title em { color: var(--region-rust); font-weight: 400; }
.region-intro-copy { margin: 0 0 8px; color: #657068; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75; }

.region-filters { display: flex; gap: 9px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.region-filters::-webkit-scrollbar { display: none; }
.region-filter { flex: 0 0 auto; padding: 10px 17px; border: 1px solid rgba(18,53,40,.18); border-radius: 999px; color: #5d6c62; background: rgba(255,255,255,.48); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.region-filter:hover { transform: translateY(-2px); }
.region-filter.is-active { color: white; background: var(--region-forest); border-color: var(--region-forest); }

.region-gallery { display: grid; grid-template-columns: 1.28fr .72fr .9fr; grid-template-rows: 310px 260px; grid-auto-rows: 260px; grid-auto-flow: dense; gap: 14px; }
.region-card { position: relative; min-width: 0; overflow: hidden; border: 0; border-radius: 4px; padding: 0; color: white; background: #294438; text-align: left; cursor: pointer; box-shadow: 0 18px 45px rgba(27,48,38,.12); transition: opacity .35s, transform .35s, filter .35s; }
.region-card:first-child { grid-row: 1 / 3; }
.region-card:nth-child(4) { grid-column: 2 / 4; }
.region-card:nth-child(6), .region-card:nth-child(8) { grid-column: 2 / 4; }
.region-gallery.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 340px; }
.region-gallery.is-filtered .region-card { grid-column: auto; grid-row: auto; }
.region-card.is-hidden { display: none; }
.region-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.region-card:hover img { transform: scale(1.045); }
.region-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 34%, rgba(10,25,18,.82)); }
.region-card-copy { position: absolute; z-index: 2; inset: auto 22px 20px; }
.region-card-label { display: block; margin-bottom: 7px; color: #e8c890; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.region-card strong { display: block; font-family: "Playfair Display", Georgia, serif; font-size: clamp(21px, 2vw, 31px); font-weight: 400; line-height: 1.05; }
.region-card small { display: block; max-height: 0; margin-top: 0; overflow: hidden; color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.45; opacity: 0; transition: max-height .35s, margin .35s, opacity .35s; }
.region-card:hover small { max-height: 50px; margin-top: 8px; opacity: 1; }

.region-route { display: grid; grid-template-columns: .66fr 1.34fr; gap: clamp(40px, 8vw, 110px); margin-top: clamp(80px, 10vw, 130px); padding-top: 68px; border-top: 1px solid rgba(18,53,40,.16); }
.region-route h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(36px, 4.5vw, 58px); font-weight: 400; line-height: 1; }
.region-route h3 span { color: var(--region-rust); font-style: italic; }
.region-route > div > p { max-width: 380px; color: #6e776f; font-size: 14px; line-height: 1.7; }
.region-timeline { list-style: none; margin: 0; padding: 0; }
.region-timeline li { display: grid; grid-template-columns: 70px 1fr auto; gap: 20px; align-items: start; padding: 22px 0; border-top: 1px solid rgba(18,53,40,.15); }
.region-time { color: var(--region-rust); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.region-timeline strong { display: block; margin-bottom: 6px; font-family: "Playfair Display", Georgia, serif; font-size: 21px; font-weight: 400; }
.region-timeline p { margin: 0; color: #6c766e; font-size: 12px; line-height: 1.6; }
.region-number { color: rgba(18,53,40,.22); font-family: "Playfair Display", Georgia, serif; font-size: 28px; }

.region-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; background: rgba(8,24,17,.92); backdrop-filter: blur(12px); transition: opacity .25s; }
.region-lightbox.is-open { opacity: 1; pointer-events: auto; }
.region-lightbox figure { width: min(1040px, 94vw); margin: 0; }
.region-lightbox img { display: block; width: 100%; max-height: 78vh; object-fit: contain; }
.region-lightbox figcaption { display: flex; justify-content: space-between; gap: 30px; margin-top: 16px; color: white; }
.region-lightbox figcaption strong { font-family: "Playfair Display", Georgia, serif; font-size: 24px; font-weight: 400; }
.region-lightbox figcaption span { max-width: 440px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.55; text-align: right; }
.region-lightbox-close { position: absolute; top: 24px; right: 28px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: white; background: transparent; font-size: 24px; cursor: pointer; }
.region-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.region-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .region-intro, .region-route { grid-template-columns: 1fr; gap: 28px; }
  .region-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 250px 250px; }
  .region-card:first-child { grid-column: 1 / 3; grid-row: auto; }
  .region-card:nth-child(4) { grid-column: auto; }
  .region-card:nth-child(6), .region-card:nth-child(8) { grid-column: auto; }
}

@media (max-width: 620px) {
  .region-shell { width: min(100% - 28px, 1180px); }
  .region-gallery { display: flex; gap: 12px; margin-right: -14px; padding-right: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .region-gallery.is-filtered { display: flex; }
  .region-gallery::-webkit-scrollbar { display: none; }
  .region-card, .region-card:first-child { flex: 0 0 84vw; height: 470px; scroll-snap-align: start; }
  .region-card small { max-height: 50px; margin-top: 8px; opacity: 1; }
  .region-timeline li { grid-template-columns: 58px 1fr; }
  .region-number { display: none; }
  .region-lightbox figcaption { flex-direction: column; gap: 8px; }
  .region-lightbox figcaption span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .region-reveal, .region-card, .region-card img, .region-lightbox { transition: none; }
}