/* Birthday invitation, the sheet. Portrait Letter by default, A4 under
   html.a4 (the runtime swaps the @page rule). Two cards on one sheet, the
   same card twice, one cut across the middle marked in the margins. Each
   card keeps 0.5in from the sheet's edges and 0.25in from the cut. Colors
   only through --t-*; static font instances only. */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/intertight-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/intertight-500.woff2") format("woff2"); font-weight: 500; font-display: block; }

@page { size: Letter; margin: 0; }

:root { --t-paper: #ffffff; --t-ink: #1a1a1a; --t-accent: #8f2d2d; --t-muted: #6b7078; }
html, body { margin: 0; padding: 0; background: #fff; }
[hidden] { display: none !important; }

.sheet {
  width: 8.5in; height: 11in; box-sizing: border-box; position: relative; overflow: hidden;
  background: var(--t-paper); color: var(--t-ink);
  font: 400 10pt/1.4 "Inter Tight", system-ui, sans-serif;
  display: flex; flex-direction: column;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  --line: color-mix(in srgb, var(--t-muted) 45%, transparent);
}
html.a4 .sheet { width: 210mm; height: 297mm; }

/* The cut: a dashed hairline across the gap between the cards, and a mark in each margin. */
.cut { position: absolute; left: 0.5in; right: 0.5in; top: 50%; border-top: 0.5pt dashed var(--t-muted); }
.mark { position: absolute; top: 50%; width: 0.3in; border-top: 0.5pt solid var(--t-ink); }
.mark.l { left: 0.12in; } .mark.r { right: 0.12in; }

.half { flex: 1 1 0; min-height: 0; display: flex; padding: 0.5in 0.5in 0.25in; box-sizing: border-box; }
.half + .half { padding: 0.25in 0.5in 0.5in; }
.card { flex: 1; min-width: 0; border: 1pt solid var(--t-accent); padding: 0.32in 0.45in; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; text-align: center; }

.eyebrow { font: 500 8pt/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: var(--t-muted); }
.who { margin-top: 0.14in; display: flex; align-items: baseline; justify-content: center; gap: 0.16in; }
.name { font: 500 26pt/1.2 "Fraunces", Georgia, serif; color: var(--t-ink); white-space: nowrap; overflow: hidden; max-width: 4.6in; height: 1.2em; }
.turns { font: 500 9pt/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted); }
.age { font: 500 40pt/1.1 "Fraunces", Georgia, serif; color: var(--t-accent); }
.words { margin: 0.1in auto 0; font: 400 10.5pt/1.45 "Inter Tight", system-ui, sans-serif; color: var(--t-ink); max-width: 5.6in; max-height: 2.9em; overflow: hidden; }
.when { margin: 0.18in auto 0; width: 5.4in; text-align: left; }
.kv { display: flex; gap: 0.16in; align-items: baseline; padding: 3pt 0; border-bottom: 0.5pt solid var(--line); }
.kv span { flex: none; width: 0.6in; font: 500 7.5pt/1.5 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted); }
.kv b { flex: 1; min-width: 0; font-weight: 400; font-size: 10.5pt; white-space: nowrap; overflow: hidden; height: 1.5em; }
.kv b.addr { color: var(--t-muted); font-size: 9.5pt; }
.rsvp { margin: 0.16in 0 0; font: italic 500 10.5pt/1.4 "Fraunces", Georgia, serif; font-style: normal; color: var(--t-accent); white-space: nowrap; overflow: hidden; height: 1.4em; }

.foot { position: absolute; left: 0.5in; right: 0.5in; bottom: 0.2in; font-size: 7pt; color: var(--t-muted); display: flex; justify-content: space-between; align-items: flex-end; }
.ruler { width: 1in; border-top: 0.5pt solid var(--t-muted); font-size: 6.5pt; color: var(--t-muted); text-align: center; line-height: 1.6; }