/* Big Classics: the Phase 3 series look (cream, near-black serif, one red bar). */
@font-face { font-family: Literata; src: url(/fonts/literata.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root { --cream: #f6f1e7; --paper: #fffdf8; --ink: #161616; --soft: #4a4640; --red: #d43d1a; --red-ink: #a82c10; --rule: #d9cfbb; --cloth: #8c1c2c; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Literata, Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: 22px; line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--red-ink); text-underline-offset: 0.15em; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2 { line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0 0 0.8em; }
.small { font-size: 18px; color: var(--soft); }

.top, main, .foot { max-width: 1160px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background-color: var(--paper); border: 2px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 24px; line-height: 1; padding-bottom: 6px; background-image: linear-gradient(var(--red), var(--red)); background-size: 28px 4px; background-position: center 45px; background-repeat: no-repeat; }
.word { font-weight: 700; font-size: 34px; letter-spacing: -0.01em; }
.tag { margin: 0; color: var(--soft); font-size: 21px; }

.launch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding: 48px 0 56px; }
.launch-cover img, .book-cover img { box-shadow: 0 2px 4px rgba(22, 22, 22, .25), 0 18px 40px rgba(22, 22, 22, .22); }
.now { display: inline-block; margin: 0 0 18px; padding: 6px 16px; background: var(--ink); color: var(--cream); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.launch h1, .book h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 700; letter-spacing: -0.015em; }
.by { font-size: 30px; margin: 20px 0 14px; padding-top: 20px; position: relative; }
.by::before { content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 7px; background: var(--red); }
.lp { font-size: 24px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.lede, .about { font-size: 25px; line-height: 1.5; max-width: 34em; }
.price { font-size: 46px; font-weight: 700; line-height: 1.1; margin: 22px 0 16px; }
.buy { display: inline-block; background: var(--red-ink); color: #fff; font-weight: 700; font-size: 26px; text-decoration: none; padding: 16px 30px; border-radius: 6px; }
.buy:hover { background: var(--ink); }
.launch .small { margin-top: 18px; }

.sample { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: center; padding: 40px; background: var(--paper); border: 1px solid var(--rule); }
.sample img { border: 1px solid var(--rule); max-height: 560px; width: auto; margin: 0 auto; }
.sample h2, .soon h2 { font-size: clamp(34px, 4.4vw, 48px); margin-bottom: 14px; }

.soon { padding: 64px 0 40px; }
.soon .intro { font-size: 25px; margin-bottom: 34px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 44px 32px; }
.card a { display: block; color: var(--ink); text-decoration: none; }
.card img { box-shadow: 0 1px 3px rgba(22, 22, 22, .25), 0 8px 20px rgba(22, 22, 22, .16); margin-bottom: 16px; }
.card a:hover img { box-shadow: 0 1px 3px rgba(22, 22, 22, .3), 0 12px 28px rgba(22, 22, 22, .3); }
.card span { display: block; }
.c-title { font-weight: 700; font-size: 23px; line-height: 1.22; }
.card a:hover .c-title { text-decoration: underline; }
.c-author { font-size: 20px; color: var(--soft); margin-top: 4px; }
.c-price { font-weight: 700; font-size: 23px; margin-top: 8px; }
.c-sale { font-size: 19px; color: var(--red-ink); font-weight: 600; }

.book { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 56px; align-items: start; padding: 48px 0 40px; }
.book .price { margin-bottom: 4px; }
.sale { font-size: 26px; font-weight: 700; color: var(--red-ink); margin-bottom: 30px; }
.details { margin: 0; border-top: 1px solid var(--rule); font-size: 21px; }
.details div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.details dt { color: var(--soft); }
.details dd { margin: 0; }
.onward { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 24px 0 48px; padding: 24px; background: var(--paper); border: 1px solid var(--rule); }
.now-link { display: flex; align-items: center; gap: 20px; color: var(--ink); text-decoration: none; font-size: 23px; }
.now-link img { width: 84px; box-shadow: 0 1px 3px rgba(22, 22, 22, .3); }
.now-link:hover span { text-decoration: underline; }
.home-link { font-size: 23px; font-weight: 600; }

.notfound { padding: 80px 0; max-width: 30em; }
.notfound h1 { font-size: clamp(38px, 5vw, 56px); margin-bottom: 20px; }

.foot { margin-top: 40px; padding-top: 28px; padding-bottom: 48px; border-top: 1px solid var(--rule); }
.foot a { color: var(--ink); font-weight: 700; }

@media (max-width: 760px) {
  body { font-size: 20px; }
  .word { font-size: 28px; }
  .mark { width: 52px; height: 52px; font-size: 20px; background-size: 24px 3px; background-position: center 38px; }
  .tag { font-size: 19px; }
  .launch, .book, .sample { grid-template-columns: 1fr; gap: 28px; }
  .launch { padding: 28px 0 40px; }
  .launch-cover, .book-cover { max-width: 420px; margin: 0 auto; width: 100%; }
  .sample { padding: 22px; }
  .lede, .about { font-size: 22px; }
  .by { font-size: 26px; }
  .buy { display: block; text-align: center; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
  .c-title { font-size: 20px; }
  .c-author { font-size: 18px; }
  .c-sale { font-size: 16px; white-space: nowrap; }
  .details div { grid-template-columns: 1fr; gap: 2px; }
}