/* case-study pages: /work/ and /work/<slug>/ (built by tools/build_work.py) */
.cs-page .nav{position:sticky;top:0}
.cs{padding:clamp(28px,4vw,56px) 0 0}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--fg-dim);margin-bottom:var(--gap-1)}
.crumbs a{color:var(--fg-dim)}.crumbs a:hover{color:var(--fg)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs span{color:var(--fg)}
.cs-head{max-width:900px}
.cs-head h1{
  font-size:clamp(34px,5.4vw,68px);line-height:1.02;letter-spacing:-.035em;font-weight:800;
  font-variation-settings:"opsz" 96;margin:6px 0 4px;text-wrap:balance;
}
.cs-head .tag{color:var(--fg-dim)}
.cs-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cs-media{margin-top:var(--gap-2)}
.cs-shot{border-radius:var(--r-3);overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.cs-shot img{width:100%;height:auto;display:block}
.cs-phones{display:grid;gap:clamp(12px,2vw,28px);align-items:center;max-width:1000px;margin-inline:auto}
.cs-phones.n2{grid-template-columns:repeat(2,minmax(0,280px));justify-content:center}
.cs-phones.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-phones .phone:nth-child(odd){transform:translateY(14px)}
.cs-phones .phone:nth-child(even){transform:translateY(-14px)}
.cs-page .phone{display:block;border-radius:clamp(20px,2.2vw,30px);padding:5px;background:#100E10;border:1px solid var(--line);box-shadow:0 22px 44px -14px rgba(0,0,0,.6)}
.cs-page .phone img{width:100%;height:auto;display:block;border-radius:clamp(16px,1.8vw,25px)}
@media(max-width:700px){.cs-phones.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);margin-top:var(--gap-3);align-items:start}
.cs h2{font-size:clamp(26px,2.8vw,38px);letter-spacing:-.03em;font-weight:700;font-variation-settings:"opsz" 32;margin-bottom:16px}
.cs-brief p{color:var(--fg-dim);font-size:clamp(16.5px,1.3vw,18.5px);max-width:60ch}
.cs-brief p+p{margin-top:14px}
.cs-facts{border:1px solid var(--line);border-radius:var(--r-3);padding:var(--pad-card);background:var(--bg-alt)}
.cs-facts div{padding:12px 0;border-bottom:1px solid var(--line)}
.cs-facts div:first-child{padding-top:0}.cs-facts div:last-child{border:0;padding-bottom:0}
.cs-facts dt{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:4px}
.cs-facts dd{font-size:15.5px}
.cs-built{margin-top:var(--gap-3)}
.cs-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.cs-list li{border:1px solid var(--line);border-radius:var(--r-3);padding:var(--pad-card);background:var(--bg-alt)}
.cs-list h3{font-size:18.5px;letter-spacing:-.015em;margin-bottom:8px}
.cs-list h3::before{content:"";display:block;width:22px;height:3px;border-radius:2px;background:var(--tang);margin-bottom:14px}
.cs-list p{color:var(--fg-dim);font-size:15.5px}
@media(max-width:960px){.cs-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cs-body{grid-template-columns:minmax(0,1fr)}.cs-list{grid-template-columns:minmax(0,1fr)}}
.cs-mobile{margin-top:var(--gap-3)}
.cs-mobile-in{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-3);padding:clamp(24px,4vw,52px);background:var(--bg-alt)}
.cs-mobile p{color:var(--fg-dim);font-size:17px;max-width:48ch}
@media(max-width:620px){.cs-mobile-in{grid-template-columns:minmax(0,1fr)}.cs-mobile-in .phone{max-width:230px;margin-inline:auto}}
.cs-cta{margin-top:var(--gap-3);text-align:center;padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-cta p{color:var(--fg-dim);font-size:17px;max-width:52ch;margin:0 auto 28px}
.cs-more{padding-block:var(--gap-3)}
.cs-more .util{font-size:12px;margin-bottom:var(--gap-1);font-weight:700}
.cs-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}
.cs-more-card{display:block;border:1px solid var(--line);border-radius:var(--r-3);padding:var(--pad-card);transition:border-color .2s,transform .3s var(--ease)}
.cs-more-card:hover{border-color:var(--tang);transform:translateY(-3px)}
.cs-more-card b{display:block;font-size:19px;margin-bottom:6px}
.cs-more-card span{color:var(--fg-dim);font-size:15px}
@media(max-width:760px){.cs-more-grid{grid-template-columns:minmax(0,1fr)}}
.cs .case-link{color:var(--fg)}
.cs .case-link:hover{color:var(--tang)}
/* /work/ index */
.wk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin-top:var(--gap-2)}
.wk-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-3);padding:clamp(14px,1.6vw,20px);background:var(--bg-alt);transition:border-color .2s,transform .4s var(--ease)}
.wk-card:hover{border-color:rgba(255,92,53,.6);transform:translateY(-4px)}
.wk-shot,.wk-phones{display:block;border-radius:var(--r-2);overflow:hidden;margin-bottom:18px;aspect-ratio:1760/1148;background:#0c0a09}
.wk-shot img{width:100%;height:100%;object-fit:cover;display:block}
.wk-phones{display:grid;grid-template-columns:repeat(2,minmax(0,31%));justify-content:center;align-content:center;gap:5%;padding:4% 0 0}
.wk-phones .phone{padding:3px;border-radius:18px}.wk-phones .phone img{border-radius:15px}
.wk-card .tags{margin-bottom:10px}
.wk-card h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:6px}
.wk-card p{color:var(--fg-dim);font-size:15.5px;flex:1}
.wk-card .case-link{align-self:flex-start;margin-top:16px}
@media(max-width:760px){.wk-grid{grid-template-columns:minmax(0,1fr)}}
.cs-cta h2{margin-inline:auto;max-width:22ch}
/* guides (tools/build_guides.py) */
.gd-sec{margin-top:var(--gap-3)}
.gd-tiers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.gd-tiers>li{border:1px solid var(--line);border-radius:var(--r-3);padding:var(--pad-card);background:var(--bg-alt)}
.gd-tier{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)}
.gd-price{font-family:inherit;font-size:clamp(34px,3.4vw,46px);font-weight:700;letter-spacing:-.03em;color:var(--tang);margin:6px 0 8px}
.gd-for{color:var(--fg-dim);font-size:15.5px;margin-bottom:14px}
.gd-tiers ul{list-style:none;padding:0;border-top:1px solid var(--line)}
.gd-tiers ul li{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.gd-note{color:var(--fg-dim);margin-top:18px;font-size:15.5px}
.gd-note a,.gd .cs-brief a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.gd-ask{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,80px)}
.gd-ask div{padding:18px 0;border-top:1px solid var(--line)}
.gd-ask dt{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.gd-ask dd{color:var(--fg-dim);font-size:15.5px;max-width:52ch}
@media(max-width:860px){.gd-tiers{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.gd-ask{grid-template-columns:minmax(0,1fr)}}
.gd h2{max-width:none}