@media(min-width:761px){
body[data-page="work"] .site-header{inset:0 0 auto;top:0;height:0;display:block}
body[data-page="work"] .site-header .wordmark{position:absolute;left:calc(96 * 100vw / 1440);top:calc(64 * 100vw / 1440);width:calc(124 * 100vw / 1440);height:calc(40 * 100vw / 1440);min-height:0;display:block;transform:none;gap:0;font-size:calc(20 * 100vw / 1440);line-height:1;letter-spacing:normal}
body[data-page="work"] .wordmark .brand-dot{position:absolute;inset:0 auto auto 0;width:calc(40 * 100vw / 1440);height:calc(40 * 100vw / 1440);border-radius:0;--glyph:url(/assets/work-reference2x-revised/brand-dot.png);background:currentColor;-webkit-mask:var(--glyph) center / 100% 100% no-repeat;mask:var(--glyph) center / 100% 100% no-repeat}
body[data-page="work"] .wordmark>span:last-child{position:absolute;left:calc(40 * 100vw / 1440);top:0;width:calc(84 * 100vw / 1440);height:calc(40 * 100vw / 1440);transform:none;--glyph:url(/assets/work-reference2x-revised/wordmark.png)}
body[data-page="work"] .main-nav{position:absolute;left:calc(1200 * 100vw / 1440);right:auto;top:calc(54 * 100vw / 1440);width:calc(144 * 100vw / 1440);height:calc(62 * 100vw / 1440);display:block;font-size:calc(20 * 100vw / 1440);line-height:1;letter-spacing:normal}
body[data-page="work"] .main-nav a{position:absolute;left:0;width:100%;display:block;min-height:0;white-space:nowrap}
body[data-page="work"] .main-nav a:nth-child(1){top:0;height:calc(23 * 100vw / 1440);--glyph:url(/assets/work-reference2x-revised/nav-work.png)}
body[data-page="work"] .main-nav a:nth-child(2){top:calc(23 * 100vw / 1440);height:calc(18 * 100vw / 1440);--glyph:url(/assets/work-reference2x-revised/nav-playground.png)}
body[data-page="work"] .main-nav a:nth-child(3){top:calc(41 * 100vw / 1440);height:calc(21 * 100vw / 1440);--glyph:url(/assets/work-reference2x-revised/nav-about.png)}
}
@media(min-width:761px){
body[data-page="work"] .wordmark>span:last-child,body[data-page="work"] .main-nav a{-webkit-text-fill-color:transparent}
body[data-page="work"] .wordmark>span:last-child::after,body[data-page="work"] .main-nav a::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--glyph) center/100% 100% no-repeat;mask:var(--glyph) center/100% 100% no-repeat;pointer-events:none}
body[data-page="work"] .main-nav a[aria-current]{text-decoration:none}
body[data-page="work"] .work-page{padding:calc(203 * 100vw / 1440) calc(104 * 100vw / 1440) 0 calc(100 * 100vw / 1440);min-height:0;grid-template-columns:calc(221 * 100vw / 1440) minmax(0,1fr);column-gap:calc(32 * 100vw / 1440)}
body[data-page="work"] .work-preview{top:calc(203 * 100vw / 1440)}
body[data-page="work"] .work-preview img{max-height:none;width:100%;height:auto}
body[data-page="work"] .project-row{position:relative;display:block;height:calc(69 * 100vw / 1440);min-height:0;padding:0;border-bottom:calc(2 * 100vw / 1440) solid currentColor;gap:0}
body[data-page="work"] .project-list li:first-child .project-row{height:calc(55 * 100vw / 1440);min-height:0;padding:0}
body[data-page="work"] .project-name,body[data-page="work"] .project-tags{position:absolute;left:calc(var(--gx) * 100vw / 1440);top:calc(var(--gy) * 100vw / 1440);width:calc(var(--gw) * 100vw / 1440);height:calc(var(--gh) * 100vw / 1440);font-size:0}
}
body[data-page="work"] .project-name,body[data-page="work"] .project-tags{-webkit-text-fill-color:transparent;display:block}
body[data-page="work"] .project-name::after,body[data-page="work"] .project-tags::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--work-glyph) center/100% 100% no-repeat;mask:var(--work-glyph) center/100% 100% no-repeat;pointer-events:none;image-rendering:auto}
body[data-page="work"] .project-tags .tag{position:absolute;border:0;padding:0;font-size:0;pointer-events:none}
@media(max-width:760px){
body[data-page="work"] .project-name{position:relative;width:min(100%,calc(var(--gw) * 28px / 36));height:auto;aspect-ratio:var(--gw)/var(--gh);font-size:0}
body[data-page="work"] .project-tags{position:relative;width:min(100%,calc(var(--gw) * 16px / 26));height:auto;aspect-ratio:var(--gw)/var(--gh)}
}

@media(max-width:760px){
body[data-page="work"] .main-nav{position:relative;display:block;width:115.2px;height:49.6px;font-size:16px;line-height:1;flex:none}
body[data-page="work"] .main-nav a{position:absolute;left:0;display:block;width:100%;min-height:0;-webkit-text-fill-color:transparent}
body[data-page="work"] .main-nav a:nth-child(1){top:0;height:18.4px;--glyph:url('/assets/work-reference2x-revised/nav-work.png')}
body[data-page="work"] .main-nav a:nth-child(2){top:18.4px;height:14.4px;--glyph:url('/assets/work-reference2x-revised/nav-playground.png')}
body[data-page="work"] .main-nav a:nth-child(3){top:32.8px;height:16.8px;--glyph:url('/assets/work-reference2x-revised/nav-about.png')}
body[data-page="work"] .main-nav a::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--glyph) center / 100% 100% no-repeat;mask:var(--glyph) center / 100% 100% no-repeat;pointer-events:none;image-rendering:auto}
}


/* Revised reference: blank image column at rest; preserve previews on desktop intent. */
body[data-page="work"] .work-preview{visibility:hidden;pointer-events:none}
@media(min-width:761px) and (hover:hover) and (pointer:fine){body[data-page="work"][data-work-image-visible="true"] .work-preview{visibility:visible}}
@media(max-width:760px){body[data-page="work"] .work-preview{display:none}}

/* Nine distinct downward positions, bounded by the first title and last divider. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
body[data-page="work"] .work-preview{position:fixed;left:var(--work-image-left);top:var(--work-image-top);width:var(--work-image-width);height:var(--work-image-height);margin:0;z-index:1;transition:none}
body[data-page="work"] .work-preview img{width:100%;height:100%;object-fit:contain;object-position:top left}
}
@media(min-width:761px){body[data-page="work"] .project-list{grid-column:2}}

/* Project rows retain dividers and pill borders without an outer focus rectangle. */
body[data-page="work"] .project-row:focus,body[data-page="work"] .project-row:focus-visible{outline:none;outline-offset:0}

body[data-page="work"] .work-footer-copy { margin: 0; }
@media (min-width: 761px) {
  body[data-page="work"] .work-footer {
    position: relative;
    height: calc(235 * 100vw / 1440);
  }
  body[data-page="work"] .work-footer-piece {
    position: absolute;
    left: calc(var(--foot-x) * 100vw / 1440);
    top: calc(var(--foot-y) * 100vw / 1440);
    width: calc(var(--foot-w) * 100vw / 1440);
    height: calc(var(--foot-h) * 100vw / 1440);
    padding: 0;
    border: 0;
    -webkit-text-fill-color: transparent;
  }
  body[data-page="work"] .work-footer-piece::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    mask: var(--foot-glyph) center / 100% 100% no-repeat;
    pointer-events: none;
  }
}
@media (max-width: 760px) {
  body[data-page="work"] .work-footer {
    padding: 0 var(--gutter) 42px;
    font: 400 16px/1.25 var(--font-display);
  }
  body[data-page="work"] .work-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
  }
  body[data-page="work"] .work-footer-links a { margin-left: auto; }
}