/* =========================================================================
   contact-drop.css — Contact option 1: white pills falling onto a giant "Contact".
   Markup: js/components/contact/drop.js. The pills are positioned by
   js/components/contact/pillPhysics.js (transform only), so no layout here moves them.
   ========================================================================= */

#pg-contact[data-design="drop"]{overflow:hidden}
.cd{position:absolute;inset:0;overflow:hidden}

/* micro-type row — same voice as the About poster */
.cd-meta{position:absolute;top:clamp(92px,13vh,118px);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* the sentence */
.cd-say{position:absolute;top:calc(clamp(92px,13vh,118px) + clamp(44px,7vh,72px));left:var(--gutter);max-width:min(980px,calc(100% - 2 * var(--gutter)))}
.cd-line{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(34px,4.7vw,76px);line-height:1.02;letter-spacing:-.005em;text-wrap:balance}
.cd-line em{font-weight:300}
.cd-line br.ph{display:none}   /* line breaks used on phones only (css/phone.css) */
.cd-hint{display:inline-block;margin-top:clamp(14px,2.2vh,22px);font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(17px,1.5vw,22px);color:var(--ink-soft)}

/* the word (drawn on canvas) and its text for screen readers */
.cd-word{position:absolute;left:0;top:0;pointer-events:none}
.cd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the pills — plain white (no outline), lifted by a soft shadow; black on hover */
.cd-pills{position:absolute;inset:0;pointer-events:none}
.cd-pill{position:absolute;left:0;top:0;transform:translate3d(0,-200vh,0);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;padding:.6em 1.3em .66em;border-radius:999px;background:#fff;color:#111;border:0;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(19px,2.1vw,31px);line-height:1;
  box-shadow:0 26px 40px -26px rgba(20,40,90,.6);transition:background .25s,color .25s;will-change:transform}
.cd-pill svg{width:.7em;height:.7em;flex:none}
.cd-pill:hover,.cd-pill.held{background:#111;color:#fff}
.cd-pill:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* the stickers — decorative, draggable; sized here, positioned by the physics */
.cd-stickers{position:absolute;inset:0;pointer-events:none}
.cd-sticker{position:absolute;left:0;top:0;transform:translate3d(0,-200vh,0);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-user-drag:none;will-change:transform;filter:drop-shadow(0 18px 18px rgba(20,40,90,.28));transition:scale .25s cubic-bezier(.2,.7,.2,1),filter .25s}
/* held: lifted off the page — a bit bigger, a deeper shadow */
.cd-sticker.held{scale:1.08;filter:drop-shadow(0 30px 24px rgba(20,40,90,.34))}
/* stuck on the sentence: pressed flat — a quick squash, then a thin contact shadow */
.cd-sticker.stuck{filter:drop-shadow(0 3px 3px rgba(20,40,90,.22));animation:cd-press .32s cubic-bezier(.2,.7,.2,1)}
@keyframes cd-press{0%{scale:1.08}55%{scale:.96}100%{scale:1}}
.cd-badge{width:clamp(128px,12.5vw,186px);aspect-ratio:1}
.cd-badge svg{display:block;width:100%;height:100%;overflow:visible}
.cd-badge-bg{fill:#fff}
.cd-badge-line{fill:none;stroke:#111;stroke-width:1.1}
.cd-badge-text{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;fill:#111}
.cd-me{width:clamp(84px,7.6vw,118px);height:auto}
.cd-kn{width:clamp(110px,10vw,150px);height:auto}
.cd-w1,.cd-w2{width:clamp(96px,8.6vw,132px);height:auto}
.cd-w3{width:clamp(128px,11.5vw,176px);height:auto}

/* if the physics library could not load, the pills simply sit in a row under the sentence */
.cd.no-physics .cd-pills{position:absolute;inset:auto var(--gutter) 34% var(--gutter);display:flex;flex-wrap:wrap;gap:12px;pointer-events:auto}
.cd.no-physics .cd-pill{position:static;transform:none}
.cd.no-physics .cd-stickers{display:none}

@media (max-width:760px){
  .cd-meta span:nth-child(n+3){display:none}
  .cd-line{font-size:clamp(30px,8.6vw,44px)}
}