/* ─── 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;
}

/* ─── Tote Editorial Page ───────────────────────────────── */

/* Suppress # prefixes inside editorial content */
.tote-editorial h1::before,
.tote-editorial h2::before,
.tote-editorial h3::before {
  content: '' !important;
}

/* Full-width breakout shared utility */
.tote-hero,
.tote-full,
.tote-spread,
.tote-grid-3,
.tote-grid-2,
.tote-closing {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ── Hero ── */
.tote-hero {
  position: relative;
  height: 88vh;
  min-height: 520px;
  overflow: hidden;
  border-top: 4px solid #233CE6;
  margin-top: -1rem;
}

.tote-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-bottom: none;
}

.tote-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 2.5rem 2.8rem;
  background: linear-gradient(transparent, rgba(10,10,20,0.72));
  color: #fff;
}

.tote-kicker {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.4rem;
  font-family: 'Roboto Mono', monospace;
}

.tote-hero-overlay h1 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.88;
  margin: 0 0 0.8rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.tote-launch-badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  padding: 0.3em 0.9em;
  background: rgba(255,255,255,0.12);
  font-family: 'Roboto Mono', monospace;
}

/* ── Intro text ── */
.tote-intro {
  max-width: 58ch;
  margin: 3.5rem auto;
  text-align: center;
  font-size: 1.12rem;
  line-height: 1.85;
  padding: 0 1rem;
}

.tote-intro::before {
  content: '';
  display: block;
  width: 2px;
  height: 44px;
  background: #233CE6;
  margin: 0 auto 2rem;
}

/* ── Spread (half/half) ── */
.tote-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}

.tote-spread-rev {
  direction: rtl;
}
.tote-spread-rev > * {
  direction: ltr;
}

.tote-spread-img {
  overflow: hidden;
}

.tote-spread-img img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-bottom: none;
}

.tote-spread-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 3rem;
}

.tote-detail-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #233CE6;
  margin-bottom: 0.75rem;
  font-family: 'Roboto Mono', monospace;
}

.tote-spread-text h2 {
  font-size: 1.6rem;
  margin: 0 0 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.tote-spread-text p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  max-width: 42ch;
}

/* ── Full bleed ── */
.tote-full {
  height: 26vh;
  overflow: hidden;
}

.tote-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-bottom: none;
}

/* ── credit line ── */
.tote-credit {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  opacity: 0.65;
  font-style: italic;
}

/* ── 3-up grid ── */
.tote-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.tote-grid-3 img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-bottom: none;
}

/* ── Pull quote ── */
.tote-pullquote {
  text-align: center;
  padding: 3.5rem 1rem;
  max-width: 46ch;
  margin: 2rem auto;
  font-size: 1.35rem;
  line-height: 1.6;
  font-style: italic;
  border-top: 1px solid #233CE6;
  border-bottom: 1px solid #233CE6;
}

/* ── 2-up grid ── */
.tote-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.tote-grid-2 img {
  width: 100%;
  height: 640px;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  border-bottom: none;
}

/* ── Closing ── */
.tote-closing {
  text-align: center;
  padding: 4rem 1rem 5rem;
  border-top: 4px solid #233CE6;
  margin-top: 2rem;
}

.tote-closing-title {
  display: block;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #233CE6;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}

.tote-closing p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0.4rem 0;
}

/* ── Gathering pages: show images at natural height, no cropping ── */
.content div[style*="overflow:hidden"],
.content div[style*="overflow: hidden"] {
  height: auto !important;
  overflow: visible !important;
}
.content div[style*="aspect-ratio"] {
  height: auto !important;
  aspect-ratio: unset !important;
  overflow: visible !important;
}
.content div[style] img {
  height: auto !important;
  object-fit: unset !important;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .tote-spread {
    grid-template-columns: 1fr;
  }
  .tote-spread-rev {
    direction: ltr;
  }
  .tote-spread-img img {
    width: 100%;
    height: auto;
    min-height: unset;
    object-fit: unset;
  }
  .tote-grid-3 {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .tote-grid-3 img {
    width: 100%;
    height: auto;
    object-fit: unset;
  }
  .tote-grid-2 {
    grid-template-columns: 1fr;
  }
  .tote-grid-2 img {
    width: 100%;
    height: auto;
    object-fit: unset;
  }
  .tote-hero {
    height: 70vh;
  }
  .tote-full {
    height: auto;
  }
  .tote-full img {
    height: auto;
    object-fit: unset;
  }

  /* ── Gathering pages: collapse inline grids to single column on mobile ── */
  .content div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .content div[style*="grid-column"] {
    grid-column: auto !important;
  }
}