@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("cormorant-garamond.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("cormorant-garamond-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #fdfdfb;
  --paper-raised: #ffffff;
  --desk: #d8dce2;
  --desk-high: #e3e7ec;
  --ink: #232529;
  --ink-soft: #4e545c;
  --mist: #5f6873;
  --sky-high: #dde7f0;
  --sky-low: #edf1f2;
  --cloud: #ffffff;
  --cloud-far: #e9eef4;
  --line: rgba(35, 37, 41, 0.14);
  --shadow-print: 0 1px 2px rgba(35, 37, 41, 0.07), 0 14px 34px rgba(35, 37, 41, 0.11);
  --shadow-sheet: 0 0 0 1px rgba(35, 37, 41, 0.04), 0 18px 50px rgba(35, 37, 41, 0.12), 0 42px 110px rgba(35, 37, 41, 0.10);
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  min-height: 100%;
  background: var(--desk)
    linear-gradient(180deg, var(--desk-high) 0, var(--desk) 22rem)
    no-repeat;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

.sumi-defs {
  position: absolute;
}

.invite-frame {
  container: invite-frame / inline-size;
  width: 100%;
}

.sumi {
  width: min(100%, 40rem);
  min-height: 100vh;
  margin: 0 auto;
  overflow: clip;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px,
    linear-gradient(180deg, var(--sky-high) 0, var(--sky-low) 15rem, var(--paper) 38rem) no-repeat,
    var(--paper);
}

@media (min-width: 44rem) {
  body {
    padding: 2.75rem 0;
  }

  .sumi {
    min-height: calc(100vh - 5.5rem);
    box-shadow: var(--shadow-sheet);
  }
}

/* ------------------------------ the sky ------------------------------ */

.sumi__sky {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
}

.sumi__clouds {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

.sumi__cloud {
  position: absolute;
  fill: var(--cloud);
  filter: blur(5px);
}

.sumi__cloud--a {
  width: 64%;
  top: 5%;
  left: -10%;
  opacity: 0.95;
  animation: sumi-drift-a 26s ease-in-out infinite alternate;
}

.sumi__cloud--b {
  width: 50%;
  top: 21%;
  right: -8%;
  fill: var(--cloud-far);
  filter: blur(7px);
  opacity: 0.9;
  animation: sumi-drift-b 34s ease-in-out infinite alternate;
}

.sumi__cloud--c {
  width: 40%;
  top: 1%;
  right: 14%;
  opacity: 0.75;
  animation: sumi-drift-a 41s ease-in-out infinite alternate-reverse;
}

@keyframes sumi-drift-a {
  from { transform: translateX(-5%); }
  to { transform: translateX(7%); }
}

@keyframes sumi-drift-b {
  from { transform: translateX(6%); }
  to { transform: translateX(-7%); }
}

/* ------------------------------ the hero ------------------------------ */

.hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.35rem;
  margin: 0;
  z-index: 1;
}

.hero__eyebrow {
  margin: 0;
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* The floor has to stay under the viewport term, or a long single-word name --
   "Kusumaningrum" -- is held at a size that cannot fit 320px and is clipped by
   the sheet. break-word is the backstop for a name longer still: wrapping is
   ugly, vanishing is worse. */
.hero__names {
  max-width: 15ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 11.5vw, 4.9rem);
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.04;
  overflow-wrap: break-word;
}

.hero__separator {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.82em;
}

.hero__cover-photo {
  display: block;
  width: min(68vw, 15rem);
  aspect-ratio: 4 / 5;
  margin: 0.25rem 0 0.75rem;
  border: 8px solid var(--paper-raised);
  border-radius: 2px;
  box-shadow: var(--shadow-print);
  object-fit: cover;
}

.hero__date {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__welcome {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.65;
}

.sumi__sweep {
  width: min(64vw, 15rem);
  height: auto;
  color: var(--ink);
  fill: currentColor;
  opacity: 0.8;
  z-index: 1;
}

.sumi__cue {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  z-index: 1;
}

.sumi__cue-line {
  width: 1px;
  height: 2.6rem;
  background: var(--mist);
  opacity: 0.55;
}

/* ------------------------------ the breath (countdown) ------------------------------ */

.sumi__breath {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 6rem 1.5rem;
  text-align: center;
}

.sumi__enso {
  position: absolute;
  inset: 0;
  width: 21rem;
  max-width: 88vw;
  height: auto;
  margin: auto;
  color: var(--ink);
  opacity: 0.3;
  pointer-events: none;
}

.sumi__breath-label {
  margin: 0;
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.countdown {
  position: relative;
}

.countdown__remaining {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8.5vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
}

.countdown__remaining--source {
  display: none;
}

.sumi-countdown__units {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 2.2rem;
}

.sumi-countdown__unit {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.sumi-countdown__value {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.sumi-countdown__value.is-changing {
  animation: sumi-countdown-tick 0.6s ease-out both;
}

@keyframes sumi-countdown-tick {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.sumi-countdown__label {
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sumi-countdown__status {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8.5vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
}

/* ------------------------------ sections ------------------------------ */

.sumi__pair,
.sumi__story,
.sumi__gathering,
.sumi__circle,
.sumi__keepsakes,
.sumi__notes {
  padding: 4.25rem 1.5rem;
}

.sumi__head {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  margin-bottom: 3rem;
  text-align: center;
}

.sumi__head-mark {
  width: 2.4rem;
  height: auto;
  color: var(--ink);
  fill: currentColor;
  opacity: 0.85;
}

.sumi__heading {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* ------------------------------ story ------------------------------ */

.story {
  display: grid;
  gap: 3rem;
}

.story__introduction {
  max-width: 34ch;
  margin: 0 auto;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
}

.story__introduction > :first-child {
  margin-top: 0;
}

.story__introduction > :last-child {
  margin-bottom: 0;
}

.story__introduction a {
  color: var(--ink);
  text-underline-offset: 0.22em;
}

.story__milestones {
  display: grid;
  gap: 3.25rem;
}

.story__milestone {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
}

.story__milestone + .story__milestone::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  margin-bottom: 2.25rem;
  background: var(--line);
  order: -1;
}

.story__milestone-photo {
  display: block;
  width: min(100%, 15rem);
  aspect-ratio: 4 / 5;
  margin-bottom: 0.9rem;
  border: 7px solid var(--paper-raised);
  border-radius: 2px;
  box-shadow: var(--shadow-print);
  object-fit: cover;
}

.story__milestone-date {
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.story__milestone-title {
  margin: 0.15rem 0 0.35rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.story__milestone-description {
  max-width: 36ch;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.7;
}

.story__milestone-description > :first-child {
  margin-top: 0;
}

.story__milestone-description > :last-child {
  margin-bottom: 0;
}

/* ------------------------------ events ------------------------------ */

.event-schedule {
  display: grid;
  gap: 3.25rem;
}

.event-schedule__event {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  text-align: center;
}

.event-schedule__event + .event-schedule__event::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  margin-bottom: 2.25rem;
  background: var(--line);
  order: -1;
}

.event-schedule__title {
  margin: 0 0 0.35rem;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
}

.event-schedule__time {
  display: block;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.event-schedule__time-separator {
  padding: 0 0.4em;
}

.event-schedule__dress-code {
  display: block;
  margin-top: 0.3rem;
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.event-schedule__location {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  margin-top: 0.85rem;
}

.event-schedule__venue {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
}

.event-schedule__address {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.event-schedule__description {
  max-width: 38ch;
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

.event-schedule__description > :first-child {
  margin-top: 0;
}

.event-schedule__description > :last-child {
  margin-bottom: 0;
}

.event-schedule__directions {
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ------------------------------ wedding party ------------------------------ */

/* ------------------------------ couple ------------------------------ */

.couple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2.5rem 1.75rem;
}

.couple__partner {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.35rem;
  text-align: center;
}

.couple__portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 0.85rem;
  border: 6px solid var(--paper-raised);
  border-radius: 2px;
  box-shadow: var(--shadow-print);
  object-fit: cover;
}

.couple__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
}

.couple__label {
  display: block;
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.couple__bio {
  margin: 0.5rem 0 0;
  max-width: 24rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

.couple__bio > :first-child { margin-top: 0; }
.couple__bio > :last-child { margin-bottom: 0; }

.wedding-party {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 2rem 1.25rem;
}

.wedding-party__person {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.35rem;
  text-align: center;
}

.wedding-party__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 0.75rem;
  border: 6px solid var(--paper-raised);
  border-radius: 2px;
  box-shadow: var(--shadow-print);
  object-fit: cover;
}

.wedding-party__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.wedding-party__role {
  display: block;
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wedding-party__group {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
}

.wedding-party__bio {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ------------------------------ gallery ------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 1.25rem;
}

.gallery__item {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  margin: 0;
}

.gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 6px solid var(--paper-raised);
  border-radius: 2px;
  box-shadow: var(--shadow-print);
  object-fit: cover;
}

.gallery__caption {
  color: var(--ink-soft);
  font-size: 1rem;
  font-style: italic;
  text-align: center;
}

/* ------------------------------ guest information ------------------------------ */

.guest-information {
  display: grid;
  gap: 2.75rem;
}

.guest-information__faqs,
.guest-information__travel,
.guest-information__gifts {
  display: grid;
  gap: 1.75rem;
}

.guest-information__faq {
  text-align: left;
}

.guest-information__question {
  margin: 0;
}

.guest-information__question-button {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  color: var(--ink);
  background: none;
  border: 0;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.guest-information__question-button::after {
  content: "+";
  flex-shrink: 0;
  color: var(--ink-soft);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
}

.guest-information__question-button[aria-expanded="true"]::after {
  content: "–";
}

.guest-information__answer-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s ease;
}

.guest-information__answer-wrap[data-collapsed] {
  grid-template-rows: 0fr;
}

.guest-information__answer {
  overflow: hidden;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

.guest-information__answer > :first-child {
  margin-top: 0.25rem;
}

.guest-information__travel-item,
.guest-information__gift {
  display: grid;
  justify-items: start;
  gap: 0.3rem;
  text-align: left;
}

/* A small printed keepsake, not a plain paragraph — the same soft print
   shadow the gallery photos carry, so the registry reads as a kept object
   rather than another travel row set in body type. */
.guest-information__gift {
  padding: 1.35rem 1.5rem;
  background: var(--paper-raised);
  border-radius: 2px;
  box-shadow: var(--shadow-print);
}

.guest-information__travel-title,
.guest-information__gift-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 400;
}

.guest-information__travel-description,
.guest-information__gift-description {
  max-width: 56ch;
  margin: 0.2rem 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

.guest-information__travel-link,
.guest-information__gift-link {
  display: inline-block;
  margin-top: 0.55rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ------------------------------ reply ------------------------------ */

.sumi__reply {
  position: relative;
  padding: 4.5rem 1.5rem 5.5rem;
  background: linear-gradient(180deg, rgba(237, 241, 242, 0) 0, var(--sky-low) 22%, var(--sky-high) 100%);
  overflow: clip;
}

.sumi__clouds--reply .sumi__cloud--d {
  width: 52%;
  top: 1%;
  right: -9%;
  opacity: 1;
  animation: sumi-drift-b 38s ease-in-out infinite alternate;
}

.sumi__clouds--reply .sumi__cloud--e {
  width: 40%;
  top: 10%;
  left: -7%;
  fill: var(--cloud-far);
  filter: blur(7px);
  opacity: 0.85;
  animation: sumi-drift-a 45s ease-in-out infinite alternate-reverse;
}

.rsvp-widget {
  position: relative;
  display: grid;
  gap: 1.5rem;
  max-width: 23rem;
  margin: 0 auto;
  text-align: left;
  z-index: 1;
}

.rsvp-widget__title {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  text-align: center;
}

.rsvp-widget__form {
  display: grid;
  gap: 1.4rem;
}

.rsvp-widget__field {
  display: grid;
  gap: 0.45rem;
}

.rsvp-widget__label {
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rsvp-widget__choices {
  display: flex;
  gap: 1.75rem;
}

.rsvp-widget__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 1.08rem;
}

.rsvp-widget__choice input {
  accent-color: var(--ink);
}

.rsvp-widget__input {
  width: 100%;
  padding: 0.6rem 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-serif);
  font-size: 1.12rem;
}

.rsvp-widget__input::placeholder {
  color: var(--mist);
  font-style: italic;
  opacity: 0.8;
}

.rsvp-widget__input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.rsvp-widget__submit {
  margin-top: 0.5rem;
  padding: 0.95rem 1.75rem;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.rsvp-widget__submit:hover {
  background: var(--ink-soft);
  transform: translateY(-1px);
}

.rsvp-widget__submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ------------------------------ coda ------------------------------ */

.sumi__coda {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: 5rem;
  text-align: center;
  z-index: 1;
}

.sumi__coda-mark {
  width: 2.1rem;
  height: auto;
  color: var(--ink);
  fill: currentColor;
  opacity: 0.7;
}

.sumi__coda-line {
  margin: 0;
  color: var(--ink);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 300;
}

.sumi__coda-top {
  margin-top: 0.5rem;
  color: var(--mist);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.sumi__coda-top:hover {
  color: var(--ink);
}

/* ------------------------------ reveal & draw-on ------------------------------ */

.sumi-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

.sumi-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.sumi-js .sumi__head-mark {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s ease 0.3s;
}

.sumi-js .is-revealed .sumi__head-mark {
  clip-path: inset(0 0 0 0);
}

.sumi-js .sumi__sweep {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s ease 0.15s;
}

.sumi-js .sumi__sweep.is-revealed {
  clip-path: inset(0 0 0 0);
}

.sumi-js .sumi__enso {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s ease 0.1s;
}

.sumi-js .sumi__enso.is-revealed {
  stroke-dashoffset: 0;
}

/* ------------------------------ motion & collapse ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sumi__cloud {
    animation: none;
  }

  .sumi-js [data-reveal],
  .sumi-js .sumi__head-mark,
  .sumi-js .sumi__sweep,
  .sumi-js .sumi__enso {
    transition: none;
  }
}

.sumi__pair:not(:has(.couple__partner)),
.sumi__breath:not(:has(.countdown__remaining)),
.sumi__story:not(:has(.story__introduction, .story__milestone)),
.sumi__gathering:not(:has(.event-schedule__event)),
.sumi__circle:not(:has(.wedding-party__person)),
.sumi__keepsakes:not(:has(.gallery__item)),
.sumi__notes:not(:has(.guest-information *)) {
  display: none;
}

/* ------------------------------ wider frames ------------------------------ */

@container invite-frame (min-width: 40rem) {
  .sumi__sky {
    padding-inline: 3rem;
  }

  .sumi__pair,
  .sumi__story,
  .sumi__gathering,
  .sumi__circle,
  .sumi__keepsakes,
  .sumi__notes {
    padding: 5rem 3rem;
  }

  .sumi__reply {
    padding-inline: 3rem;
  }

  .sumi__heading {
    font-size: 2.2rem;
  }

  .hero__cover-photo {
    width: 19rem;
  }
}