/* Opens downward over Method. #work must stay overflow:visible so the card is not clipped. */
/* Homepage "Also" strip with hover-reveal visuals (secondary case studies) */
.also-strip{position:relative;z-index:40;margin-top:72px;border-top:1px solid var(--rule-k,rgba(240,236,227,.14));border-bottom:1px solid var(--rule-k,rgba(240,236,227,.14));padding:clamp(36px,4.5vw,56px) clamp(4px,2vw,24px);display:flex;align-items:baseline;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.also-tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--stone,#716D6A)}
.also-link{position:relative;display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory,#F0ECE3);font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.01em;padding:10px 0 8px}
.also-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule-k,rgba(240,236,227,.14));transition:background .45s cubic-bezier(.16,1,.3,1)}
.also-link svg{width:20px;height:auto;overflow:visible;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.also-link svg path{stroke:var(--champ,#D3C09A);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.also-link:focus-visible{outline:2px solid var(--champ,#D3C09A);outline-offset:6px}
.reveal{position:absolute;left:0;top:calc(100% + 18px);width:min(400px,36vw);aspect-ratio:3/2;z-index:30;margin:0;border-radius:2px;overflow:hidden;border:1px solid var(--rule-k,rgba(240,236,227,.14));box-shadow:0 28px 70px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),visibility 0s .55s;pointer-events:none}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08) translateY(-1.5%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.reveal::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(12,11,9,.72),rgba(12,11,9,0))}
.reveal figcaption{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory,#F0ECE3)}
.reveal figcaption b{font-weight:500;color:var(--champ,#D3C09A)}
/* Do not gate this behind (any-hover:hover). Windows touch laptops often report
   no hover even when a mouse or trackpad is in use, which hid the card. */
.also-link:hover::after,
.also-link:focus-visible::after,
.also-link.is-on::after{background:var(--champ-d,#8A7448)}
.also-link:hover svg,
.also-link:focus-visible svg,
.also-link.is-on svg{transform:translateX(4px)}
.also-link:hover .reveal,
.also-link:focus-visible .reveal,
.also-link.is-on .reveal{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
}
.also-link:hover .reveal img,
.also-link:focus-visible .reveal img,
.also-link.is-on .reveal img{transform:scale(1) translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal,.reveal img,.also-link svg{transition:opacity .2s linear!important;transform:none!important}}