/* Custom Color Scheme Overrides for Johannes Himmelreich Academic Site */
/* Overrides jesper theme defaults with the academic portfolio color scheme */

:root {
  /* Primary Colors */
  --tt-main-color: #974023;           /* Rust - replaces jesper's #bf4a1a */
  --tt-accent-color: #788AA9;         /* Slate Blue */
  --tt-warm-accent: #C98663;          /* Terracotta */
  --tt-cream: #F7D7BF;                /* Cream */
  --tt-coral: #CD5C47;                /* Coral - decorative headings */

  /* Extended Palette */
  --tt-muted-emphasis: #7A8A6A;       /* Muted Sage - weak text emphasis */
  --tt-section-bg: #4A3520;           /* Deep Ochre - section backgrounds */
  --tt-gold-accent: #A08030;          /* Ochre Gold - borders, tags */

  /* Dark Mode (Default) */
  --tt-dark-color: #1a1a1a;
  --tt-light-color: #F7D7BF;
  --tt-bg-color: #151515;
  --tt-text-color: #F7D7BF;
  --tt-text-muted-color: #a89080;
  --tt-border-color: rgba(151, 64, 35, 0.4);
  --tt-link-color: #C98663;
  --tt-link-hover-color: #974023;

  /* Typography per design plan:
     - Playfair Display (serif) for h1, h2 headlines
     - IBM Plex Sans for h3 subheads, body, captions */
  --tt-body-font: 'IBM Plex Sans', sans-serif;
  --tt-heading-font: 'Playfair Display', Georgia, serif;
  --tt-alter-font: 'Playfair Display', Georgia, serif;  /* Override Jesper's display font */

  /* Spacing */
  --section-padding: 100px;
}

/* Skip link - visually hidden until focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tt-main-color);
  color: var(--tt-cream);
  padding: 0.75rem 1.5rem;
  font-family: var(--tt-body-font);
  font-weight: 600;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 10px;
  outline: 3px solid var(--tt-accent-color);
  outline-offset: 2px;
}

/* Light Mode - uses Jesper's tt-lightmode-on class */
body.tt-lightmode-on {
  --tt-bg-color: #faf8f5;
  --tt-text-color: #1a1a1a;
  --tt-text-muted-color: #5a5a5a;
  --tt-muted-emphasis: #5A6A4A;       /* Muted Sage - light mode */
  --tt-section-bg: #5A4530;           /* Deep Ochre - light mode */
  --tt-gold-accent: #8A7028;          /* Ochre Gold - light mode */
  --tt-border-color: rgba(151, 64, 35, 0.3);
  --tt-link-color: #974023;
  --tt-link-hover-color: #C98663;
}

/* Text selection - Slate Blue background with high contrast text */
::selection {
  background: var(--tt-accent-color);  /* Slate Blue */
  color: #fff;  /* White text for contrast in dark mode */
  -webkit-text-fill-color: #fff;
}
::-moz-selection {
  background: var(--tt-accent-color);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.tt-lightmode-on ::selection {
  background: var(--tt-accent-color);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
body.tt-lightmode-on ::-moz-selection {
  background: var(--tt-accent-color);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Override jesper header styling for academic context */
#tt-header {
  border-bottom: 3px solid var(--tt-main-color);
}

#tt-header.tt-filled {
  background: var(--tt-bg-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Logo styling - text-based logo since we're not using images */
.tt-logo a {
  text-decoration: none;
}

.tt-logo-text {
  font-family: var(--tt-heading-font);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tt-main-color);
  white-space: nowrap;
}

.tt-logo-text:hover {
  color: var(--tt-warm-accent);
}

/* Responsive logo: show full name by default, short on narrow screens */
.tt-logo-short {
  display: none;
}

@media (max-width: 439px) {
  .tt-logo-full {
    display: none;
  }
  .tt-logo-short {
    display: inline;
  }
}

/* Navigation - IBM Plex Sans (sans-serif for UI elements) */
@media (min-width: 1025px) {
  .tt-main-menu-list > li > a {
    font-family: var(--tt-body-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tt-text-color);
    font-size: 0.875rem;
  }

  .tt-main-menu-list > li > a:hover {
    color: var(--tt-main-color);
  }

  .tt-main-menu-list > li > a::before {
    background-color: var(--tt-main-color);
  }
}

/* Section headings - Playfair Display for h1/h2, IBM Plex Sans for subtitles */
.tt-heading-title {
  font-family: var(--tt-heading-font);
  font-weight: 700;
  text-transform: none;  /* Playfair looks better in mixed case */
  letter-spacing: 0.01em;
  color: var(--tt-main-color);
}

.tt-heading-subtitle {
  font-family: var(--tt-body-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--tt-accent-color);
  font-size: 0.85rem;
}

/* Hero section - uses Jesper's ph-full for fullscreen and positioning */
.hero-section {
  position: relative;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-name {
  font-family: var(--tt-heading-font);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  text-transform: none;  /* Playfair in mixed case */
  line-height: 1.1;
  color: var(--tt-main-color);
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--tt-body-font);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--tt-text-muted-color);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hero claim - large prominent statement with text reveal */
.hero-claim {
  font-family: var(--tt-body-font);
  font-weight: 500;
  line-height: 1.4;
  max-width: 550px;
  color: var(--tt-coral);  /* Use Coral accent for prominence */
}

/* Override text-reveal colors for hero claim - preserve animation properties */
.hero-claim.tt-text-reveal > span {
  color: var(--tt-coral);
  -webkit-text-fill-color: rgba(205, 92, 71, 0.25);  /* Coral at 25% opacity */
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 100%;
}

.hero-image-container {
  position: relative;
}

.hero-image-container img {
  width: 100%;
  max-width: 500px;  /* Larger image */
  height: auto;
  display: block;
  border: 5px solid var(--tt-main-color);
  filter: grayscale(20%);
  transition: filter 0.3s ease;
}

.hero-image-container img:hover {
  filter: grayscale(0%);
}

/* Additional brutalist decoration - gold accent bar */
.hero-image-container .accent-bar {
  position: absolute;
  bottom: -30px;
  right: 50px;
  width: 120px;
  height: 8px;
  background: var(--tt-gold-accent);
}

.hero-image-container::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  background: var(--tt-accent-color);  /* Slate Blue main offset */
  z-index: -1;
}

/* Additional brutalist decoration layers using extended palette */
.hero-image-container::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 80px;
  height: 80px;
  background: var(--tt-coral);  /* Coral accent square */
  z-index: -2;
}

/* Scroll down CTA - IBM Plex Sans with adjusted sizing */
.tt-scroll-down text {
  font-family: var(--tt-body-font);
  font-size: 3.125rem;
  letter-spacing: 4px;
  fill: var(--tt-muted-emphasis);
}

/* Mark element - Rust in dark mode (default), Slate Blue in light mode */
/* Light mode uses dark text on Slate Blue for WCAG AA contrast (4.5:1) */
body.tt-lightmode-on mark {
  background-color: var(--tt-accent-color);
  color: #1a1a1a;
}

/* About section - quote block styling */
.about-quote {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);  /* Responsive sizing */
  line-height: 1.5;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  padding-left: 50px;
  border: none;
}

.about-quote cite {
  font-style: italic;
}

/* Light mode: use Muted Sage for the quote */
body.tt-lightmode-on .about-quote,
body.tt-lightmode-on .about-quote cite {
  color: var(--tt-muted-emphasis);  /* Muted Sage */
}

.about-content {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 800px;
}

.about-content p {
  margin-bottom: 1.5rem;
}

/* Publication category styling */
.pub-category {
  margin-bottom: 2rem;
  border: 2px solid var(--tt-border-color);
  background: rgba(151, 64, 35, 0.03);
}

.pub-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
}

.pub-category-header:hover {
  background: rgba(151, 64, 35, 0.08);
}

/* h3 styling moved to .pub-header-caption h3 in mask section */

.pub-category-toggle {
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 0.3s ease;
  z-index: 3;  /* Above the mask layer */
}

.pub-category-toggle::before,
.pub-category-toggle::after {
  content: '';
  position: absolute;
  background: var(--tt-main-color);
  transition: all 0.3s ease;
}

.pub-category-toggle::before {
  width: 24px;
  height: 3px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.pub-category-toggle::after {
  width: 3px;
  height: 24px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.pub-category[data-expanded="true"] .pub-category-toggle::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* Publication header caption styling */
.pub-header-caption {
  flex: 1;
  display: inline-flex;
  cursor: pointer;
}

.pub-header-caption h3 {
  font-family: var(--tt-body-font);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-main-color);
  margin: 0;
}

/* Section-wide mask effect (Jesper ph-mask pattern) */
#publications {
  position: relative;
  overflow: hidden;  /* Contain the mask */
}

.pub-section-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tt-accent-color);  /* Slate Blue */
  pointer-events: none;
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.12s ease-out;
  will-change: clip-path;
  z-index: 10;
  overflow: visible;
}

body.pub-mask-active .pub-section-mask {
  clip-path: circle(clamp(130px, 15vw, 220px) at var(--x, 50%) var(--y, 50%));
}

/* Positioned subtitle elements inside the mask - ALL visible */
.pub-mask-subtitle {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;  /* Match .pub-category-header padding */
}

.pub-mask-subtitle span {
  font-family: var(--tt-body-font);
  font-size: 1.25rem;    /* Match title size */
  font-weight: 600;      /* Match title weight */
  text-transform: uppercase;  /* Match title transform */
  letter-spacing: 0.08em;
  color: var(--tt-cream);
}

/* Toggle symbol inside mask - visible through circle */
.pub-mask-toggle {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.pub-mask-toggle::before,
.pub-mask-toggle::after {
  content: '';
  position: absolute;
  background: var(--tt-cream);
}

.pub-mask-toggle::before {
  width: 24px;
  height: 3px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.pub-mask-toggle::after {
  width: 3px;
  height: 24px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Hide vertical bar when expanded */
.pub-mask-subtitle.expanded .pub-mask-toggle::after {
  opacity: 0;
}

/* Border inside mask - visible through circle */
.pub-mask-subtitle {
  border: 2px solid rgba(247, 215, 191, 0.4);  /* Cream with transparency */
  background: var(--tt-accent-color);  /* Ensure solid background */
  box-sizing: border-box;
}

/* Mobile/narrow screens: hide subtitle reveal effect */
@media (max-width: 1024px) {
  .pub-section-mask {
    display: none;
  }
}

/* Disable effects on mobile devices */
body.is-mobile .pub-section-mask {
  display: none !important;
}

.pub-category.collapsed .pub-list {
  display: none;
}

.pub-list {
  padding: 0 1.5rem 1.5rem;
}

/* Remove jekyll-scholar's default ordered list numbering */
.pub-list ol,
.pub-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

/* Individual publication styling using jesper awards pattern */
.pub-item {
  border-top: 1px solid var(--tt-border-color);
  padding: 1rem 0;
}

.pub-item:first-child {
  border-top: none;
}

.pub-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
  padding: 0.5rem 0;
  gap: 1rem;
}

.pub-header:hover .pub-title {
  color: var(--tt-main-color);
}

.pub-citation {
  flex: 1;
}

.pub-title {
  font-family: var(--tt-body-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--tt-text-color);
  transition: color 0.2s ease;
  display: block;
  margin-bottom: 0.3rem;
}

.pub-meta {
  font-size: 1rem;
  color: var(--tt-text-muted-color);
}

.pub-meta em {
  font-style: italic;
  color: var(--tt-muted-emphasis);  /* Muted Sage for venue titles */
}

.pub-toggle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.pub-toggle svg {
  stroke: var(--tt-text-muted-color);
  transition: stroke 0.2s ease;
}

.pub-item.expanded .pub-toggle {
  transform: rotate(45deg);
}

.pub-item.expanded .pub-toggle svg {
  stroke: var(--tt-main-color);
}

.pub-details {
  display: none;
  padding: 1rem 0;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--tt-border-color);
}

.pub-item.expanded .pub-details {
  display: block;
}

.pub-authors {
  font-size: 1rem;
  color: var(--tt-accent-color);
  margin-bottom: 1rem;
  font-weight: 500;
}

.pub-abstract {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--tt-text-color);
  margin-bottom: 1rem;
}

.pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--tt-main-color);
  color: var(--tt-cream);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 2px solid var(--tt-main-color);
  transition: all 0.2s ease;
}

.pub-link:hover {
  background: transparent;
  color: var(--tt-main-color);
}

/* Fix button text color on focus, active, and visited states */
.pub-link:focus,
.pub-link:active {
  background: var(--tt-main-color);
  color: var(--tt-cream);
  outline: 2px solid var(--tt-warm-accent);
  outline-offset: 2px;
}

.pub-link:visited {
  background: var(--tt-main-color);
  color: var(--tt-cream);
}

.pub-link:visited:hover {
  background: transparent;
  color: var(--tt-main-color);
}

/* Teaching section */
.teaching-image-container {
  position: relative;
  display: inline-block;
  max-width: 400px;
}

/* Muted offset shadow - smaller and more subtle than hero */
.teaching-image-container::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: -12px;
  bottom: -12px;
  background: rgba(120, 138, 169, 0.4);  /* Slate Blue at 40% opacity */
  z-index: -1;
}

/* Subtle accent bar */
.teaching-image-container::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 30px;
  width: 80px;
  height: 5px;
  background: var(--tt-gold-accent);
  z-index: 1;
}

.teaching-image {
  width: 100%;
  max-width: 400px;
  border: 4px solid var(--tt-main-color);
  filter: grayscale(30%);
  transition: filter 0.3s ease;
  display: block;
}

.teaching-image:hover {
  filter: grayscale(0%);
}

/* Teaching intro text uses Jesper grid (tt-row/tt-col) */
#teaching .tt-row p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--tt-text-color);
}

.teaching-group {
  margin-bottom: 3rem;
}

.teaching-group h3 {
  font-family: var(--tt-body-font);  /* h3 = IBM Plex Sans semibold per plan */
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-main-color);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--tt-main-color);
}

.course-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.course-item {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 2px solid var(--tt-border-color);
  background: rgba(151, 64, 35, 0.02);
  transition: all 0.3s ease;
}

.course-item:hover {
  border-color: var(--tt-main-color);
  background: rgba(151, 64, 35, 0.05);
}

.course-item h4 {
  font-family: var(--tt-body-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--tt-text-color);
  margin: 0 0 0.75rem;
}

.course-item p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tt-text-muted-color);
  margin: 0;
}

.course-item.simple {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.course-item.simple h4 {
  margin: 0;
}

.institution {
  font-size: 0.9rem;
  color: var(--tt-accent-color);
  font-weight: 500;
}

/* Teaching Accordion Cards */

/* Desktop: Show horizontal accordion, hide vertical */
.teaching-cards-mobile {
  display: none;
}

/* Mobile: Show vertical accordion, hide horizontal */
@media (max-width: 1024px) {
  .teaching-cards-desktop {
    display: none !important;
  }

  .teaching-cards-mobile {
    display: block;
  }
}

/* Horizontal Accordion - Font and size adjustments */
.teaching-cards-desktop .tt-haci-title {
  font-family: var(--tt-heading-font);  /* Playfair Display serif */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);  /* Slightly larger for serif readability */
  font-weight: 700;
  text-transform: none;  /* Mixed case for long course titles */
  line-height: 1.2;
}

.teaching-cards-desktop .tt-haci-description {
  font-size: 0.875rem;
}

/* Horizontal Accordion - Keyboard/focus support */
.teaching-cards-desktop .tt-hac-item:focus {
  outline: none;  /* We use visual expansion instead */
}

.teaching-cards-desktop .tt-hac-item:focus-visible {
  outline: 2px solid var(--tt-accent-color);
  outline-offset: -2px;
}

/* Expand card on focus (mirrors hover behavior from theme.css) */
.teaching-cards-desktop .tt-hac-item:focus-within,
.teaching-cards-desktop .tt-hac-item.is-active {
  flex: 4;
}

.teaching-cards-desktop .tt-hac-item:focus-within .tt-hac-item-inner,
.teaching-cards-desktop .tt-hac-item.is-active .tt-hac-item-inner {
  background-color: var(--tt-main-color);
}

.teaching-cards-desktop .tt-hac-item:focus-within .tt-haci-description,
.teaching-cards-desktop .tt-hac-item.is-active .tt-haci-description {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.15s;
}

/* Vertical Accordion - Font and size adjustments */
.teaching-cards-mobile .tt-ac-head-title {
  font-family: var(--tt-heading-font);  /* Playfair Display serif */
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 700;
  text-transform: none;  /* Mixed case for long course titles */
}

/* Adjust for teaching section context */
.teaching-group h3 {
  margin-bottom: 1rem;
}

/* CV Section */
.cv-section {
  text-align: center;
  background: var(--tt-main-color);
  padding: 4rem 2rem;
}

.cv-section .tt-heading-subtitle {
  color: rgba(247, 215, 191, 0.7);  /* Cream at 70% opacity */
}

.cv-section .tt-heading-title {
  color: var(--tt-cream);
}

/* CV download button - extends Jesper tt-btn with brutalist overrides */
.cv-download-btn {
  background: var(--tt-cream);
  color: var(--tt-main-color);
  border: 3px solid var(--tt-cream);
  border-radius: 0;  /* Brutalist: no rounded corners */
  font-family: var(--tt-body-font);
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0 2rem;
  height: 56px;
  margin: 0;
}

.cv-download-btn .tt-btn-inner {
  color: var(--tt-main-color);
}

.cv-download-btn .tt-btn-inner::after {
  color: var(--tt-main-color);
}

.cv-download-btn:hover {
  background: transparent;
  border-color: var(--tt-cream);
}

.cv-download-btn:hover .tt-btn-inner,
.cv-download-btn:hover .tt-btn-inner::after {
  color: var(--tt-cream);
}

.cv-download-btn .tt-btn-icon {
  color: inherit;
}

/* Contact section */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-group h3 {
  font-family: var(--tt-body-font);  /* h3 = IBM Plex Sans semibold per plan */
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-main-color);
  margin-bottom: 1rem;
}

.contact-address {
  font-style: normal;
  line-height: 1.8;
  color: var(--tt-text-color);
}

.contact-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-group li {
  margin-bottom: 0.75rem;
}

.contact-group a {
  color: var(--tt-link-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.contact-group a:hover {
  color: var(--tt-link-hover-color);
}

.contact-group i {
  width: 20px;
  text-align: center;
}

/* Footer styling */
#tt-footer {
  background: var(--tt-dark-color);
  border-top: 4px solid var(--tt-main-color);
  padding: 2rem;
  text-align: center;
}

.footer-content {
  color: var(--tt-text-muted-color);
  font-size: 0.9rem;
}

/* Theme/style switch - override Jesper's tt-lightmode-on with our data-theme approach */
.tt-style-switch {
  margin-left: 30px;
}

.tt-style-switch-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(151, 64, 35, 0.2);
  border: 2px solid var(--tt-border-color);
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0; /* Brutalist - no rounded corners */
  transition: background-color 0.3s, border-color 0.3s;
  color: var(--tt-text-color);
}

.tt-style-switch-inner:hover {
  border-color: var(--tt-main-color);
  background-color: rgba(151, 64, 35, 0.3);
}

/* Dark mode (default): show sun icon, hide moon */
.tt-stsw-dark {
  display: none;
}
.tt-stsw-light {
  display: block;
}

/* Light mode: show moon icon, hide sun - uses Jesper's tt-lightmode-on class */
body.tt-lightmode-on .tt-stsw-dark {
  display: block;
}
body.tt-lightmode-on .tt-stsw-light {
  display: none;
}

@media (max-width: 1024px) {
  .tt-style-switch {
    margin-left: 0;
    margin-right: 15px;
  }
}

/* Scrolling text marquee */
.tt-scrolling-text {
  background: var(--tt-main-color);
  color: var(--tt-cream);
  padding: 1rem 0;
  overflow: hidden;
}

.tt-scrt-content {
  font-family: var(--tt-body-font);  /* Marquee uses sans-serif */
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 992px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image-container {
    order: -1;
    max-width: 350px;
    margin: 0 auto;
  }

  .hero-tagline {
    margin: 0 auto;
  }

  .contact-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-name {
    font-size: 2rem;
  }

  .pub-header-caption h3 {
    font-size: 1.1rem;
  }

  .course-item.simple {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Noise texture overlay (jesper signature) */
body.tt-noise::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}