@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Unna:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --cream: #fbf1da;
  --blue: #063f80;
  --red: #b62b17;
  --ink: #181512;
  --rule: rgba(23, 91, 129, .43);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Libre Baskerville", Georgia, serif;
  background:
    radial-gradient(ellipse at 50% 7%, rgba(255,255,255,.86) 0, rgba(255,255,255,.34) 30%, transparent 58%),
    linear-gradient(90deg, rgba(228,204,157,.18), transparent 13%, transparent 87%, rgba(228,204,157,.18)),
    var(--cream);
}
a { color: inherit; }

.site-shell {
  width: min(1328px, calc(100% - 54px));
  margin: 0 auto;
  padding: 20px 0 30px;
}

.hero-header { text-align: center; padding: 0 20px 14px; }
.hero-header h1 {
  margin: 0;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: clamp(3.7rem, 5.3vw, 5.35rem);
  font-weight: 700;
  line-height: .95;
  text-shadow: 0 1px 0 rgba(255,255,255,.88);
}
.small-red-rule {
  width: 94px;
  height: 4px;
  margin: 15px auto 18px;
  background: linear-gradient(90deg, transparent, var(--red) 18%, var(--red) 82%, transparent);
  border-radius: 50%;
}
.tagline {
  margin: 0;
  color: var(--red);
  font-family: "Unna", Georgia, serif;
  font-size: clamp(1.45rem, 2.04vw, 2rem);
  line-height: 1.1;
}

.hero {
  display: grid;
  grid-template-columns: 355px minmax(0, 540px);
  justify-content: center;
  align-items: center;
  gap: 57px;
  margin: 20px auto 12px;
}
.cover-column { display: flex; justify-content: center; align-items: center; }
.cover-link { display: block; width: 100%; }
.book-cover {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 19px 17px rgba(76, 53, 23, .22));
  transition: transform .2s ease, filter .2s ease;
}
.book-cover:hover { transform: translateY(-3px); filter: drop-shadow(0 23px 20px rgba(76,53,23,.27)); }

.intro-column { max-width: 540px; padding-top: 2px; }
.ornamental-rule { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: var(--blue); }
.ornamental-rule::before,.ornamental-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.ornamental-rule span { font-size: 1.42rem; line-height: 1; }
.intro-column h2,.author-copy h2,.media-panel h2 {
  margin: 0 0 9px;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-weight: 400;
}
.intro-column h2 { font-size: 2.16rem; line-height: 1.08; }
.intro-column p,.author-copy p,.media-panel p { line-height: 1.48; }
.intro-column p { margin: 0 0 11px; font-size: .91rem; }
.intro-column em:not(.book-title) { color: var(--red); }
.amazon-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
  padding: 12px 18px;
  border-radius: 5px;
  background: linear-gradient(#0d4d92, #073f80);
  color: #fff;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .2s ease, filter .2s ease;
}
.amazon-button:hover,.amazon-button:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }

.explore { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 5px 0 17px; }
.section-heading { display: flex; justify-content: center; align-items: center; gap: 26px; margin: 0 0 6px; }
.section-heading h2 {
  margin: 0;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: 1.27rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.flourish { color: var(--red); font-size: 1.45rem; transform: scaleX(1.35); }
.topic-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.topic-card {
  min-width: 0;
  padding: 1px 20px 0;
  text-align: center;
  text-decoration: none;
  border-left: 1px solid rgba(31,91,128,.28);
  transition: background .2s ease, transform .2s ease;
}
.topic-card:first-child { border-left: 0; }
.topic-card:hover,.topic-card:focus-visible { background: rgba(255,255,255,.3); transform: translateY(-2px); }
.topic-icon {
  display: block;
  width: 31px;
  height: 31px;
  margin: 0 auto 5px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topic-card h3 {
  margin: 0 0 9px;
  min-height: 46px;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.18;
}
.topic-card p { margin: 0; font-size: .69rem; line-height: 1.47; }

.lower-section {
  display: grid;
  grid-template-columns: minmax(0, 3.25fr) minmax(285px, 1.15fr);
  gap: 38px;
  padding: 18px 16px 0;
}
.author-panel { display: grid; grid-template-columns: 216px minmax(0,1fr); gap: 28px; align-items: start; }
.author-photo {
  width: 100%;
  height: 176px;
  object-fit: cover;
  object-position: center 31%;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(64,45,22,.14);
}
.author-copy h2,.media-panel h2 { font-size: 1.56rem; }
.author-copy p { margin: 0 0 8px; font-size: .79rem; }
.media-panel { align-self: stretch; padding: 1px 12px 0 38px; text-align: center; border-left: 1px solid var(--rule); }
.media-icon {
  display: block;
  width: 34px;
  height: 28px;
  margin: 0 auto 5px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-panel p { margin: 0 auto 5px; max-width: 260px; font-size: .76rem; }
.tiny-flourish { color: var(--blue); margin: 1px 0 5px; }
.media-panel a { color: var(--red); text-decoration: none; font-size: .87rem; }
.media-panel a:hover { text-decoration: underline; }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 330px minmax(0,540px); gap: 45px; }
  .topic-grid { grid-template-columns: repeat(3,1fr); }
  .topic-card:nth-child(4) { border-left: 0; }
  .topic-card:nth-child(n+4) { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(31,91,128,.22); }
}
@media (max-width: 900px) {
  .site-shell { width: min(100% - 28px,760px); }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .cover-link { width: min(78vw,355px); }
  .intro-column { max-width: none; }
  .lower-section { grid-template-columns: 1fr; }
  .author-panel { grid-template-columns: 200px 1fr; }
  .media-panel { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 0 0; }
}
@media (max-width: 640px) {
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card,.topic-card:nth-child(4) { border-left: 0; }
  .topic-card:nth-child(n+2) { margin-top: 18px; padding-top: 17px; border-top: 1px solid rgba(31,91,128,.22); }
  .author-panel { grid-template-columns: 1fr; }
  .author-photo { width: min(100%,280px); height: auto; }
}

/* Secondary pages */
.secondary-page {
  min-height: 100vh;
}
.secondary-shell {
  width: min(1450px, calc(100% - 56px));
  margin: 0 auto;
  padding: 28px 0 42px;
  display: grid;
  grid-template-columns: 324px minmax(0, 1fr);
  gap: 82px;
  align-items: start;
}
.secondary-sidebar {
  position: relative;
}
.sidebar-inner {
  position: sticky;
  top: 22px;
  min-height: calc(100vh - 50px);
  padding: 20px 18px 28px;
  border: 1px solid rgba(77, 82, 75, .16);
  border-radius: 7px;
  background: rgba(255, 251, 241, .52);
  box-shadow: 0 3px 12px rgba(68, 50, 30, .12);
}
.sidebar-brand {
  display: block;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: 3.35rem;
  font-weight: 700;
  line-height: .79;
  text-align: center;
  text-decoration: none;
}
.sidebar-red-rule {
  width: 78px;
  height: 3px;
  margin: 11px auto 8px;
  background: linear-gradient(90deg, transparent, var(--red) 16%, var(--red) 84%, transparent);
  border-radius: 50%;
}
.sidebar-red-rule.short { width: 57px; margin-top: 10px; margin-bottom: 12px; }
.sidebar-tagline {
  margin: 0;
  color: var(--red);
  font-family: "Unna", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.2;
  text-align: center;
}
.sidebar-cover-link { display: block; width: 100%; }
.sidebar-cover {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(76, 53, 23, .2));
}
.sidebar-amazon-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 13px 0 17px;
  padding: 13px 10px;
  border-radius: 5px;
  background: linear-gradient(#ce3518, #b92510);
  color: #fff;
  font-family: "Unna", Georgia, serif;
  font-size: 1.17rem;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.13);
}
.sidebar-divider { display: flex; align-items: center; gap: 8px; color: var(--blue); margin: 0 0 12px; }
.sidebar-divider::before,.sidebar-divider::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
.sidebar-divider span { font-size: 1.2rem; }
.sidebar-nav { display: grid; gap: 3px; }
.sidebar-nav-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-left: 4px solid transparent;
  border-radius: 4px;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: 1.03rem;
  line-height: 1.18;
  text-decoration: none;
}
.sidebar-nav-link svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #d72e1c;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-nav-link.active {
  border-left-color: var(--red);
  background: rgba(244, 219, 174, .42);
  color: var(--red);
}
.sidebar-nav-link:hover,.sidebar-nav-link:focus-visible { background: rgba(255,255,255,.44); }
.sidebar-nav-link.active:hover { background: rgba(244, 219, 174, .55); }

.secondary-content { min-width: 0; }
.secondary-header { text-align: center; }
.secondary-site-title {
  display: block;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: clamp(3.7rem, 5.3vw, 5.35rem);
  font-weight: 700;
  line-height: .95;
  text-decoration: none;
}
.secondary-header p {
  margin: 7px 0 13px;
  color: var(--red);
  font-family: "Unna", Georgia, serif;
  font-size: 1.25rem;
}
.secondary-ornamental-rule { display: flex; align-items: center; gap: 8px; color: var(--blue); }
.secondary-ornamental-rule::before,.secondary-ornamental-rule::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
.secondary-ornamental-rule span { font-size: 1.32rem; }
.secondary-article { max-width: 900px; margin: 26px 0 0 34px; }
.secondary-article h1 {
  margin: 0;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: clamp(3rem, 4vw, 4.15rem);
  font-weight: 700;
  line-height: 1.02;
}
.article-red-rule {
  width: 108px;
  height: 3px;
  margin: 13px 0 20px;
  background: linear-gradient(90deg, var(--red), var(--red) 82%, transparent);
  border-radius: 50%;
}
.secondary-article > p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.55;
}
.in-short-box {
  margin-top: 18px;
  padding: 13px 22px 14px;
  border: 1.5px solid var(--blue);
  border-radius: 7px;
  background: rgba(255,255,255,.18);
}
.in-short-box h2 {
  margin: 0 0 4px;
  color: var(--red);
  font-family: "Unna", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
}
.in-short-box h2 span { font-size: 1.2rem; }
.in-short-box p { margin: 0; font-size: .88rem; line-height: 1.48; }

@media (max-width: 1100px) {
  .secondary-shell { grid-template-columns: 290px minmax(0,1fr); gap: 42px; }
  .secondary-article { margin-left: 0; }
  .sidebar-brand { font-size: 3rem; }
}
@media (max-width: 820px) {
  .secondary-shell { width: min(100% - 28px, 760px); grid-template-columns: 1fr; gap: 28px; }
  .sidebar-inner { position: static; min-height: 0; }
  .sidebar-cover-link { width: min(100%, 330px); margin: 0 auto; }
  .sidebar-nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .secondary-shell { width: min(100% - 20px, 620px); padding-top: 12px; }
  .sidebar-inner { padding: 16px 12px 20px; }
  .sidebar-nav { grid-template-columns: 1fr; }
  .secondary-header p { font-size: 1.05rem; }
  .secondary-article h1 { font-size: 2.7rem; }
  .secondary-article > p { font-size: .94rem; }
}


/* Reader reviews */
.reviews-article { max-width: 930px; }
.reader-review { padding: 0 0 18px; }
.reader-review + .reader-review {
  padding-top: 17px;
  border-top: 1px solid rgba(28, 73, 119, .22);
}
.review-header { margin-bottom: 12px; }
.review-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.review-title-row h2 {
  margin: 0;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
}
.review-stars {
  color: var(--red);
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: 1px;
}
.review-meta {
  margin: 5px 0 0;
  color: #4d4a45;
  font-size: .94rem;
}
.reader-review blockquote {
  margin: 0;
  padding: 0;
}
.reader-review blockquote p {
  margin: 0 0 13px;
  font-size: 1rem;
  line-height: 1.55;
}
.reader-review blockquote p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
  .review-title-row { gap: 7px 10px; }
  .review-title-row h2 { font-size: 1.35rem; }
  .review-stars { font-size: 1.16rem; }
}

/* Long-form article pages */
.long-article { max-width: 930px; padding-bottom: 24px; }
.long-article .article-subtitle {
  margin: -4px 0 22px;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: 1.28rem;
  line-height: 1.35;
}
.long-article > p:not(.article-subtitle) { margin-bottom: 17px; }

/* Other books page */
.books-article { max-width: 960px; padding-bottom: 30px; }
.book-section { margin-top: 6px; }
.book-section + .book-section { margin-top: 34px; }
.book-section-heading {
  margin: 0 0 19px;
  padding-bottom: 7px;
  color: var(--red);
  font-family: "Unna", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 400;
  border-bottom: 1px solid rgba(28, 73, 119, .22);
}
.book-entry {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 0 0 28px;
}
.book-entry + .book-entry {
  padding-top: 27px;
  border-top: 1px solid rgba(28, 73, 119, .17);
}
.other-book-cover-link {
  display: block;
  width: 185px;
  text-decoration: none;
}
.other-book-cover {
  display: block;
  width: 100%;
  height: 278px;
  object-fit: contain;
  object-position: top center;
  background: rgba(255,255,255,.26);
  box-shadow: 0 7px 16px rgba(54, 40, 25, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.other-book-cover-link:hover .other-book-cover,
.other-book-cover-link:focus-visible .other-book-cover {
  transform: translateY(-3px);
  box-shadow: 0 11px 20px rgba(54, 40, 25, .23);
}
.book-entry-copy h3 {
  margin: 2px 0 12px;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: 1.72rem;
  line-height: 1.12;
}
.book-entry-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 680px) {
  .book-entry { grid-template-columns: 125px minmax(0, 1fr); gap: 18px; }
  .other-book-cover-link { width: 125px; }
  .other-book-cover { height: 190px; }
  .book-entry-copy h3 { font-size: 1.4rem; }
  .book-entry-copy p { font-size: .92rem; line-height: 1.5; }
}
@media (max-width: 480px) {
  .book-entry { grid-template-columns: 1fr; }
  .other-book-cover-link { width: min(190px, 70vw); }
  .other-book-cover { height: auto; max-height: 290px; }
}


/* Gambling Addiction endorsements page */
.endorsements-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--red);
  font-family: "Unna", Georgia, serif;
  font-size: 1.08rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.endorsements-link:hover,
.endorsements-link:focus-visible { color: var(--blue); }
.endorsements-article { max-width: 930px; padding-bottom: 30px; }
.endorsement-entry {
  margin: 0 0 25px;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(28, 73, 119, .17);
}
.endorsement-entry:last-of-type { border-bottom: 0; }
.endorsement-entry h2 {
  margin: 0 0 4px;
  color: var(--blue);
  font-family: "Unna", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
}
.endorsement-role {
  margin: 0 0 10px;
  color: var(--red);
  font-family: "Unna", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.35;
}
.endorsement-entry blockquote {
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 3px solid rgba(182, 43, 23, .65);
}
.endorsement-entry blockquote p { margin: 0; font-size: 1rem; line-height: 1.6; }
.back-to-books { margin: 4px 0 22px; }
.back-to-books a { color: var(--red); text-underline-offset: 3px; }
