/* Content cards (writing, case studies). Moved unchanged from the inline
   styles of the old blog.html; used by the library pages and the homepage. */
/* FEATURED CARD */
.card-featured { text-decoration:none; color:inherit; grid-column:1/-1; background:var(--card, #ffffff); border-radius:10px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; box-shadow:0 2px 32px rgba(0,0,0,.07); animation:rise .6s ease both; }
.card-featured-img { position:relative; background:#efefef; overflow:hidden; min-height:420px; }
.card-featured-img img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.card-featured-badge { position:absolute; top:1.2rem; left:1.2rem; background:#b8f0c8; font-family:"Martian Mono",monospace; font-size:0.52rem; font-weight:500; letter-spacing:0.1em; padding:0.3rem 0.8rem; border-radius:100px; color:var(--black, #0a0a0a); }
.card-featured-body { padding:3rem 3.5rem; display:flex; flex-direction:column; justify-content:space-between; }
.card-tag { display:inline-block; border:1px solid rgba(0,0,0,.15); border-radius:100px; font-family:"Martian Mono",monospace; font-size:0.5rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(0,0,0,.5); padding:0.25rem 0.8rem; margin-bottom:1.5rem; }
.card-featured-h { font-family:"HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:clamp(1.5rem,2.1vw,2.1rem); line-height:1.1; letter-spacing:-0.025em; color:var(--black, #0a0a0a); font-weight:900; margin-bottom:1.5rem; }
.card-featured-h em { font-style:normal; color:rgba(0,0,0,.22); }
.card-divider { width:32px; height:1px; background:rgba(0,0,0,.15); margin-bottom:1.5rem; }
.card-excerpt { font-size:0.72rem; line-height:1.95; color:rgba(0,0,0,.5); margin-bottom:1.25rem; }
.card-pull-quote { font-family:"Martian Mono",monospace; font-size:0.72rem; line-height:1.9; color:var(--black, #0a0a0a); border-left:2px solid var(--black, #0a0a0a); padding-left:1rem; margin-bottom:1.25rem; }
.card-bold { font-size:0.7rem; font-weight:500; line-height:1.9; color:var(--black, #0a0a0a); margin-bottom:1.5rem; }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:1.5rem; border-top:1px solid rgba(0,0,0,.06); }
.card-meta { font-family:"Martian Mono",monospace; font-size:0.52rem; letter-spacing:0.1em; color:rgba(0,0,0,.3); }
.card-read-btn { font-family:"Martian Mono",monospace; font-size:0.52rem; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; color:var(--white, #ffffff); background:var(--black, #0a0a0a); padding:0.6rem 1.4rem; border-radius:100px; transition:opacity .2s; }
.card-featured:hover .card-read-btn { opacity:0.7; }

/* SECONDARY CARDS */
.card-secondary { text-decoration:none; color:inherit; background:var(--card, #ffffff); border-radius:10px; overflow:hidden; box-shadow:0 2px 24px rgba(0,0,0,.06); display:flex; flex-direction:column; animation:rise .6s ease both; }
.card-secondary:nth-child(2) { animation-delay:.1s; }
.card-secondary:nth-child(3) { animation-delay:.2s; }
.card-secondary:nth-child(4) { animation-delay:.3s; }
.card-secondary-img { overflow:hidden; }
.card-secondary-img img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; display:block; transition:transform .4s ease; }
.card-secondary:hover .card-secondary-img img { transform:scale(1.03); }
.card-dark-img { background:var(--black, #0a0a0a); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.card-dark-img img { width:100%; height:100%; object-fit:cover; opacity:0.55; transition:transform .4s ease,opacity .4s ease; }
.card-secondary:hover .card-dark-img img { transform:scale(1.03); opacity:0.65; }
.card-dark-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,0.7) 100%); }
.card-dark-text { position:absolute; bottom:1.2rem; left:1.2rem; right:1.2rem; }
.card-dark-text h3 { font-family:"HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1.15rem; line-height:1.15; letter-spacing:-0.02em; color:#fff; font-weight:900; }
.card-dark-text h3 em { font-style:normal; color:rgba(255,255,255,.5); }
.card-arc { position:absolute; top:1rem; left:1rem; opacity:0.6; }
.card-secondary-body { padding:1.5rem 1.8rem 1.8rem; display:flex; flex-direction:column; flex:1; }
.card-eyebrow { font-family:"Martian Mono",monospace; font-size:0.5rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(0,0,0,.3); margin-bottom:0.6rem; }
.card-secondary-h { font-family:"HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1.1rem; line-height:1.2; letter-spacing:-0.02em; color:var(--black, #0a0a0a); font-weight:900; margin-bottom:0.75rem; }
.card-secondary-h em { font-style:normal; color:rgba(0,0,0,.22); }
.card-secondary-p { font-size:0.68rem; line-height:1.9; color:rgba(0,0,0,.45); flex:1; margin-bottom:1.2rem; }
.card-secondary-footer { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; border-top:1px solid rgba(0,0,0,.05); }
.card-arrow { font-family:"Martian Mono",monospace; font-size:0.52rem; letter-spacing:0.1em; color:rgba(0,0,0,.35); transition:color .2s,transform .2s; display:inline-block; }
.card-secondary:hover .card-arrow { color:var(--black, #0a0a0a); transform:translateX(3px); }

@keyframes rise { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

@media(max-width:900px){
  .card-featured{grid-template-columns:1fr;}
  .card-featured-img{min-height:240px;}
  .card-featured-body{padding:2rem;}
}

/* ═══ Study card (case studies) ══════════════════════════════════════
   White card: category pill, number badge, title, line, photo panel. */
.card-study {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  padding: 1.3rem 1.3rem 1.3rem;
  text-decoration: none;
  color: #0a0a0a;
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.07);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-study:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0,0,0,.05), 0 20px 44px rgba(0,0,0,.11); }
.card-study-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.card-study-tag {
  font-family: "Martian Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #0a0a0a;
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.card-study-title {
  font-family: "HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}
.card-study-line {
  font-family: "Martian Mono", monospace;
  font-size: 0.64rem;
  line-height: 1.75;
  color: rgba(0,0,0,.6);
  margin: 0 0 1.6rem;
  flex: 1;
}
.card-study-media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: #e4e4e4;
}
.card-study-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.card-study:hover .card-study-media img { transform: scale(1.04); }
.card-study-media::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.65));
}
.card-study-caption {
  position: absolute;
  left: 1rem;
  right: 3.6rem;
  bottom: 0.9rem;
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.card-study-product { font-family: "HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; font-size: 0.9rem; }
.card-study-meta { font-family: "Martian Mono", monospace; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.card-study-arrow {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 1;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #fff;
  color: #0a0a0a;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  transition: transform .2s;
}
.card-study-credit {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  z-index: 1;
  font-family: "Martian Mono", monospace;
  font-size: 0.42rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(0,0,0,.35);
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
}
.card-study:hover .card-study-arrow { transform: rotate(45deg); }

/* library grid */
.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
}
.study-group-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.8rem; }
.study-group-label {
  font-family: "Martian Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin-bottom: 0.7rem;
}
.study-group-h {
  font-family: "HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 900;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.03em;
  margin: 0;
}
.study-group-count {
  font-family: "Martian Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
}
.lib-stats {
  font-family: "Martian Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}
.lib-stats span + span::before { content: "·"; margin-right: 1.6rem; color: rgba(0,0,0,.3); }