/* August Folly — Grenade visual system (punk-academic brutalist). */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Josefin+Sans:wght@400;600&display=swap");

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
a { background-color: transparent; }
b, strong { font-weight: bolder; }
img { border-style: none; }
button, input, optgroup, select, textarea {
  font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;
}
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; }
[hidden] { display: none; }

/* —— Grenade tokens —— */
:root {
  --g-paper: #f3efe6;
  --g-ink: #0a0a0a;
  --g-muted: #4a453c;
  --g-vermillion: #E23D28;
  --g-bar: #0a0a0a;
  --g-rule: #0a0a0a;
  --nav-h: 52px;
  --bar-w: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%;
  background: var(--g-paper);
  color: var(--g-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.5;
}

body *:focus { outline: 2px solid var(--g-vermillion); outline-offset: 2px; }
a, a:hover, a:visited, a:active { color: inherit; text-decoration: none; }
a:hover { color: var(--g-vermillion); }

.bold { font-weight: 600 !important; }
.fat { font-weight: 700; }
.upper { text-transform: uppercase; }
.center { text-align: center; }
.white { color: #fff; }
.grey { color: var(--g-muted); }
.red { color: var(--g-vermillion); }
.invisible { display: none; }
.left { display: block; float: left; }
.right { display: block; float: right; }
.half { width: 50%; }
.full { width: 100%; overflow: auto; }

h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}
h1 { font-size: 2.5rem; line-height: 1.1; font-weight: 600; }
h2 { font-size: 1.25rem; line-height: 1.2; }

.huge { font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 0.95; font-weight: 600; }
.bigger { font-size: 1.15rem; line-height: 1.45; }
.biggest { font-size: 1.35rem; }
.summary { font-size: 1.15rem; text-align: center; }
.tall { font-size: 1.75rem; line-height: 1.1; }

.emp {
  font-family: "Josefin Sans", "Helvetica Neue", sans-serif;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

.title {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  font-weight: 600;
  padding: 0 0 0.35rem 0;
  margin: 0;
}

.skip {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip:focus {
  position: static; width: auto; height: auto; left: auto;
  padding: 8px 12px; background: #fff; z-index: 20;
  color: var(--g-ink);
}

/* Side / top geometric bars */
.site-frame {
  position: relative;
  min-height: 100%;
  border-top: var(--bar-w) solid var(--g-bar);
}
.site-frame::before {
  content: "";
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--bar-w);
  background: var(--g-bar);
  z-index: 30;
  pointer-events: none;
}
@media (max-width: 640px) {
  :root { --bar-w: 8px; }
  .site-frame::before { display: none; }
}

main { min-height: calc(100% - 220px); }

/* —— Header —— */
.navbar {
  background: var(--g-paper);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid var(--g-bar);
  padding-left: var(--bar-w);
}
.navbar .container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  flex-wrap: wrap;
}
.navlogo-text {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--g-ink);
  font-weight: 600;
  line-height: var(--nav-h);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem 1.35rem;
  flex-wrap: wrap;
}
.nav {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-ink);
  font-weight: 600;
  padding: 0.35rem 0;
}
.nav:hover { color: var(--g-vermillion); text-decoration: none; }
.nav-amazon {
  color: var(--g-vermillion) !important;
  border-bottom: 2px solid var(--g-vermillion);
}
.nav-amazon:hover { opacity: 0.85; }

/* Legacy responsive display helpers (kept for any leftover markup) */
.m, .s { display: none; }
.l { display: block; }
@media (max-width: 750px) {
  .navbar .container { justify-content: flex-start; }
}

/* —— Page shell (replaces Rumpel .monster / .bg1 costume) —— */
.monster, .page-shell {
  width: 100%;
  overflow: hidden;
  padding: 0 0 3rem;
  padding-left: var(--bar-w);
  background: var(--g-paper);
}
.bg1, .bg2 {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* —— Hero (asymmetric) —— */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem 3rem;
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}
.hero-copy { position: relative; padding-top: 0.5rem; }
.hero-stamp {
  display: inline-block;
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--g-vermillion);
  border: 2px solid var(--g-vermillion);
  padding: 0.35rem 0.65rem;
  margin-bottom: 1.25rem;
  transform: rotate(-2deg);
}
.hero-kicker {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--g-muted);
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.hero-title {
  font-size: clamp(2.8rem, 8vw, 5.75rem);
  line-height: 0.92;
  font-weight: 600;
  margin: 0 0 1.25rem;
  color: var(--g-ink);
}
.hero-lede {
  max-width: 34rem;
  margin: 0 0 1.75rem;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--g-muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

.hero-feature {
  position: relative;
  justify-self: end;
  width: min(100%, 320px);
  padding: 1.25rem 0 0 1.25rem;
}
.hero-feature-block {
  position: absolute;
  inset: 0 8% 8% 0;
  background: var(--g-vermillion);
  z-index: 0;
}
.hero-feature-link {
  position: relative;
  z-index: 1;
  display: block;
  border: 3px solid var(--g-bar);
  background: #fff;
  box-shadow: 8px 8px 0 var(--g-bar);
}
.hero-feature-link img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-feature-cap {
  position: relative;
  z-index: 1;
  margin-top: 0.85rem;
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-ink);
  font-weight: 600;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 1.75rem;
  }
  .hero-feature {
    justify-self: start;
    width: min(100%, 260px);
    margin-top: 0.5rem;
  }
}

/* —— Section headers (brutalist) —— */
.section-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0.75rem;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.65rem;
}
.section-label .emp {
  flex: 0 0 auto;
  color: var(--g-ink);
}
.section-label::after {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  background: var(--g-rule);
}
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.section-lede {
  max-width: 36rem;
  margin: 0;
  color: var(--g-muted);
  font-size: 1.1rem;
}

/* —— Buttons / CTAs —— */
.amazon-text-btn,
.button {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  background: var(--g-vermillion);
  color: #fff !important;
  border: 2px solid var(--g-bar);
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--g-bar);
}
.amazon-text-btn:hover,
.button:hover {
  background: var(--g-ink);
  color: #fff !important;
  cursor: pointer;
}
.amazon-text-btn.ghost {
  background: transparent;
  color: var(--g-ink) !important;
  box-shadow: none;
}
.amazon-text-btn.ghost:hover {
  background: var(--g-ink);
  color: var(--g-paper) !important;
}

.bigbutton {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  font-size: 1.1rem;
  background: var(--g-vermillion);
  color: #fff;
  text-align: center;
  border: 2px solid var(--g-bar);
  text-decoration: none;
  font-weight: 600;
  box-shadow: 4px 4px 0 var(--g-bar);
}
.bigbutton:hover { background: var(--g-ink); cursor: pointer; }

.free {
  display: inline-block;
  background: var(--g-vermillion);
  padding: 0 0.4rem;
  color: #fff;
  font-size: 0.8em;
}
.call-to-action {
  display: inline-block;
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.75rem;
  background: var(--g-vermillion);
  padding: 0.4rem 0.55rem;
  color: #fff;
}

/* —— Book grid —— */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.75rem 1.25rem;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2.5rem;
  overflow: visible;
}
.book-item {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  float: none;
}
.book-item:nth-child(3n) { margin-top: 0.65rem; }
.book-item:nth-child(5n) { margin-top: 0; }
@media (min-width: 900px) {
  .book-item:nth-child(7n+2) { transform: translateY(10px); }
  .book-item:nth-child(5n+4) { transform: translateY(-6px); }
}

.cover {
  background: transparent;
  display: block;
  float: none;
  overflow: visible;
}
.small-cover {
  display: block;
  overflow: hidden;
  border: 2px solid var(--g-bar);
  background: #fff;
}
.small-cover > img {
  width: 100%;
  height: auto;
  display: block;
}
.shadowbox { box-shadow: 5px 5px 0 rgba(10, 10, 10, 0.85); }

.author {
  display: block;
  width: 100%;
  float: none;
  padding-top: 0.65rem;
  padding-bottom: 0.2rem;
  color: var(--g-muted);
}
.book-title {
  display: block;
  width: 100%;
  float: none;
  font-size: 1.25rem;
  line-height: 1.2;
  padding: 0.15rem 0;
  font-weight: 600;
}
.book-note {
  color: var(--g-muted);
  font-size: 0.75em;
  font-weight: 400;
  font-style: italic;
}

/* —— Book detail —— */
.book-preview {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}
.big-book {
  background: transparent;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  overflow: auto;
}
.book-page {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 2rem 2.5rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}
.big-cover {
  display: block;
  float: none;
  padding: 0;
  position: relative;
}
.big-cover::before {
  content: "";
  position: absolute;
  top: -0.75rem; left: -0.75rem;
  width: 40%; height: 30%;
  background: var(--g-vermillion);
  z-index: 0;
}
.big-cover > img,
.big-cover-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  border: 3px solid var(--g-bar);
  box-shadow: 8px 8px 0 var(--g-bar);
  background: #fff;
}
.book-description {
  display: block;
  float: none;
  width: auto;
}
.book-title-container { overflow: visible; margin-bottom: 0.75rem; }
.book-mark {
  display: inline-block;
  width: 2.5rem;
  height: 4px;
  background: var(--g-vermillion);
  margin: 0.5rem 0 1rem;
}

.retailers {
  width: 100%;
  overflow: auto;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.retailer {
  display: block;
  float: none;
  padding-right: 0;
  max-height: 40px;
  width: auto;
  height: auto;
}
.retailers img,
img.retailer {
  max-height: 40px;
  width: auto;
  height: auto;
  display: block;
}
img.retailer[src*="amaz"],
.retailers img[src*="amaz"] {
  max-width: 120px;
  max-height: none;
}

@media (max-width: 860px) {
  .book-page {
    grid-template-columns: 1fr;
  }
  .big-cover > img,
  .big-cover-img { max-width: 280px; }
}

/* About / calm prose */
.prose-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.prose-page .book-mark { margin-bottom: 1.25rem; }
.prose-page p { margin: 0 0 1.1rem; color: var(--g-ink); }
.prose-page a {
  color: var(--g-vermillion);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-page a:hover { color: var(--g-ink); }

/* —— Footer —— */
.footer {
  min-height: auto;
  width: 100%;
  border-top: 10px solid var(--g-bar);
  background: var(--g-bar);
  color: var(--g-paper);
  overflow: hidden;
  padding: 2rem 1.5rem 2.5rem;
  padding-left: calc(var(--bar-w) + 1.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2rem;
}
.footer .box {
  margin: 0;
  float: none;
  width: auto;
  display: block;
}
.footer h2 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #fff;
}
.footer p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #d8d2c6;
}
.footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--g-vermillion); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.75rem;
}
.footer-links a {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.footer-links a:hover { color: var(--g-vermillion); }

/* Legacy unused (kept harmless) */
.subscribe-block, .subscribe-form, .new-release, .letter, .video,
.telegram, .disqus, .preview-button, .file-format, .read-text, .big-text,
.navlogo > img, .biglogo, .logo, .overlay, .main-title { }
.new-release { padding: 0; min-height: 0; }
.nr-container { background: transparent; width: auto; max-width: none; margin: 0; padding: 0; }
.tn-small { width: 200px; }

@media (max-width: 500px) {
  .hero-title { font-size: 2.6rem; }
  .grid { grid-template-columns: 1fr 1fr; gap: 1.25rem 0.85rem; padding-left: 1rem; padding-right: 1rem; }
  .book-item:nth-child(n) { transform: none; margin-top: 0; }
}
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
}