/* =========================================================
   Cover Maker
   Final Academic Cover Design
   ========================================================= */


/* =========================================================
   Preview canvas
   ========================================================= */

.cover-preview {
    container-type: inline-size;

    position: relative;

    width: min(100%, 510px);
    aspect-ratio: 210 / 297;

    overflow: hidden;

    color: #111827;
    background: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    box-shadow:
        0 4px 16px rgba(15, 23, 42, 0.08),
        0 18px 48px rgba(15, 23, 42, 0.12);
}


/* =========================================================
   Main document
   ========================================================= */

.academic-cover {
    --cover-accent: #313da8;
    --cover-accent-dark: #202b7d;
    --cover-accent-soft: #edf0ff;
    --cover-accent-faint: #f7f8ff;

    --cover-border: #d7deea;
    --cover-muted: #667085;

    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    padding:
        5.9cqw
        7.4cqw
        5.2cqw;

    overflow: hidden;

    color: #111827;

    background:
        radial-gradient(
            circle at 88% 7%,
            color-mix(
                in srgb,
                var(--cover-accent) 7%,
                transparent
            ) 0,
            color-mix(
                in srgb,
                var(--cover-accent) 3%,
                transparent
            ) 12cqw,
            transparent 25cqw
        ),
        linear-gradient(
            180deg,
            var(--cover-accent-faint) 0,
            #ffffff 25cqw,
            #ffffff 100%
        );

    isolation: isolate;
}


/* =========================================================
   Accent palettes
   ========================================================= */

.academic-cover[data-accent="university"] {
    --cover-accent: #313da8;
    --cover-accent-dark: #202b7d;
    --cover-accent-soft: #edf0ff;
    --cover-accent-faint: #f7f8ff;
}

.academic-cover[data-accent="navy"] {
    --cover-accent: #173963;
    --cover-accent-dark: #102b4d;
    --cover-accent-soft: #edf3f8;
    --cover-accent-faint: #f7fafc;
}

.academic-cover[data-accent="slate"] {
    --cover-accent: #475569;
    --cover-accent-dark: #334155;
    --cover-accent-soft: #f1f5f9;
    --cover-accent-faint: #f8fafc;
}


/* =========================================================
   Outer frame
   ========================================================= */

.academic-cover::before {
    content: "";

    position: absolute;
    inset: 2.35cqw;
    z-index: -3;

    border:
        0.14cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 34%,
            #d2dae5
        );

    box-shadow:
        inset 0 0 0 0.45cqw
        rgba(255, 255, 255, 0.92);

    pointer-events: none;
}

.academic-cover::after {
    content: "";

    position: absolute;

    top: 2.35cqw;
    left: 2.35cqw;
    z-index: -2;

    width: 29cqw;
    height: 0.78cqw;

    background:
        linear-gradient(
            90deg,
            var(--cover-accent) 0 72%,
            color-mix(
                in srgb,
                var(--cover-accent) 35%,
                transparent
            ) 72% 100%
        );
}


/* =========================================================
   Decorative background
   ========================================================= */

.cover-decoration {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.cover-shape {
    position: absolute;

    display: block;

    pointer-events: none;
}


/* top-right organic shape */

.cover-shape--top-right {
    top: -11cqw;
    right: -10cqw;

    width: 34cqw;
    height: 31cqw;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--cover-accent) 9%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--cover-accent) 2%,
                transparent
            )
        );

    border-radius:
        38% 62% 64% 36%
        /
        44% 44% 56% 56%;

    opacity: 0.9;

    transform: rotate(18deg);
}


/* top-right ring */

.cover-shape--top-right-ring {
    top: 5.5cqw;
    right: 3.5cqw;

    width: 13cqw;
    height: 13cqw;

    border:
        0.18cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 16%,
            transparent
        );

    border-radius: 50%;

    opacity: 0.8;
}


/* left-side soft curve */

.cover-shape--left {
    top: 43cqw;
    left: -12cqw;

    width: 18cqw;
    height: 31cqw;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--cover-accent) 7%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--cover-accent) 1%,
                transparent
            )
        );

    border-radius: 48%;

    transform: rotate(-18deg);
}


/* lower-right geometric accent */

.cover-shape--bottom-right {
    right: -7cqw;
    bottom: -6cqw;

    width: 27cqw;
    height: 27cqw;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--cover-accent) 9%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--cover-accent) 1%,
                transparent
            )
        );

    clip-path:
        polygon(
            40% 0,
            100% 27%,
            92% 100%,
            0 77%
        );

    opacity: 0.9;
}


/* decorative dots */

.cover-shape--dot-one,
.cover-shape--dot-two,
.cover-shape--dot-three {
    background:
        var(--cover-accent);

    border-radius: 50%;
}

.cover-shape--dot-one {
    top: 30.5cqw;
    left: 5.2cqw;

    width: 0.85cqw;
    height: 0.85cqw;

    opacity: 0.3;
}

.cover-shape--dot-two {
    top: 33.4cqw;
    left: 7.1cqw;

    width: 0.55cqw;
    height: 0.55cqw;

    opacity: 0.22;
}

.cover-shape--dot-three {
    right: 5.7cqw;
    bottom: 43cqw;

    width: 0.7cqw;
    height: 0.7cqw;

    opacity: 0.26;
}


/* =========================================================
   Main content wrapper
   ========================================================= */

.cover-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-height: 0;
}


/* =========================================================
   University logo
   ========================================================= */

.cover-logo {
    position: relative;
    z-index: 3;

    display: flex;
    justify-content: center;

    padding-top: 0.7cqw;
}

.cover-logo img {
    width: 31.8cqw;
    max-height: 12cqw;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0.7cqw 1.1cqw
            rgba(15, 23, 42, 0.055)
        );
}


/* =========================================================
   Assignment / Lab Report heading
   ========================================================= */

.cover-heading {
    position: relative;

    margin-top: 4.1cqw;

    text-align: center;
}

.cover-heading h1 {
    margin: 0;

    color:
        color-mix(
            in srgb,
            var(--cover-accent-dark) 74%,
            #172033
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 5.3cqw;
    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.03em;
}

.cover-heading::after {
    content: "";

    display: block;

    width: 6.2cqw;
    height: 0.42cqw;

    margin:
        1.45cqw
        auto
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cover-accent) 22%,
            var(--cover-accent) 78%,
            transparent
        );

    border-radius: 999px;
}


/* =========================================================
   Course information
   ========================================================= */

.cover-course {
    margin-top: 4.25cqw;

    text-align: center;
}

.cover-course__name {
    max-width: 76cqw;

    margin:
        0
        auto;

    color: #172033;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 3.1cqw;
    line-height: 1.28;

    font-weight: 700;

    text-shadow:
        0 0.25cqw 0.6cqw
        rgba(15, 23, 42, 0.025);
}

.cover-course__name.is-medium {
    font-size: 2.82cqw;
}

.cover-course__name.is-long {
    font-size: 2.5cqw;
}

.cover-course__code {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 4.3cqw;

    margin-top: 1.45cqw;

    padding:
        0.72cqw
        2.9cqw;

    color:
        var(--cover-accent-dark);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            var(--cover-accent-soft)
        );

    border:
        0.13cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 20%,
            #d7dee8
        );

    border-radius: 999px;

    box-shadow:
        0 0.45cqw 1.1cqw
        rgba(15, 23, 42, 0.035);

    font-size: 1.86cqw;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.03em;
}


/* =========================================================
   Assignment / experiment topic
   ========================================================= */

.cover-topic {
    position: relative;

    margin-top: 4.5cqw;

    padding:
        3cqw
        4.3cqw;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--cover-accent-faint) 72%,
            color-mix(
                in srgb,
                var(--cover-accent) 5%,
                #ffffff
            ) 100%
        );

    border:
        0.14cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 30%,
            #d1d9e5
        );

    border-radius: 1.4cqw;

    box-shadow:
        0 1cqw 2.8cqw
        rgba(15, 23, 42, 0.04);

    text-align: center;
}

.cover-topic::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 0.82cqw;

    background:
        linear-gradient(
            180deg,
            var(--cover-accent),
            color-mix(
                in srgb,
                var(--cover-accent) 58%,
                #ffffff
            )
        );
}

.cover-topic::after {
    content: "";

    position: absolute;

    right: 2.2cqw;
    bottom: 1.7cqw;

    width: 5.8cqw;
    height: 5.8cqw;

    border:
        0.13cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 9%,
            transparent
        );

    border-radius: 50%;
}

.cover-topic__number {
    position: relative;
    z-index: 1;

    margin: 0;

    color:
        var(--cover-accent);

    font-size: 1.8cqw;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.cover-topic__name {
    position: relative;
    z-index: 1;

    max-width: 73cqw;

    margin:
        1.35cqw
        auto
        0;

    color: #172033;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 3cqw;
    line-height: 1.27;

    font-weight: 700;
}

.cover-topic__name.is-medium {
    font-size: 2.72cqw;
}

.cover-topic__name.is-long {
    font-size: 2.42cqw;
}

.cover-topic__name.is-extra-long {
    font-size: 2.12cqw;
    line-height: 1.27;
}


/* =========================================================
   Date section
   ========================================================= */

.cover-dates {
    display: grid;
    grid-template-columns: 1fr;

    gap: 1.5cqw;

    margin-top: 3.5cqw;
}

.cover-dates.has-two-dates {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.cover-date {
    position: relative;

    padding:
        1.45cqw
        1.8cqw;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            color-mix(
                in srgb,
                var(--cover-accent) 2.5%,
                #ffffff
            )
        );

    border:
        0.14cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 19%,
            #dde3ec
        );

    border-radius: 1.05cqw;

    box-shadow:
        0 0.5cqw 1.6cqw
        rgba(15, 23, 42, 0.025);

    text-align: center;
}

.cover-date::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 7.5cqw;
    height: 0.28cqw;

    background:
        color-mix(
            in srgb,
            var(--cover-accent) 72%,
            transparent
        );

    border-radius: 999px;

    transform: translateX(-50%);
}

.cover-date__label {
    display: block;

    margin-bottom: 0.45cqw;

    color:
        var(--cover-muted);

    font-size: 1.36cqw;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.cover-date__value {
    display: block;

    color: #101828;

    font-size: 1.95cqw;
    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   Submitted To / Submitted By
   ========================================================= */

.cover-submission {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 2.35cqw;

    margin-top: 4.1cqw;
}

.cover-person-card {
    position: relative;

    min-width: 0;

    padding:
        2.75cqw
        2.7cqw
        2.6cqw;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 68%,
            color-mix(
                in srgb,
                var(--cover-accent) 3.5%,
                #ffffff
            ) 100%
        );

    border:
        0.14cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 27%,
            #d3dae4
        );

    border-radius: 1.15cqw;

    box-shadow:
        0 0.8cqw 2.3cqw
        rgba(15, 23, 42, 0.035);
}


/* upper accent */

.cover-person-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 9cqw;
    height: 0.48cqw;

    background:
        var(--cover-accent);
}


/* lower decorative ring */

.cover-person-card::after {
    content: "";

    position: absolute;

    right: -3.3cqw;
    bottom: -3.5cqw;

    width: 9cqw;
    height: 9cqw;

    border:
        0.16cqw
        solid
        color-mix(
            in srgb,
            var(--cover-accent) 8%,
            transparent
        );

    border-radius: 50%;

    pointer-events: none;
}

.cover-person-card__title {
    position: relative;
    z-index: 1;

    margin:
        0
        0
        1.8cqw;

    color:
        var(--cover-accent-dark);

    font-size: 1.78cqw;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 0.085em;

    text-transform: uppercase;
}

.cover-person-card__title::after {
    content: "";

    display: block;

    width: 5.5cqw;
    height: 0.28cqw;

    margin-top: 1.05cqw;

    background:
        color-mix(
            in srgb,
            var(--cover-accent) 78%,
            transparent
        );

    border-radius: 999px;
}

.cover-person-list {
    position: relative;
    z-index: 1;

    display: grid;

    gap: 1.05cqw;

    margin: 0;
}

.cover-person-row {
    display: grid;

    grid-template-columns:
        12cqw
        minmax(0, 1fr);

    gap: 1cqw;

    min-width: 0;

    font-size: 1.55cqw;
    line-height: 1.34;
}

.cover-person-row dt {
    margin: 0;

    color:
        #697386;

    font-weight: 600;
}

.cover-person-row dd {
    min-width: 0;

    margin: 0;

    overflow-wrap: anywhere;

    color: #111827;

    font-weight: 700;
}

.cover-person-row dd.is-long {
    font-size: 1.43cqw;
}

.cover-person-row dd.is-extra-long {
    font-size: 1.31cqw;
}


/* =========================================================
   Empty / placeholder values
   ========================================================= */

.cover-empty {
    color: #a3aab5 !important;

    font-weight: 500 !important;
}


/* =========================================================
   Footer signature
   ========================================================= */

.cover-document-footer {
    position: absolute;

    right: 0;
    bottom: 3.25cqw;
    left: 0;
    z-index: 2;

    color:
        color-mix(
            in srgb,
            var(--cover-accent) 25%,
            #a7afba
        );

    font-size: 0.92cqw;
    line-height: 1;

    letter-spacing: 0.035em;

    text-align: center;
}


/* =========================================================
   Full-screen preview
   ========================================================= */

.preview-dialog__body .cover-preview {
    width:
        min(
            100%,
            570px
        );
}


/* =========================================================
   Small preview refinements
   ========================================================= */

@container (max-width: 380px) {
    .cover-logo img {
        width: 31cqw;
    }

    .cover-person-card {
        box-shadow:
            0 0.5cqw 1.4cqw
            rgba(15, 23, 42, 0.03);
    }
}


/* =========================================================
   Browser fallback
   ========================================================= */

@supports not (font-size: 2cqw) {
    .cover-logo img {
        width: 150px;
    }

    .cover-heading h1 {
        font-size: 26px;
    }

    .cover-course__name {
        font-size: 16px;
    }

    .cover-course__code {
        font-size: 10px;
    }

    .cover-topic__number {
        font-size: 10px;
    }

    .cover-topic__name {
        font-size: 16px;
    }

    .cover-date__label {
        font-size: 8px;
    }

    .cover-date__value {
        font-size: 10px;
    }

    .cover-person-card__title {
        font-size: 10px;
    }

    .cover-person-row {
        font-size: 8px;
    }

    .cover-document-footer {
        font-size: 6px;
    }
}


/* =========================================================
   Print
   ========================================================= */

@media print {
    .cover-preview {
        width: 210mm;
        height: 297mm;

        aspect-ratio: auto;

        box-shadow: none;
    }
}

/* =========================================================
   PDF-safe permanent cover palette
   No color-mix(), color(), lab(), oklch(), etc.
   ========================================================= */

/* ---------------------------------------------------------
   Fixed permanent university palette
   --------------------------------------------------------- */

.academic-cover {
    --cover-accent: #313da8;
    --cover-accent-dark: #202b7d;
    --cover-accent-soft: #edf0ff;
    --cover-accent-faint: #f7f8ff;
    --cover-border: #d7deea;
    --cover-muted: #667085;

    background:
        radial-gradient(
            circle at 88% 7%,
            rgba(49, 61, 168, 0.07) 0,
            rgba(49, 61, 168, 0.03) 12cqw,
            rgba(255, 255, 255, 0) 25cqw
        ),
        linear-gradient(
            180deg,
            #f7f8ff 0,
            #ffffff 25cqw,
            #ffffff 100%
        );
}


/* ---------------------------------------------------------
   Outer frame
   --------------------------------------------------------- */

.academic-cover::before {
    border-color: #b8bfdc;

    box-shadow:
        inset 0 0 0 0.45cqw
        rgba(255, 255, 255, 0.92);
}

.academic-cover::after {
    background:
        linear-gradient(
            90deg,
            #313da8 0 72%,
            rgba(49, 61, 168, 0.35) 72% 100%
        );
}


/* ---------------------------------------------------------
   Decoration
   --------------------------------------------------------- */

.cover-shape--top-right {
    background:
        linear-gradient(
            145deg,
            rgba(49, 61, 168, 0.09),
            rgba(49, 61, 168, 0.02)
        );
}

.cover-shape--top-right-ring {
    border-color:
        rgba(49, 61, 168, 0.16);
}

.cover-shape--left {
    background:
        linear-gradient(
            180deg,
            rgba(49, 61, 168, 0.07),
            rgba(49, 61, 168, 0.01)
        );
}

.cover-shape--bottom-right {
    background:
        linear-gradient(
            145deg,
            rgba(49, 61, 168, 0.09),
            rgba(49, 61, 168, 0.01)
        );
}


/* ---------------------------------------------------------
   Main heading
   --------------------------------------------------------- */

.cover-heading h1 {
    color: #273172;
}

.cover-heading::after {
    background:
        linear-gradient(
            90deg,
            rgba(49, 61, 168, 0),
            #313da8 22%,
            #313da8 78%,
            rgba(49, 61, 168, 0)
        );
}


/* ---------------------------------------------------------
   Course code
   --------------------------------------------------------- */

.cover-course__code {
    color: #202b7d;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #edf0ff
        );

    border-color: #c5cae4;
}


/* ---------------------------------------------------------
   Assignment / experiment topic
   --------------------------------------------------------- */

.cover-topic {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f8ff 72%,
            #f3f4fc 100%
        );

    border-color: #b8bfdf;
}

.cover-topic::before {
    background:
        linear-gradient(
            180deg,
            #313da8,
            #858cd0
        );
}

.cover-topic::after {
    border-color:
        rgba(49, 61, 168, 0.09);
}


/* ---------------------------------------------------------
   Dates
   --------------------------------------------------------- */

.cover-date {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafaff
        );

    border-color: #cbd0e5;
}

.cover-date::before {
    background:
        rgba(49, 61, 168, 0.72);
}


/* ---------------------------------------------------------
   Submitted cards
   --------------------------------------------------------- */

.cover-person-card {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 68%,
            #f8f8fe 100%
        );

    border-color: #c1c7e0;
}

.cover-person-card::after {
    border-color:
        rgba(49, 61, 168, 0.08);
}

.cover-person-card__title {
    color: #202b7d;
}

.cover-person-card__title::after {
    background:
        rgba(49, 61, 168, 0.78);
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.cover-document-footer {
    color: #9398b5;
}

/* =========================================================
   FINAL COVER PROPORTIONS
   Locked production layout
   ========================================================= */


/* =========================================================
   1. Larger logo / stronger top composition
   ========================================================= */

.cover-logo {
    padding-top: 1.1cqw;
}

.cover-logo img {
    width: 41cqw;
    max-height: 16.5cqw;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0.8cqw 1.3cqw
            rgba(15, 23, 42, 0.055)
        );
}


/* Give the larger logo proper separation */
.cover-heading {
    margin-top: 4.7cqw;
}

.cover-heading h1 {
    font-size: 5.7cqw;
    line-height: 1.06;
}

.cover-heading::after {
    margin-top: 1.55cqw;
}


/* =========================================================
   2. Course block
   ========================================================= */

.cover-course {
    margin-top: 4.8cqw;
}

.cover-course__name {
    font-size: 3.45cqw;
    line-height: 1.25;
}

.cover-course__name.is-medium {
    font-size: 3.1cqw;
}

.cover-course__name.is-long {
    font-size: 2.78cqw;
}


/* =========================================================
   3. Course-code capsule
   Fix both preview and captured PDF alignment
   ========================================================= */

.cover-course__code {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    min-width: 18cqw;
    min-height: 5cqw;

    margin-top: 1.6cqw;

    padding:
        0
        3.2cqw;

    color: #202b7d;

    font-size: 2.08cqw;
    line-height: 1;

    font-weight: 800;

    text-align: center;
    vertical-align: middle;

    white-space: nowrap;
}


/*
 * Explicitly neutralize inherited line spacing.
 * This matters when html2canvas rasterizes the pill.
 */
.cover-course__code::before,
.cover-course__code::after {
    line-height: 1;
}


/* =========================================================
   4. Main assignment / experiment block
   ========================================================= */

.cover-topic {
    margin-top: 5.2cqw;

    padding:
        3.45cqw
        4.4cqw;
}

.cover-topic__number {
    font-size: 2.05cqw;
}

.cover-topic__name {
    margin-top: 1.55cqw;

    font-size: 3.35cqw;
    line-height: 1.26;
}

.cover-topic__name.is-medium {
    font-size: 3cqw;
}

.cover-topic__name.is-long {
    font-size: 2.65cqw;
}

.cover-topic__name.is-extra-long {
    font-size: 2.3cqw;
}


/* =========================================================
   5. Dates
   ========================================================= */

.cover-dates {
    margin-top: 4.1cqw;
}

.cover-date {
    padding:
        1.75cqw
        2cqw;
}

.cover-date__label {
    font-size: 1.55cqw;
}

.cover-date__value {
    margin-top: 0.15cqw;

    font-size: 2.25cqw;
}


/* =========================================================
   6. Submitted section
   Move downward and make it visually substantial
   ========================================================= */

.cover-submission {
    gap: 2.8cqw;

    /*
     * Increased spacing above the cards is deliberate.
     * The larger upper composition now fills the page
     * more evenly.
     */
    margin-top: 6.2cqw;
}


/* =========================================================
   7. Submitted cards
   ========================================================= */

.cover-person-card {
    min-height: 31.5cqw;

    padding:
        3.4cqw
        3.15cqw
        3.2cqw;

    border-radius: 1.25cqw;
}


/* Slightly longer top accent */
.cover-person-card::before {
    width: 10.2cqw;
    height: 0.55cqw;
}


/* Card headings */
.cover-person-card__title {
    margin-bottom: 2.35cqw;

    font-size: 2.2cqw;
    line-height: 1.15;

    letter-spacing: 0.075em;
}

.cover-person-card__title::after {
    width: 6cqw;
    height: 0.32cqw;

    margin-top: 1.15cqw;
}


/* =========================================================
   8. Submitted property typography
   ========================================================= */

.cover-person-list {
    gap: 1.45cqw;
}

.cover-person-row {
    grid-template-columns:
        13.5cqw
        minmax(0, 1fr);

    gap: 1.2cqw;

    font-size: 1.92cqw;
    line-height: 1.35;
}


/* Name / ID / Department labels */
.cover-person-row dt {
    color: #657086;

    font-size: 1.78cqw;
    line-height: 1.35;

    font-weight: 700;
}


/* Actual values */
.cover-person-row dd {
    color: #111827;

    font-size: 1.92cqw;
    line-height: 1.35;

    font-weight: 700;
}


/* Only reduce genuinely long values */
.cover-person-row dd.is-long {
    font-size: 1.72cqw;
}

.cover-person-row dd.is-extra-long {
    font-size: 1.53cqw;
}


/* =========================================================
   9. Footer
   ========================================================= */

.cover-document-footer {
    bottom: 3.1cqw;

    font-size: 1cqw;
}


/* =========================================================
   10. Small-preview correction
   ========================================================= */

@container (max-width: 380px) {
    .cover-logo img {
        width: 40cqw;
    }

    .cover-person-row {
        font-size: 1.87cqw;
    }

    .cover-person-row dt {
        font-size: 1.72cqw;
    }

    .cover-person-row dd {
        font-size: 1.87cqw;
    }
}