/* ============================================================================
   jeanwwd — structure additions (19.09) on tokens.css + kit.css + site.css:
   client pages and the «Also for» line, «How I work», «Process», the year tail,
   closed (restricted) works. No size or colour here that is not a token.
   ========================================================================== */
.sr-dash{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* breadcrumbs, the «Also for <client>» line, the client page */
.crumbs{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2);margin-bottom:var(--s-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.also{margin-top:var(--s-4);font-size:var(--fs-caption);line-height:1.7;color:var(--ink-2);overflow-wrap:anywhere}
.also a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);transition:text-decoration-color var(--t-fast)}
.also a:hover{text-decoration-color:currentColor}
.also__label{color:var(--ink)}
.also small{font-size:var(--fs-small)}
.also__closed{white-space:nowrap}
.also__all{white-space:nowrap}
.also__all .ico{vertical-align:-.1em}
@media (min-width:901px){.meta--5{grid-template-columns:1fr 1fr 1fr .5fr 1.5fr}}
.hero--client .crumbs{margin-bottom:var(--s-4)}
.client__facts{margin-top:var(--s-3);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2)}
.client__live{margin-top:var(--s-2);font-size:var(--fs-caption);display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}
.allworks .btn .ico{margin-right:.2em}

/* year: a grey tail of the caption */
.cap__year{color:var(--ink-2);white-space:nowrap}

/* closed work: the same cell, not a link. The cover is a blurred image (the real cover when it exists, soft grey spots
   until then); the caption stays readable: client, kind · year, the label where a link has its arrow, one teaser phrase. */
.item--closed{cursor:default}
.cover--closed{position:relative}
.cover--closed .blurfill{position:absolute;left:-15%;top:-15%;width:130%;height:130%;max-width:none;object-fit:cover;display:block;background-color:var(--cover);filter:blur(max(14px, calc(30 * var(--u)))) saturate(.6);pointer-events:none;-webkit-user-select:none;user-select:none}
.cap__lock{grid-column:2;grid-row:1;align-self:start;color:var(--ink-2);white-space:nowrap}
.cap__teaser{grid-column:1 / -1;margin-top:var(--s-1);color:var(--ink-2);text-wrap:pretty}

/* «How I work» — masses of wearecollins.com/programs */
.svc{margin-top:var(--s-7)}
.svc__label{margin-bottom:var(--s-2)}
.svc h2{max-width:calc(745 * var(--u));text-wrap:wrap} /* line 1 ends after "a project," at every desktop width: sizes are all in u */
.svc__kinds{margin-top:var(--s-5);max-width:calc(1000 * var(--u));font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);text-wrap:pretty}
.svc__kinds a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:transparent;transition:text-decoration-color var(--t-fast)}
.svc__kinds a:hover,.svc__kinds a:focus-visible{text-decoration-color:currentColor}
.svc__rows{margin-top:var(--s-5);list-style:none;padding:0}
.svc__row{position:relative;display:grid;grid-template-columns:37.5% 1fr auto;column-gap:0;align-items:baseline;padding:var(--s-4) 0;border-bottom:var(--rule-w) solid var(--rule)}
.svc__name{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-heading)}
.svc__text{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2);max-width:calc(620 * var(--u))}
.svc__text::first-letter{text-transform:uppercase}
.svc__price{font-size:var(--fs-caption);padding-left:var(--s-4);white-space:nowrap}
.svc__foot{display:grid;grid-template-columns:37.5% 1fr;align-items:center;margin-top:var(--s-4)}
.svc__foot .btn{grid-column:1;grid-row:1;justify-self:start}
.svc__note{grid-column:2;font-size:var(--fs-caption);line-height:var(--lh-caption);max-width:calc(620 * var(--u));text-wrap:pretty}

/* «Process» — masses of the third screen of matteofabbiani.com */
.proc{margin-top:var(--s-7)}
.ab-sec + .proc,.proc + .ab-sec{margin-top:var(--s-7)}
.proc__head{display:grid;grid-template-columns:1fr 1fr;align-items:end;padding-bottom:var(--s-5);border-bottom:var(--rule-w) solid var(--rule)}
.proc__tag{display:flex;gap:var(--pill-gap);padding-left:calc(121 * var(--u));padding-bottom:.5em}
.proc__tag span{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 max(8px, calc(10 * var(--u)));border-radius:var(--r-pill);box-shadow:inset 0 0 0 var(--rule-w) color-mix(in srgb, var(--ink) 35%, transparent);font-size:var(--fs-small);line-height:1}
.proc__row{--step-w:max(260px, calc(383 * var(--u)));list-style:none;margin:var(--s-5) 0 0;display:flex;gap:max(16px, calc(32 * var(--u)));overflow-x:auto;scrollbar-width:none;padding:0 var(--m-page) var(--s-3) calc(353 * var(--u));scroll-padding:0 calc(353 * var(--u))}
.proc__row::-webkit-scrollbar{display:none}
.proc__row.carousel-root{display:grid;grid-auto-columns:var(--step-w);grid-auto-flow:column;grid-template-rows:auto;max-width:100%;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none;cursor:grab}
.proc__row.carousel-root[has-snap="false"]{scroll-snap-type:none}
.proc__row.carousel-root.is-dragging{cursor:grabbing}
.proc__row.carousel-root .step{scroll-snap-align:start;display:block}
.proc__row:focus-visible{outline:var(--rule-w) solid var(--focus);outline-offset:var(--s-1)}
.step{flex:0 0 var(--step-w);min-width:0;position:relative} /* relative: the hidden dash (.sr-dash, absolute) must stay inside the scroller, or it widens the page */
.step__n{display:block;text-align:center;font-size:var(--fs-caption);line-height:1;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-bottom:var(--s-4)}
.step__pic{aspect-ratio:3 / 2;background:var(--cover);border-radius:var(--r-card);overflow:hidden}
.step__pic img{width:100%;height:100%;object-fit:cover;max-width:none;pointer-events:none}
.step__title{margin-top:var(--s-4);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.step__text{margin-top:var(--s-3);font-size:var(--fs-caption);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.step__text::first-letter{text-transform:uppercase}
.step__pill{margin-top:var(--s-3)}

@media (max-width:900px){
  .svc h2,.svc__kinds{max-width:none}
  .svc h2{text-wrap:balance}
  .svc__row{grid-template-columns:1fr;row-gap:var(--s-1);padding:var(--s-3) 0}
  .svc__price{padding-left:0}
  .svc__foot{grid-template-columns:1fr;row-gap:var(--s-3)}
  .svc__note,.svc__foot .btn{grid-column:1;grid-row:auto}
  .proc__head{grid-template-columns:1fr;row-gap:var(--s-3);padding-bottom:var(--s-4)}
  .proc__tag{padding-left:0;padding-bottom:0}
  /* the steps stand as a vertical list: number | title + text, a rule between; the 3:2 picture shows once it is a real image */
  .proc__row{display:block;overflow:visible;padding:0 var(--m-page);margin-top:0}
  .step{display:grid;grid-template-columns:max(40px, calc(140 * var(--u))) 1fr;column-gap:var(--s-2);padding:var(--s-3) 0;border-bottom:var(--rule-w) solid var(--rule)}
  .step__n{grid-column:1;grid-row:1 / span 3;text-align:left;margin:0;line-height:var(--lh-h3);padding-top:.35em}
  .step__pic{display:none}
  .step__pic.has-img{display:block;grid-column:2;margin-bottom:var(--s-3)}
  .step__title,.step__text,.step__pill{grid-column:2}
  .step__title{margin-top:0}
  .step__text{margin-top:var(--s-1)}
  .also{line-height:1.6}
}

/* a closed card is taller than its neighbours (teaser): cells keep their own height, otherwise a stretched link card
   uncovers its caption swipe layer (.WorksItem-bg waits below the caption) */
.grid > .item{align-self:start}