:root{
  --olive:#59632d;
  --deep:#17351f;
  --ivory:#fff8e8;
  --paper:#fffaf0;
  --blush:#edb8b0;
  --blush-soft:#f7d9d4;
  --gold:#b9822c;
  --gold-soft:#d7b06c;
  --ink:#26352a;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#eee7d7;
  color:var(--ink);
  font-family:'Cormorant Garamond',serif;
}

.panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  min-height:100svh;
  max-width:760px;

  margin:auto;
  padding:84px 8vw;

  text-align:center;

  background:
    radial-gradient(
      circle at 14% 10%,
      rgba(237,184,176,.20),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 92%,
      rgba(185,130,44,.08),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #fffdf7,
      var(--ivory)
    );

  border-left:1px solid rgba(185,130,44,.58);
  border-right:1px solid rgba(185,130,44,.58);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:16px;

  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,.26);
}


/* Floral corner decoration */

.panel::before,
.panel::after{
  content:"";

  position:absolute;

  width:245px;
  height:245px;

  z-index:-1;
  pointer-events:none;

  opacity:.78;

  filter:saturate(.92);

  background:

    radial-gradient(
      circle at 42% 38%,
      rgba(237,184,176,.92) 0 10%,
      rgba(237,184,176,.48) 11% 20%,
      transparent 21%
    ),

    radial-gradient(
      circle at 62% 28%,
      rgba(247,217,212,.90) 0 8%,
      rgba(247,217,212,.42) 9% 17%,
      transparent 18%
    ),

    radial-gradient(
      ellipse at 37% 67%,
      rgba(89,99,45,.52) 0 9%,
      transparent 10%
    ),

    radial-gradient(
      ellipse at 59% 67%,
      rgba(89,99,45,.48) 0 10%,
      transparent 11%
    ),

    radial-gradient(
      ellipse at 72% 52%,
      rgba(89,99,45,.35) 0 8%,
      transparent 9%
    ),

    radial-gradient(
      circle at 52% 48%,
      rgba(185,130,44,.24),
      transparent 42%
    );
}

.panel::before{
  top:-72px;
  left:-72px;
  transform:rotate(-14deg);
}

.panel::after{
  right:-78px;
  bottom:-78px;
  transform:rotate(164deg);
}

.panel > *{
  position:relative;
  z-index:1;
}

.hero{
  min-height:100svh;
  padding-top:100px;
  padding-bottom:100px;
}

.panel::selection{
  background:var(--blush-soft);
}


/* #AnEndlessStory */

.story-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;

  width:min(520px,88%);

  color:var(--deep);

  font-family:Italiana,serif;

  font-size:clamp(
    19px,
    4.2vw,
    27px
  );

  letter-spacing:.055em;
  line-height:1.25;

  margin-bottom:6px;

  text-shadow:
    0 1px 0 rgba(255,255,255,.85);
}

.story-mark::before,
.story-mark::after{
  content:"";

  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold)
    );
}

.story-mark::after{
  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );
}

.story-mark-hero{
  font-size:clamp(
    25px,
    6vw,
    38px
  );

  width:min(590px,92%);

  padding:18px 12px;
}


/* Typography */

.eyebrow{
  letter-spacing:.18em;

  color:var(--gold);

  font-size:14px;

  text-transform:uppercase;
}

h1,
h2,
h3{
  font-family:Italiana,serif;

  font-weight:400;

  color:var(--deep);

  letter-spacing:.04em;
}

h1{
  font-size:clamp(
    40px,
    9vw,
    72px
  );

  margin:10px 0;
}

h2{
  font-size:clamp(
    38px,
    8vw,
    64px
  );

  line-height:1.05;

  margin:10px 0;
}

h2 small{
  display:block;

  font-size:.45em;

  letter-spacing:.2em;
}

h2 .amp{
  display:block;

  font-size:.7em;

  margin:14px;
}

.amp,
.script{
  color:var(--gold);
}

.script{
  font-family:Parisienne,cursive;

  font-size:30px;
}

.hero-copy{
  max-width:510px;

  font-size:21px;

  line-height:1.55;

  font-style:italic;

  color:#4b594d;

  margin:2px auto 8px;
}


/* Date and invitation */

.date{
  display:grid;
  gap:8px;
}

.date strong,
.event strong{
  font-size:28px;

  color:var(--gold);

  letter-spacing:.08em;
}

.venue-heading{
  text-transform:none;

  font-size:clamp(
    24px,
    5vw,
    34px
  );

  margin-bottom:-6px;
}

.intro{
  font-size:21px;

  line-height:1.65;

  max-width:610px;

  margin:10px auto 0;
}


/* Buttons */

.primary,
.outline{
  display:inline-block;

  padding:16px 24px;

  border-radius:999px;

  text-decoration:none;

  letter-spacing:.08em;

  font-family:inherit;

  font-size:16px;

  cursor:pointer;

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

.primary{
  background:
    linear-gradient(
      135deg,
      var(--olive),
      #485326
    );

  color:white;

  border:1px solid var(--gold-soft);

  box-shadow:
    0 8px 24px rgba(23,53,31,.13);
}

.outline{
  border:1px solid var(--olive);

  color:var(--deep);

  background:
    rgba(255,250,240,.58);
}

.primary:hover,
.outline:hover{
  transform:translateY(-1px);
}


/* Ceremony / reception */

.event{
  width:min(570px,100%);

  padding:24px 18px;

  border-top:
    1px solid rgba(185,130,44,.35);

  border-bottom:
    1px solid rgba(185,130,44,.35);
}

.event .icon{
  font-size:42px;

  color:var(--gold);
}


/* Colours */

.swatches{
  display:flex;

  gap:28px;

  justify-content:center;

  flex-wrap:wrap;
}

.swatches div{
  display:grid;

  gap:10px;

  font-size:14px;

  letter-spacing:.06em;
}

.swatches i{
  width:74px;
  height:74px;

  border-radius:50%;

  border:2px solid var(--gold);

  display:block;

  box-shadow:
    0 5px 18px rgba(23,53,31,.08);
}

.olive{
  background:#5b642b;
}

.ivory{
  background:#fff8e8;
}

.blush{
  background:#e9b1aa;
}


/* Hotels */

.hotels{
  display:grid;

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

  gap:12px;

  width:100%;
}

.hotels a,
.contact-name > div{
  border:
    1px solid rgba(185,130,44,.62);

  border-radius:18px;

  padding:22px;

  color:var(--deep);

  text-decoration:none;

  background:
    rgba(255,250,240,.62);

  box-shadow:
    0 6px 20px rgba(23,53,31,.045);
}

.hotels span{
  display:block;

  margin-top:14px;

  color:var(--gold);
}

.note{
  max-width:580px;
}


/* Contacts */

.contact-name{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;

  width:100%;
}

.contact-name a{
  margin:0 8px;

  color:var(--olive);

  font-weight:600;

  text-decoration:none;
}


/* RSVP */

form{
  width:100%;

  max-width:600px;

  display:grid;

  gap:12px;
}

fieldset{
  border:0;

  display:flex;

  gap:10px;

  justify-content:center;

  flex-wrap:wrap;
}

fieldset label{
  border:
    1px solid #d9b06b;

  border-radius:14px;

  padding:14px;

  background:
    rgba(255,250,241,.72);
}

input,
select,
textarea{
  width:100%;

  padding:16px;

  border:
    1px solid #d9b06b;

  border-radius:14px;

  background:#fffaf1;

  font:inherit;

  font-size:18px;
}

textarea{
  min-height:100px;
}

.actions{
  display:flex;

  gap:12px;

  flex-wrap:wrap;

  justify-content:center;
}

#rsvpMessage{
  padding:24px;

  border:
    1px solid #d9b06b;

  border-radius:14px;

  font-size:22px;

  background:
    rgba(255,250,240,.72);
}

.final{
  min-height:100svh;
}

.attending-only{
  width:100%;
}

[hidden]{
  display:none!important;
}

button:disabled{
  opacity:.65;

  cursor:wait;
}


/* Admin dashboard */

.admin-shell{
  max-width:1100px;

  margin:auto;

  padding:36px 20px;
}

.admin-card{
  background:#fffaf0;

  border:
    1px solid #d9b06b;

  border-radius:16px;

  padding:22px;

  margin:16px 0;
}

.stats{
  display:grid;

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

  gap:12px;
}

.stat{
  background:#fffaf0;

  border:
    1px solid #d9b06b;

  border-radius:14px;

  padding:18px;

  text-align:center;
}

.stat b{
  font-size:30px;

  color:var(--olive);

  display:block;
}

.admin-table{
  width:100%;

  border-collapse:collapse;

  background:#fffaf0;
}

.admin-table th,
.admin-table td{
  padding:10px;

  border-bottom:
    1px solid #ead9b9;

  text-align:left;
}

.admin-actions{
  display:flex;

  gap:10px;

  flex-wrap:wrap;
}

.admin-actions input{
  max-width:360px;
}


/* Mobile */

@media(max-width:700px){

  .stats{
    grid-template-columns:
      1fr 1fr;
  }

  .table-wrap{
    overflow:auto;
  }
}

@media(max-width:560px){

  .panel{
    padding:66px 22px;
  }

  .panel::before,
  .panel::after{
    width:190px;
    height:190px;

    opacity:.72;
  }

  .panel::before{
    top:-52px;
    left:-58px;
  }

  .panel::after{
    right:-58px;
    bottom:-58px;
  }

  .hotels,
  .contact-name{
    grid-template-columns:1fr;
  }

  .story-mark{
    width:94%;

    font-size:20px;
  }

  .story-mark-hero{
    font-size:27px;
  }

  .swatches{
    gap:14px;
  }

  .intro{
    font-size:19px;
  }
}