/* Hero — Book component (homepage only) — design.md: Hero — Book component.

   Geometry comes from the Figma home frame (408:49783), where the book is a 1259x745 image at
   x=91, y=133 on the 1440 canvas. Every internal measurement is written in book units — --u is
   1/1259 of the book's width — so the whole object scales as one piece and the numbers below
   read directly as Figma pixels. Like the spiral binding and diagrams, these are object geometry,
   not spacing-scale values; everything around the book (its padding, the page) uses tokens.

   Stacking, back to front: shadow, leather cover, rim stitching, spine headbands, the paper stacks
   (the sheets under each page), the two top pages (paper, shading, dot grid), and the gutter crease. */

/* The book uses --nav-width (tokens.css) directly — the same literal value the nav bar uses on
   every page — rather than its own token. They used to be separate: --book-width also shrank with
   viewport *height* so the whole book stayed visible on one screen without scrolling. That is
   gone now. It put the book and the nav on two different formulas that happened to agree only
   when the height term didn't bind, so on any window short enough to trigger it, the book shrank
   below 1259px while the nav stayed at 1259px — the nav then visibly overhung the book on both
   edges. Sharing one token removes the possibility of that: book and nav are now the same number,
   always, on every page. The trade-off is real: on a short browser window the book can now run
   below the fold, where it used to shrink to fit. That was a deliberate earlier request (the book
   "should fit the screen above the break point"); this reverses it in favour of the nav/book
   alignment and the flat 1259px nav width across pages, which were asked for more recently and
   more than once. */
.hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.book {
  position: relative;
  width: var(--nav-width);
  margin: -20px auto 0;
  aspect-ratio: 1259 / 745;
  /* Children size themselves in container units of the book, via --u. */
  container-type: inline-size;
}

.book > * {
  --u: calc(100cqw / 1259);
  position: absolute;
}

/* The filters live in a zero-size SVG; keep it out of layout entirely. */
.book__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Cover ------------------------------------------------------------------------------------ */

/* Shadow and cover share one shape. The shadow is its own element because a CSS filter on the
   cover would texture its box-shadow too. */
.book__shadow,
.book__cover {
  left: 0;
  top: calc(4 * var(--u));
  width: calc(1259 * var(--u));
  height: calc(738 * var(--u));
  border-radius: calc(28 * var(--u));
}

.book__shadow {
  box-shadow: var(--shadow-book);
}

/* Lit from the top left. The top and left rims read ~#3d2617 in Figma, the bottom and right rims
   fall to ~#2a1609, so two gradients darken those edges.

   The inset shadows round the rim off. Figma's left rim runs near-black at the very edge, a rolled
   highlight two pixels in (grey 87), then darker leather (~33) toward the pages: a dark lip, a warm
   highlight just inside the top and left edges, and shade gathering toward the bottom right.
   The leather filter textures all of it. */
.book__cover {
  background:
    linear-gradient(to bottom, transparent 0 94%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) calc(12 * var(--u)), transparent calc(30 * var(--u))),
    var(--color-book-cover);
  box-shadow:
    inset 0 0 0 calc(0.7 * var(--u)) rgba(8, 4, 2, 0.9),
    inset calc(1.8 * var(--u)) calc(1.8 * var(--u)) calc(1.4 * var(--u)) calc(-0.5 * var(--u)) rgba(255, 214, 170, 0.2),
    inset calc(-2 * var(--u)) calc(-2.5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
  filter: url(#book-leather-grain);
}

/* Rim stitching. The SVG shares the book's pixel space (viewBox 0 0 1259 745), so the dash pattern
   and positions are Figma pixels: 11.7 in from the left edge, 8.2 down from the top. A dark offset
   copy under the thread sinks it into the leather. */
.book__stitches {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* An uneven dash rhythm reads as hand-sewn, worn thread rather than a ruled line. */
.book__stitch,
.book__stitch-shadow {
  fill: none;
  stroke-width: 1.2;
  stroke-dasharray: 6 3 4 5 7 4 3 5;
  stroke-linecap: round;
}

.book__stitch {
  stroke: url(#book-stitch-fade);
}

.book__stitch-shadow {
  stroke: rgba(8, 4, 2, 0.55);
}

.book__stitch-stop {
  stop-color: var(--color-book-stitch);
}

/* The spine's headbands: the cover swells ~3px above its top edge and below its bottom edge across
   the spine, centred on the gutter. Elliptical corners give the swell Figma's gradual shoulders
   (top edge 136 -> 135 -> 134 -> 133 over ~18px) instead of a squared tab. */
/* Padded rather than flat: a soft highlight across the crown of the swell, and a dark lip only along
   its curved outer edge, so it merges into the cover rim at its sides instead of reading as a tab. */
.book__headband {
  height: calc(16 * var(--u));
  background:
    radial-gradient(ellipse 60% 70% at 50% 35%, rgba(255, 214, 170, 0.14), transparent 70%),
    var(--color-book-cover);
  filter: url(#book-leather-grain);
}

.book__headband--top {
  box-shadow: inset 0 calc(0.7 * var(--u)) 0 rgba(8, 4, 2, 0.9);
}

.book__headband--bottom {
  box-shadow: inset 0 calc(-0.7 * var(--u)) 0 rgba(8, 4, 2, 0.9);
}

.book__headband--top {
  left: calc(591 * var(--u));
  top: calc(1 * var(--u));
  width: calc(72 * var(--u));
  border-radius: 50% 50% 0 0 / calc(7 * var(--u)) calc(7 * var(--u)) 0 0;
}

.book__headband--bottom {
  left: calc(595 * var(--u));
  bottom: calc(1 * var(--u));
  width: calc(64 * var(--u));
  border-radius: 0 0 50% 50% / 0 0 calc(7 * var(--u)) calc(7 * var(--u));
  background: color-mix(in srgb, var(--color-book-cover) 62%, #000);
}

/* Paper stacks ----------------------------------------------------------------------------- */

/* The sheets under each open page. Each .book__leaf is a full sheet the height of the page, pushed
   out past the page's outer edge by its depth --i, with its corners opening up as it goes, so the
   stack shows as nested rounded slivers down the side and around both corners — none above or
   below the page, as in Figma.

   Left: 6 sheets every 2.3px (Figma's edge highlights at 16.7-28, grey ~220, gaps ~190), lit.
   Right: 4 sheets every 2.6px (1235-1243, grey ~170, gaps ~135), in shade.

   The stack's drop shadow is the near-black seam where the paper meets the cover, plus a soft
   shadow the paper throws onto the leather. */
.book__stack {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.book__stack--left {
  filter:
    drop-shadow(calc(-0.8 * var(--u)) calc(0.5 * var(--u)) calc(0.4 * var(--u)) rgba(8, 4, 2, 0.85))
    drop-shadow(calc(-1.5 * var(--u)) calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.3));
}

.book__stack--right {
  filter:
    drop-shadow(calc(0.8 * var(--u)) calc(0.5 * var(--u)) calc(0.4 * var(--u)) rgba(8, 4, 2, 0.85))
    drop-shadow(calc(1.5 * var(--u)) calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.3));
}

.book__leaf {
  position: absolute;
  top: calc(15 * var(--u));
  height: calc(713 * var(--u));
}

/* Pages and the sheets under them pinch toward the spine: their top edges dip and their bottom edges
   rise over the last ~70px before the gutter (clip paths in index.html, in bounding-box units so they
   scale with the book). The dark leather and headband show through the dip, as in Figma. */
.book__page--left,
.book__stack--left .book__leaf {
  clip-path: url(#book-page-curve-left);
}

.book__page--right,
.book__stack--right .book__leaf {
  clip-path: url(#book-page-curve-right);
}

/* Each sheet's edge darkens where it tucks under the next one, which is what separates the slivers. */
.book__stack--left .book__leaf {
  left: calc((30 - 2.3 * var(--i)) * var(--u));
  width: calc((598 + 2.3 * var(--i)) * var(--u));
  border-radius: calc((22 + 0.7 * var(--i)) * var(--u)) 0 0 calc((24 + 0.7 * var(--i)) * var(--u));
  background: var(--color-book-page-edge);
  box-shadow: inset calc(0.9 * var(--u)) 0 calc(0.8 * var(--u)) calc(-0.1 * var(--u)) color-mix(in srgb, var(--color-book-shade) 45%, transparent);
}

.book__stack--right .book__leaf {
  left: calc(632 * var(--u));
  width: calc((601 + 2.6 * var(--i)) * var(--u));
  border-radius: 0 calc((22 + 0.7 * var(--i)) * var(--u)) calc((24 + 0.7 * var(--i)) * var(--u)) 0;
  background: color-mix(in srgb, var(--color-book-page-edge-shade) 80%, var(--color-book-page-edge));
  box-shadow: inset calc(-0.9 * var(--u)) 0 calc(0.8 * var(--u)) calc(-0.1 * var(--u)) color-mix(in srgb, var(--color-book-shade) 70%, transparent);
}

/* Pages ------------------------------------------------------------------------------------ */

/* The top sheets. Outer corners are rounded to Figma's ~22px (top) and ~24px (bottom), and each
   page casts a slight shadow onto the sheet beneath it. */
.book__page {
  top: calc(15 * var(--u));
  height: calc(713 * var(--u));
  overflow: hidden;
}

.book__page--left {
  left: calc(30 * var(--u));
  width: calc(598 * var(--u));
  border-radius: calc(22 * var(--u)) 0 0 calc(24 * var(--u));
  box-shadow: calc(-0.6 * var(--u)) 0 calc(1.2 * var(--u)) color-mix(in srgb, var(--color-book-shade) 40%, transparent);
}

.book__page--right {
  left: calc(632 * var(--u));
  width: calc(601 * var(--u));
  border-radius: 0 calc(22 * var(--u)) calc(24 * var(--u)) 0;
  box-shadow: calc(0.6 * var(--u)) 0 calc(1.2 * var(--u)) color-mix(in srgb, var(--color-book-shade) 40%, transparent);
}

.book__paper,
.book__shade,
.book__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.book__paper {
  background: var(--color-book-page);
  filter: url(#book-paper-grain);
}

.book__shade {
  border-radius: inherit;
}

/* Left page darkens into the gutter. Stops are fitted to Figma's column profile: the page falls
   from #eee6d9 to #ac997e over its last ~24px, with a long faint falloff before that.
   The inset highlights are the bright cut edge of the top sheet (grey ~240 in Figma) along its
   outer side, top and bottom. */
.book__page--left .book__shade {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--color-book-shade) 46%, transparent) 0,
    color-mix(in srgb, var(--color-book-shade) 35%, transparent) calc(2 * var(--u)),
    color-mix(in srgb, var(--color-book-shade) 24%, transparent) calc(6 * var(--u)),
    color-mix(in srgb, var(--color-book-shade) 17%, transparent) calc(10 * var(--u)),
    color-mix(in srgb, var(--color-book-shade) 14%, transparent) calc(18 * var(--u)),
    color-mix(in srgb, var(--color-book-shade) 10%, transparent) calc(38 * var(--u)),
    color-mix(in srgb, var(--color-book-shade) 4%, transparent) calc(100 * var(--u)),
    transparent calc(200 * var(--u)));
  box-shadow:
    inset calc(1 * var(--u)) 0 0 rgba(255, 255, 255, 0.45),
    inset 0 calc(0.8 * var(--u)) 0 rgba(255, 255, 255, 0.4),
    inset 0 calc(-0.8 * var(--u)) 0 rgba(255, 255, 255, 0.4);
}

/* Right page catches the light: a narrow shadow against the crease, a brighter band beside it
   (Figma reads #f2eadd there against #ece4d6 mid-page), and a slight falloff at the outer edge. */
.book__page--right .book__shade {
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--color-book-shade) 12%, transparent) 0,
      transparent calc(3 * var(--u))),
    linear-gradient(to right,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.24) calc(6 * var(--u)),
      rgba(255, 255, 255, 0) calc(220 * var(--u))),
    linear-gradient(to left,
      color-mix(in srgb, var(--color-book-shade) 5%, transparent) 0,
      transparent calc(150 * var(--u)));
  box-shadow:
    inset calc(-1 * var(--u)) 0 0 rgba(255, 255, 255, 0.4),
    inset 0 calc(0.8 * var(--u)) 0 rgba(255, 255, 255, 0.4),
    inset 0 calc(-0.8 * var(--u)) 0 rgba(255, 255, 255, 0.4);
}

/* Dot grid: real <circle> elements generated by js/hero.js from the data-* attributes on each SVG
   (origin, pitch, rows, columns, in the page's own pixel space). */
.book__dot {
  fill: var(--color-book-dot);
}

/* Page content ------------------------------------------------------------------------------ */

/* The left page's introduction, above the dot grid. Positions and type sizes are Figma's, in book
   units, so the text scales with the book exactly as the page does: the frame (669:58093) sits at
   book (83, 110), 470 wide. It is a child of .book rather than of the page, so it can sit above the
   drawing canvas. Warm ink rather than --color-text-primary, so the text reads as printed on
   the paper. */
.book__intro {
  position: absolute;
  color: var(--color-book-ink);
  line-height: var(--leading-normal);
  left: calc(83 * var(--u));
  top: calc(110 * var(--u));
  width: calc(470 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
}

.book__hello {
  font-family: var(--font-sans);
  font-size: calc(16 * var(--u));
  font-weight: 300;
}

.book__headline {
  font-family: var(--font-sans);
  font-size: calc(24 * var(--u));
  font-weight: 500;
  margin: 0;
}

.book__role {
  font-family: var(--font-sans);
  font-size: calc(16 * var(--u));
  font-weight: 600;
}

.book__summary {
  font-family: var(--font-sans);
  font-size: calc(16 * var(--u));
  font-weight: 400;
  width: calc(450 * var(--u));
}

/* The illustrated portrait sitting at the foot of the left page, below the introduction — a paper-cut
   figure resting her arms on the page edge. Figma node 669:58098, book (318, 439), 266x296. Decorative
   and non-interactive, like the intro text it shares a stacking band with. */
.book__portrait {
  position: absolute;
  left: calc(318 * var(--u));
  top: calc(439 * var(--u));
  width: calc(266 * var(--u));
  height: calc(296 * var(--u));
  object-fit: contain;
  pointer-events: none;
}

/* Diary layers --------------------------------------------------------------------------------- */

/* Three bands inside the book, so pen marks land on the paper but never on top of anything readable:
     0  the book itself — cover, stitching, spine, page stacks, paper, shading, dot grid
     1  the drawing canvas
     2  everything to read or click — the intro text, the note, the scattered icons
   The canvas takes the cover's exact rounded box, so marks stop at the diary's silhouette. */
.book__sketch {
  position: absolute;
  left: 0;
  top: calc(4 * var(--u));
  width: calc(1259 * var(--u));
  height: calc(738 * var(--u));
  border-radius: calc(28 * var(--u));
  z-index: 1;
}

.book__intro,
.book__portrait,
.diary-icons {
  z-index: 2;
}

/* The text and portrait are not interactive, so pen strokes pass under them rather than stopping
   there. */
.book__intro,
.book__portrait {
  pointer-events: none;
}

/* In pen mode the whole diary takes the pencil cursor — including over the text, which ignores the
   pointer. The icons keep their own cursor, so they still read as clickable. */
.book.is-drawing {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1.2-4.6L16.6 4a1.9 1.9 0 0 1 2.7 0l.7.7a1.9 1.9 0 0 1 0 2.7L7.6 19.8z' fill='%23ffffff' stroke='%234373d3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M14.8 5.8l3.4 3.4' stroke='%234373d3' stroke-width='1.6'/%3E%3Ccircle cx='3' cy='21' r='1.7' fill='%234373d3'/%3E%3C/svg%3E") 3 21, crosshair;
}


/* Drawing tools, top-right of the right page, above the canvas: a pencil that toggles draw mode and
   an eraser that clears the page and ends draw mode. Always visible. The toolbar sits inside the
   page's rounded corner in book units, but the buttons stay a fixed 32px (the nav's icon-button size)
   so they remain easy to hit when the book scales down. A light surface with the site's border and
   card shadow lifts them off the paper so they read as controls, not print. */

/* Gutter --------------------------------------------------------------------------------------- */

/* The crease between the pages: Figma's darkest column (718) into the two lighter ones beside it.
   It starts and ends where the curved page edges meet the spine (y≈20 and ≈725), not at the pages'
   straight top and bottom. */
.book__crease {
  left: calc(627 * var(--u));
  top: calc(20 * var(--u));
  width: calc(5 * var(--u));
  height: calc(705 * var(--u));
  border-radius: calc(2.5 * var(--u));
  background: linear-gradient(to right, var(--color-book-crease) 0, #d0c2ab 40%, #d6c8b1 80%, #e2d6c3 100%);
}

/* Binding stitches down the gutter. The SVG shares the book's pixel space (viewBox 0 0 1259 745). */
.book__binding {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The thread running the full length of the fold — Figma's most visible binding detail: a pale strand
   (grey ~200-230) with a darker edge either side where it sinks into the crease. A wider shaded line
   under a narrower thread line draws both. */
.book__thread-shadow {
  stroke: color-mix(in srgb, var(--color-book-shade) 45%, transparent);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.book__thread {
  stroke: var(--color-book-thread);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Where the thread surfaces: a small, softly outlined raised knot on the strand. */
.book__knot {
  fill: var(--color-book-thread);
  stroke: color-mix(in srgb, var(--color-book-shade) 35%, transparent);
  stroke-width: 0.6;
}

/* The sewing holes either side of each knot — shallow pits, not punched-through dots. */
.book__hole {
  fill: color-mix(in srgb, var(--color-book-shade) 55%, transparent);
}

/* Scattered diary icons — design.md: Diary icons. Every position and size is in book units taken
   from the Figma frame (415:50804), so the icons travel and scale with the diary. */
/* The layer spans the whole diary, so it must let the pointer through to the canvas beneath it —
   otherwise it swallows every stroke. Only the icons themselves take pointer events. */
.diary-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.diary-icon {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  /* The art is hand-drawn with its own soft edges; a transform is all the hover needs. */
  transition: transform 200ms ease-out;
}

.diary-icon:hover,
.diary-icon:focus-visible {
  transform: scale(1.06);
}

.diary-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.diary-icon__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The icon's name for screen readers; the handwritten label beside it is decorative. */
.diary-icon__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Labels sit where Figma places them, overlapping the art, in its handwriting font. */
.diary-label {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  font-family: var(--font-hand);
  /* Figma's 15px, in book units so the labels scale with the diary like everything else on it. */
  font-size: calc(15 * var(--u));
  line-height: var(--leading-normal);
  color: var(--color-book-ink);
  white-space: nowrap;
  pointer-events: none;
}

/* The theme icon carries both badges: sunglasses in light, the sunflower in dark. */
.diary-icon--theme .diary-icon__art--alt {
  display: none;
}

[data-theme="dark"] .diary-icon--theme .diary-icon__art {
  display: none;
}

[data-theme="dark"] .diary-icon--theme .diary-icon__art--alt {
  display: block;
}

/* The sunflower is a taller, narrower drawing than the sunglasses, so it keeps its own box —
   bottom-aligned with the sunglasses' own box. */
[data-theme="dark"] .diary-icon--theme {
  --w: 64;
  --h: 72;
  --y: 573;
}

.diary-audio {
  display: none;
}

/* Scroll cue ---------------------------------------------------------------------------------- */

/* A small eyebrow just under the book, left-aligned to it (same --nav-width column, centred the
   same way), so it reads as the last thing on screen before the fold and points at the work
   library below. Figma node 496:75113: DM Mono Medium 16, 8px from its arrow, 14px under the
   book — --space-md is the closest token to that. */
.hero__cue {
  width: var(--nav-width);
  margin: var(--space-md) auto 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.hero__cue-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}