/* ============================================
   Christine's Cards — shared design system
   ============================================ */
:root{
  --paper:#FDFBF6;
  --paper-2:#F6F1E9;
  --blush:#F1C7D3;
  --blush-deep:#E8A6B8;
  --sage:#93A97E;
  --sage-deep:#71875D;
  --mint:#C7E6D6;
  --lavender:#DED4EE;
  --ink:#3B342E;
  --ink-soft:#6B6259;
  --stamp:#C1584A;
  --line:#E4DCCE;
  --shadow: 0 18px 40px -20px rgba(59,52,46,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}
.accent-script{ font-family:'Caveat', cursive; font-weight:600; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* torn paper divider */
.torn{
  height:34px; width:100%; background:var(--paper);
  clip-path: polygon(0% 40%, 3% 10%, 6% 45%, 9% 15%, 12% 50%, 15% 20%, 18% 55%, 21% 10%, 24% 40%, 27% 15%, 30% 48%, 33% 20%, 36% 52%, 39% 12%, 42% 45%, 45% 18%, 48% 50%, 51% 22%, 54% 48%, 57% 15%, 60% 45%, 63% 20%, 66% 55%, 69% 10%, 72% 42%, 75% 18%, 78% 50%, 81% 22%, 84% 48%, 87% 15%, 90% 45%, 93% 20%, 96% 52%, 100% 25%, 100% 100%, 0% 100%);
}
.torn.flip{ transform: rotate(180deg); }
.torn.on-tone{ background:var(--paper-2); }

/* NAV */
header{ position:sticky; top:0; z-index:50; background:rgba(253,251,246,0.92); backdrop-filter: blur(6px); border-bottom:1px solid var(--line); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ width:34px; height:34px; border-radius:50%; background:var(--stamp); display:flex; align-items:center; justify-content:center; color:var(--paper); font-family:'Fraunces',serif; font-weight:600; font-size:16px; transform:rotate(-8deg); box-shadow:0 4px 10px rgba(193,88,74,0.35); flex-shrink:0; }
.logo-text{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; }
.logo-text span{ color:var(--sage-deep); }
.nav-links{ display:flex; gap:28px; font-size:15px; font-weight:500; }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a:hover, .nav-links a.active{ color:var(--stamp); }
.nav-cta{ background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:100px; font-size:14px; font-weight:600; white-space:nowrap; }
.nav-cta:hover{ background:var(--sage-deep); }

/* BUTTONS */
.btn{ padding:13px 24px; border-radius:100px; font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; border:none; font-family:'Work Sans', sans-serif; }
.btn-primary{ background:var(--sage-deep); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -8px rgba(113,135,93,0.55); }
.btn-outline{ border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ transform:translateY(-2px); background:var(--ink); color:var(--paper); }
.btn-ghost{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px; background:none; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* PAGE HERO (used on interior pages) */
.page-hero{ padding:56px 0 40px; }
.eyebrow{ font-family:'Caveat', cursive; font-size:22px; color:var(--stamp); font-weight:600; margin-bottom:6px; display:inline-block; transform:rotate(-2deg); }
.page-hero h1{ font-size:44px; line-height:1.08; margin-bottom:14px; }
.page-hero p.lede{ font-size:17px; color:var(--ink-soft); max-width:640px; }

/* SECTION HEADS */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:14px;}
.section-head h2{ font-size:32px; }
.section-head .sub{ font-family:'Caveat', cursive; color:var(--sage-deep); font-size:20px; }
.view-all{ font-weight:600; font-size:14px; border-bottom:1.5px solid var(--ink); padding-bottom:2px; }

/* CARDS (projects / blog / tutorials) */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.p-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.p-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.p-card .thumb{ aspect-ratio:5/4; overflow:hidden; position:relative; }
.p-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.p-card .thumb .tag{ position:absolute; top:12px; left:12px; background:var(--paper); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:600; color:var(--sage-deep); }
.p-card .body{ padding:18px 20px 22px; }
.p-card .date{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.p-card h3{ font-size:19px; margin-bottom:8px; }
.p-card p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:14px; }
.p-card .read{ font-size:13.5px; font-weight:600; color:var(--stamp); }

/* FILTER PILLS (archive / blog / tutorials) */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.pill{ padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-soft); background:var(--paper); cursor:pointer; }
.pill.active, .pill:hover{ border-color:var(--ink); color:var(--ink); }

/* CLASSES */
.class-list{ display:flex; flex-direction:column; gap:16px; }
.class-row{ display:grid; grid-template-columns: 90px 1fr auto; gap:22px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
.class-date{ background:var(--mint); border-radius:10px; padding:10px 0; text-align:center; }
.class-date .d{ font-family:'Fraunces', serif; font-size:24px; font-weight:600; line-height:1; }
.class-date .m{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--sage-deep); font-weight:600; }
.class-info h3{ font-size:18px; margin-bottom:4px; }
.class-meta{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:14px; flex-wrap:wrap; }
.seats{ font-size:12.5px; font-weight:600; color:var(--stamp); margin-top:6px; display:inline-block; }
.class-actions{ text-align:right; }
.class-actions .price{ font-weight:600; margin-bottom:8px; }

/* NEWSLETTER band */
.newsletter{ background:var(--sage-deep); color:var(--paper); border-radius:24px; padding:52px 48px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; }
.newsletter h2{ color:var(--paper); font-size:28px; margin-bottom:8px; }
.newsletter p{ color:rgba(253,251,246,0.85); font-size:15px; max-width:420px; }
.nl-form{ display:flex; gap:10px; }
.nl-form input{ flex:1; padding:13px 16px; border-radius:100px; border:none; font-family:'Work Sans'; font-size:14.5px; }
.nl-form button{ background:var(--stamp); color:var(--paper); border:none; padding:13px 22px; border-radius:100px; font-weight:600; font-size:14.5px; cursor:pointer; }

/* FOOTER */
footer{ padding:48px 0 30px; border-top:1px solid var(--line); }
.foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.foot-links{ display:flex; gap:26px; font-size:14px; color:var(--ink-soft); flex-wrap:wrap; }
.foot-links a:hover{ color:var(--stamp); }
.foot-note{ font-size:13px; color:var(--ink-soft); margin-top:18px; }

/* Washi tape + stamp accents (reusable) */
.washi{
  position:absolute; width:110px; height:34px;
  background: repeating-linear-gradient(45deg, var(--blush), var(--blush) 8px, var(--blush-deep) 8px, var(--blush-deep) 16px);
  opacity:0.9; box-shadow:0 3px 6px rgba(0,0,0,0.12);
}
.stamp-badge{
  width:96px; height:96px; border-radius:50%;
  border:2.5px dashed var(--stamp);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:'Caveat', cursive; font-weight:600;
  color:var(--stamp); font-size:15px; line-height:1.15;
  background:rgba(253,251,246,0.9);
}

@media (max-width: 880px){
  .card-grid{ grid-template-columns:1fr 1fr; }
  .newsletter{ grid-template-columns:1fr; padding:36px 26px; }
  .nav-links{ display:none; }
  .page-hero h1{ font-size:34px; }
  .class-row{ grid-template-columns:70px 1fr; }
  .class-actions{ grid-column:1/-1; text-align:left; margin-top:6px; }
}
@media (max-width:560px){
  .card-grid{ grid-template-columns:1fr; }
}