/* A demo author's site. Deliberately not BookFunnel-branded: the point is to
   show the widget dropped into someone else's design, with its own type, colour
   and layout, and to prove the CSS jail holds in both directions. */

:root {
  --ink: #23201d;
  --muted: #6e665e;
  --rule: #e2dad0;
  --paper: #fbf7f2;
  --accent: #7a5ea7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 Georgia, "Iowan Old Style", serif;
}

a { color: var(--accent); }

.site {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: baseline;
  justify-content: space-between;
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 24px 20px;
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-size: 22px;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink);
}
/* The nav wraps. It carried two links laid out with margin-left and fitted a
   320px screen by luck; a third (Merchandise) pushed it 5px past the edge, and
   a header that overflows drags the whole page — the checkout scrim included —
   sideways with it. gap instead of margin so the spacing survives the wrap. */
.site nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
}
.site nav a {
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.site nav a:hover { text-decoration: underline; }

main { max-width: 940px; margin: 0 auto; padding: 40px 24px 64px; }

h1 { font-size: 34px; line-height: 1.2; margin: 0 0 14px; font-weight: normal; }
h2 { font-size: 22px; margin: 40px 0 12px; font-weight: normal; }
.lede { font-size: 20px; color: var(--muted); max-width: 34em; }

/* Home ------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: start; }
.hero img { width: 100%; border-radius: 3px; box-shadow: 0 6px 20px rgba(0,0,0,.16); }

/* Listing ---------------------------------------------------------------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 34px; margin-top: 28px; }
.shelf a { text-decoration: none; color: inherit; display: block; }
.shelf img { width: 100%; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: transform .15s; }
.shelf a:hover img { transform: translateY(-3px); }
.shelf h3 { font-size: 17px; font-weight: normal; margin: 12px 0 2px; }
.shelf p { margin: 0; font-size: 14px; color: var(--muted); }

/* Book page -------------------------------------------------------------- */
.book { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; }
/* The cover column. bfsales.js draws the selected format's images into #cover
   (data-images-target) and styles its own controls; this sheet only sizes the
   column and gives the images the page's look. The <img> written in the page
   is the no-script fallback the widget replaces. */
.book > .cover { min-width: 0; }
.cover img { max-width: 100%; border-radius: 3px; }
.cover > img { width: 100%; box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.aside { max-width: 36em; margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.blurb { max-width: 36em; }
/* A commitment rather than a description, so it is set apart from the blurb:
   merchandise says how it is posted, a bundle says what is in it. Either way
   the same words go in the product's seller or product note, which is where the
   checkout shows them BEFORE anyone pays. */
.ships,
.includes { max-width: 36em; margin-top: 20px; font-size: 15px; color: var(--muted); }

/* And on the listing, under the two single prices it undercuts. */
.shelf .deal { margin-top: 2px; color: var(--accent); }

/* No button styles here any more, and that is the point of the demo: the buy
   and add-to-cart controls, and the Delivered by BookFunnel mark, are drawn by
   bfsales.js into #buy. It takes its colour from data-accent-color, which is
   the same --accent this sheet uses, so an author sets the brand once.

   They are styled INLINE by the widget rather than from a stylesheet, because
   they land on the author's own page where the author's CSS reaches them. */

footer {
  max-width: 940px;
  margin: 0 auto;
  padding: 24px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 620px) {
  .hero, .book { grid-template-columns: 1fr; gap: 24px; }
  .hero img, .book > .cover { max-width: 240px; }
}