.header-subtitle {
    margin-top: 0.15rem;
    opacity: 0.8;
    color: #fc0;
    font-size: 0.75rem !important;
}
.header-location {
    color: #fc0;
}

.header-title  {
    font-family: "Oswald", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important;
    display: flex; 
    align-items: center;
    gap: 0.6rem;
}

.header-title-text {
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .header-title-text {
    font-size: clamp(0.94rem, 1.1vw, 1.12rem);
  }
}

@media (max-width: 980px) {
  #header-desktop .header-title {
    max-width: 34vw;
    min-width: 0;
  }

  #header-desktop .header-title-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .header-title {
    max-width: 66vw;
    min-width: 0 !important;
    line-height: 1.2;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }

  #header-mobile .header-title-wrapper {
    max-width: 55vw;
    min-width: 0;
  }

  #header-mobile .header-title-text {
    font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
  }
}


.header-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    margin-top: -0.05rem; 
}


#header-desktop, #header-mobile {
    background-color: #333 !important;
/*    height: 80px; */
}

/* force all header text and icons to light */
#header-desktop,
#header-mobile,
#header-desktop a,
#header-mobile a,
#header-desktop .header-title-text,
#header-mobile .header-title-text,
#header-desktop .menu-link,
#header-mobile .menu-link,
#header-desktop .theme-switch i,
#header-mobile .theme-switch i {
  color: #f2f2f2 !important;
  fill: currentColor !important;
  background: transparent !important;
}

#header-desktop a:hover,
#header-mobile a:hover {
  color: #ffcc00 !important;  /* yellow accent */
}

/* light mode header text/icons should be dark (title, menu, github icon) */
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop a,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile a,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .header-title-text,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .header-title-text,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .menu-link,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .menu-link,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .menu-link i,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .menu-link i,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .theme-switch i,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .theme-switch i {
  color: #111111 !important;
  fill: currentColor !important;
}

html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .header-title a,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .header-title a,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .header-title-text,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .header-title-text,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .menu-link,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .menu-link,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .menu-link i,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .menu-link i,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .theme-switch,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .theme-switch,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .theme-switch i,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-mobile .theme-switch i {
  opacity: 1 !important;
}

/* light mode desktop menu dropdown: black text on white background */
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .menu-item.has-children > .menu-link,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .sub-menu,
html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .sub-menu .menu-link {
  background: #ffffff !important;
  color: #111111 !important;
}

html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .menu-item.has-children > .dropdown-icon {
  color: #111111 !important;
}

html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .sub-menu .menu-link:hover {
  background: #f1f1f1 !important;
  color: #000000 !important;
}

html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .sub-menu {
  min-width: 14rem;
  max-height: none !important;
  overflow-y: hidden !important;
  padding: 0.35rem 0.3rem !important;
}

html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .sub-menu .menu-item {
  height: auto !important;
  line-height: 1.2 !important;
  max-width: none !important;
}

html:not(.dark):not([data-theme="dark"]):not([data-scheme="dark"]) #header-desktop .sub-menu .menu-link {
  display: block;
  padding: 0.48rem 0.9rem !important;
  overflow: visible !important;
}

/* body text serif */
body {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;  
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.6;
}

.menu-link,
.menu-item a,
.menu-item a span {
  font-family: "Inter", "Oswald", "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* optional subtle hover style */
.menu-link:hover {
  color: #ffcc00 !important; 
}

#header-mobile .menu-toggle span {
  background-color: #ffcc00 !important;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* headings back to sans */
h1, h2, h3, h4, h5, h6,
.heading-element,
.heading-element > span,
.post-title, .single-title {
  font-family: "Oswald", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important;
  font-weight: 600; /* adjust to taste */
  line-height: 1.3;
}

.home .content > p {
    padding-top: 1.2rem;
    padding-left: 0.25rem;
  margin-bottom: 0.7rem;   /* add a bit of depth */
  max-width: 60ch;         /* readable line length */
}

/* reset any previous colour rules for home content */
.home .content p,
.home .content li {
    color: inherit;
    opacity: 0.8;    
}

.home .content h2#focus {
    margin-top: 2.2rem;
}

.page.home {
    position: relative;
    min-height: 100vh;
}

.page.home::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/l1gt-500-light-001.png");
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

/* dark mode overrides (covers common FixIt toggles) */
html.dark .page.home::before,
body.dark .page.home::before,
html[data-theme="dark"] .page.home::before,
body[data-theme="dark"] .page.home::before,
html[data-scheme="dark"] .page.home::before,
body[data-scheme="dark"] .page.home::before {
  background-image: url("/images/l1gt-500-dark-001.png");
  opacity: .5;
}

html.dark .home .content p,
html.dark .home .content li,
body.dark .home .content p,
body.dark .home .content li,
html[data-theme="dark"] .home .content p,
html[data-theme="dark"] .home .content li {
  opacity: 0.99;
}

.left {
    float: left;
}
.clear { clear: both; }

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1rem;
}

.project-card {
  border: 1px solid rgba(242, 242, 242, 0.16);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 204, 0, 0.6);
}

.project-card-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: inherit !important;
  text-decoration: none;
  padding: 0.75rem 0.9rem;
}

.project-thumb {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.35rem;
  font-family: "Oswald", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: #ffcc00;
  background: linear-gradient(145deg, rgba(255, 204, 0, 0.16), rgba(0, 0, 0, 0.2));
  border-radius: 0.55rem;
}

.project-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.project-meta {
  min-width: 0;
  padding: 0;
}

.project-name {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}

.project-desc {
  margin: 0;
  opacity: 0.9;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .project-card-link {
    padding: 0.65rem 0.75rem;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .project-meta {
    align-self: stretch;
  }

  .project-desc {
    line-height: 1.35;
  }
}