/* Weekday Studio — single-page site
   Layout: fixed captions top and bottom, a full-screen crossfading slider,
   and the logo layered over the centre of each image. */

:root {
  --ink: #000;
  --bg: #d1c6ba;              /* first slide colour; JS updates this per slide */
  --fade: 1500ms;             /* crossfade duration (matches old Webflow slider) */
  --gutter: 30px;
  --image-h: 50vh;
  --logo-w: 65vw;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  transition: background-color var(--fade) ease-in-out;
  color: var(--ink);
  font: 400 18px/22px "Work Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Captions ---------------------------------------------------------------- */
.caption {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 18px;
}
.caption p { margin: 0; }
.caption--top { top: 0; padding-top: var(--gutter); }
.caption--bottom { bottom: 0; padding-bottom: var(--gutter); }

/* Stage: logo and slides share the same centre point ---------------------- */
main {
  position: fixed;
  inset: 0 0 45px 0;          /* nudges centre up slightly, matching the old site */
  display: grid;
  place-items: center;
}

.logo {
  grid-area: 1 / 1;
  z-index: 2;
  margin: 0;
  width: var(--logo-w);
  line-height: 0;
  pointer-events: none;
}
.logo img { width: 100%; height: auto; }

.slider { grid-area: 1 / 1; position: absolute; inset: 0; }

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--fade) ease-in-out;
}
.slide.is-active { opacity: 1; }

.slide img {
  display: block;
  height: var(--image-h);
  width: auto;
  max-width: 90vw;
  object-fit: contain;
}

/* Responsive — breakpoints carried over from the Webflow build ------------- */
@media (max-width: 991px) {
  :root { --image-h: 45vh; --logo-w: 80vw; }
}
@media (max-width: 767px) {
  :root { --image-h: 40vh; --logo-w: 85vw; }
}
@media (max-width: 479px) {
  :root { --logo-w: 92vw; }
  .caption { font-size: 10px; line-height: 13px; padding-left: 16px; padding-right: 16px; }
  .slide img { height: auto; width: 70vw; max-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0ms; }
}