/* =========================================================
   formfluX case-study pages
   Extends portfolio.css — inherits tokens, nav, footer,
   cta, chrome, and typography. Adds case-study-specific
   components.
   ========================================================= */

/* ============ PAGE FRAME ============ */
.cs {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ============ HERO ============ */
.cs-hero {
  position: relative;
  margin: 92px calc(-1 * var(--pad-x)) var(--gap);
  padding: 0 var(--pad-x);
}
.cs-hero__chrome {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 0 16px;
  border-bottom: 1px solid var(--rule);
  max-width: var(--max);
  margin: 0 auto 32px;
}
.cs-hero__chrome .chrome-id { color: var(--acc); }
.cs-hero__image-wrap {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.cs-hero__image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}
.cs-hero__image-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
  pointer-events: none;
}
html[data-theme="light"] .cs-hero__image-wrap::after {
  background: linear-gradient(to top, rgba(20,20,26,0.68) 0%, rgba(20,20,26,0.2) 55%, transparent 100%);
}
.cs-hero__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(22px, 4vw, 48px);
  color: #fff;
  z-index: 1;
}
.cs-hero__kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--acc);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cs-hero__title {
  font-family: var(--f-display);
  font-size: clamp(36px, 6vw, 78px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  max-width: 820px;
  text-wrap: balance;
}
.cs-hero__title em {
  font-style: italic;
  font-weight: 400;
}
.cs-hero__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.82);
  max-width: 640px;
  line-height: 1.55;
}
/* Brand-mark variant of the hero title — used when the project's
   identity is its own typography (e.g. Mel Studio). Sits in place of
   the H1 .cs-hero__title and inherits its bottom margin.
   Selector specificity beats the .cs-hero__image-wrap img rule above
   that otherwise stretches every img to 100%/100%. */
.cs-hero__image-wrap img.cs-hero__brandmark {
  display: block;
  position: relative;       /* sit above the hero overlay gradient */
  width: clamp(160px, 22vw, 280px);
  height: auto;
  object-fit: contain;
  margin: 0 0 18px 0;
  /* Logo PNG has navy blue ink + transparent background. Drop a soft
     shadow so it stays legible against any hero photograph. */
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
.cs-hero--placeholder .cs-hero__image-wrap {
  background: repeating-linear-gradient(45deg, var(--bg-2) 0, var(--bg-2) 14px, var(--bg-3) 14px, var(--bg-3) 28px);
}
.cs-hero--placeholder .cs-hero__image-wrap::after { display: none; }
.cs-hero--placeholder .cs-hero__overlay { position: static; padding: 0; color: var(--ink); margin-top: 28px; }
.cs-hero--placeholder .cs-hero__kicker { color: var(--acc); }
.cs-hero--placeholder .cs-hero__title { color: var(--ink); }
.cs-hero--placeholder .cs-hero__sub { color: var(--ink-2); }

/* Brand-panel hero — used when the project's identity stands on its
   own (e.g. Mel Studio). No background photograph: a warm cream panel
   with a soft inner highlight, evoking a brand mark printed on quality
   paper. The navy logo pops against it; inside the dark page chrome
   the whole thing reads as a featured branded card. */
.cs-hero--brand .cs-hero__image-wrap {
  background:
    radial-gradient(ellipse 72% 64% at 50% 38%, rgba(255,255,255,0.55), transparent 70%),
    linear-gradient(160deg, #c9bfa4 0%, #e8dec3 45%, #c9bfa4 100%);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.cs-hero--brand .cs-hero__image-wrap::after { display: none; }
.cs-hero--brand .cs-hero__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vw, 56px);
  background: transparent;
}
/* Kicker + sub flip to the brand's deep navy — same hue family as the
   logo ink — so they read as part of the brand mark, not page chrome. */
.cs-hero--brand .cs-hero__kicker {
  color: #232a78;
  letter-spacing: 0.12em;
}
.cs-hero--brand .cs-hero__sub {
  color: rgba(35, 42, 120, 0.78);
  max-width: 620px;
  margin-inline: auto;
}
/* In the brand variant the logo is the visual anchor — bump it up,
   drop the hero-photo drop-shadow (no photograph to fight). */
.cs-hero--brand .cs-hero__image-wrap img.cs-hero__brandmark {
  width: clamp(220px, 30vw, 400px);
  margin: 4px auto 22px auto;
  filter: none;
}

/* ============ NX Water brand-hero variant ============
   Soft porcelain panel with a subtle cool water-blue undertone —
   deliberately NOT the warm cream used for Mel Studio, so the two
   cases read as distinct identities. The NX Water brand pattern
   sits as a single large hero motif via ::before (no repeat) so
   the tile seams don't show. */
.cs-hero--brand-nx .cs-hero__image-wrap {
  background:
    radial-gradient(ellipse 72% 64% at 50% 38%, rgba(255,255,255,0.65), transparent 70%),
    linear-gradient(160deg, #dde6eb 0%, #ecf1f4 45%, #dde6eb 100%);
  position: relative;
  isolation: isolate;
}
.cs-hero--brand-nx .cs-hero__image-wrap::before {
  content: '';
  position: absolute;
  inset: auto -8% auto auto;
  top: 50%;
  transform: translateY(-50%);
  width: 60%;
  aspect-ratio: 1100 / 300;
  background:
    url('images/ksm/nxwater-pattern.png') no-repeat center / contain;
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
}

/* ============ Brand-hero MOBILE FIX ============
   On mobile the 16:9 aspect-ratio that suits photographic heroes
   clips the brand-panel content (logo + kicker + multi-line prose
   needs more vertical room than 16:9 gives at ~390px wide).
   Drop the aspect ratio, let the panel grow to fit its content
   instead. Applies to both Mel Studio (.cs-hero--brand) and the
   NX Water variant (.cs-hero--brand-nx). */
@media (max-width: 760px) {
  .cs-hero--brand .cs-hero__image-wrap {
    aspect-ratio: auto;
    min-height: 360px;
  }
  .cs-hero--brand .cs-hero__overlay {
    position: static;
    padding: clamp(32px, 8vw, 56px) clamp(20px, 5vw, 32px);
    /* Static positioning means the overlay defines the panel's
       intrinsic height — no clipping, content drives the layout. */
  }
  .cs-hero--brand .cs-hero__image-wrap img.cs-hero__brandmark {
    width: clamp(180px, 55vw, 280px);
    margin-bottom: 16px;
  }
  /* For NX variant: the wide wordmark + pattern need a touch more room */
  .cs-hero--brand-nx .cs-hero__image-wrap img.cs-hero__brandmark--nx {
    width: clamp(220px, 70vw, 360px);
  }
  .cs-hero--brand .cs-hero__sub {
    font-size: 14px;
    line-height: 1.55;
  }
}
.cs-hero--brand-nx .cs-hero__image-wrap img.cs-hero__brandmark--nx {
  /* wider wordmark, no symbol — the NX Water logo is ~3:1 */
  width: clamp(280px, 42vw, 540px);
}

/* ============ CI/VI section — parent + sub-brand pair ============
   Two side-by-side brand cards using the same cream panel as Mel
   Studio. Cards have figcaption rules underneath naming each brand. */
.ksm-brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: clamp(28px, 5%, 56px);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  /* Soft porcelain panel — cool light, deliberately distinct from
     Mel Studio's warm cream. Subtle water-blue tint nods at NX Water
     without competing with the navy ink. */
  background:
    radial-gradient(ellipse 75% 65% at 50% 40%, rgba(255,255,255,0.65), transparent 70%),
    linear-gradient(160deg, #dde6eb 0%, #ecf1f4 50%, #dde6eb 100%);
  overflow: hidden;
  margin: 0;
}
/* Specificity guard — overrides BOTH generic rules that apply to
   images inside .cs-media:
   - .cs-media img { background: var(--bg-2); border: 1px solid ... }
     was painting a dark rectangle behind every brand-card logo.
   - .cs-media--pair img { aspect-ratio: 16/9; object-fit: cover }
     was force-cropping the wide wordmarks into a 16:9 box.
   This rule's specificity (0,2,1) beats both.

   Both PNGs are now top-bottom symmetric (NX Water's bottom
   whitespace was cropped to match its top padding), so width-based
   sizing produces logos whose visible content lands at the same
   vertical centre when flex-centred. Back to the bigger size the
   user preferred. */
.cs-media--pair .ksm-brand-card img {
  width: 70%;
  max-width: 380px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.ksm-brand-card figcaption {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(35, 42, 120, 0.65);
  white-space: nowrap;
}

/* ============ NX Water section — product render pair ============
   Two transparent Villa renders on the same porcelain panel used in
   Phase 1's CI/VI brand cards. Continuity through the page: logos
   on porcelain → products on porcelain. The brand pattern is
   already visible ON the product itself (the vertical strip on the
   cabinet door), so the backdrop pattern from the previous
   placeholder is no longer needed. */
.ksm-product-pair {
  /* override .cs-media--pair's default narrow gap */
  gap: 18px !important;
}
.cs-chapter--nx .ksm-product-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Original landscape banner size kept — the PNGs were cropped
     tight to the product itself, so the render fills more of the
     card naturally without changing card dimensions. */
  aspect-ratio: 4 / 3;
  padding: clamp(20px, 3%, 36px) clamp(20px, 3%, 36px) 48px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  background:
    radial-gradient(ellipse 75% 65% at 50% 40%, rgba(255,255,255,0.65), transparent 70%),
    linear-gradient(160deg, #dde6eb 0%, #ecf1f4 50%, #dde6eb 100%);
  overflow: hidden;
  margin: 0;
}
.cs-media--pair .ksm-product-card img {
  width: auto;
  height: 96%;     /* near-fill the card vertically */
  max-width: 95%;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.cs-chapter--nx .ksm-product-card figcaption {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(35, 42, 120, 0.65);
  white-space: nowrap;
}

/* ============ OVERVIEW — featured__body-style 3-col ============ */
.cs-overview {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  padding: 0 0 var(--gap);
  border-bottom: 1px solid var(--rule);
}
.cs-overview__text p {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink-2);
  line-height: 1.7;
}
.cs-overview__text p + p { margin-top: 14px; }
.cs-overview__text strong { color: var(--ink); font-weight: 500; }
.cs-overview__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  align-self: start;
}
.cs-meta-row {
  padding: 14px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: baseline;
}
.cs-meta-row dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cs-meta-row dd {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .cs-overview { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ CHAPTER ============ */
.cs-chapter {
  padding: var(--gap) 0;
  border-bottom: 1px solid var(--rule);
}
.cs-chapter:last-of-type { border-bottom: none; }
.cs-chapter__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
.cs-chapter__h {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 920px;
}
.cs-chapter__h em {
  font-style: italic;
  font-weight: 400;
  color: var(--acc);
}
.cs-chapter__tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  background: var(--acc-glow);
  border-radius: 100px;
  margin-bottom: 18px;
}
.cs-chapter__body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
}
@media (max-width: 900px) {
  .cs-chapter__body { grid-template-columns: 1fr; gap: 32px; }
}
.cs-chapter__body--single { display: block; }
.cs-chapter__body--single .cs-prose { max-width: 820px; }

.cs-prose p {
  font-size: clamp(14.5px, 1.3vw, 16px);
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 68ch;
}
.cs-prose p + p { margin-top: 14px; }
.cs-prose strong { color: var(--ink); font-weight: 500; }
.cs-prose em { color: var(--ink); font-style: italic; }
.cs-prose ul, .cs-prose ol {
  list-style: none;
  padding-left: 0;
  margin: 14px 0;
}
.cs-prose li {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.65;
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}
.cs-prose li::before {
  content: '→';
  position: absolute; left: 0; top: 0;
  color: var(--acc);
  font-family: var(--f-mono);
  font-size: 13px;
}
.cs-aside { align-self: start; }
.cs-aside__label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

/* ============ MEDIA BLOCKS ============ */
.cs-media { margin-top: 32px; }
.cs-media__cap {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 720px;
}
.cs-media img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--bg-2);
}

.cs-media--full img { aspect-ratio: auto; }
.cs-media--pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.cs-media--pair img { aspect-ratio: 16 / 9; object-fit: cover; }
.cs-media--trio {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.cs-media--trio img { aspect-ratio: 4 / 3; object-fit: cover; }
.cs-media--grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.cs-media--grid2 img { aspect-ratio: 1 / 1; object-fit: cover; }
.cs-media--quad {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.cs-media--quad img { aspect-ratio: 16 / 9; object-fit: cover; }
.cs-media--portrait {
  display: flex; justify-content: center;
}
.cs-media--portrait img {
  max-width: 520px; width: 100%;
  height: auto;
}
.cs-media--portrait-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: center;
}
.cs-media--portrait-pair img {
  height: auto;
  aspect-ratio: auto;
}
@media (max-width: 760px) {
  .cs-media--pair, .cs-media--trio, .cs-media--grid2, .cs-media--quad, .cs-media--portrait-pair {
    grid-template-columns: 1fr;
  }
}

/* Placeholder media (unbuilt pages) */
.cs-media--placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
  background: repeating-linear-gradient(45deg, var(--bg-2) 0, var(--bg-2) 14px, var(--bg-3) 14px, var(--bg-3) 28px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.cs-media--placeholder .ph-grid {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-align: center;
}
.cs-media--placeholder .ph-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ============ STATS — hero__proof-flavour ============ */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 32px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cs-stat {
  padding: 20px 22px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.cs-stat__val {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.cs-stat__val em {
  font-style: italic;
  color: var(--acc);
  font-weight: 400;
}
.cs-stat__lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 1.45;
}

/* ============ PUBLICATIONS LIST ============ */
.cs-pubs {
  list-style: none;
  display: flex; flex-direction: column;
  margin-top: 22px;
  border-top: 1px solid var(--rule);
}
.cs-pubs li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 20px;
  align-items: baseline;
}
@media (max-width: 760px) {
  .cs-pubs li { grid-template-columns: 1fr; gap: 6px; }
}
.cs-pubs__venue {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--acc);
  text-transform: uppercase;
}
.cs-pubs__title {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.cs-pubs__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Poster expand button */
.cs-expand-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  padding: 8px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  margin-top: 16px;
  transition: color .2s, border-color .2s, background .2s;
}
.cs-expand-btn:hover {
  color: var(--acc);
  border-color: var(--acc);
  background: var(--acc-glow);
}

/* ============ POSTER MODAL ============ */
.cs-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0);
  opacity: 0; pointer-events: none;
  transition: background .22s ease, opacity .22s ease;
}
.cs-modal[hidden] { display: none !important; }
.cs-modal.is-open {
  opacity: 1; pointer-events: auto;
  background: rgba(0,0,0,0.82);
}
.cs-modal__backdrop {
  position: absolute; inset: 0; cursor: zoom-out;
}
.cs-modal__content {
  position: relative; z-index: 1;
  max-width: min(92vw, 980px);
  max-height: 92vh;
  width: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.cs-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.cs-modal__title {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.cs-modal__close {
  background: transparent;
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s, border-color .2s;
}
.cs-modal__close:hover { color: var(--ink); border-color: var(--ink-3); }
.cs-modal__close svg, .cs-modal__close * { pointer-events: none; }
.cs-modal__viewer {
  flex: 1;
  background: #fff;
  overflow: auto;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 16px;
}
.cs-modal__viewer img {
  width: auto; max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* ============ REFLECTION BLOCK ============ */
.cs-reflection {
  padding: var(--gap) 0;
  max-width: 820px;
}
.cs-reflection p {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.cs-reflection p + p { margin-top: 18px; }
.cs-reflection p em { font-style: italic; color: var(--ink); }
.cs-reflection__mark {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 18px;
  display: block;
}

/* ============ PROJECT DIVIDER (final-year) ============ */
.cs-divider {
  margin: var(--gap) 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule-2);
  text-align: center;
}
.cs-divider__label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acc);
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: 100px;
  transform: translateY(-50%);
}

/* ============ FOOT-RETURN ============ */
.cs-return {
  padding: var(--gap) 0 calc(var(--gap) / 2);
  display: flex;
  justify-content: center;
}
.cs-return .cta {
  font-size: 14px;
}

/* ============ ACCENT LINKS (inline) ============ */
.cs-prose a,
.cs-overview__text a {
  color: var(--ink);
  border-bottom: 1px solid var(--acc);
  padding-bottom: 1px;
  transition: background .2s;
}
.cs-prose a:hover,
.cs-overview__text a:hover { background: var(--acc-glow); }