/* Place cards, the sheet. Portrait Letter by default, A4 under html.a4 (the
   runtime swaps the @page rule). Six tent cards, two across and three down:
   one cut down the middle, two across, then each card folds in half along
   its marks. The lower half is the front; the upper half is the back, turned
   over so that once the card stands it reads the right way up from across
   the table. Set to match the wedding invitation, the reply card and the
   menu. Colors only through --t-*; static font instances only. */

@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; 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: 8.5in; height: 11in; 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;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
html.a4 .sheet { width: 210mm; height: 297mm; }
/* A longer list is more sheets, each on its own page. */
.more > .sheet { break-before: page; page-break-before: always; }

/* The cards tile the whole sheet: their outer edges are the paper's own, so only three cuts are needed. */
.grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
.card { display: grid; grid-template-rows: 1fr 1fr; min-width: 0; min-height: 0; }
.panel { position: relative; min-width: 0; min-height: 0; display: flex; }
.panel.back { grid-row: 1; transform: rotate(180deg); }
.panel.front { grid-row: 2; }

/* The face sits a little above the middle of its half, so the bottom row keeps clear of the paper's edge.
   On the back, turned over, the same padding keeps the top row clear of the top edge. 0.5in each side keeps
   the longest name inside the safe margin on the outer cards and centered on every card. */
.face { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.1in 0.5in 0.3in; box-sizing: border-box; text-align: center; }

.orn { display: none; width: 1.15in; height: 0.19in; margin-bottom: 0.06in; overflow: visible; }
.orn path, .orn circle { fill: none; stroke: var(--t-accent); stroke-width: 0.9; stroke-linecap: round; }
.orn .leaf, .orn circle { fill: var(--t-accent); stroke: none; }
.sheet[data-v-ornament="Sprig"] .orn.sprig, .sheet[data-v-ornament="Rule"] .orn.rule { display: block; }

.guest { margin: 0; width: 100%; height: 1.2em; font: italic 500 20pt/1.2 "Newsreader", Georgia, serif; color: var(--t-ink); white-space: nowrap; overflow: hidden; }
.event { margin: 0.07in 0 0; width: 100%; height: 1.5em; font: 500 7.5pt/1.5 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-muted); white-space: nowrap; overflow: hidden; }

/* Cut lines, dashed, between the paper's 0.5in margins; solid marks outside them; dotted fold marks at each
   card's outer edge. All of it lands on an edge or a crease, so none of it shows on a finished card. */
.cut { position: absolute; }
.cut.v { top: 0.5in; bottom: 0.5in; left: 50%; border-left: 0.5pt dashed var(--t-muted); }
.cut.h1, .cut.h2 { left: 0.5in; right: 0.5in; border-top: 0.5pt dashed var(--t-muted); }
.cut.h1 { top: 33.3333%; } .cut.h2 { top: 66.6667%; }
.mark { position: absolute; }
.mark.t, .mark.b { left: 50%; height: 0.3in; border-left: 0.5pt solid var(--t-ink); }
.mark.t { top: 0.12in; } .mark.b { bottom: 0.12in; }
.mark.l1, .mark.r1, .mark.l2, .mark.r2 { width: 0.3in; border-top: 0.5pt solid var(--t-ink); }
.mark.l1, .mark.r1 { top: 33.3333%; } .mark.l2, .mark.r2 { top: 66.6667%; }
.mark.l1, .mark.l2 { left: 0.12in; } .mark.r1, .mark.r2 { right: 0.12in; }
.fold { position: absolute; left: 0; right: 0; height: 0; }
.fold.f1 { top: 16.6667%; } .fold.f2 { top: 50%; } .fold.f3 { top: 83.3333%; }
.fold::before, .fold::after { content: ""; position: absolute; top: 0; width: 0.25in; border-top: 0.75pt dotted var(--t-muted); }
.fold::before { left: 0.15in; } .fold::after { right: 0.15in; }

/* The credit sits at the top edge, on the back of the first row, never on a face a guest reads. */
.foot { position: absolute; left: 0.5in; right: 0.5in; top: 0.16in; font-size: 7pt; line-height: 1.6; color: var(--t-muted); display: flex; justify-content: space-between; align-items: flex-start; }
.ruler { width: 1in; border-bottom: 0.5pt solid var(--t-muted); font-size: 6.5pt; color: var(--t-muted); text-align: center; }