/* ======================================================================
   Our Stories: seventy titles, and a look inside the finished ones.

   Built 6 September 2026 after a librarian told Aaron that a library will
   not order a series it cannot see the shape of, and will not buy a picture
   book it cannot look inside. Two columns of thirty-five, a cover beside
   every title, and a panel of real pages behind the finished ones.
   ====================================================================== */

/* ---- the list of seventy -------------------------------------------- */
/* TWO COLUMNS OF THIRTY-FIVE, and the order runs DOWN the first column and
   then down the second, the way a printed list does. grid-auto-flow: column
   with a fixed thirty-five rows is what gives that; plain columns would run
   the numbers across the page instead, so book 2 would sit next to book 1. */
.booklist {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.15rem, .6vw, .45rem) clamp(1.4rem, 4vw, 3.4rem);
  counter-reset: none;
}
@media (min-width: 60rem) {
  .booklist {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(35, auto);
    grid-auto-flow: column;
  }
}

.bk {
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 84px) 1fr;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  align-items: center;
  padding: clamp(.4rem, 1vw, .6rem) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #2b2420) 8%, transparent);
}
.bk:last-child { border-bottom: 0; }

/* The cover is the button, with no box around it, the same rule Aaron set
   for the character pictures: the artwork itself is the thing you click. */
.bk-art {
  position: relative; display: block;
  padding: 0; border: 0; background: none;
  border-radius: 2px; overflow: hidden;
  line-height: 0;
}
.bk-art img {
  display: block; width: 100%; height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(43, 36, 32, .18);
}
button.bk-art { cursor: pointer; transition: transform .18s ease; }
button.bk-art:hover { transform: translateY(-2px); }
button.bk-art:hover img { box-shadow: 0 4px 10px rgba(43, 36, 32, .26); }
button.bk-art:focus-visible { outline: 2px solid var(--rose, #b8446b); outline-offset: 3px; }

/* "Look inside" only shows on hover, and never on a touch screen where
   there is no hover to speak of and it would just sit there covering the art. */
.bk-peek {
  position: absolute; left: 0; right: 0; bottom: 0;
  font: 600 .62rem/1.9 "Lora", Georgia, serif;
  letter-spacing: .04em; text-align: center;
  color: #fff; background: rgba(43, 36, 32, .74);
  opacity: 0; transition: opacity .18s ease;
}
button.bk-art:hover .bk-peek, button.bk-art:focus-visible .bk-peek { opacity: 1; }
@media (hover: none) { .bk-peek { display: none; } }

/* the books not yet painted: the gray shape, quiet, and not clickable */
.bk-art--soon img { box-shadow: none; opacity: .55; }

.bk-words { min-width: 0; }
.bk-no {
  margin: 0; font: 600 .62rem/1.4 "Lora", Georgia, serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #2b2420) 45%, transparent);
}
.bk-title {
  margin: .1rem 0 .25rem;
  font: 600 clamp(.92rem, 1.5vw, 1.02rem)/1.25 "Fredoka", system-ui, sans-serif;
  letter-spacing: -.01em;
}
.bk:not(.bk--ready) .bk-title {
  font-weight: 400;
  color: color-mix(in srgb, var(--ink, #2b2420) 66%, transparent);
}

/* the call to action, one of three states */
.bk-buy, .bk-soon, .bk-later {
  display: inline-block;
  font: 600 .7rem/1 "Lora", Georgia, serif;
  letter-spacing: .05em; text-transform: uppercase;
}
.bk-buy {
  padding: .42rem .85rem; border-radius: 999px;
  background: var(--rose, #b8446b); color: #fff; text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.bk-buy:hover { background: color-mix(in srgb, var(--rose, #b8446b) 84%, #000); transform: translateY(-1px); }
.bk-buy:focus-visible { outline: 2px solid var(--ink, #2b2420); outline-offset: 2px; }
.bk-soon {
  padding: .42rem .85rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rose, #b8446b) 45%, transparent);
  color: var(--rose, #b8446b);
}
.bk-later {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .74rem; font-style: italic;
  color: color-mix(in srgb, var(--ink, #2b2420) 42%, transparent);
}

/* ---- the look-inside panel ------------------------------------------ */
body.sheet-open { overflow: hidden; }

.sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(38, 31, 27, .62);
  display: grid; place-items: start center;
  padding: clamp(.6rem, 3vw, 2.4rem) clamp(.5rem, 3vw, 2rem);
  overflow: auto;
  animation: sheet-in .18s ease-out;
}
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }

.sheet-inner {
  position: relative;
  width: min(60rem, 100%);
  background: var(--paper, #faf6ef);
  border-radius: 10px;
  padding: clamp(1.2rem, 3.5vw, 2.4rem);
  box-shadow: 0 18px 50px rgba(30, 24, 20, .35);
}

.sheet-x {
  position: absolute; top: .5rem; right: .6rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  font-size: 1.7rem; line-height: 1;
  border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: color-mix(in srgb, var(--ink, #2b2420) 62%, transparent);
  transition: background .16s ease, color .16s ease;
}
.sheet-x:hover { background: color-mix(in srgb, var(--ink, #2b2420) 8%, transparent); color: var(--ink, #2b2420); }
.sheet-x:focus-visible { outline: 2px solid var(--rose, #b8446b); outline-offset: 1px; }

.sheet-head { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.8rem); }
@media (min-width: 44rem) { .sheet-head { grid-template-columns: 15rem 1fr; } }

.sheet-cover {
  display: block; width: 100%; height: auto;
  border-radius: 3px; box-shadow: 0 3px 12px rgba(43, 36, 32, .24);
}
.sheet-head h2 {
  margin: .15rem 0 .7rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.15;
  letter-spacing: -.015em;
}
.sheet-blurb { margin: 0 0 1.1rem; max-width: 34rem; }

.facts {
  margin: 0 0 1.2rem; padding: .8rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink, #2b2420) 10%, transparent);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .55rem 1.2rem;
}
.facts div { min-width: 0; }
.facts dt {
  font: 600 .6rem/1.4 "Lora", Georgia, serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #2b2420) 45%, transparent);
}
.facts dd { margin: 0; font-size: .92rem; }

.bk-buy--big, .bk-soon--big { font-size: .82rem; padding: .62rem 1.3rem; }
.pv-note {
  margin: .6rem 0 0; font-size: .84rem;
  color: color-mix(in srgb, var(--ink, #2b2420) 58%, transparent);
}

.pv-label {
  margin: clamp(1.4rem, 4vw, 2.2rem) 0 .8rem;
  font: 600 .64rem/1.4 "Lora", Georgia, serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, #2b2420) 45%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--ink, #2b2420) 10%, transparent);
  padding-top: 1rem;
}
.pv-grid {
  display: grid; gap: clamp(.6rem, 2vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem) { .pv-grid { grid-template-columns: repeat(4, 1fr); } }
.pv { margin: 0; }
.pv img {
  display: block; width: 100%; height: auto;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--ink, #2b2420) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  button.bk-art, button.bk-art:hover, .bk-buy, .bk-buy:hover { transition: none; transform: none; }
  .bk-peek { transition: none; }
}

/* ======================================================================
   ISLAND LOOK, 24 September 2026
   Brings this page into line with the rest of the site: rounded corners,
   the chunky flat drop shadow, and Fredoka on anything that is a title or
   a button. Appended rather than edited in place so the original rules
   above are still readable.
   ====================================================================== */
.bk-title, .sheet-head h2, .pv-label, .bk-no {
  font-family: Fredoka, system-ui, sans-serif;
}
.bk-title { font-weight: 600; }
.bk-no    { font-weight: 600; letter-spacing: .1em; }

button.bk-art img, .bk-art--soon img {
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0,0,0,.13);
  transition: transform .2s ease, box-shadow .2s ease;
}
button.bk-art:hover img {
  transform: translateY(-6px) rotate(-1.5deg);
  box-shadow: 0 10px 0 rgba(0,0,0,.15);
}

.bk-buy, .bk-buy--big {
  font-family: Fredoka, system-ui, sans-serif; font-weight: 600;
  background: var(--dress); color: #fff;
  border-radius: 44% 56% 52% 48% / 58% 42% 55% 45%;
  box-shadow: 0 5px 0 rgba(0,0,0,.14); border: 0;
  padding: .55rem 1.15rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bk-buy:hover, .bk-buy--big:hover {
  background: var(--dress); transform: translateY(-3px) rotate(-1.5deg);
  box-shadow: 0 8px 0 rgba(0,0,0,.16);
}
.bk-soon {
  font-family: Fredoka, system-ui, sans-serif; font-weight: 500;
  border-radius: 999px; border: 0; background: rgba(74,59,47,.10);
  color: var(--ink-soft); padding: .42rem .95rem;
}

/* the Look inside panel */
.sheet-inner { border-radius: 26px; background: var(--cream); }
.sheet-cover { border-radius: 16px; box-shadow: 0 8px 0 rgba(0,0,0,.13); }
.pv img      { border-radius: 12px; box-shadow: 0 5px 0 rgba(0,0,0,.10); border: 0; }
.sheet-x     { font-family: Fredoka, system-ui, sans-serif; }
.facts dt    { font-family: Fredoka, system-ui, sans-serif; font-weight: 600; }