/* Wedding invitation, the sheet. Landscape Letter by default, A4 landscape
   under html.a4 (the runtime swaps the @page rule). Two 5 by 7 inch cards
   side by side, the same card twice. The cards sit in the middle of the
   sheet, smaller than their half of it, so five cuts bring them to size:
   three down (left edge, between the cards, right edge) and two across
   (top, bottom). Every cut has a short mark at each end, in the margins.
   The marks are placed from the sheet's center, so they fall on the cards'
   corners on A4 as well as Letter. No line is drawn on the outer trims: a
   line there leaves a sliver on the card when a cut is a hair off. Colors
   only through --t-*; static font instances only. */

@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; 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 landscape; margin: 0; }

:root { --t-paper: #fffdf8; --t-ink: #1f1b14; --t-accent: #9a7b2f; --t-muted: #8c8270; }
html, body { margin: 0; padding: 0; background: #fff; }
[hidden] { display: none !important; }

.sheet {
  width: 11in; height: 8.5in; box-sizing: border-box; position: relative; overflow: hidden;
  background: var(--t-paper); color: var(--t-ink);
  font: 400 10pt/1.5 "Inter Tight", system-ui, sans-serif;
  display: flex; justify-content: center; align-items: center; gap: 0; padding: 0.75in 0.5in;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
html.a4 .sheet { width: 297mm; height: 210mm; }

.cut { position: absolute; top: calc(50% - 3.5in); height: 7in; left: 50%; border-left: 0.5pt dashed var(--t-muted); }
/* Trim marks: 0.2in long, starting 0.08in (top and bottom) or 0.1in (sides) outside the card, clear of the inch mark at the foot. */
.mark { position: absolute; }
.mark.v { width: 0; height: 0.2in; border-left: 0.5pt solid var(--t-ink); }
.mark.h { height: 0; width: 0.2in; border-top: 0.5pt solid var(--t-ink); }
.mark.v.t { top: calc(50% - 3.78in); } .mark.v.b { top: calc(50% + 3.58in); }
.mark.v.x0 { left: calc(50% - 5in); } .mark.v.x1 { left: 50%; } .mark.v.x2 { left: calc(50% + 5in); }
.mark.h.l { left: calc(50% - 5.3in); } .mark.h.r { left: calc(50% + 5.1in); }
.mark.h.y0 { top: calc(50% - 3.5in); } .mark.h.y1 { top: calc(50% + 3.5in); }

/* The frame sits a quarter inch inside the trim on all four sides, so a 5 by 7 cut never touches it. */
.card { width: 5in; height: 7in; flex: none; padding: 0.25in; box-sizing: border-box; display: flex; }
.inner { flex: 1; border: 0.75pt solid var(--t-accent); outline: 0.5pt solid var(--t-accent); outline-offset: 3pt; padding: 0.45in 0.35in; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; }
.line { margin: 0; font: italic 500 11pt/1.4 "Newsreader", Georgia, serif; color: var(--t-muted); white-space: nowrap; overflow: hidden; max-width: 3.9in; height: 1.4em; }
.names { margin: 0.12in 0; display: flex; flex-direction: column; align-items: center; gap: 2pt; }
.names span { font: 500 24pt/1.2 "Newsreader", Georgia, serif; color: var(--t-ink); white-space: nowrap; overflow: hidden; max-width: 3.9in; height: 1.2em; letter-spacing: -0.01em; }
.names i { font: italic 500 18pt/1 "Newsreader", Georgia, serif; color: var(--t-accent); }
.rule { width: 1.2in; border-bottom: 0.75pt solid var(--t-accent); margin: 0.2in 0; }
.when { margin: 0; font: 500 8.5pt/1.6 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-ink); }
.time { margin: 2pt 0 0; font: italic 500 11pt/1.4 "Newsreader", Georgia, serif; color: var(--t-muted); white-space: nowrap; overflow: hidden; max-width: 3.9in; height: 1.4em; }
.venue { margin: 0.14in 0 0; font: 500 12.5pt/1.3 "Newsreader", Georgia, serif; color: var(--t-ink); white-space: nowrap; overflow: hidden; max-width: 3.9in; height: 1.3em; }
.addr { margin: 2pt 0 0; font-size: 9pt; color: var(--t-muted); white-space: nowrap; overflow: hidden; max-width: 3.9in; height: 1.5em; }
.after { margin: 0.16in 0 0; font: italic 500 10.5pt/1.4 "Newsreader", Georgia, serif; color: var(--t-ink); white-space: nowrap; overflow: hidden; max-width: 3.9in; height: 1.4em; }
.rsvp { margin: 0.14in 0 0; font: 500 7.5pt/1.6 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-accent); white-space: nowrap; overflow: hidden; max-width: 3.9in; height: 1.6em; }

.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; }