/* ============================================================
   GROWMARK — a case's whole gallery, over a service page
   (js/case-gallery.js). A dark sheet that rises over the page: the
   case's name and line along the top, then every picture of the case
   in rows of one height, as the home's work section showed them
   before the reel. The row rules are the home's own (css/sections.css
   .work-case*), repeated here since the service pages do not load it.
   ============================================================ */

html.cg-open{overflow:hidden}

.cg{
  position:fixed;
  inset:0;
  z-index:400;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#0a0a0a;
  color:#fafaf8;
  translate:0 100%;
  transition:translate .7s var(--ease-soft);
}
.cg.is-open{translate:none}
.cg[hidden]{display:none}

/* the bar: name and line on the left, the way out on the right */
.cg__bar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:clamp(18px,2.4vw,32px) clamp(8px,1vw,16px) clamp(14px,1.6vw,22px);
  padding-inline:max(clamp(16px,1.6vw,24px),env(safe-area-inset-left,0px)) max(clamp(16px,1.6vw,24px),env(safe-area-inset-right,0px));
  background:linear-gradient(#0a0a0a 62%,rgba(10,10,10,0));
}
.cg__title{
  margin:0;
  font-size:clamp(22px,2.4vw,36px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.025em;
}
.cg__line{
  margin:.35em 0 0;
  font-size:clamp(13px,1.05vw,16px);
  letter-spacing:-.01em;
  color:rgba(250,250,248,.62);
}
.cg__close{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(250,250,248,.22);
  background:none;
  color:inherit;
  font:inherit;
  font-size:14px;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.cg__close svg{width:12px;height:12px}
.cg__close:hover,.cg__close:focus-visible{background:rgba(250,250,248,.08);border-color:rgba(250,250,248,.45)}
.cg__close:focus-visible{outline:2px solid #fff;outline-offset:3px}

.cg__wait{
  margin:0;
  padding:30vh 0;
  text-align:center;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(250,250,248,.45);
}

/* the rows come up one after another as the sheet settles */
@keyframes cg-row{from{opacity:0;translate:0 40px}}
.cg__body.is-in .work-case__row{animation:cg-row .9s var(--ease-soft) calc(.15s + var(--i,0) * 80ms) both}

/* the home's rows (css/sections.css), for the service pages */
.cg .work-case{
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1vw,16px);
  padding:0 clamp(8px,1vw,16px) clamp(8px,1vw,16px);
}
.cg .work-case__row{display:flex;gap:clamp(8px,1vw,16px)}
.cg .work-case__fig{
  position:relative;
  flex:var(--a) 1 0;
  min-width:0;
  aspect-ratio:var(--a);
  margin:0;
  overflow:hidden;
  background:#151514;
}
.cg .work-case__fig > img:first-child{display:block;width:100%;height:100%;object-fit:cover}
.cg .work-case__scroll{position:absolute;inset:0;overflow:hidden}
.cg .work-case__scroll > .work-case__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the live storefront, drawn at a desktop width and scaled to the frame
   (--k); here it is the visitor's to use straight away */
.cg .work-case__scroll > iframe{
  position:absolute;left:0;top:0;width:1440px;height:900px;border:0;
  transform-origin:0 0;transform:scale(var(--k,.5));
  background:transparent;
}
.cg .case__word{position:absolute;width:auto;height:auto;pointer-events:none}
.cg .case__word--architectural{left:4%;top:3.5%;width:92%;opacity:.88}
.cg .case__word--aristocratic{left:4%;bottom:3%;width:89%;filter:invert(1) sepia(.18);opacity:.9}
/* a case's colour palette (The Sea Maris), drawn as its own picture:
   three swatches over two wide bars, filling the frame like the
   pictures beside it, the sheet's black between them */
.cg .case__palette{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:1fr 1fr;
  gap:clamp(6px,.7vw,10px);
  background:none;
}
.cg .case__swatch{
  grid-column:span 2;
  display:flex;
  align-items:flex-end;
  min-width:0;
  padding:clamp(10px,1.2vw,18px);
  color:#fff;
  font-size:clamp(11px,.95vw,14px);
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.cg .case__swatch--wide{grid-column:span 3}
.cg .case__swatch--light{color:#151514}
@media (max-width:640px){
  .cg .work-case__row{flex-wrap:wrap}
  .cg .work-case__fig{flex:1 1 100%}
  .cg .work-case__fig[style*="--a:1.0000"]{flex:1 1 calc(50% - 8px)}
}

@media (prefers-reduced-motion:reduce){
  .cg{transition:none}
  .cg__body.is-in .work-case__row{animation:none}
}