/* The Millers: stationery-as-UI. Each section is a card from the suite. */
:root {
  --cream: #f7f1e6;
  --paper: #fffcf6;
  --ink: #3a3424;
  --ink-soft: #6b6350;
  /* The bridesmaid dresses (Azazie stretch satin), sampled from the swatches */
  --juniper: #5b6b39;
  --mauve: #c18e96;
  --plum: #922b57;
  --lemongrass: #adad4b;

  --chartreuse: var(--lemongrass);
  --chartreuse-soft: #dcdca6;
  --olive: var(--juniper);
  --olive-deep: #2c3418;
  --orange: var(--plum);
  --orange-ink: #3d0f22;
  --magenta: var(--plum);
  --magenta-ink: #fdf1f4;
  --burgundy: #6a1a3c;
  --blush: #ecd3d5;
  --pink: var(--mauve);
  --stripe: #e6c6ca;

  --display: 'Imbue', 'Didot', Georgia, serif;
  --script: 'Ms Madi', 'Brush Script MT', cursive;
  --body: 'Newsreader', Georgia, serif;

  /* Painted stripes in the four dress colors (replaced the marbling, 27 Oct) */
  --stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='640'%3E%3Cfilter id='w' x='-20%' y='0' width='140%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .035' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='A'/%3E%3C/filter%3E%3Crect width='192' height='640' fill='%23f7f1e6'/%3E%3Crect x='7' y='-30' width='34' height='700' fill='%23adad4b' filter='url(%23w)'/%3E%3Crect x='55' y='-30' width='34' height='700' fill='%23c18e96' filter='url(%23w)'/%3E%3Crect x='103' y='-30' width='34' height='700' fill='%235b6b39' filter='url(%23w)'/%3E%3Crect x='151' y='-30' width='34' height='700' fill='%23922b57' filter='url(%23w)'/%3E%3C/svg%3E");
  --stripes-size: 192px 640px;
  --shadow: 0 1px 1px rgba(60, 40, 20, .06), 0 10px 30px -12px rgba(60, 40, 20, .35);
  --radius: 3px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* paper grain */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
[hidden] { display: none !important; }
.actions:empty { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.caps { font-family: var(--display); font-variation-settings: 'opsz' 100; text-transform: uppercase; letter-spacing: .05em; line-height: .92; font-weight: 400; }
.label { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; }
.script { font-family: var(--script); font-weight: 400; letter-spacing: .01em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 .8em; }

/* ---------- hero: painted stripes + envelope ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 16px 56px;
  overflow: hidden;
  isolation: isolate;
}
.hero-stripes { position: absolute; inset: 0; z-index: -2; background: var(--stripes) 0 0 / var(--stripes-size); }
.hero-stripes::after { /* paper grain over the paint */
  content: ''; position: absolute; inset: 0; opacity: .3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 55%, rgba(255, 250, 240, .0) 30%, rgba(255, 248, 236, .35) 100%); }
.hero-top { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--paper); color: var(--olive-deep); white-space: nowrap; box-shadow: var(--shadow); }

.stage { position: relative; width: min(92vw, 420px); }

/* envelope (juniper, with a striped liner) */
.env {
  --w: min(88vw, 400px);
  position: relative;
  width: var(--w);
  aspect-ratio: 1.42;
  margin: 0 auto;
  transition: transform .9s cubic-bezier(.6, 0, .3, 1), opacity .7s ease;
}
.env { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; border-radius: 4px; }
.env-back { background: var(--juniper); box-shadow: 0 30px 60px -25px rgba(50, 40, 10, .55), 0 2px 4px rgba(50, 40, 10, .2); }
.env-back::after { /* liner seen inside the pocket */
  content: ''; position: absolute; inset: 6px 6px 40% 6px; background: var(--stripes) 0 0 / 96px 320px; opacity: .95;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.env-front {
  background: linear-gradient(170deg, #67783f, var(--juniper) 55%, #4e5c30);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
}
.env-front::before { /* pocket fold shading */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 49.6%, rgba(40, 40, 0, .14) 50%, transparent 50.6%),
              linear-gradient(to top left, transparent 49.6%, rgba(40, 40, 0, .14) 50%, transparent 50.6%);
}
.env-flap {
  z-index: 4;
  transform-origin: 50% 0;
  transform: perspective(900px) rotateX(0deg);
  transition: transform .8s cubic-bezier(.5, 0, .3, 1) .15s, z-index 0s linear .55s;
  clip-path: polygon(0 0, 100% 0, 50% 60%);
  background: var(--stripes) 0 0 / 96px 320px; /* the striped liner, seen once the flap is open */
}
.env-flap::before { /* outside face */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #6a7b42, #566535);
  transition: opacity 0s linear .55s;
}
.env-card {
  position: absolute; left: 6%; right: 6%; top: 7%; height: 86%;
  z-index: 2;
  border: 7px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--stripes) 0 0 / 96px 320px border-box;
  box-shadow: var(--shadow);
  display: grid; place-content: center; text-align: center; gap: 4px;
  color: var(--olive-deep);
  transition: transform 1s cubic-bezier(.3, .1, .2, 1) .75s;
}
.env-card .caps { font-size: clamp(1.3rem, 6vw, 1.9rem); }
.seal {
  position: absolute; z-index: 5; left: 50%; top: 60%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%;
  filter: drop-shadow(0 4px 6px rgba(60, 50, 20, .35));
  transition: transform .5s cubic-bezier(.5, 0, .3, 1), opacity .4s ease;
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.045); } }
.hint { margin: 26px auto 0; width: max-content; padding: 4px 18px 8px; border-radius: 999px; background: var(--paper); text-align: center; color: var(--plum); box-shadow: var(--shadow); }
.hint .script { font-size: 1.6rem; }

.env.open .seal { transform: scale(.4) rotate(-25deg); opacity: 0; animation: none; pointer-events: none; }
/* perspective() lives on the flap itself, not on .env: Safari ignores z-index
   between siblings inside a shared 3D context, which left the flap over the card. */
.env.open .env-flap { transform: perspective(900px) rotateX(180deg); z-index: 1; }
.env.open .env-flap::before { opacity: 0; }
.env.open .env-card { transform: translateY(-62%); }
.env.gone { transform: translateY(40vh) rotate(4deg); opacity: 0; }

/* ---------- the card ---------- */
.card {
  position: relative;
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin: 0 auto;
}
.card-striped { padding: 16px; background: var(--stripes) 0 0 / var(--stripes-size); }
.card-striped > .inner { background: var(--paper); border: 1px solid #e5cfb9; padding: clamp(28px, 7vw, 48px) clamp(20px, 6vw, 40px); text-align: center; }

.std { width: min(92vw, 440px); color: var(--olive-deep); opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.std.in { opacity: 1; transform: none; }
.std[hidden] { display: none; }
.std .label { color: var(--ink-soft); }
.std .names { font-size: clamp(2.6rem, 13vw, 4rem); color: var(--olive); margin: 18px 0 6px; }
.std .names .and { display: flex; align-items: center; justify-content: center; gap: 14px; }
.std .names .and small { font-size: .3em; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .12em; }
.std .tag { font-size: clamp(1.6rem, 7vw, 2.1rem); color: var(--burgundy); margin: 10px 0 18px; transform: rotate(-3deg); }
.std .when { font-size: clamp(1.15rem, 5vw, 1.45rem); color: var(--olive-deep); }
.std .where { color: var(--ink-soft); margin-top: 6px; }
.std .postmark { display: inline-block; margin-top: 18px; padding: 8px 14px; border: 1.5px dashed var(--burgundy); border-radius: 999px; color: var(--burgundy); transform: rotate(-4deg); }
.std .small { margin-top: 22px; color: var(--ink-soft); font-style: italic; font-size: 1rem; }
.std .actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- buttons + chips ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  font: 400 .8rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
  padding: 16px 22px; min-height: 48px; border-radius: 999px;
  background: var(--burgundy); color: #fff6f2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(110, 20, 51, .8); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.btn.ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn.small { padding: 11px 16px; min-height: 40px; font-size: .7rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; text-underline-offset: .18em; }

/* ---------- sections ---------- */
.section { padding: 64px 16px; }
.wrap { width: min(100%, 640px); margin: 0 auto; }
.florals { position: absolute; color: var(--burgundy); pointer-events: none; }
.floral path, .floral circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1); }
.floral.drawn path, .floral.drawn circle { stroke-dashoffset: 0; }

/* chartreuse card: "send us your address" */
.card-green { background: var(--chartreuse); color: var(--olive-deep); padding: clamp(28px, 7vw, 52px) clamp(20px, 6vw, 44px); overflow: hidden; }
.card-green h2 { font-size: clamp(2.1rem, 10vw, 3.2rem); color: var(--olive-deep); }
.card-green .lede { margin: 14px 0 26px; max-width: 30em; }
.card-green, .card-magenta, .event { position: relative; }
.card-green > :not(.florals), .event > :not(.florals) { position: relative; z-index: 1; }
.card-green .florals { right: -16px; top: -14px; width: 72px; color: var(--olive-deep); opacity: .45; }
.card-green .florals.b { right: auto; left: -18px; top: auto; bottom: -20px; width: 84px; transform: rotate(160deg); }
.card-green h2 { padding-right: 36px; }

/* orange card: kindly respond */
.card-orange { background: var(--orange); color: var(--orange-ink); padding: clamp(28px, 7vw, 52px) clamp(20px, 6vw, 44px); }
.card-orange h2 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
.card-orange .btn { background: var(--orange-ink); color: #ffe9da; }

/* magenta card */
.card-magenta { background: var(--magenta); color: var(--magenta-ink); padding: clamp(28px, 7vw, 52px) clamp(20px, 6vw, 44px); overflow: hidden; }
.card-magenta h2 { font-size: clamp(2.1rem, 10vw, 3rem); }
.card-magenta .florals { color: var(--burgundy); opacity: .75; }

/* striped details card */
.card-stripe { background: repeating-linear-gradient(90deg, var(--paper) 0 26px, var(--stripe) 26px 40px); padding: 18px; }
.card-stripe > .inner { background: var(--paper); padding: clamp(24px, 6vw, 44px); }
.card-stripe h2 .script { color: var(--burgundy); font-size: 1.25em; text-transform: none; letter-spacing: 0; }

/* ---------- forms: stationery lines ---------- */
.form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
.field { grid-column: span 6; display: flex; flex-direction: column; gap: 4px; }
.field.half { grid-column: span 3; }
.field.city { grid-column: span 3; }
.field.state { grid-column: span 1; }
.field.zip { grid-column: span 2; }
@media (max-width: 480px) { .field.half, .field.city { grid-column: span 6; } .field.state, .field.zip { grid-column: span 3; } }
.field > span { font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; }
.field > span em { text-transform: none; letter-spacing: 0; font-family: var(--body); opacity: .8; }
.field input, .field textarea, .field select {
  font: 400 1.15rem/1.3 var(--body); color: inherit;
  background: transparent; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0;
  padding: 6px 2px; min-height: 44px; width: 100%;
}
.field textarea { min-height: 76px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: currentColor; opacity: .45; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-width: 2.5px; background: rgba(255, 255, 255, .18); }
.field .err { font-size: .95rem; font-style: italic; color: var(--burgundy); min-height: 0; }
.card-orange .field .err { color: #3b0d00; font-weight: 600; }
.field.bad input { border-bottom-color: var(--burgundy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: span 6; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 8px; }
.form-msg { font-style: italic; }

.choice { display: flex; gap: 10px; flex-wrap: wrap; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice label span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor; font-size: 1.05rem; cursor: pointer;
}
.choice label span::before { content: ''; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.choice input:checked + span { background: var(--orange-ink); color: #ffe9da; }
.choice input:checked + span::before { box-shadow: inset 0 0 0 5px #ffe9da; }
.choice input:focus-visible + span { outline: 2px solid var(--orange-ink); outline-offset: 3px; }

.thanks { text-align: center; padding: 10px 0; }
.thanks .script { font-size: clamp(2.4rem, 11vw, 3.4rem); color: var(--burgundy); display: block; margin-bottom: 8px; }

/* ---------- footer ---------- */
.foot { text-align: center; padding: 40px 16px 56px; color: var(--ink-soft); font-size: .95rem; }
.foot .script { font-size: 2rem; color: var(--olive); display: block; margin-bottom: 4px; }
.foot .credit { margin-top: 18px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--display); opacity: .7; }

/* ---------- confetti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confetti i { position: absolute; width: 9px; height: 14px; border-radius: 60% 60% 50% 50%; animation: fly var(--d) cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fly {
  to { transform: translate(var(--dx), calc(var(--dy) + 90vh)) rotate(var(--r)); opacity: 0; }
}

/* ---------- reveal on scroll ---------- */
.rise { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .seal { animation: none; }
  .env, .env-flap, .env-card, .std, .rise { transition: none !important; }
  .rise, .std { opacity: 1; transform: none; }
  .floral path, .floral circle { transition: none; }
}