/* Hallmark · macrostructure: Trust Archive manuscript · design-system: design.md
   The trust archive, selected 28 September 2026.
   Hallmark pre-emit critique: P5 H5 E4 S5 R5 V4.
   Real document previews support a fully typeset, readable personal Oath.
   The canonical clauses remain HTML, sourced from oath.json, with no script
   dependency. Shared CIEA navigation and footer are outside this scope. */

.ss-page main {
    --oath-document-rule: var(--ss-rule);
    --oath-radius-panel: var(--ss-radius-panel, 6px);
    --oath-radius-card: var(--ss-radius-card, 8px);
    --oath-radius-control: 3px;
    --oath-frame-width: 8px;
    background: var(--ss-paper);
    color: var(--ss-ink);
}

.oath-section {
    padding-block: var(--ss-seam);
    scroll-margin-top: 96px;
}

.oath-section p,
.oath-section h1,
.oath-section h2,
.oath-section h3,
.oath-section figure {
    margin: 0;
}

.oath-section img {
    display: block;
    max-width: 100%;
    height: auto;
}

.oath-kicker {
    color: var(--ss-ink-2);
    font: var(--font-weight-body, 600) 12px/1.5 var(--ss-font-body);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.oath-heading {
    color: var(--ss-ink);
    font-family: var(--ss-font-display);
    font-weight: 400;
    font-style: normal;
    line-height: 1.13;
    letter-spacing: -.015em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    min-width: 0;
}

.oath-heading--m {
    font-size: clamp(2rem, 3.3vw, 3.5rem);
}

.oath-lede,
.oath-declare {
    color: var(--ss-ink-2);
    font: var(--font-weight-body, 600) 1rem/1.75 var(--ss-font-body);
    max-width: 62ch;
    overflow-wrap: anywhere;
}

.oath-document {
    border: 1px solid var(--oath-document-rule);
    border-radius: var(--oath-radius-panel);
    background: var(--ss-paper);
    color: var(--ss-ink);
}

.oath-gold-rule {
    display: block;
    width: 48px;
    height: 3px;
    flex: 0 0 auto;
    background: var(--ss-accent);
}

.oath-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    max-width: 100%;
    padding: 12px 24px;
    border: 1px solid var(--ss-ink);
    border-radius: var(--oath-radius-control);
    background: var(--ss-ink);
    color: var(--ss-paper);
    font: var(--font-weight-body, 600) 14px/1.5 var(--ss-font-body);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--ss-dur-fast) var(--ss-ease-out),
                border-color var(--ss-dur-fast) var(--ss-ease-out),
                color var(--ss-dur-fast) var(--ss-ease-out);
}

.oath-button:hover,
.oath-button:active {
    background: var(--ss-ink-2);
    border-color: var(--ss-ink-2);
    color: var(--ss-paper);
}

.oath-button--outline {
    background: var(--ss-paper);
    color: var(--ss-ink);
}

.oath-button--outline:hover,
.oath-button--outline:active {
    background: var(--ss-paper-2);
    border-color: var(--ss-ink);
    color: var(--ss-ink);
}

.oath-link {
    display: inline-block;
    max-width: 100%;
    min-height: 44px;
    padding-block: 12px;
    color: var(--ss-ink);
    font: var(--font-weight-body, 600) 14px/1.5 var(--ss-font-body);
    text-decoration: underline;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.oath-link:hover,
.oath-link:active {
    color: var(--ss-ink-2);
    text-decoration-thickness: 2px;
}

.oath-button:focus-visible,
.oath-link:focus-visible {
    outline: 2px solid var(--ss-focus);
    outline-offset: 4px;
}

/* A level real document sits beside the opening declaration. */
.oath-hero {
    padding-block: 64px 80px;
}

.oath-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
}

.oath-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
}

.oath-hero__title {
    font-size: clamp(2.5rem, 4.7vw, 4.5rem);
}

.oath-hero__copy .oath-lede {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    max-width: 42ch;
}

.oath-bismillah {
    max-width: 100%;
}

.oath-bismillah__arabic {
    color: var(--ss-ink);
    font-family: var(--ss-font-arabic);
    /* The Bismillah ligature cannot wrap, including inside the padded panel. */
    font-size: clamp(1.125rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 1.9;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: start;
    max-width: 100%;
}

.oath-bismillah__translit {
    color: var(--ss-ink-2);
    font: var(--font-weight-body, 600) 12px/1.65 var(--ss-font-body);
    max-width: 42ch;
}

.oath-hero__document {
    justify-self: end;
    max-width: 400px;
    padding: 16px;
    border: 1px solid var(--oath-document-rule);
    border-radius: var(--oath-radius-panel);
    background: var(--ss-paper-2);
    color: var(--ss-ink);
    box-shadow: var(--ss-shadow-card);
}

/* The rationale is paired with its supporting explanation. */
.oath-why {
    background: var(--ss-paper-2);
    color: var(--ss-ink);
}

.oath-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 64px;
}

.oath-why__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.oath-why__document {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
}

.oath-document__pin {
    display: block;
    align-self: center;
    width: 8px;
    height: 8px;
    margin-bottom: 8px;
    background: var(--ss-accent);
}

.oath-declare--closing {
    border-top: 1px solid var(--oath-document-rule);
    padding-top: 24px;
    color: var(--ss-ink);
    font-family: var(--ss-font-display);
    font-weight: 400;
    font-size: 1.5rem;
    font-style: normal;
}

/* Canonical text is fully visible, with comfortable line lengths. */
.oath-pledge__document {
    padding: clamp(24px, 4.3vw, 64px);
}

.oath-pledge__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 70ch;
}

.oath-pledge__head .oath-heading {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
}

.oath-pledge__preamble {
    color: var(--ss-ink-2);
    font: var(--font-weight-body, 600) 1rem/1.7 var(--ss-font-body);
}

.oath-pledge__clauses {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.oath-pledge__clause {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    padding-block: 28px;
    border-top: 1px solid var(--oath-document-rule);
}

.oath-pledge__num {
    display: block;
    padding-right: 20px;
    border-right: 1px solid var(--oath-document-rule);
    color: var(--ss-ink);
    font: 400 2rem/1.25 var(--ss-font-display);
    font-variant-numeric: lining-nums tabular-nums;
}

.oath-pledge__text {
    max-width: 68ch;
    color: var(--ss-ink);
    font: var(--font-weight-body, 600) clamp(1rem, 1.2vw, 1.125rem)/1.75 var(--ss-font-body);
    overflow-wrap: anywhere;
}

.oath-pledge__document .oath-pledge__dua {
    max-width: 68ch;
    margin-top: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--oath-document-rule);
    color: var(--ss-ink);
    font: 400 clamp(1.125rem, 1.7vw, 1.5rem)/1.6 var(--ss-font-display);
    font-style: normal;
}

/* A real print preview, framed level, and four reasons to display it. */
.oath-display {
    background: var(--ss-paper-2);
    color: var(--ss-ink);
}

.oath-display__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}

.oath-display__intro .oath-heading {
    max-width: 27ch;
}

.oath-display__intro .oath-lede {
    max-width: 72ch;
}

.oath-display__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
}

.oath-display__frame {
    padding: 20px;
    border: var(--oath-frame-width) solid var(--ss-ink);
    background: var(--ss-paper);
    color: var(--ss-ink);
    box-shadow: var(--ss-shadow-card);
}

.oath-reasons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oath-reasons__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 20px;
    padding: 24px;
    border: 1px solid var(--oath-document-rule);
    border-radius: var(--oath-radius-panel);
    background: var(--ss-paper);
    color: var(--ss-ink);
}

.oath-reasons__num {
    grid-row: 1 / span 2;
    color: var(--ss-ink);
    font: 400 1.75rem/1.2 var(--ss-font-display);
    font-variant-numeric: lining-nums tabular-nums;
}

.oath-reasons__heading {
    color: var(--ss-ink);
    font: var(--font-weight-body, 600) 1.0625rem/1.45 var(--ss-font-body);
    overflow-wrap: anywhere;
}

.oath-reasons__body {
    color: var(--ss-ink-2);
    font: var(--font-weight-body, 600) 14px/1.7 var(--ss-font-body);
}

/* A4 leads; all three genuine PDF formats remain equally easy to reach. */
.oath-download__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.oath-download__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.oath-download__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--oath-document-rule);
    border-radius: var(--oath-radius-card);
    background: var(--ss-paper);
    color: var(--ss-ink);
    text-align: center;
    min-width: 0;
}

.oath-download__card--primary {
    background: var(--ss-paper-2);
    color: var(--ss-ink);
}

.oath-download__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 340px;
    margin-bottom: 8px;
}

.oath-download__preview img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border: 1px solid var(--oath-document-rule);
    box-shadow: var(--ss-shadow-card);
}

.oath-download__preview--a5 img {
    max-height: 78%;
    max-width: 78%;
}

.oath-download__size {
    color: var(--ss-ink);
    font: var(--font-weight-body, 600) 1.5rem/1.2 var(--ss-font-body);
}

.oath-download__dim {
    color: var(--ss-ink-2);
    font: var(--font-weight-body, 600) 12px/1.5 var(--ss-font-body);
}

.oath-download__desc {
    flex: 1;
    color: var(--ss-ink-2);
    font: var(--font-weight-body, 600) 14px/1.65 var(--ss-font-body);
}

.oath-download__card .oath-button {
    align-self: stretch;
    margin-top: 8px;
    padding-inline: 12px;
}

.oath-cta-section {
    padding-top: 0;
}

.oath-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 64px 48px;
    text-align: center;
}

.oath-heading--closing {
    max-width: 28ch;
    font-size: clamp(2rem, 3.3vw, 3.25rem);
    line-height: 1.2;
}

.oath-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

@media (max-width: 899px) {
    .oath-hero__inner,
    .oath-why__grid {
        gap: 32px;
    }

    .oath-hero__title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .oath-why__document {
        padding: 32px;
    }

    .oath-display__grid {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 24px;
    }

    .oath-reasons__item {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px 12px;
        padding: 20px;
    }

    .oath-download__grid {
        gap: 16px;
    }

    .oath-download__card {
        padding: 16px;
    }

    .oath-download__preview {
        height: 240px;
    }
}

@media (max-width: 699px) {
    .oath-section {
        padding-block: 64px;
    }

    .oath-hero {
        padding-top: 40px;
    }

    .oath-hero__inner,
    .oath-why__grid,
    .oath-display__grid,
    .oath-download__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .oath-hero__copy {
        gap: 24px;
    }

    .oath-hero__title {
        font-size: clamp(2.5rem, 10vw, 3.25rem);
    }

    .oath-hero__document {
        justify-self: center;
        width: 100%;
        max-width: 360px;
        padding: 12px;
    }

    .oath-why__document {
        padding: 24px;
    }

    .oath-pledge__document {
        padding: 24px 16px;
    }

    .oath-pledge__clause {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 16px;
        padding-block: 24px;
    }

    .oath-pledge__num {
        font-size: 1.5rem;
        padding-right: 8px;
    }

    .oath-display__intro {
        margin-bottom: 32px;
    }

    .oath-display__frame {
        justify-self: center;
        max-width: 380px;
        padding: 12px;
    }

    .oath-download__card {
        padding: 24px;
    }

    .oath-download__preview {
        height: 320px;
    }

    .oath-download__desc {
        max-width: 36ch;
    }

    .oath-cta-section {
        padding-top: 0;
    }

    .oath-cta {
        padding: 40px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oath-button {
        transition: none;
    }
}