/* Gift certificate, the sheet. Landscape Letter by default, A4 landscape
   under html.a4 (the runtime swaps the @page rule). The certificate of
   completion's frames and faces, arranged around a value instead of a name.
   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: #ffffff; --t-ink: #1a1a1a; --t-accent: #9a7b2f; --t-muted: #6b6f76; }
html, body { margin: 0; padding: 0; background: #fff; }
[hidden] { display: none !important; }

.sheet {
  width: 11in; height: 8.5in; padding: 0.5in; box-sizing: border-box; position: relative; overflow: hidden;
  background: var(--t-paper); color: var(--t-ink);
  font: 400 11pt/1.4 "Inter Tight", system-ui, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
html.a4 .sheet { width: 297mm; height: 210mm; }

/* The frame sits inside the 0.5in safe margin. */
.frame { position: absolute; pointer-events: none; }
.frame.outer { inset: 0.5in; border: 1.5pt solid var(--t-accent); }
.frame.inner { inset: 0.58in; border: 0.5pt solid var(--t-accent); opacity: 0.6; }
.sheet[data-v-frame="Modern"] .frame.outer { border: 0; border-left: 8pt solid var(--t-accent); inset: 0.5in; }
.sheet[data-v-frame="Modern"] .frame.inner { border: 0; border-top: 0.5pt solid var(--t-accent); border-bottom: 0.5pt solid var(--t-accent); inset: 0.5in 0.5in 0.5in 0.66in; opacity: 1; }
.sheet[data-v-frame="Plain"] .frame { display: none; }

.body { position: absolute; inset: 0.5in; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.6in 0.9in 1.5in; }
.sheet[data-v-frame="Modern"] .body { padding-left: 1.05in; }

.org { display: flex; flex-direction: column; align-items: center; gap: 4pt; margin-bottom: 0.26in; }
.org img { max-height: 0.55in; max-width: 1.6in; width: auto; }
.org .name { font: 500 9.5pt/1.2 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-muted); white-space: nowrap; overflow: hidden; max-width: 6in; }
.eyebrow { font: 500 9pt/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 0.14in; }
.value { font: 500 46pt/1.1 "Newsreader", Georgia, serif; color: var(--t-accent); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; max-width: 8in; height: 1.1em; }
.rule { width: 4.2in; border-bottom: 1pt solid var(--t-accent); margin: 10pt auto 10pt; }
.desc { font: italic 500 14pt/1.3 "Newsreader", Georgia, serif; color: var(--t-ink); white-space: nowrap; overflow: hidden; max-width: 7.6in; height: 1.3em; }
.people { display: flex; gap: 0.6in; margin-top: 0.4in; }
.who { width: 2.9in; text-align: left; }
.who .label { display: block; font: 500 7.5pt/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 4pt; }
.who .line { display: block; font: 500 13pt/1.3 "Newsreader", Georgia, serif; color: var(--t-ink); border-bottom: 0.5pt solid var(--t-muted); padding-bottom: 3pt; white-space: nowrap; overflow: hidden; height: 1.6em; }

/* The small print along the foot, inside the frame. */
.small { position: absolute; left: 1.0in; right: 1.0in; bottom: 0.85in; display: flex; gap: 0.35in; align-items: flex-start; }
.sheet[data-v-frame="Modern"] .small { left: 1.15in; }
.cell { flex: none; }
.cell.terms { flex: 1; min-width: 0; }
.cell .label { display: block; font: 500 7pt/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 3pt; }
.cell .v { display: block; font-size: 9pt; color: var(--t-ink); white-space: nowrap; }
.cell .v.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.cell .v.t { font-size: 8pt; line-height: 1.35; color: var(--t-muted); white-space: normal; max-height: 2.7em; overflow: hidden; }

.credit { position: absolute; left: 0.62in; bottom: 0.62in; font: 400 7.5pt/1 "Inter Tight", system-ui, sans-serif; color: var(--t-muted); }
.ruler { position: absolute; left: 0.62in; bottom: 0.82in; width: 1in; border-top: 0.5pt solid var(--t-muted); font: 400 6.5pt/1.6 "Inter Tight", system-ui, sans-serif; color: var(--t-muted); text-align: center; }