:root {
  --ink: #26221F;
  --muted: #7A716A;
  --line: #E7E0D6;
  --page: #FAF7F2;
  --card: #FFFFFF;
  --accent: #9C47D3;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.shell { max-width: 520px; margin: 0 auto; padding: 32px 16px 24px; }
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0; }
h2 { font-size: 18px; margin: 28px 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.lede { font-size: 18px; color: var(--muted); }
.error { background: #FDECEC; color: #9B2C2C; padding: 10px 14px; border-radius: 10px; }
.hero { text-align: center; margin-bottom: 24px; }
.profile { text-align: center; margin-bottom: 28px; }
.tag { display: inline-block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 2px 10px; }
.ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; display: inline-block; }
.ava.big { width: 112px; height: 112px; border: 3px solid var(--accent); }
.ava.dot { background: var(--accent); }
.row { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; margin: 10px 0; text-decoration: none; color: var(--ink); }
.card { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 14px; padding: 12px; margin: 12px 0; text-decoration: none;
  color: var(--ink); transition: transform .12s ease; }
.card:hover { transform: translateY(-1px); }
.card-body { display: flex; flex-direction: column; gap: 2px; }
.cover { width: 84px; height: 108px; object-fit: cover; border-radius: 8px; flex: none; background: var(--line); }
.hero-cover { width: 100%; height: auto; max-height: 520px; border-radius: 14px; margin: 12px 0; }
.price { font-weight: 700; color: var(--accent); }
.back { text-decoration: none; font-size: 14px; }
.buy { margin: 18px 0; display: flex; flex-direction: column; gap: 6px; }
button, .button { display: inline-block; width: 100%; text-align: center; background: var(--accent); color: #fff; border: 0;
  border-radius: 12px; padding: 15px 18px; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { filter: brightness(0.95); }
.ticks { padding-left: 0; list-style: none; }
.ticks li { padding-left: 26px; position: relative; margin: 6px 0; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.socials { display: flex; justify-content: center; gap: 18px; margin: 28px 0 8px; }
.foot { max-width: 520px; margin: 0 auto; padding: 16px 16px 40px; font-size: 12px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }
.foot a { color: var(--muted); }
.buy input[type=email] { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: inherit; background: var(--card); color: var(--ink); }
.buy input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.c-juniper { --accent: #E8A87C; }
.c-brynn { --accent: #A8C686; }
.c-rowan { --accent: #8FB8A8; }
.c-grant { --accent: #7FA7C9; }
.c-darlene { --accent: #C9A0DC; }
.c-walt { --accent: #D9A066; }