/* =========================================================================
   LILY BISSET — Design Leadership page
   dl.css — depends on styles.css + work.css for tokens, nav, footer,
             contact modal, workhead, grain, work-modal
   ========================================================================= */

/* shared inline utility */
.sq{display:inline-block;width:.75em;height:.75em;background:var(--pink);flex:none;margin-right:.65em;vertical-align:baseline;}
.pink{color:var(--pink);}

/* =========================================================================
   PAGE HEADER OVERRIDES (dl-head modifier on .workhead)
   ========================================================================= */
.dl-head .workhead__title{color:#16140f;}
.dl-head .workhead__kicker{color:var(--pink-deep);}

/* =========================================================================
   EDITORIAL — 3 columns
   ========================================================================= */
.dl{
  background:var(--paper);color:var(--ink);
}

.dl-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:2px solid #000;
}

.dl-col{
  padding:clamp(28px,3.2vw,60px) var(--pad);
  border-right:2px solid #000;
  display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px);
}
.dl-cols .dl-col:last-child{border-right:0;}

/* column header: heading + arrow */
.dl-col__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:clamp(4px,0.5vw,8px);
}
.dl-col__heading{display:flex;align-items:flex-start;gap:0;}
.dl-col__heading .sq{margin-top:.22em;}
.dl-col__title{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;
  text-transform:uppercase;line-height:.94;letter-spacing:-.01em;
  font-size:clamp(28px,2.8vw,46px);margin:0;color:var(--ink);
}
.dl-col__arrow{
  font-family:var(--font-mono);font-size:clamp(16px,1.4vw,22px);
  color:var(--pink);flex:none;margin-top:.1em;
}

/* body text */
.dl-col p{
  font-family:var(--font-mono);font-size:clamp(12px,0.94vw,14.5px);
  line-height:1.72;color:#2e2c27;margin:0;text-wrap:pretty;
}

/* horizontal rule */
.dl-rule{
  height:1.5px;background:#c5c0b3;flex:none;
}

/* dot pattern */
.dl-dots{
  width:clamp(60px,8vw,96px);height:clamp(28px,3.5vw,46px);
  background-image:radial-gradient(circle,#0d0d0c 1.4px,transparent 1.4px);
  background-size:9px 9px;
  margin-top:auto;
}

/* =========================================================================
   HOW I WORK (col 3 interior)
   ========================================================================= */
.dl-how{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);}
.dl-how__row{display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,18px);}
.dl-ico{
  flex:none;width:clamp(30px,2.8vw,40px);height:clamp(30px,2.8vw,40px);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  padding:6px;
}
.dl-ico svg{width:100%;height:100%;display:block;}
.dl-ico.is-pink{background:var(--pink);}
.dl-ico.is-orange{background:#d4622a;}
.dl-ico.is-teal{background:#1a7a6e;}
.dl-how__row p{
  font-family:var(--font-mono);font-size:clamp(11.5px,0.9vw,13.5px);
  line-height:1.72;color:#2e2c27;margin:0;text-wrap:pretty;
}

/* =========================================================================
   SELECTED WORK
   ========================================================================= */
.dl-selected{
  border-top:2px solid #000;
  padding:clamp(28px,3vw,52px) var(--pad) clamp(28px,3vw,52px);
}

.dl-sel__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(16px,2vw,32px);flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,36px);
}
.dl-sel__label{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(11px,0.88vw,13px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;
}
.dl-sel__lede{
  font-family:var(--font-mono);font-size:clamp(12px,0.94vw,14px);
  color:#5a564d;letter-spacing:.04em;
}

/* 3-card grid */
.dl-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.2vw,20px);
}

/* image card */
.dl-card{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;
  background:#000;border:2px solid #000;
  cursor:pointer;padding:0;display:block;width:100%;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.dl-card:hover{transform:translateY(-4px);}
.dl-card:focus-visible{outline:3px solid var(--pink);outline-offset:3px;}
.dl-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:left top;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.dl-card:hover img{transform:scale(1.05);}

/* gradient shade — always present, heavier at bottom */
.dl-card__shade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 30%,rgba(10,9,8,.72) 70%,rgba(10,9,8,.92) 100%);
  z-index:1;
}

/* caption bar */
.dl-card__cap{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:clamp(14px,1.5vw,22px) clamp(14px,1.5vw,20px);
}
.dl-card__text{display:flex;flex-direction:column;gap:5px;min-width:0;}
.dl-card__title{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;
  text-transform:uppercase;line-height:.96;letter-spacing:-.01em;
  font-size:clamp(16px,1.6vw,26px);color:var(--white);
}
.dl-card__cap p{
  font-family:var(--font-mono);font-size:clamp(10.5px,0.78vw,12.5px);
  line-height:1.45;color:#cdc8bd;margin:0;max-width:28ch;text-wrap:pretty;
}
.dl-card__arr{
  flex:none;color:var(--pink);font-size:clamp(16px,1.5vw,22px);line-height:1;
  transition:transform .22s ease;
}
.dl-card:hover .dl-card__arr{transform:translate(3px,-3px);}

/* =========================================================================
   CTA
   ========================================================================= */
.dl-cta{
  position:relative;overflow:hidden;
  background:#e9e5db;color:var(--ink);
  border-top:2px solid #000;
  padding:clamp(32px,3.8vw,64px) var(--pad);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:clamp(32px,4vw,72px);
  align-items:center;
}

/* diagonal stripe texture */
.dl-cta__stripes{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,.03) 10px,
    rgba(0,0,0,.03) 20px
  );
}

/* heading row — col 1, row 1 */
.dl-cta__lead{
  grid-column:1;grid-row:1;
  display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);flex-wrap:wrap;
  position:relative;z-index:1;
  margin-bottom:clamp(10px,1.2vw,18px);
}
.dl-cta__heading{display:flex;align-items:center;}
.dl-cta__heading .sq{background:var(--pink);width:.8em;height:.8em;margin-right:.7em;}
.dl-cta__title{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;
  text-transform:uppercase;line-height:.94;letter-spacing:-.012em;
  font-size:clamp(22px,2.8vw,46px);margin:0;color:var(--ink);text-wrap:balance;
}
.dl-cta__squig{
  color:var(--pink);flex:none;
  width:clamp(100px,14vw,220px);
}
.dl-cta__squig svg{display:block;width:100%;height:auto;}

/* body — col 1, row 2 */
.dl-cta__body{
  grid-column:1;grid-row:2;
  font-family:var(--font-mono);font-size:clamp(13px,1.05vw,16.5px);
  line-height:1.7;color:#2e2c27;margin:0;max-width:62ch;text-wrap:pretty;
  position:relative;z-index:1;
}

/* button — col 2, rows 1–2, vertically centred */
.dl-cta__actions{
  grid-column:2;grid-row:1 / span 2;
  display:flex;align-items:center;
  position:relative;z-index:1;
  flex:none;
}
.dl-btn{
  display:inline-flex;align-items:center;gap:.75em;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.16em;
  font-size:clamp(12px,0.9vw,14px);text-transform:uppercase;
  border:2px solid #000;cursor:pointer;
  padding:.9em 1.5em;line-height:1;transition:.2s ease;
  white-space:nowrap;
}
.dl-btn.is-pink{
  background:var(--pink);border-color:var(--pink);color:#fff;
  box-shadow:4px 4px 0 rgba(0,0,0,.12);
}
.dl-btn.is-pink:hover{background:var(--pink-deep);border-color:var(--pink-deep);transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.08);}

/* decorative plus mark */
.dl-cta__plus{
  position:absolute;right:var(--pad);bottom:clamp(18px,2.2vw,36px);
  width:clamp(32px,3.5vw,52px);height:clamp(32px,3.5vw,52px);
  z-index:1;pointer-events:none;
}
.dl-cta__plus::before,
.dl-cta__plus::after{
  content:"";position:absolute;background:var(--pink);border-radius:1px;
}
.dl-cta__plus::before{top:50%;left:0;right:0;height:2.5px;transform:translateY(-50%);}
.dl-cta__plus::after{left:50%;top:0;bottom:0;width:2.5px;transform:translateX(-50%);}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:960px){
  .dl-cols{grid-template-columns:1fr;}
  .dl-col{border-right:0;border-bottom:2px solid #000;}
  .dl-cols .dl-col:last-child{border-bottom:0;}
  .dl-cards{grid-template-columns:1fr;}
  .dl-card{aspect-ratio:16/9;}
}
@media (max-width:600px){
  .dl-cta{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .dl-cta__lead{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;margin-bottom:clamp(8px,1vw,12px);}
  .dl-cta__body{grid-column:1;grid-row:2;}
  .dl-cta__actions{grid-column:1;grid-row:3;margin-top:clamp(16px,2vw,24px);}
  .dl-cta__squig{display:none;}
}