/* ============================================================
   TAMON — Projects page (loaded after main.css, on projects.html only)
   Every project as the homepage's card (main.css, "Projects"), laid out as bricks and filtered by service.
   · Hero: a short headline and the facts of the four clients.
   · Filter: the Contact page's chips as radio buttons, one per service the work shows, with how many projects
     have it. Cards that don't match fade out where they are; the rest glide to their new places (projects.js).
   · Grid, with a mouse and room (1024 px and up; .is-engine, placed by projects.js): cards in rows of two, the
     wider one alternating sides, the narrower one shorter, low in one row and high in the next, so the rows step
     down the page. Rows never overlap, so an opening card can take room from its neighbour at any height.
     A row of one takes the full width. Hovering or focusing a card opens it as on the
     homepage: it widens while its neighbour narrows, and its panel slides out. Every move is a transition of
     translate and width, driven by registered custom properties, so the card, its photo and its panel stay in
     step and nothing counts as a layout shift.
   · Grid elsewhere (touch screens, narrower windows, no JavaScript): the cards stack, each photo above its
     panel, in one or two columns; filtering slides the remaining cards into place.
   ============================================================ */

/* ---------- Hero ---------- */
.wk-hero{position:relative;isolation:isolate;overflow:clip;padding-top:var(--bar-h);background-color:var(--ink)}
.wk-hero__light{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(42% 60% at 0% 10%,rgb(var(--grad-a-rgb) / .14),transparent 72%),
             radial-gradient(38% 56% at 100% 70%,rgb(var(--grad-c-rgb) / .1),transparent 72%)}
.wk-hero__grain{z-index:-1}
.wk-hero__inner{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(1.5rem,4vh,2.5rem);
  padding-block:clamp(2.5rem,9vh,6.5rem) clamp(2.5rem,7vh,4.5rem)}
@media (min-width:1024px){
  .wk-hero__inner{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(2rem,5vw,5rem);align-items:end}
  .wk-hero__lede{padding-bottom:.9rem}
}
.wk-hero__head{min-width:0;container-type:inline-size}
.wk-hero__title{margin-top:clamp(.9rem,2.2vh,1.4rem);font-weight:300;font-size:clamp(3rem,1rem + 7vw,9rem);
  font-size:max(2.9rem,min(9.5rem,15.5cqi));line-height:.98;letter-spacing:-.04em}
@media (min-width:600px){.wk-hero__title .rise__line>span{white-space:nowrap}}
.wk-hero__lede{max-width:34ch;font-size:var(--fs-lead);line-height:1.5;color:var(--text-soft)}

/* ---------- Filter ---------- */
.wk{--wk-gap:clamp(.9rem,1.5vw,1.35rem);--card-r:20px;--pad:clamp(1.25rem,2vw,1.75rem);--panel-w:clamp(17rem,23vw,22.5rem);
  --glide:.8s;--ease-glide:cubic-bezier(.25,.75,.2,1);
  position:relative;padding-block:0 clamp(4rem,11vh,7rem)}
.wk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  padding-block:1.4rem clamp(1.75rem,4vh,2.5rem);border-top:1px solid var(--hair)}
.wk-filter{min-width:0;margin:0;padding:0;border:0}
.wk-filter .chip span{gap:.6rem}
.wk-filter__n{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--text-dim);transition:color .3s var(--ease-out)}
.wk-filter .chip input:checked+span .wk-filter__n{color:var(--text-soft)}
.wk-count{font-family:var(--display);font-size:var(--fs-sm);color:var(--text-dim)}
.no-js .wk-filter,.no-js .wk-count{display:none}

/* ---------- Grid: stacked (touch, narrow, no JavaScript) ---------- */
.wk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--wk-gap)}
@media (min-width:600px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wk-grid:not(.is-engine) .project.is-out{display:none}

/* ---------- Grid: bricks (projects.js adds .is-engine and places each card) ---------- */
@property --cx{syntax:"<length>";inherits:false;initial-value:0px}
@property --cy{syntax:"<length>";inherits:false;initial-value:0px}
@property --cw{syntax:"<length>";inherits:false;initial-value:0px}
@property --ch{syntax:"<length>";inherits:false;initial-value:0px}
@property --img-w{syntax:"<length>";inherits:true;initial-value:0px}
@property --open{syntax:"<number>";inherits:true;initial-value:0}
/* read by projects.js as lengths: the tall card's height, how much shorter the narrow one is */
@property --wk-h{syntax:"<length>";inherits:false;initial-value:0px}
@property --wk-drop{syntax:"<length>";inherits:false;initial-value:0px}
@property --wk-gap-px{syntax:"<length>";inherits:false;initial-value:0px}
@property --wk-panel-px{syntax:"<length>";inherits:false;initial-value:0px}
.wk-grid.is-engine{--wk-h:clamp(30rem,72svh,42rem);--wk-drop:clamp(4rem,13svh,7.5rem);--wk-gap-px:var(--wk-gap);--wk-panel-px:var(--panel-w);
  position:relative;display:block;margin-inline:calc(var(--wk-gap) / -2);transition:height var(--glide) var(--ease-glide)}
/* each card is a slot: its half gaps belong to it, so the pointer never falls between two cards of a row */
.wk-grid.is-engine .project{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);translate:var(--cx) var(--cy);
  padding-inline:calc(var(--wk-gap) / 2);container-type:inline-size;--card-w:100cqi;will-change:translate;
  transition:--cx var(--glide) var(--ease-glide),--cy var(--glide) var(--ease-glide),--cw var(--glide) var(--ease-glide),
    --ch var(--glide) var(--ease-glide),--img-w var(--glide) var(--ease-glide),--open var(--glide) var(--ease-glide),
    opacity .5s var(--ease-out) .12s,scale .8s var(--ease-enter) .12s,visibility 0s}
.wk-grid.is-engine .project.is-open{z-index:1}
/* leaving: fades where it stands, then is out of reach */
.wk-grid.is-engine .project.is-out{opacity:0;scale:.94;visibility:hidden;pointer-events:none;
  transition:--cx 0s,--cy 0s,--cw 0s,--ch 0s,--img-w 0s,--open var(--glide) var(--ease-glide),
    opacity .3s var(--ease-out),scale .45s var(--ease-out),visibility 0s linear .45s}
.wk-grid.is-engine .project.is-placing,.wk-grid.is-engine.is-placing{transition:none!important}
.wk-grid.is-engine .project__card{height:100%}
/* the photo while it loads: its own average colour. The cards here are larger than the homepage's, so the scrim
   under the name reaches a little further */
.wk-grid .project__media{background-color:var(--tint,var(--ink-2))}
.wk-grid .project__media::after{background:linear-gradient(to top,rgb(10 20 28 / .72),rgb(10 20 28 / .3) 28%,rgb(10 20 28 / 0) 52%)}

/* grid mode: cards leaving and arriving (projects.js animates them; nothing here is required) */
@media (prefers-reduced-motion:reduce){
  .wk-grid.is-engine,.wk-grid.is-engine .project,.wk-grid.is-engine .project.is-out{transition-duration:.01ms!important;transition-delay:0s!important}
}