/* ===== Personal Mark ===== */
/* The developer's own mark, on story.html and imprint.html only. It is a
   person's mark, not the product's, so it never appears in the header or
   the footer next to the KeyVault Studio logo. */

/* Links to the developer's own site, which returns the favour by
   pointing at KeyVault Studio. */
.personal-mark-link {
    display: block;
    flex: none;
    width: 120px;
    /* legal.css underlines every link inside .legal-content. */
    text-decoration: none;
    transition: opacity var(--transition-base);
}

.personal-mark-link:hover {
    opacity: 0.85;
}

.personal-mark {
    display: block;
    width: 120px;
    height: 120px;
    /* Mirrors the artwork's own rx=92 on a 400 viewBox, so the hairline
       traces the silhouette instead of cutting across it. */
    border-radius: 23%;
    /* The light artwork fades to #FDFEFF at its top edge and would
       dissolve into a white page without a rim. --gray-300 inverts to
       #48484A in dark mode by itself. */
    border: 1px solid var(--gray-300);
}

.personal-mark--dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .personal-mark--light {
        display: none;
    }

    .personal-mark--dark {
        display: block;
    }
}

/* A <picture> with media="(prefers-color-scheme: dark)" picks its source
   once at load time and never re-evaluates it for print, so a dark-mode
   visitor printing the imprint would get the dark artwork on white paper.
   Two <img> and a CSS toggle keep print correct. */
@media print {
    .personal-mark--light {
        display: block;
    }

    .personal-mark--dark {
        display: none;
    }
}

/* Story: signs off the letter, before the closing block. */
.story-signature {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-top: 48px;
}

/* Deliberately not .author-name/.author-title: those are sized for the
   letterhead at the top of the page, and .story-text p would outrank them
   here anyway. The sign-off stays quieter than the letterhead. */
.signature-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
}

.signature-title {
    font-size: 15px;
    color: var(--gray-600);
    margin-bottom: 10px;
}

/* Imprint: stands beside the party responsible under § 5 TMG. */
.imprint-identity {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

/* legal.css gives every paragraph a bottom margin, which would push the
   address off-centre against the mark. Same specificity as
   .legal-content p, so this file must stay linked after legal.css. */
.imprint-identity p {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .story-signature,
    .imprint-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
    }
}