/* =============================================================
   Home — Hero + 7-project reel + Contact
   Each project is a full-viewport scroll-snap slide that owns
   its own brand color.
   ============================================================= */

/* ---------- Reel container with scroll-snap ---------- */
.reel {
  scroll-snap-type: y mandatory;
  height: 100vh;
  height: 100svh;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Safe band at the top and bottom of every reel slide.
   ~10% of the viewport, but never smaller than the fixed top chrome
   (28px padding + 28px mark + 28px padding = 84px), so slide content
   can never sit behind the nav on short windows. */
:root { --slide-band: max(10vh, 88px); }

/* ---------- HERO (warm cream / light theme) ---------- */
.hero {
  background: var(--paper);
  color: var(--ink);
  padding: var(--slide-band) var(--pad-x);
}
.hero-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(44px, 9.5vw, 168px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 19ch;
  text-wrap: pretty;
}
.hero-headline em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--c-lief-ssg), var(--c-berry), var(--c-lief-web));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Hero intro (visible by default) */
.hero-intro {
  max-width: 520px;
}
.hero-intro p {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(28, 28, 26, 0.7);
  max-width: 42ch;
  text-wrap: pretty;
}
.hero-intro em {
  font-style: italic;
  color: var(--ink);
}

/* ---------- PROJECT SLIDE ---------- */
.project {
  padding: var(--slide-band) var(--pad-x);
  background: var(--slide-bg, var(--ink));
  color: var(--paper);
  transition: background 0.6s ease;
}
.project-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.project-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 2;
}

.project-title {
  font-family: var(--serif);
  font-weight: 400;
  /* Sized against the shorter viewport dimension too, so a long title
     (e.g. "Steve-O's Hot Sauce.") can't outgrow the slide's safe band. */
  font-size: clamp(44px, min(8.5vw, 12vh), 124px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--paper);
}
.project-title em { font-style: italic; }

.project-desc {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--paper-soft);
  max-width: 40ch;
}

/* ---------- Slide text contrast ----------
   Measured against WCAG AA (4.5:1 for .project-desc at 15px). With paper text the
   pale hues failed badly: sage 1.76:1, tan 1.85:1, burnt orange 2.39:1. The hues are
   the projects' own colors and stay untouched; the text flips instead.
   Ink on the three palest slides, full-strength paper on the three that only failed
   because of the 62% soften. Lief Labs brand already passed at 4.56:1. */
#p-qumba .project-title, #p-raws .project-title, #p-ssg .project-title,
#p-qumba .cta-link,      #p-raws .cta-link,      #p-ssg .cta-link { color: var(--ink); }
/* Sage and tan hold a softened ink (5.6:1 and up); burnt orange is dark enough that
   only full ink clears the bar (4.54:1), so it keeps its hierarchy through size. */
#p-qumba .project-desc, #p-raws .project-desc { color: rgba(15, 15, 14, 0.86); }
#p-ssg .project-desc { color: var(--ink); }
/* Dark enough for paper, once it is not diluted: 4.75, 4.55 and 7.98:1. */
#p-steveo .project-desc, #p-lief-web .project-desc, #p-s3 .project-desc { color: var(--paper); }
/* The reel dots sit over whichever slide is active, so the pale ones invert too. */
#p-qumba .reel-nav-dot, #p-raws .reel-nav-dot, #p-ssg .reel-nav-dot { border-color: var(--ink); }

/* Right side: tilted photo card.
   Sits at 88% of its column and centres inside it, so the card pulls
   inward from the window edge instead of running to the padding. */
.project-right {
  position: relative;
  width: 88%;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - 2 * var(--slide-band));
  max-height: calc(100svh - 2 * var(--slide-band));
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.45),
    0 16px 40px -16px rgba(0,0,0,0.3);
  transform: rotate(-2.5deg) translateY(0);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.slide.is-active .project-image { transform: rotate(-2.5deg) translateY(-8px); }
/* Hover affordance: image dips down + shadow softens to signal it's clickable */
.slide .project-image:hover,
.slide.is-active .project-image:hover {
  transform: rotate(-2.5deg) translateY(10px);
  box-shadow:
    0 18px 44px -24px rgba(0,0,0,0.32),
    0 8px 20px -18px rgba(0,0,0,0.2);
}
/* SSG card: transparent booth render sits on a light studio backdrop (matches the case-study hero) */
#p-ssg .project-image {
  object-fit: contain;
  padding: clamp(16px, 2.4vw, 34px);
  background: radial-gradient(125% 105% at 50% 38%, #F3EFE9 0%, #E6E1D8 100%);
}

/* ---------- Right-rail pagination ---------- */
.reel-nav {
  position: fixed;
  right: clamp(20px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  pointer-events: auto;
  mix-blend-mode: difference;
}
.reel-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
}
.reel-nav-item .reel-nav-label {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}
/* Labels stay hidden on the active dot — they only appear on hover
   (or keyboard focus), so the project name never sits over the artwork. */
.reel-nav-item:hover .reel-nav-label,
.reel-nav-item:focus-visible .reel-nav-label {
  opacity: 1;
  transform: none;
}
.reel-nav-item .reel-nav-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 1px solid var(--paper);
  background: transparent;
  transition: background 0.3s ease, transform 0.3s ease;
}
.reel-nav-item.active .reel-nav-dot {
  background: var(--paper);
  transform: scale(1.2);
}

/* ---------- CONTACT slide (warm cream / light theme) ---------- */
.contact {
  background: var(--paper);
  color: var(--ink);
  padding: var(--slide-band) var(--pad-x);
}
.contact-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.contact .eyebrow {
  color: rgba(28, 28, 26, 0.6);
}
.contact-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: pretty;
}
.contact-headline em {
  font-style: italic;
  background: linear-gradient(100deg, var(--c-lief-ssg), var(--c-berry), var(--c-lief-web));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-sub {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(28, 28, 26, 0.68);
  max-width: 52ch;
  text-wrap: pretty;
}
.contact-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid rgba(28, 28, 26, 0.16);
  padding-top: 32px;
  margin-top: 32px;
}
.contact-channel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.contact-channel .label {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(28, 28, 26, 0.55);
  font-weight: 500;
}
.contact-channel:hover {
  opacity: 0.65;
  transform: translateX(4px);
}

.contact-footer {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 28, 26, 0.55);
}

/* ---------- IMAGE-EXPAND CASE-STUDY TRANSITION ---------- */
.flood {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad-x);
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.flood.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}
/* The project image scales up to fill the viewport */
.flood-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.flood.active .flood-img { transform: scale(1); }
/* Brand-color tint + dark gradient keep the title legible on any image */
.flood-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 15, 14, 0.3), rgba(15, 15, 14, 0.55)),
    var(--flood-bg, var(--ink));
  background-blend-mode: multiply, normal;
  opacity: 0.78;
}
.flood-title {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(64px, 11vw, 168px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--paper);
  text-align: center;
  max-width: 21ch;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.22s,
    transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.22s;
}
.flood.active .flood-title {
  opacity: 1;
  transform: none;
}

/* ---------- RESPONSIVE ---------- */
/* Short windows: pull the hero headline in only when the window is genuinely
   short. The 19vh guard leaves the headline at full display size on every
   normal laptop (1440x900, 1512x982) and only shrinks it below ~840px tall. */
@media (max-height: 1000px) {
  .hero-headline { font-size: clamp(44px, min(9.5vw, 19vh), 168px); }
}

@media (max-width: 960px) {
  .project-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  /* Stacked: the card uses the full column again. */
  .project-right { width: 100%; aspect-ratio: 16 / 12; }
  .hero-meta { flex-direction: column; align-items: flex-start; }
  .reel-nav { display: none; }
  .contact-channels { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* The footer leaves absolute positioning here, so it becomes a flex sibling of
     .contact-inner. .slide is a centered flex ROW, which laid the footer alongside
     the content and on top of the channels. Stack this one slide instead, and let
     it grow past 100vh rather than clipping. */
  .contact { flex-direction: column; align-items: stretch; justify-content: center;
             height: auto; min-height: 100vh; min-height: 100svh; }
  .contact-footer { position: static; flex-direction: column; gap: 8px; padding: 24px 0; }
  .flood-title { font-size: clamp(56px, 13vw, 120px); }
}

/* Short-window escape hatch for the stacked reel slide.
   Stacked, a project slide needs ~700px of height (title + desc + CTA + a 4:3 card
   inside an 88px safe band top and bottom). On a window that is short but wide
   enough for two columns (tablet landscape, a half-height desktop window) the card
   ran past the slide and `overflow:hidden` clipped it, and the title slid under the
   fixed chrome. Go back to the side-by-side grid there instead of shrinking the card:
   the height is the scarce axis, not the width. Phones never match (min-width 600). */
@media (min-width: 600px) and (max-width: 960px) and (max-height: 800px) {
  .project-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
  }
  .project-right { width: 100%; aspect-ratio: 4 / 3; }
}

/* The "Currently" line sits under the hero intro, inside the same 520px column,
   rather than as a second .hero-meta child: space-between would fling it at the
   right rail on wide screens, straight into the reel nav. */
.hero-intro .sw-now { margin-top: 20px; }