/* Stella's Games: the few pieces the case study needs beyond site.css. */
.cs-head .links{margin:0 0 40px}
.cs-sec .txt ul{padding-left:1.1em;margin:0 0 1em;font-size:17px}
.cs-sec .txt li{margin-bottom:6px}

/* the palette, as her games use it */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 16px}
.sw{border-radius:22px;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px;
  font-size:15px;line-height:1.3;color:#5A4038;box-shadow:inset 0 0 0 1px rgba(90,64,56,.1)}
.sw b{font-weight:500}
.sw span{opacity:.75;font-variant-numeric:tabular-nums}
.sw.ink{color:#FFF8EE}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.rules div{background:#FFF8EE;border-radius:22px;padding:18px 20px;color:#5A4038}
.rules b{display:block;font-size:30px;letter-spacing:-.02em;line-height:1.05;margin-bottom:6px}
.rules span{font-size:15px;line-height:1.4;display:block}

/* one game's ladder, easiest first */
.ladder{list-style:none;margin:0;padding:24px;background:#FFF8EE;border-radius:22px;display:grid;gap:7px;color:#5A4038}
.ladder li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;font-size:15px;line-height:1.3}
.ladder li i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.6;text-align:right}
.ladder li span{position:relative;padding:7px 12px;border-radius:12px;background:#FFFFFF;box-shadow:0 3px 0 rgba(90,64,56,.08)}
.ladder li span::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:12px;background:#F7B6C2;opacity:.45}
.ladder li span em{position:relative;font-style:normal}
.ladder-note{font-size:15px;color:var(--mute);margin-top:10px}

/* what she practises */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 32px;margin:0 0 24px}
.skills div{border-top:1px solid var(--line);padding-top:12px}
.skills dt{font-weight:500;margin-bottom:4px}
.skills dd{margin:0;font-size:16px;color:var(--mute);line-height:1.45}

@media (max-width:900px){.skills{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .swatches{grid-template-columns:repeat(2,1fr)}
  .rules,.skills{grid-template-columns:1fr}
  .ladder{padding:16px}
}