/* Shared look: type, paper, borders, buttons, forms, cards. Colors, fonts and art come from the
   theme's vars.css (made from its theme.json); nothing here names a color. */
:root{
  --line:rgba(var(--ink-rgb),.38);   /* every thin rule and card edge */
  color-scheme:light;
}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
/* A host can make any line as long as its cap with one long word; it wraps instead of pushing the page sideways. */
body{overflow-wrap:anywhere}
th, td{overflow-wrap:normal}   /* table columns size to their words */
select, input, textarea{max-width:100%}
[hidden]{display:none!important}
/* the party's own photos (marked data-photo), in black and white when the site says so */
html[data-photos=bw] [data-photo]{filter:grayscale(1) contrast(1.06)}
html{background:var(--paper)}
body{
  background:var(--paper) var(--art-paper) repeat; background-size:480px;
  color:var(--ink); font:400 18px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.stripes{height:30px; background:var(--art-border) repeat-x 0 0 / auto 30px; position:relative; z-index:2}
.stripes.foot{transform:scaleY(-1)}

a{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.caps{font-family:var(--f-caps); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:14px; line-height:1.6}
.script{font-family:var(--f-script); font-weight:400; line-height:1}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}


/* ---------- page column ---------- */
main{position:relative; z-index:2; padding-left:max(26px, env(safe-area-inset-left,0px) + 12px); padding-right:max(26px, env(safe-area-inset-right,0px) + 12px)}  /* clears the side borders */
.col{max-width:600px; margin:0 auto}
section{padding-block:44px 8px; scroll-margin-top:12px}
.card{position:relative; padding:34px max(20px, 5vw) 34px; text-align:center}
.card::before{content:""; position:absolute; inset:0; border:1.5px solid var(--line); border-radius:2px; pointer-events:none}
.sec-title{font:400 clamp(48px, 13vw, 66px)/.9 var(--f-script); margin:0 0 6px}
.lede{max-width:34ch; margin:6px auto 22px; color:var(--soft)}

/* buttons */
.btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px 0 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 18px 9px;
  font:600 14px/1.1 var(--f-caps); letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:transparent; border:1.5px solid var(--ink); border-radius:999px; cursor:pointer;
  transition:background .2s, color .2s, transform .1s;
}
.btn:hover{background:rgba(var(--wash-rgb),.28)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--ink); color:var(--paper); min-width:min(100%, 250px)}
.btn.solid:hover{background:var(--ink-deep)}
.btn[disabled], .btn.off{opacity:.45; cursor:not-allowed; pointer-events:none}
.btn svg{width:16px; height:16px; flex:none}

/* forms */
.field{display:grid; gap:6px; text-align:left; margin:0 0 14px}
.field label, .lbl{font:600 12px/1.3 var(--f-caps); letter-spacing:.2em; text-transform:uppercase; color:var(--soft)}
input[type=text], input[type=date], select, textarea{
  width:100%; min-width:0; font:400 18px/1.3 var(--f-body); color:var(--ink);
  background:rgba(var(--field-rgb),.55); border:1px solid var(--line); border-radius:4px; padding:11px 12px;
}
textarea{min-height:110px; resize:vertical; line-height:1.45}
/* a mailing address: street, unit, city, then state and ZIP side by side */
.postal-set, .rsvp-mail{border:0; margin:0 0 14px; padding:0; min-width:0}
.postal-set legend, .rsvp-mail legend{padding:0; margin:0 0 6px}
.rsvp-mail > .rsvp-hint{display:block; margin:0 0 12px}
.postal-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.postal-row .field{min-width:0}
input::placeholder, textarea::placeholder{color:var(--hint); font-style:italic}
.row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.form-msg{min-height:1.4em; margin:8px 0 0; font-style:italic; color:var(--soft); font-size:16px}
.form-msg.err{color:var(--accent); font-style:normal}