* { box-sizing: border-box; }

html {
    background: #f6f4ef;
    color: #29332c;
    font-family: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    scroll-padding-top: 1.5rem;
}

body { margin: 0; }
a { color: #34563b; text-underline-offset: .2em; }
a:hover { color: #151613; }
a:focus-visible, iframe:focus-visible { outline: 3px solid #415f45; outline-offset: 3px; }

.presentation-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1.5rem;
    min-height: 48px;
    padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    border-bottom: 1px solid #dedfd8;
}

.presentation-bar nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.presentation-bar a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    font-size: .875rem;
    font-weight: 500;
}

#presentation {
    display: block;
    width: 100%;
    height: calc(100vh - 49px - env(safe-area-inset-top));
    height: calc(100dvh - 49px - env(safe-area-inset-top));
    min-height: 30rem;
    border: 0;
    border-bottom: 1px solid #dedfd8;
}

.skip-link {
    position: fixed;
    z-index: 2;
    top: -100px;
    left: 16px;
    padding: 12px 16px;
    background: #fff;
}
.skip-link:focus { top: 4px; }

#lasversion {
    max-width: 76ch;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 5rem) max(1.25rem, env(safe-area-inset-left)) max(4rem, env(safe-area-inset-bottom));
    font-size: 1.125rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

#lasversion h1, #lasversion h2, #lasversion h3 {
    color: #24382c;
    text-wrap: balance;
    line-height: 1.25;
}
#lasversion h1, #lasversion h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}
#lasversion h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0 0 1.5rem; }
#lasversion h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 1.5rem; }
#lasversion h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
#lasversion p, #lasversion ul, #lasversion ol { margin: 0 0 1.25rem; }
#lasversion li { margin-bottom: .6rem; }
#lasversion ul, #lasversion ol { padding-left: 1.5rem; }
#lasversion nav { margin: 2.5rem 0 3rem; padding: 1.5rem; background: #e9ece4; border-radius: .25rem; }
#lasversion nav h2 { font-family: inherit; font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
#lasversion nav ol { margin-bottom: 0; }
#lasversion nav .reading-appendix-link { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #cdd3c8; }
#lasversion .reading-appendix > details { margin-bottom: 1.5rem; }
#lasversion > section, #lasversion > .reading-appendix { padding: 2.75rem 0 1.5rem; border-top: 1px solid #cdd3c8; }
#lasversion section:target h2, #lasversion .reading-appendix:target h2 { text-decoration: underline; text-decoration-color: #8ea58b; text-underline-offset: .2em; }
#lasversion .reading-sources, #lasversion .reading-eyebrow { font-size: 1rem; }
#lasversion .reading-philosophy { margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid #a8b7a0; }
#lasversion h4 { font-size: 1.125rem; margin: 0 0 .75rem; }

@media (max-width: 480px) {
    .presentation-bar { align-items: flex-start; }
    .presentation-bar nav { gap: 0 .9rem; }
    #lasversion nav { padding: 1.25rem; }
}

@media print {
    #presentation, .presentation-bar, .skip-link, .interactive-link { display: none; }
    html { background: #fff; color: #000; }
    #lasversion { max-width: none; padding: 0; font-size: 11pt; }
    #lasversion section { break-before: auto; }
    #lasversion h2, #lasversion h3 { break-after: avoid; }
    #lasversion p, #lasversion li { orphans: 3; widows: 3; }
    #lasversion nav { background: none; }
}