/* ======================================================================
   Base — the parts of Carrd's stylesheet the design relies on.
   Sizes in rem follow Carrd's root font size, so they stay as on Carrd.
   ====================================================================== */
html,body,div,span,h1,h2,h3,p,blockquote,a,em,b,img,ol,ul,li,form,figure,figcaption,footer,header,nav,section{
  margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
ol,ul{list-style:none}
blockquote::before,blockquote::after{content:none}
input[type="text"],input[type="email"],textarea{-webkit-appearance:none;appearance:none}

html{font-size:18pt}
@media (max-width:1680px){html{font-size:13pt}}
@media (max-width:980px){html{font-size:11pt}}

/* Carrd centers text unless a block says otherwise */
body{line-height:1;text-align:center;min-width:320px;overflow-x:hidden;word-wrap:break-word;-webkit-text-size-adjust:none}

/* ======================================================================
   Raising Hell — Design System tokens (colors / type / spacing / effects)
   Mirrors the claude.ai/design "Raising Hell Design System" project.
   ====================================================================== */
:root {
  /* Ember — the book-cover red-orange (the single loud accent) */
  --ember-50:#FCE9E0; --ember-100:#F9CDB9; --ember-200:#F3A484; --ember-300:#ED7651;
  --ember-400:#E8521F; --ember-500:#D23F12; --ember-600:#B33310; --ember-700:#8E2810;
  --ember-800:#6B1E0E; --ember-900:#4A160C;
  /* Amber / gold — parchment warmth */
  --amber-100:#F8EAC9; --amber-200:#F0D49A; --amber-300:#E6B968; --amber-400:#DB9E3B;
  --amber-500:#C7842A; --amber-600:#A66A1E; --amber-700:#835018;
  /* Umber — warm brown inks */
  --umber-900:#2B1A0E; --umber-800:#3E2613; --umber-700:#573418; --umber-600:#74471F; --umber-500:#94632F;
  /* Warm neutrals — parchment + creams */
  --paper-50:#FCF8F0; --paper-100:#F8F1E3; --paper-200:#F0E6D1; --paper-300:#E5D6B9; --paper-400:#D4BF98;
  /* Warm grays */
  --stone-100:#EDE7DC; --stone-200:#DBD2C3; --stone-300:#BFB3A0; --stone-400:#978A77; --stone-500:#6E6354; --stone-600:#4D4537;
  /* Ink — near-black warm */
  --ink-950:#16110C; --ink-900:#211A12; --ink-800:#2E251A;

  /* Semantic */
  --surface-page:var(--paper-100); --text-heading:var(--umber-900); --text-body:var(--umber-800);
  --text-muted:var(--stone-500); --border-soft:var(--paper-300); --border-strong:var(--stone-300);

  /* Fonts */
  --font-display:"Bevan","Rockwell",Georgia,serif;
  --font-serif:"Spectral",Georgia,"Times New Roman",serif;
  --font-ui:"Archivo","Helvetica Neue",Arial,sans-serif;

  /* Spacing */
  --space-9:3rem;
  --measure:68ch; --container:1080px;

  /* Effects */
  --radius-sm:3px; --radius-md:5px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(43,26,14,.10);
  --shadow-md:0 4px 14px rgba(43,26,14,.14);
  --shadow-book:0 18px 46px rgba(22,17,12,.40);
  --wash-amber:linear-gradient(160deg,var(--amber-300) 0%,var(--amber-500) 100%);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[id]{scroll-margin-top:70px}
::selection{background:var(--ember-200)}
img{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:var(--space-9) 0}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-ui);font-weight:600;line-height:1;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;border-radius:var(--radius-sm);
  cursor:pointer;border:2px solid transparent;
  transition:transform 120ms var(--ease-out),background 220ms var(--ease-out),box-shadow 220ms var(--ease-out),color 220ms var(--ease-out)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--sm{padding:8px 16px;font-size:.875rem}
.btn--md{padding:12px 26px;font-size:1rem}
.btn--lg{padding:16px 38px;font-size:1.125rem}
.btn--flame{background:var(--ember-400);color:var(--paper-50);border-color:var(--ember-400);box-shadow:var(--shadow-sm)}
.btn--flame:hover{background:var(--ember-600);border-color:var(--ember-600)}
.btn--dark{background:var(--ink-950);color:var(--paper-100);border-color:var(--ink-950);box-shadow:var(--shadow-sm)}
.btn--dark:hover{background:var(--umber-900)}
.btn--outline{background:transparent;color:var(--ember-600);border-color:var(--ember-400)}
.btn--outline:hover{background:var(--ember-400);color:var(--paper-50)}
.btn__arrow{font-size:1.1em}

/* ---- SectionHeading ---- */
.sh{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem}
.sh--left{align-items:flex-start;text-align:left}
.sh__eyebrow{font-family:var(--font-ui);font-size:.875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember-500)}
.sh__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:3rem;line-height:1.2;
  letter-spacing:-.02em;color:var(--text-heading);text-wrap:balance}
.sh__rule{display:block;width:64px;height:4px;border-radius:var(--radius-pill);background:var(--ember-400);margin-top:.25rem}

/* ---- Quote ---- */
.quote{position:relative;margin:0;background:var(--paper-50);border:1px solid var(--border-soft);
  border-top:4px solid var(--ember-400);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  padding:2rem 1.5rem 1.5rem}
.quote--feature{background:#fff;box-shadow:var(--shadow-md);padding:3rem 2rem 2rem}
.quote__mark{position:absolute;top:2px;left:1rem;font-family:var(--font-display);font-size:4rem;
  line-height:1;color:var(--ember-200);pointer-events:none}
.quote--feature .quote__mark{top:8px;font-size:5.5rem}
.quote__body{margin:0;position:relative;font-family:var(--font-serif);font-size:1.125rem;
  line-height:1.7;color:var(--text-body);text-wrap:pretty}
.quote--feature .quote__body{font-style:italic;font-size:1.375rem}
.quote__cap{margin-top:1rem;display:flex;flex-direction:column;gap:1px}
.quote__author{font-family:var(--font-ui);font-size:.875rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--umber-900)}
.quote__author b{color:var(--ember-500);font-weight:inherit}
.quote__credit{font-family:var(--font-serif);font-style:italic;font-size:.875rem;color:var(--text-muted)}

/* ---- Card ---- */
.card{border-radius:var(--radius-md);padding:2rem}
.card--md{padding:1.5rem}
.card--lg{padding:2rem}
.card--raised{background:#fff;color:var(--text-body);border:1px solid var(--border-soft);box-shadow:var(--shadow-md)}
.card--parchment{background:var(--paper-50);color:var(--text-body);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm)}
.card--flame{background:var(--ember-400);color:var(--paper-50);border:1px solid var(--ember-500);box-shadow:var(--shadow-md)}
.card--rule{border-top:4px solid var(--ember-400)}

/* ---- Tag ---- */
.tag{display:inline-flex;align-items:center;gap:.4em;border-radius:var(--radius-pill);padding:4px 12px;
  font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  line-height:1;white-space:nowrap;width:fit-content}
.tag--flame{background:var(--ember-50);color:var(--ember-700);border:1px solid var(--ember-200)}
.tag--amber{background:var(--amber-100);color:var(--amber-700);border:1px solid var(--amber-300)}

/* ---- DownloadLink ---- */
.dl{font-family:var(--font-serif);font-size:1.125rem;font-weight:600;color:var(--ember-600);
  text-decoration:none;border-bottom:2px solid rgba(178,51,16,.25);padding-bottom:1px;
  display:inline-flex;align-items:baseline;gap:.4em;width:fit-content;
  transition:color 220ms var(--ease-out),border-color 220ms var(--ease-out)}
.dl:hover{color:var(--ember-700);border-bottom-color:var(--ember-600)}
.dl__arrow{font-weight:700;transition:transform 220ms var(--ease-out)}
.dl:hover .dl__arrow{transform:translateX(3px)}

/* ---- Field ---- */
.field{display:flex;flex-direction:column;gap:.5rem}
.field input,.field textarea{width:100%;height:2.5rem;font-family:var(--font-serif);font-size:1.125rem;color:var(--text-body);
  background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:12px 14px;
  outline:none;transition:border-color 220ms var(--ease-out),box-shadow 220ms var(--ease-out)}
.field textarea{height:10rem;line-height:1.5;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ember-400);box-shadow:0 0 0 3px rgba(232,82,31,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--stone-400);opacity:1}

/* ======================================================================
   Layout
   ====================================================================== */
/* Nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(252,248,240,.92);
  backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--border-soft)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.nav__brand{font-family:var(--font-display);font-size:20px;color:var(--text-heading);text-decoration:none;letter-spacing:.01em}
.nav__links{display:flex;gap:28px;align-items:center}
.nav__link{font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--umber-700);padding-bottom:2px;border-bottom:2px solid transparent;transition:color 200ms,border-color 200ms}
.nav__link.is-active{color:var(--ember-600);border-bottom-color:var(--ember-400)}
.nav__toggle{display:none}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--ink-950)}
.hero__tex{position:absolute;inset:0;background-image:url('images/parchment-texture.jpg');background-size:cover;background-position:center;opacity:.16}
.hero__wash{position:absolute;inset:0;background:linear-gradient(120deg,rgba(232,82,31,.22),rgba(22,17,12,0) 60%)}
.hero__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:var(--space-9) 24px;
  max-width:var(--container);margin:0 auto}
.hero__eyebrow{font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ember-300)}
.hero__title{font-family:var(--font-display);color:var(--paper-50);font-size:76px;line-height:.92;margin:16px 0 0}
.hero__sub{font-family:var(--font-serif);font-style:italic;font-size:24px;color:var(--amber-300);margin:20px 0 8px;max-width:20ch}
.hero__love{font-family:var(--font-display);font-size:26px;color:var(--ember-400);margin:0 0 8px;letter-spacing:.01em}
.hero__lede{font-family:var(--font-serif);font-size:17px;line-height:1.6;color:var(--paper-200);max-width:46ch;margin:12px 0 28px}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.hero__cover-wrap{display:flex;justify-content:center}
.hero__cover{width:100%;height:auto;max-width:320px;border-radius:3px;box-shadow:var(--shadow-book);transform:rotate(0deg);filter:saturate(.8)}
/* CSS book-cover fallback if the cover image is missing */
.hero__cover--fallback{aspect-ratio:2/3;background:var(--ink-950);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;border:1px solid var(--ember-700);color:var(--paper-50);text-align:center;padding:24px}
.hero__cover--fallback .t{font-family:var(--font-display);font-size:40px;line-height:.95;color:var(--ember-400)}
.hero__cover--fallback .a{font-family:var(--font-ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-300)}

/* Sections */
.bg-paper100{background:var(--paper-100)}
.bg-paper200{background:var(--paper-200)}
.prose{max-width:var(--measure);margin:32px auto 0}
.prose p{font-family:var(--font-serif)}
.lede{font-size:19px;line-height:1.75;color:var(--text-body);margin:0 0 20px}
.lede em{font-style:italic}
.muted{font-size:17px;line-height:1.7;color:var(--text-muted);margin:0 0 28px}

/* About hooks list */
.hooks{list-style:none;margin:0 auto;padding:0;max-width:var(--measure);display:flex;flex-direction:column;gap:14px}
.hooks li{display:flex;gap:16px;align-items:flex-start}
.hooks__n{flex:none;font-family:var(--font-display);font-size:22px;color:var(--ember-400);line-height:1.1;width:34px}
.hooks__q{font-family:var(--font-serif);font-size:18px;line-height:1.55;color:var(--text-heading)}
.about__close{max-width:var(--measure);margin:32px auto 0;text-align:center}
.about__dare{font-family:var(--font-serif);font-style:italic;font-size:22px;color:var(--ember-600);margin:0 0 8px}
.about__body{font-family:var(--font-serif);font-size:17px;line-height:1.7;color:var(--text-body);margin:0}
.about__endorse{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:var(--measure);margin-inline:auto}

/* Author */
.author{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center}
.author__photo{aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);
  background:var(--wash-amber);display:flex;align-items:flex-end;justify-content:center;border:1px solid var(--border-soft)}
.author__photo span{font-family:var(--font-display);font-size:88px;color:rgba(22,17,12,.18);margin-bottom:-8px}
.author__photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.author__bio{font-family:var(--font-serif);font-size:18px;line-height:1.75;color:var(--text-body);margin:24px 0 20px;max-width:54ch}
.author__links{display:flex;gap:28px;flex-wrap:wrap}

/* Reviews */
.reviews__grid{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-items:start}
.reviews__more{display:flex;justify-content:center;margin-top:32px}
.is-hidden{display:none!important}

/* Order */
.order__lede{font-family:var(--font-serif);font-size:18px;line-height:1.7;color:var(--text-body);text-align:center;max-width:60ch;margin:24px auto 0}
.order__grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.order__grid--formats{margin-top:28px}
.edition{display:flex;flex-direction:column;gap:12px}
.edition h3{font-family:var(--font-serif);font-weight:700;font-size:22px;color:var(--text-heading);margin:0}
.edition__meta{font-family:var(--font-ui);font-size:13px;color:var(--text-muted);margin:0}
.format{display:flex;flex-direction:column;gap:8px}
.format__top{display:flex;align-items:baseline;justify-content:space-between}
.format__label{font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--umber-900)}
.format__price{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--ember-600)}
.format__note{font-family:var(--font-serif);font-size:15px;color:var(--text-body);margin:0 0 8px}
.bulk{margin-top:28px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center}
.bulk h3{font-family:var(--font-display);font-size:28px;color:var(--paper-50);margin:0 0 8px}
.bulk p{font-family:var(--font-serif);font-size:16px;line-height:1.6;color:var(--paper-100);margin:0;max-width:46ch}
.bulk__cta{justify-self:end}

/* Contact */
.contact__wrap{max-width:720px;margin:0 auto;padding:0 24px}
.contact__intro{font-family:var(--font-serif);font-size:17px;line-height:1.7;color:var(--text-body);text-align:center;margin:20px 0 32px}
.contact__intro a{color:var(--ember-600);font-weight:600}

/* ---- Contact form ----
   Name + Email share a row; Message, status and Submit span the full width. */
.contact__form{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:2rem}
.contact__form .inner{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact__form .field:has(textarea),
.contact__form .contact__status,
.contact__form .actions{grid-column:1 / -1}
/* Hidden field that only spam bots fill in */
.contact__form .field--hp{display:none}
.contact__form .actions{display:flex;justify-content:flex-end}
.contact__form .actions button{display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:2.5rem;
  font-family:var(--font-ui);font-weight:600;font-size:1rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;border:2px solid var(--ember-400);background:var(--ember-400);color:var(--paper-50);
  border-radius:var(--radius-sm);padding:12px 26px;box-shadow:var(--shadow-sm);
  transition:transform 120ms var(--ease-out),background 220ms var(--ease-out),border-color 220ms var(--ease-out)}
.contact__form .actions button:hover{background:var(--ember-600);border-color:var(--ember-600)}
.contact__form .actions button:active{transform:translateY(1px) scale(.99)}
.contact__form .actions button:disabled{opacity:.6;cursor:default}
.contact__status{font-family:var(--font-serif);font-size:16px;line-height:1.5;color:var(--ember-700)}
.contact__status:empty{display:none}
.contact__thanks{font-family:var(--font-serif);font-size:18px;line-height:1.6;color:var(--ember-600);text-align:center}

/* Footer */
.footer{background:var(--ink-950);color:var(--paper-200)}
.footer__inner{padding:48px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  max-width:var(--container);margin:0 auto}
.footer__brand{font-family:var(--font-display);font-size:22px;color:var(--paper-50);margin:0 0 6px}
.footer__tag{font-family:var(--font-serif);font-style:italic;font-size:14px;color:var(--amber-300);margin:0}
.footer__nav{display:flex;gap:24px;font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.footer__nav a{color:var(--paper-200);text-decoration:none}
.footer__legal{font-family:var(--font-ui);font-size:11px;color:var(--stone-400);margin:0;width:100%;
  border-top:1px solid rgba(255,255,255,.08);padding-top:18px}

/* ---- Responsive ---- */
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:32px}
  .hero__cover-wrap{order:-1}
  .hero__title{font-size:60px}
  .author{grid-template-columns:1fr;gap:28px}
  .author__photo{max-width:240px}
  .about__endorse{grid-template-columns:1fr}
  .bulk{grid-template-columns:1fr}
  .bulk__cta{justify-self:start}
  .sh__title{font-size:2.25rem}
}
@media (max-width:640px){
  .nav__links{position:fixed;inset:62px 0 auto 0;flex-direction:column;gap:0;background:var(--paper-50);
    border-bottom:1px solid var(--border-soft);padding:8px 24px 16px;display:none;box-shadow:var(--shadow-md)}
  .nav__links.is-open{display:flex}
  .nav__links .btn{margin-top:8px}
  .nav__link{padding:12px 0;border-bottom:1px solid var(--border-soft)}
  .nav__link.is-active{border-bottom-color:var(--ember-400)}
  .nav__toggle{display:inline-flex;background:none;border:0;font-size:24px;color:var(--umber-900);cursor:pointer;line-height:1}
  .hero__title{font-size:48px}
  .contact__form{padding:1.25rem}
  .contact__form .inner{grid-template-columns:1fr}
}