/* ═══════════════════════════════════════════════════════════════
   CASE STUDY — layout from the Claude Design mockup "A · Case study
   detail, restyled to match 03b", reconciled to the homepage system.
   Loads after editorial.css and uses only its tokens:
     type:   --t-display · --t-heading · --t-text · --t-label (4 sizes)
     colour: woad = action (and hover) · nettle = evidence
     theme:  dark by default, shared toggle and saved choice
   ═══════════════════════════════════════════════════════════════ */

button.btn { font-family: inherit; background: none; cursor: pointer; }

.label {
  font-size: var(--t-label); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

/* --- BREADCRUMB BAR --- */

.crumbs { border-bottom: 1px solid var(--border); }
.crumbs__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; padding-block: 1.25rem; font-size: var(--t-text);
}
.crumbs a { font-weight: 500; }

/* --- HERO --- */

.cs-hero { display: grid; gap: 1.25rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.cs-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.cs-hero h1 {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-heading);
  line-height: 1.15; letter-spacing: -0.015em; color: var(--shadow); text-wrap: balance;
}
.cs-hero .lede { font-size: var(--t-text); line-height: 1.6; color: var(--muted); max-width: 38em; }

/* --- THE 30-SECOND VERSION --- */

.summary { display: grid; gap: 1rem; }
.summary__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--border);
}
.summary__col { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.75rem 2rem; }
.summary__col:first-child { padding-left: 0; }
.summary__col:last-child { padding-right: 0; }
.summary__col + .summary__col { border-left: 1px solid var(--border); }
.summary__title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-text);
  line-height: 1.4; text-wrap: pretty;
}
.summary__body { font-size: var(--t-text); line-height: 1.55; color: var(--muted); }
.evidence { color: var(--evidence); font-weight: 400; }

/* --- BEFORE / AFTER COMPARE --- */

.compare { display: grid; gap: 0.875rem; padding-top: 3.5rem; }
.compare__frame {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--fleece); box-shadow: var(--shot-shadow);
}
.compare__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--chrome); --pos: 50%; }
.compare__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
}
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--action); pointer-events: none;
}
.compare__handle {
  position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--action); color: var(--on-action); font-size: var(--t-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.compare__tag {
  position: absolute; bottom: 1.25rem; padding: 0.4rem 0.65rem; border-radius: 4px;
  background: color-mix(in srgb, var(--fleece) 90%, transparent); pointer-events: none;
}
.compare__tag--before { left: 1.5rem; }
.compare__tag--after { right: 1.5rem; }
/* the real control: a full-size range input, invisible, so keyboard and screen readers get a slider */
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 2;
}
.compare__range:focus-visible ~ .compare__handle { outline: 2px solid var(--shadow); outline-offset: 3px; }
.compare__caption { font-size: var(--t-text); color: var(--muted); }

/* --- FACTS --- */

.facts { padding-top: 3.5rem; }
.facts dl {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--border);
}
.facts dl > div { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.375rem 1.5rem; }
.facts dl > div:first-child { padding-left: 0; }
.facts dl > div:last-child { padding-right: 0; }
.facts dl > div + div { border-left: 1px solid var(--border); }
.facts dd { font-size: var(--t-text); line-height: 1.45; }

/* --- GO DEEPER --- */

.deeper { padding-block: clamp(4rem, 3rem + 3vw, 5.5rem) clamp(4rem, 3rem + 3vw, 6rem); }
.deeper__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; }
.deeper__head h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-heading); letter-spacing: -0.02em; line-height: 1.1; }

.step { border-top: 1px solid var(--border); }
.step:first-of-type { border-top-color: var(--shadow); }
.step:last-of-type { border-bottom: 1px solid var(--border); }
.step__row {
  display: grid; grid-template-columns: 4rem 20rem minmax(0, 1fr) 44px; align-items: center; gap: 1rem;
  padding-block: 1.375rem; list-style: none; cursor: pointer;
}
.step__row::-webkit-details-marker { display: none; }
.step__row:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: 2px; }
.step__num { font-family: var(--font-display); font-size: var(--t-label); color: var(--muted); }
.step__title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-heading);
  letter-spacing: -0.01em; line-height: 1.15; transition: color 0.2s ease;
}
.step__row:hover .step__title { color: var(--action); }
.step__desc { font-size: var(--t-text); color: var(--muted); }
.step__icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border); color: var(--action); font-size: var(--t-text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.step__icon::before { content: '+'; }
.step[open] .step__icon { background: var(--action); border-color: var(--action); color: var(--on-action); }
.step[open] .step__icon::before { content: '\2212'; }
.step__body { margin-left: calc(4rem + 1rem); padding-bottom: 2rem; }

.insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.insight {
  min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.insight__text { font-family: var(--font-display); font-weight: 300; font-size: var(--t-text); line-height: 1.45; }
/* a baseline number is evidence of the problem, not a result, so it stays neutral rather than nettle */
.insight__value {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-display);
  line-height: 1; letter-spacing: -0.025em; color: var(--shadow);
}

/* --- NEXT CASE STUDY --- */

.next { background: var(--band); color: #ffffff; padding-block: clamp(3.5rem, 2.5rem + 3vw, 4.5rem) 3rem; }
.next__link { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; color: #ffffff; }
.next__link:hover { color: #ffffff; }
.next__text { display: grid; gap: 0.875rem; }
.next__label { color: var(--band-muted); letter-spacing: 0.1em; }
.next__title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-heading);
  line-height: 1.1; letter-spacing: -0.02em;
}
.next__btn {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 1.25rem;
  border-radius: 999px; background: #ffffff; color: #22415e; font-size: var(--t-text); font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.next__link:hover .next__btn, .next__link:focus-visible .next__btn { background: #cfdcea; }   /* pale woad on the woad band */
.next a:focus-visible { outline-color: #ffffff; }

/* --- RESPONSIVE --- */

@media (max-width: 900px) {
  .summary__grid { grid-template-columns: 1fr; }
  .summary__col, .summary__col:first-child, .summary__col:last-child { padding: 1.5rem 0; }
  .summary__col + .summary__col { border-left: 0; border-top: 1px solid var(--border); }
  .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts dl > div, .facts dl > div:first-child, .facts dl > div:last-child { padding: 1.125rem 1rem 1.125rem 0; }
  .facts dl > div + div { border-left: 0; }
  .facts dl > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .step__row { grid-template-columns: 2.5rem minmax(0, 1fr) 44px; row-gap: 0.25rem; }
  .step__desc { grid-column: 2 / 3; grid-row: 2; }
  .step__icon { grid-column: 3; grid-row: 1 / 3; }
  .step__body { margin-left: 0; }
  .insights { grid-template-columns: 1fr; }
  .compare__stage { aspect-ratio: 4 / 3; }
}


/* ═══════════════════════════════════════════════════════════════
   LONG-FORM CONTENT — what goes inside a Go deeper section.
   Same tokens and 4-size scale as above.
   ═══════════════════════════════════════════════════════════════ */

.step__body > * + * { margin-top: 2rem; }

.prose { display: grid; gap: 1.125rem; max-width: 42em; font-size: var(--t-text); line-height: 1.65; }
.prose h3 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-text);
  line-height: 1.4; margin-top: 1rem;
}
.prose h3:first-child { margin-top: 0; }
.prose strong { font-weight: 500; }
.prose ul { display: grid; gap: 0.625rem; padding-left: 1.25rem; }
.prose li::marker { color: var(--muted); }
.takeaways li { padding-left: 0.25rem; }
.takeaways strong { display: block; margin-bottom: 0.25rem; }

/* one screenshot or diagram, framed like the homepage shots */
.figure { display: grid; gap: 0.875rem; }
.figure .shot { display: block; }
.figure a.shot:hover { box-shadow: 0 20px 48px rgba(24, 22, 20, 0.14), 0 2px 6px rgba(24, 22, 20, 0.05); }
.figure figcaption { font-size: var(--t-text); line-height: 1.55; color: var(--muted); max-width: 42em; }
.figure__tag { display: block; margin-bottom: 0.25rem; }
.figure--narrow { max-width: 42em; }
.figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }

/* hero visual on pages without a before/after pair */
.cs-figure { padding-top: 3.5rem; }
.cs-figure .shot { max-width: 880px; }

/* participant quotes */
.quote { display: grid; gap: 0.625rem; max-width: 36em; padding-left: 1.25rem; border-left: 1px solid var(--shadow); }
.quote p { font-family: var(--font-display); font-weight: 300; font-size: var(--t-heading); line-height: 1.3; letter-spacing: -0.01em; }
.quote cite { font-style: normal; }

/* extra text inside an insight card */
.insight__detail { font-size: var(--t-text); line-height: 1.55; color: var(--muted); }
.insight__value--evidence { color: var(--evidence); }
.insights--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insight__value--word { font-size: var(--t-heading); line-height: 1.15; }

.conclusion { display: grid; gap: 0.5rem; max-width: 42em; padding-top: 1.25rem; border-top: 1px solid var(--shadow); }
.conclusion p { font-family: var(--font-display); font-weight: 400; font-size: var(--t-text); line-height: 1.5; }

/* copy variants tested with users */
.copy-test { max-width: 42em; border-top: 1px solid var(--shadow); }
.copy-test__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.copy-test__cell { display: grid; gap: 0.375rem; padding: 1rem 1rem 1rem 0; font-family: var(--font-display); font-size: var(--t-text); }
.copy-test__cell + .copy-test__cell { padding-left: 1rem; border-left: 1px solid var(--border); }
.copy-test__cell--won { color: var(--evidence); }
.copy-test__cell--won .label { color: var(--evidence); }
.copy-test__caption { padding-bottom: 0.75rem; }

/* essay pages */
.essay { padding-block: 1rem clamp(4rem, 3rem + 3vw, 6rem); }
.essay h2 {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-heading);
  line-height: 1.15; letter-spacing: -0.01em; margin-top: 2rem;
}
.essay-end { padding-block: 3rem; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .figure-pair, .insights--pair { grid-template-columns: 1fr; }
  .copy-test__row { grid-template-columns: 1fr; }
  .copy-test__cell + .copy-test__cell { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
}


/* --- SPLIT HERO: text and tags left, product screen right --- */

.cs-hero--split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start;
}
.cs-hero__text { display: grid; gap: 1.25rem; align-content: start; padding-top: 0.5rem; }
.cs-hero--split h1 sup { font-size: 0.5em; line-height: 0; position: relative; top: -0.15em; margin-left: 0.05em; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; padding-top: 0.5rem; }
.cs-tag {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.125rem;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--t-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.cs-hero__media .shot { box-shadow: var(--shot-shadow); }

@media (max-width: 900px) {
  .cs-hero--split { grid-template-columns: 1fr; }
}