/* ===== Fonts (bundled, OFL) ===== */
@font-face { font-family: "Cinzel Decorative"; src: url(fonts/cinzel-decorative-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Cinzel Decorative"; src: url(fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; }
@font-face { font-family: "Pinyon Script"; src: url(fonts/pinyon-script-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Great Vibes"; src: url(fonts/great-vibes-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 500; }
@font-face { font-family: "Cormorant Garamond"; src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; }
@font-face { font-family: "Cormorant Garamond"; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; }
@font-face { font-family: "Fredoka"; src: url(fonts/fredoka-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Fredoka"; src: url(fonts/fredoka-latin-600-normal.woff2) format("woff2"); font-weight: 600; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito-latin-700-normal.woff2) format("woff2"); font-weight: 700; }

/* ===== Page base (US Letter at 96 px/in) ===== */
.page { position: relative; overflow: hidden; box-sizing: border-box; color: var(--ink); background: var(--paper); font-family: var(--body); }
.page.portrait { width: 816px; height: 1056px; }
.page.landscape { width: 1056px; height: 816px; }
.page * { box-sizing: border-box; }
.page [contenteditable] { outline: none; }
.page [contenteditable]:focus { background: rgba(255, 230, 120, .25); }
.page .dec { display: block; }

.frame { position: absolute; inset: 26px; border: 3px solid var(--c1); }
.frame-in { position: absolute; inset: 6px; border: 1px solid var(--c2); }
.corner { position: absolute; z-index: 2; }
.portrait .corner.tl { top: 6px; left: 6px; } .portrait .corner.tr { top: 6px; right: 6px; }
.portrait .corner.bl { bottom: 6px; left: 6px; } .portrait .corner.br { bottom: 6px; right: 6px; }
.landscape .corner.tl { top: 4px; left: 4px; } .landscape .corner.tr { top: 4px; right: 4px; }
.landscape .corner.bl { bottom: 4px; left: 4px; } .landscape .corner.br { bottom: 4px; right: 4px; }
.flake { position: absolute; z-index: 1; opacity: .85; }
.flake.f1 { top: 150px; right: 70px; } .flake.f2 { top: 560px; left: 52px; } .flake.f3 { bottom: 170px; right: 54px; }
.corner.sp { display: flex; gap: 4px; align-items: flex-end; padding: 34px; }

/* ===== Letter ===== */
.letter .lh { position: absolute; top: 74px; left: 0; right: 0; text-align: center; z-index: 3; }
.lh-small { font-family: var(--body); font-style: italic; font-size: 17px; color: var(--muted); }
.lh-title { font-family: var(--display); font-size: 40px; line-height: 1.1; color: var(--c1); margin-top: 2px; letter-spacing: .5px; }
.lh-sub { font-family: var(--body); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--c3); margin-top: 6px; }
.pm-wrap { position: absolute; top: 62px; left: 92px; transform: rotate(-11deg); z-index: 3; }
.letter .body { position: absolute; top: 236px; bottom: 82px; left: 108px; right: 108px; font-size: var(--fs, 17px); line-height: 1.5; z-index: 3; }
.letter .dateline { text-align: right; font-style: italic; color: var(--muted); margin-bottom: .9em; font-size: .92em; }
.letter .greeting { font-family: var(--script); font-size: 1.95em; color: var(--c1); margin-bottom: .35em; line-height: 1.2; }
.letter p { margin: 0 0 .72em; text-align: left; hyphens: manual; }
.letter .closing { margin-top: 1em; font-style: italic; }
.letter .signature { font-family: var(--script); font-size: 2.9em; color: var(--c1); line-height: 1.1; margin: .1em 0 .2em .3em; }
.letter .ps { font-size: .93em; margin-top: .6em; padding-top: .55em; border-top: 1px dashed var(--c2); }
.letter.bilingual p { margin-bottom: .25em; }
.letter.bilingual p.tr, .tr-inline { font-style: italic; color: var(--muted); font-size: .9em; }
.letter.bilingual p.tr { margin-bottom: .7em; }
.letter.bilingual .greeting .tr-inline { font-family: var(--body); font-size: .45em; vertical-align: middle; }

/* ===== Certificate ===== */
.cert .frame { inset: 22px; border-width: 4px; }
.cert .frame-in { inset: 9px; border-width: 1.5px; }
.cert-inner { position: absolute; top: 84px; bottom: 60px; left: 120px; right: 120px; text-align: center; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.cert-title { font-family: var(--display); font-size: calc(46px * var(--cs, 1) * var(--ts, 1)); white-space: normal; color: var(--c1); line-height: 1.1; }
.cert-rule { width: 340px; height: 2px; background: linear-gradient(90deg, transparent, var(--c2), transparent); margin: 14px 0 18px; }
.cert-label { font-style: italic; font-size: calc(21px * var(--cs, 1)); color: var(--muted); }
.cert-name { font-family: var(--script); font-size: calc(92px * var(--cs, 1)); color: var(--c3); line-height: 1.15; margin: 4px 0 6px; }
.cert-body { font-size: calc(21px * var(--cs, 1)); line-height: 1.45; max-width: 720px; }
.cert-body::after { content: ""; display: block; width: 90px; height: 1px; margin: 22px auto 0; background: var(--c2); }
.cert-foot { margin-top: auto; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; }
.cert-seal { display: flex; flex-direction: column; align-items: center; }
.cert-date { font-size: 15px; color: var(--muted); margin-top: 4px; font-style: italic; }
.sig { width: 250px; text-align: center; }
.sig-name { font-family: var(--script); font-size: 34px; color: var(--c1); line-height: 1.1; min-height: 1.1em; }
.sig-line { height: 1px; background: var(--ink); opacity: .55; margin: 2px 0 5px; }
.sig-role { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* ===== Report ===== */
.report .rep { position: absolute; top: 84px; bottom: 74px; left: 96px; right: 96px; font-size: var(--fs, 17px); z-index: 3; display: flex; flex-direction: column; }
.rep-head { text-align: center; margin-bottom: 1.1em; }
.rep-badge { display: flex; justify-content: center; margin-bottom: 6px; }
.rep-title { font-family: var(--display); font-size: 2.05em; color: var(--c1); line-height: 1.1; }
.rep-sub { font-size: .78em; letter-spacing: 2.4px; text-transform: uppercase; color: var(--c3); margin-top: .45em; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .45em 1.6em; padding: .8em 1em; border: 1px solid var(--c2); background: var(--tint); margin-bottom: 1em; }
.fld { display: flex; gap: .5em; align-items: baseline; border-bottom: 1px dotted var(--c2); padding-bottom: .2em; }
.fl { font-size: .74em; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fv { font-weight: 600; font-size: .96em; }
.rows { width: 100%; border-collapse: collapse; }
.rows td { padding: .62em .4em; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.32; }
.rl { font-weight: 600; width: 27%; font-size: .95em; }
.rs { width: 110px; white-space: nowrap; }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars .dec { display: inline-block; }
.rn { font-size: .9em; }
.summary { margin-top: 1em; font-style: italic; line-height: 1.5; font-size: .98em; }
.rep-foot { margin-top: auto; padding: 1em 6px 18px; display: flex; align-items: flex-end; justify-content: space-between; }
.stamp { border: 3.5px solid var(--stamp); color: var(--stamp); font-family: var(--body); font-weight: 700; font-size: 1.15em; letter-spacing: 2.5px; text-transform: uppercase; padding: .35em .8em; border-radius: 6px; transform: rotate(-8deg); opacity: .85; text-align: center; max-width: 280px; }

/* ===== Theme: Santa ===== */
.theme-santa { --paper: #fbf5e7; --ink: #2b2320; --muted: #6d5c50; --c1: #a3232b; --c2: #c49a3a; --c3: #2f6a3e; --tint: #f6ecd6; --line: #e8dcc2; --stamp: #b3202a;
  --body: "EB Garamond", Georgia, serif; --display: "Cinzel Decorative", Georgia, serif; --script: "Pinyon Script", "Great Vibes", cursive;
  background: linear-gradient(180deg, #fdf8ec 0%, #f8efdb 100%); }
.theme-santa .greeting { font-size: 1.85em; }

/* ===== Theme: Baby ===== */
.theme-baby { --paper: #fbf8f1; --ink: #33302a; --muted: #7a7466; --c1: #6f8a6b; --c2: #c9a24a; --c3: #b8923a; --tint: #f3f1e6; --line: #e6e1d2; --stamp: #6f8a6b;
  --body: "Cormorant Garamond", Georgia, serif; --display: "Cormorant Garamond", Georgia, serif; --script: "Great Vibes", cursive;
  background: linear-gradient(180deg, #fdfbf6 0%, #f6f2e7 100%); }
.theme-baby .frame { border-width: 1.5px; } .theme-baby .frame-in { inset: 7px; }
.theme-baby .lh-title, .theme-baby .rep-title, .theme-baby .cert-title { font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
.theme-baby .lh-title { font-size: 34px; }
.theme-baby .orn { display: flex; justify-content: center; margin-bottom: 4px; }
.theme-baby.letter .lh { top: 56px; }
.theme-baby.letter .body { top: 270px; font-size: calc(var(--fs, 17px) * 1.08); }
.theme-baby .rep, .theme-baby .cert-body { font-size: calc(var(--fs, 17px) * 1.06); }
.theme-baby .cert-title { font-size: calc(42px * var(--cs, 1) * var(--ts, 1)); }

/* ===== Theme: Tooth Fairy ===== */
.theme-tooth { --paper: #fbf7fd; --ink: #3a3046; --muted: #7d6f8e; --c1: #7d5cb8; --c2: #e7a9c4; --c3: #b5689a; --tint: #f6eff9; --line: #ece2f2; --stamp: #8b6fc0;
  --body: "Nunito", "Trebuchet MS", sans-serif; --display: "Fredoka", "Trebuchet MS", sans-serif; --script: "Great Vibes", cursive;
  background: linear-gradient(160deg, #fdf9ff 0%, #f8eef8 55%, #fdf3f6 100%); }
.theme-tooth .frame { border-width: 2px; border-radius: 22px; border-style: dashed; }
.theme-tooth .frame-in { border-radius: 16px; }
.theme-tooth .lh-title { font-size: 42px; font-weight: 600; }
.theme-tooth .moon { position: absolute; left: 92px; top: -16px; }
.theme-tooth .tooth-wrap { position: absolute; top: 72px; right: 106px; transform: rotate(12deg); z-index: 3; }
.theme-tooth.letter .body { top: 224px; line-height: 1.55; }
.theme-tooth .stamp { border-radius: 40px; }
.theme-tooth .rep-title { font-weight: 600; }
.theme-tooth .cert-title { font-weight: 600; }
.theme-tooth .corner.tr.sp { padding: 30px 38px; }

/* ===== Print: one sheet per page, landscape certificate ===== */
@page { size: 8.5in 11in; margin: 0; }
@page landscape { size: 11in 8.5in; margin: 0; }
@media print {
  .page { break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page.landscape { page: landscape; }
  .page [contenteditable]:focus { background: none; }
}