/* ============================================================
   قِصَصُنَا المُصَوَّرَة: the shelf that leads into the readers.

   Everything structural comes from ../css/base.css (tokens, the
   eyebrow, .btn, the brush marks, the clouds, the edge rails) and
   ../css/cover.css (the card itself). This file is only what the
   shelf adds on top, so the page loads two small stylesheets
   instead of dragging the home page's whole sections.css behind
   it.
   ============================================================ */

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* the sky the shelf sits in: paper at the top, cooling into the footer */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 82% -10%, #ffe9a833 0%, transparent 60%),
    radial-gradient(90% 70% at 8% 8%, #45c4b929 0%, transparent 55%),
    var(--paper);
  pointer-events: none;
}

/* Clouds drift on their own here. The home page hands this to
   js/ambient.js; the only module this page loads is cover.js, so
   the drift is CSS. */
.sky .cloud {
  --cloud-color: #ffffff;
  opacity: 0.85;
  animation: drift var(--drift, 90s) linear infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx, 5rem), var(--dy, -1.5rem), 0); }
}

/* ------------------------------------------------------------------ nav --- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
}
.top__logo img { height: clamp(2.1rem, 3.4vw, 2.75rem); width: auto; }
.top__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}
.top__links a { text-decoration: none; color: var(--ink-70); transition: color 160ms ease; }
.top__links a:hover, .top__links a[aria-current] { color: var(--ink); }
.top__links a[aria-current] { font-weight: 700; }
@media (max-width: 640px) { .top__links { display: none; } }

/* ----------------------------------------------------------------- head --- */

.head {
  position: relative;
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(1.75rem, 4vh, 3rem);
  text-align: center;
}
.head h1 {
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}
.head .eyebrow { justify-content: center; }
.head .lead {
  max-width: 46ch;
  margin: 0.9rem auto 0;
  color: var(--ink-70);
}
.head__spark {
  display: inline-block;
  width: 0.62em;
  aspect-ratio: 1;
  margin-inline-start: 0.28em;
  vertical-align: 0.1em;
  --mark-color: var(--sun);
}

/* ---------------------------------------------------------------- shelf --- */

.shelf {
  flex: 1;
  padding-block-end: clamp(3rem, 8vh, 6rem);
}
.shelf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  max-width: 66rem;
  margin-inline: auto;
}

/* One story per card, on the same .cover the أعمالنا marquee uses
   (../css/cover.css, driven by ../js/cover.js): the lift, the tilt toward
   the pointer, the accent pooling underneath and the light sliding across
   the art. Nothing here re-does any of that. It only lets the card fill its
   cell instead of holding the marquee's fixed width, and hangs the title
   under it. The art is not boxed: each cover is cut with its frame and
   shadow already painted in, and the parts that break out of that frame are
   meant to. */
.shelf .cover {
  width: 100%;
  text-decoration: none;
}

.book__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.85rem;
}
.book__name {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
}
.book__pages {
  flex: none;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-45);
}
.book__line {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--ink-70);
  font-size: 0.94em;
  line-height: 1.6;
}

/* the cue sharpens as the card lifts, so the card says what it does */
.book__cta {
  display: inline-block;
  margin-block-start: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink-45);
  translate: calc(var(--h, 0) * 0.35rem) 0;
  transition: color 200ms ease;
}
.cover.is-hot .book__cta { color: var(--ink); }

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

.foot {
  position: relative;
  background: var(--void);
  color: #fffdf7;
  padding: clamp(2.75rem, 7vh, 4.5rem) 0 1.75rem;
  overflow: hidden;
}
.foot__clouds { position: absolute; inset-block-start: -2.5rem; inset-inline: 0; height: 9rem; pointer-events: none; }
.foot__clouds .cloud { --cloud-color: var(--void); opacity: 1; }

.foot__grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.75rem, 5vw, 4rem);
}
.foot__brand { max-width: 26rem; }
.foot__brand img { width: clamp(9rem, 16vw, 12rem); height: auto; }
.foot__brand p { color: #fffdf7b3; margin: 0.9rem 0 0; }
.foot h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.foot a { color: #fffdf7b3; text-decoration: none; transition: color 160ms ease; }
.foot a:hover { color: #fffdf7; }
.foot__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin-block-start: clamp(2rem, 5vh, 3rem);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid #fffdf71f;
  color: #fffdf78a;
  font-size: 0.88em;
}
.foot .btn { --btn-bg: var(--sun); --btn-fg: var(--ink); }
.foot .btn--ghost { --btn-bg: #fffdf7; --btn-fg: var(--void); }
.foot__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1.1rem; }

/* ------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .sky .cloud { animation: none; }
  .book__cta { translate: none; transition: none; }
}