/* ==========================================================================
   Caiyun Xu — "cloud" theme
   Layered on top of the shared stylesheet; only this site loads it.
   Direction: soft pink, centred hero, pill buttons, sans-serif display,
   and a repeating pattern built from her own cloud logo.
   ========================================================================== */

.theme-angelic{
  --plum:#e58aac;            /* primary: rose pink */
  --plum-2:#d9739a;
  --plum-3:#fdeef4;
  --rose:#e58aac;
  --gold:#a8949c;            /* eyebrow / kicker: warm grey, as in the reference */
  --cream:#faf7f8;
  --cream-2:#f6f1f3;
  --cream-3:#eee5ea;
  --line:#ecdfe5;
  --ink:#1f1b1d;
  --ink-2:#565055;
  --ink-3:#8b8288;
  --r:18px;
  --shadow:0 1px 2px rgba(31,27,29,.04),0 8px 28px -12px rgba(180,120,145,.22);
  --shadow-lg:0 2px 6px rgba(31,27,29,.05),0 24px 60px -20px rgba(180,120,145,.3);
}

/* --- display type: grotesque, not serif ---------------------------------- */
.theme-angelic h1,
.theme-angelic h2,
.theme-angelic .h1-cn,
.theme-angelic .h1-em{ font-family:var(--sans); }

.theme-angelic .hero h1{
  font-size:clamp(38px,6vw,68px); line-height:1.08; letter-spacing:-.03em;
}
.theme-angelic .h1-cn{ font-weight:600; }
.theme-angelic .h1-em{
  font-style:normal; font-weight:400; color:var(--ink);
  font-size:1em; margin-top:0; letter-spacing:-.03em;
}
.theme-angelic .sec h2{ font-family:var(--sans); font-weight:600; letter-spacing:-.02em; }

.theme-angelic .eyebrow,
.theme-angelic .kicker{
  color:var(--gold); font-weight:500; letter-spacing:.14em; font-size:12px;
}

/* --- hero: single centred column over the cloud pattern ------------------ */
.theme-angelic .hero{
  background-image:url("/assets/img/pattern-cloud.png");
  background-repeat:repeat;
  background-size:460px auto;
  background-position:center top;
}
.theme-angelic .hero-grid{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:clamp(28px,4vw,48px);
}
.theme-angelic .hero-copy{ max-width:780px; }
.theme-angelic .lede{ margin-inline:auto; max-width:34em; font-size:clamp(16px,1.4vw,18.5px); }
.theme-angelic .hero-cta{ justify-content:center; }
.theme-angelic .hero-badges{ justify-content:center; border-top-color:var(--line); }
.theme-angelic .hero-badges li{ align-items:center; text-align:center; }

/* photo sits on the pattern rather than in a grid cell */
.theme-angelic .hero-photo{ max-width:430px; width:100%; order:2; }
.theme-angelic .hero-photo img{
  border-radius:var(--r);
  aspect-ratio:1/1.06;
  object-position:50% 22%;
}
.theme-angelic .hero-photo::after{ display:none; }

/* --- buttons: full pills, uppercase ------------------------------------- */
.theme-angelic .btn{
  border-radius:100px; text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; font-size:13.5px;
  padding:16px 32px;
}
.theme-angelic .btn-sm{ padding:11px 22px; font-size:12px; }
.theme-angelic .btn-ghost{ background:transparent; color:var(--plum-2); border-color:var(--plum); }

/* --- cards: softer, rounder --------------------------------------------- */
.theme-angelic .card,
.theme-angelic .pkg,
.theme-angelic .week,
.theme-angelic .cert,
.theme-angelic .cred,
.theme-angelic .rev{ border-radius:var(--r); }
.theme-angelic .cred{ border-top-color:var(--plum); }
.theme-angelic .week-cn{ background:var(--plum-3); color:var(--plum-2); }
.theme-angelic .chips li{ background:var(--plum-3); color:var(--plum-2); }
.theme-angelic .skill-list li::before{ color:var(--plum); }

/* --- nav ---------------------------------------------------------------- */
.theme-angelic .nav{ background:rgba(250,247,248,.9); }
.theme-angelic .brand-cn{ color:var(--plum-2); }

@media (max-width:900px){
  .theme-angelic .hero-photo{ order:2; margin-top:8px; }
}