:root{
  --nav-height: 64px;
  --nav-bg: rgba(0,0,0,0.45);
  --nav-color: #ffffff;
  --accent: #2575fc;
  --font-sans: 'Aptos', 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif;
}

@import url('https://fonts.cdnfonts.com/css/aptos');

*{box-sizing:border-box}

/* Force Aptos site-wide (including form controls and pseudo-elements) */
*,
*::before,
*::after{
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

html,body{height:100%}

body{
  font-family: var(--font-sans);
  padding-top:var(--nav-height);
  padding-bottom:var(--nav-height);
  /* page background image with a dark overlay for readability */
  background-color: #000; /* fallback if image fails */
  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('Graphics/HomePageGraphic.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #f5f5f5;
}

header, footer{
  position:fixed;
  left:0;
  right:0;
  height:var(--nav-height);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--nav-bg);
  color:var(--nav-color);
  z-index:1000;
  backdrop-filter: blur(6px);
}

header{ top:0; border-bottom: 1px solid rgba(255,255,255,0.06); }
footer{ bottom:0; border-top: 1px solid rgba(255,255,255,0.06); }

.navbar{
  width: min(1100px, 94%);
  display:flex;
  align-items:center;
  justify-content:center; /* center the nav items */
  gap: 1rem;
  position:relative; /* allow .brand to be positioned at left without affecting centering */
}

.brand{ font-weight:700; letter-spacing:0.6px; position:absolute; left:18px; top:50%; transform:translateY(-50%); }

.nav-list{ display:flex; gap:0.75rem; margin:0; padding:0; list-style:none; align-items:center }
.nav-list li{ margin:0 }

.nav-list li a{ display:flex; align-items:center; gap:0.5rem; color:inherit; text-decoration:none; padding:0.35rem 0.6rem; border-radius:0.45rem; transition: background 0.18s, color 0.18s; }
.nav-list li a:hover, .nav-list li a:focus{ background: rgba(255,255,255,0.06); }
.nav-list li a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.icon{ width:20px; height:20px; display:inline-block; fill:currentColor }

/* Small screens: hide brand and text labels, keep icons */
@media (max-width:560px){
  .brand{ display:none }
  .nav-list li a span{ display:none }
  .nav-list{ gap:0.5rem }
}

/* Ensure hero or other centered content won't be blocked by fixed bars */
.hero{ max-width:1000px }

/* Silas Creed summary styles */
.summary-section{ display:flex; justify-content:center; padding:3.5rem 1rem; }
.summary-card{
  width: min(1000px, 94%);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(1.05);
}
.summary-card h2{ margin:0 0 0.6rem 0; font-size:1.35rem; letter-spacing:0.2px }
.summary-content{ color: #eef2ff; font-size:1.02rem; line-height:1.68; max-width:68ch }
.summary-paragraph{ margin:0 0 1.05rem 0; }
.summary-paragraph:last-child{ margin-bottom:0 }

/* Drop cap for the first paragraph */
.dropcap::first-letter{
  float:left; font-size:3.4rem; line-height:0.75; padding-right:0.38rem; font-weight:700; color:var(--accent);
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Raw pre fallback (visible if JS is disabled) */
.summary-raw{
  white-space: pre-wrap; font-family: Georgia, 'Times New Roman', Times, serif; color: #e9edf8; background: transparent; border: none; padding:0; margin:0; font-size:1rem; line-height:1.65;
}

@media (max-width:720px){
  .summary-card{ padding:1.1rem 1rem }
  .dropcap::first-letter{ font-size:2.6rem }
  .summary-content{ font-size:0.98rem }
}