/* Case study — Warm Precision aesthetic, condensed */
:root {
  --ivory:        rgb(251, 249, 248);
  --paper:        rgb(255, 255, 255);
  --mist:         rgb(246, 243, 242);
  --haze:         rgb(240, 237, 237);

  --blush:        rgb(255, 241, 242);
  --rose-line:    rgb(210, 195, 196);

  --mauve:        rgb(115, 87, 92);
  --mauve-deep:   rgb(79, 68, 69);
  --mauve-ash:    rgb(129, 116, 117);
  --mauve-line:   rgb(220, 217, 217);

  --ink:          rgb(27, 28, 28);
  --ink-warm:     rgb(28, 25, 23);
  --ink-soft:     rgb(120, 113, 108);

  --serif:        "Noto Serif Display", "Noto Serif", Georgia, serif;
  --serif-text:   "Noto Serif", Georgia, serif;
  --sans:         "Inter", -apple-system, system-ui, sans-serif;
  --grotesk:      "Space Grotesk", "Inter", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* override site.css body bg on case pages */
html body { background: var(--ivory) !important; }
a { color: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.prose { max-width: 720px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) {
  .container, .prose { padding: 0 24px; }
}

/* ===== Header / Footer come from site.css ===== */

/* ===== Type primitives ===== */
.eyebrow {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mauve-ash);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--mauve-ash);
}

a.back {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-ash);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 180ms ease;
}
a.back:hover { color: var(--ink); }

/* ===== Case head ===== */
.case-head {
  padding: 36px 0 24px;
  border-bottom: 1px solid var(--mauve-line);
  position: relative;
  overflow: hidden;
}
.case-head::after {
  content: "";
  position: absolute;
  top: -120px; right: -200px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255,241,242,0.55) 0%, rgba(255,241,242,0) 65%);
  pointer-events: none;
}
.case-head .container { position: relative; z-index: 1; }

.case-eyebrow { margin-bottom: 14px; }
.case-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 14px;
  max-width: 22ch;
}
.case-head h1 .it { font-style: italic; color: var(--mauve-deep); }
.summary {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--mauve-deep);
  margin: 0 0 20px;
  max-width: 56ch;
}

/* ── Case facts row ──────────────────────────────────────────────────
   Single-line metadata strip. Most facts are simple value chips
   (e.g. "Harvard Business Review"); some are "Key · Value" pairs
   (e.g. "Stack · Python · Azure OpenAI"). Both render in the same
   horizontal flex row for a consistent thin tag-line look. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  border-top: 1px solid var(--mauve-line);
  padding-top: 14px;
  margin: 0;
  max-width: 920px;
  list-style: none;
}
.facts .fact {
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-warm);
  line-height: 1.5;
  white-space: nowrap;
}
.facts .fact .fact-key {
  color: var(--mauve-ash);
}
.facts .fact .fact-key::after {
  content: " · ";
  color: var(--mauve-ash);
  opacity: 0.7;
  margin: 0 4px;
}
@media (max-width: 720px) {
  .facts { gap: 6px 14px; }
  .facts .fact { white-space: normal; }
}

/* ===== Hero image (tier-1 case studies only — gallery mode skips this) ===== */
.hero-img {
  margin: 0;
  padding: 16px 0 0;
}
.hero-img .container { padding-top: 0; }
.hero-img figure {
  margin: 0;
  background: var(--haze);
  border: 1px solid var(--mauve-line);
}
.hero-img img { display: block; width: 100%; height: auto; }

/* ===== Gallery format (non-tier-1 case pages) =====
   Masonry layout via CSS columns — items keep natural aspect ratio
   (no cropping). Tighter spacing throughout so the hero image and
   the first row of gallery thumbs fit in one viewport.            */
.case-gallery {
  padding: 18px 0 56px;
}
.case-gallery > .container { padding-top: 0; }
.case-gallery-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve-ash);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.case-gallery-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--mauve-ash); }

/* Masonry via CSS columns — natural aspect, tight gutters. */
.case-gallery-grid {
  column-count: 4;
  column-gap: 8px;
}
@media (max-width: 1100px) { .case-gallery-grid { column-count: 3; } }
@media (max-width: 720px)  { .case-gallery-grid { column-count: 2; } }
@media (max-width: 480px)  { .case-gallery-grid { column-count: 1; } }

.case-gallery-item {
  break-inside: avoid;
  display: block;
  margin: 0 0 8px;
  background: var(--paper);
  overflow: hidden;
  border: 1px solid var(--mauve-line);
  border-radius: 2px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.case-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(74, 47, 53, 0.22);
}
.case-gallery-item img,
.case-gallery-item video {
  width: 100%;
  height: auto;
  display: block;
}

/* === Video gallery variant ===
   For projects that are primarily a video collection (Contextual Lane,
   ANN, Videos, etc.). Replaces masonry with a clean 16:9 grid.
   Tiles autoplay muted in place; click → lightbox plays with audio. */
.case-gallery--video .case-gallery-grid {
  /* override the masonry columns with a real grid */
  column-count: unset;
  column-gap: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  .case-gallery--video .case-gallery-grid { grid-template-columns: 1fr; }
}
.case-gallery--video .case-gallery-item {
  aspect-ratio: 16 / 9;
  margin: 0;
  break-inside: auto;
  overflow: hidden;
  position: relative;
}
.case-gallery--video .case-gallery-item video,
.case-gallery--video .case-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Subtle play icon overlay so videos read as clickable on first glance. */
.case-gallery--video .case-gallery-item video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.case-gallery--video .case-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -6px rgba(74, 47, 53, 0.32);
}

/* PDF chip — fixed 3:4 card for documents (no thumbnail to display). */
.case-gallery-item.is-pdf {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px;
  text-decoration: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 18px),
    var(--paper);
  color: var(--ink);
  aspect-ratio: 3 / 4;
  height: auto;
}
.case-gallery-item.is-pdf .pdf-icon {
  font-family: var(--mono); font-size: 10px;
  color: var(--mauve);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.case-gallery-item.is-pdf .pdf-title {
  font-family: var(--serif); font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  margin: 8px 0;
}
.case-gallery-item.is-pdf .pdf-arrow {
  font-family: var(--mono); font-size: 12px;
  color: var(--mauve);
}
.case-gallery-item.is-pdf:hover .pdf-arrow { color: var(--ink); }

/* Locked-PDF state — gate behind the email-request form. Visual
   treatment: padlock badge top-right, dimmed body, copy swap to
   "drop email to unlock". Click anywhere on the chip → modal opens.
   Once the user submits via the modal, JS removes .is-locked from
   every PDF on the page (and persists the unlock in localStorage). */
.case-gallery-item.is-pdf.is-locked {
  cursor: pointer;
  opacity: 0.92;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(45deg, rgba(125,86,92,0.04) 0px, rgba(125,86,92,0.04) 6px, transparent 6px, transparent 12px),
    var(--paper);
}
.case-gallery-item.is-pdf.is-locked::after {
  /* Hand-drawn line-art padlock — matches the wavy SVG style of tag/skill
     outlines elsewhere on the site. No emojis. The slight bezier wobble in
     the shackle and body strokes reads as ink-on-paper, not iconography. */
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background-color: var(--mauve);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M 9.5 14 C 9.2 11.4, 10 9, 14 8.6 C 18 9.1, 18.7 11.6, 18.4 14' /><path d='M 8.4 14.6 C 8 14.5, 8.2 14.3, 8.6 14.3 C 12 14.1, 16 14.1, 19.4 14.3 C 19.8 14.3, 19.95 14.5, 19.9 14.7 C 20.05 18, 19.95 21, 19.75 22.4 C 17 22.7, 11 22.7, 8.3 22.4 C 8.05 21, 7.95 18, 8.4 14.6 Z' /><circle cx='14' cy='17.6' r='0.9' fill='white' stroke='none' /><path d='M 14 18.3 L 14 20' /></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  box-shadow: 0 2px 6px rgba(74, 47, 53, 0.25);
}
.case-gallery-item.is-pdf.is-locked .pdf-arrow::before {
  content: "drop email to unlock — ";
}
.case-gallery-item.is-pdf.is-locked:hover { transform: translateY(-2px); }

/* PDF unlock modal — opens when a locked chip is clicked. Blocks the
   page until email submitted (or dismissed). Submission posts to
   Netlify Forms (`name="pdf-unlock"`) and stores a flag in localStorage
   so subsequent visits keep PDFs unlocked. */
.pdf-unlock-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 12, 0.78);
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  padding: 24px;
}
.pdf-unlock-modal.is-open {
  display: flex;
  opacity: 1;
}
.pdf-unlock-card {
  background: var(--paper);
  border: 1px solid var(--mauve-line);
  border-radius: 4px;
  padding: 32px 28px 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 22px 50px -12px rgba(0,0,0,0.6);
  position: relative;
}
.pdf-unlock-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 8px;
}
.pdf-unlock-card .pdf-unlock-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 14px;
}
.pdf-unlock-card p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mauve-deep);
  margin: 0 0 16px;
}
.pdf-unlock-card .pdf-unlock-close {
  position: absolute;
  top: 14px; right: 16px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--mauve-ash);
  cursor: pointer;
  padding: 4px;
}
.pdf-unlock-card .pdf-unlock-close:hover { color: var(--ink); }
.pdf-unlock-card form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pdf-unlock-card input[type="email"] {
  flex: 1 1 220px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--mauve-line);
  border-radius: 2px;
  padding: 9px 12px;
}
.pdf-unlock-card input[type="email"]:focus {
  outline: none;
  border-color: var(--mauve);
}
.pdf-unlock-card button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--mauve);
  border: none;
  padding: 10px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 200ms ease;
}
.pdf-unlock-card button:hover { background: var(--ink); }
.pdf-unlock-note {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--mauve-ash);
  font-style: italic;
}

/* ===== Lightbox overlay (for click-to-fullview on gallery items) ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 12, 0.94);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
}
.lightbox-overlay.is-open {
  display: flex;
  opacity: 1;
}
.lightbox-stage {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
  max-width: 92vw;
  max-height: 88vh;
  display: block;
  border-radius: 2px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.6);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.92);
  width: 48px; height: 48px;
  border-radius: 999px;
  font-size: 24px; line-height: 0;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,0.20);
  transform: scale(1.06);
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 720px) {
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 22px; }
  .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* ===== Sections ===== */
.case-body { padding: 80px 0 56px; }
.case-body section { margin-bottom: 72px; }
.case-body section:last-child { margin-bottom: 0; }

.case-body section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}
.case-body section h2 .it { font-style: italic; color: var(--mauve-deep); }

.case-body section p {
  font-family: var(--serif-text);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-warm);
  margin: 0 0 20px;
  max-width: 60ch;
}
.case-body section p:last-child { margin-bottom: 0; }

.case-body section ol,
.case-body section ul {
  font-family: var(--serif-text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-warm);
  padding-left: 22px;
  margin: 0;
  max-width: 60ch;
}
.case-body section ol li,
.case-body section ul li { margin-bottom: 10px; }

/* ===== Outcome / results ===== */
.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 720px) {
  .results { grid-template-columns: 1fr; gap: 24px; }
}
.result {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}
.result .num {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1;
  color: var(--mauve);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.result .lbl {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mauve-deep);
}

/* ===== Gallery ===== */
.gallery { padding: 56px 0 96px; border-top: 1px solid var(--mauve-line); }
.gallery h2 {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mauve-ash);
  margin: 0 0 32px;
}
.gallery figure {
  margin: 0 0 48px;
  background: var(--haze);
  border: 1px solid var(--mauve-line);
}
.gallery figure:last-child { margin-bottom: 0; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption {
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mauve-ash);
  padding: 14px 18px;
  border-top: 1px solid var(--mauve-line);
  background: var(--mist);
}

/* ===== Stub note ===== */
.stub-note {
  border: 1px solid var(--rose-line);
  background: var(--blush);
  padding: 24px 28px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--mauve-deep);
  line-height: 1.55;
  max-width: 60ch;
}
.stub-note b { color: var(--ink); font-family: var(--serif-text); font-style: italic; font-weight: 400; }
.stub-note a { color: var(--mauve); border-bottom: 1px solid var(--mauve); text-decoration: none; padding-bottom: 1px; }

/* Email-request form embedded in the stub-note — replaces the
   "email me at hello@..." link with an inline email input + submit
   button. Wired to Netlify Forms for collection. */
.stub-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  flex-wrap: wrap;
}
.stub-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--mauve-line);
  border-radius: 2px;
  padding: 9px 12px;
}
.stub-form input[type="email"]:focus {
  outline: none;
  border-color: var(--mauve);
  background: #fff;
}
.stub-form button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--mauve);
  border: none;
  padding: 10px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 200ms ease;
}
.stub-form button:hover { background: var(--ink); }
.stub-form-note {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--mauve-ash);
  font-style: italic;
}
.stub-form.is-sent { opacity: 0.65; }
.stub-form.is-sent input,
.stub-form.is-sent button { display: none; }

/* ===== Prev / next ===== */
.prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--mauve-line);
  border-bottom: 1px solid var(--mauve-line);
}
.prevnext a {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: color 180ms ease;
}
.prevnext a:last-child { text-align: right; align-items: flex-end; }
.prevnext a:hover { color: var(--mauve); }
.prevnext .dir {
  font-family: var(--grotesk);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve-ash);
}
.prevnext .ttl {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}

/* ===== Footer comes from site.css ===== */