:root {
  font-family: "Arial Narrow", Arial, sans-serif;
  color: #061d3d;
  background: #06172e;
  font-synthesis: none;
  scroll-behavior: smooth
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  min-width: 320px
}

button,
input {
  font: inherit
}

button {
  cursor: pointer
}

a {
  color: inherit
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #4ca5ff;
  outline-offset: 3px
}

.wrap {
  width: min(100% - 48px, 1360px);
  margin-inline: auto
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0
}

.nav {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(1, 15, 35, .94);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .22)
}

.nav-brand {
  display: none;
  text-decoration: none;
  color: #fff;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 22px;
  letter-spacing: .03em;
  padding-left: 22px
}

.nav-brand span {
  color: #9dff00
}

.nav-links {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 54px)
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 22px 0 18px;
  border-bottom: 4px solid transparent;
  white-space: nowrap
}

.nav-links a:hover,
.nav-links a.active {
  color: #a4ff00;
  border-color: #a4ff00
}

.menu-toggle {
  display: none
}

.hero {
  height: 680px;
  position: relative;
  overflow: hidden;
  background: #082c5b
}

.hero-art {
  position: absolute;
  inset: 0 36% 0 0;
  background-image: url('/images/invite.png');
  background-size: auto 190%;
  background-position: center top;
  background-repeat: no-repeat
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, #2a6aaf 0%, #073c7a 45%, #06172e 100%);
  opacity: .9
}

.hero-art {
  z-index: 1
}

.hero-shade {
  z-index: 2;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 39%, rgba(4, 30, 62, .62) 54%, rgba(2, 25, 55, .23) 100%), linear-gradient(0deg, #001229 0%, transparent 21%);
  pointer-events: none
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: linear-gradient(90deg, #fff 0 6%, transparent 6% 8%, #fff 8% 37%, transparent 37% 41%, #fff 41% 100%);
  clip-path: polygon(0 51%, 3% 20%, 7% 68%, 12% 44%, 19% 60%, 27% 27%, 34% 51%, 41% 30%, 49% 58%, 58% 35%, 66% 66%, 76% 32%, 86% 54%, 94% 27%, 100% 50%, 100% 100%, 0 100%)
}

.hero-inner {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.hero-copy {
  width: 52%;
  padding: 100px 0 55px 12px;
  text-align: left;
  text-shadow: 5px 6px 0 #031126, 0 3px 18px #00152e
}

.hero h1 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-family: "Road Rage", "Barlow Condensed", Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.025em;
  line-height: .92;
  transform: rotate(-4deg);
  filter: drop-shadow(5px 7px 0 #011326)
}

.hero h1 span {
  display: block;
  font-size: clamp(58px, 6vw, 105px);
  white-space: nowrap
}

.hero h1 .lime {
  color: #a3ff00;
  font-size: clamp(70px, 7.6vw, 136px)
}

.hero h1 em {
  font-size: 1.18em;
  font-style: inherit
}

.hero-subtitle {
  display: table;
  margin: 29px 0 14px 2%;
  padding: 5px 26px 8px;
  color: #031936;
  background: #a4ff00;
  font-family: "Road Rage", "Barlow Condensed", Arial, sans-serif;
  font-size: clamp(29px, 3vw, 50px);
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  transform: rotate(-4deg) skew(-7deg);
  text-shadow: none;
  clip-path: polygon(2% 4%, 99% 0, 97% 17%, 100% 39%, 97% 60%, 99% 93%, 5% 98%, 0 83%, 3% 55%, 0 26%)
}

.hero-date {
  margin: 20px 0 0 5%;
  font-family: "Barlow Condensed", Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(25px, 2.65vw, 42px);
  white-space: nowrap
}

.paper {
  position: relative;
  background-color: #f6f7f5;
  background-image: radial-gradient(#bcc8d0 0.55px, transparent .65px), linear-gradient(110deg, transparent 40%, rgba(12, 52, 91, .025) 50%, transparent 60%);
  background-size: 5px 5px, 100% 100%
}

.countdown {
  padding: 0 0 10px
}

.countdown-inner {
  display: flex;
  justify-content: center
}

.countdown-panel {
  margin-top: 0;
  width: min(830px, 82%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #03162e;
  color: white;
  clip-path: polygon(1% 1%, 98% 0, 100% 9%, 99% 96%, 1% 100%, 0 93%, 1% 80%, 0 8%);
  box-shadow: 0 8px 0 #071d34
}

.countdown-panel>div {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative
}

.countdown-panel>div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 17%;
  height: 66%;
  border-right: 1px solid #8ba2b6
}

.countdown-panel strong {
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 72px;
  line-height: .95;
  font-weight: 900
}

.countdown-panel span {
  font-family: "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 17px;
  margin-top: 5px
}

.details {
  padding: 32px 0 39px
}

.details::after,
.rsvp::after,
.messages::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 9px;
  z-index: 2;
  background: #0b3c7a;
  clip-path: polygon(0 20%, 2% 80%, 5% 15%, 10% 70%, 14% 30%, 21% 78%, 26% 14%, 31% 76%, 37% 18%, 42% 67%, 49% 20%, 54% 80%, 61% 12%, 68% 74%, 74% 17%, 82% 75%, 89% 25%, 95% 66%, 100% 20%, 100% 100%, 0 100%)
}

.details-grid {
  display: grid;
  grid-template-columns: 36% 1fr;
  align-items: center;
  gap: 40px
}

.brush-heading {
  position: relative;
  display: table;
  margin: 0 0 24px;
  font-family: "Road Rage", "Barlow Condensed", Arial, sans-serif;
  font-size: clamp(43px, 4vw, 65px);
  font-style: italic;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.05em;
  text-transform: uppercase;
  transform: skew(-7deg) rotate(-3deg);
  z-index: 0
}

.brush-heading::after {
  content: "";
  position: absolute;
  left: 4%;
  right: -6%;
  bottom: -9px;
  height: 8px;
  background: #9dff00;
  transform: rotate(-4deg) skew(-25deg);
  clip-path: polygon(0 30%, 100% 0, 94% 50%, 100% 84%, 8% 100%);
  z-index: -1
}

.section-intro p {
  max-width: 420px;
  margin: 0;
  font-size: 17px;
  line-height: 1.28
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0
}

.detail-list>div {
  padding: 4px 30px;
  min-height: 105px;
  border-left: 1px solid #b9c4d0
}

.detail-list dt {
  font-family: "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  margin-bottom: 13px
}

.detail-list dd {
  margin: 0;
  font-size: 19px;
  line-height: 1.3
}

.rsvp {
  padding: 39px 0 38px
}

.rsvp-grid {
  display: grid;
  grid-template-columns: 26% 42% 28%;
  gap: 2%;
  align-items: start
}

.rsvp .intro-lead {
  font-weight: 700;
  margin: 6px 0 14px
}

.rsvp-form {
  padding-top: 3px
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.rsvp-form label,
.rsvp-form legend {
  font-weight: 700;
  font-size: 16px
}

.rsvp-form input:not([type=radio]),
.updates-form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 39px;
  border: 1px solid #c6d3dd;
  border-radius: 3px;
  background: #fff;
  padding: 9px 11px;
  font-size: 16px;
  color: #061d3d
}

.rsvp-form input::placeholder,
.updates-form input::placeholder {
  color: #9bb9d4
}

.form-row-bottom {
  margin-top: 12px
}

.rsvp-form fieldset {
  border: 0;
  padding: 0;
  margin: 0
}

.rsvp-form fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  margin-top: 6px
}

.rsvp-form input[type=radio] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid #9ab6d2;
  border-radius: 50%;
  margin: 0;
  background: #fff
}

.rsvp-form input[type=radio]:checked {
  border: 6px solid #79cf00
}

.attendees-submit label span {
  display: block;
  font-weight: 400
}

.attendees-submit input {
  max-width: 190px
}

.button {
  border: 0;
  border-radius: 2px;
  background: #a3ff00;
  color: #06162d;
  min-height: 48px;
  padding: 11px 22px;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .13);
  transition: transform .15s, background .15s
}

.button:hover {
  background: #bcff43;
  transform: translateY(-2px)
}

.button span {
  font-size: 1.2em
}

.attendees-submit .button {
  width: 100%;
  margin-top: 12px
}

.form-note {
  margin: 8px 0 0;
  color: #617086;
  font-size: 12px
}

.response-panel {
  background: #03162f;
  color: #fff;
  padding: 25px 24px 19px;
  min-height: 242px;
  clip-path: polygon(0 2%, 97% 0, 100% 4%, 99% 98%, 2% 100%, 0 95%);
  text-align: center
}

.response-panel h3 {
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  margin: 0 0 15px
}

.response-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px
}

.response-stats>div:not(:last-child) {
  border-right: 1px solid #8ea6be
}

.response-stats strong,
.response-stats span {
  display: block
}

.response-stats strong {
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 43px;
  line-height: 1
}

.response-stats span {
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 3px
}

.response-panel .button {
  width: 100%;
  font-size: 17px
}

.response-panel small {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: #ced9e7
}

.dark-section {
  position: relative;
  color: #fff;
  background-color: #042654;
  background-image: radial-gradient(circle at 32% 17%, rgba(27, 109, 184, .48), transparent 35%), linear-gradient(120deg, rgba(0, 12, 35, .72), transparent 55%), radial-gradient(#4a7caf 0.65px, transparent .8px);
  background-size: auto, auto, 7px 7px;
  overflow: hidden
}

.upload {
  padding: 44px 0
}

.upload-grid {
  display: grid;
  grid-template-columns: 39% 1fr;
  gap: 4%;
  align-items: center;
  min-height: 240px
}

.upload-art {
  height: 230px;
  background-image: url('/images/siteMockup.png');
  background-repeat: no-repeat;
  background-size: calc(1536px * 1.45) calc(1024px * 1.45);
  background-position: calc(-12px * 1.45) calc(-674px * 1.45);
  filter: drop-shadow(6px 7px 2px rgba(0, 0, 0, .35))
}

.upload-copy .brush-heading {
  color: #fff;
  font-size: clamp(38px, 3.5vw, 60px);
  max-width: 750px;
  margin-bottom: 31px
}

.upload-copy p {
  font-size: 19px;
  line-height: 1.35;
  max-width: 650px;
  margin: 0 0 22px
}

.upload-copy .button {
  min-width: 330px
}

.messages {
  padding: 43px 0 34px
}

.messages-grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 4%
}

.messages .section-intro .button {
  margin-top: 20px;
  min-width: 245px
}

.posts-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end
}

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  width: 100%
}

.post-card {
  min-height: 206px;
  padding: 18px 20px 15px;
  border: 1px solid #d2dce6;
  border-radius: 4px;
  background: rgba(255, 255, 255, .67);
  box-shadow: 0 2px 8px rgba(10, 40, 73, .04);
  display: flex;
  flex-direction: column
}

.post-card h3 {
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 20px;
  margin: 0
}

.post-card time {
  font-size: 15px;
  color: #467db5;
  margin: 3px 0 12px
}

.post-card p {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 12px;
  flex: 1
}

.like-count {
  color: #4cb400;
  font-size: 17px
}

.like-count span {
  font-size: 29px;
  line-height: .5;
  vertical-align: -3px
}

.text-link {
  border: 0;
  background: none;
  color: #47a900;
  padding: 10px 2px 0;
  font-size: 16px
}

.text-link:hover {
  text-decoration: underline
}

.updates {
  padding: 34px 0 40px
}

.updates::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 38%;
  background: url('/images/invite.png') no-repeat right 39%;
  background-size: 850px auto;
  opacity: .6;
  mask-image: linear-gradient(90deg, transparent, #000 50%)
}

.updates-grid {
  position: relative;
  display: grid;
  grid-template-columns: 43% 1fr;
  gap: 5%;
  align-items: center
}

.updates .brush-heading {
  color: #fff;
  margin-bottom: 15px
}

.updates p {
  font-size: 17px;
  line-height: 1.25;
  margin: 0
}

.updates-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start
}

.updates-form input {
  margin-top: 0;
  min-height: 48px
}

.updates-form .form-note {
  grid-column: 1/-1;
  color: #cdd9e8
}

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 28px;
  max-width: min(92vw, 560px);
  padding: 14px 20px;
  background: #051b36;
  color: #fff;
  border: 2px solid #a3ff00;
  box-shadow: 0 10px 30px #0005;
  border-radius: 4px;
  line-height: 1.3;
  text-align: center;
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

.demo-dialog {
  border: 3px solid #a3ff00;
  background: #f7f8f5;
  color: #071f3d;
  padding: 30px;
  min-width: min(90vw, 420px);
  box-shadow: 0 20px 70px #0007
}

.demo-dialog::backdrop {
  background: #001428bc
}

.demo-dialog h2 {
  font-family: "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 32px;
  margin: 0 0 10px
}

.demo-dialog ul {
  columns: 2;
  margin: 18px 0 0;
  padding-left: 22px
}

.demo-dialog li {
  margin-bottom: 7px
}

.demo-label {
  color: #4e6680;
  margin: 0
}

.dialog-close {
  position: absolute;
  right: 10px;
  top: 7px;
  border: 0;
  background: transparent;
  color: #061d3d;
  font-size: 31px;
  line-height: 1
}

@media(max-width:1100px) {
  .hero {
    height: 580px
  }

  .hero-art {
    background-size: auto 190%
  }

  .hero-copy {
    width: 53%
  }

  .hero h1 span {
    font-size: clamp(51px, 6vw, 75px)
  }

  .hero h1 .lime {
    font-size: clamp(62px, 7vw, 90px)
  }

  .nav-links {
    gap: 23px
  }

  .nav-links a {
    font-size: 13px
  }

  .rsvp-grid {
    grid-template-columns: 24% 44% 28%;
    gap: 2%
  }

  .response-panel {
    padding: 19px 14px
  }

  .response-stats strong {
    font-size: 36px
  }

  .upload-art {
    background-size: 1536px 1024px;
    background-position: -12px -674px
  }

  .section-intro p {
    font-size: 15px
  }

  .post-card {
    padding: 14px
  }

  .post-card p {
    font-size: 15px
  }
}

@media(max-width:800px) {
  .wrap {
    width: min(100% - 32px, 720px)
  }

  .site-header .wrap {
    width: 100%
  }

  .nav {
    height: 54px
  }

  .nav-brand {
    display: block
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    background: none;
    border: 0;
    width: 54px;
    height: 54px;
    margin-right: 8px
  }

  .menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #fff
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    background: #03162e;
    padding: 8px 20px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 12px 20px #0005
  }

  .nav-links.open {
    display: flex
  }

  .nav-links a {
    font-size: 17px;
    padding: 13px 8px;
    border-bottom: 1px solid #284467
  }

  .nav-links a.active {
    border-color: #a3ff00
  }

  .hero {
    height: 610px
  }

  .hero-art {
    inset: 0;
    background-size: auto 155%;
    background-position: 44% top
  }

  .hero-shade {
    background: linear-gradient(0deg, #021733 0%, rgba(2, 23, 51, .78) 25%, transparent 63%), linear-gradient(90deg, rgba(0, 23, 49, .12), rgba(0, 23, 49, .06))
  }

  .hero-inner {
    align-items: flex-end;
    justify-content: center
  }

  .hero-copy {
    width: 100%;
    padding: 0 0 55px;
    text-align: center
  }

  .hero h1 {
    transform: rotate(-4deg);
    line-height: .91
  }

  .hero h1 span {
    font-size: clamp(56px, 9vw, 92px)
  }

  .hero h1 .lime {
    font-size: clamp(70px, 12vw, 115px)
  }

  .hero-subtitle {
    margin: 20px auto 10px;
    font-size: clamp(28px, 5.3vw, 45px)
  }

  .hero-date {
    margin: 12px 0 0;
    font-size: clamp(24px, 4.5vw, 38px)
  }

  .countdown-panel {
    width: 100%
  }

  .details-grid {
    grid-template-columns: 1fr;
    gap: 25px
  }

  .detail-list>div:first-child {
    border: 0;
    padding-left: 0
  }

  .rsvp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px
  }

  .rsvp-grid>.section-intro {
    grid-column: 1/-1
  }

  .response-panel {
    align-self: stretch
  }

  .upload-grid {
    grid-template-columns: 34% 1fr;
    gap: 4%
  }

  .upload-art {
    height: 180px;
    background-size: 1250px auto;
    background-position: -10px -548px
  }

  .upload-copy .brush-heading {
    font-size: 38px
  }

  .messages-grid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .posts {
    gap: 10px
  }

  .updates-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 20px
  }
}

@media(max-width:600px) {
  .wrap {
    width: min(100% - 28px, 430px)
  }

  .hero {
    height: 595px
  }

  .hero-art {
    background-size: auto 155%;
    background-position: 47% top
  }

  .hero-copy {
    padding-bottom: 59px
  }

  .hero h1 span {
    font-size: clamp(45px, 11.8vw, 62px)
  }

  .hero h1 .lime {
    font-size: clamp(62px, 15vw, 82px)
  }

  .hero-subtitle {
    font-size: clamp(26px, 7vw, 35px);
    padding: 5px 15px 7px
  }

  .hero-date {
    font-size: clamp(23px, 6vw, 32px);
    white-space: normal
  }

  .countdown {
    padding-bottom: 6px
  }

  .countdown-panel>div {
    min-height: 76px
  }

  .countdown-panel strong {
    font-size: clamp(32px, 10vw, 48px)
  }

  .countdown-panel span {
    font-size: 11px
  }

  .details {
    padding: 31px 0 34px
  }

  .brush-heading {
    font-size: 46px;
    margin-bottom: 25px
  }

  .details-grid {
    gap: 17px
  }

  .details .section-intro p {
    font-size: 14px
  }

  .detail-list>div {
    padding: 3px 10px;
    min-height: 72px
  }

  .detail-list dt {
    font-size: 17px;
    margin-bottom: 8px
  }

  .detail-list dd {
    font-size: 14px
  }

  .rsvp {
    padding: 34px 0
  }

  .rsvp-grid {
    grid-template-columns: 1fr;
    gap: 19px
  }

  .rsvp-grid>.section-intro {
    grid-column: auto
  }

  .rsvp .intro-lead {
    margin: 0 0 8px
  }

  .rsvp-form {
    display: block
  }

  .form-row {
    gap: 12px
  }

  .rsvp-form label,
  .rsvp-form legend {
    font-size: 14px
  }

  .rsvp-form fieldset label {
    font-size: 14px
  }

  .rsvp-form input:not([type=radio]) {
    min-height: 43px
  }

  .rsvp-form .button {
    font-size: 16px
  }

  .response-panel {
    min-height: auto;
    padding: 17px 18px
  }

  .response-panel h3 {
    font-size: 16px;
    margin-bottom: 10px
  }

  .response-stats {
    margin-bottom: 12px
  }

  .response-stats strong {
    font-size: 35px
  }

  .response-panel small {
    margin-top: 8px
  }

  .upload {
    padding: 28px 0 34px
  }

  .upload-grid {
    display: block
  }

  .upload-art {
    display: none
  }

  .upload-copy .brush-heading {
    font-size: clamp(34px, 8vw, 45px);
    max-width: 390px
  }

  .upload-copy p {
    font-size: 16px
  }

  .upload-copy .button {
    min-width: 0;
    width: 100%;
    font-size: 16px
  }

  .messages {
    padding: 35px 0 28px
  }

  .messages .section-intro p {
    font-size: 14px
  }

  .messages .section-intro .button {
    width: 100%;
    margin-top: 14px
  }

  .posts-area {
    margin-top: 2px
  }

  .posts {
    grid-template-columns: 1fr
  }

  .post-card {
    min-height: 0;
    padding: 14px 16px
  }

  .post-card h3 {
    font-size: 18px
  }

  .post-card time {
    font-size: 13px;
    margin: 2px 0 8px
  }

  .post-card p {
    font-size: 15px;
    margin-bottom: 10px
  }

  .updates {
    padding: 32px 0 38px
  }

  .updates::before {
    width: 100%;
    opacity: .28
  }

  .updates-grid {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .updates .brush-heading {
    font-size: 45px
  }

  .updates p {
    font-size: 14px
  }

  .updates-form {
    grid-template-columns: 1fr auto;
    gap: 8px
  }

  .updates-form input {
    min-width: 0
  }

  .updates-form .button {
    font-size: 14px;
    padding: 9px 12px
  }
}

@media(max-width:360px) {
  .hero {
    height: 560px
  }

  .hero-art {
    background-size: auto 151%;
    background-position: 47% top
  }

  .hero h1 span {
    font-size: 42px
  }

  .hero h1 .lime {
    font-size: 58px
  }

  .hero-date {
    font-size: 22px
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .form-row-bottom {
    grid-template-columns: 1fr 1fr
  }

  .attendees-submit input {
    max-width: 100%
  }

  .detail-list dt {
    font-size: 15px
  }

  .detail-list dd {
    font-size: 13px
  }

  .updates-form {
    grid-template-columns: 1fr
  }

  .updates-form .button {
    width: 100%
  }
}

/* The invitation supplies the clean portrait; fade its lower edge before its printed lettering. */
.hero::before {
  background-image: linear-gradient(90deg, rgba(4, 26, 58, .14), rgba(4, 26, 58, .72) 67%, rgba(4, 26, 58, .87)), url('/images/invite.png');
  background-size: cover, 100% auto;
  background-position: center, center top;
  background-repeat: no-repeat;
  opacity: 1
}

html,
body {
  overflow-x: clip
}

.hero-art {
  mask-image: linear-gradient(to bottom, #000 0%, #000 81%, transparent 100%)
}

.detail-list>div:first-child dd {
  max-width: 135px
}

.updates::before {
  display: block;
  width: 38%;
  background-image: url('/images/skyline-crop.png');
  background-size: cover;
  background-position: center 10%;
  opacity: .65;
  mask-image: linear-gradient(90deg, transparent, #000 45%)
}

@media(max-width:800px) {
  .hero::before {
    background-image: radial-gradient(circle at 50% 20%, #21538c, #061a39 80%)
  }

  .hero-art {
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 91%)
  }
}

@media(max-width:600px) {
  .updates::before {
    width: 55%;
    opacity: .35
  }
}

@media(max-width:360px) {
  .rsvp-form .button {
    font-size: 14px;
    padding-inline: 6px;
    white-space: nowrap
  }
}

/* Road Rage has compact glyphs, so size the display lines for the invite's scale. */
.hero h1 span:nth-child(2) {
  margin-top: -.22em
}

.hero h1 span {
  font-size: clamp(92px, 10.2vw, 155px)
}

.hero h1 .lime {
  font-size: clamp(115px, 14vw, 205px)
}

.hero-subtitle {
  font-size: clamp(38px, 4.4vw, 65px)
}

.brush-heading {
  font-weight: 400;
  font-size: clamp(70px, 6.8vw, 102px);
  letter-spacing: -.015em
}

.upload-copy .brush-heading {
  font-size: clamp(55px, 5vw, 72px)
}

@media(max-width:1100px) {
  .hero h1 span {
    font-size: clamp(80px, 10vw, 112px)
  }

  .hero h1 .lime {
    font-size: clamp(110px, 13vw, 145px)
  }

  .hero-subtitle {
    font-size: clamp(36px, 4.8vw, 50px)
  }

  .brush-heading {
    font-size: clamp(66px, 7vw, 80px)
  }
}

@media(max-width:800px) {
  .hero h1 span {
    font-size: clamp(78px, 13vw, 104px)
  }

  .hero h1 .lime {
    font-size: clamp(105px, 18vw, 145px)
  }

  .hero-subtitle {
    font-size: clamp(37px, 6.5vw, 52px)
  }

  .brush-heading {
    font-size: clamp(70px, 9vw, 82px)
  }
}

@media(max-width:600px) {
  .hero h1 span {
    font-size: clamp(65px, 18vw, 86px)
  }

  .hero h1 .lime {
    font-size: clamp(96px, 26vw, 115px)
  }

  .hero-subtitle {
    font-size: clamp(34px, 9vw, 42px)
  }

  .brush-heading {
    font-size: clamp(70px, 22vw, 88px)
  }

  .upload-copy .brush-heading {
    font-size: clamp(53px, 17vw, 68px)
  }
}

@media(max-width:360px) {
  .hero h1 span {
    font-size: 65px
  }

  .hero h1 .lime {
    font-size: 96px
  }

  .hero-subtitle {
    font-size: 34px
  }

  .brush-heading {
    font-size: 70px
  }

  .upload-copy .brush-heading {
    font-size: 53px
  }
}

/* Keep the headline, banner, and date together as one compact hero lockup. */
.hero-subtitle {
  margin-top: 8px;
  margin-bottom: 0
}

.hero-date {
  margin-top: 5px
}

/* Let the portrait breathe on narrower screens. */
@media(max-width:800px) {
  .hero h1 span {
    font-size: clamp(62px, 10.5vw, 84px)
  }

  .hero h1 .lime {
    font-size: clamp(82px, 14vw, 112px)
  }

  .hero-subtitle {
    font-size: clamp(31px, 5.4vw, 42px)
  }

  .hero-date {
    font-size: clamp(23px, 4vw, 32px)
  }
}

@media(max-width:600px) {
  .hero h1 span {
    font-size: clamp(51px, 14.5vw, 70px)
  }

  .hero h1 .lime {
    font-size: clamp(76px, 20vw, 94px)
  }

  .hero-subtitle {
    font-size: clamp(28px, 7.2vw, 34px)
  }

  .hero-date {
    font-size: clamp(21px, 5.5vw, 28px)
  }
}

/* Underline each rendered line of a heading, including headings that wrap. */
.brush-heading {
  text-decoration: underline;
  text-decoration-color: #9dff00;
  text-decoration-thickness: .065em;
  text-underline-offset: .06em;
  text-decoration-skip-ink: none
}

.brush-heading::after {
  display: none
}

/* Extend the invitation's clouds across desktop and blend the portrait edge. */
@media(min-width:801px) {
  .hero::before {
    background-image: linear-gradient(90deg, rgba(4, 26, 58, .12), rgba(4, 26, 58, .38) 67%, rgba(4, 26, 58, .52)), url('/images/invite.png');
    background-size: cover, 300% auto;
    background-position: center, left top
  }

  .hero-art {
    mask-image: linear-gradient(to right, #000 0%, #000 72%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 81%, transparent 100%);
    mask-composite: intersect
  }

  .hero-shade {
    background: linear-gradient(90deg, transparent 0%, rgba(4, 30, 62, .12) 50%, rgba(2, 25, 55, .22) 100%), linear-gradient(0deg, #001229 0%, transparent 21%)
  }
}

/* Use the supplied photos in place of the mockup's placeholder collage. */
.upload-art {
  position: relative;
  width: min(100%, 440px);
  height: 260px;
  background: none;
  filter: none
}

.upload-photo {
  position: absolute;
  display: block;
  object-fit: cover;
  border: 5px solid #f6f7f5;
  box-shadow: 0 10px 20px rgba(0, 11, 30, .48)
}

.upload-photo-candle {
  left: 2%;
  top: 11%;
  width: 62%;
  height: 77%;
  object-position: 50% 43%;
  transform: rotate(-5deg)
}

.upload-photo-friends {
  right: 2%;
  top: 2%;
  width: 52%;
  height: 52%;
  object-position: center;
  transform: rotate(6deg)
}

.upload-photo-cutout {
  position: absolute;
  right: 3%;
  bottom: -4%;
  height: 75%;
  width: auto;
  filter: drop-shadow(5px 9px 4px rgba(0, 11, 30, .55))
}

@media(max-width:800px) {
  .upload-grid {
    grid-template-columns: 1fr
  }

  .upload-art {
    width: min(100%, 460px);
    height: 250px;
    margin: 0 auto 24px
  }
}

@media(max-width:600px) {
  .upload-art {
    display: block;
    width: min(100%, 400px);
    height: 215px;
    margin-bottom: 20px
  }

  .upload-photo {
    border-width: 4px
  }
}

/* Keep the corn to the left of the headline on desktop and laptop widths. */
@media(min-width:801px) {
  .hero-art {
    background-position: calc(50% - 100px) top
  }

  .hero-copy {
    width: 45%
  }
}

@media(min-width:801px) and (max-width:1100px) {
  .hero-art {
    background-size: auto 170%;
    background-position: calc(50% - 9px) top;
    mask-image: linear-gradient(to right, #000 0%, #000 94%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 81%, transparent 100%)
  }

  .hero-copy {
    width: 40%
  }
}

@media(max-width:800px) {
  .hero-art {
    background-size: 120% auto;
    background-position: center top;
    mask-image: linear-gradient(to bottom, #000 0%, #000 70vw, transparent 85vw)
  }
}

/* Keep the event mark in the header and give the date breathing room. */
@media(min-width:801px) {
  .nav-brand {
    display: block
  }

  .nav-links {
    width: auto;
    flex: 1
  }
}

.hero-date {
  margin-top: 16px
}

@media(max-width:800px) {
  .hero-date {
    margin-top: 10px
  }
}

@media(min-width:601px) and (max-width:800px) {
  .hero {
    height: max(610px, 100vw)
  }
}

@media(min-width:560px) and (max-width:600px) {
  .hero {
    height: clamp(595px, calc(62.5vw + 245px), 620px)
  }
}

/* Let the hero artwork show through the navigation bar. */
.nav {
  background: rgba(1, 15, 35, .2);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08)
}

/* Use the clean extended scene throughout; crop desktop before Tuss meets the water. */
@media(min-width:801px) {
  .hero {
    height: min(680px, 47vw)
  }

  .hero::before {
    background: #082c5b
  }

  .hero-art {
    inset: 0;
    background-image: url('/images/inviteExtend.png');
    background-size: cover;
    background-position: left top;
    mask-image: none;
    mask-composite: initial
  }

  .hero-shade {
    background: linear-gradient(90deg, transparent 0%, transparent 43%, rgba(0, 18, 41, .2) 61%, rgba(0, 18, 41, .32) 100%), linear-gradient(to top, rgba(0, 18, 41, .45), transparent 24%)
  }
}

@media(min-width:801px) and (max-width:1100px) {
  .hero { height: clamp(500px, 50vw, 550px) }
  .hero-art { mask-image: linear-gradient(to bottom, #000 0%, #000 67%, transparent 86%) }
  .hero-copy { padding-top: 60px; padding-bottom: 35px }
  .hero h1 span { font-size: clamp(58px, 7vw, 77px) }
  .hero h1 .lime { font-size: clamp(75px, 9vw, 99px) }
  .hero-subtitle { font-size: clamp(31px, 3.6vw, 40px) }
  .hero-date { font-size: clamp(22px, 2.7vw, 30px) }
}

/* The mobile artwork must fade to navy before its hoodie/water edge. */
@media(max-width:800px) {
  .hero::before {
    background: #021733
  }

  .hero-art {
    background-image: url('/images/inviteExtend.png');
    background-size: auto clamp(500px, 145vw, 620px);
    background-position: left top;
    mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 60%)
  }
}

@media(max-width:600px) {
  .hero { height: clamp(595px, calc(100vw + 210px), 650px) }
}