/* ==========================================================================
   PlotProse — Brand Design Template  (v1 · 2026-07)
   One shared design format for every PlotProse surface.
   Usage: <link rel="stylesheet" href="https://bookadpack.com/classroom/pp-brand.css">
          then wrap content in .pp and use the tokens / components below.
   Palette + type pulled verbatim from the live plotprose.com design system.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  /* neutrals */
  --pp-cream:#FBF7F1; --pp-cream-2:#F6EFE4; --pp-blush:#F6E8E1; --pp-white:#fff;
  --pp-ink:#2D1845; --pp-ink-deep:#1D0F30; --pp-soft:#6b6478; --pp-faint:#9a8fa6;
  --pp-line:#efe6e0; --pp-line-2:#eadfe6; --pp-invert:#FDF9F2;
  /* 5-accent system (coral is primary) */
  --pp-coral:#E85D75; --pp-coral-ink:#B8384F; --pp-coral-tint:#FDEEF1;
  --pp-gold:#C9A227;  --pp-gold-ink:#96751B;  --pp-gold-tint:#FCF6E6;
  --pp-sage:#5F7F70;  --pp-sage-ink:#476357;  --pp-sage-tint:#EFF4F1;
  --pp-apricot:#F2A65A; --pp-apricot-ink:#B06421; --pp-apricot-tint:#FDF4EC;
  --pp-rose:#D77E97;  --pp-rose-ink:#93415A;  --pp-rose-tint:#FDF0F3;
  --pp-plum:#6B4E83;  --pp-plum-deep:#2D1845;
  /* gradients */
  --pp-grad:linear-gradient(135deg,#2D1845 0%,#5a3b72 60%,#6B4E83 100%);
  --pp-grad-warm:linear-gradient(135deg,#E85D75,#F2A65A);
  --pp-grad-gold:linear-gradient(135deg,#C9A227,#E2C767);
  /* type + shape + depth */
  --pp-serif:'Cormorant Garamond',Georgia,serif;
  --pp-sans:'DM Sans',-apple-system,system-ui,sans-serif;
  --pp-r:22px; --pp-r-sm:14px; --pp-pill:100px;
  --pp-sh:0 20px 50px -28px rgba(45,24,69,.30);
  --pp-sh-2:0 10px 28px -18px rgba(45,24,69,.22);
  --pp-sh-book:0 14px 26px -12px rgba(45,24,69,.45);
}

/* ---- base ---- */
.pp,.pp *{box-sizing:border-box}
.pp{background:var(--pp-cream);color:var(--pp-ink);font-family:var(--pp-sans);line-height:1.55;-webkit-font-smoothing:antialiased}
.pp-wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.pp-serif{font-family:var(--pp-serif)}
.pp em{font-style:italic}

/* ---- type ---- */
.pp-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--pp-gold-ink)}
.pp-h1{font-family:var(--pp-serif);font-weight:600;font-size:clamp(38px,7vw,80px);line-height:1;letter-spacing:.005em;color:var(--pp-ink)}
.pp-h2{font-family:var(--pp-serif);font-weight:600;font-size:clamp(28px,4vw,44px);line-height:1.05;color:var(--pp-ink)}
.pp-h1 em,.pp-h2 em{font-style:italic;color:var(--pp-coral)}
.pp-lead{color:var(--pp-soft);font-size:16px;line-height:1.55}

/* ---- logo (locked brand asset — never restyle the mark) ---- */
.pp-logo img{height:38px;width:auto;display:block}

/* ---- buttons ---- */
.pp-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--pp-sans);font-weight:600;font-size:14px;border:0;border-radius:var(--pp-pill);padding:12px 22px;cursor:pointer;text-decoration:none;color:#fff;background:var(--pp-grad-warm);transition:.18s;box-shadow:var(--pp-sh-2)}
.pp-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.pp-btn-gold{background:var(--pp-grad-gold);color:#3a2c06}
.pp-btn-ghost{background:transparent;color:var(--pp-ink);border:1px solid var(--pp-line-2);box-shadow:none}
.pp-btn-ghost:hover{border-color:var(--pp-coral);color:var(--pp-coral-ink)}

/* ---- pills / tabs ---- */
.pp-pill{font-size:12.5px;padding:6px 13px;border-radius:var(--pp-pill);border:1px solid var(--pp-line);color:var(--pp-soft);background:var(--pp-white);cursor:pointer}
.pp-pill.on{background:var(--pp-grad-warm);color:#fff;border:0}

/* ---- cards + bento ---- */
.pp-card{background:var(--pp-white);border:1px solid var(--pp-line);border-radius:var(--pp-r);box-shadow:var(--pp-sh);padding:26px 28px}
.pp-card-hover{transition:transform .25s,box-shadow .25s}
.pp-card-hover:hover{transform:translateY(-3px);box-shadow:0 26px 54px -26px rgba(45,24,69,.4)}
.pp-tint-coral{background:var(--pp-coral-tint)} .pp-tint-gold{background:var(--pp-gold-tint)}
.pp-tint-sage{background:var(--pp-sage-tint)} .pp-tint-apricot{background:var(--pp-apricot-tint)} .pp-tint-rose{background:var(--pp-rose-tint)}

/* ---- hero: solid gradient variant ---- */
.pp-hero{background:var(--pp-grad);color:#fff;border-radius:var(--pp-r);position:relative;overflow:hidden;padding:56px 40px}
.pp-hero .pp-eyebrow{color:var(--pp-apricot)}
.pp-hero .pp-h1{color:#fff}.pp-hero .pp-h1 em{color:#F5BE94}
.pp-hero::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(232,93,117,.4),rgba(242,166,90,.15) 45%,transparent 72%)}

/* ---- hero: cinematic VIDEO variant (the ad-pack wow — keep the film, tint plum so it pops) ---- */
.pp-hero-video{position:relative;overflow:hidden;color:#fff}
.pp-hero-video>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-hero-video .pp-veil{position:absolute;inset:0;background:linear-gradient(110deg,rgba(45,24,69,.82) 28%,rgba(45,24,69,.48) 72%,rgba(29,15,48,.82))}
.pp-hero-video>.pp-wrap,.pp-hero-video .pp-inner{position:relative;z-index:2}
.pp-hero-video .pp-h1{color:#fff}.pp-hero-video .pp-h1 em{color:#F5BE94}
.pp-hero-video .pp-lead{color:#efe4ee}

/* ---- cover shelf (live KDP covers) ---- */
.pp-shelf{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 18px}
.pp-shelf::-webkit-scrollbar{height:8px}.pp-shelf::-webkit-scrollbar-thumb{background:var(--pp-line-2);border-radius:8px}
.pp-cover{flex:0 0 auto;width:120px}
.pp-cover img{width:120px;height:190px;object-fit:cover;border-radius:8px;box-shadow:var(--pp-sh-book);background:var(--pp-cream-2);transition:transform .3s}
.pp-cover:hover img{transform:translateY(-6px) rotate(-1deg)}

/* ---- divider ---- */
.pp-rule{height:1px;background:linear-gradient(90deg,transparent,var(--pp-gold),transparent);border:0;margin:0 auto;width:64px}