* {
  box-sizing: border-box;
}


:root {

  --black:
    #050605;

  --room-top:
    #20231f;

  --room-mid:
    #151815;

  --room-bottom:
    #0c0e0c;

  --paper:
    #d7d2c6;

  --text:
    #e9ece7;

  --soft:
    #a8aea7;

  --muted:
    #727972;

  --line:
    #343934;

  --stamp:
    #9f554d;

  --mono:
    "Cascadia Code",
    "JetBrains Mono",
    "IBM Plex Mono",
    Consolas,
    monospace;

}


html {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;

  background: #050605;
  color-scheme: dark;

}


body {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100vh;

  touch-action: pan-y;

  background:
    linear-gradient(
      180deg,
      var(--room-top),
      var(--room-mid) 54%,
      var(--room-bottom)
    );

  color:
    var(--text);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* =========================================================
   TEXTURE
   ========================================================= */

.grain {

  position: fixed;

  z-index: 10000;

  inset: 0;

  pointer-events: none;

  opacity: .065;

  background-image:
    radial-gradient(
      rgba(255,255,255,.22) .45px,
      transparent .7px
    );

  background-size:
    5px 5px;

}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(255,222,142,.065),
      transparent 52%
    );

}


body::after {

  content: "";

  position: fixed;

  left: -10%;
  right: -10%;
  top: 70%;

  height: 1px;

  background:
    rgba(76,83,76,.34);

  pointer-events: none;

}


/* =========================================================
   REGISTER
   ========================================================= */

.register {

  position: relative;

  z-index: 20;

  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    calc(
      18px +
      env(safe-area-inset-top)
    )
    26px
    14px;

  font-family:
    var(--mono);

}


.back-link {

  color:
    #b8beb8;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    .12em;

  text-decoration:
    none;

  transition:
    color .15s ease;

}


.back-link:hover,
.back-link:focus-visible {

  color:
    #ffffff;

}


.register-code {

  color:
    #646a64;

  font-size:
    7px;

  letter-spacing:
    .12em;

  white-space:
    nowrap;

}


/* =========================================================
   STAGE
   ========================================================= */

.support-stage {

  position: relative;

  z-index: 5;

  width: 100%;

  min-height:
    calc(
      100dvh -
      62px
    );

  display: grid;

  justify-items: center;
  align-items: start;

  padding:
    50px
    24px
    calc(
      70px +
      env(safe-area-inset-bottom)
    );

}





/* =========================================================
   SUPPORT RECORD
   ========================================================= */

.support-record {
  position: relative;

  width:
    min(
      820px,
      100%
    );

  margin: 0 auto;

  padding:
    34px
    38px
    30px;

  background:
    linear-gradient(
      180deg,
      rgba(27,31,27,.96),
      rgba(15,18,15,.98)
    );

  border:
    1px solid
    rgba(93,101,93,.72);

  box-shadow:
    0 45px 120px
    rgba(0,0,0,.48),
    inset 0 1px
    rgba(255,255,255,.025);

}


.support-record::before {

  content: "";

  position: absolute;

  inset: 10px;

  pointer-events: none;

  border:
    1px solid
    rgba(255,255,255,.025);

}


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

.record-meta {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  color:
    #747b74;

  font-family:
    var(--mono);

  font-size:
    7px;

  letter-spacing:
    .13em;

}


.record-status {

  color:
    #a76b63;

  font-weight:
    700;

}


.record-rule {

  width: 100%;
  height: 1px;

  margin:
    18px
    0
    34px;

  background:
    rgba(107,115,107,.45);

}


/* =========================================================
   TITLE
   ========================================================= */

.kicker {

  margin:
    0
    0
    15px;

  color:
    #7d857d;

  font-family:
    var(--mono);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .16em;

}


h1 {

  max-width:
    650px;

  margin:
    0;

  color:
    #edf0eb;

  font-size:
    clamp(
      46px,
      8vw,
      82px
    );

  font-weight:
    600;

  line-height:
    .92;

  letter-spacing:
    -.055em;

}


/* =========================================================
   MISSION
   ========================================================= */

.mission {

  max-width:
    650px;

  margin-top:
    38px;

  color:
    #b7bdb6;

  font-size:
    15px;

  line-height:
    1.72;

}


.mission p {

  margin:
    0
    0
    18px;

}


/* =========================================================
   BELIEF
   ========================================================= */

.belief {

  position: relative;

  max-width:
    650px;

  margin-top:
    38px;

  padding:
    22px
    24px
    23px;

  background:
    rgba(215,210,198,.055);

  border:
    1px solid
    rgba(167,174,165,.22);

}


.belief-label {

  display: block;

  margin-bottom:
    12px;

  color:
    #8d958d;

  font-family:
    var(--mono);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    .16em;

}


.belief p {

  margin:
    0;

  color:
    #d0d4ce;

  font-size:
    15px;

  line-height:
    1.65;

}


/* =========================================================
   PAYPAL
   ========================================================= */

.support-action {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    28px;

  margin-top:
    48px;

  padding-top:
    30px;

  border-top:
    1px solid
    rgba(100,108,100,.42);

}


.action-copy {

  min-width:
    0;

}


.action-copy span {

  display:
    block;

  margin-bottom:
    8px;

  color:
    #737b73;

  font-family:
    var(--mono);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    .15em;

}


.action-copy strong {

  display:
    block;

  color:
    #dfe3dd;

  font-size:
    17px;

  font-weight:
    500;

}


.paypal-button {

  flex:
    0 0 auto;

  min-width:
    210px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;

  padding:
    16px
    18px;

  background:
    var(--paper);

  border:
    1px solid
    #747970;

  color:
    #171917;

  font-family:
    var(--mono);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .09em;

  text-decoration:
    none;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.22);

  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;

}


.paypal-button:hover,
.paypal-button:focus-visible {

  background:
    #ebe7dd;

  transform:
    translateY(-1px);

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.28);

}


/* =========================================================
   SUPPORTER STRIP INFO
   ========================================================= */

.supporter-area {

  margin-top:
    54px;

  padding:
    27px
    0
    3px;

  border-top:
    1px solid
    rgba(100,108,100,.42);

}


.supporter-heading {

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    20px;

  font-family:
    var(--mono);

}


.supporter-heading span {

  color:
    #cbd0ca;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .15em;

}


.supporter-heading small {

  color:
    #666d66;

  font-size:
    7px;

  letter-spacing:
    .11em;

}


.supporter-area p {

  max-width:
    620px;

  margin:
    0
    0
    10px;

  color:
    #90978f;

  font-size:
    13px;

  line-height:
    1.65;

}


.contact-link {

  width:
    fit-content;

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  margin-top:
    22px;

  color:
    #dfe4dc;

  font-family:
    var(--mono);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .05em;

  text-decoration:
    none;

  border-bottom:
    1px solid
    rgba(190,198,189,.38);

  padding-bottom:
    5px;

}


.contact-link:hover,
.contact-link:focus-visible {

  color:
    #ffffff;

  border-color:
    #ffffff;

}


/* =========================================================
   FOOTER
   ========================================================= */

.record-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    48px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(100,108,100,.30);

  color:
    #5f665f;

  font-family:
    var(--mono);

  font-size:
    6px;

  letter-spacing:
    .10em;

}


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

@media
(max-width:700px) {

  .register {

    padding-left:
      16px;

    padding-right:
      16px;

  }


  .register-code {

    display:
      none;

  }


  .support-stage {

    display:
      block;

    padding:
      25px
      12px
      calc(
        34px +
        env(safe-area-inset-bottom)
      );

  }


  .support-record {

    width:
      100%;

    padding:
      24px
      20px
      24px;

  }


  .record-meta {

    align-items:
      flex-start;

  }


  h1 {

    font-size:
      clamp(
        44px,
        16vw,
        64px
      );

  }


  .mission {

    margin-top:
      30px;

    font-size:
      14px;

  }


  .belief {

    margin-top:
      30px;

    padding:
      19px;

  }


  .belief p {

    font-size:
      14px;

  }


  .support-action {

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .paypal-button {

    width:
      100%;

    min-width:
      0;

  }


  .supporter-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      7px;

  }


  .contact-link {

    font-size:
      9px;

  }


  .record-footer {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      8px;

  }

}