/* The stamps on the sheet: where each sits (in whole pitches) and how each is
   printed. Type inside a stamp is sized to the stamp, so a torn stamp read
   large keeps exactly the same composition. */

/* phone: rows of 7 · 33 · 7 · 9 pitches */
.cell--ceremony {
  grid-area: 1 / 1 / 8 / 16;
}
.cell--time {
  grid-area: 1 / 16 / 8 / 29;
}
.cell--couple {
  grid-area: 8 / 1 / 41 / 29;
}
.cell--countdown {
  grid-area: 41 / 1 / 48 / 29;
}
.cell--reception {
  grid-area: 48 / 1 / 57 / 17;
}
.cell--week {
  grid-area: 48 / 17 / 57 / 29;
}

/* desktop: the couple leads from the middle, the facts flank it */
@media (min-width: 900px) and (orientation: landscape) {
  .cell--ceremony {
    grid-area: 1 / 1 / 17 / 19;
  }
  .cell--countdown {
    grid-area: 17 / 1 / 29 / 19;
  }
  .cell--time {
    grid-area: 29 / 1 / 47 / 19;
  }
  .cell--couple {
    grid-area: 1 / 19 / 47 / 51;
  }
  .cell--reception {
    grid-area: 1 / 51 / 29 / 69;
  }
  .cell--week {
    grid-area: 29 / 51 / 47 / 69;
  }
}

/* ---------- every stamp ---------- */

.stamp {
  position: absolute;
  inset: 0;
  padding: calc(var(--p) * 0.72);
  background: var(--paper);
  container-type: size;
}

.print {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.stamp-title {
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

.stamp-value {
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.9;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.stamp-note {
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

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

.stamp--couple .print {
  background: var(--blue);
}

.photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--pink);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

.band {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3cqi;
  padding: 4.5cqi 5cqi 4cqi;
  color: var(--paper);
}

.names {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  font-size: calc(15cqi * var(--fit, 1));
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.name {
  display: block;
  padding-top: 0.08em;
  white-space: nowrap;
}

.amp {
  color: var(--pink);
  font-weight: 700;
  font-stretch: 100%;
}

.value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3cqi;
  padding-top: 2.6cqi;
  border-top: max(1.5px, 0.5cqi) solid var(--pink);
  color: var(--pink);
}

.value-label {
  font-size: max(12px, 3.6cqi);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.value-date {
  font-size: 8cqi;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) and (orientation: landscape) {
  .names {
    font-size: calc(16.5cqi * var(--fit, 1));
  }
}

/* ---------- lễ vu quy: pink field ---------- */

.stamp--ceremony .print {
  display: grid;
  grid-template: "title title" auto "note value" 1fr / 1fr auto;
  align-items: start;
  gap: 2cqi 4cqi;
  padding: 6cqi 6cqi 5cqi;
  background: var(--pink);
}

.stamp--ceremony .stamp-title {
  grid-area: title;
  font-size: min(11cqi, 24cqh);
}

.stamp--ceremony .stamp-value {
  grid-area: value;
  align-self: end;
  font-size: min(30cqi, 44cqh);
}

.stamp--ceremony .stamp-note {
  grid-area: note;
  align-self: end;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: max(12px, min(5.4cqi, 13cqh));
}

/* ---------- the hour: cobalt field ---------- */

.stamp--time .print {
  justify-content: space-between;
  padding: 6cqi 7cqi;
  background: var(--blue);
  color: var(--paper);
}

.stamp--time .stamp-value {
  font-size: min(32cqi, 56cqh);
}

.stamp--time .stamp-title {
  color: var(--pink);
  font-size: max(12px, min(9cqi, 18cqh));
  letter-spacing: 0.04em;
}

.stamp--time-hero .print {
  display: grid;
  grid-template:
    "label day" auto
    "value value" 1fr / auto 1fr;
  align-items: start;
  gap: 2cqi 3cqi;
}

.stamp--time-hero .stamp-title--top {
  grid-area: label;
  color: var(--paper);
}

.stamp--time-hero [data-weekday] {
  grid-area: day;
  justify-self: end;
}

.stamp--time-hero .stamp-value {
  grid-area: value;
  align-self: end;
}

.stamp--time-hero.is-tight .stamp-value {
  font-size: min(32cqi, 44cqh);
}

/* the slab feet of a doubled 1 must not touch once the hour prints large */
@container (min-width: 240px) {
  .stamp--time-hero .stamp-value {
    letter-spacing: 0.04em;
  }
}

/* ---------- the reception: paper field, cobalt frame line ---------- */

.stamp--reception .print {
  justify-content: space-between;
  gap: 2cqi;
  padding: 5cqi 6cqi;
  border: max(2px, 0.9cqi) solid var(--blue);
}

.stamp--reception .stamp-title {
  font-size: min(13cqi, 22cqh);
  line-height: 0.94;
}

.stamp--reception .stamp-note {
  font-size: max(12px, min(5cqi, 11cqh));
}

/* ---------- the wedding week: cobalt field ---------- */

.stamp--week .print {
  justify-content: space-between;
  padding: 7cqi 6cqi 6cqi;
  background: var(--blue);
  color: var(--paper);
}

.stamp--week .stamp-title {
  color: var(--pink);
  font-size: max(12px, min(9cqi, 15cqh));
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 1.6cqi;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.month li {
  display: grid;
  place-items: center;
}

.month .weekday {
  padding-bottom: 1cqi;
  font-stretch: 75%;
  font-size: max(9px, min(5.6cqi, 9cqh));
  font-weight: 700;
  color: var(--pink);
}

.month .day {
  justify-self: center;
  width: 12.4cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: min(8cqi, 14cqh);
  font-weight: 800;
  font-stretch: 75%;
}

/* a phone's stamp is too short for a month: it keeps the wedding week */
.month .day:not(.in-week) {
  display: none;
}

.month .is-wedding {
  background: var(--pink);
  color: var(--blue);
}

@media (min-width: 900px) and (orientation: landscape) {
  .stamp--week .stamp-title {
    font-size: 11cqi;
  }

  .month .day:not(.in-week) {
    display: grid;
  }

  .month .weekday {
    font-size: 5.4cqi;
  }

  .month .day {
    font-size: 7.4cqi;
  }

  .stamp--reception .stamp-title {
    font-size: 17cqi;
  }

  .stamp--reception .stamp-note {
    font-size: 5.6cqi;
  }
}

/* ---------- the countdown: one value stamp, days large, the clock below ---------- */

.stamp--count .print {
  justify-content: space-between;
  gap: 2cqi;
  padding: 5cqi 6cqi;
  background: var(--pink);
}

.count-days {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
}

.count-num {
  font-size: min(22cqi, 44cqh);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.count-unit {
  font-size: max(13px, min(7cqi, 14cqh));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.count-clock {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0 0.7em;
  font-size: max(14px, min(7cqi, 15cqh));
  font-weight: 800;
  font-stretch: 85%;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.count-small {
  font-weight: 600;
  text-transform: lowercase;
}

/* when the unit words run longer (another language), the three parts stand as
   even columns, unit under value, rather than one of them wrapping alone */
.count-clock.is-stacked {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 0.9em;
  line-height: 1.05;
}

.count-clock.is-stacked .count-part {
  display: grid;
}

.count-clock.is-stacked .count-small {
  font-size: max(11px, min(4.2cqi, 11cqh));
}

/* phone: the strip is long and low, so days and clock sit side by side */
@container (min-aspect-ratio: 3 / 1) {
  .stamp--count .print {
    flex-direction: row;
    align-items: flex-end;
  }

  .count-clock {
    justify-content: flex-end;
  }
}

/* a short stamp keeps its facts; the lead-in line returns when it is torn out large */
@container (max-height: 80px) {
  .stamp--reception .stamp-note--lead {
    display: none;
  }
}