/* Case introduction owns its layout independently of the opening cover. */
.case-section{--proof-outer:clamp(56px,6vw,96px);--proof-section:clamp(36px,4vw,64px);--proof-content:clamp(24px,2.5vw,40px);--proof-grid:clamp(14px,1.4vw,24px);background:var(--blue);color:var(--ink)}
.compact-cases{padding:0;overflow:clip}
.compact-cases .case-content{padding-top:0;padding-bottom:var(--proof-outer)}
.compact-cases .journal-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:var(--proof-content);padding-top:var(--proof-section);border-top:1px solid var(--line)}
.compact-cases .journal-heading h2{max-width:740px;margin:0;font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.compact-cases .journal-heading h2 span{color:#057bb7}
.compact-cases .journal-heading .eyebrow{display:block;margin-bottom:18px;font-size:10px;letter-spacing:.06em}
.compact-cases .journal-heading>p{font-size:16px;line-height:1.6;max-width:360px;margin:0;padding:0}
.compact-cases #post-grid{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:36px var(--proof-grid);padding:12px 0 20px;margin:0;overflow:visible}
.compact-cases .post-card:nth-child(n){min-width:0;position:relative;transform:none;transition:none}
.compact-cases .post-card:focus-within,.compact-cases .post-card:hover{z-index:3}
.compact-cases .post-card:focus-within{transform:none}
.compact-cases .post-media{overflow:visible;isolation:auto;border-radius:0;background:none}
.compact-cases .post-card-open{display:flex;flex-direction:column;align-items:stretch;position:relative;padding:0;text-align:left;border-radius:5px;transition:transform 380ms cubic-bezier(.22,1,.36,1)}
.compact-cases .case-cover{position:relative;display:flex;align-items:end;justify-content:flex-start;height:clamp(110px,11.6vw,166px);transform-origin:50% 75%;transition:transform 440ms cubic-bezier(.22,1,.36,1)}
.compact-cases .case-cover>img{width:auto;height:100%;max-height:100%;max-width:100%;aspect-ratio:auto;object-fit:contain;object-position:left bottom;border-radius:5px;box-shadow:0 6px 12px -9px #123b6440;transition:box-shadow 380ms ease}
.compact-cases .post-open-label{left:50%;bottom:8px;right:auto;white-space:nowrap;max-width:calc(100% - 8px);padding:6px 10px;font-size:10px;line-height:1.4;border-radius:99px;background:var(--ink);color:var(--white);opacity:0;transform:translate(-50%,5px);transition:opacity 200ms,transform 300ms cubic-bezier(.22,1,.36,1);pointer-events:none}
.compact-cases .post-card-meta{display:block;margin-top:8px;min-height:32px}
.compact-cases .post-card-meta h3{font-size:12px;line-height:1.3;letter-spacing:-.02em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:600}
.compact-cases .post-card-open:focus-visible{outline-offset:6px}
.compact-cases .post-card-open:focus-visible .post-open-label{opacity:1;transform:translate(-50%,0);transition:none}
.compact-cases .post-card-open:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
 .compact-cases .post-card-open:hover .case-cover{transform:translateY(-7px) scale(1.18)}
 .compact-cases .post-card-open:hover .case-cover>img{box-shadow:0 20px 28px -13px #123b6460}
 .compact-cases .post-card-open:hover .post-open-label{opacity:1;transform:translate(-50%,0)}
}
@media(min-width:640px) and (max-width:1050px){
 .compact-cases #post-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 18px}
 .compact-cases .case-cover{height:150px}
 .compact-cases .journal-heading h2{max-width:530px}
}
@media(min-width:1100px){
 .compact-cases .journal-heading>p{font-size:18px}
}
@media(max-width:639px){
 .compact-cases .case-content{padding-inline:18px}
 .compact-cases .journal-heading{display:block;margin-bottom:16px}
 .compact-cases .journal-heading h2{max-width:340px;font-size:34px;text-wrap:initial}
 .compact-cases .journal-heading .eyebrow{margin-bottom:12px;font-size:8px}
 .compact-cases .journal-heading>p{display:block;max-width:none;margin-top:16px;line-height:1.6}
 .compact-cases #post-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 14px}
 .compact-cases .case-cover{height:clamp(96px,29vw,164px)}
 .compact-cases .case-cover>img{border-radius:3px}
 .compact-cases .post-card-meta{margin-top:5px;min-height:27px}
 .compact-cases .post-card-meta h3{font-size:11px;line-height:1.35;letter-spacing:0;overflow-wrap:anywhere}
 .compact-cases .post-open-label{display:none}
}
@media(max-width:359px){
 .compact-cases .case-content{padding-inline:14px}
 .compact-cases #post-grid{gap:28px 12px}
 .compact-cases .journal-heading h2{font-size:31px}
}
@media(prefers-reduced-motion:reduce){
 .compact-cases .post-card:nth-child(n),.compact-cases .case-cover,.compact-cases .post-card-open{transform:none!important;transition:none!important}
 .compact-cases img,.compact-cases .post-open-label{transition:none!important}
}
html.reduce-motion .compact-cases .post-card:nth-child(n),html.reduce-motion .compact-cases .case-cover,html.reduce-motion .compact-cases .post-card-open{transform:none!important;transition:none!important}
html.reduce-motion .compact-cases img,html.reduce-motion .compact-cases .post-open-label{transition:none!important}

/* Original Instagram highlights, aligned in three columns below the cases. */
.case-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.case-highlight{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:8px 0;text-align:center;color:var(--ink);text-decoration:none;font-size:clamp(11px,1.3vw,16px);font-weight:600;line-height:1.4}
/* Keep the image out of intrinsic sizing: Safari otherwise adds frame padding to its height. */
.case-highlight-cover{position:relative;display:block;flex:none;width:min(75%,110px);aspect-ratio:1;border-radius:50%;padding:0;border:2px solid var(--ink);transition:transform 380ms cubic-bezier(.22,1,.36,1)}
.case-highlight-cover img{position:absolute;inset:5px;display:block;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:50%;object-fit:cover}
.case-highlight:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.case-highlight:hover .case-highlight-cover{transform:translateY(-5px) scale(1.06)}}
@media(min-width:761px){.case-highlights{gap:var(--proof-grid);margin-top:48px;padding-top:36px}.case-highlight-cover{width:120px;max-width:75%}}
@media(prefers-reduced-motion:reduce){.case-highlight-cover{transition:none!important;transform:none!important}}
html.reduce-motion .case-highlight-cover,html.flower-only-motion .case-highlight-cover{transition:none!important;transform:none!important}