/* Paper objects on the linen: the five things as they print, standing on one
   baseline. Shared by the landing page, the sample and the unlocked overview,
   so the thing in the shop window and the thing a family bought are drawn by
   the same rules. Each .stage is a fixed-height shelf; the object inside sits
   on its floor, so five objects of five heights line up along the bottom. */

.stage { height: 360px; display: flex; align-items: flex-end; }
.stage > .g, .stage > .stack { width: 100%; }
a.stage { text-decoration: none; color: inherit; }

.g {
  position: relative; background: #fff; overflow: hidden; color: #1c1a17;
  box-shadow: 0 30px 50px -28px rgba(43,41,38,.5), 0 2px 4px rgba(43,41,38,.12);
  transform-origin: bottom center;
}

/* The booklet, only its outside, only the cover half. The renderer draws the
   whole sheet at twice the width and the left half is pushed out of frame. */
.g.cover { height: 340px; transform: rotate(-1.5deg); }
.g.cover .program { position: absolute; inset: 0; width: 200%; left: -100%; }
.g.cover .program > *:not(div:first-of-type) { display: none; }
.g.cover .sheet { max-width: none; margin: 0; border: 0; box-shadow: none; }
.g.cover .is-editable [data-edit]:hover { background: none; box-shadow: none; }

/* A newspaper clipping. */
.g.tall { height: 340px; background: #fbf8f1; transform: rotate(1.5deg); container-type: inline-size; }
.clip {
  height: 340px; padding: 7cqw 8cqw; overflow: hidden;
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(7px, 4.75cqw, 10px); line-height: 1.4;
  text-align: left; hyphens: auto; color: #1c1a17; background: #fbf8f1;
}
.clip .h {
  display: block; font-family: var(--sans); font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid #1c1a17; padding-bottom: 5px; margin-bottom: 8px; color: #6d665c;
}
.clip img { float: right; width: 38%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; margin: 0 0 6px 8px; filter: grayscale(1); }
.clip p { margin: 0 0 6px; }
.clip b { font-weight: 700; }
.clip mark { background: #efe1c4; color: inherit; }

/* A thank-you card. */
.g.note { height: 284px; transform: rotate(-2deg); container-type: inline-size; }
/* Centred when it fits; when a long wording overflows, the top stays visible
   and the bottom is what is cut, as auto margins collapse to zero. */
.tcard {
  height: 284px; display: flex; flex-direction: column; justify-content: safe center; text-align: center; overflow: hidden;
  padding: 10cqw 11cqw; font-family: var(--serif); font-size: clamp(8px, 6.2cqw, 12px); line-height: 1.55; color: #1c1a17;
}
.tcard p { margin: 0; white-space: pre-line; }
.tcard.theme-modern { font-family: var(--sans); text-align: left; }

/* A prayer card, wallet size. */
.g.prayer {
  height: 142px; transform: rotate(2deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px; font-family: var(--serif); color: #1c1a17;
}
.pc-kicker { font-family: var(--sans); font-size: 6.5px; letter-spacing: .2em; text-transform: uppercase; color: #6d665c; margin-bottom: 5px; }
.g.prayer img { width: 46px; height: 54px; object-fit: cover; object-position: center 25%; margin-bottom: 5px; }
.g.prayer b { font-weight: 400; font-size: 10px; display: block; }
.g.prayer span:last-child { font-size: 7.5px; letter-spacing: .05em; color: #55504a; }

/* The slideshow: a dark frame with the photographs in it, or the title card. */
.g.video { height: 138px; background: #141210; color: #f3ede1; transform: rotate(-1deg); }
.g.video .shots { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.g.video .shots[data-count="1"] { grid-template-columns: 1fr; }
.g.video .shots[data-count="3"] img:first-child { grid-row: 1 / 3; }
.g.video .shots img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; opacity: .92; }
.g.video .time {
  position: absolute; right: .5rem; bottom: .4rem; padding: .1rem .4rem;
  background: rgba(20,18,16,.75); font-family: var(--sans); font-size: .7rem; font-variant-numeric: tabular-nums;
}
.g.video .empty {
  height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; font-family: var(--serif); font-size: 13px; line-height: 1.4; color: #bfb3a0;
}

/* Two loose prints, for the landing page. */
.stack { position: relative; height: 350px; }
.stack .g { position: absolute; left: 0; right: 0; padding: 8px 8px 24px; }
.stack .g img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.stack .g.a { top: 0; transform: rotate(-2.5deg); }
.stack .g.b { top: 150px; transform: rotate(2deg); }

/* The caption under each: number, name, a line about it. */
.gcap { margin-top: 1.4rem; }
.gcap b { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.gcap b .num { margin-right: .5rem; }
.gcap .st { display: block; font-size: .85rem; line-height: 1.5; color: var(--ink-2); margin-top: .3rem; }
.gcap .st.warn { color: var(--warn); }

@media (max-width: 64rem) {
  .stage { height: 300px; }
  .g.cover, .g.tall, .clip { height: 280px; }
  .g.note, .tcard { height: 240px; }
  .stack { height: 290px; } .stack .g.b { top: 120px; }
}
@media (max-width: 34rem) {
  .stage { height: 240px; }
  .g.cover, .g.tall, .clip { height: 220px; }
  .clip { font-size: 8px; }
  .g.note, .tcard { height: 190px; }
  .stack { height: 230px; } .stack .g.b { top: 95px; }
  .g.prayer { height: 110px; }
  .g.video { height: 108px; }
}