/* FeoFish additions are scoped to its homepage card and case page. */
.work-feofish {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:end;
  border-bottom:1px solid var(--rule);
  padding-bottom:32px;
}
.work-feofish__media {
  grid-column:1/9;
  display:block;
  overflow:hidden;
  background:#a6251e;
}
.work-feofish__media picture { display:block; }
.work-feofish__media img {
  display:block;
  width:100%;
  height:auto;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.work-feofish:hover .work-feofish__media img { transform:scale(1.025); }
.work-feofish__copy { grid-column:9/13; padding:0 0 8px 12px; }
.work-feofish__copy .tag { display:block; margin-bottom:20px; }
.work-feofish__copy h3 {
  margin:0 0 19px;
  font:400 clamp(42px,4.5vw,65px)/1 var(--display);
  letter-spacing:-.06em;
}
.work-feofish__copy p {
  margin:0 0 21px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.work-feofish__copy .micro { margin-bottom:16px; }
.feofish-case .case-cover { background:#ad221e; }
.feofish-case .case-cover img { width:100%; }
.feofish-case .case-title-row h1 { letter-spacing:-.065em; }
.feofish-case .case-body { padding-bottom:60px; }
.feofish-notes {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 24px;
  margin:0;
  padding:0;
  list-style:none;
}
.feofish-notes li {
  padding:8px 0 11px;
  border-bottom:1px solid var(--rule);
  color:#373733;
  font-size:14px;
}
.feofish-frames { display:grid; gap:44px; }
.feofish-frame { margin:0; }
.feofish-frame img { width:100%; height:auto; }
.feofish-frame figcaption,
.feofish-mobile-frame figcaption {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.feofish-mobile-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.feofish-mobile-frame { min-width:0; }
.feofish-mobile-frame:nth-child(2) { align-self:center; }
.feofish-mobile-frame img { width:100%; height:auto; }
.feofish-final { padding:0 0 88px; }
.feofish-final .shell { border-top:1px solid var(--rule); padding-top:34px; }
.feofish-final__heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:25px;
}
.feofish-final__heading h2 {
  margin:0;
  font:400 clamp(34px,4vw,56px)/1.08 var(--display);
  letter-spacing:-.045em;
}
.feofish-final__heading .chapter-index { color:var(--muted); font-size:12px; font-weight:700; }
.feofish-final__image { width:100%; height:auto; }
.feofish-final__actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:24px;
}
.feofish-final__actions p {
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.feofish-final__actions .button { flex:none; }
@media(max-width:1100px) {
  .work-feofish { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .work-feofish__media { grid-column:1/6; }
  .work-feofish__copy { grid-column:6/9; padding-left:0; }
  .work-feofish__copy h3 { font-size:42px; }
  .work-feofish__copy p { font-size:14px; }
}
@media(max-width:800px) {
  .work-feofish__media { grid-column:1/9; }
  .work-feofish__copy { grid-column:1/9; max-width:650px; }
  .work-feofish__copy .tag { margin-bottom:12px; }
  .work-feofish__copy h3 { margin-bottom:12px; }
  .feofish-mobile-grid { gap:12px; }
}
@media(max-width:700px) {
  .work-feofish { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding-bottom:29px; }
  .work-feofish__media { grid-column:1/5; }
  .work-feofish__media img { width:100%; max-height:470px; object-fit:cover; object-position:center 20%; }
  .work-feofish__copy { grid-column:1/5; }
  .work-feofish__copy h3 { font-size:42px; }
  .work-feofish__copy p { margin-bottom:15px; }
  .feofish-case .case-body { padding-bottom:40px; }
  .feofish-notes { gap:4px 16px; }
  .feofish-notes li { font-size:12px; }
  .feofish-frames { gap:30px; }
  .feofish-mobile-grid { grid-template-columns:1fr; gap:30px; }
  .feofish-mobile-frame { max-width:480px; }
  .feofish-mobile-frame:nth-child(2) { align-self:start; }
  .feofish-final { padding-bottom:52px; }
  .feofish-final .shell { padding-top:25px; }
  .feofish-final__heading { align-items:start; }
  .feofish-final__heading h2 { font-size:37px; }
  .feofish-final__actions { flex-direction:column; align-items:start; gap:15px; }
  .feofish-final__actions .button { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .work-feofish__media img { transition:none; }
}