@font-face{
  font-family:"TAN Pearl";
  src:url("tanpearl.10c416d624.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --paper:#FBEBD7; --paper-card:#F6E2C7;
  --red:#EF4310; --ink:#A8330F; --btn:#C7330B;
  --rule:rgba(168,51,15,.32); --rule-soft:rgba(168,51,15,.18);
  --olive:#414301;
  --display-font:"TAN Pearl",'Didot','Bodoni MT',Georgia,serif;
  --body-font:"Figtree",'Avenir Next','Segoe UI',system-ui,sans-serif;
  --measure:31rem;
  --gutter:clamp(1.5rem,6vw,4rem);
  --sec-y:clamp(3.5rem,9vw,6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body-font);font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
.page{max-width:62rem;margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
.display{
  font-family:var(--display-font);font-weight:400;text-transform:uppercase;
  color:var(--red);line-height:1.1;letter-spacing:.015em;text-wrap:balance;margin:0;
}
h1.display{font-size:clamp(2rem,6.4vw,3.9rem)}
h2.display{font-size:clamp(1.6rem,4.4vw,2.6rem)}
h3.display{font-size:clamp(1.45rem,3.8vw,2.15rem)}
.label{text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;font-weight:600;margin:0}
.lede{max-width:var(--measure);margin:0;text-wrap:balance}
.small{font-size:.85rem;opacity:.8}
a{color:inherit;text-underline-offset:.2em}

/* ---------- sections ---------- */
.sec{padding:var(--sec-y) 0;display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,2.25rem);align-items:center;text-align:center}
.sec__head{display:flex;flex-direction:column;gap:clamp(.75rem,2vw,1.15rem);align-items:center}

/* ---------- rules and ornaments ---------- */
.rule{display:flex;align-items:center;gap:clamp(.9rem,3vw,1.75rem)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--rule)}
.rule--plain{gap:0}
.rule--plain::before,.rule--plain::after{background:var(--rule-soft)}
.mark{
  background-color:var(--red);flex:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.mark--sparkle{width:3.36rem;height:1.4rem;-webkit-mask-image:url("sparkle.d21c3226ba.png");mask-image:url("sparkle.d21c3226ba.png")}
.mark--bird{width:6.32rem;height:4.6rem;-webkit-mask-image:url("bird.e706e4b830.png");mask-image:url("bird.e706e4b830.png")}
.mark--sax{width:3.92rem;height:8.2rem;-webkit-mask-image:url("sax.1de93f024f.png");mask-image:url("sax.1de93f024f.png")}
.mark--hearts{width:6.73rem;height:4.8rem;-webkit-mask-image:url("hearts.38629da4ad.png");mask-image:url("hearts.38629da4ad.png")}
.mark--coupe{width:3.88rem;height:4.6rem;-webkit-mask-image:url("coupe.d9270f9d3b.png");mask-image:url("coupe.d9270f9d3b.png")}
.mark--parasol{width:4.38rem;height:5.0rem;-webkit-mask-image:url("parasol.e607a3481e.png");mask-image:url("parasol.e607a3481e.png")}

/* ---------- the cake ---------- */
.cake{
  margin:clamp(1.75rem,5vw,3.5rem) 0;
  height:min(42vh,24rem);width:auto;aspect-ratio:0.8398;flex:none;
  background-color:var(--red);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:url("cake.2f372f0539.png");mask-image:url("cake.2f372f0539.png");
}

/* ---------- hero ---------- */
.hero{min-height:100svh;justify-content:center;padding-top:clamp(1.5rem,4vw,3rem);gap:clamp(1.25rem,3.5vw,2rem)}
.hero__to{max-width:34rem;font-size:clamp(.82rem,2vw,1rem);letter-spacing:.2em}
.hero__to b{font-weight:700;letter-spacing:.12em}

/* ---------- the two days ---------- */
.days{width:100%;max-width:40rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,4vw,3rem);text-align:center}
.day{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding-top:1.1rem;border-top:1px solid var(--rule-soft)}
.day p{margin:0}
.day__title{
  margin:0;font-family:var(--body-font);font-size:.9rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--red);
}

/* ---------- an event ---------- */
.event{width:100%;max-width:44rem;display:flex;flex-direction:column;gap:clamp(2rem,5vw,3.25rem);align-items:center}
.facts{
  width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3.5vw,2.5rem);text-align:left;
}
.facts--two{max-width:30rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.fact{display:flex;flex-direction:column;gap:.45rem;padding-top:1.1rem;border-top:1px solid var(--rule-soft)}
.fact p{margin:0}
.fact__big{font-weight:700;font-size:1.05rem}
.fact__big a{
  display:inline-block;padding:.7rem 0;margin:-.7rem 0;   /* 44px tap target, same look */
  color:inherit;text-decoration:underline;
  text-decoration-color:var(--rule);text-decoration-thickness:1.5px;text-underline-offset:.22em;
  transition:text-decoration-color .15s ease;
}
.fact__big a:hover{text-decoration-color:currentColor}

/* ---------- good to know ---------- */
.grid{width:100%;max-width:50rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,2.5rem);text-align:left}
.cell{display:flex;flex-direction:column;gap:.6rem;padding-top:.9rem;border-top:1px solid var(--rule-soft)}
.cell p{margin:0;font-size:.95rem}

/* ---------- rsvp ---------- */
.btn{
  font:inherit;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.82rem;
  background:var(--btn);color:var(--paper);border:1.5px solid var(--btn);
  padding:1.1rem 3rem;cursor:pointer;transition:opacity .15s ease;
}
.btn:hover{opacity:.85}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:var(--btn);color:var(--paper);border-color:var(--btn);opacity:1}
.card{
  width:100%;max-width:40rem;text-align:left;background:var(--paper-card);
  border:1.5px solid var(--rule);padding:clamp(1.75rem,5vw,3rem);
  display:flex;flex-direction:column;gap:1.75rem;
}
.card[hidden]{display:none}
.field{display:flex;flex-direction:column;gap:.6rem}
.person{display:flex;flex-direction:column;gap:1.1rem;padding-top:1.6rem;border-top:1px solid var(--rule-soft)}
.person:first-child{padding-top:0;border-top:0}
.person__name{margin:0;font-weight:700;font-size:1.1rem;letter-spacing:-.005em}
.input{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--rule);padding:.55rem 0;width:100%;border-radius:0}
.input::placeholder{color:var(--ink);opacity:.42}
.input:focus{outline:none;border-bottom-color:var(--red)}
.input:focus-visible,.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.yn input:focus-visible+span,.pill input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.toggles{display:flex;flex-direction:column;gap:.5rem}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule-soft)}
.toggle__label{display:flex;flex-direction:column;gap:.1rem}
.toggle__name{font-weight:600}
.toggle__meta{font-size:.78rem;opacity:.72}
.yn{display:flex;gap:.4rem;flex-shrink:0}
.yn label{display:flex;align-items:center;min-height:44px}
.yn input,.pill input{position:absolute;opacity:0;width:0;height:0}
.yn span{display:block;border:1.5px solid var(--rule);padding:.3rem .85rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.yn input:checked+span{background:var(--btn);color:var(--paper);border-color:var(--btn)}
.pills{display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.25rem}
.pills[hidden]{display:none}
.pill{display:flex;align-items:center;min-height:44px}
.pill span{display:block;border:1.5px solid var(--rule);border-radius:999px;padding:.35rem .9rem;font-size:.8rem;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pill input:checked+span{background:var(--btn);color:var(--paper);border-color:var(--btn)}

/* ---------- footer ---------- */
.send{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.btn[disabled]{opacity:.5;cursor:progress}
.status{margin:0;font-size:.9rem;min-height:1.4em}
.status--bad{font-weight:600}
.done{display:flex;flex-direction:column;gap:.6rem;align-items:center;text-align:center}
.done h3{margin:0}

.foot{padding:clamp(2.75rem,6vw,4rem) 0 clamp(4rem,9vw,6rem);display:flex;flex-direction:column;gap:clamp(.9rem,2.2vw,1.25rem);align-items:center;text-align:center}
.foot__signoff{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  font-family:"Beth Ellen","Snell Roundhand",cursive;
  text-transform:none;letter-spacing:0;line-height:1.5;
  font-size:clamp(1.5rem,4.2vw,2.4rem);
}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media (max-width:46rem){
  .grid{grid-template-columns:1fr}
  .days{grid-template-columns:1fr}
  /* stacked in one column, the hairlines read as random lines across the page */
  .day,.fact,.cell{border-top:0;padding-top:0}
  .days{gap:2rem}
  .facts{gap:1.75rem}
  .grid{gap:2rem}
  .facts{grid-template-columns:1fr}
}
@media (max-width:34rem){
  .run__row{grid-template-columns:5rem 1fr}
  .toggle{flex-direction:column;align-items:flex-start;gap:.6rem}
  .btn{width:100%;padding:1.1rem 1rem}
}