/* This wrapper is transparent to the unchanged mobile/tablet layout. */
.home-hero-layout { display: contents; }

@media (min-width: 901px) {
  .home .home-hero-layout {
    --hero-gutter: 5.9vw;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-content: start;
    row-gap: clamp(28px, 2.7vw, 45px);
    width: 100%;
    max-width: none;
    min-height: max(700px, 56.28vw);
    margin: 0 auto 48px;
    padding: clamp(150px, 11.8vw, 226px) var(--hero-gutter) 64px;
    overflow: hidden;
    background: #f7f3e9;
  }
  .home .portrait-hero { display: contents; }
  .home .portrait-hero::before {
    z-index: -2;
    inset: 0;
    width: 100%;
    background: url("images/hero-ink-desktop.webp") center top / 100% auto no-repeat;
  }
  .home .portrait-hero::after { content: none; }

  .home .hero-topline {
    top: 24px;
    left: var(--hero-gutter);
    right: var(--hero-gutter);
  }
  .home .hero-wordmark {
    position: relative;
    isolation: isolate;
    padding: 0 24px 6px;
  }
  .home .hero-wordmark::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px -60px -8px;
    opacity: .75;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100'%3E%3Cpath fill='%23d9c5a8' fill-opacity='.46' d='M36 22 65 19 52 15 109 16 148 9 194 13 236 8 291 10 335 6 386 11 424 9 466 15 492 14 520 19 551 18 543 25 576 27 557 32 589 36 566 40 576 44 553 49 568 54 548 59 562 63 533 66 544 70 513 73 519 78 473 79 453 85 407 82 372 88 336 86 300 91 268 88 239 92 206 87 170 88 140 82 106 83 80 76 49 76 61 70 31 66 49 61 22 58 37 52 11 48 31 42 19 38 44 33 26 29Z'/%3E%3Cpath fill='%23c5ab87' fill-opacity='.14' d='M64 31 160 23 286 24 404 19 510 29 548 38 521 45 551 54 493 65 386 67 263 76 143 66 71 68 44 54 74 48 48 42Z'/%3E%3Cpath stroke='%23dfcfb8' stroke-opacity='.6' stroke-width='3' d='m35 18 96-3m365 4 54 5M22 59l50-4m461 18 29-3M75 84l80 4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .home .hero-wordmark .wordmark-main {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 1.85vw, 35px);
    font-weight: 500;
    letter-spacing: .13em;
  }
  .home .hero-wordmark .wordmark-rule {
    font-size: 10px;
    letter-spacing: .56em;
    margin-top: 6px;
  }
  .home .hero-wordmark .wordmark-rule::before,
  .home .hero-wordmark .wordmark-rule::after { display: none; }
  .home .hero-menu span { width: 29px; }

  .home .hero-statement {
    grid-column: 1;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
  }
  .home .hero-overline {
    font-size: clamp(10px, .8vw, 14px);
    line-height: 1.5;
    letter-spacing: .19em;
    margin: 0;
  }
  .home .hero-statement h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4.55vw, 87px);
    line-height: 1.08;
    letter-spacing: -.025em;
    width: auto;
    max-width: none;
    margin: clamp(24px, 1.85vw, 35px) 0 clamp(26px, 2.1vw, 40px);
  }
  .home .hero-statement h1 br { display: initial; width: auto; content: normal; }
  .home .hero-statement > p:last-child {
    max-width: 44vw;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(18px, 1.4vw, 26px);
    line-height: 1.55;
    margin: 0;
  }

  .home .membership-card {
    grid-column: 1;
    display: grid;
    width: min(100%, 43vw);
    margin: 0;
    padding: clamp(20px, 1.5vw, 28px);
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 16px;
    background: rgba(226, 216, 199, .22);
    border: 1px solid rgba(178, 148, 108, .26);
    border-radius: 5px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: blur(0);
  }
  .home .membership-heading {
    grid-column: 1;
    grid-row: 1;
    display: block;
  }
  .home .card-number { font-size: 11px; letter-spacing: .18em; }
  /* Retain the card's accessible name without repeating the button label. */
  .home .membership-card h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .home .member-seal { display: none; }
  .home .role-options {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 0;
  }
  .home .role-option {
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 42px;
    gap: 10px;
    padding: 0;
    border: 0;
  }
  .home .role-option strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(14px, 1.18vw, 22px);
    font-weight: 400;
    line-height: 1.4;
  }
  .home .radio-dot { width: 20px; height: 20px; }
  .home .is-selected .radio-dot::after { width: 12px; height: 12px; }
  .home .membership-cta {
    grid-column: 1;
    grid-row: 3;
    min-height: clamp(52px, 4.1vw, 72px);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(18px, 1.35vw, 24px);
    font-weight: 400;
    letter-spacing: .16em;
    color: #fffaf1;
    background: #494034;
    border-radius: 3px;
  }
  .home .membership-cta:hover { background: #332c24; }

  @media (max-width: 1199px) {
    .home .home-hero-layout { min-height: 700px; }
    .home .portrait-hero::before { background-position: center bottom; }
    .home .membership-card { width: 100%; padding: 18px; row-gap: 12px; }
    .home .role-option { gap: 8px; }
  }
  @media (max-height: 800px) {
    .home .home-hero-layout {
      padding-top: clamp(116px, 9.5vw, 156px);
      padding-bottom: 40px;
      row-gap: 26px;
    }
  }
}