:root{
  --works-bg:#f3f6f4;
  --works-ink:#0d1512;
  --works-mid:rgba(13,21,18,.62);
  --works-line:rgba(13,21,18,.12);
  --works-panel:#e7ece9;
}
html[data-theme="dark"]{
  --works-bg:#0a0f0d;
  --works-ink:#edf3f0;
  --works-mid:rgba(237,243,240,.64);
  --works-line:rgba(237,243,240,.13);
  --works-panel:#111a16;
}
html,body{overflow-x:clip}
.works-archive-page{background:var(--works-bg);color:var(--works-ink)}
.works-archive-page .profile-shell{width:min(1250px,90vw)}
.works-archive-page .cursor{
  position:fixed;left:0;top:0;z-index:110;pointer-events:none;will-change:transform;
}
.works-archive-page .cursor .bike-c{display:block;width:58px;filter:drop-shadow(0 3px 8px rgba(13,21,18,.25))}
.works-archive-page .cursor .wheel{transform-box:fill-box;transform-origin:center}
.works-archive-page .bike-c .bk-ink{stroke:var(--profile-ink)}
.works-archive-page .bike-c .bk-spoke{stroke:var(--profile-mid)}
.works-archive-page .bike-c .bk-frame{stroke:var(--profile-green)}
.works-archive-page .bike-c .bk-hub{fill:var(--profile-green)}
.works-archive-page .cursor .tag{
  position:absolute;left:44px;top:-16px;display:flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:99px 99px 99px 4px;background:var(--profile-green);
  color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 4px 14px rgba(12,121,81,.4);transition:transform .2s ease;
}
.works-archive-page .cursor .tag .km{font-family:var(--profile-mono);font-size:9.5px;font-weight:400;opacity:.85}
.works-archive-page .cursor.hovering .tag{transform:scale(1.08) rotate(-3deg)}
.works-archive-page .km-chip{
  position:fixed;left:22px;bottom:22px;z-index:100;display:flex;align-items:center;gap:9px;
  padding:9px 16px;border:1px solid var(--profile-line);border-radius:99px;
  background:color-mix(in srgb,var(--profile-card) 80%,transparent);backdrop-filter:blur(12px);
  color:var(--profile-mid);font:400 11.5px/1.2 var(--profile-mono);
  box-shadow:0 10px 30px -15px rgba(13,21,18,.25);
}
.works-archive-page .km-chip b{color:var(--profile-green);font-weight:500}
.works-archive-page main{padding-top:0}
.works-archive-hero{padding-top:170px;padding-bottom:60px}
.works-archive-hero .profile-kicker{display:block;margin-bottom:26px}
.works-archive-hero h1{
  max-width:950px;margin:0;font-family:"Archivo",system-ui,sans-serif;
  font-size:clamp(36px,5.6vw,76px);font-weight:850;line-height:1.02;letter-spacing:-.015em;
  text-transform:uppercase;overflow-wrap:anywhere;
}
.works-archive-hero__intro{
  max-width:620px;margin:20px 0 0;color:var(--works-mid);
  font-size:16.5px;line-height:1.7;
}
.works-filters{display:flex;align-items:center;gap:9px;padding-bottom:34px;overflow-x:auto;scrollbar-width:none}
.works-filters::-webkit-scrollbar{display:none}
.works-filters button{min-height:36px;padding:0 15px;flex:0 0 auto;border:1px solid var(--profile-line);border-radius:999px;background:transparent;color:var(--profile-mid);font-family:var(--profile-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.works-filters button:hover,.works-filters button.is-active{border-color:var(--profile-green);background:var(--profile-green);color:#fff}
.works-filters__status{margin-left:auto;padding-left:18px;flex:0 0 auto;color:var(--profile-mid);font-family:var(--profile-mono);font-size:9px;text-transform:uppercase}
.works-archive-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;
  gap:22px;padding-bottom:120px;
}
.works-archive-page .works-archive-card{
  position:relative;display:block;min-width:0;overflow:hidden;
  border:1px solid var(--works-line);border-radius:8px;background:var(--works-panel);
  color:#fff;text-decoration:none;isolation:isolate;
  opacity:0;transform:translateY(28px);
  transition:opacity .55s ease,transform .55s ease,border-color .25s ease;
}
.works-archive-card.is-visible{opacity:1;transform:none}
.works-archive-card[hidden]{display:none!important}
.works-archive-grid.is-filtered .works-archive-card{grid-column:span 4;grid-row:auto;aspect-ratio:1.24/1}
.works-archive-card--lead{grid-column:span 8;grid-row:span 2;aspect-ratio:1.34/1}
.works-archive-card--side{grid-column:span 4;aspect-ratio:1.34/1}
.works-archive-card--wide{grid-column:1/-1;aspect-ratio:2.25/1}
.works-archive-card--third{grid-column:span 4;aspect-ratio:1.24/1}
.works-archive-card__media{position:absolute;inset:0;display:block;background:#101713}
.works-archive-card__media::after{
  content:"";position:absolute;inset:35% 0 0;
  background:linear-gradient(to bottom,transparent,rgba(3,8,6,.88));pointer-events:none;
}
.works-archive-card__media img,.works-archive-card__media video{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.works-archive-card__placeholder{
  position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.22);
  font:700 clamp(54px,10vw,140px)/1 "Archivo",sans-serif;
}
.works-archive-card__copy{
  position:absolute;z-index:2;inset:auto 0 0;display:grid;grid-template-columns:1fr auto;
  gap:8px 18px;padding:clamp(18px,2.4vw,34px);
}
.works-archive-card__copy small{
  grid-column:1/-1;color:#79d8a7;font:500 9.5px/1.4 "JetBrains Mono",monospace;
  text-transform:uppercase;
}
.works-archive-card__copy strong{
  max-width:760px;font:800 24px/1.25 "Archivo",sans-serif;
  text-transform:uppercase;overflow-wrap:anywhere;
}
.works-archive-card--side .works-archive-card__copy strong,
.works-archive-card--third .works-archive-card__copy strong{font-size:19px}
.works-archive-card__copy > span{grid-column:1;color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.6}
.works-archive-card__copy b{grid-column:2;grid-row:2/4;align-self:end;font-size:24px}
@media(hover:hover){
  .works-archive-card:hover{border-color:#2fa96e}
  .works-archive-card:hover .works-archive-card__media img,
  .works-archive-card:hover .works-archive-card__media video{transform:scale(1.035)}
}
@media(max-width:900px){
  .works-archive-hero{padding-top:150px;padding-bottom:60px}
  .works-archive-grid{gap:12px}
  .works-archive-grid.is-filtered .works-archive-card{grid-column:span 6}
  .works-archive-card--lead{grid-column:1/-1;aspect-ratio:1.5/1}
  .works-archive-card--side{grid-column:span 6;aspect-ratio:1.05/1}
  .works-archive-card--wide{aspect-ratio:1.65/1}
  .works-archive-card--third{grid-column:span 6}
  .works-archive-card--third:last-child{grid-column:1/-1;aspect-ratio:1.7/1}
}
@media(max-width:600px){
  .works-archive-page .profile-shell{width:calc(100% - 24px)}
  .works-archive-hero{padding-top:140px;padding-bottom:44px}
  .works-archive-hero h1{font-size:36px;line-height:1.02}
  .works-archive-hero__intro{margin-top:20px;font-size:16px}
  .works-filters{padding-bottom:24px}.works-filters__status{display:none}
  .works-archive-grid{display:flex;flex-direction:column;gap:14px;padding-bottom:80px}
  .works-archive-card,.works-archive-card--lead,.works-archive-card--side,
  .works-archive-card--wide,.works-archive-card--third{width:100%;aspect-ratio:4/5}
  .works-archive-card__copy{gap:7px 14px;padding:20px}
  .works-archive-card__copy strong{font-size:clamp(20px,6.4vw,24px);line-height:1.12}
  .works-archive-card__copy>span{font-size:13px;line-height:1.45}
  .works-archive-card__copy b{font-size:22px}
  .works-archive-card--side .works-archive-card__copy strong,
  .works-archive-card--third .works-archive-card__copy strong{font-size:19px}
}
@media(pointer:coarse){
  .works-archive-page .cursor{display:none}
  .works-archive-page .km-chip{display:none}
}
@media(prefers-reduced-motion:reduce){
  .works-archive-card{opacity:1;transform:none;transition:none}
  .works-archive-card__media img,.works-archive-card__media video{transition:none}
}
