/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Oswald:wght@500;700&display=swap');

/* Reset & Base Styles */
html {
  box-sizing: border-box;
  font-family: 'Inter', 'Oswald', Arial, Helvetica, sans-serif;
  color: #FFFBEA;
  background: linear-gradient(135deg, #18120b 0%, #3b2510 100%);
}
*, *:before, *:after { box-sizing: inherit; }
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #18120b 0%, #36320f 100%);
}
a {
  color: #FFD700;
  text-decoration: none;
  transition: color .2s, text-shadow .2s;
}
a:hover, a:focus {
  color: #fffbe7;
  text-shadow: 0 0 8px #FFD700;
}

/* Navigation & Header */
header {
  background: #1c1205;
  box-shadow: 0 2px 10px 0 #000;
}
nav {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  padding: 1rem 0;
}
nav a {
  font-family: 'Oswald', 'Inter', Arial, sans-serif;
  color: #FFD700;
  padding: 0.7rem 1.3rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
  font-size: 1.08rem;
  transition: background .22s, color .22s, box-shadow .22s, transform .15s;
  position: relative;
  z-index: 1;
}
nav a.active, nav a[aria-current="page"] {
  background: #FFD700;
  color: #18120b;
  font-weight: bold;
  box-shadow: 0 2px 12px #FFD70066;
  z-index: 2;
}
nav a:focus-visible, .focus-visible {
  outline: 2px dashed #FFD700;
  outline-offset: 2px;
}
nav a:hover:not(.active), nav a:focus:not(.active) {
  background: #2f1e07;
  color: #FFD700;
  box-shadow: 0 4px 24px #ffd70044, 0 1px 1px #91721a55 inset;
  text-shadow: 0 0 8px #FFD70077;
  transform: scale(1.09);
}
nav a:active {
  background: #eeb301;
  color: #222;
  transform: scale(0.98);
}

.hero-banner {
  width: 100vw;
  min-height: 340px;
  height: 34vw;
  max-height: 490px;
  background-image: url('hero-wide-banner.png');
  background-size: cover;
  background-position: 50% 48%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 12px 36px #000a;
  margin-bottom: 0;
  overflow: hidden;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #271a0850 0%, #130b0977 45%, #18120b 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-banner-overlay {
  position: relative;
  z-index: 2;
  color: #FFD700;
  text-align: center;
  width: 100%;
  max-width: 670px;
  margin: 0 auto 5vw auto;
  padding: 2vw 1vw 1vw 1vw;
  text-shadow: 0 2px 18px #000, 0 1px 36px #FFD70055;
}
.hero-banner-overlay h1 {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 3.1rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin: 0 0 0.5em 0;
  color: #FFD700;
  text-shadow: 0 7px 24px #0f0710cc, 0 2px 24px #FFD70089;
}
.hero-subtitle {
  font-size: 1.15rem;
  font-weight: 500;
  color: #fffde1;
  margin-bottom: 0;
  margin-top: 1.3em;
  text-shadow: 0 2px 18px #271a0855;
}
@media (max-width: 700px) {
  .hero-banner-overlay h1 { font-size: 2rem; }
  .hero-banner { min-height: 150px; height: 36vw; max-height: 260px; }
  .hero-banner-overlay { padding: 2vw .5vw 1vw .5vw; }
  .hero-subtitle { font-size: .98em; }
}
.hero {
  background: linear-gradient(45deg, #18120b 60%, #523a19 100%);
  color: #FFD700;
  text-align: center;
  padding: 3.5rem 1rem 2rem 1rem;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 8px 28px #000C;
}
.hero-img:hover, .hero-img:focus {
  box-shadow: 0 18px 50px #FFD70033, 0 2px 24px #ffd70077 inset !important;
  transform: scale(1.05) rotate(-2deg);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.55,1.6,.12,1.05), box-shadow .33s;
}

.container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2rem 2.5vw;
  background: #271a08cc;
  border-radius: 12px;
  box-shadow: 0 4px 32px #2c170855;
}
body, main {
  padding-left: 2vw; padding-right: 2vw;
}

h1, h2, h3 {
  font-family: 'Oswald', 'Inter', Arial, sans-serif;
  letter-spacing: 0.04em;
  margin-top: 0;
  color: #FFD700;
  text-shadow: 0 2px 7px #422d0b;
}
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: .7em;
}
h2 {
  font-size: 1.65rem;
  margin-bottom: .54em;
}
h3 {
  font-size: 1.18rem;
  margin-bottom: .45em;
}

p, li, td {
  font-size: 1.06rem;
  line-height: 1.55;
  color: #fffde1;
}

ul, ol {
  padding-left: 1.8em;
  margin-top: .35em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
  background: #271a0888;
}
th, td {
  border: 1px solid #FFD70055;
  padding: .57em .6em;
  text-align: left;
}
thead th {
  background: #35240c;
  color: #FFD700;
  font-size: 1rem;
}
tbody td {
  background: #281b0899;
}

/* Card and Shadow Styles */
.timeline-entry, .media-embed, .credit, .container {
  background: #271a08dd;
  border: 1px solid #FFD70066;
  border-radius: 8px;
  box-shadow: 0 7px 32px #090608aa, 0 2px 4px #FFD70033;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  transition: box-shadow .23s, background .23s, transform .15s;
}

/* Person bio/about section card styling */
.person-rich-snippet {
  background: linear-gradient(137deg,#18120b 70%,#271a0890 100%);
  border: 1px solid #FFD70067;
  border-radius: 22px;
  box-shadow: 0 8px 36px #18120bcc, 0 2px 7px #FFD70033;
  margin: 2.3em auto 2.2em auto;
  padding: 2em 2.1em 1.3em 2.1em;
  color: #ffe590;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  animation: aboutFadeIn .5s cubic-bezier(.32,1.4,.44,1.02) both;
}
.person-rich-snippet h2 {
  font-family: 'Oswald', Arial, sans-serif;
  letter-spacing: .06em;
  font-size: 2rem;
  margin: 0 0 1.2rem 0;
  color: #FFD700;
  text-shadow: 0 4px 34px #FFD70011, 0 2px 14px #090608cc;
}
.person-rich-snippet dl {
  margin: 1.6em 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .6em .8em;
  font-size: 1.07em;
}
.person-rich-snippet dt {
  font-weight: bold;
  color: #ffd700;
  font-family: 'Oswald', Arial, sans-serif;
}
.person-rich-snippet dd {
  margin: 0 0 .2em 0;
  color: #fffde3;
}
.person-rich-snippet a {
  color: #FFD700;
  text-decoration: underline;
  font-weight: 600;
  transition: color .19s, background .22s, box-shadow .19s;
  border-radius: 6px;
  padding: 1px 7px;
}
.person-rich-snippet a:hover, .person-rich-snippet a:focus {
  background: #18120bf6;
  color: #FFA500;
  box-shadow: 0 0 0 2px #FFD70099;
  text-shadow: 0 2px 6px #ffd70033;
}
@keyframes aboutFadeIn {
  0% { opacity:0; transform:translateY(65px) scale(.95); }
  100% { opacity:1; transform:translateY(0) scale(1);}
}
.timeline-entry:hover, .media-embed:hover {
  box-shadow: 0 14px 44px #ffd70088, 0 3px 10px #FFD70066;
  background: #302612ee;
  transform: scale(1.03) rotate(0.5deg);
  z-index: 2;
}

.responsive-embed { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.responsive-embed iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
  background: #312003;
  border-radius: 8px;
  box-shadow: 0 2px 16px #FFD70044;
}
.responsive-embed .credit {
  margin-top: .4em;
  color: #FFD700;
  font-size: .98rem;
}

blockquote {
  margin: 0.6em 0 1em;
  padding: .8em 1em;
  background: #18120b88;
  border-left: 5px solid #FFD700;
  border-radius: 8px;
  font-size: 1.14em;
  color: #FFD700;
  font-family: 'Oswald', 'Inter', Arial, sans-serif;
  text-shadow: 0 1px 2px #3b2510;
}

.footer {
  background: #1c1205;
  color: #FFD700;
  text-align: center;
  padding: 1.1em 0 .8em 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 -4px 16px #FFD70022;
  font-size: .95rem;
}

.bg-black { background: #18120b; }
.text-gold { color: #FFD700; }
.text-white { color: #fffbe7; }
.row { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.col { flex: 1 1 0; min-width: 260px; }

.sr-only {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 900px) {
  .container { max-width: 96vw; padding: 1.2em 1.4em; }
}
@media (max-width: 700px) {
  header, nav, main, footer { padding-left: 1vw; padding-right: 1vw; }
  .container { max-width: 99vw; padding: 1.1em .8em; }
  .hero-banner-img, .hero-banner-img-wrap img { width: 100vw; max-width: 100vw; }
}
@media (max-width: 600px) {
  nav { flex-direction: column; gap: .5rem; padding: 1rem 0 .2rem 0; }
  .container { max-width: 100vw; padding: .8em .5em; }
  main, body { padding-left: 0; padding-right: 0; }
  .row { flex-direction: column; gap: 1.2rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.23rem; }
  .col { min-width: 94vw; }
  iframe { width: 100vw !important; min-width: 280px; height: 210px !important; }
}