.hero {
  min-height: calc(100vh - 86px);
  padding: clamp(60px, 8vw, 110px) clamp(22px, 7vw, 110px);
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 7vw;
  background: #3a261c;
  color: var(--paper);
  position: relative;
}
.hero:after { display: none; }
.hero-copy { max-width: 680px; }
.hero-logo {
  display: block;
  width: min(100%, 560px);
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.25));
}
.hero .intro {
  max-width: 620px;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  margin: 32px 0;
  color: #f5eadb;
}
.hero-button {
  background: linear-gradient(135deg, #f0c25b, #bb7916);
  color: #21140d;
  border: 1px solid #ffd878;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  transition: transform .2s ease, background .2s ease;
}
.hero-button:hover, .hero-button:focus-visible {
  background: linear-gradient(135deg, #ffd878, #d69728);
  transform: translateY(-2px);
}
.portrait-frame {
  position: relative;
  border: 4px solid var(--gold);
  padding: 10px;
  background: #1d130f;
  box-shadow: 24px 24px 0 rgba(215,164,72,.18);
  max-width: 510px;
  justify-self: end;
}
.portrait-frame:before {
  content: "";
  position: absolute;
  inset: -15px 15px 15px -15px;
  border: 1px solid rgba(215,164,72,.65);
  pointer-events: none;
}
.portrait-frame img {
  display: block;
  width: 100%;
  height: min(68vh, 720px);
  object-fit: cover;
  object-position: center 25%;
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding-top: 55px; }
  .hero-logo { width: min(100%, 460px); margin: auto; }
  .hero-copy { text-align: center; }
  .hero .actions { justify-content: center; }
  .portrait-frame { justify-self: center; max-width: 430px; }
  .portrait-frame img { height: auto; }
}
@media (max-width: 460px) {
  .hero { padding-top: 42px; }
  .hero .actions { align-items: stretch; }
  .hero-button { width: 100%; }
  .portrait-frame { box-shadow: 14px 14px 0 rgba(215,164,72,.18); }
}