/* ============================================================
   ATOMIC — the case-study layer.
   ------------------------------------------------------------
   Loaded by /work/<project>/ pages only, after home-atomic.css
   and atomic-pages.css (which supply the chrome, the head, the
   bands, the labels and the number disc). This sheet adds the
   case-study devices:

     THE PLATE ROW    — the full-width site capture under the head
     THE RECORD ROW   — scope / where / status / type on one rule
     THE COMPARISON   — before and after; the after forward, larger
     THE ANNOTATIONS  — labelled rows under a detail crop
     THE CALLOUTS     — typographic improvement notes, never cards

   Every capture renders at its own proportions (width/height
   attributes + height:auto), so nothing important is cropped and
   nothing shifts while loading.
   ============================================================ */

/* ---------- the hero plate ---------------------------------- */
.cs-hero { padding-top: clamp(40px, 4.4vw, 64px); padding-bottom: 0; }
.cs-hero__plate { margin: 0; overflow: hidden; background: var(--navy); border: 1px solid rgba(14, 17, 23, 0.18); }
.cs-hero__plate img { display: block; width: 100%; height: auto; }

/* ---------- the record row ---------------------------------- */
.cs-meta { padding: clamp(28px, 3vw, 44px) var(--at-gut) clamp(20px, 2.2vw, 32px); }
.cs-meta dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px var(--s4); }
.cs-meta dl > div { display: flex; flex-direction: column; gap: 4px; padding-top: var(--s2); border-top: 1px solid var(--ink); }
.cs-meta dd { font-size: 15px; }

/* ---------- the numbered section ---------------------------- */
.cs-sect { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); align-items: start; }
.cs-sect__id { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); }
.cs-sect__h { font-size: clamp(30px, 3.6vw, 52px); font-weight: 600; line-height: 0.98; letter-spacing: -0.022em; }
.cs-sect__h span { display: block; }
.cs-sect__say { font-size: clamp(15px, 1.25vw, 18px); color: var(--ink-80); max-width: 36ch; }

/* ---------- a captured plate with its label ----------------- */
.cs-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs-fig__plate { display: block; overflow: hidden; background: var(--navy); border: 1px solid rgba(14, 17, 23, 0.18); }
.cs-fig__plate img { display: block; width: 100%; height: auto; }

/* ---------- the comparison — the after steps forward -------- */
.cs-duo { position: relative; }
.cs-duo__before { width: 48%; }
.cs-duo__after { position: relative; z-index: 2; width: 70%; margin: -12% 0 0 auto; }
/* The seam: the band's own ground, so the overlap reads as placed, not pasted. */
.cs-duo__after .cs-fig__plate { border: clamp(8px, 1.1vw, 14px) solid var(--paper-2); outline: 1px solid rgba(14, 17, 23, 0.18); }
.cs-duo__after figcaption { text-align: right; }

/* ---------- the annotated details --------------------------- */
.cs-dets { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); min-width: 0; }
.cs-ann { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
.cs-ann li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 2px; border-top: 1px solid rgba(14, 17, 23, 0.2); font-size: 15px; }
.cs-ann .at-lbl { color: var(--signal-ink); }

/* ---------- the callouts — typography, grid, whitespace ----- */
.cs-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); align-content: start; }
.cs-pts > div { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid rgba(14, 17, 23, 0.2); }
.cs-pts dt { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.cs-pts dt .at-star { width: 13px; height: 13px; color: var(--signal); flex: 0 0 auto; }
.cs-pts dd { font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-80); }

/* ---------- the close, on navy ------------------------------ */
.cs-close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: end; }
.cs-close__h { font-size: clamp(40px, 5.6vw, 84px); font-weight: 600; line-height: 0.96; letter-spacing: -0.025em; }
.cs-close__h span { display: block; }
.cs-close__b { font-size: clamp(16px, 1.35vw, 19px); color: rgba(250, 248, 245, 0.8); max-width: 40ch; }
.cs-close__bs { display: flex; flex-direction: column; gap: var(--s3); }

/* ---------- next project ------------------------------------ */
.cs-next { display: flex; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; padding: clamp(40px, 4.4vw, 64px) var(--at-gut); }
.cs-next__name { font-size: clamp(28px, 3.3vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.cs-next__name a { color: var(--ink); text-decoration: none; transition: color 180ms var(--ease-out); }
.cs-next__name a:hover, .cs-next__name a:focus-visible { color: var(--at-blue); }
.cs-next__name i { font-style: normal; }
.cs-next__all { margin-left: auto; }

/* ============================================================
   MOTION — the same forward entrance as every other page
   ============================================================ */
.js-motion .cs-sect__id > *,
.js-motion .cs-fig,
.js-motion .cs-pts > div,
.js-motion .cs-close > *,
.js-motion .cs-next > * {
  opacity: 0; transform: translateX(-14px);
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out);
}
.js-motion .cs-sect__id > .is-in,
.js-motion .cs-fig.is-in,
.js-motion .cs-pts > div.is-in,
.js-motion .cs-close > .is-in,
.js-motion .cs-next > .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .cs-hero__plate, .js-motion .cs-meta dl > div, .js-motion .cs-sect__id > *,
  .js-motion .cs-fig, .js-motion .cs-pts > div, .js-motion .cs-close > *, .js-motion .cs-next > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .cs-sect { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: var(--s6); }
}
@media (max-width: 860px) {
  .cs-sect { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .cs-meta dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The story stacks: before, then after, full width, in order. */
  .cs-duo { display: flex; flex-direction: column; gap: 18px; }
  .cs-duo__before { width: 100%; }
  .cs-duo__after { width: 100%; margin: 0; }
  .cs-duo__after .cs-fig__plate { border: 1px solid rgba(14, 17, 23, 0.18); outline: none; }
  .cs-duo__after figcaption { text-align: left; }
  .cs-close { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s4); }
}
@media (max-width: 560px) {
  .cs-meta dl, .cs-pts, .cs-ann { grid-template-columns: minmax(0, 1fr); }
  .cs-next { flex-direction: column; align-items: flex-start; }
  .cs-next__all { margin-left: 0; }
}

/* ============================================================
   THE NONPROFIT LAYER — added for Lost & Found Animal Foundation.
   ------------------------------------------------------------
   Four devices the earlier case studies didn't need. All built
   from the same parts as everything else: hairlines, the 8 scale,
   the star, and orange used only to mark direction.

     THE STATEMENT   — an oversized pull line on the navy field
     THE SYSTEM      — swatches, type specimens, principles
     THE PATHWAYS    — participation routes as an editorial index
     THE SITE LINE   — copy quoted from the redesigned site itself
   ============================================================ */

/* ---------- the statement ----------------------------------- */
.cs-quote { padding: clamp(64px, 7.4vw, 112px) var(--at-gut); }
.cs-quote__p {
  font-size: clamp(28px, 4.2vw, 60px); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.025em; max-width: 20ch;
}
.cs-quote__p span { display: block; }
.cs-quote__p .dim { color: rgba(250, 248, 245, 0.55); }
.cs-quote__cite { margin-top: clamp(20px, 2.2vw, 32px); color: var(--signal-lift); }

/* ---------- the site line — the redesign's own words -------- */
.cs-siteline { display: flex; flex-direction: column; gap: 14px; padding-left: clamp(20px, 2.4vw, 34px); border-left: 3px solid var(--signal); }
.cs-siteline__q { font-size: clamp(24px, 3vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.cs-siteline__q span { display: block; }

/* ---------- the brand system -------------------------------- */
.cs-sys { display: flex; flex-direction: column; gap: clamp(40px, 4.6vw, 72px); }
.cs-sys__grp { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); }

/* swatches: the chip carries the colour, the name carries the meaning.
   No hex values are printed — the case study states the system, not
   the spec sheet, and nothing here can drift out of date. */
.cs-sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.cs-sw > div { display: flex; flex-direction: column; gap: 12px; }
.cs-sw__chip { aspect-ratio: 4 / 3; border: 1px solid rgba(14, 17, 23, 0.18); }
.cs-sw__name { font-size: clamp(15px, 1.2vw, 17px); font-weight: 600; letter-spacing: -0.01em; }
.cs-sw__role { font-size: 14px; color: var(--ink-55); }

/* type specimens */
.cs-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.cs-type > div { display: flex; flex-direction: column; gap: 10px; padding-top: var(--s2); border-top: 1px solid var(--ink); }
.cs-type__aa { font-size: clamp(64px, 8vw, 116px); line-height: 0.9; letter-spacing: -0.03em; }
.cs-type__aa--head { font-weight: 700; font-family: var(--laf-display); }
.cs-type__aa--body { font-weight: 400; font-family: var(--laf-body); }
.cs-type__role { font-size: clamp(15px, 1.2vw, 17px); font-weight: 600; }
.cs-type__note { font-size: 14px; color: var(--ink-55); }

/* the hierarchy sample */
.cs-scale { display: flex; flex-direction: column; gap: 10px; padding-top: var(--s3); border-top: 1px solid rgba(14, 17, 23, 0.2); }
.cs-scale__h { font-family: var(--laf-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.022em; }
.cs-scale__s { font-family: var(--laf-body); font-size: clamp(16px, 1.4vw, 20px); color: var(--ink-80); }

/* principles: the pair reads as a correction, so the second half dims */
.cs-prin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.cs-prin > div { padding: clamp(16px, 1.8vw, 22px) 0; border-top: 1px solid rgba(14, 17, 23, 0.2); }
.cs-prin b { display: block; font-size: clamp(20px, 2vw, 27px); font-weight: 600; letter-spacing: -0.015em; }
.cs-prin b i { font-style: normal; color: var(--ink-35); }

/* ---------- the pathways — an index, never a card grid ------ */
.cs-paths { border-top: 1px solid var(--ink); }
.cs-path {
  display: grid; grid-template-columns: auto minmax(0, 5fr) minmax(0, 7fr) auto;
  gap: var(--s3) var(--s4); align-items: baseline;
  padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid rgba(14, 17, 23, 0.2);
  transition: padding-left var(--dur-base) var(--ease-out);
}
.cs-path__n { font-size: 13px; font-weight: 500; letter-spacing: 0.18em; color: var(--signal-ink); }
.cs-path__name { font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; line-height: 1; letter-spacing: -0.022em; }
.cs-path__say { font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-80); }
.cs-path__mark { width: 13px; height: 13px; color: var(--signal); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cs-path:hover { padding-left: 14px; }
  .cs-path:hover .cs-path__mark { opacity: 1; transform: none; }
}

/* ---------- motion for the new devices ---------------------- */
.js-motion .cs-quote__p, .js-motion .cs-quote__cite,
.js-motion .cs-sw > div, .js-motion .cs-type > div,
.js-motion .cs-prin > div, .js-motion .cs-path,
.js-motion .cs-siteline {
  opacity: 0; transform: translateX(-14px);
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out);
}
.js-motion .cs-quote__p.is-in, .js-motion .cs-quote__cite.is-in,
.js-motion .cs-sw > div.is-in, .js-motion .cs-type > div.is-in,
.js-motion .cs-prin > div.is-in, .js-motion .cs-path.is-in,
.js-motion .cs-siteline.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .cs-quote__p, .js-motion .cs-quote__cite, .js-motion .cs-sw > div,
  .js-motion .cs-type > div, .js-motion .cs-prin > div, .js-motion .cs-path,
  .js-motion .cs-siteline {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .cs-path { transition: none !important; }
}

/* ---------- responsive -------------------------------------- */
@media (max-width: 1100px) {
  .cs-path { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cs-path__say { grid-column: 2 / 4; }
}
@media (max-width: 860px) {
  .cs-sw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-prin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cs-type { grid-template-columns: minmax(0, 1fr); }
  .cs-path { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 0 !important; }
  /* the tablet rule places the sentence across columns 2-4; released here,
     or the explicit placement keeps three implicit columns alive on a phone */
  .cs-path__say { grid-column: auto; }
  .cs-path__mark { display: none; }
}

/* ---------- the close actions, and the inverse button -------
   The base button is ink-on-paper, which disappears on the navy
   field. The inverse carries a paper hairline instead, and picks
   up the same blue focus as everything else. */
.cs-close__acts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.at-btn--inv { border-color: rgba(250, 248, 245, 0.42); color: var(--paper); }
.at-btn--inv:hover, .at-btn--inv:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ---------- the capability list, read on navy --------------- */
.at-band--navy .at-capx__list > div { border-top-color: rgba(250, 248, 245, 0.22); }
.at-band--navy .at-capx__list dd { color: rgba(250, 248, 245, 0.78); }
.at-band--navy .at-capx__list dt .at-star { color: var(--signal-lift); }