/* =====================================================================
   WHNext — "Chi siamo 2026" (page-template/page-team2026.php)
   On top of css/whx-landing.css (stage tokens, header, grain, eyebrow).
   Symmetric everywhere: one centre axis, equal portrait cards, full rows
   (12 = 4 × 3 = 3 × 4 = 2 × 6). Photographs stay portrait. rem everywhere.
   Hidden start states exist only under html.wt-anim (set by an inline
   one-liner, dropped after 4 s if js/whx-team.js never starts) and only
   until each section gets .is-in — so no JS, reduced motion or a GSAP
   failure all simply show the page.
   ===================================================================== */

.wt { text-align: center; }
.wt strong { font-weight: 600; color: var(--wl-cream); }

/* ---------------------------------------------------------------------
   1. HERO
   --------------------------------------------------------------------- */
.wt-hero {
  position: relative;
  min-height: 74vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(8rem, 18vh, 11rem) var(--wl-gutter) clamp(2rem, 5vh, 3rem);
  overflow: hidden;
}
.wt-hero::before {                           /* the light from above, centred */
  content: "";
  position: absolute; left: 50%; top: -20%;
  width: 90vw; height: 110%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(244, 239, 230, .1), rgba(244, 239, 230, .03) 50%, transparent 75%);
  pointer-events: none;
}
.wt-eyebrow { position: relative; }
.wt .wt-title {                              /* .wt prefix: whx-landing.css's .wl h1/h2 {margin:0; letter-spacing:0} outranks a single class */
  position: relative;
  margin: 1.4rem 0 0;
  font-family: var(--whx-serif);
  font-weight: 500;
  font-size: clamp(3.6rem, 10vw, 9.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--wl-cream);
}
.wt-intro {
  position: relative;
  max-width: 47rem;
  margin: clamp(1.6rem, 3.5vh, 2.4rem) auto 0;
  font-family: var(--whx-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.5;
  color: var(--wl-cream-70);
}
.wt-intro strong { font-style: normal; font-weight: 600; color: var(--wl-sage-light); }
.wt-cord {                                    /* a cord from the title down into the page */
  display: block;
  width: 1px; height: clamp(3.5rem, 9vh, 6rem);
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  background: linear-gradient(180deg, var(--wl-sage), rgba(176, 170, 126, 0));
  transform-origin: top center;
}

/* split text (js/whx-team.js): a mask per word, a rising span per character */
.wt-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wt-c { display: inline-block; will-change: transform; }

/* ---------------------------------------------------------------------
   2. THE LEAD — Helmuth Koecher behind the curtain
   --------------------------------------------------------------------- */
.wt-lead { padding: clamp(4.5rem, 11vh, 7.5rem) var(--wl-gutter) clamp(4.5rem, 10vh, 7.5rem); }   /* after the band since 2026-10-08 */
.wt .wt-lead-frame {                         /* .wt prefix: .wl figure {margin:0} would pin it left */
  position: relative;
  width: clamp(17rem, 30vw, 28rem);
  aspect-ratio: 928 / 1232;
  margin: 0 auto;
  overflow: hidden;
  outline: 1px solid rgba(176, 170, 126, .55);
  outline-offset: .75rem;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95);
}
.wt-lead-img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.wt-curtain {
  display: none;
  position: absolute; top: 0; bottom: 0;
  width: 50.5%;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(90deg, #3d1621 0, #782F40 1.3rem, #93404F 1.8rem, #4E1E2B 2.8rem);
}
.wt-curtain--l { left: 0; box-shadow: inset -12px 0 24px rgba(0, 0, 0, .45); }
.wt-curtain--r { right: 0; box-shadow: inset 12px 0 24px rgba(0, 0, 0, .45); }
@media screen { html.wt-anim .wt-curtain { display: block; } }   /* never on paper */
.wt .wt-lead-name {                          /* below the frame AND its gilded outline: nothing crosses the letters */
  position: relative; z-index: 3;
  margin: clamp(2rem, 4vh, 2.8rem) 0 0;
  font-family: var(--whx-serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.6vw, 6.4rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--wl-cream);
  text-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.wt-lead-role { margin: 1.2rem 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--wl-sage); }

/* ---------------------------------------------------------------------
   3. BEHIND THE SCENES OF — the events, a band that runs with the scroll
   --------------------------------------------------------------------- */
.wt-backstage {
  padding: clamp(2.4rem, 6vh, 3.6rem) 0;
  border-top: 1px solid var(--wl-line);
  border-bottom: 1px solid var(--wl-line);
  background: linear-gradient(90deg, rgba(120, 47, 64, .2), rgba(120, 47, 64, .06) 50%, rgba(120, 47, 64, .2));
  overflow: hidden;
}
.wt-marquee { margin-top: 1.3rem; overflow: hidden; }
.wt-marquee-track { display: flex; justify-content: center; }
.wt .wt-marquee-list {                       /* .wt prefix: .wl ul {padding:0} */
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0; padding: 0 var(--wl-gutter);
  list-style: none;
  gap: .4rem 0;
}
.wt-marquee-list li {
  display: flex; align-items: center;
  padding: 0 1.4rem;
  font-family: var(--whx-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.3vw, 3.1rem);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--wl-cream);
}
.wt-marquee-list li::after {
  content: "";
  width: .42rem; height: .42rem;
  margin-left: 2.8rem;
  border-radius: 50%;
  background: var(--wl-sage);
  box-shadow: 0 0 0 .28rem rgba(176, 170, 126, .16);
}
/* with GSAP: one line, two identical halves, the edges fade — on screen only */
@media screen {
  html.wt-anim .wt-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  html.wt-anim .wt-marquee-track { justify-content: flex-start; width: max-content; will-change: transform; }
  html.wt-anim .wt .wt-marquee-list { flex-wrap: nowrap; padding: 0; }
}
/* on paper: the plain centred list, once */
@media print {
  .wt-marquee-track { transform: none !important; }
  .wt-marquee-list[aria-hidden], .wt-marquee-list li[data-wt-clone] { display: none; }
}

/* ---------------------------------------------------------------------
   4. THE ENSEMBLE — a portrait gallery, equal frames, full rows
   --------------------------------------------------------------------- */
.wt-ensemble { padding: clamp(4.5rem, 11vh, 7.5rem) var(--wl-gutter) clamp(4.5rem, 11vh, 7rem); }
.wt-hero + .wt-ensemble { padding-top: clamp(1rem, 3vh, 2rem); }   /* right under the hero's cord (2026-10-08), where the curtain used to hang */
.wt-ensemble-head { max-width: 54rem; margin: 0 auto clamp(2.8rem, 6vh, 4.2rem); }
.wt .wt-h2 {
  margin: 1.1rem 0 0;
  font-family: var(--whx-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--wl-cream);
  text-wrap: balance;                        /* even lines, no lone "e" at a line end */
}
.wl .wt-grid {
  list-style: none;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2.4rem, 4.5vw, 3.6rem) clamp(1.2rem, 2.4vw, 2.2rem);
}
.wt-card { display: flex; flex-direction: column; align-items: stretch; }
.wt-frame {
  margin: 0;
  padding: .55rem;
  border: 1px solid rgba(176, 170, 126, .38);
  background: rgba(244, 239, 230, .03);
  transition: border-color .5s, background .5s;
}
.wt-frame-in { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1b0f13; }
.wt-frame-in img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.9) brightness(.96);
  transition: transform 1.3s var(--wl-ease), filter .7s;
}
.wt-frame-in::after {                         /* the spotlight that follows the pointer (desktop) */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 32%), rgba(255, 246, 228, .26), rgba(255, 246, 228, 0) 52%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .6s;
  pointer-events: none;
}
.wt-card:hover .wt-frame, .wt-card:focus-within .wt-frame { border-color: rgba(176, 170, 126, .85); background: rgba(244, 239, 230, .06); }
.wt-card:hover .wt-frame-in img { transform: scale(1.045); filter: none; }
.wt-card:hover .wt-frame-in::after { opacity: 1; }
.wt-monogram {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 36%, #93404F, #4E1E2B 72%);
  font-family: var(--whx-serif);
  font-weight: 500;
  font-size: clamp(3rem, 5.4vw, 5rem);
  letter-spacing: .06em;
  color: var(--wl-cream);
}
.wt-monogram::before {
  content: "";
  position: absolute; inset: .9rem;
  border: 1px solid rgba(176, 170, 126, .55);
}
.wt-plaque { margin-top: 1.25rem; }
.wt-name {
  margin: 0;
  font-family: var(--whx-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.6vw, 1.65rem);
  line-height: 1.15;
  color: var(--wl-cream);
}
.wt-role { margin: .55rem 0 0; font-size: .64rem; font-weight: 700; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; color: var(--wl-sage); }

/* ---------------------------------------------------------------------
   5. CONTACT
   --------------------------------------------------------------------- */
.wt-contact {
  padding: clamp(4.5rem, 11vh, 7rem) var(--wl-gutter) clamp(5rem, 12vh, 8rem);
  border-top: 1px solid var(--wl-line);
}
.wt-contact-text { max-width: 44rem; margin: 1.5rem auto 0; font-size: 1.04rem; line-height: 1.85; color: var(--wl-cream-70); }
.wt-jobmail {
  display: inline-block;
  margin-top: 1.5rem;
  padding-bottom: .25rem;
  font-family: var(--whx-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  color: var(--wl-cream);
  text-decoration: none;
  border-bottom: 1px solid var(--wl-sage);
  transition: color .3s, border-color .3s;
}
.wt-jobmail:hover, .wt-jobmail:focus-visible { color: var(--wl-sage-light); border-color: var(--wl-sage-light); outline: none; }
.wt-social { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem; }
.wt-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--wl-line);
  border-radius: 50%;
  color: var(--wl-cream);
  text-decoration: none;
  font-size: 1rem;
  transition: border-color .35s, background .35s, color .35s, transform .35s var(--wl-ease);
}
.wt-social a:hover, .wt-social a:focus-visible { border-color: var(--wl-sage); background: rgba(176, 170, 126, .12); color: var(--wl-sage-light); transform: translateY(-3px); outline: none; }

/* ---------------------------------------------------------------------
   6. START STATES (only while animated, only until the section plays,
      only on screen: a printed page shows every section)
   --------------------------------------------------------------------- */
@media screen {
  html.wt-anim .wt-hero:not(.is-in) .wt-eyebrow,
  html.wt-anim .wt-hero:not(.is-in) .wt-intro,
  html.wt-anim .wt-hero:not(.is-in) .wt-cord,
  html.wt-anim .wt-lead:not(.is-in) .wt-lead-role,
  html.wt-anim .wt-backstage:not(.is-in) .wt-backstage-label,
  html.wt-anim .wt-backstage:not(.is-in) .wt-marquee,
  html.wt-anim .wt-ensemble:not(.is-in) .wt-ensemble-head,
  html.wt-anim .wt-grid:not(.is-in) .wt-plaque,
  html.wt-anim .wt-contact:not(.is-in) > * { opacity: 0; }
  html.wt-anim .wt-hero:not(.is-in) .wt-title,
  html.wt-anim .wt-lead:not(.is-in) .wt-lead-name { visibility: hidden; }
  html.wt-anim .wt-grid:not(.is-in) .wt-frame { clip-path: inset(50% 0 50% 0); }   /* the grid has its own trigger: it plays when the cards come into view */
}
/* never a CSS transform transition on an element GSAP is animating (festival lesson 2026-09-25): off until the reveal is done */
html.wt-anim .wt-grid:not(.wt-done) .wt-frame-in img { transition: none; }

/* ---------------------------------------------------------------------
   7. SMALLER SCREENS — the same axis, fewer columns, never an orphan row
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .wl .wt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; }
}
@media (max-width: 700px) {
  .wt-hero { min-height: 0; padding-top: 7rem; }
  .wt .wt-lead-frame { width: min(76vw, 21rem); outline-offset: .5rem; }
  .wl .wt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1rem; }
  .wt-frame { padding: .4rem; }
  .wt-name { font-size: 1.15rem; }
  .wt-role { font-size: .56rem; letter-spacing: .16em; }
  .wt-monogram::before { inset: .6rem; }
  .wt-marquee-list li { padding: 0 1rem; }
  .wt-marquee-list li::after { margin-left: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-frame-in img, .wt-frame, .wt-social a { transition: none; }
}