/* Case study: one photograph to an AR asset.
   Reuses the house palette from style.css. The one new idea is the step strip,
   where each artefact sits under the step that produced it, at the same size, so
   the reader can see what each stage actually changed. */

.case {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) 3rem;
}

.case h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  margin: 0.6rem 0 1rem;
}

.case .eyebrow { color: var(--meta); }

.case .lede {
  font-size: 1.05rem;
  color: #C9C3B8;
  max-width: 46ch;
  margin: 0 0 1rem;
}

/* the strip: four stages, same frame size, so the change is legible */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 2.5rem 0;
}

.stage-card {
  background: var(--ink);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.stage-card figure {
  margin: 0;
  aspect-ratio: 1;
  background: var(--stage);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.stage-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.stage-card .body {
  padding: 0.9rem 1rem 1.2rem;
  border-top: 1px solid var(--rule);
}

.stage-card .n {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--mark-text);
}

.stage-card h2 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.98rem;
  margin: 0.3rem 0 0.35rem;
}

.stage-card p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--meta);
}

.stage-card .fact {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--meta);
}

/* the result, big, next to the photograph it came from */
.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin: 3rem 0 0;
}

.result .stage {
  background: radial-gradient(115% 85% at 50% 18%, var(--stage) 0%, var(--stage-2) 62%, #5E5E5C 100%);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
}

.result model-viewer {
  width: 100%;
  height: 100%;
  --progress-bar-color: var(--mark);
}

.compare {
  border: 1px solid var(--rule);
}

.compare img {
  width: 100%;
  height: auto;              /* the height attribute is a hint; do not let it stretch */
  display: block;
  border-bottom: 1px solid var(--rule);
}

.compare .cap {
  padding: 0.7rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}

.case .note {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.case .note h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 1rem;
}

.case .note p {
  color: #C9C3B8;
  max-width: 62ch;
  margin: 0 0 1rem;
}

.case .note ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}

.case .note li {
  color: #C9C3B8;
  padding: 0.65rem 0 0.65rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 0.92rem;
}

.case .note li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 6px;
  height: 6px;
  background: var(--mark);
}

@media (max-width: 820px) {
  .result { grid-template-columns: 1fr; }
  .result .stage { aspect-ratio: 1 / 1; }
}