/* ==========================================================================
   Atomic Shelf — Reading Nook: the diagram language
   --------------------------------------------------------------------------
   The board's section 04 specifies a line-drawn vocabulary, and every element
   here is taken from it rather than invented:

     "Arched covers   Real covers cropped into an arch, standing on a
                      Parchment panel. Never recoloured."
     "Line shelf      2px Espresso strokes with at most two flat fills.
                      Empty states, dividers, loading."
     "Quote card      Serif italic on Sea-glass or Parchment."
     "Video frame     9:16 with an arched top, Sea-glass keyline and a
                      mono caption. Cover stays the hero."

   And from the board's own Do/Don't: "Don't use shadows, gradients or emoji."
   So every shape below is a flat fill or a 2px stroke. No filter, no
   linearGradient, no drop-shadow, no glyph-as-emoji.

   The arch is the site's one recurring form: it is what makes a book cover
   read as a window, and the board's own illustration is three arches in a row
   (Parchment, Berry, Sea-glass) over a shelf. The rule constant below is the
   single definition of that arch, so a cover, a video frame, a quote card and
   a loading state all share one geometry.
   ========================================================================== */

:root {
  /* The arch: a rect whose top corners are a quarter-circle of radius 50%.
     Expressed once so every motif is the same silhouette at every size. */
  --nook-arch: 50% 50% 0 0 / 50% 50% 0 0;
  --nook-stroke: 2px;
  --nook-shelf-gap: 1.5rem;
}

/* ── Arched cover ─────────────────────────────────────────────────────────
   A real cover inside an arch. The cover is never recoloured or filtered: it
   sits in a frame whose top is arched, and the panel beneath is Parchment. */
.nook-cover {
  display: flex;
  flex-direction: column;
  background: var(--parchment);
  border-radius: var(--nook-arch);
  overflow: hidden;
  aspect-ratio: 3 / 4.6;
}
.nook-cover__art {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0 1.25rem 0;
  min-height: 0;
}
/* The art is the hero and is never recoloured, so no filter/background tricks:
   it is simply contained. */
.nook-cover__art > img,
.nook-cover__art > svg {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.nook-cover__plate {
  background: var(--parchment);
  padding: 0.9rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nook-cover__title {
  font-family: var(--face-display, Georgia, serif);
  font-size: var(--fs-h3);
  line-height: 1.12;
  color: var(--espresso);
}
.nook-cover__meta {
  font-family: var(--face-mono, ui-monospace, monospace);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea-deep);
}

/* An arch-shaped stand-in for a cover that has not arrived yet. Flat fills
   only, per the board. */
.nook-cover__arches {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding-bottom: 0.5rem;
}
.nook-cover__arches i {
  display: block;
  background: var(--berry);
  border-radius: var(--nook-arch);
}
.nook-cover__arches i:nth-child(1) { height: 62%; width: 26%; background: var(--berry); }
.nook-cover__arches i:nth-child(2) { height: 84%; width: 34%; background: var(--espresso); }
.nook-cover__arches i:nth-child(3) { height: 54%; width: 22%; background: var(--sea-glass); }

/* ── Line shelf ──────────────────────────────────────────────────────────
   "2px Espresso strokes with at most two flat fills. Empty states,
   dividers, loading." The board's own line-shelf illustration is three
   2px shelf rules with a handful of books, one leaning, and a circle. */
.nook-shelf {
  display: block;
  width: 100%;
  height: auto;
  color: var(--espresso);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--nook-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* At most two flat fills, per the board. */
.nook-shelf .fill-berry  { fill: var(--berry); }
.nook-shelf .fill-glass  { fill: var(--sea-glass); }
.nook-shelf .fill-parch  { fill: var(--parchment); }
.nook-shelf .fill-none   { fill: none; }

/* Empty state: a line shelf with a caption, on Parchment. */
.nook-empty {
  background: var(--parchment);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.nook-empty__art { width: min(15rem, 100%); }
.nook-empty__title {
  font-family: var(--face-display, Georgia, serif);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--espresso);
}
.nook-empty__body {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--cocoa);
  max-width: 34ch;
}

/* Loading: the shelf rules draw themselves, and nothing pulses or shimmers. */
.nook-loading__rule {
  stroke: var(--espresso);
  stroke-width: var(--nook-stroke);
  fill: none;
  stroke-linecap: round;
  transform-origin: left center;
  animation: nook-draw 1.6s ease-in-out infinite;
}
.nook-loading__rule:nth-child(2) { animation-delay: .2s; }
.nook-loading__rule:nth-child(3) { animation-delay: .4s; }
@keyframes nook-draw {
  0%, 100% { transform: scaleX(.35); opacity: .45; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* ── Quote card ──────────────────────────────────────────────────────────
   "Serif italic on Sea-glass or Parchment." Serif italic, one italic span,
   a mono attribution, flat ground. */
.nook-quote {
  background: var(--sea-glass);
  border-radius: 1.5rem;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nook-quote--parchment { background: var(--parchment); }
.nook-quote__text {
  font-family: var(--face-display, Georgia, serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--espresso);
  margin: 0;
}
.nook-quote__by {
  font-family: var(--face-mono, ui-monospace, monospace);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
}
/* The board: "Italicise one word per headline." A quote is the one place the
   whole line is italic, which is what the board shows. */
.nook-quote__text em { font-style: normal; color: var(--berry); }

/* ── Video frame ─────────────────────────────────────────────────────────
   "9:16 with an arched top, Sea-glass keyline and a mono caption. Cover
   stays the hero." The cover is rendered inside; nothing overlays it. */
.nook-video {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 19rem;
}
.nook-video__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  /* Arched top only: the board's video frame is a 9:16 with a rounded head. */
  border-radius: 50% 50% 0.75rem 0.75rem / 22% 22% 0.75rem 0.75rem;
  border: 2px solid var(--sea-glass);
  background: var(--espresso);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
}
.nook-video__frame > img,
.nook-video__frame > svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder line, mono, per the board's own video-frame tile. */
.nook-video__hook {
  font-family: var(--face-mono, ui-monospace, monospace);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sea-glass);
}
.nook-video__cap {
  font-family: var(--face-mono, ui-monospace, monospace);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cocoa);
}

/* ── Arches, as a section device ──────────────────────────────────────────
   The board's hero illustration: three arches in a row over a shelf, with a
   sun disc. Flat fills, 2px strokes, no shadow. */
.nook-arches {
  display: block;
  width: 100%;
  height: auto;
}
.nook-arches__rule { stroke: var(--espresso); stroke-width: var(--nook-stroke); fill: none; }
.nook-arches__disc { fill: var(--oat); }

/* ── Hairline divider in the board's language ────────────────────────────
   "Section rhythm: separated by space and a hairline, not by a colour band." */
.nook-rule {
  border: 0;
  height: var(--nook-stroke);
  background: var(--espresso);
  opacity: .16;
  margin-block: var(--gap, 3rem);
}
.nook-rule--dark { background: var(--oat); opacity: .28; }

/* ── Motion ──────────────────────────────────────────────────────────────
   Only the shelf-draw, and only for loading. Nothing else animates. */
@media (prefers-reduced-motion: reduce) {
  .nook-loading__rule { animation: none; transform: scaleX(1); opacity: 1; }
}