/* Draft-only characters. Layout and controls stay independent of the artwork. */
.faces-title {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  align-items: center;
  gap: 2cqw;
  padding: 3.5cqw 5cqw 0;
  overflow: hidden;
  text-align: left;
}
.greeting-copy { position: relative; z-index: 1; min-width: 0; padding-bottom: 3cqw; overflow-wrap: anywhere; }
.faces-title .intro-orbit { width: 5.5cqw; height: 5.5cqw; min-width: 44px; min-height: 44px; margin-bottom: 2cqw; }
.faces-title h2 { font-size: clamp(34px,7.4cqw,94px); line-height: 1.05; }
.greeting-name { margin-top: 2.8cqw; color: var(--home-ink); font-size: clamp(20px,3cqw,38px); font-weight: 550; letter-spacing: -.035em; line-height: 1.2; }
.greeting-description { margin-top: 1.2cqw; max-width: 22ch; color: #355770; font-size: clamp(16px,1.9cqw,24px); line-height: 1.45; }
.greeting-character { position: relative; align-self: end; width: 100%; aspect-ratio: 1; pointer-events: none; }
.greeting-still,.greeting-still img,.greeting-rig { display: block; width: 100%; height: auto; }
.greeting-rig { display: none; position: absolute; inset: 0; overflow: visible; }
.greeting-character[data-waving] .greeting-still { visibility: hidden; }
.greeting-character[data-waving] .greeting-rig { display: block; }
.greeting-character[data-art-failed] { display: none; }
.faces-title:has([data-art-failed]) { grid-template-columns: 1fr; padding-bottom: 3.5cqw; }
.macbook-lid[data-scroll-lid] { transform: rotateX(var(--lid-angle,0deg)); }
.macbook-lid[data-scroll-lid] .macbook-screen { opacity: var(--lid-screen-opacity,1); }
.project-stage { position: relative; isolation: isolate; }
.project-host { display: none; position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.project-host img { display: block; width: 100%; height: auto; }
.project-stage .work-grid { position: relative; z-index: 1; }
.project-stage .work-card-float { animation: none; }
.people-project-art { background: transparent; }
.people-project-art [data-people-art] { display: none; }
html[data-people="art"] .people-project-art [data-people-art]:not([data-art-failed]) { display: block; }
html[data-people="art"] .people-project-art:has([data-people-art]:not([data-art-failed])) [data-original-art] { display: none; }
/* In comparison mode the untouched title and illustrations remain available. */
html[data-people="off"] .faces-title { display: flex; justify-content: center; align-items: center; padding: clamp(16px,3cqw,38px); text-align: center; }
html[data-people="off"] .greeting-copy { padding: 0; display: flex; flex-direction: column; align-items: center; }
html[data-people="off"] .faces-title h2 { font-size: clamp(38px,9cqw,108px); }
html[data-people="off"] .faces-title .intro-orbit { width: clamp(46px,7cqw,74px); height: clamp(46px,7cqw,74px); }
html[data-people="off"] :is(.greeting-name,.greeting-description,.greeting-character) { display: none; }
@media (min-width: 1200px) {
  .project-stage { --host-size: clamp(310px,29vw,540px); --host-rail: calc(var(--host-size) * .56); }
  html:not([data-people="art"]):not([data-people="off"]) .project-stage:not([data-host-failed]) { padding-right: var(--host-rail); }
  html:not([data-people="art"]):not([data-people="off"]) .project-host:not([data-art-failed]) {
    display: block;
    left: calc(100% - var(--host-rail) - var(--host-size) * .39);
    top: calc(var(--host-size) * -.383);
    width: var(--host-size);
  }
  /* Size-relative wrist/forearm alignment keeps contact at every desktop width. */
}
@media (max-width: 680px) {
  .faces-title { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 20px 16px 0; text-align: center; }
  .greeting-copy { padding: 0; }
  .faces-title .intro-orbit { display: none; }
  .faces-title h2 { font-size: clamp(34px,15cqw,51px); }
  .greeting-name { margin-top: 12px; font-size: 21px; }
  .greeting-description { margin-top: 8px; font-size: 16px; }
  .greeting-character { align-self: center; width: min(100%,235px); flex-shrink: 0; }
}
@media (max-height: 550px) {
  .faces-title { gap: 12px; padding: 12px 16px 0; }
  .faces-title .intro-orbit { display: none; }
  .greeting-name { margin-top: 8px; font-size: 20px; }
  .greeting-description { margin-top: 6px; font-size: 16px; }
  .greeting-character { max-width: 175px; }
}
@media (prefers-reduced-motion: reduce) {
  .macbook-lid[data-scroll-lid] { transform: none !important; }
  .macbook-lid[data-scroll-lid] .macbook-screen { opacity: 1 !important; }
  .greeting-character[data-waving] .greeting-still { visibility: visible; }
  .greeting-character[data-waving] .greeting-rig { display: none; }
}
@media (forced-colors: active) {
  .project-host,.greeting-character { display: none !important; }
  .faces-title { grid-template-columns: 1fr; }
}