/* case study pages (/work/...): uses the tokens and base styles in site.css */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* first screen */
.cs-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,96px);align-items:center;padding:132px var(--gut) clamp(64px,8vw,112px)}
.cs-hero-index{grid-template-columns:minmax(0,1fr);padding-bottom:clamp(48px,6vw,80px)}
.cs-crumb{margin:0 0 22px;font-size:14px}
.cs-crumb a{color:var(--ivory-2);text-decoration:none;border-bottom:1px solid var(--wine);padding-bottom:3px}
.cs-crumb a:hover{color:var(--brass)}
.cs-hero h1{font:400 clamp(44px,5.6vw,88px)/1.02 var(--serif);letter-spacing:-.01em;max-width:12ch}
.cs-kind{font-size:15px;color:var(--rose);margin:16px 0 26px}
.cs-lede{font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--ivory-2);max-width:46ch}
.cs-hero-index .cs-lede{margin-top:24px}
.cs-facts{display:flex;flex-wrap:wrap;gap:12px 40px;margin:28px 0 22px;padding:18px 0;border-top:1px solid var(--wine);border-bottom:1px solid var(--wine)}
.cs-facts dt{font-size:13px;color:var(--rose)}
.cs-facts dd{margin:4px 0 0;font:400 20px/1.2 var(--serif)}
.cs-hero .link{color:var(--ivory)}
.cs-hero-shot{margin:0}

/* screenshots: the desktop page in a paper frame, the phone overlapping its corner */
.cs-shots{position:relative;padding:0 6% 7% 0}
.cs-frame{background:var(--paper);padding:2.2%;box-shadow:0 30px 60px -32px rgba(0,0,0,.6)}
.cs-frame img{width:100%;height:auto}
.cs-phone{position:absolute;right:0;bottom:0;width:21%;height:auto;border:5px solid #17110f;border-radius:16px;box-shadow:0 22px 44px -20px rgba(0,0,0,.6);background:#17110f}

/* before and after */
.cs-ba{padding:var(--sec) var(--gut)}
.cs-ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px);margin-top:clamp(36px,5vw,64px);align-items:start}
.cs-side{margin:0}
.cs-side h3{font:400 clamp(26px,2.4vw,36px)/1.1 var(--serif);margin:0 0 20px}
.cs-side figcaption{font-size:14px;color:var(--ink-2);margin-top:14px}
.cs-ba .cs-frame{box-shadow:0 26px 50px -30px rgba(30,13,17,.45)}
.cs-h{font:400 clamp(28px,2.8vw,42px)/1.1 var(--serif);margin:0 0 24px}
.cs-wrong{margin-top:clamp(56px,7vw,104px);max-width:980px}
.cs-wrong ul,.cs-built-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cs-wrong li{padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}

/* results */
.cs-results{padding:var(--sec) var(--gut)}
.cs-res-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px clamp(32px,6vw,120px);align-items:start;margin-bottom:clamp(36px,5vw,64px)}
.cs-res-head p{color:var(--ivory-2);max-width:56ch}
.cs-tables{display:grid;gap:40px;max-width:980px}
.cs-table{width:100%;border-collapse:collapse;font-size:16px}
.cs-table caption{text-align:left;font-size:14px;color:var(--rose);padding-bottom:12px;caption-side:top}
.cs-table thead th{text-align:right;font-weight:500;font-size:13px;color:var(--rose);padding:0 0 10px 16px;border-bottom:1px solid var(--wine)}
.cs-table tbody th{text-align:left;font-weight:400;color:var(--ivory-2);padding:16px 16px 16px 0;border-bottom:1px solid var(--wine)}
.cs-table td{text-align:right;padding:16px 0 16px 16px;border-bottom:1px solid var(--wine);font:400 26px/1 var(--serif);white-space:nowrap}
.cs-table td:last-child{color:var(--brass)}
.cs-method{max-width:980px;margin:36px 0 28px;font-size:14px;line-height:1.6;color:var(--rose)}
.cs-method p{margin:0 0 .7em}
.cs-results .link{color:var(--ivory)}

/* what they needed, what we built */
.cs-built{padding:var(--sec) var(--gut)}
.cs-needed{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px clamp(32px,6vw,120px);margin-bottom:clamp(64px,8vw,120px)}
.cs-needed p{color:var(--ink-2);font-size:18px;max-width:52ch}
.cs-built-list li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px clamp(32px,6vw,120px);padding:24px 0;border-bottom:1px solid var(--rule)}
.cs-built-list h3{font:400 clamp(22px,2vw,30px)/1.15 var(--serif)}
.cs-built-list p{margin:0;color:var(--ink-2);max-width:56ch}

/* questions */
.cs-faq{padding:var(--sec) var(--gut);background:var(--cream-2);color:var(--ink)}
.cs-faq .h2{margin-bottom:clamp(32px,4vw,56px)}
.cs-faq .qa summary{font-size:clamp(20px,1.8vw,26px)}

/* next case */
.cs-next{padding:clamp(72px,9vw,128px) var(--gut)}
.cs-next-k{font:500 14px/1 var(--sans);color:var(--rose);margin:0 0 18px}
.cs-next-link{display:inline-flex;flex-direction:column;gap:12px;text-decoration:none}
.cs-next-name{font:400 clamp(44px,7vw,108px)/1 var(--serif);transition:color .25s,transform .45s cubic-bezier(.2,.7,.2,1)}
.cs-next-kind{font-size:15px;color:var(--ivory-2)}
.cs-next-link:hover .cs-next-name{color:var(--brass);transform:translateX(12px)}
.cs-back{margin:44px 0 0}
.cs-back .link{color:var(--ivory)}

/* the list of case studies */
.wk-list{padding:clamp(72px,9vw,128px) var(--gut);display:grid;gap:clamp(56px,7vw,96px)}
.wk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.wk-shot{display:block;background:var(--paper);padding:2%;box-shadow:0 26px 50px -30px rgba(30,13,17,.45)}
.wk-shot img{width:100%;height:auto}
.wk h2{font:400 clamp(30px,3vw,48px)/1.05 var(--serif);margin:0 0 8px}
.wk h2 a{text-decoration:none}
.wk h2 a:hover{color:var(--ink-2)}
.wk-kind{font-size:14px;color:var(--ink-3)}
.wk p{color:var(--ink-2)}
.wk-lead{font-size:15px;color:var(--ink)}
.wk .link{color:var(--ink)}

@media (max-width:900px){
  .cs-hero{grid-template-columns:1fr;padding-top:100px}
  .cs-hero-shot{order:-1}
  .cs-ba-grid,.cs-res-head,.cs-needed,.cs-built-list li,.wk{grid-template-columns:1fr}
  .cs-table td{font-size:22px}
  .cs-table tbody th{font-size:15px}
}
.cs-frame video{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#120709}
video.cs-phone{aspect-ratio:440/952;object-fit:cover}