/* Case studies — the index and the four detail pages. One sheet rather than
   five inline copies: the pages are near-identical in shape, and the repo has
   already learned (check 13) what happens when a block is duplicated verbatim
   across five files. */

.cs{padding:64px 0 96px}
.cs .wrap{max-width:840px}
.cs-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.10em;
            text-transform:uppercase;color:var(--accent-deep);margin:0 0 14px}
.cs h1{font-family:'Dazzed',Arial,sans-serif;font-weight:500;font-size:clamp(28px,4.2vw,42px);
       letter-spacing:-.02em;line-height:1.12;color:var(--espresso);margin:0}
.cs-lead{font-size:17px;line-height:1.7;color:var(--espresso-soft);margin:20px 0 0;max-width:64ch}
.cs h2{font-family:'Dazzed',Arial,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.01em;
       color:var(--espresso);margin:46px 0 16px}
/* :where() zeroes these four, deliberately. As `.cs p` and `.cs ul` they are
   (0,1,1) and out-specify every single-class component rule below — .cs-eyebrow,
   .cs-lead, .cs-stats, .cs-meta and .cs-grid are all (0,1,0), so for any property
   both declare, the rule at the top of the file won. The eyebrow rendered as grey
   body text instead of a small olive label, and the stat tiles, the meta row and
   the card grid all carried `margin-left:22px` from the list rule, inset from
   everything above them. These four are the prose defaults; they should lose every
   argument with a class. */
:where(.cs) p{font-size:15px;line-height:1.75;color:var(--espresso-soft);margin:0 0 15px}
:where(.cs) a{color:var(--evergreen);font-weight:600}
:where(.cs) ul{margin:0 0 15px 22px;padding:0}
:where(.cs) li{font-size:15px;line-height:1.7;color:var(--espresso-soft);margin-bottom:8px}

/* The era note. Every one of these engagements predates the product on sale
   today, and saying so once, prominently, is the whole reason they can be
   published at all. */
.cs-era{background:var(--ivory-2);border-left:3px solid var(--accent-deep);
        border-radius:0 12px 12px 0;padding:20px 22px 6px;margin:32px 0 0}
.cs-era p{font-size:14.5px}
.cs-era p:last-child{margin-bottom:15px}
.cs-era strong{color:var(--espresso)}

.cs-logo{height:30px;width:auto;margin:0 0 22px;display:block}

.cs-stats{list-style:none;display:grid;gap:14px;grid-template-columns:1fr;margin:34px 0 0;padding:0}
@media (min-width:640px){.cs-stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.cs-stats li{background:var(--surface);border:1px solid var(--line);border-radius:14px;
             padding:20px 20px 18px;margin:0}
.cs-stats .n{display:block;font-family:'Dazzed',Arial,sans-serif;font-weight:600;
             font-size:30px;line-height:1.05;letter-spacing:-.02em;color:var(--espresso)}
.cs-stats .l{display:block;margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--espresso-soft)}

.cs-meta{list-style:none;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);
         display:flex;flex-wrap:wrap;gap:8px 26px}
.cs-meta li{font-size:13.5px;color:var(--espresso-soft);margin:0}
.cs-meta strong{color:var(--espresso);font-weight:600}

.cs-q{margin:30px 0;padding:22px 24px;background:var(--surface);border:1px solid var(--line);
      border-radius:14px}
.cs-q blockquote{margin:0;font-size:16px;line-height:1.65;color:var(--espresso)}
.cs-q figcaption{margin-top:12px;font-size:13.5px;color:var(--espresso-soft)}
.cs-q figcaption b{color:var(--espresso);font-weight:600}

/* Index cards */
.cs-grid{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:16px}
@media (min-width:700px){.cs-grid{grid-template-columns:1fr 1fr}}
.cs-grid li{margin:0}
.cs-card{display:block;height:100%;background:var(--surface);border:1px solid var(--line);
         border-radius:16px;padding:24px 24px 22px;text-decoration:none}
.cs-card:hover{border-color:var(--accent-deep)}
.cs-card img{height:26px;width:auto;display:block;margin-bottom:16px}
/* An <h2> so the index has headings to navigate by: with the titles as spans a
   screen-reader user got nothing between the <h1> and the footer. */
.cs-card .t{display:block;margin:0;font-family:'Dazzed',Arial,sans-serif;font-weight:600;
            font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--espresso)}
.cs-card .d{display:block;margin-top:10px;font-size:14px;font-weight:400;line-height:1.6;color:var(--espresso-soft)}
.cs-card .go{display:block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--evergreen)}

.cs-back{display:inline-block;margin:0 0 22px;font-size:13.5px;font-weight:600;color:var(--evergreen)}
.cs-next{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line-soft)}