/* ============================================================
   Case studies as a bento (Liam, October 13, 2026: "yes make the row
   change on the bento and lets dpeloy it"). Eight cells since October 14,
   2026 (Reyal published), one per case, placed by their order in this.raw:
   p1 is the big cell, p2 the tall one, the rest square, so the grid stays
   three rows and still fits a 900px window. p7 was the wide cell while
   there were seven. The logo badge and the result
   figure are the site's own .case-logo and .case-big from home.css, so
   they follow the display face; this file only sizes them per cell.
   Study: _scratch/case-mockups.html. Script: assets/case-bento.js.
   ============================================================ */
.cx-host{position:relative;width:100%;max-width:calc(var(--shell) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

.cx-bento{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:"p1 p1 p2 p3" "p1 p1 p2 p4" "p5 p6 p7 p8";
  /* three rows that, with the heading, fit a 900px-tall window: the height left under the
     heading and the nav, split three ways. Never under 200px, where the small cells' text
     starts to touch, and never over the mockup's 298px */
  grid-auto-rows:clamp(200px,20.6vw,298px);
  grid-auto-rows:clamp(200px,min(20.6vw,calc((100svh - 330px) / 3)),298px)}

.cx-cell{position:relative;display:block;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-c);color:var(--ink);text-decoration:none;transition:border-color .5s var(--ease)}
.cx-cell:hover{border-color:rgba(237,233,225,.32)}

/* the footage: grey and still at rest, colour on the one awake cell */
.cx-m{position:absolute;inset:0;overflow:hidden;filter:saturate(.15) brightness(.42);transform:scale(1.03);
  transition:filter 1.3s var(--ease),transform 2s var(--ease)}
.cx-cell[data-on] .cx-m{filter:none;transform:scale(1)}
.cx-m video,.cx-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cx-cell[data-screen="hedra"] video{object-position:72% 42%}
.cx-cell[data-screen="bustem"] video{object-position:70% 58%}
.cx-cell[data-screen="washtech"] video{object-position:50% 45%}
.cx-cell[data-screen="aetherhaus"] video{object-position:50% 32%}
.cx-feed{display:flex;gap:2px}
.cx-feed > div{position:relative;flex:1;overflow:hidden}
.cx-feed video{object-position:50% 30%}
.cx-stills img{opacity:0;filter:brightness(.8) contrast(1.06);transform:scale(1.04);transition:opacity 1.1s var(--ease),transform 6s linear}
.cx-stills img.cur{opacity:1;transform:scale(1)}

.cx-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(12,11,10,.94) 0%,rgba(12,11,10,.6) 30%,rgba(12,11,10,0) 60%),
             linear-gradient(to bottom,rgba(12,11,10,.6) 0%,rgba(12,11,10,0) 28%)}
.cx-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E")}

.cx-in{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:clamp(16px,1.6vw,26px)}
.cx-top{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}

/* the site's badge, one step smaller in every cell but the big one */
.cx-cell:not(.xl) .case-badge{height:38px;min-width:38px;padding:0 10px}
.cx-cell:not(.xl) .case-badge > div{height:20px;width:20px}
.cx-cell:not(.xl) .case-badge.wm{padding:0 14px}
.cx-cell:not(.xl) .case-badge.wm > div{width:auto;height:15px}
.cx-cell:not(.xl) .case-badge > div[style*="bustem-mark"]{height:38px;width:38px}
.cx-cell:not(.xl) .case-badge.wm > div[style*="hedra-logo"]{height:17px}
.cx-cell:not(.xl) .case-badge.wm > div[style*="collabstr-logo"]{height:19px}
.cx-cell:not(.xl) .case-name{font-size:var(--t-6)}

.cx-creds{margin:0;font-size:var(--t-7);font-weight:500;line-height:1.3;color:var(--ink-2);
  text-shadow:0 1px 14px rgba(12,11,10,.95),0 0 2px rgba(12,11,10,.6)}
.cx-creds span{white-space:nowrap}
.cx-creds span + span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 10px;border-radius:50%;
  background:var(--quiet);vertical-align:middle;transform:translateY(-2px)}
.cx-cell .cx-creds{flex-basis:100%}
.cx-cell.xl .cx-creds{flex-basis:auto;padding-left:var(--s-3);border-left:1px solid var(--edge-3);font-size:var(--t-6)}
.cx-cell.square .cx-creds,.cx-cell.wide .cx-creds{display:none}

/* the figure is .case-big; only its size changes per cell */
.cx-cell .case-big{font-size:clamp(44px,4.1vw,62px)}
.cx-cell .case-big.is-long{font-size:clamp(36px,3.3vw,50px)}
.cx-cell.tall .case-big{font-size:clamp(58px,6vw,96px)}
.cx-cell.xl .case-big{font-size:var(--t-figure);font-size:min(var(--t-figure),14svh)}
.cx-line{margin:8px 0 0;max-width:20ch;font-size:var(--t-6);font-weight:500;line-height:1.14;letter-spacing:-.02em;color:var(--ink-2);text-wrap:balance}
.cx-cell.square .cx-line,.cx-cell.wide .cx-line{font-size:var(--t-7);line-height:1.2}
.cx-cell.xl .cx-line{max-width:17ch;font-size:var(--t-4);line-height:1.06;letter-spacing:-.03em;color:var(--ink)}
.cx-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4)}

/* the site's own Read the case button (.case-read in home.css), on the frosted ground it
   takes over footage */
.cx-cell .case-read{background:rgba(12,11,10,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cx-cell .case-read:hover{background:var(--ink)}
.cx-arr{position:absolute;z-index:3;top:clamp(18px,1.9vw,30px);right:clamp(18px,1.9vw,30px);width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--edge-3);border-radius:50%;font-size:16px;opacity:0;transform:translate(-6px,6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.cx-cell:hover .cx-arr{opacity:1;transform:none}

@media (max-width:900px){
  .cx-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(220px,52vw,320px);
    grid-template-areas:"p1 p1" "p1 p1" "p2 p3" "p2 p4" "p5 p6" "p7 p8"}
  .cx-cell .cx-creds{display:none}
  .cx-cell.xl .cx-creds{display:block}
  .cx-cell.xl .case-big{font-size:clamp(72px,16vw,128px)}
}
@media (max-width:560px){
  .cx-bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;grid-template-areas:"p1" "p2" "p3" "p4" "p5" "p6" "p7" "p8"}
  .cx-cell{aspect-ratio:5/4}
  .cx-cell.xl,.cx-cell.tall{aspect-ratio:4/5}
  .cx-cell .case-big{font-size:clamp(52px,15vw,68px)}
  .cx-cell.xl .case-big{font-size:clamp(64px,19vw,88px)}
  .cx-cell.xl .cx-foot{flex-direction:column;align-items:flex-start}
  .cx-cell.xl .cx-creds{border-left:0;padding-left:0;flex-basis:100%;font-size:var(--t-7)}
  .cx-cell.xl .cx-shade{background:linear-gradient(to top,rgba(12,11,10,.94) 0%,rgba(12,11,10,.6) 30%,rgba(12,11,10,0) 60%),
    linear-gradient(to bottom,rgba(12,11,10,.85) 0%,rgba(12,11,10,0) 36%)}
  .cx-arr{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cx-m,.cx-stills img{transition:none}
}