/* The pages under the wedding day: báo tin, lễ vu quy, tiệc cưới, the month
   with the day's schedule, the album as a month of photographs, the reply
   that circles the date, and the red back of the pad. Same two inks; each
   page keeps one giant printed figure. */

.page:not(.day) {
  display: flex;
  flex-direction: column;
  padding: calc(var(--stub-h) + 10px) 16px 16px;
}

.giant {
  position: relative;
  display: flex;
  align-self: stretch;
  margin: 14px 0 4px;
  color: var(--red);
  font-family: var(--display);
  font-size: 30svh;
  line-height: 0.82;
}

.giant-text {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  text-box: trim-both cap alphabetic;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the count on the families page says what it counts, right against it */
.giant--days {
  align-items: flex-end;
  gap: 10px;
}

.giant-unit {
  flex: none;
  padding-bottom: 0.1em;
  color: var(--ink);
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
}

.page-title {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 800;
  font-stretch: 85%;
  line-height: 1.15;
  text-wrap: balance;
}

.page-title--big,
.title-main {
  display: block;
  font-family: var(--display);
  font-size: 44px;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.04;
  text-transform: uppercase;
}

.title-lead {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.35;
}

.couple-line {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
}

.couple-line .amp {
  color: var(--red);
  font-weight: 400;
}

.families {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 18px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.family-label {
  margin: 0 0 4px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.parents {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.parents b {
  font-weight: 800;
}

.address,
.room,
.note,
.venue-label {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.venue-label {
  margin-top: 14px;
  font-weight: 600;
}

.venue {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.venue--big {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}

.when {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.when [data-date] {
  color: var(--red);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.btn--line {
  background: var(--paper);
  color: var(--ink);
}

.btn--line:hover {
  background: var(--ink);
  color: var(--paper);
}

.picture {
  position: relative;
  margin: 18px 0 0;
  overflow: hidden;
  background: #e6e0d3;
  aspect-ratio: 4 / 3;
}

.picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.picture.is-failed img {
  visibility: hidden;
}

.page-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto 0 0;
  padding-top: 18px;
}

/* the lịch bloc's short line at the foot of every page */
.foot-line {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.day-foot {
  grid-area: foot;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--ink);
}

.page-foot .btn {
  flex: none;
  margin-left: auto;
}

.back-copy .foot-line {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--paper);
}

/* reception: the venue outranks the title; the title's tail joins the lead */
.page--feast .page-title {
  margin-top: 26px;
}

.page--feast .title-main {
  font-size: 34px;
}

.title-tail {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  font-stretch: 100%;
}

.page--feast .venue--big {
  margin-top: 6px;
  font-size: 46px;
}

.feast-aside .when {
  margin-top: 16px;
}

/* ---------- the month and the schedule ---------- */
.calendar-year {
  color: var(--red);
}

.month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 2px solid var(--ink);
}

.month .weekday {
  padding: 8px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

.month .day-cell {
  display: grid;
  place-items: center;
  position: relative;
  aspect-ratio: 1;
  border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  font-family: var(--display);
  font-size: clamp(20px, 6vw, 30px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.month .is-sunday {
  color: var(--red);
}

.month .is-wedding {
  background: var(--red);
  color: var(--paper);
}

.schedule-block {
  margin-top: 22px;
}

.schedule {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule li {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 2px solid var(--ink);
}

.schedule li:last-child {
  border-bottom: 2px solid var(--ink);
}

.schedule time {
  color: var(--red);
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.schedule span {
  font-size: 17px;
  font-weight: 700;
}

/* ---------- the album: a month of photographs ---------- */
.album-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.giant--count {
  flex: none;
  margin-bottom: 0;
  font-size: 22svh;
}

.album-copy {
  min-width: 0;
  padding-bottom: 2px;
}

.album-copy .page-title {
  margin: 0;
}

.album-sub {
  margin: 4px 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.album-all {
  width: 100%;
  margin-top: 14px;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #e6e0d3;
  aspect-ratio: 4 / 5;
  cursor: zoom-in;
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-day {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 30px;
  padding: 4px 6px 3px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.shot.is-failed img {
  visibility: hidden;
}

.shot.is-failed .shot-day {
  inset: 0;
  display: grid;
  place-items: center;
  background: none;
  font-size: 36px;
}

.shot:focus-visible {
  outline-offset: 2px;
}

/* ---------- the reply: the guest circles the day ---------- */
.giant--marked {
  justify-content: center;
  margin: 26px 0 18px;
  color: var(--ink);
  font-size: 24svh;
}

.marker {
  position: absolute;
  top: -26%;
  left: -30%;
  width: 160%;
  height: 152%;
  overflow: visible;
  fill: none;
  stroke: var(--red);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  pointer-events: none;
  transition:
    stroke-dashoffset 900ms var(--ease-out),
    opacity 0ms linear 900ms;
}

.is-marked .marker {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-out);
}

.reply-copy .page-title {
  margin-top: 0;
}

.reply-form {
  margin-top: 18px;
}

.field-label {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-input {
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 20px / 1.2 var(--text);
}

.field-input::placeholder {
  color: #6b655d;
}

.field-input:focus {
  border-bottom-color: var(--red);
  outline: none;
}

.field-input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.count {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.count-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 6px;
}

.count-chips label {
  position: relative;
  display: block;
  cursor: pointer;
}

.count-chips input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.count-chips span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.count-chips input:checked + span {
  border-color: var(--red);
  background: var(--red);
  color: var(--paper);
}

.count-chips input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.reply-form .btn--rsvp {
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.reply-status {
  min-height: 1.45em;
  margin: 10px 0 0;
  color: var(--red);
  font-size: 15px;
  font-weight: 700;
}

.reply-done {
  margin-top: 18px;
  outline: none;
}

.reply-done-title {
  margin: 0;
  color: var(--red);
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ---------- the red back of the pad ---------- */
.sheet--back .leaf {
  background: var(--red);
  color: var(--paper);
}

.page--back .picture {
  flex: 1 0 280px;
  margin-top: 6px;
  aspect-ratio: auto;
  background: color-mix(in srgb, var(--ink) 25%, var(--red));
}

.back-message {
  margin: 20px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

.back-names [data-name="1"] {
  display: block;
}

.back-names {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(44px, 14vw, 120px);
  line-height: 1;
  text-transform: uppercase;
}

.back-amp {
  color: var(--ink);
}

.back-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin: 26px 0 14px;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.back-mark {
  position: relative;
  padding: 0 4px;
}

.marker--paper {
  top: -34%;
  left: -10%;
  width: 120%;
  height: 168%;
  stroke: var(--paper);
  stroke-width: 4;
  opacity: 1;
  stroke-dashoffset: 0;
  transition: none;
}

.sheet--back .btn,
.sheet--back :focus-visible {
  outline-color: var(--paper);
}

/* ---------- the album viewer ---------- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 64px 12px 84px;
  background: var(--wall);
  color: var(--paper);
}

.viewer-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  margin: 0;
}

.viewer-frame img {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: contain;
}

.viewer-frame.is-failed img {
  visibility: hidden;
}

.viewer-caption {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.viewer-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--paper);
  background: var(--wall);
  color: var(--paper);
  cursor: pointer;
}

.viewer-btn svg {
  width: 24px;
  height: 24px;
}

.viewer-btn:hover {
  background: var(--red);
  border-color: var(--red);
}

.viewer-btn:focus-visible {
  outline-color: var(--paper);
}

.viewer-close {
  top: 8px;
  right: 8px;
}

.viewer-prev {
  bottom: 16px;
  left: calc(50% - 64px);
}

.viewer-next {
  right: calc(50% - 64px);
  bottom: 16px;
}

@media (min-width: 900px) and (min-height: 600px) {
  .page:not(.day) {
    display: grid;
    grid-template:
      "head head" auto
      "giant pic" auto
      "copy pic" 1fr
      "foot foot" auto
      / minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 56px;
    align-content: start;
    padding: calc(var(--stub-h) + 22px) 40px 30px;
  }

  .page-head {
    grid-area: head;
  }

  .giant {
    grid-area: giant;
    margin-top: 22px;
    font-size: min(18vw, 30vh);
  }

  .news-copy,
  .rite-copy,
  .feast-copy,
  .reply-copy,
  .back-copy {
    grid-area: copy;
  }

  /* the photo takes the rows the copy needs, never more */
  .picture {
    grid-area: pic;
    align-self: stretch;
    min-height: 240px;
    margin-top: 22px;
    aspect-ratio: auto;
    contain: size;
  }

  /* the photo runs the full right column; date and actions stay with the venue */
  .page.page--feast {
    grid-template:
      "head head" auto
      "giant pic" auto
      "copy pic" auto
      "aside pic" 1fr
      "foot foot" auto
      / minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .feast-aside {
    grid-area: aside;
    align-self: start;
  }

  .giant-unit {
    font-size: 44px;
  }

  .page--feast .page-title {
    margin-top: 20px;
  }

  .page--feast .title-main {
    font-size: 44px;
  }

  .page--feast .venue--big {
    font-size: 60px;
  }

  .page-foot {
    grid-area: foot;
  }

  .page-title {
    font-size: 26px;
  }

  .news-copy,
  .rite-copy {
    align-self: end;
  }

  .parents {
    font-size: 17px;
  }

  .address,
  .room,
  .note,
  .venue-label {
    font-size: 15px;
  }

  .venue {
    font-size: 24px;
  }

  .page-title--big,
  .title-main {
    font-size: 58px;
  }

  .couple-line,
  .venue--big {
    font-size: 44px;
  }

  .when {
    font-size: 30px;
  }

  .page.page--month {
    grid-template:
      "title title" auto
      "month sched" 1fr
      "foot foot" auto
      / minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .page--month .page-title {
    grid-area: title;
    margin-top: 6px;
  }

  /* on the desktop sheet the month grid is the giant, down to the foot */
  .month {
    grid-area: month;
    grid-template-rows: auto;
    grid-auto-rows: minmax(0, 1fr);
    align-self: stretch;
    margin-top: 18px;
  }

  .month .day-cell {
    aspect-ratio: auto;
    font-size: clamp(34px, 6.4vh, 64px);
  }

  .schedule-block {
    grid-area: sched;
    align-self: end;
    margin-top: 18px;
  }

  .page.page--album {
    grid-template:
      "head" auto
      "albumhead" auto
      "all" auto
      "grid" auto
      "foot" 1fr
      / minmax(0, 1fr);
  }

  .album-head {
    grid-area: albumhead;
    gap: 36px;
  }

  .giant--count {
    margin-top: 20px;
    font-size: min(14vw, 24vh);
  }

  .shot {
    aspect-ratio: 1;
  }

  .album-all {
    grid-area: all;
    justify-self: start;
    width: auto;
  }

  .album-grid {
    grid-area: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
  }

  .page.page--reply {
    grid-template:
      "head head" auto
      "giant copy" 1fr
      "foot foot" auto
      / minmax(0, 1fr) minmax(0, 1fr);
  }

  .giant--marked {
    align-self: center;
    font-size: 46svh;
  }

  .reply-copy {
    align-self: center;
    margin-top: 26px;
  }

  .page.page--back {
    grid-template:
      "copy pic" 1fr
      / minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .back-copy {
    align-self: end;
  }

  .page--back .picture {
    margin-top: 0;
  }

  .back-names {
    font-size: clamp(72px, 12vh, 132px);
  }

  .back-date {
    font-size: 40px;
  }

  .viewer {
    padding: 72px 96px 56px;
  }

  .viewer-close {
    top: 16px;
    right: 16px;
  }

  .viewer-prev {
    top: 50%;
    bottom: auto;
    left: 24px;
    translate: 0 -50%;
  }

  .viewer-next {
    top: 50%;
    right: 24px;
    bottom: auto;
    translate: 0 -50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marker {
    transition: none;
  }
}