/* ═══ THE CASE DOSSIER — components II: index cards, bands, envelope, footer ═══ */

/* ── index cards, pinned slightly crooked ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.card{
  position:relative;background:linear-gradient(176deg,#F3ECDA,#E7DDC6);color:var(--ink);
  border-radius:2px;padding:1.5rem 1.4rem 1.3rem;
  box-shadow:0 10px 24px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.3) inset;
}
.card::before{ /* ruled card lines */
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  background:repeating-linear-gradient(180deg,transparent 0 25px,rgba(107,103,94,.16) 25px 26px);
  border-radius:0 0 2px 2px;pointer-events:none}
.card h3{font-family:var(--serif);color:var(--ink);margin-bottom:.45rem;position:relative}
.card p{font-size:.94rem;color:var(--ink-soft);position:relative}
.card .pin{position:absolute;top:-9px;left:50%;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#D66A55,var(--stamp) 60%,var(--stamp-press));
  box-shadow:0 4px 6px rgba(0,0,0,.5)}
.card:nth-child(odd){transform:rotate(-1.1deg)}
.card:nth-child(even){transform:rotate(.9deg)}
.card:nth-child(3n){transform:rotate(-.4deg)}

/* ── bands: sections of the desk ── */
.band{padding:clamp(4.2rem,9vw,7.5rem) 0;position:relative}
.band--sheetline{border-top:1px dashed rgba(217,199,160,.22)}
.band--paper{ /* the band itself is a huge sheet laid across the desk */
  background:linear-gradient(178deg,var(--bone) 0%,var(--bone-2) 100%);color:var(--ink);
  box-shadow:0 -18px 40px rgba(0,0,0,.45),0 18px 40px rgba(0,0,0,.45)}
.band--paper h2,.band--paper h3{color:var(--ink)}
.band--paper .kick{color:var(--graphite)}
.band--paper .lede{color:var(--ink-soft)}
.band--paper p{color:var(--ink-soft)}

/* ── the envelope CTA ── */
.envelope{position:relative;background:linear-gradient(176deg,var(--manila),var(--manila-2));
  border-radius:4px;padding:clamp(2rem,5vw,3.4rem);
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.3) inset;overflow:hidden}
.envelope::before{ /* the flap */
  content:"";position:absolute;top:0;left:0;right:0;height:46%;
  background:linear-gradient(178deg,rgba(143,124,88,.28),transparent 72%);
  clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}
.envelope h2{color:var(--ink)}
.envelope p{color:var(--ink-soft)}
.envelope .stamp{position:absolute;right:clamp(1rem,4vw,2.6rem);top:clamp(1rem,4vw,2.2rem)}

/* ── footer: the small print, typed ── */
.foot{border-top:1px solid var(--line);padding:2.6rem 0 3.2rem;position:relative;z-index:2}
.foot .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:baseline}
.foot small{font:.72rem/1.7 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--bone)}