/* ==========================================================================
   Case study pages. Loaded after site.css; uses its tokens only.
   ========================================================================== */

.case-hero { padding: clamp(32px, 5vw, 72px) var(--edge) 0; }
.case-title {
  margin: 14px 0 0;
  font-size: var(--step-4); font-weight: 800; line-height: .86; letter-spacing: -.055em;
}
.case-dek {
  margin: 18px 0 0; max-width: 24ch;
  font-size: var(--step-2); line-height: 1.08; letter-spacing: -.02em;
}
.case-dek em { color: var(--gold-ink); }

.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  margin: clamp(32px, 5vw, 64px) 0 0; padding: 18px 0;
  border-block: 1px solid var(--rule);
}
.facts dt { color: var(--gold-ink); margin-bottom: 6px; }
.facts dd { margin: 0; text-transform: none; letter-spacing: .01em; font-size: .82rem; color: var(--ink); }

.case-plate { margin: clamp(32px, 5vw, 64px) 0 0; }
.case-plate img { width: 100%; height: auto; }
.case-plate-inset { max-width: 1100px; margin-left: auto; margin-right: auto; }

.case-block { padding: var(--section) var(--edge) 0; }
.case-block > .section-num { margin-bottom: 18px; }
.case-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.case-h {
  grid-column: 1 / span 6; margin: 0;
  font-size: var(--step-3); font-weight: 800; line-height: .95; letter-spacing: -.045em;
  text-wrap: balance;
}
.case-h em { color: var(--gold-ink); letter-spacing: -.02em; }
.case-h-wide { max-width: 18ch; margin-bottom: clamp(32px, 5vw, 64px); }
.case-body { grid-column: 8 / span 5; }
.case-body p { margin: 0 0 1.1em; max-width: 56ch; }
.case-body p:last-child { margin-bottom: 0; }

/* formats, drawn rather than photographed */
.formats {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 4vw, 64px);
  margin-top: clamp(40px, 6vw, 80px); padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--rule); background: var(--ground-2);
}
.frame { margin: 0; text-align: center; }
.frame > div {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 10px; border: 1.5px solid var(--gold); background: rgba(212, 169, 79, .05);
}
.f-9x16 > div { width: clamp(90px, 13vw, 180px); aspect-ratio: 9 / 16; }
.f-1x1  > div { width: clamp(110px, 16vw, 230px); aspect-ratio: 1; }
.f-16x9 > div { width: clamp(150px, 26vw, 400px); aspect-ratio: 16 / 9; }
.frame-cap { font-family: var(--display); font-weight: 800; font-size: clamp(.7rem, 1.2vw, 1.05rem); line-height: 1; text-align: left; }
.frame-bar { height: 6px; width: 85%; background: var(--ink-2); opacity: .5; }
.frame-bar.short { width: 55%; }
.frame figcaption { margin-top: 12px; color: var(--ink-2); font-size: .68rem; }

/* principles */
.principles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--gold);
}
.principles li { padding: 24px 24px 32px 0; border-bottom: 1px solid var(--rule); }
.principles li:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid var(--rule); }
.principles span { color: var(--gold-ink); }
.principles h3 { margin: 10px 0 8px; font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; }
.principles p { margin: 0; color: var(--ink-2); max-width: 32ch; }

/* rebrand */
.rebrand {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap);
  margin-top: clamp(40px, 6vw, 80px);
}
.rebrand-k { margin: 0 0 14px; color: var(--gold-ink); }
.rebrand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rebrand-before { grid-template-columns: repeat(2, 1fr); }
.rebrand-before img { filter: saturate(.75); }

/* takeaway */
.take { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gold); }
.take li { padding: 20px 0; border-bottom: 1px solid var(--rule); font-size: var(--step-1); line-height: 1.3; max-width: 60ch; }
.take b { color: var(--gold-ink); font-weight: 700; }

/* next */
.case-next {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap);
  padding: var(--section) var(--edge);
}
.case-next .door { min-height: 180px; }
.door-soon { border-style: dashed; border-color: var(--rule); color: var(--ink-2); cursor: default; }
.door-soon:hover { background-size: 100% 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .case-h, .case-body { grid-column: 1 / -1; }
  .principles { grid-template-columns: 1fr 1fr; }
  .principles li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .principles li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule); }
  .rebrand { grid-template-columns: 1fr; }
  .rebrand-grid { grid-template-columns: repeat(4, 1fr); }
  .rebrand-before { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .facts, .principles, .case-next { grid-template-columns: 1fr; }
  .principles li:nth-child(even) { padding-left: 0; border-left: 0; }
  .rebrand-grid { grid-template-columns: repeat(2, 1fr); }
  .rebrand-before { grid-template-columns: repeat(2, 1fr); }
  .formats { flex-wrap: wrap; }
}

/* ---------- pieces for the product case studies ---------- */
.case-live { display: inline-block; margin-top: 22px; color: var(--gold-ink); text-decoration: none; font-weight: 600; }
.case-live:hover, .case-live:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: clamp(40px, 6vw, 80px); }
.case-pair figure { margin: 0; }
.case-pair img { width: 100%; height: auto; }

.decisions { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gold); counter-reset: d; }
.decisions li {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  padding: 24px 0; border-bottom: 1px solid var(--rule); counter-increment: d;
}
.decisions h3 { grid-column: 1 / span 5; margin: 0; font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.decisions h3::before { content: counter(d, decimal-leading-zero); display: block; margin-bottom: 8px; font: 600 .7rem/1 var(--mono); letter-spacing: .06em; color: var(--gold-ink); }
.decisions p { grid-column: 6 / span 7; margin: 0; color: var(--ink-2); }
.decisions b { color: var(--ink); font-weight: 600; }

.broke { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.broke article { padding: 22px; border: 1px solid var(--rule); background: var(--ground-2); }
.broke .mono { color: var(--gold-ink); margin: 0 0 12px; }
.broke h3 { margin: 0 0 12px; font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.broke p { margin: 0 0 10px; color: var(--ink-2); }
.broke p:last-child { margin-bottom: 0; }
.broke strong { color: var(--ink); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--gold); }
.stats div { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--rule); }
.stats div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.stats b { display: block; font-size: var(--step-3); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--gold-ink); }
.stats span { display: block; margin-top: 10px; color: var(--ink-2); max-width: 26ch; }

.status-note { margin-top: clamp(28px, 4vw, 48px); padding: 20px 22px; border-left: 3px solid var(--gold); background: var(--ground-2); max-width: 70ch; }
.status-note p { margin: 0; }
.status-note .mono { color: var(--gold-ink); margin-bottom: 8px; }

@media (max-width: 900px) {
  .decisions h3, .decisions p { grid-column: 1 / -1; }
  .broke { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .case-pair, .stats { grid-template-columns: 1fr; }
  .stats div + div { padding-left: 0; border-left: 0; }
}

/* ---------- click-to-play video (Vimeo loads only on press) ---------- */
.vf { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; color: var(--ink); text-decoration: none; }
.vf img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .6s ease; }
.vf::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(10, 9, 7, 0) 30%, rgba(10, 9, 7, .45) 100%); pointer-events: none; }
.vf-play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: clamp(64px, 8vw, 104px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 10px rgba(212, 169, 79, .18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.vf-play::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .62em 0 .62em 1.05em; border-color: transparent transparent transparent #0a0907;
  font-size: clamp(14px, 1.7vw, 22px);
}
.vf-label { position: absolute; left: 50%; bottom: clamp(14px, 3vw, 32px); z-index: 1; transform: translateX(-50%); padding: 7px 12px; background: rgba(10, 9, 7, .78); border: 1px solid var(--gold-deep); color: var(--gold-ink); white-space: nowrap; }
.vf:hover .vf-play, .vf:focus-visible .vf-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 16px rgba(212, 169, 79, .22); }
.vf:hover img, .vf:focus-visible img { transform: scale(1.015); filter: brightness(1.08); }
.vf-on iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vf-on::after { display: none; }
@media (prefers-reduced-motion: reduce) { .vf img, .vf-play { transition: none; } }