/* =====================================================================
   Daytime Design Co. — CASE STUDY SPINE
   The shared structure behind every case study page. Do not fork this
   file per project. A project's own stylesheet sets the palette
   variables below and nothing else (plus, rarely, one signature
   flourish that only belongs to that brand).

   HOW TO USE
   1. <link> styles.css, then case-study.css, then <client>.css, then anim.css
   2. In <client>.css, set the --cs-* variables under :root
   3. Put cs-hero--light or cs-hero--dark on the hero section
      · light field  → also add nav--dark to <header class="nav">
      · dark field   → leave the nav as <header class="nav">

   LOCKED ORDER — every case study opens with these five, in this order:
     1. .cs-hero          hero + meta strip
     2. .cs-lude          The Ask
     3. .cs-full          full-bleed image band
     4. .cs-approach      three pillars
     5. .cs-phones        three phone screens
   and closes with these four, in this order:
     .cs-numbers  →  .cs-words  →  .cs-next  →  .cscta

   The middle is free: reorder and repeat .cs-lude / .cs-full / .cs-pair /
   .cs-phones / .cs-web as the story needs.

   Full spec + new-project checklist: 04_Docs/CASE-STUDIES.md
   ===================================================================== */

/* ---------------------------------------------------------------------
   PALETTE CONTRACT — defaults only. Override these in <client>.css.
   --------------------------------------------------------------------- */
:root {
  --cs-hero-field:   var(--c-cream);   /* hero background */
  --cs-hero-strip:   var(--c-cream);   /* meta strip, usually the field a shade deeper */
  --cs-paper:        #fefefc;          /* one paper tone for every editorial section */
  --cs-cream:        var(--c-cream);   /* the outcome band */
  --cs-card:         #fff;             /* outcome number cards */
  --cs-screen:       var(--c-cream);   /* backing behind phone + browser screens */
  --cs-chrome:       #fdfbf6;          /* browser chrome bar */
  --cs-web-field:    var(--c-blue);    /* the web experience band */
  --cs-web-ink:      #20211c;          /* type on the web band */
  --cs-web-shadow:   rgba(38, 44, 84, 0.28);
  --cs-words-field:  var(--c-pink);    /* the quote band */
  --cs-pair-card:    var(--c-cream);   /* backing behind pair photos */

  /* set by the hero variant — don't override directly */
  --cs-hero-ink:     #20211c;
  --cs-deck-opacity: 1;
}

/* ---------- shared bits ---------- */
.cs-mono {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--c-ink);
  display: inline-block;
}
.cs-mono--red { color: var(--c-red); }

/* =====================================================================
   1 · HERO — field, serif title, art, meta strip
   ===================================================================== */
.cs-hero {
  background: var(--cs-hero-field);
  color: var(--cs-hero-ink);
  position: relative; overflow: hidden;
}
/* the two official colour modes */
.cs-hero--light { --cs-hero-ink: #20211c; --cs-deck-opacity: 1; }
.cs-hero--dark  { --cs-hero-ink: var(--cs-paper); --cs-deck-opacity: 0.94; }

/* light field → the nav has to flip to ink (add nav--dark in the markup) */
.nav--dark .logo__word,
.nav--dark .nav__links a,
.nav--dark .nav__burger { color: var(--c-ink); }

.cs-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 44px; align-items: end;
  padding-top: 150px; padding-bottom: 64px; min-height: 88vh;
}
.cs-hero__copy { max-width: 62ch; padding-bottom: 14px; }
.cs-hero__label {
  background: var(--c-acid); color: var(--c-ink);
  padding: 6px 12px; border-radius: 4px;
}
.cs-hero__title {
  font-size: clamp(56px, 6.6vw, 100px); line-height: 0.98;
  letter-spacing: -0.05em; margin: 22px 0 20px;
  color: var(--cs-hero-ink);
  /* set --cs-hero-measure in <client>.css to force a line break, e.g. 11ch */
  max-width: var(--cs-hero-measure, none);
}
.cs-hero__deck {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 52ch;
  color: var(--cs-hero-ink); opacity: var(--cs-deck-opacity);
}
.cs-hero__art { display: flex; justify-content: center; align-self: center; }

/* meta strip — client · year · scope · duration · live */
.cs-hero__meta { background: var(--cs-hero-strip); position: relative; z-index: 2; }
.cs-hero__metagrid {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; align-items: center;
  padding-top: 16px; padding-bottom: 16px;
}
@media (min-width: 1200px) {
  .cs-hero__metagrid { flex-wrap: nowrap; }
  .cs-hero__metaitem { white-space: nowrap; }
}
.cs-hero__metaitem {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: var(--cs-hero-ink);
  display: inline-flex; align-items: center; gap: 10px;
}
/* the DDC metadata habit — an acid marker on every field */
.cs-hero__metaitem::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-acid); flex: 0 0 auto;
}
.cs-hero__live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-acid); color: var(--c-ink);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  transition: transform .18s ease;
}
.cs-hero__live-pill:hover { transform: translateY(-2px); }
.cs-hero__live-pill .arr { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .cs-hero__live-pill .arr { animation: cs-nudge 1.6s ease-in-out infinite; }
  @keyframes cs-nudge {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, -3px); }
  }
}

/* =====================================================================
   2 · EDITORIAL — The Ask, and every interlude after it
   ===================================================================== */
.cs-lude { background: var(--cs-paper); padding: 110px 0; }
.cs-lude__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.cs-lude__h {
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04;
  letter-spacing: -0.05em; margin: 26px 0 0; color: #20211c; max-width: 15ch;
}
.cs-lude__body { max-width: 60ch; padding-top: 6px; }
.cs-lude__body p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: var(--c-ink); }
.cs-lude__body p + p { margin-top: 22px; }
.cs-lude__body strong { font-weight: 700; }
/* optional "see it live" link under an editorial headline */
.cs-live {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--c-red);
  display: inline-block; margin-top: 34px;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: opacity .18s ease;
}
.cs-live:hover { opacity: 0.65; }

/* =====================================================================
   3 · IMAGERY — full-bleed band (1240 × 640 art)
   ===================================================================== */
.cs-full { background: var(--cs-paper); padding: 10px 0; }
.cs-full--flush { padding: 10px 0 100px; }   /* last band before a colour section */
.cs-full__img { width: 100%; border-radius: var(--radius-lg); display: block; }

/* =====================================================================
   4 · THE APPROACH — three pillars with pink tags
   ===================================================================== */
.cs-approach { background: var(--cs-paper); padding: 110px 0; }
.cs-approach__h {
  font-size: clamp(34px, 4vw, 58px); line-height: 1.05;
  letter-spacing: -0.05em; margin: 24px 0 40px; color: #20211c;
}
.cs-approach__rule { height: 1px; background: var(--c-hair); margin-bottom: 44px; }
.cs-approach__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cs-tag {
  display: inline-block; background: var(--c-pink); color: var(--c-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px; margin-bottom: 22px;
}
.cs-approach__col h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 12px; }
.cs-approach__col p { font-size: 15.5px; line-height: 1.65; color: var(--c-ink); max-width: 34ch; }

/* =====================================================================
   5 · PHONES — three screens (276 × 586 art)
   ===================================================================== */
.cs-phones { background: var(--cs-paper); padding: 32px 0 140px; }
.cs-phones__row {
  display: flex; justify-content: center; gap: clamp(24px, 6vw, 90px);
  flex-wrap: wrap;
}
.cs-phone {
  width: min(300px, 80vw); aspect-ratio: 300 / 610;
  background: #101010; border-radius: 44px; padding: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.18);
}
.cs-phone__screen {
  width: 100%; height: 100%; border-radius: 32px; overflow: hidden;
  background: var(--cs-screen); position: relative;
}
.cs-phone__screen img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   IMAGERY PAIR — two cards side by side (610 × 500 art)
   Every pair row is one height, so the grid never goes ragged.
   ===================================================================== */
.cs-pair { background: var(--cs-paper); padding: 10px 0; }
.cs-pair__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-pair__card {
  border-radius: var(--radius-lg); min-height: clamp(320px, 36vw, 540px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; background: var(--cs-pair-card);
}
.cs-pair__photo { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cs-pair__photo--top { object-position: top center; }

/* =====================================================================
   THE WEB EXPERIENCE — the live site, scrollable inside a browser frame
   Captures live at 01_Case Studies/<Client>/02_Website/web/
   <client>-web-desktop.webp (1440w) and …-web-mobile.webp (390w). No mobile capture? The frame removes
   itself and the desktop frame runs full width — see the page script.
   ===================================================================== */
.cs-web { background: var(--cs-web-field); padding: 100px 0; }
.cs-web__head { text-align: center; margin-bottom: 48px; }
.cs-web__head .cs-mono { color: var(--cs-web-ink); letter-spacing: 3px; }
.cs-web__h {
  font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.05em;
  color: var(--cs-web-ink); margin-top: 16px;
}
.cs-web__stage {
  display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr);
  gap: 36px; align-items: start;
}
.cs-web__stage.is-solo { grid-template-columns: minmax(0, 1fr); }
.cs-web__mob { margin-top: 60px; }

.webframe__chrome { background: var(--cs-chrome); border-radius: 14px 14px 0 0; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; }
/* only the 3 plain traffic-light dots — must not catch the .webframe__url pill or its nested .live dot */
.webframe__chrome > span:nth-child(-n+3) { width: 11px; height: 11px; border-radius: 50%; }
.webframe__chrome span:nth-child(1) { background: #f55733; }
.webframe__chrome span:nth-child(2) { background: #f2c94c; }
.webframe__chrome span:nth-child(3) { background: #57d38a; }
.webframe__url { margin-left: 14px; background: #fff; border-radius: 999px; padding: 6px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-3); letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.webframe__url .live { width: 7px; height: 7px; border-radius: 50%; background: #57d38a; }
.webframe__url--pill { flex: 1; height: 18px; }
.webframe__screen {
  position: relative; width: 100%; background: var(--cs-screen);
  border-radius: 0 0 14px 14px; box-shadow: 0 50px 90px var(--cs-web-shadow);
  height: 640px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.webframe__screen img { width: 100%; display: block; }
/* the mobile frame is static — its bottom edge lines up with the desktop frame
   (desktop: 40px chrome + 640px screen = 680px · mobile sits 60px lower) */
.webframe__screen--mobile { height: 580px; overflow: hidden; }
.webframe__screen--mobile img { height: 100%; object-fit: cover; object-position: top center; }

/* =====================================================================
   CLOSER 1 · THE OUTCOME — three numbers on cream
   ===================================================================== */
.cs-numbers { background: var(--cs-cream); padding: 70px 0 120px; text-align: center; }
.cs-numbers__label { display: block; margin-bottom: 70px; }
.cs-numbers__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 1180px; margin: 0 auto;
}
.cs-numbers__card {
  background: var(--cs-card); border-radius: var(--radius-lg);
  padding: 52px 30px 44px;
  box-shadow: 0 24px 50px rgba(60, 50, 20, 0.06);
}
.cs-numbers__big {
  display: block; font-size: clamp(66px, 7vw, 108px); line-height: 1;
  letter-spacing: -0.04em; color: #20211c;
}
.cs-numbers__lbl { display: block; margin-top: 18px; font-size: 15.5px; color: var(--c-ink); max-width: 24ch; margin-left: auto; margin-right: auto; }
.cs-numbers__line { font-size: clamp(20px, 2vw, 27px); color: var(--c-ink); margin-top: 52px; letter-spacing: -0.02em; }

/* =====================================================================
   CLOSER 2 · THE QUOTE — portrait + pull quote on a colour field
   Client testimonial where there is one, otherwise Em on the build.
   ===================================================================== */
.cs-words { background: var(--cs-words-field); padding: 100px 0; }
.cs-words__grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px; align-items: center;
}
.cs-words__photo img {
  width: min(380px, 100%); aspect-ratio: 377 / 442; object-fit: cover;
  border-radius: 6px; margin-left: auto; margin-right: auto;
}
.cs-words__quote {
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.3;
  letter-spacing: -0.04em; color: #20211c;
  margin: 26px 0 60px; max-width: 24ch;
}
.cs-words__name { font-size: 17px; font-weight: 700; }
.cs-words__role { margin-top: 8px; color: var(--c-red); font-size: 10.5px; }

/* =====================================================================
   CLOSER 3 · UP NEXT — resolves at runtime to the next LIVE case study
   Reads work.html, keeps only rows with a real prow__btn href, advances
   with wraparound. Never points at a Coming Soon project. The static
   markup in the page is the fallback when the index can't be fetched.
   ===================================================================== */
.cs-next { background: var(--cs-paper); padding: 110px 0; }
.cs-next__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
.cs-next__info .cs-mono { display: block; margin-bottom: 0; }
.cs-next__info > a { display: block; }
.cs-next__name {
  font-size: clamp(66px, 8vw, 130px); line-height: 1; letter-spacing: -0.05em;
  color: #20211c; margin: 26px 0 0; display: inline-block;
  transition: opacity .18s ease;
}
.cs-next__name:hover { opacity: 0.7; }
.cs-next__desc { font-size: 17px; line-height: 1.6; color: var(--c-ink); max-width: 52ch; margin-top: 26px; }
.cs-next__side {
  display: flex; flex-direction: row; align-items: center;
  justify-content: flex-end; gap: 44px; align-self: center;
}
.cs-next__arrow {
  order: 2; /* the cover sits to the left of the arrow */
  font-family: var(--font-serif); font-size: clamp(44px, 4.6vw, 72px); line-height: 1;
  color: var(--c-blue); transition: transform .2s ease; display: inline-block;
}
.cs-next__arrow:hover { transform: translateX(10px); }
.cs-next__cover {
  width: min(370px, 100%); aspect-ratio: 370 / 199; border-radius: 6px; display: block;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 14px),
    #e6dfd0;
  background-size: cover; background-position: center;
  transform: rotate(-2deg);
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
.cs-next__grid:hover .cs-next__cover { opacity: 1; transform: rotate(-2deg) translateY(-4px); }

/* =====================================================================
   CLOSER 4 · FINAL CTA — pink wavy band (waves come from styles.css)
   ===================================================================== */
.cscta { background: var(--c-pink); padding: 110px 0 130px; text-align: center; position: relative; }
.cscta__label { display: inline-block; background: var(--c-off-white); color: var(--c-ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; padding: 7px 14px; border-radius: 6px; margin-bottom: 26px; }
.cscta__title { font-size: clamp(38px, 5.4vw, 76px); line-height: 1; letter-spacing: -2px; margin: 0 0 20px; }
.cscta__sub { font-size: 18px; color: var(--c-ink); opacity: 0.82; margin: 0 auto 34px; max-width: 46ch; }
.cscta__flower { position: absolute; top: 30px; right: 8%; width: 92px; height: 92px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
  .cs-hero__grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 130px; }
  .cs-hero__art { order: -1; }
  .cs-hero__copy { padding-bottom: 0; }
  .cs-hero__title { max-width: none; }
  .cs-lude__grid, .cs-words__grid, .cs-next__grid { grid-template-columns: 1fr; gap: 34px; }
  .cs-approach__cols { grid-template-columns: 1fr; gap: 34px; }
  .cs-web__stage { grid-template-columns: 1fr; }
  .cs-web__mob { display: none; }
  .cs-next__side { align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}
@media (max-width: 820px) {
  .cs-lude, .cs-approach, .cs-numbers, .cs-words, .cs-web, .cs-next { padding-top: 64px; padding-bottom: 64px; }
  .cs-phones { padding: 24px 0 88px; }
  .cs-phones__row { flex-wrap: nowrap; gap: 10px; }
  .cs-phone { width: calc((100% - 20px) / 3); min-width: 0; border-radius: 16px; padding: 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.16); }
  .cs-phone__screen { border-radius: 13px; }
  .cs-pair__row { grid-template-columns: 1fr; }
  /* wide bands match the stacked card height on mobile */
  .cs-full__img { height: clamp(320px, 36vw, 540px); object-fit: cover; }
  .cs-numbers__cards { grid-template-columns: 1fr; }
  .cscta__flower { width: 64px; height: 64px; right: 6%; top: 18px; }
  /* meta strip — labels stripped, live pill bottom right */
  .cs-hero__grid { padding-bottom: 24px; }
  .cs-hero__metagrid {
    display: grid; grid-template-columns: 1fr auto auto;
    grid-template-areas: "client year dur" "scope live live";
    gap: 20px 18px; align-items: start;
  }
  .cs-hero__metalbl { display: none; }
  .cs-hero__metaitem::before { display: none; }
  .cs-hero__metaitem { display: block; }
  .cs-hero__metagrid > :nth-child(1) { grid-area: client; }
  .cs-hero__metagrid > :nth-child(2) { grid-area: year; text-align: right; }
  .cs-hero__metagrid > :nth-child(3) { grid-area: scope; }
  .cs-hero__metagrid > :nth-child(4) { grid-area: dur; text-align: right; }
  .cs-hero__live-pill { grid-area: live; justify-self: end; align-self: start; }
}