/* ─── Apartment Café Carousel ──────────────────────────────── */
.ac-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 2.5rem;
  border-radius: 6px;
}

.ac-carousel-track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

.ac-carousel-slide {
  flex: 0 0 calc(100% / 3);
  padding: 0 6px;
  box-sizing: border-box;
}

.ac-carousel-slide img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  border-bottom: none;
}

.ac-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 51, 160, 0.75);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}

.ac-prev { left: 8px; }
.ac-next { right: 8px; }

.ac-carousel-btn:hover {
  background: #1A1A2E;
}

/* ─── Palette ───────────────────────────────────────────────
   Deep night   #1A1A2E
   IKB blue     #0033A0
   Ultramarine  #4169CF
   Plaster      #E8E4D9
   Narinj       #C0531A
   Bitter orange#E87434
   Saffron      #F5C47A
──────────────────────────────────────────────────────────── */

/* Light mode CSS variables */
:root {
  --maincolor:     #0033A0;  /* IKB blue  — links, headings */
  --bordercl:      #4169CF;  /* Ultramarine — borders, HR */
  --callouctcolor: #E87434;  /* Bitter orange — callouts */
  --hovercolor:    #1A1A2E;  /* Deep night — hover bg */
  --darkMaincolor: #F5C47A;  /* Saffron — dark-mode accents */
}

/* ─── Light mode base ──────────────────────────────────── */
html {
  background-color: #E8E4D9; /* Plaster */
  color: #1A1A2E;             /* Deep night */
}

a {
  border-bottom: 2px solid var(--maincolor);
  color: inherit;
}
a:hover {
  background-color: var(--hovercolor);
  color: #E8E4D9;
}

.home-tagline {
  color: #C0531A; /* Narinj */
}

/* ─── Dark mode overrides ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  html {
    background-color: #1A1A2E; /* Deep night */
    color: #E8E4D9;             /* Plaster */
  }

  body {
    background-color: #1A1A2E;
    color: #E8E4D9;
  }

  a {
    border-bottom: 2px solid #F5C47A; /* Saffron */
    color: inherit;
  }
  a:hover {
    background-color: #4169CF; /* Ultramarine */
    color: #E8E4D9;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #E8E4D9;
  }
  h1::before { color: #F5C47A; }
  h2::before { color: #F5C47A; }
  h3::before { color: #F5C47A; }
  h4::before { color: #F5C47A; }
  h5::before { color: #F5C47A; }
  h6::before { color: #F5C47A; }

  hr {
    border-top-color: #4169CF;
  }

  blockquote {
    border-left-color: #4169CF;
  }

  code {
    background-color: #2a2a44;
    color: #F5C47A;
  }

  pre {
    background-color: #12121f;
  }

  .toc {
    background-color: #12121f;
    color: #E8E4D9;
  }

  .home-tagline {
    color: #E87434; /* Bitter orange in dark */
  }

  footer,
  .header nav {
    border-color: #4169CF;
  }

  .site-title a {
    color: #E8E4D9;
  }

  .tags a {
    border-bottom: 2px solid #F5C47A;
  }
  .tags a:hover {
    background-color: #4169CF;
    color: #E8E4D9;
  }
}

/* ─── Homepage layout ──────────────────────────────────── */
.home-page {
  display: grid;
  gap: 3rem;
}

.home-hero {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 3rem;
  padding: 2rem 0 1rem;
  margin-left: -10rem;  /* ← add this to shift left */
  /* margin-top: -2rem;   ← add this to shift up */
}

.home-hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 640px) {
  .home-hero {
    flex-direction: column;
  }
}

.home-kicker {
  margin: 0 0 0.5rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--maincolor);
}

.home-hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
}

.home-bio p {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  /* margin-top: 1rem; */
  max-width: 58ch;
}

.home-hero-media {
  display: flex;
  justify-content: left;
  flex: 0 0 55%;
}

.home-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.home-posts h2 {
  margin-bottom: 1.5rem;
}

/* ─── Section pages ────────────────────────────────────── */
.section-intro {
  border-left: 4px solid var(--bordercl);
  padding-left: 1rem;
  margin-bottom: 2rem;
  color: inherit;
}