/* Shared styles using the requested blue, lavender, purple, and slate palette. */
* { box-sizing: border-box; }

body { background-color: #835aaf; font-family: Arial, sans-serif; margin: 0; color: #303342; line-height: 1.5; }
#container { width: min(900px, calc(100% - 24px)); margin: 24px auto; background-color: #E5EAF5; padding: 12px; }

header h1 { background-color: #8458B3; border-radius: 12px 12px 0 0; font-size: 24pt; text-align: center; color: #FFFFFF; text-shadow: 2px 2px 4px #494D5F; padding: 16px 10px; margin: 0; }

nav { background: #D0BDF4; padding: 12px; margin-bottom: 18px; }

nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; }

nav a { color: #494D5F; font-weight: bold; display: inline-block; padding: 4px 8px; }

nav a[aria-current="page"] { background-color: rgba(132, 88, 179, .5); text-decoration: none; }

main { display: block; }
.feature-row { display: flex; 
      justify-content: center; 
    align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sidebox { flex: 0 1 260px; padding: 12px; background-color: #8458B3; border-radius: 10px; }
.sidebox img { display: block; width: 700px; height: 500px; object-fit: cover; background: #D0BDF4; border-radius: 10px; }

.quote { opacity: .9; width: 220px; padding: 12px; background-color: #D0BDF4; font-style: italic; font-size: 1.15rem; }

.quote:hover { opacity: 1; }

.placeholder { background: #E5EAF5; border: 2px dashed #8458B3; padding: 16px; }

.table-wrap { width: 100%; height: 100vh; overflow: auto; }

table { min-width: 760px; width: 100%; border-collapse: collapse; margin: 16px 0; background: #E5EAF5; }

th, td { border: 1px solid #494D5F; padding: 5px 7px; text-align: left; white-space: nowrap; }

th { background: #8458B3; color: #FFFFFF; }

thead th { position: sticky; top: 0; z-index: 2; }

.highlight { background: #A0D2EB; font-weight: bold; }

.sort-button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: bold; cursor: pointer; padding: 4px; }
.sort-button:hover, .sort-button:focus { text-decoration: underline; }
figcaption, footer { font-size: .9em; }
footer { border-top: 1px solid #494D5F; margin-top: 24px; padding-top: 12px; }
@media (max-width: 640px) { #container { width: 100%; margin: 0; } .sidebox, .quote { width: 100%; } }

.takeaway-card { background: #D0BDF4; border-left: 10px solid #8458B3; margin: 12px 0; padding: 10px 14px; }
.takeaway-card h3 { margin: 0; }

.glossary-card { background: #D0BDF4; border-left: 10px solid #8458B3; margin: 12px 0; padding: 10px 14px; }
.glossary-card h3 { margin: 0; }
.glossary-card:focus { outline: 3px solid #494D5F; outline-offset: 2px; }
.glossary-definition { margin: 8px 0 0; }

.takeaway-card:focus { outline: 3px solid #494D5F; outline-offset: 2px; }
.interaction-note { font-style: italic; }
.conclusion { border-radius: 10px;

}