/* ---- the case page: the project's key picture plain under the fade; then the evidence shown plain: media image-first, the dither on hover; a ruled facts row; copy that changes sides;
   a ruled list of what was made; the next project as a card that resolves on hover. Built on pages.css. ---- */
.hero__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.hero__content .t-display { max-width: 16ch; }
.hero__content .t-lead { max-width: 52ch; }
.crumb { color: inherit; text-decoration: none; }
.crumb:hover { color: var(--text); }

#facts { padding-block: var(--s-7); }
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); }
.case-facts > div { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }

.case-story { display: grid; gap: var(--s-9); }
.case-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: start; }
.case-copy .t-label { grid-column: 1 / 3; padding-top: 0.5em; }
.case-copy .t-h2 { grid-column: 3 / 9; max-width: 24ch; }
.case-copy__body { grid-column: 3 / 9; display: grid; gap: var(--s-3); }
.case-copy__body .t-body { max-width: 62ch; }
.case-copy--right .t-label { grid-column: 5 / 7; }
.case-copy--right .t-h2, .case-copy--right .case-copy__body { grid-column: 7 / 13; }
.case-copy--right .t-h2 { max-width: 20ch; }

.case-media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); align-items: start; }
.case-media--1 .frame { grid-column: 1 / -1; }
.case-media--2 .frame { grid-column: span 6; }
.case-media--3 .frame { grid-column: span 4; }
.frame { margin: 0; display: grid; gap: var(--s-3); }
.frame__box { position: relative; overflow: hidden; background: var(--panel); }
.frame__box img, .frame__box video { display: block; width: 100%; height: auto; }
.frame__box canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: 0; transition: opacity 0.45s var(--ease-out); pointer-events: none; }
.frame:hover .frame__box canvas { opacity: 1; }   /* the evidence shown plain; the dither comes under the pointer */
.frame__cap { color: var(--text-3); }

.case-made { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); }
.case-made .t-label { grid-column: 1 / 3; padding-top: var(--s-3); }
.case-made ul { grid-column: 3 / 11; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); }
.case-made li { padding: var(--s-3) 0; border-top: 1px solid var(--line); max-width: none; }

.case-swatches { grid-column: 3 / 13; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--col-gap); margin-top: var(--s-2); }
.swatch { --cut: 18px; display: grid; align-content: end; justify-items: start; gap: 2px; min-height: 150px; padding: var(--s-4); background: var(--c); color: var(--ink, #fff); font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); text-align: left; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); cursor: copy; transition: transform var(--dur) var(--ease-out); }
.swatch:hover { transform: translateY(-3px); }
.swatch b { font-weight: 400; opacity: 0.72; }
.case-type { grid-column: 3 / 11; display: grid; margin-top: var(--s-2); }
.case-type > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); align-items: baseline; padding: var(--s-3) 0; border-top: 1px solid var(--line); }

#next .container { display: grid; gap: var(--s-5); }
.case-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: center; text-decoration: none; color: inherit; }
.case-next .t-label { grid-column: 1 / 3; align-self: start; padding-top: 0.6em; }
.case-next .t-h1 { grid-column: 3 / 8; }
.case-next .wm { grid-column: 9 / 13; aspect-ratio: 4 / 3; }
.case-all { justify-self: end; }
.wm { position: relative; overflow: hidden; background: var(--panel); text-decoration: none; color: var(--text); }
.wm img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1s var(--ease-out); }
.wm canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: 0; transition: opacity 0.45s var(--ease-out); pointer-events: none; }   /* the next project arrives plain, like a Work tile; the dither comes under the pointer (Owen) */
.case-next .wm:hover canvas { opacity: 1; }
.wm::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 48%, rgba(5, 5, 5, 0.3) 72%, rgba(5, 5, 5, 0.78) 100%); opacity: 1; transition: opacity 0.45s var(--ease-out); }   /* the name gradient only over the picture, never over the dither (Owen) */
.case-next .wm:hover::after { opacity: 0; }
.wm__text { position: absolute; z-index: 2; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); display: grid; gap: var(--s-1); }
.wm__text .t-h3 { font-size: 1.25rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.wm__text .t-label { font-family: var(--font-sans); font-weight: 400; letter-spacing: 0.02em; font-size: var(--t-body); color: var(--text-2); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast), transform var(--dur) var(--ease-osmo); }
.case-next .wm:hover .wm__text .t-label { opacity: 1; transform: translateY(0); }
@media (hover: none) { .wm__text .t-label { opacity: 1; transform: none; } }   /* touch: the line is simply there */
.wm .btn__arrow { position: absolute; z-index: 2; top: var(--s-5); right: var(--s-5); opacity: 0; transform: translate(-6px, 6px); transition: opacity var(--dur-fast), transform 0.25s steps(3, end); }
.case-next .wm:hover .btn__arrow { opacity: 1; transform: translate(0, 0); }
@media (hover: none) { .wm canvas { display: none !important; } .wm::after { opacity: 1 !important; } }

@media (max-width: 1023px) {
  .case-copy .t-label, .case-copy--right .t-label { grid-column: 1 / 4; }
  .case-copy .t-h2, .case-copy__body, .case-copy--right .t-h2, .case-copy--right .case-copy__body, .case-swatches, .case-type { grid-column: 4 / 13; }
  .case-made ul { grid-column: 3 / 13; }
  .case-next .t-h1 { grid-column: 3 / 8; } .case-next .wm { grid-column: 8 / 13; }
}
@media (max-width: 767px) {
  .case-story { gap: var(--s-8); }
  .case-copy > *, .case-copy--right > *, .case-made > *, .case-next > *, .case-swatches, .case-type { grid-column: 1 / -1 !important; }
  .case-media--2 .frame, .case-media--3 .frame { grid-column: 1 / -1; }
  .case-made ul { grid-template-columns: 1fr; }
  .case-next .wm { aspect-ratio: 4 / 3; }
  .case-all { justify-self: start; }
}