:root {
  --cream:#fff9e9;
  --green:#24382c;
  --coral:#ed6862;
  --pink:#f4cdc7;
  --blue:#c9d7ef;
  --sage:#cbdcad;
  --lime:#e3ff62;
  --ink:#20342a;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--cream);
  color:var(--green);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.55;
}

a {
  color:inherit;
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--coral);
  outline-offset:4px;
}

h1,h2,h3,.logo {
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:-.045em;
  line-height:1.05;
}

h2 {
  font-size:clamp(2.2rem,4.5vw,4rem);
  margin:.15em 0 .35em;
}

h3 {
  font-size:clamp(1.4rem,2vw,2rem);
  margin:.25em 0;
}

p {
  max-width:66ch;
}

.wrap {
  max-width:1300px;
  margin:auto;
  padding-left:clamp(20px,4vw,54px);
  padding-right:clamp(20px,4vw,54px);
}

.site-header {
  border-bottom:1px solid #dcd8c9;
}

.header-inner {
  min-height:94px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}

.logo {
  text-decoration:none;
  font-size:clamp(2rem,3vw,3rem);
  font-weight:bold;
}

.dot {
  color:var(--coral);
}

nav {
  display:flex;
  gap:clamp(12px,2.5vw,35px);
  flex-wrap:wrap;
}

nav a {
  text-decoration:none;
  text-transform:uppercase;
  font-size:.85rem;
  font-weight:800;
}

nav a:hover {
  text-decoration:underline;
}

.eyebrow {
  font-size:.78rem;
  letter-spacing:.22em;
  font-weight:800;
  text-transform:uppercase;
}

.hero {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4%;
  align-items:center;
  padding-top:62px;
  padding-bottom:56px;
  min-height:620px;
}

.hero h1 {
  font-size:clamp(4rem,8.4vw,8.8rem);
  margin:.22em 0 .2em;
}

.hero h1 em {
  color:var(--coral);
}

.hero p {
  font-size:1.16rem;
}

.button {
  display:inline-block;
  border-radius:100px;
  background:var(--green);
  color:white;
  padding:13px 23px;
  font-weight:800;
  font-size:.84rem;
  text-decoration:none;
  margin-top:22px;
}

.button:hover {
  background:#42664d;
}

.hero-art {
  min-height:380px;
  position:relative;
  background:var(--sage);
  border-radius:50% 50% 18px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.cover {
  background:#e9817e;
  color:white;
  box-shadow:12px 14px 0 #0002;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:Georgia,serif;
  font-size:clamp(1.5rem,2.8vw,3rem);
  font-weight:bold;
  line-height:1.06;
  padding:20px;
}

.hero-art .cover {
  width:43%;
  height:60%;
  transform:rotate(-12deg);
}

.hero-art .cover:nth-child(2) {
  background:#4c6f9f;
  transform:rotate(11deg);
  margin-left:-10px;
}

.sticker {
  position:absolute;
  right:4%;
  bottom:7%;
  background:var(--lime);
  padding:20px;
  border-radius:50%;
  font-size:.85rem;
  font-weight:900;
  transform:rotate(9deg);
}

.ticker {
  background:var(--lime);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:800;
  padding:15px;
}

.section {
  padding-top:75px;
  padding-bottom:75px;
}

.lead {
  font-size:1.15rem;
}

.card-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:30px;
}

.topic-card {
  min-height:225px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
}

.topic-card:nth-child(1) {
  background:var(--pink);
}

.topic-card:nth-child(2) {
  background:var(--blue);
}

.topic-card:nth-child(3) {
  background:var(--sage);
}

.topic-card:hover {
  transform:translateY(-4px);
}

.topic-card small {
  text-transform:uppercase;
}

.topic-card p {
  margin:0;
  font-size:.85rem;
}

.media-strip {
  background:#f4e9d9;
  padding-top:50px;
  padding-bottom:50px;
}

.media-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.media-tile {
  aspect-ratio:4/3;
  background:#e4b3b1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
}

.media-tile:nth-child(2) {
  background:#b9c9e5;
}

.media-tile:nth-child(3) {
  background:#d2dfb7;
}

.media-tile strong {
  font-family:Georgia,serif;
  font-size:clamp(1.3rem,2.5vw,2.3rem);
  line-height:1.05;
}

.media-tile span {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.article {
  border-top:1px solid #d7d5c8;
  padding:65px 0;
}

.article-inner {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:7%;
}

.article-number {
  font-weight:800;
  letter-spacing:.1em;
  color:#657a65;
}

.article h2 {
  margin-top:12px;
}

.article-copy p:first-child {
  margin-top:0;
}

.highlight {
  background:var(--lime);
  padding:2px 5px;
}

.book-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:35px;
}

.book-card {
  margin:0;
}

.book-cover {
  aspect-ratio:3/4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
  background:#7c596c;
  color:#fff;
  border-radius:8px;
  box-shadow:6px 7px 0 #24382c25;
}

.book-card:nth-child(2) .book-cover {
  background:#dc478c;
}

.book-card:nth-child(3) .book-cover {
  background:#8664a0;
}

.book-card:nth-child(4) .book-cover {
  background:#b73550;
}

.book-card:nth-child(5) .book-cover {
  background:#517b83;
}

.book-card:nth-child(6) .book-cover {
  background:#c17755;
}

.book-card:nth-child(7) .book-cover {
  background:#4e607c;
}

.book-card:nth-child(8) .book-cover {
  background:#667c4b;
}

.book-cover strong {
  font-family:Georgia,serif;
  font-size:clamp(1.3rem,2.5vw,2.5rem);
  line-height:1.06;
}

.book-cover span {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}

.book-card figcaption {
  margin-top:14px;
  font-size:.9rem;
}

.book-card figcaption strong {
  display:block;
}

.note {
  font-size:.85rem;
  color:#52685a;
}

.footer {
  background:var(--green);
  color:var(--cream);
  padding-top:50px;
  padding-bottom:45px;
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:35px;
  flex-wrap:wrap;
}

.footer a {
  color:inherit;
}

.footer .logo {
  font-size:2.6rem;
}

.footer .dot {
  color:var(--coral);
}

.footer p {
  font-size:.9rem;
}

.footer-links {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
}

.footer-links a {
  font-size:.85rem;
}

.source-list {
  padding-left:20px;
}

.source-list li {
  margin:8px 0;
}

@media(max-width:760px) {
  .header-inner {
    min-height:65px;
    align-items:flex-start;
    flex-direction:column;
    padding-top:13px;
    padding-bottom:15px;
    gap:8px;
  }

  .logo {
    font-size:2rem;
  }

  nav {
    gap:14px;
  }

  nav a {
    font-size:.68rem;
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:40px;
    min-height:0;
    gap:40px;
  }

  .hero h1 {
    font-size:clamp(3.5rem,13vw,5.8rem);
  }

  .hero-art {
    min-height:300px;
  }

  .hero-art .cover {
    height:62%;
    font-size:1.6rem;
  }

  .ticker {
    font-size:.68rem;
  }

  .section {
    padding-top:50px;
    padding-bottom:50px;
  }

  .card-grid {
    grid-template-columns:1fr;
  }

  .topic-card {
    min-height:150px;
  }

  .media-grid {
    grid-template-columns:1fr;
  }

  .media-tile {
    aspect-ratio:2/1;
  }

  .article-inner {
    grid-template-columns:1fr;
    gap:15px;
  }

  .book-grid {
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .book-cover {
    padding:13px;
  }

  .book-cover strong {
    font-size:1.4rem;
  }

  .footer-inner {
    display:block;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  .topic-card:hover {
    transform:none;
  }

}

/* Real book covers in the original BookTok layout */
.real-book-cover {
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  box-shadow:6px 7px 0 #24382c25;
  transition:transform .2s ease,box-shadow .2s ease;
}

.book-card:hover .real-book-cover {
  transform:translateY(-5px);
  box-shadow:8px 12px 0 #24382c20;
}

.book-card figcaption {
  line-height:1.45;
}


/* ==========================================
   CREATIVE DIRECTOR REVIEW — VISUAL UPDATES
   ========================================== */
.hero-art { background: #d8e5c9; isolation: isolate; }
.hero-collage { position: relative; width: 100%; height: 100%; min-height: 380px; }
.hero-orbit { position: absolute; top: 11%; left: 12%; font-size: .75rem; font-weight: 900; letter-spacing: .2em; transform: rotate(-8deg); z-index: 4; }
.hero-cover { position: absolute; width: 34%; height: 59%; object-fit: cover; box-shadow: 10px 16px 0 #24382c22, 0 18px 30px #24382c30; border: 4px solid #fff9e9; }
.hero-cover-one { left: 13%; top: 23%; transform: rotate(-15deg); z-index: 1; }
.hero-cover-two { left: 35%; top: 16%; transform: rotate(6deg); z-index: 2; }
.hero-cover-three { left: 57%; top: 28%; transform: rotate(16deg); z-index: 3; }
.hero-art .sticker { z-index: 5; }
.media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 920px; margin: 30px auto 0; }
.media-tile, .media-tile:nth-child(2), .media-tile:nth-child(3) { background: transparent; padding: 0; aspect-ratio: 9/15; min-height: 0; }
.feed-frame { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 15px; background: #24382c; color: white; box-shadow: 6px 9px 0 #24382c20; }
.feed-frame > img { width: 100%; height: 100%; object-fit: contain; padding: 18px 28px 80px; background: linear-gradient(145deg,#dbb3a9,#8d9d91); }
.media-tile:nth-child(2) .feed-frame > img { background: linear-gradient(145deg,#b6c7e7,#e4c5b4); }
.media-tile:nth-child(3) .feed-frame > img { background: linear-gradient(145deg,#c6d7af,#8a9ca4); }
.feed-shade { position: absolute; inset: 0; background: linear-gradient(transparent 53%,#16241ad9 100%); pointer-events: none; }
.feed-top { position: absolute; top: 14px; left: 14px; font: 800 10px Arial,sans-serif; letter-spacing: .12em; background: #24382caa; border-radius: 30px; padding: 7px 10px; }
.feed-caption { position: absolute; bottom: 18px; left: 17px; right: 52px; display: flex; flex-direction: column; gap: 6px; }
.feed-caption small, .feed-caption span { font: 600 11px Arial,sans-serif; letter-spacing: .02em; text-transform: none; }
.feed-caption strong { font: bold clamp(19px,2.3vw,29px)/1.08 Georgia,serif; }
.feed-actions { position: absolute; bottom: 30px; right: 13px; display: flex; flex-direction: column; gap: 15px; font-size: 25px; z-index: 2; }
@media(max-width:760px) {
  .hero-collage { min-height: 300px; }
  .media-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .media-tile { aspect-ratio: 9/16; }
  .feed-frame > img { padding: 10px 8px 62px; }
  .feed-top { font-size: 7px; padding: 5px; top: 8px; left: 6px; }
  .feed-caption { left: 8px; bottom: 10px; right: 17px; gap: 3px; }
  .feed-caption strong { font-size: clamp(12px,2.7vw,19px); }
  .feed-caption small,.feed-caption span { font-size: 8px; }
  .feed-actions { right: 5px; bottom: 14px; font-size: 13px; gap: 7px; }
}


/* BOOKTOK IN THE REAL WORLD — editorial photo in publishing section */
.bookstore-feature {
  margin: 44px 0 0;
  max-width: 100%;
}

.bookstore-feature img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.bookstore-feature figcaption {
  margin-top: 13px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #52685a;
}

.bookstore-feature figcaption strong {
  color: var(--green);
  letter-spacing: .045em;
}


/* Reliable hero collage sizing across browsers and GitHub Pages */
.hero-art { min-width: 0; }
.hero-collage {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 380px;
}
.hero-cover {
  display: block;
  position: absolute;
  width: 34%;
  height: 59%;
  object-fit: cover;
}
@media (max-width: 760px) {
  .hero-collage { min-height: 300px; }
}