@font-face {
  font-family: "SKL Sans";
  src: url("./fonts/sans.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: dark; background: #000; color: #e5d1aa; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #000; }
body { overflow-x: hidden; }
::selection { background: #e5d1aa; color: #000; }
.cover {
  position: relative; isolation: isolate; width: 100%;
  height: 100vh; height: 100svh; height: 100dvh;
  min-height: 320px; overflow: hidden; background: #000;
}
.composition { display: block; position: absolute; inset: 0; }
.composition-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
img { user-select: none; -webkit-user-drag: none; }
.accessible-name, .full-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Frame the exact approved lettering; never regenerate or stretch it. */
.adaptive-mark {
  position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%);
  width: min(88vw, 620px, 145vh); width: min(88vw, 620px, 145dvh);
  aspect-ratio: 3250 / 1330; overflow: hidden; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.adaptive-mark img {
  position: absolute; width: 205.784616%; max-width: none; height: auto;
  left: -52.307693%; top: -83.458647%;
}
.professional-identity {
  --edge: clamp(18px, 4.8vw, 30px);
  position: absolute;
  right: calc(var(--edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100% - 2 * var(--edge) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  margin: 0; color: #e5d1aa; font-family: "SKL Sans", Arial, sans-serif;
  font-weight: 400; line-height: 1.4; text-align: right;
}
.professional-identity p { margin: 0; }
.signature-crop {
  display: block; position: relative; width: 100%; aspect-ratio: 1840 / 265;
  overflow: hidden; mix-blend-mode: lighten;
  clip-path: polygon(0 41.5094%, 3.5326% 35.8491%, 5.9783% 20.7547%, 8.9674% 9.434%, 13.587% 5.6604%, 100% 0, 100% 100%, 0 100%);
}
.signature-crop img {
  position: absolute; width: 363.478261%; max-width: none; height: auto;
  left: -262.5%; top: -1245.283019%;
}
.professional-identity .professional-details {
  margin-top: 5px; padding-right: 3px; font-size: 14px;
  color: #e5d1aa; text-shadow: 0 1px 3px #000;
}
.professional-registration { white-space: nowrap; }
/* Wide screens retain the complete approved composition. */
@media (min-width: 1280px) and (min-aspect-ratio: 4/3) {
  .composition-art { object-fit: contain; }
  .adaptive-mark, .signature-crop { display: none; }
  .professional-identity {
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-height: 480px) and (max-width: 1279px) and (min-aspect-ratio: 1/1) {
  .adaptive-mark { top: 39%; width: min(70vw, 110dvh); }
  .professional-identity { width: min(340px, 56vw); --edge: 16px; }
  .professional-identity .professional-details { font-size: 13px; margin-top: 3px; }
}
@media (max-width: 340px) { .professional-identity .professional-details { font-size: 13px; } }
@media (forced-colors: active) {
  .composition, .adaptive-mark, .signature-crop { display: none; }
  .cover { display: grid; place-items: center; background: Canvas; color: CanvasText; }
  .accessible-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; font: 400 clamp(5rem, 24vw, 15rem)/1.1 Georgia, serif; }
  .professional-identity { width: min(440px, calc(100% - 40px)); height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; color: CanvasText; }
  .full-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .professional-identity .professional-details { color: CanvasText; text-shadow: none; }
}
@media print { .cover { height: 95vh; print-color-adjust: exact; } }