/* Hero redesign: desktop and mobile magazine cover */
@media (min-width: 861px) {
  .site-header {
    padding: 34px clamp(38px, 5vw, 80px);
  }
  .brand span {
    font-size: .76rem;
    letter-spacing: .24em;
  }
  .brand strong {
    font-size: 1.9rem;
  }
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
    padding: 150px clamp(42px, 6vw, 95px) 72px;
  }
  .hero-image {
    inset: -4%;
    background-position: center center;
    transform: translateX(3.2%) scale(1.075);
    transform-origin: center center;
  }
  .hero:after {
    background: linear-gradient(90deg, rgba(23,16,12,.77) 0%, rgba(23,16,12,.57) 31%, rgba(23,16,12,.24) 46%, rgba(23,16,12,.04) 63%, rgba(23,16,12,0) 100%);
  }
  .hero-copy {
    max-width: min(560px, 41vw);
  }
  .hero .eyebrow {
    margin-bottom: 26px;
    color: #d7b36d;
    font-size: .78rem;
    letter-spacing: .18em;
  }
  .hero h1 {
    font-size: clamp(4.15rem, 5.6vw, 5.7rem);
    line-height: .98;
    letter-spacing: -.045em;
    margin-bottom: 30px;
    max-width: 560px;
  }
  .hero-copy > p:not(.eyebrow) {
    max-width: 545px;
    font-size: 1.08rem;
    line-height: 1.7;
  }
  .hero-actions {
    gap: 18px;
    margin-top: 38px;
  }
  .hero-actions .button {
    min-height: 56px;
    padding: 15px 23px;
    font-size: .73rem;
    letter-spacing: .1em;
  }
  .hero .primary {
    background: #b79258;
    color: #fff;
  }
  .hero-secondary {
    border-color: rgba(255,255,255,.9);
    color: #fff;
  }
}

@media (max-width: 860px) {
  .site-header {
    padding: 22px 20px;
  }
  .brand span {
    font-size: .62rem;
    letter-spacing: .21em;
  }
  .brand strong {
    font-size: 1.38rem;
  }
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-end;
    padding: 126px 22px 38px;
  }
  .hero-image {
    inset: -3%;
    background-position: 55% 48%;
    transform: scale(1.045);
  }
  .hero:after {
    background: linear-gradient(0deg, rgba(18,12,9,.91) 0%, rgba(18,12,9,.76) 28%, rgba(18,12,9,.24) 56%, rgba(18,12,9,.04) 76%);
  }
  .hero-copy {
    width: 100%;
    max-width: 520px;
  }
  .hero .eyebrow {
    color: #d7b36d;
    font-size: .66rem;
    line-height: 1.45;
    margin-bottom: 15px;
    max-width: 320px;
  }
  .hero h1 {
    font-size: clamp(2.8rem, 12vw, 4.25rem);
    line-height: .98;
    margin-bottom: 18px;
    max-width: 92%;
  }
  .hero-copy > p:not(.eyebrow) {
    font-size: .96rem;
    line-height: 1.55;
    max-width: 94%;
    margin: 0;
  }
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    max-width: none;
  }
  .hero-actions .button {
    min-height: 50px;
    padding: 13px 16px;
    font-size: .67rem;
    letter-spacing: .08em;
  }
  .hero .primary {
    background: #b79258;
    color: #fff;
  }
  .hero-secondary {
    border-color: rgba(255,255,255,.9);
    color: #fff;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 26px;
  }
  .hero-image {
    background-position: 55% 43%;
  }
  .hero h1 {
    font-size: clamp(2.65rem, 12.8vw, 3.65rem);
  }
  .hero-copy > p:not(.eyebrow) {
    font-size: .9rem;
    line-height: 1.48;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-actions .button {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}