/* The sheets after the first: báo tin, lễ vu quy, tiệc cưới with its strip of
   times, and the stamps they print. Each row of a sheet is a whole number of
   pitches wide; a stamp grows down to hold its fact, and the stamps in a row
   share one height, so their holes still land on one another. */

.sheet--flow .cell {
  grid-column: span var(--m);
  min-height: calc(var(--hm) * var(--p));
}

@media (min-width: 900px) and (orientation: landscape) {
  .sheet--flow .cell {
    grid-column: span var(--d);
    min-height: calc(var(--hd) * var(--p));
  }
}

.sheet--flow .lift {
  position: relative;
  inset: auto;
  height: 100%;
}

.sheet--flow .stamp {
  position: relative;
  inset: auto;
  display: block;
  height: 100%;
  container-type: inline-size;
}

.selvage--flow {
  justify-content: flex-end;
  height: 30px;
}

.selvage--note {
  justify-content: flex-start;
  min-height: 44px;
  height: auto;
  padding-block: 10px;
}

.selvage-note {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 900px) and (orientation: landscape) {
  .selvage--flow {
    height: 40px;
  }

  .selvage--note {
    height: auto;
  }
}

.timeline {
  display: block;
}

/* ---------- shared print pieces ---------- */

.sentence {
  font-weight: 800;
  line-height: 1.02;
}

.sentence-title {
  display: block;
  font-size: max(30px, 9cqi);
  font-stretch: 75%;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}

.venue-name {
  font-size: max(22px, 11cqi);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- báo tin ---------- */

.stamp--announce .print {
  justify-content: flex-end;
  padding: 5cqi 6cqi;
  background: var(--blue);
  color: var(--paper);
}

.announce-title {
  position: relative;
  color: var(--pink);
  font-size: max(40px, 13cqi);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

@container (min-width: 700px) {
  .stamp--announce .print {
    justify-content: center;
  }

  .announce-title {
    font-size: 7.4cqi;
  }
}

.stamp--family .print {
  gap: 4cqi;
  padding: 8cqi 7cqi 7cqi;
}

.stamp--groom .print {
  background: var(--pink);
}

.stamp--bride .print {
  border: max(2px, 0.9cqi) solid var(--blue);
}

.stamp--family .stamp-title {
  font-size: max(22px, 11cqi);
}

.parents {
  font-size: max(15px, 6.2cqi);
  font-weight: 500;
  line-height: 1.32;
}

.parents b {
  font-weight: 800;
}

.stamp--family .stamp-note {
  margin-top: auto;
  font-size: max(13px, 4.6cqi);
}

/* ---------- photo stamps ---------- */

.stamp--photo .print,
.stamp--shot .print {
  display: grid;
  place-items: center;
  background: var(--pink);
}

.placeholder {
  color: var(--blue);
  font-size: max(18px, 12cqi);
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.stamp--photo img,
.stamp--shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.is-failed img,
img.is-failed {
  display: none;
}

/* ---------- lễ vu quy ---------- */

.stamp--ceremony-title .print {
  gap: 3cqi;
  padding: 8cqi 7cqi 7cqi;
  background: var(--pink);
}

.stamp--ceremony-title .stamp-title {
  font-size: max(22px, 12cqi);
}

.stamp--ceremony-title .stamp-value {
  margin-top: auto;
  font-size: max(46px, 30cqi);
}

.stamp--ceremony-title .stamp-note,
.stamp--venue .stamp-note {
  font-size: max(13px, 4.6cqi);
}

.stamp--venue .print {
  gap: 3cqi;
  padding: 8cqi 7cqi 7cqi;
  border: max(2px, 0.9cqi) solid var(--blue);
}

.stamp--venue .venue-name {
  margin-block: auto;
}

.stamp--venue-wide .venue-name {
  margin-block: 0;
  font-size: max(26px, 8.6cqi);
}

.stamp--venue-wide .print {
  gap: 2cqi;
  padding: 6cqi;
}

.stamp--venue-wide .stamp-note {
  font-size: max(14px, 3.6cqi);
}

.venue-invite {
  margin-bottom: 1cqi;
  font-size: max(15px, 3.8cqi);
  font-weight: 600;
  line-height: 1.35;
}

.venue-room {
  font-weight: 800;
}

.venue-region {
  margin-top: auto;
}

/* ---------- tiệc cưới ---------- */

.stamp--reception-head .print {
  justify-content: flex-end;
  padding: 7cqi 6cqi 6cqi;
  background: var(--blue);
  color: var(--paper);
}

.reception-invite {
  max-width: 36ch;
  margin-top: 3cqi;
  color: var(--pink);
  font-size: max(16px, 3.6cqi);
  font-weight: 600;
  line-height: 1.35;
}

.stamp--time .stamp-note {
  font-size: max(13px, 6cqi);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sheet--flow .stamp--time .print {
  gap: 2cqi;
  justify-content: flex-start;
  padding: 9cqi 8cqi 8cqi;
}

.sheet--flow .stamp--time .stamp-value {
  margin-bottom: auto;
  font-size: max(40px, 30cqi);
}

.sheet--flow .stamp--time .stamp-title {
  font-size: max(14px, 9cqi);
}

/* a stamp that is an action: tap it to go */
.stamp--action {
  width: 100%;
  padding: calc(var(--p) * 0.72);
  border: 0;
  background: var(--paper);
  color: var(--blue);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.stamp--action:focus-visible {
  outline-offset: calc(var(--p) * -0.5 + 3px);
}

@media (hover: hover) {
  .stamp--action:hover {
    transform: translateY(-2px) rotate(-0.8deg);
  }
}

.stamp--action .print {
  justify-content: space-between;
  gap: 6px;
  padding: 10px;
  background: var(--pink);
}

.stamp--action .icon {
  width: 26px;
  height: 26px;
}

.stamp--action-blue .print {
  background: var(--blue);
  color: var(--paper);
}

.action-label {
  font-size: max(14px, 9cqi);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.05;
  text-transform: uppercase;
}

.stamp--action-row .print {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-inline: 16px;
}

.stamp--action-row .action-label {
  font-size: max(18px, 6cqi);
}

/* the strip of times */
.stamp--slot .print {
  justify-content: space-between;
  gap: 4px;
  padding: 7cqi 8cqi;
  background: var(--pink);
}

.cell--slot:nth-child(even) .stamp--slot .print {
  background: var(--blue);
  color: var(--paper);
}

.stamp--slot .stamp-value {
  font-size: max(24px, 15cqi);
  letter-spacing: 0;
}

.slot-label {
  font-size: max(14px, 7.4cqi);
  font-weight: 700;
  line-height: 1.15;
}