/* Certificate of Achievement, the sheet. Print-first; Letter landscape by
   default, A4 landscape under html.a4 (the @page rule is swapped by the
   runtime). Colors only through --t-* so a theme is a set of variables.
   Static font instances, one file per weight and style (DESIGN.md section 6). */

@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: #1f4e79; --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: home printers cannot print to the edge. */
.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.55in 0.9in 1.35in;
}
.sheet[data-v-frame="Modern"] .body { padding-left: 1.05in; }

.org { display: flex; flex-direction: column; align-items: center; gap: 4pt; margin-bottom: 0.22in; }
.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); }
.title { font: italic 500 38pt/1 "Newsreader", Georgia, serif; color: var(--t-accent); margin-top: 6pt; letter-spacing: -0.01em; }
.presented { font: 500 9pt/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-muted); margin-top: 0.28in; }
.recipient {
  font: 500 44pt/1.08 "Newsreader", Georgia, serif; color: var(--t-ink); margin-top: 6pt; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; max-width: 8in; height: 1.08em;
}
.rule { width: 5.6in; border-bottom: 1pt solid var(--t-accent); margin: 8pt auto 10pt; }
.wording { font: 400 12pt/1.45 "Inter Tight", system-ui, sans-serif; color: var(--t-ink); max-width: 7.6in; max-height: 2.9em; overflow: hidden; }
.course { font: 500 13.5pt/1.35 "Inter Tight", system-ui, sans-serif; color: var(--t-ink); max-width: 7.6in; white-space: nowrap; overflow: hidden; margin-top: 3pt; height: 1.35em; }

.sigs {
  position: absolute; left: 1.0in; right: 1.0in; bottom: 1.0in;
  display: flex; justify-content: space-between; gap: 0.4in;
}
/* The seal takes the bottom-right corner, so the signatures stop short of it. */
.sheet:has(.seal:not([hidden])) .sigs { right: 2.5in; }
.sig { flex: 1 1 0; min-width: 0; text-align: center; }
.sig .line { font: 500 10.5pt/1.2 "Newsreader", Georgia, serif; color: var(--t-ink); border-bottom: 0.5pt solid var(--t-muted); padding: 0 6pt 3pt; white-space: nowrap; overflow: hidden; height: 1.6em; display: flex; align-items: flex-end; justify-content: center; }
.sig .under { font: 500 7.5pt/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted); margin-top: 4pt; white-space: nowrap; overflow: hidden; }

.seal {
  position: absolute; right: 0.9in; bottom: 0.9in; width: 1.15in; height: 1.15in; border-radius: 50%;
  border: 1.5pt solid var(--t-accent); display: grid; place-items: center; padding: 8pt; box-sizing: border-box;
}
.seal::before { content: ""; position: absolute; inset: 4pt; border-radius: 50%; border: 0.5pt solid var(--t-accent); opacity: 0.6; }
.seal .text { font: 500 6.5pt/1.2 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-accent); text-align: center; white-space: nowrap; overflow: hidden; max-width: 0.9in; }

/* The free version's foot: a credit line and a one-inch mark to check the print scale against. */
.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; }