/* ============================================================
   PDFeyes: cards
   ============================================================
   Two kinds, and only two.

   The default card is white with a hairline border and a shadow you notice
   only when it is missing. It holds a heading, a line of copy and, where the
   page has one, a number. Several of them in a row read as one calm surface
   rather than a row of buttons.

   The ink card is navy with white text. It is the emphasis: one per group,
   usually the point the page is making. Using it for every card would turn
   it back into what the old solid orange blocks were, which is noise.

   The statistic sits in the display serif at size. It is the thing people
   came for, so it gets the weight and nothing else competes with it.

   Motion is small and only on cards that are links: a lift of three
   pixels, a deeper shadow, the arrow sliding. A surface that moves under
   the cursor promises a click, so static cards stay still.
   ============================================================ */

:root{
  --fill-slate:#FFFFFF;  --on-slate:var(--ink);
  --fill-ink:var(--navy); --on-ink:#FFFFFF;
  --on-dark-muted:#AEB7C6;
  --card-radius:18px;
}

.blocks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin:36px 0 0;
}
.blocks.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}

.block{
  position:relative;
  border-radius:var(--card-radius);
  padding:28px 28px 30px;
  background:var(--fill-slate);
  color:var(--on-slate);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease;
}
a.block{display:block; text-decoration:none;}
a.block:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--rule-strong);}
a.block:focus-visible{outline:2px solid var(--navy); outline-offset:3px;}

.block .b-icon{
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-2);
  border:1px solid var(--rule);
  color:var(--navy);
  margin-bottom:20px;
  transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
a.block:hover .b-icon{transform:translateY(-2px);}
.block .b-icon svg{width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

.block h3{
  font-family:var(--font); font-size:17.5px; font-weight:600;
  letter-spacing:-0.012em; line-height:1.3; margin:0 0 8px; color:inherit;
}
.block p{
  font-size:14.5px; line-height:1.6; margin:0;
  color:var(--ink-soft); max-width:44ch;
}
.block .b-num{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--accent); display:block; margin-bottom:14px; font-weight:600;
}
.block .b-go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; margin-top:18px; color:var(--navy);
}
.block .b-go svg{width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; transition:transform .24s cubic-bezier(.2,.7,.3,1);}
a.block:hover .b-go svg{transform:translateX(4px);}

/* The statistic */
.block .b-stat{
  font-family:var(--font-display); font-size:clamp(36px,4.2vw,50px);
  font-weight:500; letter-spacing:-0.04em; line-height:1;
  display:block; margin-bottom:14px; color:var(--navy);
  font-variant-numeric:lining-nums;
}

/* Ink: the emphasis card */
.block.ink{
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(164 80 42 / .22), transparent 55%),
    var(--fill-ink);
  color:var(--on-ink); border-color:var(--navy);
  box-shadow:var(--shadow);
}
.block.ink p{color:var(--on-dark-muted);}
.block.ink .b-stat{color:#FFFFFF;}
.block.ink .b-num{color:#E3B79E;}
.block.ink .b-go{color:#FFFFFF;}
.block.ink .b-icon{background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .14); color:#FFFFFF;}

.block .b-sub{font-size:12.5px; font-weight:600; margin:-4px 0 12px; letter-spacing:.01em; color:var(--ink-faint);}
.block.ink .b-sub{color:var(--on-dark-muted);}

/* A wide block that spans the grid, for the one point that carries the page. */
.block.wide{grid-column:1 / -1; padding:36px 34px 38px;}
.block.wide h3{font-size:clamp(21px,2.4vw,28px); max-width:22ch; font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em;}
.block.wide p{font-size:16px; max-width:58ch;}

/* Solid button used inside card sections */
.btn-block{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--navy); color:#FFFFFF;
  border:1px solid var(--navy); border-radius:12px;
  padding:14px 24px; font-family:var(--font); font-size:15px; font-weight:600;
  cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / .08);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background .18s ease, box-shadow .18s ease;
}
.btn-block:hover{background:var(--navy-2); transform:translateY(-1px); box-shadow:var(--shadow);}
.btn-block:focus-visible{outline:2px solid var(--navy); outline-offset:3px;}
.btn-block svg{width:17px; height:17px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; transition:transform .18s cubic-bezier(.2,.7,.3,1);}
.btn-block:hover svg{transform:translateX(4px);}

@media (prefers-reduced-motion: reduce){
  .block, .block *, .btn-block, .btn-block *{transition:none !important;}
  a.block:hover, .btn-block:hover{transform:none;}
}
@media (max-width:560px){
  .block{padding:22px 20px 24px;}
  .block.wide{padding:26px 22px 28px;}
}