/* Sanctuary Ground: "Five to get to know" on the homepage (sg-featured.js).
   Five tall photo panels side by side; the one you point at opens up. */
.ft-grid.ft-panels { display: block; grid-template-columns: none; grid-template-rows: none; }
.ftk { display: flex; gap: 10px; height: 480px; }
.ftk-p { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; color: #FBF7EE; text-decoration: none; isolation: isolate; transition: flex-grow .55s cubic-bezier(.2,.7,.2,1); background: #2B2219; }
.ftk-p.on { flex-grow: 4.2; }
.ftk-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.ftk-p.on:hover img { transform: scale(1.03); }
.ftk-p::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,10,.08) 30%, rgba(20,16,10,.85) 100%); transition: background .4s ease; }
.ftk-p:not(.on)::after { background: linear-gradient(180deg, rgba(20,16,10,.2) 0%, rgba(20,16,10,.62) 100%); }
.ftk-tx { position: absolute; left: 26px; right: 26px; bottom: 24px; display: grid; gap: 5px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease .15s, transform .35s ease .15s; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.ftk-p.on .ftk-tx { opacity: 1; transform: none; }
.ftk-tx small { font-size: 12.5px; opacity: .9; }
.ftk-tx b { font-family: var(--display, Georgia, serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -0.01em; }
.ftk-tag { font-size: 15px; line-height: 1.45; opacity: .92; max-width: 440px; }
.ftk-b { justify-self: start; margin-top: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(251,247,238,.94); color: #2B3A2E; text-shadow: none; }
.ftk-name { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--display, Georgia, serif); font-size: 21px; white-space: nowrap; max-height: 80%; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 10px rgba(0,0,0,.45); transition: opacity .25s ease; }
.ftk-p.on .ftk-name { opacity: 0; }
.ftk-p:focus-visible { outline: 3px solid var(--cedar, #8A5A37); outline-offset: 3px; }
@media (max-width: 860px) {
  .ftk { flex-direction: column; height: auto; gap: 8px; }
  .ftk-p { flex: none; height: 84px; transition: height .45s ease; }
  .ftk-p.on { height: 360px; }
  .ftk-tx { left: 20px; right: 20px; bottom: 20px; }
  .ftk-name { writing-mode: horizontal-tb; transform: translateY(50%); left: 20px; right: 20px; bottom: 50%; max-height: none; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ftk-p, .ftk-tx, .ftk-p img, .ftk-p::after { transition: none !important; } }