/* One card treatment for Home and Work: thin image rim, padded copy. */
body.homepage .case-hover-frame,body.work-page .work-hover{--rim:14px;--frame:#1e272e;color:#e5e5e5}
body.homepage .case-hover-panel,body.work-page .work-hover-panel{padding:20px!important;grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:36px}
body.homepage .case-hover-date,body.work-page .work-hover-date{padding:14px 14px 8px!important}
body.work-page .work-media{background:#1e272e}
body.work-page .work-hover-title{font:600 28px/1.1 Onest,sans-serif;letter-spacing:0;margin:0 0 8px}
body.work-page .work-hover-category{font:450 16px/1.3 Onest,sans-serif;letter-spacing:0;gap:9px}
body.work-page .work-hover-description,body.homepage .case-hover-description{display:block;font:400 16px/1.3 Onest,sans-serif;letter-spacing:-.02em;width:100%;max-width:410px;text-align:left;justify-self:end}
body.homepage .case-hover-description .card-copy-line,body.work-page .work-hover-description .card-copy-line{display:block;white-space:nowrap}
body.work-page .work-hover [data-reveal] .card-copy-line>span{display:inline;white-space:pre}
body.work-page .work-opening p{max-width:760px}
body.work-page .work-opening p br{display:initial!important}
@media(min-width:701px){
 body.work-page .work-grid{column-gap:calc((100vw - 2 * var(--page-gutter)) * .0225);row-gap:calc((100vw - 2 * var(--page-gutter)) * .078125)}
 body.work-page .work-card .work-media{height:min(calc((100vw - 2 * var(--page-gutter)) * .465625),68.981481svh);aspect-ratio:auto}
}

/* The badge meets the artwork corner, including the mobile image's inner rim. */
@layer card-badge-alignment {
 body.homepage .project-media,body.work-page .work-media{
  --card-art-inset:14px;--card-art-radius:20px;
 }
 body.homepage .case-hover-date,body.work-page .work-hover-date{
  top:var(--card-art-inset)!important;right:var(--card-art-inset)!important;
  bottom:auto!important;border-radius:0 var(--card-art-radius) 0 14px!important;
 }
 @media(min-width:701px) and (hover:hover) and (pointer:fine){
  body.homepage .case-hover-date,body.work-page .work-hover-date{
   top:0!important;right:0!important;
   border-radius:0 0 0 14px!important;
   transform:translateX(100%)!important;
  }
  body.homepage .project.case-hovering .case-hover-date,
  body.work-page .work-card:is(:hover,:focus-within) .work-hover-date{
   transform:translateX(0)!important;
  }
 }
 @media(max-width:700px),(hover:none),(pointer:coarse){
  body.homepage .project-media,body.work-page .work-media{
   --card-art-inset:8px;--card-art-radius:12px;
  }
  body.homepage .case-hover-date,body.work-page .work-hover-date{transform:none!important}
 }
 @media(max-width:700px){
  /* The mobile reference places the holder on the outer frame corner. */
  body.homepage .case-hover-date,body.work-page .work-hover-date{
   top:0!important;right:0!important;bottom:auto!important;
   border-radius:0 0 0 12px!important;
  }
 }
}
@media(hover:hover) and (pointer:fine) and (min-width:701px){
 body.work-page .work-card:is(:hover,:focus-within) .work-media img{clip-path:inset(14px 14px calc(var(--work-panel-height,100px) + 14px) round 20px)}
 body.homepage .project.case-hovering .cover{clip-path:inset(14px 14px calc(var(--card-panel-height,100px) + 14px) round 20px)!important}
}
@media(max-width:700px),(hover:none),(pointer:coarse){
 body.work-page .work-card .work-media,body.homepage .project .project-media{display:block;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;background:#1e272e!important;border-radius:20px;padding:8px!important;container-type:normal;text-align:left}
 body.work-page .work-card .work-media img,body.homepage .project .project-media .cover{display:block;position:relative!important;inset:auto!important;width:100%;height:auto!important;aspect-ratio:1.2!important;object-fit:cover!important;object-position:center!important;border-radius:12px;clip-path:none!important}
 body.work-page .work-card[data-id="buckaroos-web"] .work-media img,body.homepage .project-media[data-project="0"] .cover{object-position:50% 0%!important}
 body.work-page .work-dates,body.work-page .work-caption,body.work-page .soon-inline,body.homepage .project .project-dates,body.homepage .project .project-meta{display:none!important}
 body.work-page .work-hover,body.homepage .case-hover-frame{position:static;display:block;inset:auto;overflow:visible;border-radius:0}
 body.work-page .work-hover:before,body.work-page .work-hover:after,body.work-page .work-hover-top,body.homepage .case-hover-frame:before,body.homepage .case-hover-frame:after,body.homepage .case-hover-top{display:none}
 body.work-page .work-hover-date,body.homepage .case-hover-date{position:absolute;top:0;bottom:auto;right:0;transform:none;border-radius:0 0 0 14px;font:500 14px/1 Onest,sans-serif;padding:8px 12px!important;z-index:5}
 body.work-page .work-hover-panel,body.homepage .case-hover-panel{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;gap:20px;transform:none;min-height:0;margin:0 -8px -8px;padding:20px!important;background:#1e272e;color:#e5e5e5}
 body.work-page .work-hover-title,body.homepage .case-hover-title{font-size:clamp(22px,6.1vw,36px);line-height:1.15;font-weight:600;margin:0 0 8px;letter-spacing:0}
 body.work-page .work-hover-category,body.homepage .case-hover-category{font-size:clamp(13px,3.8vw,20px);line-height:1.35;font-weight:450;margin-top:10px;gap:8px}
 body.work-page .work-hover-description,body.homepage .case-hover-description{font-size:clamp(14px,3.65vw,20px)!important;line-height:1.4;border-top:1px solid #e5e5e5;padding-top:18px;width:100%;max-width:none;letter-spacing:-.02em}
 body.work-page .work-hover-description .card-copy-line,body.homepage .case-hover-description .card-copy-line{display:inline;white-space:normal}
 body.work-page .work-hover-description .card-copy-line+ .card-copy-line:before,body.homepage .case-hover-description .card-copy-line+ .card-copy-line:before{content:' '}
 body.work-page [data-reveal]:not(.card-entry-visible){opacity:0}
 body.work-page [data-reveal].card-entry-visible{opacity:1}
}
/* Every footer uses the same orange text and single underline on interaction. */
html body footer :is(a,button,.social-placeholder,.end-social>span):is(:hover,:focus-visible){color:#ef5400!important;text-decoration:underline!important;text-underline-offset:5px;text-decoration-thickness:1px;background-image:none!important}
html body footer :is(a,button,.social-placeholder,.end-social>span):is(:hover,:focus-visible) *{color:inherit!important;background-image:none!important}
html body footer :is(a,button,.social-placeholder,.end-social>span):is(:hover,:focus-visible)::after,html body footer :is(a,button,.social-placeholder):is(:hover,:focus-visible) .link-ink::after{display:none!important}

/* Desktop hover copy is anchored to the card edge, independent of grid tracks. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 body.homepage .case-hover-panel,body.work-page .work-hover-panel{min-height:103px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
 body.homepage .case-hover-description,body.work-page .work-hover-description{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:var(--desktop-copy-width,max-content);max-width:calc(50% - 20px);font-size:var(--desktop-copy-font,16px);margin:0;text-align:left;justify-self:auto}
}

/* Wide and paired rows share a viewport height; each cover has its own focal point. */
@layer project-cover-fit {
 body.homepage .project-media[data-project="0"],body.work-page .work-card[data-id="buckaroos-web"]{--cover-focus:50% 15%}
 body.homepage .project-media[data-project="1"],body.work-page .work-card[data-id="diggit"]{--cover-focus:50% 0%}
 body.homepage .project-media[data-project="3"],body.work-page .work-card[data-id="ada-web"]{--cover-focus:50% 35%}
 body.homepage .project-media[data-project="4"],body.work-page .work-card[data-id="lunar"]{--cover-focus:65% 35%}
 body.work-page .work-card[data-id="isro"]{--cover-focus:50% 70%}
 body.work-page .work-card[data-id="fayble"]{--cover-focus:50% 0%}
 body.homepage .project.wide .project-media .cover,
 body.work-page .work-card.wide .work-media img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  aspect-ratio:auto!important;object-fit:cover!important;object-position:var(--cover-focus,50% 50%)!important;
 }
 @media(min-width:701px){
  body.homepage .project{height:var(--home-row-height)!important;grid-template-rows:var(--home-date-height) var(--home-image-height) var(--home-caption-height)!important}
  body.homepage .project.wide .project-media,body.homepage .project-pair .project .project-media{
   height:var(--home-image-height)!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;
  }
  body.work-page .work-card .work-media{
   height:min(calc((100vw - 2 * var(--page-gutter)) * .465625),68.981481svh)!important;
   min-height:0!important;max-height:none!important;aspect-ratio:auto!important;
  }
 }
 @media(max-width:700px),(hover:none),(pointer:coarse){
  body.homepage .project{display:block!important;height:auto!important;grid-template-rows:none!important}
  body.homepage .project-pair{height:auto!important;grid-template-columns:minmax(0,1fr)!important}
  body.work-page .work-grid{grid-template-columns:minmax(0,1fr)!important}
  body.homepage .project .project-media,
  body.work-page .work-card .work-media{
   height:auto!important;aspect-ratio:auto!important;
  }
  body.homepage .project .project-media .cover,
  body.work-page .work-card .work-media img{
   position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
   aspect-ratio:1600 / 745!important;object-fit:cover!important;object-position:var(--cover-focus,50% 50%)!important;
  }
 }
 @media(max-width:700px){
  /* Mobile artwork must occupy its own row before the static copy panel. */
  body.homepage .project{display:block!important;height:auto!important;grid-template-rows:none!important}
  body.homepage .project-pair{height:auto!important;grid-template-columns:minmax(0,1fr)!important}
  body.work-page .work-grid{grid-template-columns:minmax(0,1fr)!important}
  body.homepage .project .project-media .cover,
  body.homepage .project.wide .project-media .cover,
  body.work-page .work-card .work-media img,
  body.work-page .work-card.wide .work-media img{
   display:block!important;position:relative!important;inset:auto!important;
   width:100%!important;height:auto!important;
   aspect-ratio:1.2!important;object-fit:cover!important;object-position:center!important;
  }
  body.homepage .project.wide .project-media[data-project="0"] .cover,
  body.work-page .work-card.wide[data-id="buckaroos-web"] .work-media img{object-position:50% 0%!important}
 }
}

/* Home and Work mobile cards match the supplied 430px reference. */
@media(max-width:700px){
 body.homepage .work-section{padding-inline:max(20px,5.348837vw)!important}
 body.work-page .work-collection{padding-inline:calc(max(20px,5.348837vw) - var(--outer,6px))}
 body.homepage .project .project-media,body.work-page .work-card .work-media{
  padding:12px!important;border:0!important;border-radius:20px;
 }
 body.homepage .project .project-media .cover,body.work-page .work-card .work-media img{
  border-radius:20px!important;
 }
 body.homepage .case-hover-date,body.work-page .work-hover-date{
  padding:12px 12px 4px!important;font:400 14px/1.3 Onest,sans-serif;
 }
 body.homepage .case-hover-panel,body.work-page .work-hover-panel{
  margin:0 -12px -12px;padding:20px!important;gap:12px;
 }
 body.homepage .case-hover-title,body.work-page .work-hover-title{
  font-size:24px;line-height:1.15;margin:0 0 4px;
 }
 body.homepage .case-hover-category,body.work-page .work-hover-category{
  font-size:12px;line-height:1.3;margin-top:0;gap:8px;
 }
 body.homepage .case-hover-description,body.work-page .work-hover-description{
  font-size:14px!important;line-height:1.3;letter-spacing:0;
  border-top:1px solid #9aa1a6;padding-top:18px;
 }
 body.homepage .case-hover-category::before,body.work-page .work-hover-category::before{
  width:9px;height:9px;margin-top:3px;
 }
}