/* === Fonts === */

/* Roboto — self-hosted (Apache 2.0) */
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('/fonts/roboto-latin-300-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('/fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('/fonts/roboto-latin-900-normal.woff2') format('woff2'); }


/* === Global chrome === */

/* Navbar */
.navbar-brand h1 { font-size: 1.5rem; font-weight: inherit; line-height: 1.25; }


/* === Components === */

/* GPG modal — slides in vertically (from top on desktop, bottom on mobile).
   `.fade` rules set the off-screen start position; `.show` must come after
   so it wins specificity-for-specificity when both classes are present. */
.gpg-key { font-size: 0.75rem; white-space: pre-wrap; word-break: break-all; }
@media (min-width: 768px)    { #gpgModal.modal.fade .modal-dialog { transform: translateY(-100vh); } }
@media (max-width: 767.98px) { #gpgModal.modal.fade .modal-dialog { transform: translateY(100vh); } }
#gpgModal.modal.show .modal-dialog { transform: translateY(0); }

/* Image overlay mask */
.mask-light { background-color: rgba(0, 0, 0, 0.15); }