/* Bit & Being Press — bitandbeingbooks.com
   Dark ground sampled from the house covers (#04080F shadow, #AD884D gold). */

:root {
  --bg:       #0B0E13;
  --ink:      #EDE7DB;
  --muted:    #948C7E;
  --faint:    #6C6558;
  --rule:     #232833;
  --gold:     #C09A57;
  --gold-dim: #8E7340;
  --measure:  41rem;
  --shadow:   0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.42);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.75rem; }

/* ---------------- masthead ---------------- */

.masthead { padding: 3.25rem 1.75rem 0; text-align: center; }

.wordmark { display: inline-block; text-decoration: none; color: var(--ink); }

.wordmark img {
  width: clamp(6.5rem, 15vw, 9rem);
  height: auto;
  margin: 0 auto;
}

.wordmark-name {
  display: block;
  margin: 1.05rem -0.28em 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.wordmark-sub {
  display: block;
  margin: 0.6rem -0.36em 0 0;
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav { margin-top: 1.8rem; display: flex; gap: 1.9rem; justify-content: center; flex-wrap: wrap; }

.nav a {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--gold-dim); }

/* ---------------- hero ---------------- */

/* wider than .wrap so the whole shelf fits on one row; the text keeps its own measure */
.hero { max-width: 75rem; padding: 4rem 1.75rem 3.5rem; text-align: center; }

.statement {
  margin: 0 auto;
  max-width: 32rem;
  font-size: 1.72rem;
  font-style: italic;
  line-height: 1.34;
  text-wrap: balance;
}

.statement-sub {
  margin: .85rem auto 0;
  max-width: 38rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.shelf {
  margin-top: 3.25rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.shelf a { display: block; }

.shelf img {
  /* every cover matched on HEIGHT — their widths differ by aspect ratio.
     Sized so all eight sit on one row down to the 46rem breakpoint. */
  height: clamp(6.5rem, 14.5vw, 12.5rem);
  width: auto;
  max-width: none;
  box-shadow: var(--shadow);
  transform-origin: center bottom;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}

/* every cover grows by the same ratio, whichever one you point at */
.shelf a:hover img,
.shelf a:focus-visible img {
  transform: scale(1.075) translateY(-8px);
  box-shadow: 0 4px 10px rgba(0,0,0,.55), 0 26px 60px rgba(0,0,0,.5);
}

/* ---------------- sections ---------------- */

.band { border-top: 1px solid var(--rule); padding: 3.75rem 0; }

.section-label {
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 2.25rem;
}

.series-head { margin: 0 0 2.5rem; }

.series-name { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.02em; }

.series-blurb { margin: 0; max-width: var(--measure); color: var(--muted); font-style: italic; }

/* ---------------- a book ---------------- */

.book { display: grid; grid-template-columns: 14rem 1fr; gap: 2.75rem; align-items: start; }

.book + .book { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--rule); }

.book-art img {
  height: 20.5rem;      /* equal height across titles, whatever the ratio */
  width: auto;
  max-width: none;      /* never squash — the column is sized for the widest ratio */
  box-shadow: var(--shadow);
}

.book-meta {
  margin: 0 0 0.55rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.book-meta .dot { opacity: .45; padding: 0 .3em; }
.flag { color: var(--gold); }

.book-title { margin: 0 0 0.5rem; font-size: 2.1rem; font-weight: 500; line-height: 1.1; }

.book-line { margin: 0 0 1.25rem; font-size: 1.22rem; font-style: italic; color: var(--gold); }

.book-body p { margin: 0 0 1rem; max-width: var(--measure); }

.book-note {
  margin: 1.4rem 0 0 !important;
  padding-left: 1.1rem;
  border-left: 2px solid var(--gold-dim);
  font-style: italic;
  color: var(--muted);
}

.book-status {
  margin: 1.6rem 0 0 !important;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------- buy + specs ---------------- */

.buy { margin: 1.75rem 0 0 !important; display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-block;
  padding: .62rem 1.7rem;
  background: var(--gold);
  color: #14100A;
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: transparent; color: var(--gold); }

.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--gold); color: var(--gold); }

.specs {
  margin: 1.9rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
  color: var(--muted);
}
.specs > div { display: flex; gap: .7rem; padding: .16rem 0; }
.specs dt {
  flex: 0 0 8rem;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-top: .28rem;
  color: var(--faint);
}
.specs dd { margin: 0; }

/* ---------------- prose ---------------- */

.prose p { max-width: var(--measure); margin: 0 0 1rem; }
.muted { color: var(--muted); font-size: .95rem; }

/* ---------------- essay page (how-we-write.html) ---------------- */

.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold-dim); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the same width as the figures inside the text column */
.essay-hero { margin: 3rem auto 0; max-width: calc(var(--measure) + 3.5rem); padding: 0; }
.essay-hero img { width: 100%; box-shadow: var(--shadow); }
.essay-signoff { margin: 1.5rem auto 4rem; }

.essay-body { max-width: calc(var(--measure) + 3.5rem); padding-top: 3rem; padding-bottom: 1rem; }
.essay-body p { margin: 0 0 1.1rem; text-wrap: pretty; }

.essay-lede {
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.42;
  color: var(--muted);
  margin-bottom: 2.75rem !important;
  text-wrap: balance;
}

.essay-body h2 {
  margin: 3rem 0 1.1rem;
  font-size: 1.72rem;
  font-weight: 500;
  line-height: 1.2;
}

.stages { list-style: none; counter-reset: stage; margin: 1.75rem 0 0; padding: 0; }
.stages[start="4"] { counter-reset: stage 3; }
.stages li { counter-increment: stage; position: relative; padding-left: 2.6rem; margin-bottom: 1.6rem; }
.stages li::before {
  content: counter(stage);
  position: absolute; left: 0; top: .05rem;
  font-size: 1.3rem; color: var(--gold);
}
.stages h3 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 600; }
.stages p { margin: 0; }

.essay-figure { margin: 2.5rem -1.75rem 2.75rem; }
.essay-figure img { width: 100%; box-shadow: var(--shadow); }

.essay-figure figcaption,
.essay-hero figcaption {
  margin-top: 1rem;
  text-align: center;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
}

.essay-list { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.essay-list li { margin-bottom: .6rem; }
.essay-list li::marker { color: var(--gold-dim); }
.essay-list strong { font-weight: 600; }

/* ---------------- pages: cards, crumbs, links ---------------- */

.band-first { border-top: 0; padding-top: 2.5rem; }

.crumbs {
  margin: 0 0 2.25rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs .dot { opacity: .45; padding: 0 .4em; }

.title-link { color: inherit; text-decoration: none; }
.title-link:hover { color: var(--gold); }

.links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem !important; }
.more {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-dim);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 2.5rem 2rem;
}
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.card img {
  height: 15rem; width: auto; max-width: 100%; align-self: flex-start;
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  transform-origin: left bottom;
  margin-bottom: 1rem;
}
.card:hover img, .card:focus-visible img { transform: translateY(-6px); }
.card-title { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.card:hover .card-title { color: var(--gold); }
.card-line { margin-top: .35rem; font-size: .98rem; font-style: italic; color: var(--muted); line-height: 1.4; }
.card-status {
  margin-top: .6rem;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}
.card-status.flag { color: var(--gold); }

.books-index .band:first-of-type { border-top: 0; padding-top: 2.5rem; }

/* ---------------- text pages: press, contact, media kit ---------------- */

.page-lede { font-size: 1.32rem; font-style: italic; line-height: 1.45; color: var(--ink); margin-bottom: 2rem !important; }
.page-intro { margin: -1.25rem 0 2.25rem; color: var(--muted); font-style: italic; }

.prose h2 { margin: 2.4rem 0 .7rem; font-size: 1.45rem; font-weight: 500; line-height: 1.2; }

.worlds { list-style: none; margin: 0 0 1rem; padding: 0; max-width: var(--measure); }
.worlds li { margin: 0 0 .9rem; padding-left: 1.1rem; border-left: 2px solid var(--gold-dim); }
.worlds strong { font-weight: 600; }
.muted-inline { display: block; font-size: .95rem; color: var(--muted); }

.draft-note {
  display: inline-block;
  padding: .3rem .8rem;
  border: 1px dashed var(--gold);
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kit-book { display: grid; grid-template-columns: 9rem 1fr; gap: 2rem; padding: 2.25rem 0; border-top: 1px solid var(--rule); }
.kit-art img { height: 13rem; width: auto; max-width: none; box-shadow: var(--shadow); margin-bottom: .9rem; }
.kit-title { margin: 0 0 .8rem; font-size: 1.6rem; font-weight: 500; line-height: 1.15; }
.kit-body p { margin: 0 0 .6rem; max-width: var(--measure); }
.kit-label { margin: 1rem 0 .2rem !important; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.kit-body details { margin: 1rem 0 0; max-width: var(--measure); }
.kit-body summary { cursor: pointer; color: var(--gold); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.kit-body details[open] summary { margin-bottom: .8rem; }

/* ---------------- footer ---------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding: 2.25rem 1.75rem 3.5rem;
  text-align: center;
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--muted);
}
.colophon p { margin: .3rem 0; }

/* ---------------- responsive ---------------- */

@media (max-width: 46rem) {
  /* two even rows of four rather than a ragged wrap */
  .shelf { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; justify-items: center; }
  .shelf img { height: clamp(4rem, 27vw, 11rem); }
  .book { grid-template-columns: 10.5rem 1fr; gap: 1.75rem; }
  .book-art img { height: 15.4rem; }
  .book-title { font-size: 1.8rem; }
}

@media (max-width: 34rem) {
  .masthead { padding-top: 2.5rem; }
  .wordmark-name { font-size: 1.32rem; letter-spacing: .19em; margin-right: -.19em; }
  .hero { padding: 2.75rem 1.75rem 2.5rem; }
  .statement { font-size: 1.3rem; }
  .statement-sub { font-size: .96rem; }
  .shelf { gap: .5rem; }
  .book { grid-template-columns: 1fr; gap: 1.5rem; }
  .book-art img { height: 16rem; }
  .book-title { font-size: 1.7rem; }
  .specs > div { flex-direction: column; gap: .08rem; padding: .34rem 0; }
  .specs dt { flex: none; }
  .band { padding: 2.75rem 0; }
  .essay-hero { margin-top: 2rem; padding: 0; }
  .essay-figure { margin-left: -1.75rem; margin-right: -1.75rem; }
  .essay-lede { font-size: 1.2rem; }
  .essay-body h2 { font-size: 1.45rem; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
  .card img { height: 12rem; }
  .nav { gap: .9rem 1.4rem; }
  .kit-book { grid-template-columns: 1fr; gap: 1rem; }
}