:root {
  --paper: #f4efe6;
  --paper-panel: #eee8de;

  --ink: #48403b;
  --muted: #82766f;

  --rose: #87565e;
  --rose-soft: #a8787f;

  --line: rgba(59, 49, 44, .58);
  --soft-line: rgba(59, 49, 44, .11);
}


* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
}


body {
  color: var(--ink);

  background:
    radial-gradient(
      circle at 66% 24%,
      rgba(174, 120, 125, .035),
      transparent 34%
    ),
    var(--paper);

  font-family:
    "Songti SC",
    "STSong",
    "SimSun",
    serif;
}


button {
  font: inherit;
}



/* ================================
   HEADER
================================ */

.support-header {
  position: relative;

  height: 100px;

  padding:
    0 42px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top:
    1px solid var(--soft-line);

  border-bottom:
    1px solid var(--soft-line);
}


.support-header-left {
  display: flex;

  align-items: center;

  gap: 28px;

  font-size: 13px;

  letter-spacing: .04em;
}


.support-header-left a,
.support-header-left span {
  color: var(--ink);

  text-decoration: none;
}


.support-menu-mark {
  font-size: 15px;
}


.support-brand {
  position: absolute;

  left: 50%;

  top: 9px;

  transform:
    translateX(-50%);

  color: #87565e;

  text-decoration: none;

  text-align: center;
}


.support-brand strong {
  display: block;

  white-space: nowrap;

  font-family:
    Didot,
    "Bodoni 72",
    Baskerville,
    "Times New Roman",
    serif;

  font-size:
    clamp(38px, 4vw, 61px);

  font-style: normal;

  font-weight: 400;

  letter-spacing: -.035em;

  line-height: .98;
}


.support-brand small {
  display: block;

  margin-top: 6px;

  font-family:
    Didot,
    "Bodoni 72",
    Georgia,
    serif;

  font-size: 11px;

  letter-spacing: .025em;

  text-transform: lowercase;
}


.support-return {
  color: var(--ink);

  font-size: 12px;

  letter-spacing: .06em;

  text-decoration: none;
}



/* ================================
   MAIN LAYOUT
================================ */

.support-main {
  width:
    min(1450px, calc(100vw - 110px));

  margin:
    0 auto;

  padding:
    106px 0 60px;

  display: grid;

  grid-template-columns:
    minmax(460px, .92fr)
    minmax(570px, 1.08fr);

  column-gap:
    clamp(72px, 7.5vw, 125px);

  align-items: start;
}



/* ================================
   LEFT SIDE
================================ */

.support-controls {
  padding-top: 6px;
}


.support-controls > h2 {
  margin:
    0 0 17px;

  font-size: 16px;

  font-weight: 600;

  line-height: 1;
}



/* AMOUNTS */

.support-amounts {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 13px;
}


.support-amounts button {
  height: 64px;

  border:
    1px solid
    rgba(61, 52, 47, .65);

  color: var(--ink);

  background:
    transparent;

  cursor: pointer;

  transition:
    color .22s ease,
    background .22s ease;
}


.support-amounts button.active {
  color: #fffaf5;

  background: var(--rose);
}


.support-amounts button strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 15px;

  font-weight: 600;
}


.support-amounts
.support-other {
  width: calc(
    (100% - 26px) / 3 + 18px
  );

  grid-column: 1;

  margin-top: 0;
}



/* QR PANEL */

.support-qr-section {
  margin-top: 54px;

  padding:
    31px 30px 27px;

  background:
    rgba(232, 225, 215, .58);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.support-qr-section.is-changing {
  opacity: .15;

  transform:
    translateY(3px);
}


.support-qr-copy span {
  display: block;

  color:
    rgba(134, 82, 90, .70);

  font-family:
    Georgia,
    serif;

  font-size: 7px;

  letter-spacing: .18em;
}


.support-qr-copy h3 {
  margin:
    11px 0 5px;

  font-size: 14px;

  font-weight: 500;
}


.support-qr-copy p {
  margin: 0;

  color:
    rgba(73, 62, 56, .60);

  font-size: 8px;
}



/* QR is deliberately smaller,
   like editorial material,
   not a giant payment UI. */

.support-qr {
  width: 270px;

  margin:
    28px auto 0;

  padding: 18px;

  background:
    rgba(255, 253, 249, .75);
}


.support-qr img {
  width: 100%;

  height: auto;

  display: block;
}


.support-payment-note {
  margin:
    24px 0 0;

  padding-top: 16px;

  border-top:
    1px solid var(--soft-line);

  color:
    rgba(71, 60, 55, .49);

  font-size: 7px;

  line-height: 1.9;
}


.support-payment-note strong {
  margin-right: 7px;

  color:
    rgba(71, 60, 55, .72);

  font-weight: 500;
}


.support-use-note {
  margin-top: 45px;

  padding:
    25px 29px;

  background:
    rgba(231, 225, 216, .58);

  font-size: 11px;

  line-height: 1.85;
}


.support-use-note p {
  margin: 0;
}



/* ================================
   RIGHT SIDE
================================ */

.support-editorial {
  position: relative;

  min-height: 630px;
}


.support-editorial h1 {
  max-width: 690px;

  margin:
    -4px 0 35px;

  color: var(--rose);

  font-family:
    "Songti SC",
    "STSong",
    Didot,
    "Bodoni 72",
    serif;

  font-size:
    clamp(54px, 5vw, 76px);

  font-weight: 400;

  letter-spacing: -.045em;

  line-height: 1.04;
}


.support-editorial h1 span,
.support-editorial h1 em {
  display: block;
}


.support-editorial h1 em {
  margin:
    -.02em 0;

  font-family:
    Didot,
    "Bodoni 72",
    Baskerville,
    "Times New Roman",
    serif;

  font-size: 1.02em;

  font-style: normal;

  font-weight: 400;

  letter-spacing: -.048em;
}


.support-editorial-copy {
  max-width: 650px;

  font-size:
    clamp(15px, 1.25vw, 18px);

  line-height: 1.85;
}


.support-editorial-copy p {
  margin:
    0 0 21px;
}


.support-ending {
  margin-top:
    29px !important;
}


.support-star {
  display: block;

  margin-top: 78px;

  color:
    rgba(135, 86, 94, .27);

  font-size: 46px;

  font-style: normal;
}



/* ================================
   TABLET
================================ */

@media (max-width: 1000px) {

  .support-main {
    width:
      calc(100vw - 54px);

    grid-template-columns:
      minmax(360px, .9fr)
      minmax(440px, 1.1fr);

    column-gap: 50px;
  }


  .support-editorial h1 {
    font-size:
      clamp(49px, 6vw, 68px);
  }

}



/* ================================
   MOBILE
================================ */

@media (max-width: 760px) {

  .support-header {
    height: 78px;

    padding:
      0 19px;
  }


  .support-header-left {
    display: none;
  }


  .support-brand {
    position: static;

    transform: none;

    text-align: left;
  }


  .support-brand strong {
    font-size: 29px;
  }


  .support-brand small {
    margin-top: 3px;

    font-size: 6px;
  }


  .support-return {
    font-size: 10px;
  }


  .support-main {
    width: auto;

    padding:
      48px 20px 60px;

    display: flex;

    flex-direction:
      column-reverse;

    gap: 53px;
  }


  .support-editorial {
    min-height: 0;
  }


  .support-editorial h1 {
    margin-bottom: 26px;

    font-size:
      clamp(42px, 12vw, 58px);

    line-height: 1.02;
  }


  .support-editorial-copy {
    font-size: 13px;

    line-height: 1.85;
  }


  .support-star {
    display: none;
  }


  .support-amounts {
    grid-template-columns:
      repeat(3, 1fr);

    gap: 8px;
  }


  .support-amounts button {
    height: 58px;
  }


  .support-amounts
  .support-other {
    width:
      calc((100% - 16px) / 3 + 12px);
  }


  .support-qr-section {
    margin-top: 39px;

    padding:
      24px 19px;
  }


  .support-qr {
    width:
      min(255px, 85%);
  }

}