/* Case study pages (work/*.html). Loaded after styles.css (tokens, nav, buttons, display font, footer).

   THE SYSTEM — kept deliberately small:
   • One reading column (--col), centred. All text lives in it. Images may run wider (--wide).
   • Four text sizes with clear steps:  h2 (display face) · lead/quote · body (h3 = body, bold) · small.
   • One way to highlight a line: .cs-quote (a violet rule on the left). Bold is only for numbers.
   • Spacing from one scale: 12 / 24 / 48 / section.
   • One dark panel per page, for the outcome. */

.case {
  background: #fff;
  --col: 720px;
  --wide: 960px;
  --gutter: 6vw;
  /* four sizes, clear steps: small 14 · body 18.5 · lead 26 · h2 44 (desktop) */
  --t-h2: clamp(28px, 20px + 1.7vw, 44px);
  --t-lead: clamp(20px, 16.5px + .65vw, 26px);
  --t-body: clamp(16.5px, 15.4px + .22vw, 18.5px);
  --t-small: 14px;
  --t-h3: var(--t-body);      /* sub-headings: body size, set apart by weight and space */
  --t-fig: var(--t-h2);       /* figures: heading size, in the light body face */
  --s1: 12px; --s2: 24px; --s3: 48px;
  --s-sec: clamp(80px, 12vh, 136px);
  --text: #3d3b45;
  --muted: #6f6f78;
  --line: #e7e5ed;
}

/* ---------- back: a pill in the nav's style, fixed top-left on the page's content edge ---------- */
.case-back {
  position: fixed; top: 18px; left: 6vw; z-index: 100;
  display: inline-flex; align-items: center; gap: 8px; height: var(--nav-h); padding: 0 22px 0 18px;
  background: #fff; color: var(--ink); border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(10,10,20,.08), 0 8px 28px rgba(10,10,20,.10);
  transition: background .2s;
}
.case-back svg { width: 18px; height: 18px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.case-back:hover { background: #f6f6f8; }
.case-back:hover svg { transform: translateX(-3px); }
.case-back:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 3px; }
.nav-item[aria-current="page"] { background: #f6f6f8; }

/* ---------- hero: the site's violet slide, title bottom-left, the project shot on the right ---------- */
.case-hero { padding: 14px; min-height: 100vh; min-height: 100svh; display: grid; }
.case-frame {
  position: relative; overflow: hidden; border-radius: var(--r-slide); color: #fff;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 90px); align-items: center;
  padding: clamp(96px, 14vh, 130px) 4.5% clamp(40px, 7vh, 72px);
  background:
    radial-gradient(60% 45% at 30% 112%, rgba(255,184,224,.6) 0%, transparent 58%),
    radial-gradient(90% 80% at 62% 40%, #6d3ce8 0%, #3d1c96 45%, #1c0b3e 100%);
}
.case-copy { align-self: end; }
.case-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  font-size: clamp(2.8rem, 1.2rem + 5vw, 6.4rem); line-height: 1;
}
.case-line { margin-top: 20px; max-width: 30rem; font-size: var(--t-lead); line-height: 1.35; font-weight: 300; color: rgba(255,255,255,.88); }
/* "View website": a small outlined pill under the hero line; fills white on hover */
.case-visit {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  height: 42px; padding: 0 18px 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4);
  transition: background .25s, color .25s, border-color .25s;
}
.case-visit svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.case-visit:hover, .case-visit:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }
.case-visit:hover svg { transform: translate(2px, -2px); }
.case-visit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* the cover keeps its own shape (square phone shot, 4:3 laptop shots) and never crops */
.case-cover {
  justify-self: end; width: 100%;
  aspect-ratio: var(--ar, 4 / 3); max-width: calc(68vh * var(--ar, 1.3333));
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 40px 100px rgba(10,4,30,.45);
}
.case-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the reading column: every section is a flat list of blocks, centred on one column ---------- */
.cs-section, .cs-meta-wrap { padding: var(--s-sec) var(--gutter) 0; }
.cs-section > *, .cs-panel > *, .cs-meta-wrap > * { max-width: var(--col); margin-inline: auto; }
.cs-section > .cs-shot, .cs-panel > .cs-shot { max-width: var(--wide); }

/* vertical rhythm: body blocks 24 apart; headings, quotes, figures, images get 48 of air */
.cs-section > * + *, .cs-panel > * + * { margin-top: var(--s2); }
.cs-section > .cs-h3, .cs-panel > .cs-h3,
.cs-section > :is(.cs-quote, .cs-figures, .cs-card, .cs-shot, .cs-label),
.cs-panel > :is(.cs-quote, .cs-figures, .cs-card, .cs-shot, .cs-label),
.cs-section > :is(.cs-quote, .cs-figures, .cs-card, .cs-shot) + *,
.cs-panel > :is(.cs-quote, .cs-figures, .cs-card, .cs-shot) + * { margin-top: var(--s3); }
.cs-section > .cs-h2 + *, .cs-panel > .cs-h2 + * { margin-top: var(--s2); }
.cs-section > .cs-h3 + *, .cs-panel > .cs-h3 + *, .cs-section > .cs-label + *, .cs-panel > .cs-label + * { margin-top: var(--s1); }

/* ---------- type ---------- */
.cs-h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  font-size: var(--t-h2); line-height: 1.1; color: var(--ink);
}
.cs-h3 { font-size: var(--t-h3); line-height: 1.35; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.cs-num { font-weight: 500; color: var(--muted); margin-right: .55em; font-variant-numeric: tabular-nums; }
.cs-section p, .cs-panel p, .cs-list li { font-size: var(--t-body); line-height: 1.7; color: var(--text); }
.cs-section strong, .cs-panel strong { font-weight: 600; color: var(--ink); }
.cs-label, .cs-section .cs-label, .cs-panel .cs-label { font-size: var(--t-small); line-height: 1.5; font-weight: 500; color: var(--muted); }

/* the one highlight: a key line, set larger, with a violet rule */
.cs-quote { border-left: 2px solid var(--p-vio); padding-left: clamp(18px, 2vw, 26px); }
.cs-section .cs-quote p, .cs-panel .cs-quote p { font-size: var(--t-lead); line-height: 1.4; font-weight: 300; color: var(--ink); }

/* a plain list: small dot, same text as body */
.cs-list { list-style: none; display: grid; gap: var(--s1); }
.cs-list li { position: relative; padding-left: 22px; }
.cs-list li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--p-lav); }

/* ---------- overview: the quick facts, one hairline, 2 x 2 ---------- */
.cs-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.cs-meta dt { font-size: var(--t-small); font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.cs-meta dd { font-size: var(--t-body); line-height: 1.5; color: var(--ink); }

/* ---------- figures: number + short label, one hairline ---------- */
.cs-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2) var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.cs-figures .cs-fig-v { font-size: var(--t-fig); line-height: 1.05; font-weight: 300; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cs-figures .cs-fig-k { margin-top: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }

/* ---------- a product artefact quoted in the story (e.g. a Kynectia signal): flat lavender card ---------- */
.cs-card { border-radius: var(--r-card); background: #f3eefe; padding: clamp(22px, 3vw, 34px); }
.cs-card .cs-label { color: #625b76; }
.cs-card blockquote { margin-top: var(--s1); font-size: var(--t-lead); line-height: 1.4; font-weight: 300; color: var(--ink); }

/* ---------- images (wider than the text); lavender placeholder until the real shot is dropped in ---------- */
.cs-shot { margin-inline: auto; }
.cs-shot-frame {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  aspect-ratio: var(--ar, 16 / 10); background: #f3eefe; display: grid; place-items: center;
}
/* an empty slot reads as a slot: lighter fill, dashed edge; a real <img> covers all of it */
.cs-shot-frame:has(.cs-ph) { background: #f8f6fe; outline: 1px dashed rgba(76,39,184,.22); outline-offset: -1px; }
.cs-shot-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-ph { padding: 0 24px; text-align: center; font-size: var(--t-small); line-height: 1.5; color: #625b76; }
/* tall or portrait boards sit on the text column instead of the wider image width */
.cs-section > .cs-shot--col, .cs-panel > .cs-shot--col { max-width: var(--col); }
/* an image that opens full size */
.cs-shot-link { display: block; border-radius: var(--r-card); cursor: zoom-in; }
.cs-shot-link:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 4px; }
/* video fills its frame like an image */
.cs-shot-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* two related images side by side */
.cs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cs-shot.cs-pair figcaption { margin-left: 0; margin-right: 0; }
.cs-shot figcaption { max-width: var(--col); margin: var(--s1) auto 0; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }

/* ---------- the outcome panel: black, inset like the hero, same column inside ---------- */
.cs-band { padding: var(--s-sec) 14px 0; }
.cs-panel {
  border-radius: var(--r-slide); padding: clamp(64px, 11vh, 120px) calc(var(--gutter) - 14px);
  background: radial-gradient(50% 60% at 8% 0%, rgba(123,69,245,.3) 0%, transparent 70%), #050505;
  --text: rgba(255,255,255,.78); --muted: rgba(255,255,255,.6); --line: rgba(255,255,255,.18);
}
.cs-panel .cs-h2, .cs-panel .cs-h3, .cs-panel strong, .cs-panel .cs-quote p, .cs-panel .cs-figures .cs-fig-v { color: #fff; }

/* ---------- next project: one big link row ---------- */
.case-next { padding: var(--s-sec) var(--gutter); }
.next-link {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(20px, 4vw, 64px); padding-top: var(--s2); border-top: 1px solid var(--line);
}
.next-k { font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.next-title { margin-top: 8px; font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; font-size: var(--t-h2); line-height: 1.1; color: var(--ink); }
.next-line { margin-top: 8px; font-size: var(--t-body); color: var(--muted); }
.next-media { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); }
.next-thumb { width: clamp(140px, 20vw, 280px); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.next-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.next-go {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #dcd9e4; color: var(--ink); transition: background .25s, color .25s, border-color .25s;
}
.next-go svg { width: 20px; height: 20px; }
.next-link:hover .next-go, .next-link:focus-visible .next-go { background: var(--ink); border-color: var(--ink); color: #fff; }
.next-link:hover .next-thumb img { transform: scale(1.05); }
.next-link:focus-visible { outline: 2px solid var(--p-vio); outline-offset: 6px; border-radius: 10px; }

/* ---------- legal pages (privacy/): the same reading column and type, a plain header instead of the violet
   hero, and quieter section headings, since a policy is read and scanned rather than told as a story ---------- */
.legal { --t-h2: clamp(24px, 18px + 1.1vw, 34px); --s-sec: clamp(56px, 8vh, 88px); }
.legal-head { padding: clamp(150px, 24vh, 220px) var(--gutter) 0; }
.legal-head > * { max-width: var(--col); margin-inline: auto; }
.legal-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); line-height: 1; color: var(--ink);
}
.legal-date { margin-top: var(--s2); font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.legal-intro {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--t-lead); line-height: 1.45; font-weight: 300; color: var(--ink);
}
.legal-last { padding-bottom: var(--s-sec); }
/* links inside the text read as links: ink, with a soft violet underline */
.legal main a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(123,69,245,.45); transition: color .2s, text-decoration-color .2s;
}
.legal main a:hover, .legal main a:focus-visible { color: var(--p-vio); text-decoration-color: currentColor; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .case-frame { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 36px; padding-top: 110px; }
  .case-cover { justify-self: start; max-width: min(100%, calc(46vh * var(--ar, 1.3333))); order: -1; }
  /* the nav (with the name) is wider here, so Back becomes a round icon button in the corner */
  .case-back { top: 12px; left: 12px; width: var(--nav-h); padding: 0; justify-content: center; }
  .case-back span { display: none; }
}
@media (max-width: 560px) {
  .case { --s3: 40px; --t-small: 13.5px; }
  .case .nav { padding: 0 10px 0 70px; }                        /* the round Back button keeps the left corner */
  .case-back { top: 10px; left: 10px; }
  .case-hero { padding: 8px; }
  .case-frame { padding: 96px 6% 36px; }
  .cs-band { padding-left: 8px; padding-right: 8px; }
  .cs-panel { padding-left: calc(var(--gutter) - 8px); padding-right: calc(var(--gutter) - 8px); }
  .cs-meta { grid-template-columns: minmax(0, 1fr); }
  .cs-pair { grid-template-columns: minmax(0, 1fr); }
  .next-link { grid-template-columns: minmax(0, 1fr); }
  .next-media { justify-content: space-between; }
  .next-thumb { width: 60%; }
}
@media (max-width: 389px) {
  .case .nav-name { display: none; }                           /* next to Back, the star alone carries the brand */
}
@media (max-width: 380px) {
  .case .nav-logo { padding: 0 12px; }
  .case .nav-cta { padding: 0 14px; }
  .case .nav-cta .meet-icon { display: none; }
}