/* The storefront dresses like the books: Nunito, as on their pages; white
   paper; the color wheel of Colors, Shapes, & Numbers and the rings of the
   Basic Binary Board Book; covers with the round corners and thick edges of
   a board book. Each book's page and card take its colors from its art. */

/* Nunito, by Vernon Adams and the Nunito Project Authors, under the SIL Open
   Font License 1.1 (fonts/OFL.txt): the variable font (weights 200 to 1000)
   in Fontsource 5.3.0's latin and latin-ext subsets. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/fonts/nunito-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/fonts/nunito-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #1f1d1a;
  --paper: #fffdf8;
  --muted: #59534c;
  --line: #ece5d8;
  /* The color wheel, red to magenta, from the books' own colors. */
  --red: #e0301e;
  --orange: #f1882c;
  --yellow: #fcea2b;
  --green: #3a9a3f;
  --teal: #00809d;
  --blue: #3f7fd0;
  --magenta: #d200d1;
  --wheel: var(--red), var(--orange), var(--yellow), var(--green), var(--teal), var(--blue), var(--magenta);
  /* A book's colors: --accent for its edge and sticker, --deep (white text on
     it at least 4.5:1) for its button. The shop's own are the silent red. */
  --accent: var(--yellow);
  --deep: #b3261e;
  font-family: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.book-bad-words { --accent: #fcea2b; --deep: #b3261e; }
.book-basic-binary-board-book { --accent: #d200d1; --deep: #006b82; }
.book-colors-shapes-numbers { --accent: #f1882c; --deep: #b23a12; }
.book-nato-words { --accent: #92d3f5; --deep: #1f5f99; }
.book-pedantic-shapes { --accent: #eb1b01; --deep: #a33f00; }
.book-the-day-is-hours { --accent: #f4d77c; --deep: #2f5a8a; }
.book-the-tots-tengwar { --accent: #dec1a1; --deep: #3d3a8c; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-wrap: break-word; }
body::before {
  content: "";
  display: block;
  height: 0.5rem;
  background: linear-gradient(90deg,
    var(--red) 0 14.3%, var(--orange) 0 28.6%, var(--yellow) 0 42.9%, var(--green) 0 57.1%,
    var(--teal) 0 71.4%, var(--blue) 0 85.7%, var(--magenta) 0);
}
header, main, footer { max-width: 66rem; margin: 0 auto; padding: 0 1.25rem; }
img { max-width: 100%; height: auto; }

header {
  padding-top: 1.25rem; padding-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
header .home { min-width: 0; }
header .cart-link { flex: none; }
header .sections { flex: none; display: flex; gap: 1rem; margin-left: auto; margin-right: 1rem; font-weight: 700; }
header .sections a { color: var(--deep); }
header .home {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 900; font-size: 1.2rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}
/* The color wheel as a ring, like the rings of the binary board book. */
header .home::before {
  content: "";
  flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 32%, transparent 33%),
    conic-gradient(var(--wheel), var(--red));
}

/* The cart, at the head of every page: a pill with the count as a sticker. */
header .cart-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800; color: var(--ink); text-decoration: none;
  padding: 0.3rem 0.5rem 0.3rem 0.95rem; min-height: 2.75rem;
  border: 2px solid var(--ink); border-radius: 999px; background: white;
}
header .cart-link:not(:has(.cart-count:not([hidden]))) { padding-right: 0.95rem; }
header .cart-link:hover .cart-word { text-decoration: underline; text-decoration-color: var(--deep); text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; }
header .cart-link:focus-visible { border-radius: 999px; }
.cart-count {
  min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.95rem; color: white; background: var(--deep);
}
.cart-count[hidden] { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

a { color: var(--ink); text-decoration-color: var(--deep); text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.2em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 0.35rem; }

h1, h2 { font-weight: 900; line-height: 1.15; letter-spacing: -0.005em; }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem); margin: 1.5rem 0 1rem; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }
p { margin: 0 0 1rem; }

.lede { font-size: 1.2rem; max-width: 40rem; color: var(--ink); }

/* The catalog: a shelf of board books. */
.catalog {
  list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; gap: 2.5rem 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.catalog li { display: flex; flex-direction: column; gap: 0.2rem; }
.catalog a { text-decoration: none; color: var(--ink); border-radius: 0.9rem; }
.catalog img, .book .cover {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 7%;
  background: white;
  /* A board book's thick edge, in the book's color, then its shadow. */
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.08),
    0.3rem 0.35rem 0 0 var(--accent),
    0.3rem 0.35rem 0 1px rgb(0 0 0 / 0.08),
    0.3rem 0.9rem 1.4rem -0.4rem rgb(40 30 10 / 0.3);
}
/* A cover in motion is a picture around the still cover, which takes no box
   of its own: the cover inside lays out, fans and casts its edge as any.
   Its source would otherwise be a box too, a grid item on a book's page. */
picture { display: contents; }
picture source { display: none; }
/* A card's book: the cover, with pages 2 and 4 stacked behind it, out of
   sight until the book opens (below, for those who hover and have not
   asked for less motion). The pages take no room of their own. */
.catalog .fan { display: block; position: relative; }
.catalog .leaf { display: none; position: absolute; top: 0; left: 0; pointer-events: none; }
.catalog .title { display: block; font-weight: 900; font-size: 1.2rem; line-height: 1.25; margin-top: 1.1rem; }
.catalog a:hover .title { text-decoration: underline; text-decoration-color: var(--deep); text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; }
.catalog .by { color: var(--muted); font-size: 0.95rem; }
.catalog .summary { font-size: 0.98rem; line-height: 1.45; }
.catalog .price, .book .price { align-self: flex-start; margin-top: 0.4rem; }
.catalog .price {
  font-weight: 800; font-size: 0.95rem;
  padding: 0.15rem 0.75rem; border-radius: 999px;
  background: var(--paper);
  background: color-mix(in srgb, var(--accent) 30%, white);
  border: 2px solid var(--accent);
}
/* The printed book's sticker is where to buy it, a link that opens a new
   tab: the same sticker, tall enough to tap, with an arrow out of a box. */
.catalog a.price {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0.3rem 0.8rem 0.3rem 0.9rem;
}
.catalog a.price:hover {
  background: color-mix(in srgb, var(--accent) 45%, white);
  text-decoration: underline; text-decoration-color: var(--deep); text-decoration-thickness: 0.12em; text-underline-offset: 0.18em;
}
.catalog a.price:focus-visible { border-radius: 999px; outline-offset: 4px; }
.external { flex: none; width: 1em; height: 1em; }
p.buy a .external { width: 0.9em; height: 0.9em; margin-left: 0.45em; vertical-align: -0.08em; }

/* Each PDF's card can add its book to the cart. To add: a pill in the book's
   deep color with a cart and a plus. In the cart: a sticker in the book's
   colors, square-cornered, with a check, and the button turns to a white
   pill, dashed like the PDF badge, with a cart and a minus and the word
   Remove. */
.card-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-top: 0.75rem; }
.card-cart[hidden], .card-in-cart[hidden] { display: none; }
.card-cart .icon { flex: none; width: 1.3em; height: 1.3em; }
.card-cart button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0.4rem 1rem 0.4rem 0.75rem;
  font: inherit; font-weight: 800; font-size: 0.95rem; line-height: 1.2; cursor: pointer;
  color: white; background: var(--deep);
  border: 2px solid var(--deep); border-radius: 999px;
  box-shadow: 0 0.25rem 0 0 var(--ink);
}
.card-cart button:hover { filter: brightness(1.1); }
.card-cart button:active { transform: translateY(0.15rem); box-shadow: 0 0.1rem 0 0 var(--ink); }
.card-cart button:focus-visible { border-radius: 999px; outline-offset: 4px; }
.card-cart.in button {
  color: var(--ink); background: white;
  border: 2px dashed var(--ink); box-shadow: none;
}
.card-cart.in button:hover { filter: none; background: color-mix(in srgb, var(--accent) 25%, white); }
.card-cart.in button:active { transform: none; }
.card-cart.in .plus { display: none; }
.card-in-cart {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0;
  font-weight: 900; font-size: 0.9rem; line-height: 1.2;
  padding: 0.3rem 0.6rem 0.3rem 0.45rem; border-radius: 0.3rem;
  background: color-mix(in srgb, var(--accent) 35%, white);
  border: 2px solid var(--ink);
}

/* What a book is, at a glance, in words and in shape: the printed book's
   badge is a square board in ink with an edge in its color; a PDF's is an
   outlined pill, dashed like a cut-out, with a download arrow. */
.badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  align-self: flex-start; margin-top: 0.5rem;
  font-weight: 800; font-size: 0.88rem; line-height: 1.25;
  padding: 0.25rem 0.65rem;
}
.badge .icon { flex: none; }
.badge.print {
  color: white; background: var(--ink);
  border: 2px solid var(--ink); border-radius: 0.3rem;
  box-shadow: 0.2rem 0.22rem 0 0 var(--accent);
}
/* A tiny board book: a white square with its thick edge. */
.badge.print .icon {
  width: 0.8em; height: 0.8em; border-radius: 0.15em;
  background: white; box-shadow: 0.12em 0.14em 0 0 var(--accent);
}
.badge.pdf {
  color: var(--ink); background: white;
  border: 2px dashed var(--muted); border-radius: 999px;
}
.badge.pdf .icon { font-weight: 900; }
.note { font-weight: 800; }

/* A book's page. */
.book {
  display: grid; gap: 2.5rem 3rem; align-items: start; margin-top: 2rem;
  grid-template-columns: minmax(12rem, 24rem) minmax(0, 1fr);
}
.book .about { max-width: 38rem; }
.book h1 { margin-top: 0; }
.by { color: var(--muted); font-weight: 700; }
.book .kind { margin: -0.25rem 0 0.75rem; }
.book .kind .badge { margin-top: 0; font-size: 1rem; }
h2.gets { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
ul.gets { margin: 0 0 1rem; padding-left: 1.25rem; }
ul.gets li { margin-bottom: 0.2rem; }
.format, .credits { font-size: 0.92rem; color: var(--muted); }
.credits { border-left: 0.3rem solid var(--accent); padding-left: 0.75rem; }
.license h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.license p { font-size: 0.92rem; }

.buy { margin-top: 1.5rem; }
/* Buy now and Add to cart, side by side, wrapping on a phone. */
.buying { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.5rem; }
.buying .buy { margin: 0; }
.cart-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.cart-add[hidden], .in-cart[hidden] { display: none; }
.cart-add .in-cart { margin: 0; font-weight: 700; }
.cart-add button, button.remove {
  font: inherit; font-weight: 800; line-height: 1.3; cursor: pointer;
  color: var(--ink); background: white;
  border: 2px solid var(--ink); border-radius: 999px;
}
.cart-add button { font-size: 1.05rem; padding: 0.7rem 1.4rem; box-shadow: 0 0.3rem 0 0 var(--accent), 0 0.3rem 0 2px var(--ink); }
.cart-add button:hover, button.remove:hover { background: color-mix(in srgb, var(--accent) 25%, white); }
.cart-add button:active { transform: translateY(0.2rem); box-shadow: 0 0.1rem 0 0 var(--accent), 0 0.1rem 0 2px var(--ink); }
.cart-add button:focus-visible, button.remove:focus-visible { border-radius: 999px; outline-offset: 4px; }
.buy button, #books button, p.buy a {
  display: inline-block;
  font: inherit; font-weight: 800; font-size: 1.15rem; line-height: 1.3;
  color: white; background: var(--deep); text-decoration: none;
  border: 0; border-radius: 999px; padding: 0.8rem 1.75rem; cursor: pointer;
  box-shadow: 0 0.3rem 0 0 var(--ink);
}
.buy button:hover, #books button:hover, p.buy a:hover { filter: brightness(1.1); }
.buy button:active, #books button:active, p.buy a:active { transform: translateY(0.2rem); box-shadow: 0 0.1rem 0 0 var(--ink); }
.buy button:focus-visible, #books button:focus-visible, p.buy a:focus-visible { border-radius: 999px; outline-offset: 4px; }
p.buy:not(:has(a)) { font-weight: 800; color: var(--muted); }

/* The wish list's link, last in the buying row: a plain link with a star,
   quieter than Buy, as tall as a tap. On a card, a small one under the
   sticker and the cart. */
p.wish { margin: 0; flex-basis: 100%; }
p.wish a, a.card-wish {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem;
  font-weight: 800;
}
p.wish .icon, a.card-wish .icon { flex: none; width: 1.2em; height: 1.2em; color: var(--deep); }
.catalog a.card-wish {
  align-self: flex-start; margin-top: 0.15rem; font-size: 0.92rem;
  text-decoration: underline; text-decoration-color: var(--deep); text-decoration-thickness: 0.1em; text-underline-offset: 0.18em;
}
.catalog a.card-wish:focus-visible { border-radius: 0.35rem; }
p.wish[hidden], .catalog a.card-wish[hidden] { display: none; }

/* With script, the link gives way to a button that puts the book in the
   cart, to be told of in print: a white pill like Add to cart, with the
   star; once in, the star fills and a note leads to the cart. On a card,
   it keeps the link's quiet look, and fills its star once wished for. */
.wish-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; flex-basis: 100%; }
.wish-toggle[hidden], .in-wish[hidden], .wish-toggle [hidden], .card-wish-toggle [hidden] { display: none; }
.wish-toggle .in-wish { margin: 0; font-weight: 700; }
.wish-toggle button {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem;
  font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.2; cursor: pointer;
  color: var(--ink); background: white; padding: 0.55rem 1.2rem 0.55rem 0.9rem;
  border: 2px solid var(--ink); border-radius: 999px;
}
.wish-toggle button:hover, .card-wish-toggle button:hover { background: color-mix(in srgb, var(--accent) 25%, white); }
.wish-toggle button:focus-visible, .card-wish-toggle button:focus-visible { border-radius: 999px; outline-offset: 4px; }
.wish-toggle .icon, .card-wish-toggle .icon { flex: none; width: 1.2em; height: 1.2em; color: var(--deep); }
.wish-toggle.in .icon path, .card-wish-toggle.in .icon path { fill: currentColor; }
.card-wish-toggle { align-self: flex-start; margin-top: 0.15rem; }
.card-wish-toggle[hidden] { display: none; }
.card-wish-toggle button {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.6rem 0 0.2rem;
  font: inherit; font-weight: 800; font-size: 0.92rem; line-height: 1.2; cursor: pointer;
  color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: 999px;
}
.card-wish-toggle.in button { border: 2px dashed var(--ink); background: white; }

/* The wish list's form: one card of paper, like the download page's. */
.wish-form {
  max-width: 38rem; margin: 1.5rem 0 2rem; padding: 1.5rem 1.75rem;
  border-radius: 1.25rem; background: white;
  border: 2px solid var(--line);
  box-shadow: 0.3rem 0.35rem 0 0 var(--accent), 0.3rem 0.35rem 0 2px var(--line);
}
.wish-form .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.25rem; }
.wish-form label { font-weight: 900; }
.wish-form input, .wish-form select {
  font: inherit; font-weight: 600; color: var(--ink); background: white;
  min-height: 2.75rem; padding: 0.5rem 0.85rem; max-width: 100%;
  border: 2px solid var(--ink); border-radius: 0.6rem;
}
.wish-form input:focus-visible, .wish-form select:focus-visible { border-radius: 0.6rem; outline-offset: 2px; }
.wish-form .agree :is(h2, h3) { font-size: 1.1rem; margin: 0.5rem 0 0.5rem; }
.wish-form .agree ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.wish-form .agree p { font-size: 0.95rem; color: var(--muted); }
.wish-form .buy { margin-top: 1.25rem; }
/* The honeypot: no reader sees it, a careless bot fills it. */
.wish-form .trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
#wish-removal[hidden], #wish-remove[hidden], #wish-no-token[hidden] { display: none; }
#wish-remove-link, .wish-remove-link { overflow-wrap: anywhere; }
/* The thank-you page for several books: each book, and its link. */
.wish-books { list-style: none; margin: 1.5rem 0; padding: 0; max-width: 42rem; }
.wish-books[hidden], .wish-books li[hidden] { display: none; }
.wish-books li { padding: 0.9rem 0; border-top: 2px solid var(--line); }
.wish-books .title { display: block; font-weight: 900; font-size: 1.1rem; }
.wish-privacy { max-width: 42rem; }

/* Sample spreads, open flat, with a soft fold down the middle. */
.spreads { margin-top: 3.5rem; }
.spreads h2 { margin-bottom: 1.5rem; }
.spread {
  position: relative; max-width: 56rem; margin: 0 0 2rem;
  border-radius: 1.25rem; overflow: hidden; background: white;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 0.75rem 1.5rem -0.6rem rgb(40 30 10 / 0.3);
}
.spread img { display: block; width: 100%; }
.spread::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 46%, rgb(0 0 0 / 0.07) 50%, transparent 54%);
}

/* The download page. */
#order {
  max-width: 38rem; margin: 1.5rem 0 2rem; padding: 1.5rem 1.75rem;
  border-radius: 1.25rem; background: white;
  border: 2px solid var(--line);
  box-shadow: 0.3rem 0.35rem 0 0 var(--yellow), 0.3rem 0.35rem 0 2px var(--line);
}
#message { font-weight: 800; font-size: 1.2rem; }
#detail { color: var(--muted); margin: 1rem 0 0; }
#detail:empty { display: none; }
#books { list-style: none; margin: 1.25rem 0 0.5rem; padding: 0; }
#books[hidden] { display: none; }
#books li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem;
  padding: 1rem 0; border-top: 2px solid var(--line);
}
#books .title { font-weight: 900; font-size: 1.15rem; }
#books .left { color: var(--muted); font-weight: 700; }
#books .error { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--deep); }
#books form { flex-basis: 100%; margin-top: 0.5rem; }
#books button { font-size: 1.05rem; padding: 0.65rem 1.4rem; }
#wished { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 2px solid var(--line); font-weight: 700; }
#wished[hidden] { display: none; }
#wished a { display: inline-block; margin-top: 0.4rem; font-weight: 600; }

/* The cart page. */
#cart[hidden], #cart-empty[hidden], #cart-checkout[hidden], .cart-unavailable[hidden],
#cart-buy[hidden], #cart-wish[hidden], #buy-empty[hidden], #wish-fold[hidden], .wish-consent[hidden] { display: none; }
/* Two sections, each with its own heading: to buy now, and to be told of. */
#cart-buy, #cart-wish { margin-top: 2rem; }
#cart-buy h2, #cart-wish h2 { margin: 0; }
#cart-buy h2:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.buy-empty { max-width: 38rem; margin: 1rem 0 0; font-weight: 700; color: var(--muted); }
.buy-empty:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.cart-items .when { font-weight: 700; color: var(--muted); }
.cart-items .any-cover {
  width: 4.5rem; aspect-ratio: 1; border-radius: 7%; background: var(--yellow);
  box-shadow: 0 0 0 2px var(--ink) inset;
}
/* The box that adds the books to be told of to the checkout: unticked
   until the reader ticks it, as large as a tap. */
.wish-consent { max-width: 42rem; margin: 1.25rem 0 0; }
.wish-consent label { display: flex; align-items: flex-start; gap: 0.7rem; font-weight: 700; cursor: pointer; }
.wish-consent input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; accent-color: var(--deep); }
#wish-fold { max-width: 38rem; margin-top: 1.25rem; }
#wish-fold summary {
  display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer;
  font-weight: 800; text-decoration: underline; text-decoration-color: var(--deep); text-underline-offset: 0.18em;
}
#wish-fold summary:focus-visible { border-radius: 0.35rem; }
#wish-fold .wish-form { margin-top: 0.75rem; }
.needs-script, .cart-unavailable, #cart-empty {
  max-width: 38rem; padding: 1.25rem 1.5rem; border-radius: 1.25rem;
  background: white; border: 2px solid var(--line); font-weight: 700;
}
#cart-empty:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.cart-items { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 42rem; }
.cart-items li {
  display: grid; align-items: center; gap: 0.25rem 1rem;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  padding: 0.9rem 0; border-top: 2px solid var(--line);
}
.cart-items li[hidden] { display: none; }
.cart-items img {
  width: 4.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 7%; background: white;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0.15rem 0.18rem 0 0 var(--accent);
}
.cart-items .title { font-weight: 900; font-size: 1.1rem; }
.cart-items .price { font-weight: 800; }
button.remove { font-size: 0.92rem; padding: 0.45rem 0.9rem; min-height: 2.75rem; }
.total {
  max-width: 42rem; margin: 0; padding: 1rem 0 0; border-top: 2px solid var(--line);
  display: flex; justify-content: space-between; font-weight: 900; font-size: 1.25rem;
}
.cart-note { color: var(--muted); max-width: 38rem; }

footer { margin-top: 4rem; padding-bottom: 2.5rem; color: var(--muted); font-size: 0.95rem; }
footer p { margin: 0; padding-top: 1.25rem; border-top: 2px solid var(--line); }
footer a { color: var(--muted); }

@media (max-width: 40rem) {
  .book { grid-template-columns: 1fr; gap: 2rem; }
  .book .cover { max-width: 20rem; }
  .catalog { gap: 2.25rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog .title { font-size: 1.05rem; }
  .catalog .summary { font-size: 0.92rem; }
  .catalog .badge { font-size: 0.78rem; gap: 0.35em; padding: 0.2rem 0.5rem; }
  .catalog .badge.pdf { border-radius: 0.8rem; }
  .spread { border-radius: 0.75rem; }
  .cart-items li { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .cart-items img { width: 3.5rem; grid-row: span 2; }
  .cart-items .price { grid-column: 3; grid-row: 1; }
  .cart-items .remove { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
  .cart-items .any-cover { width: 3.5rem; grid-row: span 2; }
}

@media (prefers-reduced-motion: no-preference) {
  .buy button, #books button, p.buy a, .cart-add button, .card-cart button { transition: transform 80ms ease-out, box-shadow 80ms ease-out, filter 120ms; }
}
/* The book opens, where there is a pointer that hovers: on hover or
   keyboard focus of its card, it tilts back a little as the cover swings
   open on the spine, its left edge, toward the reader, and pages 2 and 4
   open behind it on the same hinge, each less than the leaf above, so the
   outer part of each page shows, with the rest of the book under them. It
   closes the same way. Each leaf has a perspective of its own, from low on
   the spine (WebKit ignored one set on the fan), so it turns in depth and
   narrows as it opens; without preserve-3d the leaves paint in the order
   they are written, the cover on top. The pages show at once on opening
   and hide only once the book has closed. Without hover (touch) the card
   stays a plain link, and with reduced motion the pages stay hidden and
   nothing moves. Transforms and opacity only. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .catalog .fan, .catalog .fan img, .catalog .fan::before { transition: transform 400ms ease-out, opacity 0ms 400ms; }
  .catalog .fan img { transform-origin: 0 75%; }
  .catalog .leaf { display: block; opacity: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0.15rem 0.2rem 0.5rem -0.1rem rgb(40 30 10 / 0.35); }
  .catalog .fan::before {
    content: ""; position: absolute; inset: 0; border-radius: 7%; opacity: 0;
    background: color-mix(in srgb, var(--accent) 35%, white);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0.3rem 0.35rem 0 0 var(--accent);
  }
  .catalog li:hover .fan, .catalog li:has(:focus-visible) .fan {
    z-index: 1;
    transform: perspective(40rem) rotateX(10deg) rotateY(-8deg) translateY(-0.25rem);
  }
  .catalog li:hover :is(.fan, .fan img), .catalog li:has(:focus-visible) :is(.fan, .fan img) { transition: transform 400ms ease-out, opacity 0ms; }
  .catalog li:hover .fan::before, .catalog li:has(:focus-visible) .fan::before { transition: transform 400ms ease-out, opacity 0ms; opacity: 1; }
  .catalog li:hover .leaf, .catalog li:has(:focus-visible) .leaf { opacity: 1; }
  .catalog li:hover .cover, .catalog li:has(:focus-visible) .cover { transform: perspective(90rem) rotateY(-74deg); }
  .catalog li:hover .page-2, .catalog li:has(:focus-visible) .page-2 { transform: perspective(90rem) rotateY(-54deg); }
  .catalog li:hover .page-4, .catalog li:has(:focus-visible) .page-4 { transform: perspective(90rem) rotateY(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .buy button:active, #books button:active, p.buy a:active, .cart-add button:active, .card-cart button:active { transform: none; }
}

/* The Fonts section (DESIGN.md, The fonts section). */
.catalog.fonts img { display: block; width: 100%; height: auto; border-radius: 0.5rem; }
article.font .specimen { margin: 1.5rem 0; padding: 1.25rem; background: #f6efe1; color: #1d2a3a; border-radius: 0.5rem; }
.license.pending { padding: 0.5rem 0.75rem; border: 2px dashed #8a6d00; border-radius: 0.5rem; }