/* ══════════════════════════════════════════════════════════════
   CURTIX STUDIO — SHARED CASE STUDY STYLESHEET
   Used by every /work/<project>/index.html case study page.
   Keep this file project-agnostic — no brand-specific copy,
   colors or image paths belong here. Per-project accent/warmth
   is carried by the imagery and content, not by this stylesheet.
   ══════════════════════════════════════════════════════════════ */

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

/* Color, radius, layout and type-scale tokens live in /css/tokens.css,
   loaded before this file. This stylesheet defines no :root of its
   own. Shared cross-page components (like .eyebrow) live in
   /css/shared.css, loaded between tokens.css and this file. */

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

body {
  background: var(--bg);
  color: var(--text-muted);
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--text);
}

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

a { color: inherit; }

/* Backdrop layers (.backdrop, fixed, z-index 0) live in
   /css/backdrop.css, replacing the grid overlay that used to be a
   body::before here. */

/* :focus-visible outlines are a permitted exception to the
   accent-discipline rule — see CLAUDE.md. Kept at 2px, unchanged. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.cs-container {
  max-width: var(--cs-max);
  margin: 0 auto;
  padding: 0 var(--cs-gutter);
  position: relative;
  z-index: 1;
}

/* ─── TOP BAR ───
   Same floating glass pill as the homepage's #navbar, so both /work/
   pages visually match it: inset 12px each side, 16px from the top,
   always-on frosted glass. .is-scrolled (still driven by
   case-study.js's existing scroll listener, untouched) just tightens
   the padding, same as #navbar's .scrolled. */
.cs-topbar {
  position: fixed;
  top: 16px;
  left: 12px;
  right: 12px;
  z-index: 100;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.cs-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  transition: padding 0.3s ease;
}
.cs-topbar.is-scrolled .cs-topbar-inner { padding: 10px 24px; }
/* Script wordmark, sentence case — matches #navbar's .logo-fallback.
   Sized up from --fs-small since Pacifico at the old size read mushy
   at topbar scale — checked and confirmed by eye. */
.cs-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-script);
  font-size: calc(var(--fs-small) * 2.1);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-decoration: none;
  color: var(--cream);
}
/* Real crown logo (sharpened icon-scale export). A real alpha channel
   (derived from luminance) does the transparency here, not
   mix-blend-mode: screen — .cs-topbar's backdrop-filter creates a new
   stacking context that traps mix-blend-mode's blend source to the
   topbar pill itself instead of the page behind it. */
.cs-wordmark-crown { display: block; width: 18px; height: 15px; flex-shrink: 0; }
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}
.cs-back:hover { color: var(--text); gap: 11px; }

/* ─── HERO ───
   Eyebrow, title and meta sit on the plain backdrop so the glow reads
   behind the headline, same as the homepage. The photo is a contained
   frame below them, not a full-bleed background — same border/radius
   treatment as .cs-frame, sized to roughly the lower two thirds of
   the hero area. */
.cs-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: 170px;
  padding-bottom: 64px;
}
.cs-hero-content {
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
  width: 100%;
}
.cs-hero-media {
  position: relative;
  z-index: 1;
}
.cs-hero-media img {
  width: 100%;
  height: min(60vh, 640px);
  object-fit: cover;
  object-position: center;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cs-hero h1 {
  font-size: var(--fs-h1);
  margin-bottom: 22px;
}
.cs-headline {
  font-weight: 500;
  font-size: var(--fs-h3);
  color: rgba(255,255,255,0.82);
  max-width: 720px;
  line-height: 1.4;
  margin-bottom: 34px;
}
/* Mono attribution line, matching the homepage founder line
   (.about-name/.about-role): plain text separated by middots, not
   bordered pills. */
.cs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cs-meta-tag { padding: 0; border: none; }
.cs-meta-tag:not(:first-child)::before { content: '\00B7'; margin: 0 10px; color: var(--text-dim); }
.cs-meta-tag.is-year { color: var(--cream); }

/* ─── SECTION SCAFFOLDING ───
   .shell (shared.css) supplies the vertical rhythm and the width/
   gutter — every .cs-section in the markup now also carries .shell
   rather than duplicating those values here. This rule only adds
   what .shell doesn't: the stacking context above the backdrop, and
   the hairline border between stacked sections. */
.cs-section {
  position: relative;
  z-index: 1;
}
.cs-section + .cs-section { border-top: 1px solid var(--border); }
/* Eyebrow above the heading, not beside it — reuses the section's
   own existing "NN / 09" progress index as the eyebrow text rather
   than inventing per-section labels. Heading down to --fs-h3 (was
   --fs-h2), matching the eyebrow+smaller-heading pattern the
   homepage's Services list already established. */
.cs-section-head { margin-bottom: 32px; }
.cs-section-head .eyebrow { margin-bottom: 14px; }
.cs-section-head h2 {
  font-size: var(--fs-h3);
  max-width: 680px;
}
.cs-lede {
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 620px;
  line-height: 1.75;
  margin-bottom: 56px;
}
.cs-lede + .cs-lede { margin-top: 16px; }
/* Single left-aligned column at a 48ch measure, not a two-column
   grid — the paired image (kept, per CLAUDE.md) now sits stacked
   below the copy instead of beside it, at a supporting-image width
   rather than spanning the full measure. */
.cs-copy-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.cs-copy-row .cs-lede { max-width: 48ch; color: var(--text-muted); }
.cs-copy-row .cs-media { width: 100%; max-width: 720px; }

/* reveal-on-scroll — fade plus a 12px rise (was 24px), simplified.
   IntersectionObserver logic in case-study.js is unchanged; disabled
   under prefers-reduced-motion via the transition-duration override
   at the top of this file. */
.cs-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
.cs-reveal.is-visible { opacity: 1; transform: translateY(0); }
.cs-reveal-delay-1 { transition-delay: 0.08s; }
.cs-reveal-delay-2 { transition-delay: 0.16s; }
.cs-reveal-delay-3 { transition-delay: 0.24s; }

/* ─── MEDIA / FRAME ───
   Contained within --cs-max via the .shell/.cs-container ancestor,
   radius no larger than --radius-sm (was --radius), no filled
   background — the image itself is the fill. */
.cs-frame {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.cs-frame img { width: 100%; height: 100%; object-fit: cover; }
.cs-caption {
  margin-top: 14px;
  font-size: var(--fs-label);
  letter-spacing: 0.03em;
  color: var(--text-dim);
}

/* ─── VIDEO FRAMES — same chrome as a photo .cs-frame (border, radius,
   overflow, surface fill), just holding a <video> instead of an <img>.
   Lazy-loaded and reduced-motion-aware via case-study.js. ─── */
.cs-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-frame-mobile-video { aspect-ratio: 750 / 1546; }
.cs-mobile-video-row { max-width: 320px; margin: 0 auto; text-align: center; }

/* ─── TRIPTYCH (Starting Point) ─── */
.cs-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 44px;
}
.cs-triptych .cs-frame { aspect-ratio: 4/3; }

.ratio-4-5 { aspect-ratio: 4/5; }
.ratio-16-9 { aspect-ratio: 16/9; }

/* ─── CREATIVE DIRECTION (Villa Mares brand presentation) ───
   One asymmetric editorial composition: a tall hero image on the left,
   the logo on its own soft field plus two smaller detail images stacked
   on the right, sized so the right column settles at the same height as
   the hero, then the palette strip and a restrained keyword line below. */
.cs-direction-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Keeps the section 4 desktop scroll recording sized as a supporting
   clip rather than a second full-width hero banner underneath the
   experience-cards image. */
.cs-video-constrained {
  align-self: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.cs-direction-composition {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto;
  grid-template-areas: "hero logo" "hero pair";
  gap: 20px;
}
.cs-direction-hero { grid-area: hero; }
.cs-direction-logo { grid-area: logo; aspect-ratio: 4/3; }
.cs-direction-pair {
  grid-area: pair;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cs-direction-pair .cs-frame { aspect-ratio: 4/5; }

/* every frame in the composition, photos and the logo field alike, gets
   a slow, tasteful zoom on hover, restrained enough not to feel gimmicky */
.cs-direction-composition .cs-frame img {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-direction-composition .cs-frame:hover img { transform: scale(1.035); }

.cs-direction-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cs-word-chip { padding: 0 14px; border-left: 1px solid var(--border); }
.cs-word-chip:first-child { padding-left: 0; border-left: none; }

/* ─── PALETTE STRIP ───
   A single continuous ribbon rather than separate UI cards: five flush
   segments that gently gain width on hover, with the hex code fading in
   beneath the name. */
.cs-palette {
  display: flex;
  gap: 2px;
  height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cs-swatch {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 3px;
  padding: 14px;
  transition: flex-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-swatch:hover { flex-grow: 1.6; }
/* mix-blend-mode:difference reads against each swatch's own (arbitrary,
   per-project) background color, so these keep var(--text) rather than
   the label treatment — the blend mode is doing the contrast work. */
.cs-swatch-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  color: var(--text);
}
.cs-swatch-hex {
  font-size: var(--fs-label);
  letter-spacing: 0.03em;
  mix-blend-mode: difference;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cs-swatch:hover .cs-swatch-hex { opacity: 0.75; transform: translateY(0); }

/* ─── CONTENT SYSTEM — scroll-card stack ───
   Seven 4:5 cards of equal width, pinned via position:sticky at a
   slightly increasing top offset and z-index, so each new card slides
   up and settles just below the last, leaving a peek of the stack
   behind it. Height comes from the cards' own aspect ratio, so no
   spacer elements are needed for the pin duration. */
.cs-system-track {
  max-width: 620px;
  margin: 0 auto;
}
.cs-system-card {
  position: sticky;
  aspect-ratio: 4/5;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.55);
}
.cs-system-card:nth-child(1) { top: 80px; z-index: 1; }
.cs-system-card:nth-child(2) { top: 100px; z-index: 2; }
.cs-system-card:nth-child(3) { top: 120px; z-index: 3; }
.cs-system-card:nth-child(4) { top: 140px; z-index: 4; }
.cs-system-card:nth-child(5) { top: 160px; z-index: 5; }
.cs-system-card:nth-child(6) { top: 180px; z-index: 6; }
.cs-system-card:nth-child(7) { top: 200px; z-index: 7; }
.cs-system-card img {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-system-card:hover img { transform: scale(1.035); }

/* ─── BEFORE / AFTER (Social Transformation) ─── */
.cs-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
}
.cs-compare-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
}
.cs-compare-divider .line { width: 1px; height: 64px; background: var(--border); }
.cs-compare-divider .arrow { font-size: var(--fs-body); color: var(--text-dim); }
.cs-compare-col .cs-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.cs-compare-col .cs-frame { aspect-ratio: 16/10; }

/* ─── LIFESTYLE ROW ─── */
.cs-lifestyle-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cs-lifestyle-row .cs-frame { aspect-ratio: 4/5; }

/* ─── APPLICATIONS GRID ─── */
.cs-apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cs-app-card .cs-frame { aspect-ratio: 4/5; margin-bottom: 14px; }
.cs-app-card .cs-app-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}
.cs-app-card .cs-app-sub {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── RESULT ─── */
.cs-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cs-outcome {
  padding: 40px 36px;
  border-right: 1px solid var(--border);
}
.cs-outcome:last-child { border-right: none; }
.cs-outcome h3 {
  font-size: var(--fs-body);
  margin-bottom: 12px;
}
.cs-outcome p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ─── CLOSING ─── */
.cs-closing {
  position: relative;
  padding: 0;
  border-top: 1px solid var(--border);
}
.cs-closing-media { position: relative; }
.cs-closing-media img { width: 100%; height: clamp(360px, 62vh, 720px); object-fit: cover; }
.cs-closing-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,8,11,0) 55%, rgba(6,8,11,0.9) 100%);
}
.cs-closing-bar {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding-top: 44px;
  padding-bottom: 64px;
}
.cs-closing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.cs-next-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.cs-next-value {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-dim);
}
/* .cs-btn-back removed — the closing "back to work" link is now a
   real .btn-pill (shared.css), matching every other primary button
   on the site instead of its own one-off pill style. */

.cs-endnote {
  padding-top: 28px;
  padding-bottom: 56px;
  font-size: var(--fs-label);
  color: var(--text-dim);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .cs-copy-row { grid-template-columns: 1fr; gap: 32px; }
  .cs-triptych { grid-template-columns: 1fr; }
  .cs-direction-composition { gap: 16px; }
  .cs-direction-pair { gap: 16px; }
  .cs-system-track { max-width: 440px; }
  .cs-system-card:nth-child(1) { top: 64px; }
  .cs-system-card:nth-child(2) { top: 76px; }
  .cs-system-card:nth-child(3) { top: 88px; }
  .cs-system-card:nth-child(4) { top: 100px; }
  .cs-system-card:nth-child(5) { top: 112px; }
  .cs-system-card:nth-child(6) { top: 124px; }
  .cs-system-card:nth-child(7) { top: 136px; }
  .cs-compare { grid-template-columns: 1fr; }
  .cs-compare-divider { flex-direction: row; }
  .cs-compare-divider .line { width: 64px; height: 1px; }
  .cs-lifestyle-row { grid-template-columns: 1fr; }
  .cs-apps-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-outcomes { grid-template-columns: 1fr; }
  .cs-outcome { border-right: none; border-bottom: 1px solid var(--border); }
  .cs-outcome:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  .cs-container { padding: 0 20px; }
  .cs-hero { min-height: 78vh; padding-top: 130px; }
  .cs-hero-media img { height: min(46vh, 420px); }
  .cs-apps-grid { grid-template-columns: 1fr; }
  .cs-direction-grid { gap: 24px; }
  .cs-direction-composition {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "logo" "pair";
    gap: 16px;
  }
  .cs-direction-hero { aspect-ratio: 4/5; }
  .cs-direction-logo { aspect-ratio: 2/1; }
  .cs-palette { height: 108px; }
  .cs-swatch { padding: 8px; min-width: 0; }
  .cs-swatch-name { font-size: var(--fs-label); letter-spacing: 0.01em; line-height: 1.15; overflow-wrap: break-word; word-break: break-word; }
  .cs-system-track { max-width: 100%; }
  .cs-system-card {
    position: static;
    box-shadow: none;
    margin-bottom: 16px;
  }
  .cs-system-card:last-child { margin-bottom: 0; }
  .cs-closing-row { flex-direction: column; align-items: flex-start; }
}