/* ========================================
   NECTR LANE — Case Study shared layout
   ======================================== */

/* ── Hero ── */
.cs-hero {
  padding: 180px var(--pad-x) 100px;
  border-bottom: 1px solid var(--line);
}
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.2s;
  /* 44px hit area, same layout (T-13 / C-21) */
  padding-block: 14px;
  margin-top: -14px;
  margin-bottom: 50px; /* 64px gap to the meta row, minus the 14px padding */
}
.cs-back:hover { color: var(--accent); }
.cs-back-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.cs-back:hover .cs-back-arrow { transform: translateX(-4px); }

.cs-hero-meta {
  display: flex;
  gap: 32px;
  align-items: center;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.cs-hero-meta .num { color: var(--accent); }
.cs-hero-meta .sep { color: var(--ink-faint); }

.cs-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  margin-bottom: 0;
  font-weight: 800;
}
/* The italic phrase never splits across lines (fix-2026-10-12-framework-T-01): the upright
   and italic Instrument Serif files arrive separately, and a breakable phrase rewrapped
   twice during the swap (SBDS 0.045–0.109 CLS at 412). Case phrases are 1–2 short words,
   so this never overflows at 320. Not applied to About/Work/Contact, whose longer phrases would. */
.cs-hero h1 em { font-style: normal; color: var(--accent); white-space: nowrap; }

/* ── Overview ── */
.cs-overview {
  padding: var(--section) var(--pad-x);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.cs-overview-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 6px;
  position: sticky;
  top: 100px;
}
.cs-overview-text {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.7;
  color: var(--ink-dim);
  max-width: 72ch;
}
.cs-overview-text strong { color: var(--ink); font-weight: 400; }

@media (max-width: 860px) {
  .cs-overview { grid-template-columns: 1fr; gap: 20px; }
  .cs-overview-label { position: static; }
}

/* ── Details strip ── */
.cs-details {
  padding: 56px var(--pad-x);
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.cs-detail-block {}
.cs-detail-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 12px;
}
.cs-tags {
  /* Two columns, filled row by row; pills keep their natural width (decided 2026-10-13) */
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-items: start;
  gap: 8px;
}
.cs-tag {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ── Visual gallery ── */
.cs-visuals {
  padding: var(--section) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.cs-visual-full { grid-column: 1 / -1; }

.cs-img {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.cs-img-wide  { aspect-ratio: 16 / 8; }
.cs-img-std   { aspect-ratio: 4 / 3; }
.cs-img-tall  { aspect-ratio: 4 / 5; }
.cs-img-sq    { aspect-ratio: 1; }

.cs-img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  transition: transform 0.8s var(--ease), opacity 0.4s;
}
.cs-img:hover .cs-img-bg { transform: scale(1.04); opacity: 0.85; }

.cs-img-label {
  position: absolute;
  bottom: 16px;
  left: 20px;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #f6efe5; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  z-index: 1;
}

@media (max-width: 860px) {
  .cs-visuals { grid-template-columns: 1fr; }
  .cs-visual-full { grid-column: 1; }
}

/* ── Next case ── */
.cs-next {
  padding: var(--section) var(--pad-x);
}
.cs-next-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 32px;
}
/* C-07 (fix-2026-10-12-framework): inline flow instead of inline-flex, so the arrow is
   glued to the last word. The space between the title span and the arrow inherits
   nowrap from the link, while the title itself still wraps normally. */
.cs-next-link {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  display: inline-block;
  white-space: nowrap;
  transition: color 0.3s;
  font-weight: 800;
}
.cs-next-link > span:first-child { white-space: normal; }
.cs-next-link:hover { color: var(--accent); }
.cs-next-link em { font-style: normal; color: var(--accent); }
.cs-next-link .arrow {
  font-size: 0.35em;
  vertical-align: top;
  margin-top: 0.28em;
  margin-left: -0.05em;
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.cs-next-link:hover .arrow { transform: translate(0.2em, -0.2em); }

/* ── Rebuild additions (2026-10) ── */
.cs-reel { padding: 0 var(--pad-x) var(--section); }
.cs-reel .media { width: 100%; }
.cs-reel-meta { margin-top: 16px; }
h2.cs-overview-label { font-weight: 400; margin: 0; }
.cs-overview-text p + p { margin-top: 1em; }
.cs-visuals { align-items: start; }
.cs-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-fig .media { width: 100%; }
.cs-fig .ratio-9x16 { max-width: 420px; }
/* C-05 (fix-2026-10-12-framework): a 9:16 next to a 4:5 gets ratio-sized columns
   (9/16 : 4/5 of the same height = 9fr : 12.8fr), so both share one height with no dead
   gap. The 420px cap only applies when the vertical stacks (≤860px), where it is centred. */
@media (min-width: 861px) {
  .cs-visuals:has(> .cs-fig:nth-child(2) > .ratio-9x16) { grid-template-columns: minmax(0, 9fr) minmax(0, 12.8fr); }
  .cs-visuals:has(> .cs-fig:nth-child(3) > .ratio-9x16) { grid-template-columns: minmax(0, 12.8fr) minmax(0, 9fr); }
  .cs-visuals > .cs-fig:not(.cs-visual-full) .ratio-9x16 { max-width: none; }
}
@media (max-width: 860px) {
  .cs-fig:has(> .ratio-9x16) { width: 100%; max-width: 420px; justify-self: center; }
}
.cs-fig figcaption {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cs-next-link { max-width: 100%; overflow-wrap: anywhere; }
.cs-next-link em { white-space: nowrap; }

/* ========================================
   Standard case-study template (2026-10-12)
   Order: hero + summary · reel · facts · story · gallery · quote · next.
   Copy sydney-best-dim-sim.html to start a new case page.
   ======================================== */
.cs-summary {
  margin-top: 32px;
  max-width: 38ch;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  color: var(--ink-dim);
}
.cs-hero-meta { gap: 14px 24px; }
/* C-12: on narrow screens the row wraps, so drop the slashes and let the gap
   separate the items; no line starts or ends on an orphan "/". */
@media (max-width: 720px) {
  .cs-hero-meta { gap: 8px 20px; }
  .cs-hero-meta .sep { display: none; }
}

/* Facts strip */
.cs-facts {
  margin: 0;
  padding: 56px var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
  gap: 32px 40px;
  border-bottom: 1px solid var(--line);
}
.cs-fact dt {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.cs-fact dd { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.45; }
/* Pages with three facts (no Year): Services also takes the empty fourth column */
.cs-facts:not(:has(> .cs-fact:nth-child(5))) > .cs-fact-services { grid-column: 4 / -1; }
@media (max-width: 1100px) {
  .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-fact-services, .cs-facts:not(:has(> .cs-fact:nth-child(5))) > .cs-fact-services { grid-column: 1 / -1; }
}
/* The widest pair of pills needs about 370px, so phones narrower than 420px get one column */
@media (max-width: 419px) {
  .cs-tags { grid-template-columns: max-content; }
}

/* Story: one flowing block of paragraphs, no numbered labels (2026-10-13) */
.cs-story { padding: 72px var(--pad-x); border-bottom: 1px solid var(--line); }
.cs-story-body {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.7;
  color: var(--ink-dim);
  max-width: 32em; /* about 65 characters a line */
}
.cs-story-body p { margin: 0; }
.cs-story-body p + p { margin-top: 1em; }
/* Optional result highlight, placed just before the paragraph that describes the result */
.cs-story-body .cs-stat { display: flex; flex-direction: column; gap: 12px; margin: 2em 0 1.25em; }
.cs-stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--accent);
  font-weight: 800;
}
.cs-stat-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 860px) {
  .cs-story { padding: 56px var(--pad-x); }
}

/* Testimonial (hidden until a real, approved quote exists) */
.cs-quote { margin: 0; padding: var(--section) var(--pad-x); border-bottom: 1px solid var(--line); }
.cs-quote blockquote {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.45;
  max-width: 36em;
}
.cs-quote figcaption {
  margin-top: 24px;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cs-hero + .cs-reel { padding-top: 48px; }

/* Client hub (e.g. Zone Four): campaign tiles beneath the BTS film */
.cs-campaigns { padding: var(--section) var(--pad-x); border-bottom: 1px solid var(--line); }
.cs-campaigns-h {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 40px;
}
.cs-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cs-tile a { display: flex; flex-direction: column; gap: 14px; }
.cs-tile .media { width: 100%; transition: opacity 0.3s var(--ease); }
.cs-tile a:hover .media { opacity: 0.85; }
/* Short campaign description under the tile title (replaced the "Campaign · place" label, 2026-10-13) */
.cs-tile-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 34em;
}
.cs-tile-title {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  letter-spacing: var(--ls-card);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.15em;
  flex-wrap: wrap;
  transition: color 0.3s;
  font-weight: 700;
}
.cs-tile-title em { font-style: normal; color: var(--accent); }
.cs-tile-title .arrow { font-size: 0.5em; margin-top: 0.2em; transition: transform 0.4s var(--ease); }
.cs-tile a:hover .cs-tile-title { color: var(--accent); }
.cs-tile a:hover .cs-tile-title .arrow { transform: translate(0.15em, -0.15em); }
/* C-03 (fix-2026-10-12-framework): two columns from 600 to 860px, one below. */
@media (max-width: 860px) { .cs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } }
@media (max-width: 600px) { .cs-tiles { grid-template-columns: 1fr; gap: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .cs-tile .media, .cs-tile-title, .cs-tile-title .arrow, .cs-back-arrow, .cs-next-link .arrow { transition: none; }
}

/* Feature figure: a portrait image given its own row, centred and capped so it isn't oversized */
.cs-fig.cs-visual-feature { grid-column: 1 / -1; width: 100%; max-width: 760px; justify-self: center; }

/* ── Vertical (9:16) film in the reel slot (decided 2026-10-13) ──
   Centred, with its height capped so the whole frame fits on screen; full width on phones. */
.cs-reel-vertical figure { margin: 0 auto; width: min(100%, calc(85vh * 9 / 16)); }
.cs-reel-vertical .media { width: 100%; }
.cs-reel-vertical figcaption,
.cs-short figcaption {
  margin-top: 12px;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── Supporting reels and photography (optional section; see knowledge/website/adding-a-page.md) ──
   A heading, then a row of vertical films: 4 across from 1100px, 2 across below. */
.cs-supporting { padding: var(--section) var(--pad-x) 0; }
.cs-supporting-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-section);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin-bottom: 48px;
  text-wrap: balance;
}
.cs-shorts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cs-short { margin: 0; }
@media (max-width: 1099px) { .cs-shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-supporting + .cs-visuals { padding-top: 48px; }
/* Landscape (16:9) supporting films, e.g. Wanderer's visualiser and vlogs: three across, one column on phones */
.cs-shorts.cs-shorts-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .cs-shorts.cs-shorts-wide { grid-template-columns: 1fr; gap: 32px; } }

/* A tall (9:16) image leading the gallery: its own row, centred, height capped like the vertical reel */
.cs-fig.cs-visual-tall { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(85vh * 2 / 3)); }