/* Based on TheEvent by BootstrapMade. https://bootstrapmade.com/license/ */
/* Family history and memoir theme: warm paper, dark ink, muted olive. */
:root {
  --paper: #f6f1e7;
  --page: #fffcf5;
  --ink: #302a23;
  --heading: #493925;
  --olive: #46513c;
  --rule: #c7baa4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.7; }
a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: #71452d; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid #71452d; outline-offset: 4px; }
p { margin: 0 0 14px; }
h1, h2, h3, h4 { margin: 0 0 16px; color: var(--heading); font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.3; }
h1 { font-size: 44px; }
h2 { font-size: 34px; }
h3 { font-size: 26px; }
h4 { font-size: 23px; }
img { max-width: 100%; height: auto; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
.centered { text-align: center; }
.book-link { font-size: 130%; }
.medium-link { font-size: 115%; }
#intro { border-top: 8px solid var(--olive); border-bottom: 1px solid var(--rule); }
.intro-container { min-height: 100vh; max-width: 1000px; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 48px 20px 24px; }
#intro img { margin: 0 8px 24px; }
#intro h1 { padding: 12px 20px; background: rgba(246, 241, 231, .94); border-radius: 3px; max-width: 800px; color: var(--heading); font-size: clamp(32px, 5vw, 48px); font-weight: 400; }
#main { max-width: 1040px; margin: auto; }
#main > .centered { padding: 32px 24px 0; }
#main > .centered h4 { line-height: 1.6; }
#speakers { padding: 0 24px 40px; }
#speakers > .centered { max-width: 850px; margin: 24px auto; padding: 32px 28px 12px; background: var(--page); border: 1px solid var(--rule); border-radius: 3px; }
#speakers > .centered img { box-shadow: 0 3px 10px rgba(48, 42, 35, .13); }
.category-title { margin: 48px 0 12px; text-align: center; font-size: 32px; letter-spacing: .07em; }
.category-divider { width: 100px; border-top: 3px solid var(--olive); margin: 0 auto 28px; }
#keyword-filter { max-width: 850px; margin: 24px auto; padding: 24px; text-align: center; background: #ece5d8; border: 1px solid var(--rule); border-radius: 3px; }
#keyword-filter label { display: block; color: var(--heading); font-family: Georgia, "Times New Roman", serif; font-size: 24px; margin-bottom: 12px; }
#keyword { width: min(100%, 560px); padding: 12px; border: 1px solid #7c725f; border-radius: 3px; background: var(--page); color: var(--ink); font: inherit; }
#keyword::placeholder { color: #655c4d; opacity: 1; }
#keyword-filter button { margin: 8px; padding: 12px 20px; border: 1px solid var(--olive); border-radius: 3px; background: var(--olive); color: var(--page); font: inherit; cursor: pointer; }
#keyword-filter button:hover { background: #333e2c; }
#filter-status { margin: 8px 0 0; font-size: 16px; }
#footer { background: #382f25; padding: 32px 20px; color: var(--paper); font-size: 16px; text-align: center; line-height: 1.8; }
#footer a { color: var(--paper); }
.back-to-top { position: fixed; right: 15px; bottom: 15px; width: 44px; height: 44px; border-radius: 50%; background: var(--olive); color: var(--page); text-align: center; font-size: 26px; line-height: 44px; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.back-to-top:hover { background: #333e2c; color: var(--page); }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  #intro img { width: 43%; margin: 0 2% 20px; }
  .intro-container { padding: 32px 16px 16px; }
  #speakers { padding: 0 12px 28px; }
  #speakers > .centered { padding: 24px 16px 8px; }
  #keyword-filter { margin: 20px 12px; padding: 20px 16px; }
  h2 { font-size: 28px; }
  h3 { font-size: 23px; }
  h4 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }