/* ============================================================
   MOTHERCRAFT — deck cover + sample cards
   Recreated from the real "50 Ways to Be With" deck art.
   ============================================================ */

/* ---------------- DECK COVER ---------------- */
.deck-cover{
  position:relative;aspect-ratio:1.46/1;width:100%;overflow:hidden;
  border-radius:18px;color:var(--on-dark);
  background:
    radial-gradient(700px 520px at 50% 120%, rgba(135,160,111,.28) 0%, rgba(135,160,111,0) 60%),
    linear-gradient(158deg, var(--forest-a) 0%, var(--forest-b) 62%, var(--forest-deep) 100%);
  box-shadow:0 40px 80px -40px rgba(36,48,25,.85),0 4px 14px -6px rgba(36,48,25,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(22px,4.4cqw,46px);
  container-type:inline-size;
}
.deck-cover::after{ /* faint cradle watermark */
  content:"";position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);
  width:78%;aspect-ratio:1/1;
  background:url("../assets/mark-reversed.png") center/contain no-repeat;
  opacity:.12;pointer-events:none;
}
.deck-cover > *{position:relative;z-index:1}
.deck-cover .dc-eyebrow{
  font-family:var(--sans);font-weight:800;letter-spacing:.34em;text-transform:uppercase;
  font-size:clamp(9px,1.5cqw,12px);color:var(--sage-light);margin-bottom:clamp(14px,3cqw,26px);
}
.deck-cover .dc-title{
  font-family:var(--serif);font-weight:500;font-size:clamp(30px,9.4cqw,62px);
  line-height:.98;letter-spacing:-.02em;color:var(--on-dark);
}
.deck-cover .dc-rule{width:38px;height:2px;background:var(--clay);margin:clamp(14px,3cqw,24px) auto;border-radius:2px}
.deck-cover .dc-sub{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(13px,2.5cqw,18px);color:var(--on-dark-body);max-width:24ch;line-height:1.4;
}

/* ---------------- SAMPLE CARD ---------------- */
.scard{
  position:relative;aspect-ratio:1.46/1;width:100%;overflow:hidden;
  background:var(--paper);border:1px solid rgba(59,54,48,.08);border-radius:16px;
  box-shadow:0 24px 50px -34px rgba(59,54,48,.4);
  padding:clamp(20px,3.6cqw,34px);
  display:flex;flex-direction:column;
  container-type:inline-size;
}
.scard::after{ /* watermark cradle */
  content:"";position:absolute;right:-10%;bottom:-22%;width:62%;aspect-ratio:1/1;
  background:url("../assets/mark-color.png") center/contain no-repeat;
  opacity:.07;pointer-events:none;
}
.scard > *{position:relative;z-index:1}

.scard .s-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scard .s-punch{margin-top:auto}
.s-kind{
  font-family:var(--sans);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(8.5px,1.45cqw,11px);padding:5px 11px;border-radius:999px;line-height:1;
}
.s-section{
  font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(8px,1.3cqw,10px);color:var(--ink-soft);opacity:.75;
}
.scard .s-moment{
  font-family:var(--serif);font-weight:500;font-size:clamp(15px,2.9cqw,22px);
  line-height:1.16;color:var(--ink);margin:clamp(12px,2.6cqw,20px) 0 clamp(12px,2.4cqw,18px);
  max-width:20ch;
}
.s-label{
  font-family:var(--sans);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(8.5px,1.4cqw,11px);margin-bottom:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;
}
.s-label small{font-weight:600;letter-spacing:.04em;text-transform:none;opacity:.7;font-size:.82em}
.scard .s-quote{
  font-family:var(--serif);font-weight:500;font-size:clamp(15px,3.05cqw,23px);
  line-height:1.22;letter-spacing:-.01em;
}
.scard .s-foot{
  font-family:var(--sans);font-weight:500;font-size:clamp(9.5px,1.55cqw,12.5px);
  color:var(--ink-soft);line-height:1.42;margin-top:clamp(12px,2.4cqw,18px);
  border-top:1px solid rgba(59,54,48,.1);padding-top:clamp(10px,2cqw,14px);max-width:46ch;
}

/* to them = sage */
.scard.to-them .s-kind{background:rgba(135,160,111,.18);color:var(--moss)}
.scard.to-them .s-label{color:var(--moss)}
.scard.to-them .s-quote{color:var(--moss)}
.scard.to-them::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sage)}
/* for you = clay */
.scard.for-you{background:#FBF4EE}
.scard.for-you .s-kind{background:rgba(210,140,104,.2);color:var(--deep-clay)}
.scard.for-you .s-label{color:var(--deep-clay)}
.scard.for-you .s-quote{color:var(--deep-clay)}
.scard.for-you::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--clay)}
.scard.for-you::after{background-image:url("../assets/mark-color.png");opacity:.06}