/* ========================================================================== 
   V12 — personal voice, lighter hero UI, reordered story and performance pass
   ========================================================================== */

/* Header: the name is enough; repeated role labels are deliberately removed. */
.brand-copy { gap: 0; }
.brand-copy small[hidden],
#brand-role:empty { display: none !important; }
.brand-copy strong { line-height: 1.05; }

/* The status now says only what matters. No pseudo-system code. */
.availability-line {
  gap: 10px;
  padding-inline: 14px;
  backdrop-filter: blur(8px) saturate(1.05);
}
.availability-line::after { display: none; }

/* Hero machine: less decorative telemetry, stronger meaning. */
.operator-card { width: min(55%, 410px); }
.operator-photo-wrap { aspect-ratio: .82; }
.operator-top,
.operator-state { display: none !important; }

.signal-card {
  width: 225px;
  min-height: 112px;
  display: grid;
  align-content: center;
  padding: 17px 18px;
  backdrop-filter: blur(9px) saturate(1.08);
}
.signal-card small {
  font-size: 10px;
  letter-spacing: .11em;
}
.signal-card strong {
  margin: 9px 0;
  font-size: 15px;
  line-height: 1.16;
}
.signal-card span {
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .065em;
}
.ai-core { width: 78px; }
.ai-core strong { font-size: 21px; }
.ai-core span { max-width: 64px; text-align: center; font-size: 7.5px; line-height: 1.15; }
.machine-caption { max-width: 78%; font-size: 10px; line-height: 1.48; }

/* The honest explanation should feel open rather than corporate. */
.manifesto-grid { grid-template-columns: .28fr 1.32fr .92fr; }
.manifesto-grid h2 { max-width: 18ch; }
.manifesto-grid p { max-width: 54ch; }

/* Projects now start immediately after the site-purpose statement. */
.projects { padding-top: 98px; }
.project-console { contain: layout paint; }
.project-tabs { border-top: 0; }
.project-console.project-shift .project-media::after { animation-duration: .38s; }
.project-console.project-shift .project-copy > * { animation-duration: .34s; }
.project-case-grid article { min-height: 145px; }
.project-case-grid p { font-size: 14px; line-height: 1.58; }
.media-topline { justify-content: flex-start; }

/* The three portrait poses become visible as tasteful local-only guides until
   actual transparent images are supplied. The JS never shows these on a live domain. */
.pose-guide {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 31%;
  min-width: 180px;
  height: 70%;
  padding: 18px;
  border: 1px dashed rgba(255, 238, 210, .58);
  border-radius: 46% 46% 18px 18px;
  color: rgba(255, 244, 226, .88);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 180, 105, .20), transparent 23%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(5,15,10,.18));
  box-shadow: 0 0 28px rgba(233, 130, 62, .15), inset 0 0 34px rgba(255,255,255,.025);
  text-align: center;
  pointer-events: none;
  opacity: .78;
}
.pose-guide[hidden] { display: none !important; }
.pose-guide span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 205, 151, .48);
  border-radius: 50%;
  color: var(--orange-soft);
  font: 700 28px/1 var(--display);
  box-shadow: 0 0 24px rgba(233,130,62,.20);
}
.pose-guide strong {
  max-width: 190px;
  font: 760 11px/1.45 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-media[data-pose-mode="point"] .pose-guide { right: 1%; bottom: -2%; transform: rotate(1deg); }
.project-media[data-pose-mode="look"] .pose-guide { left: 1%; bottom: -1%; transform: rotate(-1deg); }
.project-media[data-pose-mode="sit"] .pose-guide {
  right: 8%;
  bottom: -4%;
  width: 38%;
  height: 48%;
  border-radius: 34px 34px 16px 16px;
}
.project-media[data-pose-mode="point"].has-pose-guide .fallback-core { transform: translate(-68%, -50%); }
.project-media[data-pose-mode="look"].has-pose-guide .fallback-core { transform: translate(-32%, -50%); }
.project-media[data-pose-mode="sit"].has-pose-guide .fallback-core { transform: translate(-58%, -58%); }

/* Actual transparent poses use the same choreography as the guides. */
.project-pose.pose-point { right: -3%; left: auto; bottom: -4%; width: min(47%, 390px); }
.project-pose.pose-look { left: -2%; right: auto; bottom: -4%; width: min(45%, 370px); }
.project-pose.pose-sit { right: 8%; left: auto; bottom: -10%; width: min(54%, 430px); max-height: 70%; }

/* CV intentionally closes the page after the contact block. */
.cv { padding-top: 82px; padding-bottom: 90px; }
.cv .section-id { margin-bottom: 28px; }
.resume-download { margin-bottom: 0; }

/* A meaningful performance improvement: the old full-screen canvas ribbon was
   decorative and expensive. The SVG cosmos remains, but the canvas is disabled. */
.field-canvas { display: none !important; }
.cosmic-image { will-change: auto; transform: scale(1.035); }
.cosmic-aurora { filter: blur(48px); opacity: .17; }
.aurora-a { animation-duration: 28s; }
.aurora-b { animation-duration: 34s; }
.hero-machine::before,
.signal-card,
.project-console,
.contact-panel,
.resume-download { backdrop-filter: blur(9px) saturate(1.06); }

/* Skip layout and paint work for sections that are far below the viewport. */
.projects,
.trust,
.profile,
.capabilities,
.trajectory,
.values,
.contact,
.cv {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

@media (max-width: 1180px) {
  .signal-card { width: 195px; min-height: 102px; }
  .signal-card strong { font-size: 13px; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-grid h2 { max-width: 22ch; }
  .manifesto-grid p { max-width: 70ch; }
}

@media (max-width: 820px) {
  .signal-card { width: 166px; min-height: 90px; padding: 13px 14px; }
  .signal-card small { font-size: 9px; }
  .signal-card strong { font-size: 11px; }
  .signal-card span { display: none; }
  .pose-guide { min-width: 145px; width: 36%; height: 62%; }
  .pose-guide strong { font-size: 9px; }
  .project-media[data-pose-mode="sit"] .pose-guide { width: 44%; height: 44%; }
}

@media (max-width: 640px) {
  .availability-line { font-size: 11px; }
  .hero-machine { min-height: 480px; }
  .operator-card { width: 64%; }
  .signal-card { width: 138px; min-height: 76px; padding: 10px 11px; }
  .signal-card small { font-size: 8px; }
  .signal-card strong { margin: 6px 0 0; font-size: 9.5px; }
  .ai-core { width: 62px; }
  .ai-core strong { font-size: 17px; }
  .ai-core span { font-size: 6px; }
  .machine-caption { max-width: 88%; font-size: 8.5px; }
  .pose-guide { min-width: 112px; width: 40%; height: 54%; padding: 10px; }
  .pose-guide span { width: 52px; height: 52px; font-size: 20px; }
  .pose-guide strong { max-width: 110px; font-size: 7.5px; }
  .project-media[data-pose-mode="sit"] .pose-guide { width: 48%; height: 39%; }
  .project-case-grid article { min-height: 0; }
  .projects, .trust, .profile, .capabilities, .trajectory, .values, .contact, .cv { contain-intrinsic-size: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-image { transform: none; }
}