/* The answering field: the expanding panel, its threads, its documents and
   its questions. Lifted out of the Front Desk page when the home page hero
   started using it too, so there is one copy rather than two that drift.

   Every selector is x-prefixed on purpose. These names live alongside the
   marketing stylesheet, and .chip and .mini have already collided once. */

/* ── the expanding panel ─────────────────────────────────────────────
   One idea: width runs from the content column to the full window as the
   section scrolls up. Everything inside is positioned in per cent, so the
   field spreads on its own as the frame opens. Nothing is scaled. */
/* The frame needs room above it to open into. The hero already has
   the headline doing that work, so it asks for less. */
.xstage{padding:110px 0 0;}
.hero .xstage{padding:56px 0 0;}
.xpanel{--vw:100vw;--p:0;
  --w0:min(1200px,calc(var(--vw) - 72px));
  position:relative;margin:0 auto;overflow:hidden;background:var(--panel);
  width:calc(var(--w0) + (var(--vw) - var(--w0)) * var(--p));
  border-radius:calc(24px * (1 - var(--p)));
  height:clamp(520px,76vh,780px);}
@media(max-width:760px){.xpanel{--w0:calc(var(--vw) - 40px);height:clamp(620px,88vh,760px);}}

/* ── centre, the pitch and the answer share one place ── */
.xcore{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  padding:0 28px;pointer-events:none;}
.xlayer{grid-area:1/1;text-align:center;width:min(720px,100%);
  transition:opacity .5s var(--ease),transform .55s var(--ease);}
.xlayer.off{opacity:0;transform:translateY(10px) scale(.985);pointer-events:none;visibility:hidden;}
.xlayer.on{opacity:1;transform:none;pointer-events:auto;}
.xcore h2{font-family:var(--serif);font-weight:400;color:#F4F1E5;
  font-size:clamp(30px,3.9vw,54px);line-height:1.14;max-width:none;margin:0 auto;}
.xcore .sub{margin:16px auto 0;max-width:52ch;font-size:15.5px;line-height:1.55;
  color:var(--blue-soft);}


/* the answer, same centre, different content */
.xk{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-soft);opacity:.8;}
.xlayer .q{font-family:var(--serif);font-weight:400;color:#F4F1E5;
  font-size:clamp(26px,3.2vw,40px);line-height:1.16;margin:12px auto 0;max-width:22ch;}
.xlayer .a{margin:16px auto 0;max-width:50ch;font-size:16px;line-height:1.55;color:#DDE2EA;}
.xsrc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px;}
.xsrc span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  color:var(--blue-soft);border:1px solid rgba(168,179,200,.32);border-radius:999px;
  padding:5px 12px;}
.xsrc span::before{content:"";width:5px;height:5px;border-radius:50%;background:#8FA6C9;}
.xback{margin-top:22px;background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-soft);display:inline-flex;align-items:center;gap:8px;
  transition:transform .35s var(--ease);}
.xback:hover{transform:scale(1.05);}
.xback .ico{width:12px;height:12px;}

/* ── field ── */
.xfield{position:absolute;inset:0;z-index:2;}
.xlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
/* no dash-draw here: the viewBox is stretched, so a dash pattern would be
   scaled unevenly and read as broken. The threads simply fade up. */
.xlines line{stroke:#9CACC8;stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;transition:opacity .45s var(--ease),stroke .28s;}
.lit .xlines line{opacity:.58;transition-delay:var(--d,.4s),0s;}
.xpanel.picked .xlines line{opacity:.14;}
.xpanel.picked .xlines line.hot{opacity:.95;stroke:#CBD6E8;}

/* ── idle drift ───────────────────────────────────────────────────────
   A few pixels over a dozen seconds, so the field breathes rather than
   sits. This animates the `translate` property, not `transform`, because
   `transform` is already holding the -50%/-50% centring. Every node gets
   its own duration and a negative delay, so nothing moves in step. */
@keyframes xd1{0%,100%{translate:0 0}25%{translate:3px -2px}50%{translate:1px -4px}75%{translate:-2px -1px}}
@keyframes xd2{0%,100%{translate:0 0}25%{translate:-3px -1px}50%{translate:-1px 3px}75%{translate:2px 2px}}
@keyframes xd3{0%,100%{translate:0 0}30%{translate:2px 3px}60%{translate:-3px 1px}85%{translate:-1px -3px}}
@keyframes xd4{0%,100%{translate:0 0}20%{translate:-2px 2px}55%{translate:3px 1px}80%{translate:1px -3px}}
/* labels drift half as far, so the type never shimmers */
@keyframes xdm1{0%,100%{translate:0 0}25%{translate:2px -1px}50%{translate:0 -2px}75%{translate:-1px 0}}
@keyframes xdm2{0%,100%{translate:0 0}25%{translate:-2px 0}50%{translate:0 2px}75%{translate:1px 1px}}
@keyframes xdm3{0%,100%{translate:0 0}33%{translate:1px 2px}66%{translate:-1px -1px}}
@keyframes xdm4{0%,100%{translate:0 0}30%{translate:-1px -2px}70%{translate:2px 1px}}
@keyframes xdq1{0%,100%{translate:0 0}33%{translate:2px -2px}66%{translate:-2px 1px}}
@keyframes xdq2{0%,100%{translate:0 0}33%{translate:-2px 2px}66%{translate:2px 1px}}

.xt,.xq{animation:xd1 13s ease-in-out infinite;}
.xt.d1{animation-name:xd2;} .xt.d2{animation-name:xd3;} .xt.d3{animation-name:xd4;}
.xq{animation-name:xdq1;} .xq.d1{animation-name:xdq2;}

/* documents. Sizes are authored for a wide window and scaled by --k as the
   frame narrows, otherwise the field crowds the sentence in the middle. */
.xt{position:absolute;transform:translate(-50%,-50%);border-radius:3px;overflow:hidden;
  line-height:0;opacity:0;
  width:calc(var(--w) * var(--k,1));height:calc(var(--h) * var(--k,1));
  transition:opacity .5s var(--ease),filter .26s var(--ease);}
.lit .xt{opacity:1;transition-delay:var(--d,0s),0s;}
.xt svg{width:100%;height:100%;display:block;}
.xpanel.picked .xt{filter:grayscale(1) brightness(.5);}
.xpanel.picked .xt.hot{filter:none;}

/* questions */
.xq{position:absolute;transform:translate(-50%,-50%);z-index:4;
  background:none;border:0;padding:6px 8px;cursor:pointer;text-align:center;
  font-family:var(--serif);font-weight:400;color:#E9E5D6;
  font-size:clamp(15px,1.28vw,22px);line-height:1.22;
  width:max-content;max-width:15ch;opacity:0;
  transition:opacity .5s var(--ease),color .25s;}
.lit .xq{opacity:.9;transition-delay:var(--d,0s),0s;}
.xq:hover,.xq:focus-visible{opacity:1;color:#fff;}
.xq::after{content:"";display:block;height:1px;margin:5px auto 0;width:0;
  background:currentColor;opacity:.55;transition:width .35s var(--ease);}
.xq:hover::after,.xq:focus-visible::after{width:100%;}
.xpanel.picked .xq{opacity:.2;}
.xpanel.picked .xq.hot{opacity:1;color:#fff;}
.xpanel.picked .xq.hot::after{width:100%;}

/* The stagger above is a reveal device only. Left in place it also delays
   every dim and brighten afterwards by up to two seconds, which made picking
   a question feel broken. Once the field has arrived, the delays go. */
.xpanel.settled .xlines line,
.xpanel.settled .xt,
.xpanel.settled .xq{transition-delay:0s;}
/* Once settled, picking a question is its own gesture rather than part of the
   reveal: no delay, but a long gradual fade. The reveal keeps the shorter
   duration above so the field still arrives promptly. */
.xpanel.settled .xlines line{transition-duration:.9s,.55s;}
.xpanel.settled .xt{transition-duration:.9s,.6s;}
.xpanel.settled .xq{transition-duration:.9s,.5s;}

/* the quiet affordance, bottom left */
.xcap{position:absolute;left:0;bottom:0;z-index:5;padding:22px 26px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-soft);opacity:0;transition:opacity .8s var(--ease) 1.5s;}
.lit .xcap{opacity:.5;}
.xpanel.picked .xcap{opacity:0;transition-delay:0s;}

/* ── middle widths: shrink the documents and the sentence together ── */
@media(max-width:1500px){.xpanel{--k:.86;}}
@media(min-width:761px) and (max-width:1200px){
  .xpanel{--k:.74;}
  .xlayer{width:min(620px,64%);}
  .xcore h2{font-size:clamp(26px,3.4vw,40px);}
  .xcore .sub{font-size:14px;}
  .xq{font-size:clamp(14px,1.6vw,18px);max-width:12ch;}
  .xlayer .q{font-size:clamp(22px,2.9vw,32px);}
  .xlayer .a{font-size:14.5px;}
}
@media(min-width:761px) and (max-width:900px){.xpanel{--k:.64;}}

/* ── narrow screens ──────────────────────────────────────────────────
   A scattered field cannot survive 390px: the documents land on the
   headline and the questions land on each other. So the same three parts
   are stacked instead. A shelf of documents on top, the sentence in the
   middle, the questions as taps at the foot. The threads are dropped
   rather than drawn through the text. */
@media(max-width:760px){
  /* Nothing is absolutely positioned on a phone. Three stacked blocks pinned
     inside a fixed-height frame is exactly why the button landed on top of the
     first question: there is no height at which the documents, the pitch and
     five questions all fit. In flow they follow one another and the frame
     grows to hold them.

     display:contents on the field promotes #tiles and #qs to children of the
     panel, so the order can be documents, pitch, questions, which is the order
     someone reads them in. */
  .xpanel{height:auto;display:flex;flex-direction:column;}
  .xfield{display:contents;}
  .xlines{display:none;}

  #tiles{order:1;position:static;display:flex;flex-wrap:wrap;
    justify-content:center;align-items:center;gap:8px;padding:32px 18px 0;}
  .xt{position:static;transform:none;}
  .xt:nth-child(n+7){display:none;}   /* one clean shelf, not a stray second row */

  .xcore{order:2;position:static;padding:30px 22px 0;}
  .xlayer{width:100%;}
  .xcore h2{font-size:clamp(26px,7.4vw,31px);}
  .xcore .sub{font-size:14.5px;line-height:1.6;}
  .xlayer .q{font-size:21px;}
  .xlayer .a{font-size:14.5px;}
  .xback{margin-top:18px;}

  /* One per line. Five ovals wrapping mid-sentence is the squeezed look. */
  #qs{order:3;position:static;display:flex;flex-direction:column;
    gap:8px;padding:28px 18px 32px;}
  .xq{position:static;transform:none;width:100%;max-width:none;text-align:center;
    font-size:14px;line-height:1.35;padding:12px 16px;
    border:1px solid rgba(168,179,200,.3);border-radius:999px;
    background:rgba(244,241,229,.05);}
  .xq::after{display:none;}
  /* The drift comes back, at roughly half the amplitude. It animates the
     translate property, which is independent of transform, so it works just
     as well on a document sitting in flow as on one placed by per cent.
     The questions stay still: a full-width pill wobbling reads as a fault
     rather than as life. */
  .xt{animation-name:xdm1;animation-duration:15s;}
  .xt.d1{animation-name:xdm2;} .xt.d2{animation-name:xdm3;} .xt.d3{animation-name:xdm4;}
  .xq{animation:none;}
  .xpanel.picked .xq{opacity:.3;}
  .xcap{display:none;}
}
/* Reduced motion gets the frame already open. The .lit class is still applied
   by script, so nothing here may pin opacity, or selecting a question would
   no longer dim the rest of the field. */
@media(prefers-reduced-motion:reduce){
  .xpanel{--p:1;}
  .xt,.xq,.xcap,.xlines line,.xlayer,.xbtn{transition:none;}
  .xt,.xq{animation:none;}
  .js .xtab-p{animation:none;}
}
html:not(.js) .xt,html:not(.js) .xq,html:not(.js) .xcap{opacity:1;}
html:not(.js) .xlines line{opacity:.42;stroke-dashoffset:0;}