/*
  style.css — celeins.studio
  ══════════════════════════════════════════════════════════════
  Design language: your script
    • font-family: monospace
    • background: #fafafa
    • color: #111
    • links: color:#111, no underline, border-bottom on hover
    • padding: 40px (body on work pages)
    • headings: uppercase, margin-bottom: 40px

  Structure:
    1. Custom Properties
    2. Reset
    3. Base / Typography
    4. Layout (body flex for sticky footer)
    5. Header
    6. Work Index (work.html)
    7. Series Header
    8. Carousel (structures / between / projects)
    9. Series Nav (prev/next series)
   10. Footer
   11. Animations
   12. JS-triggered classes
   13. Responsive
   14. Accessibility
  ══════════════════════════════════════════════════════════════
*/


/* ─────────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES
──────────────────────────────────────────────────────────────*/
:root {
  --color-bg:         #fafafa;
  --color-text:       #111;
  --color-mid:        #888;
  --color-light:      #ddd;
  --color-lightest:   #f0f0f0;

  --font-mono:        monospace;

  --text-xs:          0.7rem;
  --text-sm:          0.85rem;
  --text-base:        1rem;
  --text-lg:          1.2rem;
  --text-xl:          2rem;

  --space-2:          0.5rem;
  --space-3:          0.75rem;
  --space-4:          1rem;
  --space-6:          1.5rem;
  --space-8:          2rem;
  --space-10:         2.5rem;
  --space-16:         4rem;

  --header-height:    3rem;
  --body-padding:     40px;

  /* Carousel sizing — the key numbers for image size */
  --slide-height:     72vh;   /* Tall enough to feel editorial */
  --slide-width:      auto;   /* Width follows natural image ratio */
  --slide-gap:        24px;   /* Gap between slides */

  --ease-normal:      0.3s ease;
  --ease-slow:        0.6s ease;
}


/* ─────────────────────────────────────────────────────────────
   2. RESET
──────────────────────────────────────────────────────────────*/
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:       16px;
  scroll-behavior: smooth;
}

img {
  display:   block;
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  font-size:   inherit;
  color:       inherit;
}


/* ─────────────────────────────────────────────────────────────
   3. BASE / TYPOGRAPHY
──────────────────────────────────────────────────────────────*/
body {
  font-family:             var(--font-mono);
  background:              var(--color-bg);
  color:                   var(--color-text);
  font-size:               var(--text-base);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ─────────────────────────────────────────────────────────────
   4. LAYOUT — sticky footer via flexbox
   body is a flex column; main grows to fill space
──────────────────────────────────────────────────────────────*/
.work-page {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

.work-page .site-main {
  flex: 1;
  padding: var(--body-padding);
  /* Matches your script's body padding: 40px */
}


/* ─────────────────────────────────────────────────────────────
   5. HEADER
──────────────────────────────────────────────────────────────*/
.site-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  height:           var(--header-height);
  padding:          0 var(--body-padding);
  border-bottom:    1px solid var(--color-light);
  position:         sticky;
  top:              0;
  z-index:          100;
  background:       var(--color-bg);
}

.site-header__logo {
  font-size:      var(--text-sm);
  letter-spacing: 0.04em;
}

.site-header__logo:hover {
  border-bottom: 1px solid var(--color-text);
}

.site-header__nav {
  display: flex;
  gap:     var(--space-8);
}

.site-header__link {
  font-size: var(--text-sm);
  color:     var(--color-mid);
  transition: color var(--ease-normal);
}

.site-header__link:hover,
.site-header__link.is-active {
  color:         var(--color-text);
  border-bottom: 1px solid var(--color-text);
}


/* ─────────────────────────────────────────────────────────────
   6. WORK INDEX (work.html)
   Matches your script: h1 uppercase + list of links at 1.2rem
──────────────────────────────────────────────────────────────*/
.work-index__title {
  font-size:     var(--text-xl);
  font-weight:   normal;
  margin-bottom: 40px;   /* Your script: h1 { margin-bottom: 40px } */
  letter-spacing: 0.02em;
}

.work-index__list {
  padding: 0;
}

.work-index__item {
  margin: 15px 0;   /* Your script: li { margin: 15px 0 } */
}

.work-index__link {
  display:   inline-flex;
  gap:       var(--space-4);
  align-items: baseline;
  font-size: var(--text-lg);   /* Your script: li { font-size: 1.2rem } */
  transition: none;
}

.work-index__link:hover .work-index__name {
  text-decoration: underline;   /* Your script: a:hover { text-decoration: underline } */
}

.work-index__meta {
  font-size: var(--text-sm);
  color:     var(--color-mid);
}


/* ─────────────────────────────────────────────────────────────
   7. SERIES HEADER (structures / between / projects pages)
──────────────────────────────────────────────────────────────*/
.series-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   var(--space-8);
}

.series-header__left {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-6);
}

.series-header__back {
  font-size: var(--text-sm);
  color:     var(--color-mid);
  transition: color var(--ease-normal);
}

.series-header__back:hover {
  color:         var(--color-text);
  border-bottom: 1px solid var(--color-text);
}

.series-header__title {
  font-size:   var(--text-xl);
  font-weight: normal;
}

.series-header__count {
  font-size: var(--text-sm);
  color:     var(--color-mid);
  /* Updated live by JS as the user swipes */
}


/* ─────────────────────────────────────────────────────────────
   8. CAROUSEL
   ─────────────
   Layout:
     .carousel          → relative container, clips overflow
       .carousel__track → flex row; scroll-snap; draggable
         .carousel__slide → each image + caption
       .carousel__btn   → prev / next arrows, absolute positioned

   Sizing philosophy:
     Images are 72vh tall — big and editorial.
     Width is auto (follows the image's natural ratio).
     The track scrolls horizontally with CSS scroll-snap.
──────────────────────────────────────────────────────────────*/
.carousel {
  position:   relative;
  /* Negative margin to break out of body padding and go edge-to-edge */
  margin-left:  calc(-1 * var(--body-padding));
  margin-right: calc(-1 * var(--body-padding));
}

.carousel__track {
  display:             flex;
  gap:                 var(--slide-gap);
  overflow-x:          scroll;
  scroll-snap-type:    x mandatory;
  /*
    scroll-snap-type: x mandatory
    Each slide snaps to position as you swipe.
    "mandatory" means it always snaps — no stopping between slides.
  */
  scroll-behavior:     smooth;
  -webkit-overflow-scrolling: touch;   /* Smooth momentum on iOS */
  cursor:              grab;

  /* Hide the scrollbar visually — navigation is via buttons/swipe */
  scrollbar-width:     none;           /* Firefox */
  -ms-overflow-style:  none;           /* IE/Edge */

  padding:             0 var(--body-padding);
  /* Restores the 40px padding inside the track */
}

.carousel__track::-webkit-scrollbar {
  display: none;   /* Chrome/Safari */
}

.carousel__track:active {
  cursor: grabbing;
}

/* Each slide */
.carousel__slide {
  flex:            0 0 auto;
  /*
    flex: 0 0 auto
    Don't grow, don't shrink, size = natural content width.
    This means each slide is exactly as wide as its image.
  */
  scroll-snap-align: start;
  /*
    scroll-snap-align: start
    When snapping, the LEFT edge of the slide aligns to the left
    edge of the scroll container. Feels natural for horizontal scrolls.
  */
}

/* Image wrapper — controls height, lets width be natural */
.carousel__image-wrapper {
  height:    var(--slide-height);
  overflow:  hidden;
  background: var(--color-lightest);   /* Placeholder while loading */
}

.carousel__image {
  height:      100%;
  width:       auto;
  /*
    height: 100%; width: auto
    Image fills the fixed height and sets its own width to maintain ratio.
    A landscape photo will be wide; a portrait will be narrow.
    This creates a rhythmic, varied track — intentionally editorial.
  */
  object-fit:  cover;
  display:     block;
  transition:  filter var(--ease-slow);
  filter:      saturate(0.92);
}

.carousel__slide:hover .carousel__image {
  filter: saturate(1);
}

/* Caption below each image */
.carousel__caption {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         var(--space-3) 0 var(--space-2);
  border-top:      1px solid var(--color-light);
  gap:             var(--space-4);
}

.carousel__caption-title {
  font-size:   var(--text-sm);
  color:       var(--color-mid);
  transition:  color var(--ease-normal);
}

.carousel__slide:hover .carousel__caption-title {
  color: var(--color-text);
}

.carousel__caption-year {
  font-size:      var(--text-xs);
  color:          var(--color-light);
  white-space:    nowrap;
}

/* Projects caption — project title is the primary label */
.carousel__caption--project {
  flex-direction: column;
  gap:            var(--space-2);
}

.carousel__caption--project .carousel__caption-title {
  font-size: var(--text-base);
  color:     var(--color-text);
}

.carousel__caption-desc {
  font-size: var(--text-sm);
  color:     var(--color-mid);
}

/* Prev / Next buttons */
.carousel__btn {
  position:        absolute;
  top:             calc(var(--slide-height) / 2);
  transform:       translateY(-50%);
  z-index:         10;
  width:           2.5rem;
  height:          2.5rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-bg);
  border:          1px solid var(--color-light);
  font-size:       var(--text-base);
  transition:      border-color var(--ease-normal),
                   color        var(--ease-normal);
  /* Hidden by default on touch devices — swipe is primary */
}

.carousel__btn:hover {
  border-color: var(--color-text);
}

.carousel__btn--prev { left:  var(--body-padding); }
.carousel__btn--next { right: var(--body-padding); }

/* Hide buttons on narrow screens where swipe is natural */
@media (max-width: 600px) {
  .carousel__btn { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   9. SERIES NAV (bottom of series pages)
   Previous / next series links
──────────────────────────────────────────────────────────────*/
.series-nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      var(--space-10);
  padding-top:     var(--space-6);
  border-top:      1px solid var(--color-light);
}

.series-nav__link {
  font-size:  var(--text-sm);
  color:      var(--color-mid);
  transition: color var(--ease-normal);
}

.series-nav__link:hover {
  color:         var(--color-text);
  border-bottom: 1px solid var(--color-text);
}

.series-nav__placeholder {
  /* Empty span for space-between when only one link exists */
  display: block;
  width:   1px;
}


/* ─────────────────────────────────────────────────────────────
   10. FOOTER
──────────────────────────────────────────────────────────────*/
.site-footer {
  padding:        var(--space-10) var(--body-padding);
  border-top:     1px solid var(--color-light);
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-6);
}

.site-footer__label {
  font-size:   var(--text-xs);
  color:       var(--color-mid);
  margin-bottom: var(--space-2);
}

.site-footer__email {
  font-size:     var(--text-base);
  border-bottom: 1px solid transparent;
  transition:    border-color var(--ease-normal);
}

.site-footer__email:hover {
  border-bottom-color: var(--color-text);
}

.site-footer__copy {
  font-size: var(--text-xs);
  color:     var(--color-mid);
}


/* ─────────────────────────────────────────────────────────────
   11. ANIMATIONS
──────────────────────────────────────────────────────────────*/
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Landing page fade-in (index.html inline styles override theme,
   but if you ever move landing to this stylesheet, it's here) */
.series-page .site-main {
  animation: fadeIn 0.5s ease both;
}


/* ─────────────────────────────────────────────────────────────
   12. JS-TRIGGERED CLASSES
──────────────────────────────────────────────────────────────*/
.is-exiting {
  animation:      fadeOut 0.4s ease both;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   13. RESPONSIVE
──────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  :root {
    --body-padding: 20px;
    --slide-height: 55vw;
    /* On mobile, images are proportional to screen width */
  }

  .series-header {
    flex-direction: column;
    gap:            var(--space-3);
  }

  .work-index__title {
    font-size: var(--text-lg);
  }
}

@media (min-width: 1400px) {
  :root {
    --slide-height: 78vh;
  }
}


/* ─────────────────────────────────────────────────────────────
   14. ACCESSIBILITY
──────────────────────────────────────────────────────────────*/
:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
  .carousel__track {
    scroll-behavior: auto;
  }
}