/* Oiika · case-study pages. Editorial and still: same tokens, same voice,
   none of the scroll machinery. Loaded after scrollcraft.css + oiika.css. */

.case-body {
  background: #F7F1E7;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.case-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--sc-gutter);
}
.case-mark {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.case-mark:hover { color: var(--sc-accent); }
/* .chrome-cta comes from oiika.css but is fixed there; static here */
.case-top .chrome-cta { position: static; }

.case-wrap {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 6rem) var(--sc-gutter) clamp(4rem, 9vw, 7rem);
  flex: 1;
}

.case-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-4);
}

.case-title {
  font-family: var(--sc-font-display);
  font-weight: 640;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-7);
  text-wrap: balance;
}

.case-big {
  margin: 0 0 var(--sc-8);
  color: var(--sc-ink-soft);
}
.case-num {
  font-family: var(--sc-font-mono);
  font-weight: 500;
  font-size: var(--sc-t-xl);
  color: var(--sc-ink);
  margin-right: 0.4em;
  font-variant-numeric: tabular-nums;
}

.case-block {
  border-top: 1px solid var(--sc-hairline-strong);
  padding-top: var(--sc-5);
  margin-bottom: var(--sc-8);
}
.case-pain { max-width: 60ch; color: var(--sc-ink); text-wrap: pretty; margin: 0; }

.case-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sc-7);
}
.case-cols > div { min-width: 0; }
.case-cols .case-label { margin-bottom: var(--sc-3); }

.case-list { list-style: none; margin: 0; padding: 0; }
.case-list li {
  padding-block: var(--sc-3);
  border-top: 1px solid var(--sc-hairline);
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.case-list li:first-child { border-top: 0; padding-top: 0; }
.case-list--after li { color: var(--sc-ink); }
.case-list--after li::before {
  content: "";
  display: inline-block;
  width: 0.55em; height: 0.55em;
  margin-right: 0.55em;
  border-radius: 50%;
  background: color-mix(in oklab, var(--sc-accent) 24%, transparent);
  border: 1.5px solid var(--sc-accent);
}

.case-timeline { margin: 0; }
.case-timeline > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--sc-5);
  padding-block: var(--sc-3);
  border-top: 1px solid var(--sc-hairline);
}
.case-timeline > div:first-child { border-top: 0; padding-top: 0; }
.case-timeline dt {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.05em;
  color: var(--sc-ink-soft);
  padding-top: 0.2em;
}
.case-timeline dd { margin: 0; }

.case-close {
  border-top: 1px solid var(--sc-hairline-strong);
  padding-top: var(--sc-7);
  display: grid;
  justify-items: start;
  gap: var(--sc-4);
}
.case-close p { margin: 0; color: var(--sc-ink-soft); }
.case-cta {
  font-family: var(--sc-font-display);
  font-weight: 560;
  font-size: var(--sc-t-xl);
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  text-decoration: underline var(--sc-accent) 2px;
  text-underline-offset: 0.18em;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.case-cta:hover { color: var(--sc-accent); }
.case-back {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}

.case-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--sc-4);
  padding: var(--sc-5) var(--sc-gutter);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}

/* work index */
.work-index { display: grid; margin-bottom: var(--sc-8); }
.work-row {
  display: block;
  padding-block: var(--sc-6);
  border-top: 1px solid var(--sc-hairline-strong);
  text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.work-row:hover h2 { color: var(--sc-accent); }
.work-row h2 {
  font-family: var(--sc-font-display);
  font-weight: 560;
  font-size: var(--sc-t-xl);
  line-height: 1.2;
  letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-3);
  max-width: 30ch;
  text-wrap: balance;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.work-row__stat { margin: 0; color: var(--sc-ink-soft); }
.work-row__stat .case-num { font-size: var(--sc-t-lg); }

@media (max-width: 700px) {
  .case-cols { grid-template-columns: 1fr; gap: var(--sc-6); }
  .case-timeline > div { grid-template-columns: 5.5rem 1fr; gap: var(--sc-4); }
}