/* "Explore where it fits" on the product pages (builder B3, round 14; client notes 175, 181, 177, then 195, 202, 205).
   One wide module. Left: the three categories as a list; the chosen one leads at the h2 role, set apart by space and colour and links to where it
   goes, the other two stay as names to choose. Right, bleeding to the module's edges: a painting chosen for what the category means,
   whole, feathered into the dark at its inner edge so the names never sit on a face, a hand or the painting's subject.
   It moves on by itself every 5 s (a vermilion line under way above the chosen name; the next painting fades in over it), and holds
   (r17: not on hover) while anything in it has focus, for a while after a touch, and while it is off screen. Reduced motion: still and
   complete. A click, a tap, the arrow keys or a sideways swipe also changes it. Site type roles and tokens only. */
.fit-mod{--H:clamp(420px,38vw,560px);--picw:min(64%,calc(var(--H) * 1.5),calc(100% - 560px));position:relative;height:var(--H);border-radius:6px;overflow:hidden;
  background:#111110;isolation:isolate;touch-action:pan-y;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 90px rgba(0,0,0,.36)}
/* the paintings: the whole picture at its own 3:2 shape, right-aligned; only the chosen one shows */
.fit-pics{position:absolute;top:0;right:0;bottom:0;width:var(--picw);z-index:0;overflow:hidden}
.fit-pics > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade,24%));mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade,24%))}
/* r17 (client 309, 316): from one painting to the next, a fade over: the new one fades in on top while the old one stays whole beneath it
   (no slide, so the dark ground never shows between them); the old one is let go once the new one is in */
.fit-pics > *{opacity:0;z-index:0;transform:translateX(-7%);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.fit-pics > .is{opacity:1;z-index:2;transform:none}
.fit-pics > .was{opacity:1;z-index:1;transform:none;transition:none}
/* r19 (client): the new painting comes in from the left as it fades in, over the old one, and quicker (.55s, was .9s) */
/* the names */
.fit-panel{position:absolute;left:0;top:0;bottom:0;width:calc(100% - var(--picw) + 3%);z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(26px,3vw,44px) calc(3% + 16px) clamp(26px,3vw,46px) clamp(24px,3.4vw,52px)}
/* r17 (client 309): the right padding keeps the chosen name off the painting (it wraps before the painting's edge) */
.fit-eb{margin-bottom:18px}
.fit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fit-list li{position:relative}
.fit-pick{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:12px;min-height:46px;cursor:pointer;
  font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;color:rgba(255,255,255,.5);transition:color .25s var(--ease)}
.fit-pick::before{content:'';flex:none;width:14px;height:2px;background:rgba(255,255,255,.28);transition:background-color .25s}
.fit-pick:hover{color:#fff}
.fit-pick:hover::before{background:#fff}
.fit-pick:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.fit-name{display:none}
.fit-list li.is .fit-pick{display:none}
.fit-list li.is .fit-name{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:18px 0 22px;color:#fff;font:var(--w-h2) var(--s-h2)/1.04 var(--f);letter-spacing:-.032em;
  text-wrap:balance;max-width:14em;animation:fit-in .45s var(--spring) .1s both}
.fit-name .fit-w{position:relative}
.fit-name .fit-w{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:9px;text-decoration-color:rgba(255,255,255,.22);transition:text-decoration-color .25s}
.fit-name:hover .fit-w{text-decoration-color:rgba(255,255,255,.8)}
.fit-name:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:6px}
/* the time to the next category: a short line above the chosen name, filled in vermilion as it runs */
.fit-prog{display:block;position:relative;width:56px;height:2px;background:rgba(255,255,255,.2);overflow:hidden}
.fit-prog::after{content:'';position:absolute;inset:0;background:var(--verm);transform-origin:left center}
/* r19 (client): the time to the next category is one loader at the top left of the dark panel (no longer above the chosen name) */
.fit-name .fit-prog{display:none}
.fit-load{position:absolute;left:clamp(24px,3.4vw,52px);top:clamp(26px,3vw,44px);z-index:3;width:56px;height:2px;background:rgba(255,255,255,.2);overflow:hidden;pointer-events:none}
.fit-mod--tts .fit-load{left:clamp(28px,3vw,48px);top:clamp(20px,2.2vw,32px)}
.fit-load::after{content:'';position:absolute;inset:0;background:var(--verm);transform-origin:left center;transform:scaleX(0)}
.fit-mod.is-auto .fit-load.run::after{animation:fit-prog var(--dwell,5s) linear both}
.fit-mod.is-hold .fit-load.run::after{animation-play-state:paused}
@keyframes fit-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fit-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fit-list li{transition:transform .4s var(--ease-io)}
.fit .dep{margin-top:56px}

/* tablet: a little more room for the names */
@media (max-width:1100px) and (min-width:761px){
  .fit-mod{--picw:min(56%,calc(var(--H) * 1.5),calc(100% - 470px))}
  .fit-mod--tts{grid-template-columns:minmax(0,1fr) max(50%,500px)}
}
/* phone: the painting across the top, feathered into the dark at its foot; the names under it */
@media (max-width:760px){
  .fit-mod{display:block;height:auto}
  .fit-pics{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:3 / 2;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .fit-pics > img{-webkit-mask-image:none;mask-image:none}
  .fit-panel{position:relative;width:auto;display:block;margin-top:0;padding:22px 20px 24px}
  .fit-load,.fit-mod--tts .fit-load{left:20px;top:8px}
  .fit-list li.is .fit-name{gap:12px;padding:12px 0 16px}
  .fit-name .fit-w{text-underline-offset:7px}
}

/* Atlas TTS (client note 177): the preview on the left, painted by P1 (people using voice in each context), hard-edged; the names on
   the right with the page's own line for how it helps; the voice drawn as speech bubbles holding a small bar line (no words: the
   content has no dialogue). Vermilion only in the bubble that is the Atlas voice. */
.fit-mod--tts{height:auto;display:grid;grid-template-columns:minmax(0,1fr) max(48%,620px);align-items:start}
.fit-mod--tts .fit-pics{position:relative;inset:auto;width:auto;height:auto;aspect-ratio:3 / 2;-webkit-mask-image:none;mask-image:none}
.fit-mod--tts .fit-panel{position:relative;inset:auto;width:auto;padding:clamp(20px,2.2vw,32px) clamp(24px,3.4vw,52px) clamp(20px,2.2vw,32px) clamp(28px,3vw,48px)}
.fit-mod--tts .fit-list li.is .fit-name{gap:14px;padding:14px 0 18px}
.fit-prev{position:absolute;inset:0;margin:0}
.fit-prev > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%)}
.fit-line{display:none}
.fit-list li.is .fit-line{display:block;margin:-4px 0 0;max-width:22em;font:400 var(--s-lede)/1.4 var(--f);letter-spacing:-.008em;color:var(--fg2)}
.fit-bubs{position:absolute;inset:0;pointer-events:none}
.fit-bub{position:absolute;left:var(--x);top:var(--y);width:var(--w);display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:18px;
  background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 12px 30px rgba(14,15,15,.18);
  opacity:0;translate:0 8px;transition:opacity .35s var(--ease) calc(.08s + var(--d) * .5s),translate .45s var(--spring) calc(.08s + var(--d) * .5s)}
.fit-bub--p{background:rgba(26,26,24,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(14,15,15,.22);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.fit-prev.is .fit-bub{opacity:1;translate:0 0}
.fit-bub::after{content:'';position:absolute;top:50%;width:13px;height:13px;background:inherit;box-shadow:none;border-radius:2px;transform:translateY(-50%) rotate(45deg)}
.fit-bub.t-r::after{right:-5px} .fit-bub.t-l::after{left:-5px} .fit-bub.t-n::after{display:none}
.fit-play{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--verm);color:#fff}
.fit-play svg{width:11px;height:11px}
.fit-bars{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:24px;overflow:hidden}
.fit-bars i{flex:1 1 0;min-width:2px;max-width:4px;height:calc(var(--h) * 100%);border-radius:2px;background:var(--verm);transform:scaleY(.16);
  transition:transform .28s var(--spring) calc(.2s + var(--d) * .5s + var(--i) * 16ms)}
.fit-bub--p .fit-bars i{background:rgba(255,255,255,.92)}
.fit-prev.is .fit-bars i{transform:none}
.fit-wait .fit-prev.is .fit-bub{opacity:0;translate:0 8px}
.fit-wait .fit-prev.is .fit-bars i{transform:scaleY(.16)}
/* while a preview is shown and the module is on screen, the voice talks: its bars move, and the listener nods in time with it
   (his head is a layer cut from the same picture; at rest it sits exactly where it was painted) */
.fit-mod.is-auto:not(.is-off) .fit-prev.is .fit-bars i{animation:fit-talk .9s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -173ms)}
@keyframes fit-talk{0%{transform:scaleY(.3)}55%{transform:scaleY(1)}100%{transform:scaleY(.62)}}
.fit-prev > img.fit-head{position:absolute;inset:auto;left:54.297%;top:12.305%;width:12.174%;height:auto;max-width:none;object-fit:fill;transform-origin:54% 88.8%;pointer-events:none}
.fit-mod.is-auto:not(.is-off) .fit-prev.is img.fit-head{animation:fit-bob .9s ease-in-out infinite alternate}
@keyframes fit-bob{from{transform:rotate(1.4deg)}to{transform:rotate(-3deg) translateY(1.2%)}}
@media (max-width:760px){
  .fit-mod--tts{display:block}
  .fit-mod--tts .fit-panel{padding:14px 20px 24px}
  .fit-bub{left:var(--mx,var(--x));top:var(--my,var(--y));width:var(--mw,var(--w));gap:6px;padding:7px 9px;border-radius:12px}
  .fit-bub.mt-n::after{display:none}
  .fit-play{width:16px;height:16px} .fit-play svg{width:8px;height:8px}
  .fit-bars{height:14px;gap:1.5px}
  .fit-bars i{min-width:1.5px;max-width:3px}
  .fit-list li.is .fit-line{font-size:var(--s-lede)}
}
@media (prefers-reduced-motion:reduce){
  .fit-pics > *,.fit-pick,.fit-pick::before,.fit-bub,.fit-bars i,.fit-list li{transition:none!important}
  .fit-pics > *{transform:none}
  .fit-bars i,.fit-head,.fit-prog::after,.fit-load::after{animation:none!important}
  .fit-list li.is .fit-name{animation:none}
}