/* Case study pages. Each page sets --c-bg, --c-fg, --c-ac and --c-ac-ink from the client's own colors. */
.page-case{--c-bg:var(--blue);--c-fg:var(--paper);--c-ac:var(--yellow);--c-ac-ink:var(--ink)}

/* ---------- header ---------- */
.chead{position:relative;padding:clamp(130px,16vh,170px) 0 clamp(170px,17vw,260px);background:var(--c-bg);color:var(--c-fg);overflow:hidden;isolation:isolate}
.chead__dots{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(color-mix(in srgb,var(--c-fg) 16%,transparent) 1.2px,transparent 1.6px) 0 0/30px 30px;-webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 95%);mask-image:linear-gradient(180deg,#000 25%,transparent 95%)}
.chead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(42% 60% at 88% 8%,color-mix(in srgb,var(--c-ac) 30%,transparent),transparent 70%)}
.chead__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,4vw,56px);opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}
.is-loaded .chead__top{opacity:1;transform:none}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:600;font-size:.92rem}
.crumbs a{color:inherit;text-decoration:none;opacity:.75;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:opacity .3s,background-size .4s var(--ease)}
.crumbs a:hover{opacity:1;background-size:100% 1.5px}
.crumbs svg{width:14px;height:14px;opacity:.55}
.chead__title{max-width:100%;font-size:clamp(3.6rem,12vw,12.5rem);font-weight:800;letter-spacing:-.055em;line-height:.86;font-variation-settings:"opsz" 96;overflow-wrap:break-word}
.chead__title--long{font-size:clamp(3rem,8.2vw,8.4rem)}
.chead__lede{max-width:20em;margin-top:clamp(18px,2.6vw,30px);font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.1;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .55s,transform 1s var(--ease) .55s}
.chead__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 32px;max-width:1040px;margin-top:clamp(34px,5vw,64px);padding-top:22px;border-top:1px solid color-mix(in srgb,var(--c-fg) 28%,transparent);opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .75s,transform 1s var(--ease) .75s}
.is-loaded .chead__lede,.is-loaded .chead__meta{opacity:1;transform:none}
.chead__meta dt{margin-bottom:6px;font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.chead__meta dd{font-weight:500;line-height:1.4}
.chead .pop{color:var(--c-ac)}
.chead .pop:nth-child(odd){color:var(--c-fg)}

/* cover, overlapping the header */
.ccover{position:relative;z-index:3;margin-top:calc(clamp(120px,13vw,210px) * -1)}
.ccover__fig{position:relative;margin:0;aspect-ratio:16/9;max-height:86vh;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);box-shadow:0 60px 90px -50px rgba(11,13,61,.55)}
.ccover__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.8s var(--ease) .2s}
.is-loaded .ccover__fig img{transform:scale(1.1)}
.ccover__award{position:absolute;top:clamp(14px,2vw,24px);left:clamp(14px,2vw,24px);display:inline-flex;align-items:center;gap:.45em;padding:.5em 1em;border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:700;font-size:.86rem;transform:rotate(-4deg);box-shadow:0 12px 24px -12px rgba(0,0,0,.55)}
.ccover__award svg{width:.95em;height:.95em;color:var(--blue)}

/* ---------- story ---------- */
.cstory{padding:var(--section) 0 calc(var(--section) * .7)}
.cstory__grid{display:grid;grid-template-columns:minmax(240px,.8fr) 2fr;align-items:start;gap:clamp(36px,6vw,110px)}
.page-case .kicker span{background:var(--c-bg);color:var(--c-fg)}
.cfacts{position:sticky;top:110px}
.cfacts h3,.cfacts .cfacts__h{margin:0 0 14px;font-size:1.35rem;letter-spacing:-.02em}
.cfacts__chips{display:flex;flex-wrap:wrap;gap:8px}
.cfacts__chips li{padding:.45em .95em;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:500;font-size:.92rem;transition:background .3s,color .3s,box-shadow .3s}
.cfacts__chips li:hover{background:var(--c-bg);color:var(--c-fg);box-shadow:none}
.cfacts__awards{margin-top:32px}
.cfacts__awards li{display:flex;align-items:flex-start;gap:.6em;padding:.7em 0;border-top:1px solid var(--line);font-weight:500}
.cfacts__awards svg{flex:none;width:1em;height:1em;margin-top:.25em;color:var(--blue)}
.cstory__text{max-width:40em}
.cstory__big{margin-bottom:.9em;font-family:var(--display);font-weight:560;font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.15;letter-spacing:-.025em;font-variation-settings:"opsz" 60}
.cstory__text p:not(.cstory__big){max-width:34em;margin-bottom:1em;color:var(--muted);font-size:clamp(1.05rem,1.3vw,1.25rem)}

/* ---------- gallery ---------- */
.cgallery{padding-bottom:var(--section);background:var(--cg-bg,transparent);color:var(--cg-fg,inherit)}
.cgallery[style*="--cg-bg"]{padding-top:calc(var(--section) * .6)}
.cgallery .kicker{margin-bottom:clamp(24px,3vw,40px)}
.cg{display:flex;flex-direction:column;gap:var(--cg-gap,clamp(12px,1.6vw,22px))}
.cg__row{display:grid;gap:var(--cg-gap,clamp(12px,1.6vw,22px))}
.cg__row--pair{grid-template-columns:var(--cols,1fr 1fr);align-items:stretch}
.cg__row--pair .cg__open{height:100%}
.cg__row--pair img{height:100%;object-fit:cover}
.cg__fig{margin:0;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:var(--paper-2)}
.cg__open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.cg__open:focus-visible{outline-offset:-4px}
.cg__fig img{display:block;width:100%;height:auto;transition:transform 1s var(--ease)}
.cg__open:hover img{transform:scale(1.025)}
.cg__fig--video{background:#000}
.cg__fig--video video{display:block;width:100%;height:auto;max-height:86vh;object-fit:cover}
/* motion from Behance: the whole frame shows, however tall it is */
.cg__fig--motion{background:var(--paper-2)}
.cg__fig--motion video{object-fit:contain;max-height:min(86vh,1100px);margin-inline:auto;width:auto;max-width:100%}
.cg__fig--embed{position:relative;background:#000}
.cg__fig--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- next project ---------- */
.cnext{padding-bottom:calc(var(--section) * .45)}
.cnext__link{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,40%);grid-template-areas:"label media" "name media" "ind media";grid-template-rows:auto 1fr auto;column-gap:clamp(24px,4vw,64px);min-height:clamp(320px,34vw,480px);padding:clamp(28px,4.5vw,64px);border-radius:var(--r-lg);background:var(--n-bg);color:var(--n-fg);text-decoration:none;overflow:hidden;isolation:isolate}
.cnext__label{grid-area:label;font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.cnext__arr{grid-area:label;justify-self:end;width:48px;height:48px;padding:12px;border-radius:50%;background:var(--n-fg);color:var(--n-bg);transition:transform .5s var(--ease)}
.cnext__name{grid-area:name;align-self:end;font-family:var(--display);font-weight:800;font-size:clamp(3rem,7.6vw,7.4rem);line-height:.88;letter-spacing:-.055em;overflow-wrap:break-word;transition:transform .7s var(--ease)}
.cnext__ind{grid-area:ind;margin-top:12px;font-weight:500;opacity:.75}
.cnext__media{grid-area:media;align-self:center;aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transform:rotate(4deg);transition:transform .9s var(--spring)}
.cnext__media img{width:100%;height:100%;object-fit:cover}
.cnext__link:hover .cnext__name{transform:translateX(12px)}
.cnext__link:hover .cnext__media{transform:rotate(-2deg) scale(1.04)}
.cnext__link:hover .cnext__arr{transform:rotate(45deg)}
.cnext__all{margin-top:22px;text-align:center}
.cnext__all .btn--ghost{--hover:var(--ink)}
.cnext__all .btn--ghost:hover{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.page-case .wcta{margin-top:0}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:72px 84px;background:rgba(11,13,61,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox__stage{display:grid;place-items:center;width:100%;height:100%;margin:0}
.lightbox__stage img{max-width:100%;max-height:calc(100vh - 144px);width:auto;height:auto;border-radius:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);transition:opacity .25s}
.lightbox__btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:rgba(245,242,234,.12);color:var(--paper);cursor:pointer;transition:background .3s,color .3s,transform .4s var(--spring)}
.lightbox__btn:hover{background:var(--yellow);color:var(--ink);transform:scale(1.08)}
.lightbox__btn svg{width:22px;height:22px}
.lightbox__close{top:18px;right:18px}
.lightbox__prev{left:18px;top:50%;margin-top:-26px}
.lightbox__prev svg{transform:rotate(180deg)}
.lightbox__next{right:18px;top:50%;margin-top:-26px}
.lightbox.is-single .lightbox__prev,.lightbox.is-single .lightbox__next{display:none}
.lightbox__count{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--on-dark);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .chead{padding-top:120px}
  .chead__title{font-size:min(17vw,7rem)}
  .chead__title--long{font-size:min(12vw,5rem)}
  .ccover{margin-top:-110px}
  .ccover__fig{aspect-ratio:4/3}
  .cstory__grid{grid-template-columns:1fr}
  .cfacts{position:static;order:2}
  .cnext__link{grid-template-columns:1fr;grid-template-areas:"media" "label" "name" "ind";grid-template-rows:auto;row-gap:10px;min-height:0}
  .cnext__media{margin-bottom:22px;transform:rotate(2deg)}
  .cnext__arr{width:42px;height:42px;padding:10px}
  .lightbox{padding:64px 12px 96px}
  .lightbox__stage img{max-height:calc(100vh - 170px)}
  .lightbox__prev,.lightbox__next{top:auto;bottom:18px;margin-top:0}
  .lightbox__prev{left:calc(50% - 120px)}
  .lightbox__next{right:calc(50% - 120px)}
  .lightbox__count{bottom:34px}
}
@media (max-width:560px){
  .cg__row--pair{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ccover__fig img{transform:none;transition:none}
}

/* ---------- project editor blocks: narrow pictures, captions, text, YouTube ---------- */
.cg__row--narrow{width:100%;max-width:min(100%,880px);margin-inline:auto}
.cg__cap{padding:10px 14px 12px;font-size:.92rem;color:var(--muted);background:var(--paper)}
.cgallery[style*="--cg-bg"] .cg__cap{background:transparent;color:inherit;opacity:.75}
.cg__row--text{padding-block:clamp(8px,2vw,28px)}
.cg__text{width:100%;max-width:44em;margin-inline:auto;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.65}
.cg__text p+p{margin-top:.9em}
.cg__text--big{max-width:28em;font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.18;letter-spacing:-.02em}
.cg__text--center{text-align:center}
.cfacts__more{margin-top:32px}
.cfacts__more .cfacts__chips{margin-top:0}
.cgallery[style*="--cg-fg"] .kicker{color:var(--cg-fg);opacity:.8}
.cgallery[style*="--cg-bg"] .cg__fig:has(.cg__cap){background:transparent}
.cgallery[style*="--cg-bg"] .cg__fig:has(.cg__cap) img{border-radius:clamp(14px,1.6vw,22px)}