@font-face{
  font-family:"TAN Pearl";
  src:url("tanpearl.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --paper:#FFE5CF; --paper-card:#FBDBC1;
  --red:#FF0000; --ink:#A81F16;
  --rule:rgba(168,31,22,.3); --rule-soft:rgba(168,31,22,.16);
  --olive:#414301;
  --display-font:"TAN Pearl",'Didot','Bodoni MT',Georgia,serif;
  --body-font:"Figtree",'Avenir Next','Segoe UI',system-ui,sans-serif;
  --measure:36rem;
  --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:pretty}
.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.4rem;height:1.4rem;-webkit-mask-image:url("sparkle.png");mask-image:url("sparkle.png")}
.mark--fork{width:.85rem;height:3.6rem;-webkit-mask-image:url("fork.png");mask-image:url("fork.png")}
.mark--amp{
  width:1.02em;height:.565em;position:relative;top:-.04em;margin:0 .12em;
  -webkit-mask-image:url("rings.png");mask-image:url("rings.png");
  display:inline-block;background-color:currentColor;vertical-align:baseline;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.mark--bread{width:5rem;height:2.2rem;-webkit-mask-image:url("bread.png");mask-image:url("bread.png")}
.mark--coupe{width:3rem;height:4.6rem;-webkit-mask-image:url("coupe.png");mask-image:url("coupe.png")}
.double{display:flex;flex-direction:column;gap:3px}
.double span{display:block;height:1px;background:var(--rule)}
.double span:first-child{height:2.5px}

/* ---------- 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.png");mask-image:url("cake.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;
}
.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{
  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}

/* ---------- run of the day ---------- */
.run{width:100%;display:flex;flex-direction:column;text-align:left}
.run__row{display:grid;grid-template-columns:6rem 1fr;gap:.25rem 1.25rem;padding:.65rem 0;border-top:1px solid var(--rule-soft);align-items:baseline}
.run__row:last-child{border-bottom:1px solid var(--rule-soft)}
.run__time{font-weight:700;font-variant-numeric:tabular-nums;font-size:.85rem}
.run__what{margin:0;font-size:.95rem}
.run__cap{align-self:flex-start}

/* ---------- 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(--red);color:var(--paper);border:1.5px solid var(--red);
  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(--red);color:var(--paper);border-color:var(--red);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}
.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 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(--red);color:var(--paper);border-color:var(--red)}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.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(--red);color:var(--paper);border-color:var(--red)}

/* ---------- 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.5rem,6vw,3.5rem) 0 clamp(3.5rem,8vw,5rem);display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center}

/* ---------- 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}
  .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}
}