/* Βιβλιαράκι: μεταφορά από το exploring_fox (assets/site.css) */
/* ── The book ───────────────────────────────────────────────────────────────

   Five leaves printed on both sides. The back of one leaf and the front of the
   next make a spread — that is how a book is bound, and it is why the four
   curated sets of four fall into the four openings with nothing rearranged.

   The pages are plain markup; the leaves are built by the script and only when
   there is room for two pages side by side. Below that the same ten pages are
   turned one at a time, and with no script at all they are a column of sixteen
   reviews, which is what this section was before any of it. */

.book { position: relative; }

.book__stage {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 62rem;
  aspect-ratio: 3 / 2;
  perspective: 2800px;
  perspective-origin: 50% 45%;
}

/* Shut, only the cover is bound: the board under the left half is not drawn
   and the whole stage is slid half a page to the left, so the closed book sits
   centred with nothing beside it.

   The geometry never changes — the leaves keep the same width and the same
   place on the sheet — because an earlier version narrowed the stage instead
   and the cover jumped 248px sideways the instant it was opened. Only the
   stage slides, and it slides over exactly as long as the cover takes to turn:
   the book opens outwards rather than snapping into a spread. */
.book__stage { transition: transform 780ms var(--ease-page); }
.book.is-shut .book__stage { transform: translateX(-25%); }
.book.is-shut .book__stage::before { left: 50%; }
.book.is-shut .book__stage::after { opacity: 0; }
.book__stage::after { transition: opacity 420ms var(--ease); }
@media (max-width: 60rem) {
  .book__stage { max-width: 24rem; aspect-ratio: 3 / 4; }
  .book.is-shut .book__stage { transform: none; }
}

/* The boards the pages are bound into: a shadow under the whole block and a
   darker seam down the middle where the two halves meet. */
.book__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  box-shadow: 0 18px 42px rgba(42, 29, 25, 0.22);
  border: 1px solid var(--rule);
}
.book__stage::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 30px;
  margin-left: -15px;
  pointer-events: none;
  z-index: 40;
  background: linear-gradient(to right,
    rgba(42, 29, 25, 0) 0%,
    rgba(42, 29, 25, 0.13) 42%,
    rgba(42, 29, 25, 0.20) 50%,
    rgba(42, 29, 25, 0.13) 58%,
    rgba(42, 29, 25, 0) 100%);
}
@media (max-width: 60rem) {
  .book__stage::after { left: 0; margin-left: 0; width: 16px;
    background: linear-gradient(to right, rgba(42,29,25,0.22), rgba(42,29,25,0)); }
}

/* A leaf occupies the right half and pivots on the spine at the centre. On a
   narrow screen there is only one half, so it fills the stage and pivots on
   the left edge instead. */
.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
@media (max-width: 60rem) {
  .leaf { left: 0; width: 100%; }
}
.leaf.is-easing { transition: transform 780ms var(--ease-page); }
.leaf.is-turned { transform: rotateY(-180deg); }

.leaf__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  background: var(--paper);
  /* Everything on a page is sized against the page, not against the book, so
     one page of a spread and one page of a phone set the same text at the same
     size relative to the paper it is printed on. */
  container-type: inline-size;
}
.leaf__face--back { transform: rotateY(180deg); }

/* The fold: paper bends darkest at the spine. Painted on the face rather than
   as a box-shadow so it travels with the sheet. */
.leaf__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease);
  background: linear-gradient(to right,
    rgba(42, 29, 25, 0.30), rgba(42, 29, 25, 0.06) 26%, rgba(42, 29, 25, 0) 58%);
}
.leaf.is-lifted .leaf__face::after { opacity: 1; }

.page { position: absolute; inset: 0; }
.page__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.8cqi, 1.3rem);
  padding: clamp(1.1rem, 3cqi, 2.1rem);
  padding-bottom: clamp(2.2rem, 5cqi, 3rem);
}

/* Two reviews to a page, sharing the height. They are printed on the page, so
   they lose the card border and the shadow they had when they were loose. */
.page .review {
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: clamp(0.6rem, 1.6cqi, 1rem) 0 0;
  transition: none;
}
.page .review:first-child { border-top: 0; }
.page .review blockquote { flex: 1; font-size: clamp(0.86rem, 1.32cqi, 1.02rem); }
.page .review figcaption { margin-top: 0.6rem; padding-top: 0.5rem; font-size: clamp(0.62rem, 0.95cqi, 0.76rem); }
.page .review--brief blockquote { font-size: clamp(1rem, 1.8cqi, 1.32rem); }

.page__folio {
  position: absolute;
  bottom: clamp(0.8rem, 2cqi, 1.2rem);
  left: clamp(1.1rem, 3cqi, 2.1rem);
  font-family: var(--log);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
/* Outer corners, as a book numbers them: even pages left, odd pages right. */
.leaf__face--front .page__folio { left: auto; right: clamp(1.1rem, 3cqi, 2.1rem); }

/* ── The covers ─────────────────────────────────────────────────────────── */
/* Alegreya's italic is a book face before it is anything else, and it is
   already loaded. A script font fetched from elsewhere would say the same
   thing with a stranger's hand and another request. */

.page--cover .page__inner {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.5rem, 1.6cqi, 1rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 253, 249, 0.55), rgba(255, 253, 249, 0) 60%),
    var(--paper-2);
}
.cover__log { margin: 0; }
.cover__title {
  margin: 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 7.2cqi, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cover__rule { width: min(74%, 20rem); height: auto; color: var(--fox); }
.cover__note {
  margin: 0;
  max-width: 26ch;
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(0.82rem, 1.5cqi, 1rem);
  color: var(--ink-soft);
}
.cover__open { margin-top: clamp(0.4rem, 1.4cqi, 1rem); }

/* ── Turning it ─────────────────────────────────────────────────────────── */
/* The corner is the whole affordance: it is lifted at rest so it reads as
   paper you could take hold of, it grows under the pointer, and it is a real
   button so the turn is never gesture-only. */

.corner {
  position: absolute;
  bottom: 0;
  width: clamp(52px, 12cqi, 84px);
  height: clamp(52px, 12cqi, 84px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 6;
  touch-action: none;
}
.corner--next { right: 0; }
.corner--prev { left: 0; }
.corner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.corner__paper { fill: var(--paper-2); transition: d 200ms var(--ease); }
.corner__edge { stroke: var(--rule); fill: none; }
.corner__curl { fill: rgba(42, 29, 25, 0.10); }

.corner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 62%;
  height: 62%;
  transition: width 200ms var(--ease), height 200ms var(--ease);
}
.corner:hover svg, .corner:focus-visible svg { transform: scale(1.16); transform-origin: 100% 100%; }
.corner--prev:hover svg, .corner--prev:focus-visible svg { transform-origin: 0 100%; }
.corner svg { transition: transform 220ms var(--ease); }
.corner:focus-visible { outline: 2px solid var(--fox); outline-offset: -4px; }

/* While a page is being dragged nothing should select under the finger. */
.book.is-dragging { user-select: none; }
.book.is-dragging .corner { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .leaf.is-easing { transition: none; }
  .leaf__face::after { display: none; }
  .corner svg, .corner::after { transition: none; }
}