/* Project cover — five layouts chosen per project (partials/work/cover.php): full · split · framed · screen · plain.
   Legibility is designed in, never left to the photograph: on a picture, the small labels (breadcrumb, sector line,
   disciplines) sit on solid ink plates and the title zone sits on an ink fade that is solid where the type is (mask
   fades over a solid --ink layer — no gradient fills). The other layouts set the type on ink or paper beside the
   picture. */
.wrk-cover{position:relative;isolation:isolate;overflow:hidden}
.wrk-cover__in{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,6vh,72px);
  padding-top:calc(var(--nav-h) + clamp(36px,5vh,64px));padding-bottom:clamp(26px,3.6vw,44px)}
.wrk-cover__media{position:relative;overflow:hidden;background:var(--ink-2)}
.wrk-cover__pic{position:absolute;inset:0}
.wrk-cover__pic picture,.wrk-cover__pic img,.wrk-cover__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.wrk-cover__pic img{animation:wrk-cover-in 1.8s var(--e) both}
.wrk-cover__video{z-index:1}
@keyframes wrk-cover-in{from{transform:scale(1.07)}to{transform:none}}

/* ---------- the parts every layout shares ---------- */
.wrk-cover__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.wrk-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.wrk-crumb li{display:flex;align-items:center;gap:12px}
.wrk-crumb li+li::before{content:"/";color:var(--faint)}
.wrk-crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--muted);text-decoration:none}
.wrk-crumb a:hover,.wrk-crumb [aria-current]{color:var(--ink)}
.wrk-cover__flags{display:flex;flex-wrap:wrap;gap:8px}
.wrk-cover__body{position:relative}
.wrk-cover__say{display:flex;flex-direction:column;gap:18px;max-width:1040px}
.wrk-cover__eyebrow{display:flex;flex-wrap:wrap;gap:6px 0;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wrk-cover__eyebrow span+span::before{content:"·";margin:0 .9em;color:var(--faint)}
.wrk-cover__t{max-width:17ch;color:var(--ink);text-wrap:balance}
.wrk-cover__who{max-width:52ch;font-family:var(--f-h);font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.4;letter-spacing:-.008em;color:var(--muted)}
.wrk-cover__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:20px;border-top:1px solid var(--line)}
.wrk-cover__down{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:var(--t-sm);font-weight:500;color:var(--ink);text-decoration:none}
.wrk-cover__arrow{position:relative;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-3);flex:none}
.wrk-cover__arrow::before{content:"";position:absolute;left:50%;top:11px;width:1.6px;height:13px;background:currentColor;transform:translateX(-50%)}
.wrk-cover__arrow::after{content:"";position:absolute;left:50%;top:16px;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(-50%) rotate(45deg)}
.wrk-cover__down:hover .wrk-cover__arrow{animation:wrk-cover-nudge 1s var(--e-io) infinite}
@keyframes wrk-cover-nudge{0%,100%{transform:none}50%{transform:translateY(4px)}}
.wrk-cover__disc{list-style:none;margin:0 0 0 auto;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wrk-cover__disc li{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-3);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.08em;color:var(--muted)}
.wrk-cover__vbtn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 6px;border-radius:var(--r-pill);background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--on-ink-line);font-size:var(--t-xs);font-weight:500;color:var(--on-ink);cursor:pointer}
.wrk-cover__vbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrk-cover__vico{position:relative;width:30px;height:30px;border-radius:50%;background:var(--paper)}
.wrk-cover__vico::before,.wrk-cover__vico::after{content:"";position:absolute;top:10px;width:2.4px;height:10px;background:var(--ink)}
.wrk-cover__vico::before{left:11px}
.wrk-cover__vico::after{left:16px}
.wrk-cover__vbtn.is-held .wrk-cover__vico::before{left:12px;top:9px;width:0;height:0;background:none;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.wrk-cover__vbtn.is-held .wrk-cover__vico::after{display:none}

/* ---------- on ink (full, split): the same parts, light on dark ---------- */
.wrk-cover--full,.wrk-cover--split{background:var(--ink);color:var(--on-ink)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-crumb a{color:var(--on-ink-2)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-crumb a:hover,:is(.wrk-cover--full,.wrk-cover--split) .wrk-crumb [aria-current]{color:var(--on-ink)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-crumb li+li::before{color:var(--on-ink-3)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__eyebrow{color:var(--on-ink-2)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__eyebrow span+span::before{color:var(--on-ink-3)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__t{color:var(--on-ink)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__who{color:var(--on-ink-2)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__foot{border-top-color:var(--on-ink-line)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__down{color:var(--on-ink)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__arrow{box-shadow:inset 0 0 0 1px var(--on-ink-line)}
:is(.wrk-cover--full,.wrk-cover--split) .wrk-cover__disc li{box-shadow:inset 0 0 0 1px var(--on-ink-line);color:var(--on-ink-2)}

/* ---------- full: the picture full bleed ---------- */
.wrk-cover--full{min-height:clamp(620px,94svh,1020px);display:flex}
.wrk-cover--full .wrk-cover__media{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.wrk-cover--full .wrk-cover__pic{inset:-28px 0;will-change:transform}
.wrk-cover--full .wrk-cover__in{min-height:inherit}
/* the title zone: solid ink to just above the client line, fading out above the title */
.wrk-cover--full::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:.84;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 46%,transparent 88%);mask-image:linear-gradient(0deg,#000 0%,#000 46%,transparent 88%)}
.wrk-cover--full::after{content:"";position:absolute;left:0;right:0;top:0;height:min(240px,30%);z-index:-1;background:var(--ink);opacity:.45;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
/* the labels on the photograph get solid plates */
.wrk-cover--full .wrk-crumb ol{padding:0 16px;border-radius:var(--r-pill);background:var(--ink);box-shadow:inset 0 0 0 1px var(--on-ink-line)}
.wrk-cover--full .wrk-cover__eyebrow{align-self:flex-start;padding:7px 14px;border-radius:var(--r-pill);background:var(--ink);box-shadow:inset 0 0 0 1px var(--on-ink-line);color:var(--on-ink)}
.wrk-cover--full .wrk-cover__who{color:var(--on-ink)}
.wrk-cover--full .wrk-cover__t{max-width:19ch}                 /* two lines for most titles, so the type stays in the solid zone */
.wrk-cover--full .wrk-cover__disc li{background:var(--ink);color:var(--on-ink)}

/* ---------- split: the title on ink beside the picture ---------- */
.wrk-cover__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(640px,92svh,980px)}
.wrk-cover--split .wrk-cover__panel{display:flex;min-width:0}
.wrk-cover--split .wrk-cover__in{width:auto;margin:0;flex:1;padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));padding-right:clamp(28px,4vw,72px)}
.wrk-cover--split .wrk-cover__media{min-height:100%}
.wrk-cover--split .wrk-cover__t{font-size:clamp(2.3rem,4.6vw,4.4rem);max-width:13ch}
.wrk-cover--split .wrk-cover__disc{margin-left:0}

/* ---------- framed: on paper, the picture below in a frame the width of the page ---------- */
.wrk-cover--framed{background:var(--paper)}
.wrk-cover--framed .wrk-cover__in{padding-top:var(--bdh-hero-t);padding-bottom:clamp(36px,4vw,60px);gap:clamp(36px,4.6vw,64px)}
.wrk-cover--framed .wrk-cover__say{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:18px;max-width:none;align-items:end}
.wrk-cover--framed .wrk-cover__eyebrow{grid-column:1 / -1}
.wrk-cover--framed .wrk-cover__t{grid-column:1 / span 8;max-width:15ch}
.wrk-cover--framed .wrk-cover__who{grid-column:9 / -1;padding-bottom:.5em}
.wrk-cover__frame{width:min(100% - (var(--gutter) * 2),1520px);margin-inline:auto}
.wrk-cover--framed .wrk-cover__media{aspect-ratio:21 / 9;border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.wrk-cover--framed .wrk-cover__foot{border-top:0;padding-top:clamp(18px,2vw,26px);padding-bottom:clamp(40px,5vw,72px)}

/* ---------- screen: the title on paper beside the project's first screen ---------- */
.wrk-cover--screen{background:var(--paper-2);border-bottom:1px solid var(--line)}
.wrk-cover--screen .wrk-cover__in{padding-top:var(--bdh-hero-t)}
.wrk-cover--screen .wrk-cover__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:48px;align-items:center}
.wrk-cover--screen .wrk-cover__say{grid-column:1 / span 5}
.wrk-cover--screen .wrk-cover__t{font-size:clamp(2.3rem,4.4vw,4.2rem);max-width:12ch}
.wrk-cover__dev{grid-column:7 / -1;margin:0;min-width:0}
.wrk-cover__dev .wrk-dev--phone{max-width:320px;margin-inline:auto}
.wrk-cover__dev .wrk-dev--tablet{max-width:620px;margin-inline:auto}
.wrk-cover__dev .wrk-dev__frame{animation:wrk-cover-rise 1.2s var(--e) both}
@keyframes wrk-cover-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- plain: no picture, no screen ---------- */
.wrk-cover--plain{background:var(--paper);border-bottom:1px solid var(--line)}
.wrk-cover--plain .wrk-cover__in{padding-top:var(--bdh-hero-t);padding-bottom:clamp(40px,5vw,72px);gap:clamp(36px,5vw,64px)}
.wrk-cover--plain .wrk-chip--glass,.wrk-cover--framed .wrk-chip--glass,.wrk-cover--screen .wrk-chip--glass{background:var(--paper-3);box-shadow:none}

@media (max-width:1023px){
  .wrk-cover--screen .wrk-cover__say{grid-column:1 / -1}
  .wrk-cover__dev{grid-column:1 / -1;max-width:720px}
  .wrk-cover--framed .wrk-cover__t{grid-column:1 / -1}
  .wrk-cover--framed .wrk-cover__who{grid-column:1 / span 10;padding-bottom:0}
}
@media (max-width:860px){
  .wrk-cover__disc{margin-left:0;width:100%}
  .wrk-cover__split{grid-template-columns:minmax(0,1fr);min-height:0}
  .wrk-cover--split .wrk-cover__media{order:-1;min-height:0;aspect-ratio:4 / 3}
  .wrk-cover--split .wrk-cover__in{padding:clamp(28px,6vw,44px) var(--gutter) clamp(28px,6vw,40px);gap:clamp(28px,6vw,44px)}
  .wrk-cover--framed .wrk-cover__media{aspect-ratio:4 / 3;border-radius:var(--r-lg)}
}
@media (max-width:640px){
  .wrk-cover--full{min-height:clamp(560px,90svh,820px)}
  .wrk-cover__say{gap:14px}
  .wrk-cover__foot{gap:10px 20px}
  .wrk-cover__disc li{min-height:28px}
  .wrk-cover--framed .wrk-cover__who{grid-column:1 / -1}
  .wrk-cover__frame{width:100%}
  .wrk-cover--framed .wrk-cover__media{border-radius:0;box-shadow:none}
  .wrk-cover__dev .wrk-dev--phone{max-width:240px}
}
@media (prefers-reduced-motion:reduce){
  .wrk-cover__pic img,.wrk-cover__dev .wrk-dev__frame{animation:none}
  .wrk-cover__down:hover .wrk-cover__arrow{animation:none}
}