/* PROJECT PAGES (case studies), built by tools/build_work.py. The studio frame stays Girgit Labs
   (Satoshi, the nav, the footer); inside it, each project wears its own colours (--cs-* on body,
   from the project's data file) and the project's own serif for its title and quotes. */

.cs { margin: 0; background: var(--cs-paper); color: var(--cs-ink); font-family: var(--satoshi); }
.cs .paper { display: none; }
.cs-nav { position: sticky; top: 0; z-index: 50; }
.cs-wrap { max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter); }
.cs-serif, .cs-title { font-family: var(--cs-display, 'Playfair Display'), Georgia, serif; font-weight: var(--cs-display-weight, 400); letter-spacing: -0.02em; text-transform: none; }

/* ---------- Header ---------- */
.cs-hero { background: var(--cs-dark); color: var(--cs-light); padding-top: clamp(3rem, 8vw, 6rem); }
.cs-kicker { margin: 0 0 1.4rem; font: 700 0.74rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--cs-light) 60%, transparent); }
.cs-kicker a { color: inherit; text-decoration: none; } .cs-kicker a:hover { color: var(--cs-accent3); }
.cs-title { margin: 0; font-size: clamp(3.4rem, 11vw, 10rem); line-height: 0.92; color: var(--cs-light); }
.cs-outcome { max-width: 30ch; margin: clamp(1.2rem, 3vw, 2rem) 0 0; font: 500 clamp(1.25rem, 2.2vw, 1.9rem)/1.3 var(--satoshi); color: color-mix(in srgb, var(--cs-light) 88%, transparent); }
.cs-meta { display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 5vw, 4rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 1.2rem 0 clamp(2rem, 5vw, 3.5rem); border-top: 1px solid color-mix(in srgb, var(--cs-light) 20%, transparent); }
.cs-meta dt, .cs-brief dt { font: 700 0.7rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-accent3); margin-bottom: 0.5rem; }
.cs-meta dd { margin: 0; font: 600 1rem/1.4 var(--satoshi); }
.cs-hero-img .cs-fig { margin: 0; }
.cs-hero-img figcaption { display: none; }

/* ---------- Sections ---------- */
.cs-sec { padding: clamp(4rem, 10vw, 8rem) 0; }
.cs-sec--dark { background: var(--cs-dark); color: var(--cs-light); }
.cs-sec--tint { background: var(--cs-tint); }
.cs-label { margin: 0 0 1rem; font: 700 0.74rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-accent); }
.cs-sec--dark .cs-label { color: var(--cs-accent3); }
.cs-h2 { margin: 0; max-width: 18ch; font: 900 clamp(2.2rem, 5vw, 4.4rem)/0.95 var(--satoshi); letter-spacing: -0.045em; text-transform: uppercase; }
.cs-h2.cs-serif { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; }
.cs-text { max-width: 44ch; margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 3.5rem) auto; font: 500 clamp(1.05rem, 1.4vw, 1.3rem)/1.55 var(--satoshi); }
.cs-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.cs-lede { margin: clamp(1.4rem, 3vw, 2rem) 0 0; font: 500 clamp(1.25rem, 2vw, 1.75rem)/1.4 var(--satoshi); }
.cs-brief { display: grid; gap: 1.6rem; margin: 0; padding-top: 0.4rem; }
.cs-brief > div { padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--cs-ink) 18%, transparent); }
.cs-brief dt { color: var(--cs-accent); }
.cs-brief dd { margin: 0; font: 500 1.05rem/1.55 var(--satoshi); }

/* ---------- Images: rows of 1, 2 or 3, each opening in the viewer ---------- */
.cs-row { display: grid; gap: clamp(0.8rem, 2vw, 1.5rem); margin-top: clamp(0.8rem, 2vw, 1.5rem); }
.cs-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-fig { margin: 0; }
.cs-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: clamp(0.4rem, 1vw, 0.9rem); }
.cs-hero-img .cs-zoom { border-radius: 0; }
.cs-zoom img { display: block; width: 100%; height: auto; transition: scale 700ms var(--ease); }
.cs-zoom:hover img { scale: 1.025; }
.cs-zoom:focus-visible { outline: 3px solid var(--cs-accent3); outline-offset: 3px; }
.cs-fig figcaption { margin-top: 0.6rem; font: 600 0.82rem/1.3 var(--satoshi); letter-spacing: 0.02em; opacity: 0.7; }

/* ---------- Colour chips (live, from the data file) ---------- */
.cs-palette { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cs-sub { margin: 0 0 1rem; font: 700 0.74rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; }
.cs-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cs-chip { display: grid; gap: 0.25rem; }
.cs-swatch { aspect-ratio: 16 / 9; border-radius: 0.7rem; background: var(--c); margin-bottom: 0.5rem; }
.cs-chip b { font: 800 1.05rem var(--satoshi); }
.cs-chip span:not(.cs-swatch) { font: 500 0.95rem var(--satoshi); opacity: 0.75; }
.cs-chip code { font: 600 0.82rem ui-monospace, monospace; opacity: 0.7; }

/* ---------- Outcome ---------- */
.cs-outcome-sec .cs-h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cs-quote { margin: clamp(3rem, 7vw, 5.5rem) auto 0; max-width: 22ch; text-align: center; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.15; color: var(--cs-accent3); }

/* ---------- Next ---------- */
.cs-next { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--ivory); color: var(--black); }
.cs-next-title { margin: 0; max-width: 14ch; font: 900 clamp(2.6rem, 7vw, 6.6rem)/0.88 var(--satoshi); letter-spacing: -0.055em; text-transform: uppercase; }
.cs-next-title span { display: block; color: var(--olive); }
.cs-next-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; }
.cs-btn { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0.8rem 1.4rem; border: 1.5px solid var(--black); border-radius: 999px; color: var(--black); text-decoration: none; font: 700 0.95rem var(--satoshi); transition: transform 200ms var(--ease); }
.cs-btn--primary { background: var(--black); color: var(--ivory); }
.cs-btn:hover { transform: translateY(-2px); }
.cs-next-note { margin: 1.4rem 0 0; font: 500 0.95rem var(--satoshi); color: #5E5A50; }

/* ---------- Viewer ---------- */
.cs-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(1rem, 4vw, 3rem); border: 0; background: color-mix(in srgb, var(--cs-dark) 94%, transparent); color: var(--cs-light); }
.cs-lightbox::backdrop { background: rgb(0 0 0 / 0.6); }
.cs-lightbox figure { display: grid; place-items: center; gap: 0.8rem; height: 100%; margin: 0; }
.cs-lightbox img { max-width: 100%; max-height: calc(100dvh - 7rem); width: auto; height: auto; border-radius: 0.5rem; }
.cs-lightbox figcaption { font: 600 0.9rem var(--satoshi); opacity: 0.8; }
.cs-lb-btn { position: fixed; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid color-mix(in srgb, var(--cs-light) 50%, transparent); border-radius: 50%; background: rgb(0 0 0 / 0.35); color: inherit; font: 700 1.1rem var(--satoshi); cursor: pointer; }
.cs-lb-btn:hover, .cs-lb-btn:focus-visible { border-color: var(--cs-accent3); color: var(--cs-accent3); }
.cs-lb-prev { left: 1rem; top: 50%; translate: 0 -50%; } .cs-lb-next { right: 1rem; top: 50%; translate: 0 -50%; } .cs-lb-close { right: 1rem; top: 1rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal-cs] { opacity: 0; translate: 0 26px; transition: opacity 700ms var(--ease), translate 900ms var(--ease); }
  .js [data-reveal-cs].in-view { opacity: 1; translate: none; }
}

@media (max-width: 760px) {
  .cs-split, .cs-row--2, .cs-row--3 { grid-template-columns: 1fr; }
  .cs-text { margin-left: 0; }
  .cs-nav .nav-links { display: none; }
}