/* =========================================================
   THOM JOHNS — pulp with the safety off
   Palette sampled directly from the cover art.
   ========================================================= */
:root{
  --paper:      #E3D2AC;   /* aged cream */
  --ink:        #14120C;   /* title black */
  --ink-soft:   #3A3227;   /* body text */
  --rust:       #8B3A16;   /* accent — rules, links */
  --ember:      #C25518;   /* hover / CTA */
  --ground:     #5C4830;   /* mid-tone brown */
  --dark:       #16130E;   /* dark band */
  --bone:       #F3EAD8;   /* cream type on dark */
  --display: "Oswald", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --body: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink-soft);
  background-color:var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,250,235,.55), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  line-height:1.65;
  font-size:18px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--rust); }
a:hover{ color:var(--ember); }

.wrap{ width:min(1080px, 92vw); margin-inline:auto; }
.narrow{ width:min(700px, 92vw); }
.center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- type ---------- */
h1,h2,h3,.eyebrow,.btn,.flag,.brandline{ font-family:var(--display); text-transform:uppercase; }
h1{
  font-size:clamp(3rem, 11vw, 6.5rem); line-height:.88; margin:.05em 0 .1em;
  color:var(--ink); font-weight:700; letter-spacing:.02em;
  text-shadow:3px 3px 0 rgba(139,58,22,.15);
}
h2{ font-size:clamp(1.7rem,4.5vw,2.5rem); line-height:1; color:var(--ink); margin:0 0 .5em; font-weight:700; }
h3{ font-size:clamp(1.4rem,3vw,2rem); line-height:1; color:var(--ink); margin:.1em 0 .3em; font-weight:700; }
.eyebrow{ font-size:.78rem; letter-spacing:.26em; color:var(--ground); margin:0 0 .3em; font-weight:500; }
.brandline{
  font-size:clamp(1.1rem,3vw,1.6rem); letter-spacing:.14em; font-weight:700;
  color:var(--rust); margin:.2em 0 1.2em;
}
.micro{ font-size:.85rem; color:var(--ground); }
.tagline{ font-style:italic; color:var(--rust); font-size:1.05rem; margin:.2em 0 .8em; }
.section-sub{ color:var(--ground); margin:-.4em 0 2.2em; }

.rule::after{ content:""; display:block; width:88px; height:4px; margin:.5em 0 0; background:var(--rust); opacity:.85; }
.rule.center::after{ margin-inline:auto; }

/* ---------- hero ---------- */
.hero{
  padding:clamp(3rem,9vw,6rem) 0 clamp(2.5rem,6vw,4rem);
  border-bottom:3px solid rgba(20,18,12,.14); text-align:center;
}
.hero-inner{ max-width:820px; }
.manifesto{ max-width:620px; margin:0 auto 2rem; text-align:left; }
.manifesto p{ margin:0 0 .9em; }
.punch{
  font-family:var(--display); text-transform:uppercase; font-weight:700;
  font-size:clamp(1.2rem,3.4vw,1.7rem); line-height:1.15; color:var(--ink);
  margin:.6em 0 0 !important; letter-spacing:.02em;
}
.punch.alt{ color:var(--rust); }
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:.75em 1.6em; font-size:.95rem; letter-spacing:.12em;
  font-weight:700; text-decoration:none; border:2px solid var(--ink); cursor:pointer;
  transition:transform .08s ease, background-color .15s ease, color .15s ease;
}
.btn:active{ transform:translateY(2px); }
.btn-primary{ background:var(--rust); color:var(--bone); border-color:var(--rust); }
.btn-primary:hover{ background:var(--ember); border-color:var(--ember); color:var(--bone); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- sections ---------- */
.section{ padding:clamp(2.5rem,7vw,4.5rem) 0; }
.section-alt{
  background:linear-gradient(rgba(92,72,48,.13), rgba(92,72,48,.13));
  border-block:3px solid rgba(20,18,12,.14);
}

/* ---------- books ---------- */
.books{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
.book{
  display:grid; grid-template-columns:minmax(0,215px) 1fr; gap:clamp(1.25rem,4vw,2.5rem);
  align-items:center;
}
.book-cover{ position:relative; }
.book-cover img{
  border:1px solid rgba(20,18,12,.25);
  box-shadow:0 12px 28px rgba(20,18,12,.32), 0 2px 0 rgba(255,255,255,.22) inset;
}
.flag{
  display:inline-block; background:var(--rust); color:var(--bone);
  font-size:.68rem; letter-spacing:.2em; font-weight:700; padding:.35em .85em;
  margin-bottom:.7em;
}
.book-copy p:last-child{ margin-bottom:0; }

/* ---------- house rules ---------- */
.rules{ counter-reset:r; list-style:none; padding:0; margin:0; }
.rules li{
  counter-increment:r; position:relative; padding:.1em 0 1.1em 3.1rem; margin:0;
}
.rules li::before{
  content:counter(r,decimal-leading-zero); position:absolute; left:0; top:.05em;
  font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--rust); opacity:.9;
}
.rules b{ color:var(--ink); }

/* ---------- newsletter ---------- */
.signup{ background:var(--dark); color:var(--paper); text-align:center; }
.signup h2{ color:var(--bone); }
.signup .sub{ color:#C2B49A; margin:0 0 .5em; }
.signup .sub.small{ font-size:.92rem; color:#8E836E; margin-bottom:1.8em; }
.signup .micro{ color:#8E836E; margin-top:1.2em; }
.signup-form{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.signup-form input[type=email]{
  flex:1 1 260px; max-width:360px; padding:.75em 1em; font-size:1rem;
  font-family:var(--body); color:var(--ink); background:var(--bone);
  border:2px solid var(--bone); outline-offset:3px;
}
.signup-form input[type=email]:focus{ outline:3px solid var(--ember); }
.signup-form input[name="_gotcha"]{ display:none; }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:#9A8F79; text-align:center; padding:2.5rem 0; font-size:.9rem; }
footer p{ margin:.3em 0; }
footer a{ color:#C7A98F; }
.dog{ color:var(--rust); letter-spacing:.5em; font-size:.7rem; }
.brandline-sm{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  color:var(--bone); font-size:.9rem; font-weight:700;
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .book{ grid-template-columns:1fr; text-align:center; }
  .book-cover{ max-width:230px; margin-inline:auto; }
  .rule::after{ margin-inline:auto; }
  h2{ text-align:center; }
  .about h2{ text-align:center; }
  .rules{ text-align:left; }
  .manifesto{ text-align:left; }
}