/* Adele & Ben — shared styles. Tokens and type from wedding-style-guide.md */

@font-face{
  font-family:Italiana; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/italiana-latin-400-normal.woff2) format("woff2");
}
@font-face{
  font-family:"EB Garamond"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
}
@font-face{
  font-family:"EB Garamond"; font-style:italic; font-weight:400; font-display:swap;
  src:url(/fonts/eb-garamond-latin-400-italic.woff2) format("woff2");
}

:root{
  --paper:      #FFFFFF;
  --forest:     #1F4534;
  --stem:       #4C7460;
  --sage:       #7E9F8C;
  --fern-deep:  #35664C;
  --fern-mid:   #6D9B7E;
  --fern-pale:  #AECCB8;
  --fern-mist:  #D9E7DD;
  --euc-deep:   #4F817B;
  --euc-mid:    #7FA49E;
  --euc-pale:   #B3C9C6;
  --euc-mist:   #D7E4E2;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  min-height:100vh;
  background:#D9E2DA;
  background-image:radial-gradient(ellipse at 50% 0%, #E4EBE3 0%, #CFDACF 70%, #BFCDC0 100%);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  color:var(--forest);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--stem); }

/* letterspaced small caps — remember the text-indent rule */
.eyebrow{
  font-size:max(10px, .8rem); line-height:1;
  letter-spacing:.52em; text-indent:.52em;
  text-transform:uppercase;
  color:var(--stem);
  text-align:center;
}

.display{
  font-family:Italiana,"EB Garamond",Georgia,serif;
  font-weight:400;
}

.italic{ font-style:italic; color:var(--stem); }

.rule{
  width:96px; height:1px; border:0;
  background:var(--sage);
  margin:1.6rem auto;
}

/* white panel, like a small sheet of the stationery */
.panel{
  position:relative;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(31,69,52,.14), 0 22px 50px -18px rgba(31,69,52,.40);
  overflow:hidden;
}

/* buttons in the record-block spirit: hairlines and letterspaced labels */
.btn{
  display:inline-block;
  font-family:"EB Garamond",Georgia,serif;
  font-size:max(10px,.78rem);
  letter-spacing:.4em; text-indent:.4em;
  text-transform:uppercase;
  color:var(--forest);
  background:var(--paper);
  border:1px solid var(--sage);
  padding:.95em 1.6em .85em;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.btn:hover{ background:var(--forest); border-color:var(--forest); color:var(--paper); }
.btn.primary{ background:var(--forest); border-color:var(--forest); color:var(--paper); }
.btn.primary:hover{ background:var(--stem); border-color:var(--stem); }
.btn:disabled{ opacity:.5; cursor:default; }

.field{
  width:100%;
  font-family:"EB Garamond",Georgia,serif;
  font-size:1.05rem;
  color:var(--forest);
  background:var(--paper);
  border:1px solid var(--sage);
  padding:.7em .9em;
  outline:none;
}
.field:focus{ border-color:var(--forest); }
.field::placeholder{ color:var(--sage); font-style:italic; }

.note{
  font-size:max(9px,.72rem);
  letter-spacing:.26em; text-indent:.26em;
  text-transform:uppercase;
  color:#4F7264;
  text-align:center;
}

.err{ color:#7a3b2e; font-style:italic; text-align:center; }

@media print{
  body{ background:none; }
  .panel{ box-shadow:none; }
}