/* Standalone recorded-instrument pages (no site chrome). Print-oriented typography. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-color: #c9c4bc;
    font-size: 16px;
}

body.legal-instrument {
    animation: instrument-body-enter 0.55s ease-out both;
    background-color: #c9c4bc;
    color: #111111;
    font-family: "Courier New", Courier, "Liberation Mono", monospace;
    margin: 0;
    min-height: 100vh;
    padding: 2rem 1rem 3rem;
}

@keyframes instrument-body-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.instrument-sheet {
    --instrument-paper: #faf7f0;
    animation: instrument-sheet-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
    background-color: var(--instrument-paper);
    border: 1px solid #b8b3a8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    max-width: 8.5in;
    min-height: 11in;
    padding: 1in 1.1in 1.25in;
    position: relative;
}

@keyframes instrument-sheet-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@view-transition {
    navigation: auto;
}

@keyframes instrument-page-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes instrument-page-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

::view-transition-old(root) {
    animation: 0.45s ease-in-out both instrument-page-fade-out;
}

::view-transition-new(root) {
    animation: 0.65s ease-out both instrument-page-fade-in;
}

.instrument-close {
    align-items: center;
    color: #444444;
    display: flex;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.75rem;
    font-weight: 300;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0.65rem;
    text-decoration: none;
    top: 0.5rem;
    width: 2.25rem;
}

.instrument-close:hover,
.instrument-close:focus {
    color: #111111;
    text-decoration: none;
}

.instrument-banner {
    border-bottom: 1px solid #333333;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
}

.instrument-banner p {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin: 0 0 0.35rem;
}

.instrument-banner a {
    color: #111111;
    font-weight: 600;
    text-decoration: underline;
}

.instrument-banner a:hover,
.instrument-banner a:focus {
    text-decoration: underline;
}

.instrument-notice {
    background-color: #f3f0e8;
    border: 1px solid #c9c4bc;
    border-radius: 4px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
}

.instrument-notice p {
    margin: 0 0 0.65rem;
}

.instrument-notice p:last-child {
    margin-bottom: 0;
}

.instrument-pre {
    font-family: "Courier New", Courier, "Liberation Mono", monospace;
    font-size: 12pt;
    line-height: 1.45;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.instrument-index {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 8.5in;
}

.instrument-index h1 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 1rem;
    text-align: left;
    text-transform: uppercase;
}

.instrument-index p.lead {
    font-size: 12pt;
    line-height: 1.5;
    margin: 0 0 1rem;
    text-align: justify;
}

.instrument-index p.lead-note {
    background-color: #f3f0e8;
    border: 1px solid #c9c4bc;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
    padding: 0.75rem 0.9rem;
    text-align: left;
}

.instrument-index ul {
    font-size: 12pt;
    line-height: 1.55;
    list-style: none;
    margin: 0;
    padding: 0;
}

.instrument-index li {
    border-top: 1px solid #d4cfc4;
    margin: 0;
    padding: 0.65rem 0;
}

.instrument-index li a {
    color: #111111;
    font-weight: 600;
    text-decoration: none;
}

.instrument-index li a:hover,
.instrument-index li a:focus {
    text-decoration: underline;
}

.instrument-index .meta {
    color: #444444;
    display: block;
    font-size: 0.95rem;
    font-weight: normal;
    margin-top: 0.2rem;
}

.legal-home-logo {
    display: block;
    line-height: 0;
    margin: 0 0 1rem;
    text-align: left;
    width: fit-content;
}

.legal-home-logo:hover .legal-home-logo-img,
.legal-home-logo:focus .legal-home-logo-img {
    opacity: 0.88;
}

.legal-home-logo-img {
    display: block;
    height: auto;
    max-width: 100%;
    mix-blend-mode: multiply;
    width: 4.75rem;
}

@media (max-width: 640px) {
    body.legal-instrument {
        padding: 1rem 0.4rem 2rem;
    }

    .instrument-sheet {
        min-height: auto;
        padding: 0.85rem 0.65rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.legal-instrument {
        animation: none;
    }

    .instrument-sheet {
        animation: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

@media print {
    body.legal-instrument {
        animation: none;
        background-color: #ffffff;
        padding: 0;
    }

    html {
        background-color: #ffffff;
        font-size: 12pt;
    }

    .instrument-banner a {
        color: #000000;
    }

    .instrument-sheet {
        animation: none;
        border: none;
        box-shadow: none;
        margin: 0;
        max-width: none;
        min-height: auto;
        padding: 0.75in;
    }

    .instrument-close,
    .legal-home-logo {
        display: none;
    }
}