/* Case study pages (case/*.html), loaded last.
   Frame = the site's nav pills, pixel title, paper and closer. Everything else is the project's: the facts, and inside .cs the original case study, with its own fonts, layout, colour and imagery.
   On .title: --n = letters in the longest line, so the title always fits. */
main { --gut: clamp(16px, 5.625vw, 108px); }
.case-head { max-width: none; padding-inline: var(--gut); padding-bottom: 40px; }
.case-head .title { width: fit-content; margin: 48px 0 0; padding-right: .15em; font-size: min((100vw - 2 * var(--gut)) / var(--n) / .66, 240px); }

/* The facts are frame, like the nav pills: site mono, dashed outline */
.case-facts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 32px; font-size: 18px; line-height: 1.35; }
.case-facts div { display: flex; gap: .6em; max-width: 100%; padding: 9px 20px; border: 1px dashed var(--ink); border-radius: 26px; }
.case-facts dt { flex: none; font-weight: 500; }
.case-facts dd { margin: 0; }

/* Lead film: a muted loop, full width, like the homepage reel */
.loop { --u: 1px; position: relative; background: #000; }
.loop video { display: block; width: 100%; height: auto; }
.loop:has(.reel-ui) video { cursor: pointer; }
.loop .reel-ui button { cursor: pointer; }
.loop.loud .off { display: none; }
.loop.loud .on { display: block; }

/* The originals sit straight on the paper, wherever their own ground was paper or white */
.cs:not(.dark) { background: none; }
.cs .bg-paper, .cs .off, .cs .cream { background: none; }
.cs :is(figure, .win) { min-width: 0; max-width: 100%; }

/* SphereHub, From typing to tapping: drag between the form and the screen */
.cmp { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 56px; }
.cmp-l { font-size: 16px; }
.cmp-f { position: relative; width: min(340px, 72vw); --x: 50%; }
.cs .cmp .device { width: 100%; }
.cmp-a { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.cs .cmp-a .oldform { top: 40px; transform: scale(var(--r, .872)); transform-origin: 0 0; }
.cs .device .scr .cmp-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.cmp-h { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--blue, #5D4AE7); pointer-events: none; }
.cmp-h::after { content: "\2194"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: inherit; color: #fff; font: 20px / 1 var(--mono); }
.cmp input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cmp-f:has(input:focus-visible) .cmp-h::after { outline: 2px solid #000; outline-offset: 2px; }

/* Bing Bong's second deck, slides stacked full width */
.cs .deck.v2 { min-height: 0; padding: 104px 0 0; }
.cs .v2s { margin-top: 40px; }
.cs .v2s img { display: block; width: 100%; height: auto; }

/* MVAR and VoxCreative have no Gibbon page: an intro, then the work edge to edge */
.lead { padding: 0 var(--gut) 40px; }
.lead .prose { text-transform: none; }
.pile img, .spots img, .spots video { display: block; width: 100%; height: auto; }
.spots { background: #000; }
.trip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }

/* Closer: one credit line, the next project large, the email under it */
.case-foot { max-width: none; padding: 64px var(--gut) 96px; }
.case-foot .credit { max-width: 80ch; margin-bottom: 56px; font-size: 16px; line-height: 1.5; color: var(--grey); }
.case-foot .lbl { font-size: 16px; color: var(--grey); }
.case-foot .to { display: inline-block; margin: 12px 0 32px; padding-right: .15em; font: clamp(56px, 9vw, 160px) / 1 "CS Sargent Pixel", serif; color: var(--blue); transform-origin: left center; transition: scale .18s; }
.case-foot .to:hover { scale: 1.03; }
.case-foot .mail { display: block; width: fit-content; font-size: min((100vw - 2 * var(--gut)) / 25 / .62, 24px); line-height: 1.3; }
.case-foot .mail:hover { color: var(--blue); }

@media (max-width: 900px) {
  .case-facts { font-size: 16px; }
  .trip { grid-template-columns: minmax(0, 1fr); }
  .cmp { gap: 8px; }
  .cmp-l { writing-mode: vertical-rl; font-size: 14px; }
  .case-foot { padding-block: 64px; }
}