/* The side tab (client feedback, 2026-10-20), shared by the homepage (what clients say) and project pages that have an
   interview film (Rooted in Resilience, 2026-10-30). Moved out of home.css unchanged; the film panel is at the end. */

/* ---------- what clients say: a tab that slides in from the edge once the visitor scrolls (client feedback,
   2026-10-20); it opens a panel of reviews above itself and closes it again ---------- */
.kind__tab { position: fixed; right: 0; bottom: 28px; z-index: 72; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 16px;
  border: 1px solid var(--stour); border-right: 0; border-radius: var(--rb) 0 0 var(--rb); background: var(--stour); color: var(--on-dark);
  font-family: var(--body); font-weight: 650; font-size: .95rem; cursor: pointer; box-shadow: 0 16px 34px -18px rgba(19, 36, 31, .7);
  transform: translateX(110%); visibility: hidden; transition: transform .6s var(--ease), background-color .3s; }
/* off screen it is hidden too, so nobody can tab to a button they cannot see */
.kind.is-shown .kind__tab, .kind.is-open .kind__tab { transform: translateX(0); visibility: visible; transition: transform .6s var(--ease), background-color .3s, visibility 0s; }
.kind__tab:hover, .kind__tab:focus-visible, .kind.is-open .kind__tab { background: var(--deep); }
.kind__mark { width: 18px; height: 14px; color: var(--ochre); flex: none; }
.kind__panel[hidden] { display: none; }
.kind__panel { position: fixed; right: 16px; bottom: 92px; z-index: 71; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 210px); max-height: calc(100svh - 210px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper) url('../img/river-ink-faint.svg') 0 0 / 320px 96px; border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 40px 80px -30px rgba(19, 36, 31, .55); opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.kind.is-open .kind__panel { opacity: 1; transform: translateY(0); }
.kind__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px 22px; border-bottom: 1px solid var(--rule); }
.kind__title { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 560; color: var(--stour); }
.kind__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--ivory); color: var(--stour); cursor: pointer; }
.kind__close svg { width: 13px; height: 13px; }
.kind__close:hover, .kind__close:focus-visible { background: var(--stour); color: var(--on-dark); }
.kind__list { list-style: none; margin: 0; padding: 4px 22px; }
.kind__list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.kind__list li:last-child { border-bottom: 0; }
.kind__list blockquote { margin: 0; }
.kind__list p { margin: 0 0 8px; font-family: var(--display); font-style: italic; font-size: 1.06rem; line-height: 1.45; color: var(--ink); }
.kind__list footer { font-weight: 650; font-size: .9rem; color: var(--ochre-ink); }
.kind__go { margin: 10px 22px 20px; justify-content: space-between; }
/* short screens: two reviews, so the panel never needs to scroll */
@media (max-height: 760px) { .kind__list li:nth-child(3) { display: none; } }
@media (max-width: 760px) {
  .kind__tab { bottom: 20px; min-height: 48px; padding: 0 14px 0 13px; font-size: .9rem; }
  .kind__panel { bottom: 80px; max-height: calc(100svh - 170px); }
}
/* reduced motion: the tab simply stays in place, nothing slides. On phones, over the hero it is just its quote mark at
   the edge, so it does not cover the call link (2026-10-26); the words stay for screen readers. */
.reduced .kind__tab { transform: none; visibility: visible; }
@media (max-width: 760px) {
  .reduced .kind:not(.is-shown):not(.is-open) .kind__tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.reduced .kind__tab, .reduced .kind__panel { transition: none; }
.no-js .kind { display: none; }

/* ---------- the film version (Rooted in Resilience, 2026-10-30): the client's portrait interview pops out of the tab
   and plays with sound. The panel is as wide as the 9:16 film, which is as tall as the screen allows. ---------- */
.kind--film .kind__panel { width: auto; max-height: none; }
.kind__sub { margin: 0; padding: 10px 22px 0; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.kind__sub b { display: block; font-weight: 650; font-size: .85rem; color: var(--ochre-ink); }
.kind__film { align-self: center; margin: 12px 14px 14px; border-radius: var(--r); overflow: hidden; background: var(--deep); }
/* the panel's title and close button must stay clear of the fixed header: the panel sits 92px up and its own head,
   line and margins take about 150px, so the film gets what is left */
.kind__film video { display: block; height: min(600px, calc(100vh - var(--header-h) - 260px)); height: min(600px, calc(100svh - var(--header-h) - 260px)); width: auto; aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
  .kind__film video { height: min(600px, calc(100svh - var(--header-h) - 240px), calc((100vw - 60px) * 16 / 9)); }
}

/* ---------- the wide version (David's journey on the-difference.php, 2026-10-30): a 16:9 film, as wide as the screen
   allows up to 640px, and never so tall that the panel's head meets the fixed header ---------- */
.kind--wide .kind__panel { width: min(640px, calc(100vw - 32px)); }
/* the difference page runs long deep green sections, where a green tab without an edge disappears */
.kind--wide .kind__tab { border-color: rgba(244, 240, 230, .38); }
.kind--wide .kind__film { align-self: stretch; }
.kind--wide .kind__film video { width: 100%; height: auto; max-height: calc(100vh - var(--header-h) - 260px); max-height: calc(100svh - var(--header-h) - 260px); aspect-ratio: 16 / 9; background: var(--deep); }
@media (max-width: 760px) {
  .kind--wide .kind__film video { height: auto; max-height: none; }
}