/* ---------- Tokens ---------- */
:root {
  --cream-50: #FBF1D7;
  --cream-100: #F5E9D0;
  --cream-300: #E8D6A8;
  --ink-900: #1A1208;
  --ink-700: #2B1E10;
  --ink-500: #4A3520;
  --flag-red: #B22234;
  --flag-navy: #0F1B3D;
  --font-display: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
  --font-serif: "Cinzel", "Times New Roman", serif;
  --font-script: "Pinyon Script", "Apple Chancery", cursive;
  --font-script-bold: "Tangerine", cursive;
  --font-body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --ease-quill: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-ink: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--cream-100);
  line-height: 1.55;
  min-height: 100dvh;
  overflow-x: hidden
}

img,
svg {
  display: block;
  max-width: 100%
}

button {
  font: inherit;
  cursor: pointer
}

a {
  color: inherit
}

:focus-visible {
  outline: 2px solid var(--flag-red);
  outline-offset: 3px;
  border-radius: 2px
}

/* Page bg */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, var(--cream-50) 0%, var(--cream-100) 50%, var(--cream-300) 100%)
}

.page-bg__fiber,
.page-bg__grain {
  position: absolute;
  inset: -10%;
  filter: url(#paperFiber);
  opacity: .35;
  mix-blend-mode: multiply
}

.page-bg__grain {
  filter: url(#paperGrain);
  opacity: .15;
  mix-blend-mode: multiply
}

/* Layout */
.layout {
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  position: relative
}

.content-col {
  position: relative;
  width: 100%;
  max-width: 820px;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3.5rem) 0;
  /* background: var(--cream-100); */
  min-width: 0
}

/* Hero */
.hero {
  text-align: center;
  padding: 1rem 0 2rem;
  color: var(--ink-900)
}

.hero__eyebrow {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--flag-red);
  margin: 0 0 1.5rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease-quill) .2s forwards
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 1rem;
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--flag-navy)
}

.hero__title-line {
  display: block;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  opacity: 0;
  animation: fadeUp 1s var(--ease-quill) forwards
}

.hero__title-line:nth-child(1) {
  animation-delay: .3s
}

.hero__title-line:nth-child(2) {
  animation-delay: .5s
}

.hero__title-line:nth-child(3) {
  animation-delay: .7s
}

.hero__title-line--accent {
  font-family: var(--font-script-bold);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  color: var(--flag-red);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  margin-top: .4rem;
  text-shadow: 0 2px 0 rgba(178, 34, 52, .15);
  transform: rotate(-2deg);
  display: inline-block
}

.hero__subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(.85rem, 1.4vw, 1.1rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 1.25rem auto 2rem;
  max-width: 50ch;
  opacity: 0;
  animation: fadeUp 1s var(--ease-quill) 1s forwards
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Counter */
.counter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: 1rem auto 2rem;
  padding: 1.25rem 2rem;
  position: relative;
  opacity: 0;
  animation: fadeUp 1s var(--ease-quill) 1.2s forwards
}

.counter::before,
.counter::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--flag-navy) 30%, var(--flag-navy) 70%, transparent);
  opacity: .5
}

.counter::before {
  top: 0
}

.counter::after {
  bottom: 0
}

.counter__label {
  font-family: var(--font-serif);
  font-size: .7rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--flag-red)
}

.counter__odometer {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  color: var(--flag-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .02em
}

.counter__odometer .digit {
  position: relative;
  display: inline-block;
  width: .65em;
  height: 1em;
  overflow: hidden;
  vertical-align: top
}

.counter__odometer .digit-track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: transform 2.6s var(--ease-quill)
}

.counter__odometer .digit-track span {
  display: block;
  height: 1em;
  text-align: center
}

.counter__odometer .comma {
  width: .4em;
  text-align: center;
  color: var(--flag-red)
}

.counter__suffix {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .88rem;
  color: var(--ink-700);
  letter-spacing: .04em
}

a.hero__invitation {
  font-family: var(--font-body) !important;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  opacity: 0;
  animation: fadeUp 1s var(--ease-quill) 1.4s forwards;
  display: block;
  margin: auto;
  background-color: var(--flag-navy);
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 50px;
  max-width: 63%;
}


.hero__scroll-hint {
  margin-top: 2.5rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-serif);
  font-size: .62rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--flag-navy);
  opacity: 0;
  animation: hintPulse 2.4s ease-in-out 2s infinite
}

@keyframes hintPulse {

  0%,
  100% {
    opacity: .4;
    transform: translateY(0)
  }

  50% {
    opacity: .9;
    transform: translateY(6px)
  }
}

.stars-rule {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 2rem auto;
  opacity: .85
}

.stars-rule span {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--flag-navy);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

/* Parchment */
.parchment {
  position: relative;
  margin: 0 auto;
  max-width: 720px
}

.parchment__content {
  position: relative;
  background: linear-gradient(180deg, rgba(248, 241, 224, .6) 0%, rgba(245, 233, 208, .3) 100%);
  border-top: 1px solid rgba(15, 27, 61, .15);
  border-bottom: 1px solid rgba(15, 27, 61, .15);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  border-radius: 2px;
  box-shadow: 0 4px 30px -10px rgba(20, 10, 2, .12)
}

.parchment__dateline {
  font-family: var(--font-serif);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-700);
  margin: 0 0 .5rem
}

.parchment__heading {
  font-family: var(--font-script-bold);
  font-weight: 700;
  /* font-size: clamp(1.5rem, 3.5vw, 2.3rem); */
  text-align: center;
  margin: 0 0 1rem;
  letter-spacing: .04em;
  line-height: 1.15;
  color: var(--flag-navy);
}

.parchment__ornament-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.25rem auto 4.25em;
  max-width: 80%
}

.parchment__ornament-row img {
  width: 56px;
  height: auto;
  opacity: .85
}

.ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--flag-navy) 30%, var(--flag-navy) 70%, transparent);
  opacity: .4
}

.parchment__script {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink-900);
  max-width: 56ch;
  margin: 0 auto;
  text-align: left;
  position: relative
}

.parchment__script p {
  margin: 0 0 1.4rem
}

.parchment__script .dropcap {
  font-family: var(--font-script-bold);
  font-weight: 700;
  font-size: 5em;
  float: left;
  line-height: .85;
  margin: .05em 0.3em 0 0;
  color: var(--flag-red);
}

.parchment__call {
  font-family: var(--font-script-bold);
  text-align: center;
  font-style: italic;
  margin-top: 1.75rem;
  color: var(--ink-700);
  font-size: 33px;
}

.parchment__call em {
  color: var(--flag-red);
  font-weight: 700
}

/* Signatures */
.signatures {
  margin: 2rem auto 1.5rem;
  max-width: 640px;
  position: relative
}

.signatures__title {
  font-family: var(--font-serif);
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  font-weight: 500;
  text-align: center;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 0 1.5rem;
  line-height: normal;
}

.signatures__title-em {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .88rem;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--ink-500)
}

.signatures__list {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .3rem 2.5rem;
  position: relative
}

.signatures__list li {
  font-family: var(--font-script-bold);
  font-size: clamp(1.3rem, 2.2vw, 2.5rem);
  line-height: 1.4;
  color: var(--ink-900);
  text-align: center;
  position: relative;
  padding: .4rem .2rem;
  border-bottom: 1px solid rgba(15, 27, 61, .18);
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center
}

.signatures__list li .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px) rotate(var(--r, 0deg));
  animation: inkIn .32s var(--ease-ink) forwards
}

@keyframes inkIn {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0)
  }
}

.signatures__list li.is-new {
  background: linear-gradient(180deg, rgba(178, 34, 52, 0) 0%, rgba(178, 34, 52, .1) 50%, rgba(178, 34, 52, 0) 100%);
  border-bottom-color: var(--flag-red)
}

.signatures__yours {
  position: relative;
  margin: 4rem auto 0;
  max-width: 480px;
  text-align: center
}

.signatures__yours-rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-700) 20%, var(--ink-700) 80%, transparent);
  opacity: .4;
  margin: 0 auto .5rem;
  width: 70%
}

.signatures__yours-inner {
  position: relative;
  display: inline-block;
  padding: .4rem 1rem
}

.signatures__yours-label {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: .5rem
}

.signatures__yours-name {
  display: block;
  font-family: var(--font-script-bold);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  color: var(--ink-900);
  min-height: 1.6em;
  line-height: 1.2
}

.signatures__yours-name .ychar {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px) rotate(var(--r, 0deg));
  animation: inkIn .34s var(--ease-ink) forwards
}

.signatures__yours-quill {
  position: absolute;
  right: -32px;
  bottom: 32px;
  width: 28px;
  height: 28px;
  opacity: .55;
  transform: rotate(-30deg);
  transition: opacity .3s var(--ease-quill)
}

.signatures__yours-quill.is-active {
  opacity: .95
}

/* Form */
.signing {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 560px;
  padding: 2.5rem clamp(1.25rem, 3vw, 2.5rem) 1.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(15, 27, 61, .04) 0%, rgba(15, 27, 61, 0) 100%);
  border-top: 1px solid rgba(15, 27, 61, .18);
  border-bottom: 0px solid rgba(15, 27, 61, .18);
  border-radius: 2px
}

.signing__seal {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  background: var(--cream-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  border: 1px solid rgba(15, 27, 61, .15)
}

.signing__seal img {
  width: 64px;
  height: 64px
}

.signing__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--flag-navy);
  margin: 0 0 .4rem
}

.signing__sub {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-700);
  font-size: 1rem;
  margin: 0 0 1.5rem
}

.signing__fine {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .78rem;
  color: var(--ink-500);
  margin: 1.5rem 0 0;
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.5
}

.declaration-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  margin: 0 auto;
  max-width: 480px
}

.declaration-form .field {
  margin: 0;
  padding: 0
}

.declaration-form .field-row {
  display: flex;
  gap: 1rem
}

.declaration-form .field--half {
  flex: 1
}

.declaration-form .field--state {
  flex: 0 0 8rem
}

.declaration-form .field--zip {
  max-width: 12rem
}

.declaration-form input[type="text"],
.declaration-form input[type="email"] {
  width: 100%;
  background: rgba(255, 248, 226, .5);
  border: none;
  border-bottom: 1.5px solid var(--ink-700);
  border-radius: 0;
  padding: .6rem .4rem;
  font-family: var(--font-script-bold) !important;
  font-size: 2rem;
  color: var(--ink-900);
  transition: border-color .3s var(--ease-quill), background .3s var(--ease-quill);
  line-height: normal;
}

.declaration-form input[type="text"]:focus,
.declaration-form input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--flag-red);
  background: rgba(255, 248, 226, .85)
}

.declaration-form label {
  font-family: var(--font-serif);
  font-size: .65rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-700);
  font-weight: 500
}

.declaration-form .field--check {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .25rem;
  padding: .25rem 0
}

.declaration-form .field--check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--flag-navy);
  cursor: pointer;
  flex-shrink: 0
}

.declaration-form .field--check label {
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--ink-700);
  font-weight: 400;
  cursor: pointer;
  line-height: 1.4;
  margin: 0
}

.declaration-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  align-self: center;
  margin: .5rem auto 0;
  padding: .9rem 2.2rem;
  background: var(--flag-navy);
  color: var(--cream-50);
  border: 1px solid var(--flag-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: all .3s var(--ease-quill)
}

.declaration-form .submit:hover {
  background: var(--flag-red);
  border-color: var(--flag-red);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(178, 34, 52, .6)
}

.declaration-form .submit:disabled {
  opacity: .5;
  pointer-events: none
}

.declaration-form .form-status {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .8rem;
  color: var(--flag-red);
  text-align: center;
  min-height: 1.2em;
  margin: .25rem 0 0
}

.declaration-form .field.is-error input {
  border-bottom-color: var(--flag-red)
}

.signing.is-signed .signing__title,
.signing.is-signed .signing__sub,
.signing.is-signed .signing__fine {
  display: none
}

.signing.is-signed .declaration-form {
  display: none
}

.thank-you {
  font-family: var(--font-script);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.3;
  color: var(--ink-900);
  text-align: center;
  margin: .5rem auto 1rem;
  max-width: 30ch
}

.thank-you__name {
  color: var(--flag-red);
  font-weight: 500
}

.thank-you__sub {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-700);
  font-size: 1rem;
  margin: 0 auto;
  max-width: 40ch
}

.thank-you__redirect {
  font-family: var(--font-serif);
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--flag-navy);
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem
}

.thank-you__redirect::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--flag-navy);
  animation: linePulse 1.4s ease-in-out infinite
}

@keyframes linePulse {

  0%,
  100% {
    transform: scaleX(.4);
    transform-origin: left
  }

  50% {
    transform: scaleX(1);
    transform-origin: left
  }
}

/* Colophon */
.colophon {
  text-align: center;
  padding: 3rem 1rem 3rem
}

.colophon__logo {
  width: 200px;
  margin: 0 auto 1.25rem;
  opacity: .9
}

.colophon__tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flag-navy);
  margin: 0 0 .5rem
}

.colophon__meta {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--ink-500);
  margin: 0
}

/* Responsive */
@media(max-width:900px) {
  .content-col {
    padding: 2rem 1.25rem
  }

  .hero__title-line--accent {
    transform: rotate(-1deg)
  }
}

@media(max-width:640px) {
  .hero {
    padding: .5rem 0 1rem
  }

  .hero__eyebrow {
    font-size: .65rem;
    margin-bottom: 1rem
  }

  .hero__title-line--accent {
    font-size: clamp(2.8rem, 11vw, 4.5rem)
  }

  .counter {
    padding: 1rem 1.25rem
  }

  .hero__invitation {
    font-size: .9rem
  }

  .hero__scroll-hint {
    display: none
  }

  .parchment__content {
    padding: 1.5rem 1rem
  }

  .parchment__script {
    font-size: 1.3rem
  }

  .parchment__script .dropcap {
    font-size: 3em
  }

  .signatures__list {
    grid-template-columns: 1fr;
    gap: .25rem
  }

  .signatures__list li {
    padding: .3rem .15rem;
    min-height: 2.2em
  }

  .signing {
    padding: 2rem 1rem 1rem
  }

  .signing__seal {
    width: 60px;
    height: 60px;
    top: -30px
  }

  .signing__seal img {
    width: 52px;
    height: 52px
  }

  .colophon__logo {
    width: 160px
  }

  .stars-rule {
    margin: 1.5rem auto
  }

  .stars-rule span {
    width: 12px;
    height: 12px
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }

  html {
    scroll-behavior: auto
  }

  .counter__odometer .digit-track {
    transition: none
  }
}