/* V37 — Contact-column-aligned switch, normal document scrolling, original sticky filters. */
:root{--wg-button-left:calc(100vw - 174px);--wg-button-top:355px;--wg-grey:#efefef}
.wg-view-switch{position:absolute!important;left:var(--wg-button-left)!important;top:var(--wg-button-top)!important;z-index:95;background:transparent;border:0;padding:0!important;margin:0!important;font-family:Arial,Helvetica,sans-serif;font-size:15px!important;font-weight:400;line-height:1.25!important;text-align:left;white-space:nowrap;color:#111;cursor:pointer;transition:none!important}
.wg-view-switch:hover,.wg-view-switch:focus-visible{font-weight:700;text-decoration:none!important}
body:not(.works-grid-active) .wg-view-switch{z-index:9}
body.works-grid-active>nav{position:fixed!important;left:0;right:0;top:0;z-index:90;background:#fafaf8;transition:transform .28s ease;will-change:transform}
body.works-grid-active.wg-nav-away>nav{transform:translateY(-110%)}
body.works-grid-active #app{padding-top:104px}
.wg-page{min-height:100svh;padding-bottom:120px}
.wg-heading{padding:69px var(--gutter) 0;margin:0 0 30px}
.wg-heading h1{font-size:clamp(72px,7vw,118px);line-height:1;letter-spacing:-.055em;margin:0;font-weight:700}
.wg-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(165px,14vw,255px);gap:8px;margin:0 var(--gutter) 0 clamp(32px,12vw,215px);align-items:start}
.wg-content{min-width:0}
.wg-featured{display:flex;flex-direction:column;gap:43px}
.wg-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:53px 24px;margin-top:54px}
.wg-card{min-width:0}
.wg-card>a{display:block;color:inherit;text-decoration:none!important}
.wg-picture{position:relative;width:100%;overflow:hidden;background:var(--wg-grey)}
.wg-featured-card .wg-picture{aspect-ratio:2.58/1}
.wg-small-card .wg-picture{aspect-ratio:1.18/1}
.wg-picture>.wg-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1);transition:transform .55s cubic-bezier(.2,.7,.25,1);background:var(--wg-grey)}
.wg-card>a:hover .wg-image,.wg-card>a:focus-visible .wg-image{transform:scale(1.022)}
/* V06 Porsche crop/scale, with the approved light-grey background. */
.wg-card[data-id="sitski"] .wg-image{object-fit:cover;object-position:center;background:#efefef}
.wg-card[data-id="tesla"] .wg-image,.wg-card[data-id="helmet"] .wg-image{background:#efefef}
.wg-card[data-id="universal"] .wg-image{object-position:center 8%}
.wg-card[data-id="earpiece"] .wg-image{object-position:28% 48%}
.wg-card[data-id="posters"] .wg-picture,.wg-card[data-id="posters"] .wg-image{background:#000}
.wg-card[data-id="posters"] .wg-image{object-fit:contain;padding:12px}
.wg-pace{position:absolute;z-index:2;top:17px;right:17px;width:clamp(70px,7vw,102px);height:auto;opacity:0;transform:translateY(6px) scale(.98);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.wg-card>a:hover .wg-pace,.wg-card>a:focus-visible .wg-pace{opacity:1;transform:translateY(0) scale(1)}
.wg-card-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px;align-items:baseline;padding-top:13px;font-size:15px;line-height:1.3}
.wg-card-title{min-width:0;font-size:16px;line-height:1.3;font-weight:400;text-decoration:none!important}
.wg-card-year{white-space:nowrap;font-size:12px;line-height:1.3}
.wg-rail{position:sticky;top:calc(var(--wg-button-top) - 35px);padding:75px 0 15px clamp(12px,2vw,30px);align-self:start;font-size:15px;line-height:1.25;z-index:40}
.wg-filter-heading{margin:0 0 10px;font-size:15px;color:#888;line-height:1.25}
.wg-filter{display:grid;grid-template-areas:'label';width:100%;align-items:start;justify-items:start;background:none;border:0;padding:2px 0;text-align:left;font-family:inherit;font-size:15px;line-height:1.25;cursor:pointer}
.wg-filter::after{content:attr(data-label);grid-area:label;font-weight:700;visibility:hidden;pointer-events:none;white-space:normal}
.wg-filter-label{grid-area:label;min-width:0}
.wg-filter:hover .wg-filter-label,.wg-filter[aria-pressed="true"] .wg-filter-label{font-weight:700}
.wg-filter[aria-pressed="true"] .wg-filter-label{text-decoration:none!important}
.wg-count{font-size:12px;color:#999;margin:16px 0 0}
.wg-noresults{padding:70px 0;color:#888}
@media(max-width:1100px){.wg-layout{margin-left:clamp(22px,5vw,60px);grid-template-columns:minmax(0,1fr) 155px}.wg-featured-card .wg-picture{aspect-ratio:2.3/1}.wg-rail,.wg-filter,.wg-filter-heading{font-size:12px}.wg-card-info{font-size:13px}}
@media(max-width:700px){body.works-grid-active #app{padding-top:85px}.wg-heading{padding:34px 16px 0;margin-bottom:32px}.wg-heading h1{font-size:clamp(69px,16vw,95px)}.wg-layout{display:flex;flex-direction:column-reverse;margin:0 16px;gap:20px}.wg-rail{position:sticky;top:0;background:rgba(250,250,248,.98);padding:12px 0 10px;width:100%;z-index:65;border-bottom:1px solid #e7e7e5}.wg-filter-buttons{display:flex;flex-wrap:wrap;gap:3px 14px}.wg-filter{width:auto;font-size:11px}.wg-filter-heading{display:none}.wg-count{margin:8px 0 0}.wg-view-switch{position:relative!important;left:auto!important;top:auto!important;font-size:13px!important;display:inline-block;margin:0 0 12px!important}.wg-featured-card .wg-picture{aspect-ratio:1.85/1}.wg-rest{gap:34px 12px;margin-top:36px}.wg-featured{gap:35px}.wg-small-card .wg-picture{aspect-ratio:1/1}.wg-card-info{grid-template-columns:minmax(0,1fr);gap:4px;padding-top:9px}.wg-card-title{font-size:13px}.wg-card-year{font-size:11px}}
@media(prefers-reduced-motion:reduce){.wg-picture>.wg-image,.wg-pace{transition:none}}

/* V34: explicitly restore vertical document scrolling for the long Works grid.
   Only the grid is affected; the original fullscreen carousel is unchanged. */
html:has(body.works-grid-active),body.works-grid-active{height:auto!important;min-height:100%!important;overflow-y:auto!important;overscroll-behavior-y:auto!important;touch-action:pan-y!important}
body.works-grid-active #app{height:auto!important;min-height:100svh!important;max-height:none!important;overflow:visible!important}
body.works-grid-active .wg-page{height:auto!important;min-height:100svh!important;max-height:none!important;overflow:visible!important}
/* Shared nav-aligned hover/click affordance. No underline on either switch. */
.wg-view-switch,.wg-view-switch:hover,.wg-view-switch:active{ text-decoration:none!important; }
/* Grid applies the regular portfolio-wide cursor and open-project affordances. */
@media(hover:hover) and (pointer:fine){.wg-card>a,.wg-card>a *,.wg-filter,.wg-view-switch{cursor:none!important}}

/* V37: identical mobile Works heading geometry in carousel and grid.
   The values are measured from the already-rendered carousel before switching. */
@media(max-width:700px){
  body.works-grid-active #app{padding-top:var(--wg-mobile-nav-space,114px)!important;}
  body.works-grid-active .wg-heading{
    padding:var(--wg-mobile-intro-padding,38px) var(--wg-mobile-gutter,16px) 0!important;
    margin-bottom:0!important;
  }
  body.works-grid-active .wg-heading h1{
    font-size:var(--wg-mobile-title-size,62px)!important;
    line-height:var(--wg-mobile-title-leading,1)!important;
    letter-spacing:var(--wg-mobile-title-tracking,-.055em)!important;
    font-weight:700!important;
  }
  /* Same mobile switch x/y across both modes; each scrolls away with the document. */
  #app .wg-view-switch[data-works-view="grid"]{
    align-self:flex-start!important;
    margin:0 0 12px var(--wg-mobile-gutter,var(--page-gutter,16px))!important;
    width:max-content!important;
    text-align:left!important;
  }
  /* The grid switch is a normal-flow sibling of the heading, not part of the sticky filter rail. */
  .wg-page > .wg-view-switch{
    display:block!important;
    position:relative!important;left:auto!important;top:auto!important;
    margin:41px 0 12px var(--wg-mobile-gutter,16px)!important;
    width:max-content!important;text-align:left!important;
  }
}


/* V38: desktop Works title and navigation inherit the original carousel geometry.
   The grid must never substitute its own nav height, title gutter or top offset. */
@media(min-width:701px){
  body.works-grid-active > nav{
    width:var(--wg-original-nav-width,100%)!important;
    box-sizing:border-box!important;
  }
  body.works-grid-active #app{
    padding-top:var(--wg-original-nav-height,104px)!important;
  }
  body.works-grid-active .wg-heading{
    padding-top:var(--wg-original-intro-top,69px)!important;
    padding-left:var(--wg-original-intro-left,var(--gutter))!important;
    padding-right:var(--wg-original-intro-right,var(--gutter))!important;
  }
  body.works-grid-active .wg-heading h1{
    font-size:var(--wg-original-heading-size,clamp(72px,7vw,118px))!important;
    line-height:var(--wg-original-heading-line-height,1)!important;
    letter-spacing:var(--wg-original-heading-letter-spacing,-.055em)!important;
  }
  /* Fields and All Fields start precisely on the shared switch / Contact baseline. */
  body.works-grid-active .wg-rail{
    padding-left:max(0px,calc(var(--wg-button-left) - var(--wg-rail-left,0px)))!important;
  }
}