* { box-sizing: border-box; }
body {
    margin: 0;
    color: #202122;
    background: #eef1f3;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
}
a { color: #3366cc; }
.header {
    color: #fff;
    background:
        linear-gradient(rgba(4,11,15,.48), rgba(4,11,15,.88)),
        url("tlo.jpg") center / cover no-repeat;
    border-bottom: 1px solid #a2a9b1;
}
.nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 22px 0;
    font-size: .94rem;
}
.nav a { color: #fff; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav span { color: #d0d8dc; }
.heading {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 85px;
}
.kicker {
    margin: 0;
    color: #e4aa63;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
h1 {
    margin: 10px 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    font-weight: 500;
    line-height: 1.05;
}
.lead { max-width: 760px; margin: 0; color: #d7dfe3; font-size: 1.05rem; }
main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 48px 0 70px;
}
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}
.button {
    display: inline-block;
    padding: 11px 17px;
    color: #fff;
    background: #243843;
    border: 1px solid #243843;
    text-decoration: none;
    font-weight: 700;
}
.button.secondary {
    color: #243843;
    background: transparent;
}
.reader {
    overflow: hidden;
    background: #fff;
    border: 1px solid #a2a9b1;
    box-shadow: 0 14px 38px rgba(0,0,0,.12);
}
.reader iframe {
    display: block;
    width: 100%;
    height: 82vh;
    min-height: 680px;
    border: 0;
}
.note {
    margin: 18px 0 0;
    color: #54595d;
    font-size: .92rem;
}
footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 26px 0 34px;
    color: #54595d;
    font-size: .9rem;
    border-top: 1px solid #c8ccd1;
}
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer p { margin: 0; }
@media (max-width: 650px) {
    .nav, footer { flex-direction: column; }
    main { width: min(100% - 24px, 1180px); }
    .reader iframe { min-height: 520px; height: 72vh; }
}