.document-page { background: #e9e8e4; }
.document-main { padding-top: 88px; }

.document-toolbar {
    position: relative;
    overflow: hidden;
    padding: 68px 0 54px;
    color: var(--sh-white);
    background: #15130f;
    border-bottom: 3px solid var(--sh-blue);
}
.document-toolbar::after { content: ""; position: absolute; right: -120px; top: -170px; width: 440px; height: 440px; border: 1px solid rgba(210,174,98,.18); transform: rotate(45deg); pointer-events: none; }
.document-toolbar__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 50px; align-items: end; }
.document-toolbar .eyebrow { margin-bottom: 12px; color: var(--sh-cyan); }
.document-toolbar h1 { max-width: 850px; margin: 0; color: var(--sh-white); font-size: clamp(38px,5vw,62px); line-height: .98; text-transform: uppercase; }
.document-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.document-back:hover, .document-back:focus { color: var(--sh-cyan); }
.document-path { margin: 16px 0 0; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.5; }
.document-download { min-width: 190px; justify-content: center; }

.document-preview { padding: 42px 0 82px; }
.document-preview__frame { min-height: 760px; overflow: hidden; border: 1px solid #d6d0c5; background: #363636; box-shadow: 0 20px 54px rgba(13,13,13,.16); }
.document-preview__frame iframe { width: 100%; height: min(82vh, 980px); min-height: 760px; display: block; border: 0; background: #363636; }
.document-preview__fallback { margin: 18px 0 0; color: var(--sh-slate); font-size: 12px; text-align: center; }
.document-preview__fallback a { color: var(--sh-blue); font-weight: 700; text-decoration: underline; }

.document-error { min-height: 480px; display: grid; place-items: center; align-content: center; padding: 50px 24px; color: var(--sh-slate); border: 1px solid var(--sh-line); background: var(--sh-white); text-align: center; }
.document-error[hidden] { display: none; }
.document-error > i { margin-bottom: 22px; color: var(--sh-blue); font-size: 38px; }
.document-error h2 { margin: 0 0 12px; font-size: 38px; text-transform: uppercase; }
.document-error p { max-width: 540px; margin: 0 0 28px; }
.document-footer { padding-top: 72px; }

@media (max-width: 767px) {
    .document-toolbar { padding: 48px 0 42px; }
    .document-toolbar__inner { grid-template-columns: 1fr; gap: 28px; }
    .document-download { width: 100%; }
    .document-preview { padding: 24px 0 60px; }
    .document-preview__frame, .document-preview__frame iframe { min-height: 64vh; height: 64vh; }
    .document-path { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    .document-toolbar::after { display: none; }
}