/* Hero portrait, calls to action, and selection hygiene for decorative surfaces. */
.hero-avatar{position:relative;flex-shrink:0;width:64px;height:64px;margin-top:3px}
.hero-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;filter:saturate(.8);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line)}
.hero-avatar i{position:absolute;right:-7px;bottom:-5px;width:26px;height:26px;border-radius:50%;background:var(--paper);color:var(--orange);display:grid;place-items:center}
.hero-avatar i svg{width:15px;height:15px;animation:rotate 24s linear infinite}

.cta-button{display:inline-flex;align-items:center;gap:16px;min-height:50px;padding:12px 24px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 15px var(--body);white-space:nowrap;transition:background .25s,color .25s}
.cta-button>span{font:19px var(--space);transition:transform .25s}
.cta-button:hover{background:var(--lime);color:var(--ink)}
.cta-button:hover>span{transform:translate(2px,-2px)}
.cta-secondary{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-size:14px;color:#c9d3c2;transition:color .25s}
.cta-secondary:hover{color:var(--lime)}

.work-cta{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:72px;padding-top:32px;border-top:1px solid var(--line)}
.work-cta>p{font:clamp(22px,2.2vw,32px)/1.25 var(--space);letter-spacing:-.04em;max-width:640px}

.approach-cta{margin-top:36px;padding-top:28px;border-top:1px solid #53604b;max-width:440px}
.approach-cta>p{font:21px/1.35 var(--space);letter-spacing:-.03em}
.approach-cta .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:20px}
.approach-cta .cta-button{background:var(--lime);color:var(--ink)}
.approach-cta .cta-button:hover{background:var(--paper)}

/* Long-press on visuals and controls should interact, not select text or open the iOS callout.
   Reading text, the email address, and dialogs stay selectable. */
.site-header,.hero-topline,.hero-bottom,.hero-avatar,.sculpture-panel,.capability-strip,.research-art,.research-status,
.film,.project-selector,.project-number,.tag-list,.principle summary,.principle-symbol,.portrait-frame,.portrait-caption,
.experience-stats,.round-link,.research-credential,.cta-button,.cta-secondary,.contact-arrow,.contact-top,.site-footer,
button,summary,canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.demo-output,.demo-output *{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}

@media(max-width:600px){
  /* The portrait sits beside the introduction as a compact column, so text keeps one clean edge. */
  .hero-description{display:flex;gap:16px;align-items:flex-start}
  .hero-description p{font-size:20px}
  .hero-avatar{width:52px;height:52px;margin-top:4px}
  .hero-avatar i{width:22px;height:22px;right:-5px;bottom:-4px}
  .hero-avatar i svg{width:13px;height:13px}

  .work-cta{display:block;margin-top:34px;padding-top:24px}
  .work-cta>p{font-size:24px;margin-bottom:18px}
  .cta-button{width:100%;justify-content:space-between;min-height:56px;padding:14px 24px;font-size:17px}

  /* On phones the invitation follows the principles rather than interrupting them. */
  .approach-inner{display:flex;flex-direction:column}
  .approach-lead{display:contents}
  .principles{order:1}
  .principle-symbol{display:none}
  .approach-cta{order:2;margin-top:30px;padding-top:0;border-top:0;max-width:none}
  .approach-cta>p{font-size:23px}
  .approach-cta .cta-row{gap:4px 24px}
  .cta-secondary{font-size:16px}
}