/* Base values extracted from inline styles so media queries can override cleanly */
.ha-show-avatar           { width: 140px; height: 140px; }
.ha-show-h1               { font-size: 44px; }
.ha-show-content          { margin: -50px auto 0; }
.ha-show-hero-inner       { gap: 32px; }
.ha-show-books-grid       { grid-template-columns: 1fr 1fr; }
.ha-show-interviews-grid  { grid-template-columns: 1fr 1fr; }

@media (max-width: 760px) {
  /* Hero: stack to column, absolute-position seal top-right */
  .ha-show-hero       { position: relative; }
  .ha-show-hero-inner { flex-direction: column; gap: 16px; }
  .ha-show-avatar     { width: 80px; height: 80px; font-size: 28px; }
  .ha-show-h1         { font-size: 30px; }
  .ha-show-seal       { position: absolute; top: 24px; right: 32px; }
  .ha-show-seal svg   { width: 48px; height: 48px; }

  /* Content wrapper lift: -50px → -32px; position: relative so it paints above the hero */
  .ha-show-content    { margin: -32px auto 0; position: relative; }

  /* Grids: 2 col → 1 col */
  .ha-show-books-grid      { grid-template-columns: 1fr; }
  .ha-show-interviews-grid { grid-template-columns: 1fr; }
}