/* =========================================================================
   demirdelen.com/resources — index of playbooks and writing.
   Extends styles.css tokens. Zero dependencies.
   ========================================================================= */

/* ---------- Hero ---------- */
.res-hero{position:relative;overflow:hidden;padding-top:clamp(28px,6vw,68px);padding-bottom:clamp(10px,2.5vw,26px)}
.res-hero-inner{position:relative;z-index:2;max-width:820px}

.res-crumb{
  display:flex;align-items:center;gap:.55rem;margin-bottom:1.6rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)
}
.res-crumb a{color:var(--muted);transition:color var(--t)}
.res-crumb a:hover{color:var(--text)}
.res-crumb span[aria-hidden]{opacity:.5}
.res-crumb span[aria-current]{color:var(--text)}

.res-hero-title{
  font-family:var(--font-serif);font-weight:390;font-optical-sizing:auto;
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem);line-height:1.02;letter-spacing:-.027em;
  text-wrap:balance;margin-bottom:1.3rem
}
.res-hero-lede{
  font-size:var(--fs-lead);color:var(--text-soft);max-width:56ch;line-height:1.6;
  font-weight:380;text-wrap:pretty
}

/* ---------- Grid ---------- */
.res-list{padding-top:clamp(34px,5vw,64px)}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2.2vw,1.5rem)}
@media (max-width:860px){ .res-grid{grid-template-columns:1fr} }

.res-card{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;
  transition:transform .5s var(--ease),border-color var(--t),box-shadow var(--t),background-color var(--t)
}
.res-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:var(--shadow)
}

/* Cards are uniform: cover art on top at its natural ratio, body below.
   Keeps every card the same shape as the index grows, and never crops the art. */
.res-hit{display:flex;flex-direction:column;height:100%;color:inherit}

.res-media{
  position:relative;display:block;overflow:hidden;background:var(--bg-3);
  aspect-ratio:1200/630;border-bottom:1px solid var(--line-soft)
}
/* picture is the direct child, so it has to stretch or the img can't fill the band */
.res-media picture{display:block;width:100%;height:100%}
.res-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.res-card:hover .res-media img{transform:scale(1.035)}
.res-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 62%,color-mix(in srgb,var(--bg) 45%,transparent));
  opacity:.75
}

.res-body{display:flex;flex-direction:column;gap:.85rem;padding:clamp(1.4rem,3vw,2.1rem);flex:1}

.res-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem}
.res-tag{
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent-grad);padding:.3rem .6rem;border-radius:6px
}
.res-tag-soon{background:none;color:var(--faint);border:1px dashed var(--line);font-weight:500}
.res-date,.res-read{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)
}
.res-read::before{content:"·";margin-right:.9rem;opacity:.5}

.res-title{
  display:block;font-family:var(--font-serif);font-weight:440;letter-spacing:-.018em;line-height:1.12;
  font-size:clamp(1.4rem,1.15rem + 1.05vw,1.95rem);color:var(--text)
}
.res-desc{color:var(--muted);font-size:.99rem;line-height:1.62;max-width:56ch}
.res-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.15rem}
.res-cta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.6rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);transition:gap .35s var(--ease)
}
.res-cta svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.res-card:hover .res-cta svg{transform:translateX(4px)}

/* Placeholder card for work that isn't published yet */
.res-soon{
  border-style:dashed;background:none;
  display:flex;align-items:center
}
.res-soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.res-soon .res-title{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);color:var(--text-soft)}
.res-soon .res-desc{font-size:.95rem}

/* ---------- Contact tweak ---------- */
.res-list + .contact{padding-top:clamp(20px,3vw,40px)}

@media (max-width:640px){
  .res-body{gap:.65rem;padding:1.3rem 1.25rem}
  .res-desc{font-size:.94rem}
}