.certificate-page, .sheet { --navy: #1b2a4a; --gold: #a07a35; --text: #262626; }
.sheet, .sheet * { box-sizing: border-box; }
body.certificate-page { margin: 0; background: #e6eaf0; color: var(--text); font-family: "Public Sans", system-ui, sans-serif; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 72rem; margin: 0 auto; padding: 1rem; }
.toolbar a { color: var(--navy); }
.toolbar .actions { display: flex; gap: .6rem; }
.toolbar button:disabled { opacity: .6; cursor: wait; }
.toolbar .note { font-size: .9rem; color: #555; }
.toolbar button { font: 600 .95rem "Public Sans", sans-serif; background: #1f5149; color: #fff; border: 0; padding: .7rem 1.1rem; border-radius: 3px; cursor: pointer; }
.toolbar button:focus-visible, .toolbar a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.cert { max-width: 72rem; margin: 0 auto 3rem; padding: 0 1rem; }
.sheet { position: relative; container-type: inline-size; aspect-ratio: 1168 / 848; filter: drop-shadow(0 14px 22px rgba(22, 33, 62, .28)); }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sheet > * { position: absolute; margin: 0; }
.sheet p { text-align: center; color: var(--text); }

.logo { left: 44.007%; top: 5.896%; width: 12.243%; height: auto; }
.seal { left: 43.065%; top: 71.698%; width: 14.384%; height: auto; }

.tagline { left: 5.223%; right: 5.223%; top: 31.781%; font: 500 1.333cqw/1 "Cinzel", "Trajan Pro", serif; letter-spacing: .06em; color: #2d2d2d; }
.title { left: 5.223%; right: 5.223%; top: 36.946%; font: 800 calc(2.551cqw * var(--s, 1))/1.1 "Public Sans", sans-serif; text-transform: uppercase; color: var(--navy); letter-spacing: .01em; white-space: nowrap; }
.title span { color: var(--gold); }
.confers { left: 5.223%; right: 5.223%; top: 43.137%; font: 400 1.562cqw/1.2 "EB Garamond", Garamond, serif; }
.name { left: 5.223%; right: 5.223%; top: 46.639%; font: 400 calc(4.373cqw * var(--s, 1))/1.15 "EB Garamond", Garamond, serif; color: #111; white-space: nowrap; }
.body { left: 9.401%; right: 9.401%; top: 54.693%; font: 400 1.478cqw/1.25 "EB Garamond", Garamond, serif; }
.awarded { left: 5.223%; right: 5.223%; top: 64.580%; font: 500 1.510cqw/1 "EB Garamond", Garamond, serif; }

.signer { width: 21.918%; top: 74.521%; height: 14.151%; }
.signer.left { left: 13.099%; }
.signer.right { left: 66.139%; }
.signer .sig { position: absolute; left: 0; right: 0; bottom: 49.0%; height: 48.33%; display: flex; align-items: flex-end; justify-content: center; }
.signer .sig img { max-height: 100%; max-width: 92%; mix-blend-mode: multiply; }
.signer .sig span { font: 400 3.019cqw/1 "Mrs Saint Delafield", "Brush Script MT", cursive; color: #1d2b52; white-space: nowrap; line-height: .8; }
.signer .who { position: absolute; left: -10%; right: -10%; top: 38.8%; text-align: center; font: 500 1.301cqw/1.25 "EB Garamond", Garamond, serif; color: #1e1e1e; }
.signer .who em { display: block; font-style: normal; font-weight: 400; font-size: 1.228cqw; }

.valid { left: 13.185%; top: 87.797%; text-align: left !important; font: 400 1.093cqw/1.3 "EB Garamond", Garamond, serif; }
.valid span { font-size: 0.854cqw; color: #555; }
.certno { left: 82.791%; top: 89.797%; text-align: left !important; font: 600 1.093cqw/1 "Public Sans", sans-serif; color: var(--navy); letter-spacing: .02em; }

@media print {
  body.certificate-page { background: #fff; }
  .toolbar { display: none; }
  .cert { max-width: none; margin: 0; padding: 0; }
  .sheet { width: 258mm; margin: 0 auto; filter: none; }
  .frame, .logo, .seal { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.dl-menu { position: relative; }
.dl-menu summary { list-style: none; font: 600 .95rem "Public Sans", sans-serif; background: #1f5149; color: #fff; padding: .7rem 2.2rem .7rem 1.1rem; border-radius: 3px; cursor: pointer; position: relative; user-select: none; }
.dl-menu summary::-webkit-details-marker { display: none; }
.dl-menu summary::after { content: ""; position: absolute; right: 1rem; top: 50%; margin-top: -.2rem; border: .32rem solid transparent; border-top-color: #fff; }
.dl-menu[open] summary::after { margin-top: -.5rem; border-top-color: transparent; border-bottom-color: #fff; }
.dl-menu summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.dl-menu.busy summary { opacity: .6; cursor: wait; pointer-events: none; }
.dl-items { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 10; min-width: 15rem; background: #fff; border: 1px solid #d4dae3; border-radius: 3px; box-shadow: 0 8px 20px rgba(22, 33, 62, .18); padding: .3rem 0; }
.toolbar .dl-items button { display: block; width: 100%; text-align: left; background: none; color: var(--navy); padding: .6rem 1rem; border-radius: 0; }
.toolbar .dl-items button:hover, .toolbar .dl-items button:focus-visible { background: #f3f5f8; outline: none; }
.dl-items small { font-weight: 400; color: #5a6377; margin-left: .3rem; }