/* The save the date is one printed card. Every size below is a fraction of the photo's
   width (cqw), taken from the 1429 × 2000 design, so the card scales as a single piece. */

:root {
  --paper: #f6f4f0;
  --ink: #111;
}

* { box-sizing: border-box; margin: 0; }

html { background: var(--paper); }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(1.5rem, env(safe-area-inset-top)) 0 max(1.5rem, env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Twice as much paper below as above, so the wording, not the photo, sits around the middle. */
body::before { content: ''; flex: 1 1 0; }
body::after { content: ''; flex: 2 1 0; }

.card {
  /* On a phone the card is 75.6% of the width, as designed. On a wide window it is sized from the
     height instead, so it fills the same share of the screen as it does of the printed sheet,
     whatever the resolution. */
  width: min(75.6vw, 54svh);
  container-type: inline-size;
  text-align: center;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 800;
  object-fit: cover;
  background: #1b1b1b;
}

.names,
.date,
.follow { white-space: nowrap; }

.names {
  margin-top: 3.6cqw;
  font-size: 3.85cqw;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.055em;
  /* Letter-spacing trails the last glyph; pull it back so the line centres under the photo. */
  margin-right: -0.055em;
  text-transform: uppercase;
}

/* The title is lettering traced from the design, not a font: see tools/trace-title.py. */
.title {
  margin-top: 9.6cqw;
  line-height: 0;
}

.title-art {
  display: block;
  /* The ink is 71.4% of the photo's width in the design, and 0.99 of the SVG's own width. */
  width: 72.1cqw;
  height: auto;
  margin: 0 auto;
  fill: currentColor;
  overflow: visible;
}

.date {
  margin-top: -0.4cqw;
  font-size: 8cqw;
  line-height: 1.1;
  letter-spacing: 0.05em;
  margin-right: -0.05em;
  font-variant-numeric: oldstyle-nums;
}

.follow {
  margin-top: 4.1cqw;
  font-size: 5.9cqw;
  line-height: 1.2;
  font-style: italic;
  letter-spacing: 0.06em;
  margin-right: -0.06em;
}

/* The only motion on the page: the title is written out. Each .pen path follows the middle of
   the lettering in the order a hand would write it, and is used as a mask, so the ink appears
   under the pen. It starts once the page and fonts have loaded (the script in <head> adds
   .ready), and it plays under reduced-motion too, as nothing moves. Without JavaScript the
   title is simply there. */
.pen {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

.js .pen {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js.ready .pen {
  animation: write var(--t) cubic-bezier(0.4, 0.1, 0.55, 1) var(--d) forwards;
  /* A beat after the page appears before the pen touches the paper. */
  animation-delay: calc(0.4s + var(--d));
}

@keyframes write {
  to { stroke-dashoffset: 0; }
}