:root { --ink:#111; --paper:#fff; --card:#f5f5f3; --muted:#777774; --line:#d8d8d2; --sidebar:395px; --content:1029px; --gap:8px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Arimo",Arial,sans-serif; font-size:16px; }
button,a { color:inherit; font:inherit; }
a { text-decoration:none; }
.case-library { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:100vh; }
.case-sidebar { position:relative; align-self:start; min-width:0; display:flex; flex-direction:column; padding:138px 0 24px 8px; background:#fff; }
.case-menu-toggle { display:none; }
.case-logo { position:absolute; top:140px; left:162px; display:block; width:60px; height:20px; }
.case-logo img { display:block; width:60px; height:20px; }
.case-sidebar__heading { position:absolute; top:176px; left:87px; width:210px; height:20px; margin:0; text-align:center; }
.case-sidebar__footer,.case-detail__footer { color:var(--muted); font-size:11px; letter-spacing:.1em; }
.case-sidebar__heading h1 { margin:0; font-size:28px; font-weight:700; line-height:20px; letter-spacing:0; white-space:nowrap; }
.case-list { display:grid; gap:var(--gap); min-height:0; margin-top:188px; padding-right:0; }
.case-card { display:flex; align-items:center; gap:16px; width:100%; padding:16px; border:0; border-radius:8px; text-align:left; background:var(--card); cursor:pointer; transition:background 180ms ease,color 180ms ease; }
.case-card.is-active { color:#fff; background:#111; }
.case-card__mark { flex:0 0 65px; width:65px; height:65px; border-radius:8px; background:#fff; }
.case-card__mark img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.case-card__mark--orange { background:#f90; }
.case-card__mark--green { background:#74b85a; }
.case-card__mark--blue { background:#386be4; }
.case-card__mark--pink { background:#ff5b89; }
.case-card strong,.case-card small { display:block; }
.case-card>span:last-child { min-width:0; overflow-wrap:anywhere; }
.case-card strong { font-size:16px; font-weight:400; }
.case-card small { margin-top:5px; color:var(--muted); font-size:14px; }
.case-card.is-active small { color:#aaa; }
.case-sidebar__footer { margin-top:auto; padding:20px 12px 0; border-top:1px solid var(--line); font-size:10px; }
.case-detail { display:flex; flex-direction:column; align-self:start; gap:var(--gap); min-width:0; width:100%; padding:8px; background:var(--paper); overflow-wrap:anywhere; }
.case-detail>* { flex-shrink:0; }
.case-project,.case-lead,.case-copy,.case-media-block,.case-detail__footer { width:100%; margin:0; }
.case-project,.case-lead,.case-copy { border-radius:8px; background:#fff; }
.case-project { padding:16px; }
.case-project h2,.case-lead h2 { margin:0 0 12px; font-size:40px; font-weight:400; line-height:normal; }
.case-project p,.case-lead p { margin:0; font-size:16px; line-height:normal; }
.case-lead { padding:16px; }
.case-copy { display:flex; flex-direction:column; gap:40px; padding:16px; }
.case-copy__eyebrow { color:var(--muted); }
.case-copy p,.case-copy h3 { margin:0; font-size:16px; font-weight:400; line-height:normal; }
.case-copy h3 { margin-bottom:12px; font-size:20px; }
.case-media-block { overflow:hidden; border-radius:8px; background:#fff; }
.case-media-block--full { aspect-ratio:16/9; }
.case-media-block--double,.case-media-block--tri { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:var(--gap); aspect-ratio:1029/638.125; background:transparent; }
.case-media-block--double>.case-media,.case-media-block__large,.case-media-block__stack>.case-media { min-width:0; min-height:0; overflow:hidden; border-radius:8px; background:#fff; }
.case-media-block__stack { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:var(--gap); min-width:0; min-height:0; }
.case-media-block--tri-right .case-media-block__stack { order:-1; }
.case-quote { display:flex; flex-direction:column; justify-content:flex-end; gap:24px; min-width:0; min-height:0; margin:0; padding:4%; border-radius:8px; background:#161616; color:#fff; font-size:clamp(10px,1.5vw,34px); }
.case-quote p { margin:0; }
.case-quote footer { color:#ffffff80; }
.case-media { display:block; min-width:0; min-height:0; width:100%; height:100%; border:0; object-fit:cover; object-position:center; background:transparent; }
.case-detail__footer { padding:0; }
.case-reveal { opacity:0; transition:opacity 700ms cubic-bezier(.22,1,.36,1); }
.case-reveal.is-visible { opacity:1; }
.case-detail__footer button:disabled { cursor:default; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .case-reveal { opacity:1; transition:none; }
}
.case-detail__footer button { display:flex; align-items:center; justify-content:center; width:100%; padding:56px 16px; border:0; border-radius:8px; color:#111; background:#f5f5f3; font-size:24px; font-weight:700; line-height:normal; text-transform:uppercase; cursor:pointer; transition:color 300ms cubic-bezier(.22,1,.36,1),background-color 300ms cubic-bezier(.22,1,.36,1),border-radius 300ms cubic-bezier(.22,1,.36,1); }
.case-detail__footer button:hover { border-radius:999px; color:#fff; background:#111; }
@media(min-width:681px) {
  body { overflow:hidden; }
  .case-library { height:100dvh; min-height:0; }
  .case-sidebar,.case-detail { height:100%; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:none; }
  .case-sidebar::-webkit-scrollbar,.case-detail::-webkit-scrollbar { display:none; }
  .case-sidebar>* { flex-shrink:0; }
}
@media(max-width:1100px) {
  .case-card__mark { flex-basis:48px; width:48px; height:48px; }
  .case-card { gap:10px; padding:12px; }
  .case-card strong { font-size:14px; }
  .case-card small { font-size:11px; }
}
@media(max-width:680px) {
  .case-library { display:block; }
  .case-sidebar { position:relative; height:auto; padding:8px; }
  .case-menu-toggle { display:block; align-self:flex-start; border:0; border-radius:100px; padding:12px 16px; background:var(--card); color:var(--ink); font-size:14px; cursor:pointer; }
  .case-logo { position:static; align-self:center; display:block; width:60px; height:20px; margin-top:28px; }
  .case-sidebar__heading { position:static; width:auto; height:auto; margin:16px 0 28px; text-align:center; }
  .case-sidebar__heading h1 { font-size:24px; line-height:normal; }
  .case-list { display:none; margin:0; padding:0; }
  .case-sidebar.is-menu-open .case-list { display:grid; }
  .case-sidebar__footer { position:absolute; top:8px; right:8px; margin:0; padding:14px 8px; border:0; font-size:10px; }
  .case-detail { padding:8px; }
}