/* corners/books — books & writing (canonical; promoted from draft B, refined).
   Root position, size, mask and z-index come from tokens.css; nothing here touches them.
   Every selector is scoped under .corner--books.
   Stroke widths are in the art's user units, multiplied by --bk-k so lines land at
   1-1.5 px (outlines) and ~.85 px (writing) on screen in every framing. */

.corner--books { --bk-k: 1; }

.corner--books .bk-art {
  position: absolute;
  right: 2.5vw;
  bottom: 3vh;
  /* 43vw / 69vh, but never under the card (360 px wide, centred, <= 376 px tall) in narrow or
     short windows (800x600, 700x600, phone landscape). The book's left edge sits at
     .975vw - .6415 W and its top at .97h - .5074 W. It is clear of the card if EITHER the left
     edge is >= 20 px right of the card (room for the black pencil's end) or the top is >= 12 px
     below it, hence max(). From 1024 px wide up, and on tall tablets, this changes nothing. */
  width: min(43vw, 69vh, max(calc((47.5vw - 200px) * 1.559), calc((47vh - 200px) * 1.971)));
  height: auto;
  display: block;
  overflow: hidden;
}
/* the live line's overlay: same box (it shares .bk-art), its own composited layer, so writing
   never repaints the fibre-filtered pages underneath (refiner, 2026-10-28) */
.corner--books .bk-art--live { will-change: transform; }
/* narrow desktops and tablets draw the art at ~270-440 px, so the strokes are scaled up a step */
@media (min-width: 641px) and (max-width: 1000px) {
  .corner--books { --bk-k: 1.4; }
}

/* ---- palimpsest: old writing scraped from the parchment, the deepest layer ---- */
.corner--books .bk-palimpsest {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.corner--books .bk-palimp {
  fill: none;
  stroke: var(--sepia-soft);
  stroke-width: 1;
  stroke-opacity: .07;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- light & depth (lit from the mind's opening; nothing here moves) ---- */
/* SVG stop attributes cannot read var(); CSS can. (The masks keep their #fff carriers.) */
.corner--books #bkB-pool stop,
.corner--books #bkB-warm stop { stop-color: var(--mind-bright); }
.corner--books .bk-warm { opacity: .88; }
.corner--books .bk-castshadow { fill: var(--sepia); opacity: .16; }
.corner--books .bk-castshadow--sheet { opacity: .1; }

/* ---- paper ---- */
.corner--books .bk-sheet { fill: var(--parch-light); }
.corner--books .bk-page { fill: var(--parch-light); }
.corner--books .bk-fibre { fill: var(--ink); opacity: .06; }
.corner--books .bk-leaf {
  fill: var(--parch);
  stroke: var(--sepia-soft);
  stroke-width: calc(.7px * var(--bk-k));
  stroke-opacity: .55;
}
.corner--books .bk-cover {
  fill: var(--sepia);
  stroke: var(--ink);
  stroke-width: calc(1.2px * var(--bk-k));
  stroke-opacity: .7;
}
.corner--books .bk-ribbon { fill: var(--dusk); opacity: .78; }

/* ---- line art: the shared woodcut hand ---- */
.corner--books .bk-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: calc(1.5px * var(--bk-k));
  stroke-opacity: .78;
  stroke-linejoin: round;
}
.corner--books .bk-line--gutter { stroke-width: calc(1.2px * var(--bk-k)); stroke-opacity: .6; }
.corner--books .bk-line--sheet { stroke: var(--sepia); stroke-width: calc(1px * var(--bk-k)); stroke-opacity: .55; }
.corner--books .bk-hatch {
  fill: none;
  stroke: var(--sepia);
  stroke-width: calc(.8px * var(--bk-k));
  stroke-opacity: .42;
  stroke-linecap: round;
}
.corner--books .bk-hatch--light { stroke-opacity: .26; }
.corner--books .bk-hatch--curl { stroke-opacity: .3; stroke-width: calc(.7px * var(--bk-k)); }
.corner--books .bk-ground {
  fill: none;
  stroke: var(--sepia-soft);
  stroke-width: calc(.8px * var(--bk-k));
  stroke-opacity: .32;
  stroke-linecap: round;
}

/* ---- writing ----
   Writing stops thickening past k 2.6 (phones under ~600 px tall): the letters are small there,
   and full-k strokes turned the hand into a smear. Outlines keep the full k. */
.corner--books .bk-write {
  fill: none;
  stroke: var(--sepia);
  stroke-width: calc(.9px * min(var(--bk-k), 2.6));
  stroke-opacity: .64;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corner--books .bk-write--graphite {
  stroke: var(--graphite-soft);
  stroke-width: calc(.85px * min(var(--bk-k), 2.6));
  stroke-opacity: .62;
}
/* The live line. Fully written by default (reduced motion, no JS); books.js sets the dash
   per word only once it has decided to animate. */
.corner--books .bk-write--live { stroke: var(--graphite); stroke-opacity: .68; }

/* ---- pencils ---- */
.corner--books .bk-pencil-shadow {
  fill: none;
  stroke: var(--sepia-soft);
  stroke-width: calc(1.2px * var(--bk-k));
  stroke-opacity: .35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corner--books .bk-pencil--cedar .bk-pf--light { fill: color-mix(in srgb, var(--cedar) 60%, var(--parch-light)); }
.corner--books .bk-pencil--cedar .bk-pf--mid   { fill: var(--cedar); }
.corner--books .bk-pencil--cedar .bk-pf--dark  { fill: color-mix(in srgb, var(--cedar) 75%, var(--sepia)); }
.corner--books .bk-pencil--ink .bk-pf--light   { fill: color-mix(in srgb, var(--graphite) 70%, var(--graphite-soft)); }
.corner--books .bk-pencil--ink .bk-pf--mid     { fill: var(--graphite); }
.corner--books .bk-pencil--ink .bk-pf--dark    { fill: var(--ink); }
.corner--books .bk-pedge { fill: none; stroke: var(--ink); stroke-width: calc(.4px * var(--bk-k)); stroke-opacity: .35; }
.corner--books .bk-phatch { fill: none; stroke: var(--ink); stroke-width: calc(.5px * var(--bk-k)); stroke-opacity: .3; }
.corner--books .bk-pencil--ink .bk-phatch { stroke: var(--graphite-soft); stroke-opacity: .35; }
.corner--books .bk-cone { fill: color-mix(in srgb, var(--cedar) 25%, var(--parch-light)); }
.corner--books .bk-grain { fill: none; stroke: var(--sepia-soft); stroke-width: calc(.45px * var(--bk-k)); stroke-opacity: .6; }
.corner--books .bk-lead { fill: var(--graphite); }
.corner--books .bk-pline {
  fill: none;
  stroke: var(--ink);
  stroke-width: calc(1px * var(--bk-k));
  stroke-opacity: .75;
  stroke-linejoin: round;
}
.corner--books .bk-end {
  fill: color-mix(in srgb, var(--cedar) 25%, var(--parch-light));
  stroke: var(--ink);
  stroke-width: calc(.7px * var(--bk-k));
  stroke-opacity: .7;
}
.corner--books .bk-core { fill: var(--graphite); }

/* ---- phone: design-first band (71-100vh; svh where supported). Same art, framed closer on the book. ----
   The art is sized by the band's height, so on short viewports (Instagram's in-app browser,
   375x667) the book stays clear of the real card. */
@media (max-width: 640px) {
  .corner--books { --bk-k: 1.6; }
  .corner--books .bk-art {
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--ig-bar, 0px));   /* --ig-bar: Instagram's overlaid toolbar */
    width: min(62vw, 28vh);
    width: min(62vw, 28svh);  /* small viewport: what is visible under the toolbars (refiner) */
  }
  /* frame the book: user units 176..580 x 96..379 fill the box */
  .corner--books .bk-zoom { transform: scale(1.4851) translate(-176px, -96px); }
  /* the loose sheet's paper fades out before the twilight; only its ink reaches the dark */
  .corner--books .bk-loosefill { mask: url(#bkB-loosemask); }
}
/* shorter phones draw the art smaller (28vh), so the strokes are scaled up to match */
@media (max-width: 640px) and (max-height: 760px) {
  .corner--books { --bk-k: 1.85; }
}
/* Short phones (<= 700 px tall; Instagram's in-app browser on SE/8-class iPhones and small
   Androids). The card here is ~304 px (its <= 760px tier), so it ends at 50vh + 152px; the
   book's top sits at h - 26 - safe-area - .6515 W. So W <= (50vh - 190px - safe-area) * 1.53
   leaves >= 12 px. (Relaxed from 203px when the card shrank; it now bites only below ~600 px
   tall, where 28vh alone would reach the card.)
   --bk-k steps with the art so outlines stay ~1.3-1.5 px (1.5 * k * W * 1.4851 / 600). */
@media (max-width: 640px) and (max-height: 700px) {
  .corner--books { --bk-k: 2; }
  .corner--books .bk-art {
    width: min(62vw, 28vh, calc((50vh - 190px - env(safe-area-inset-bottom, 0px)) * 1.53));
    width: min(62vw, 28svh, calc((50svh - 190px - env(safe-area-inset-bottom, 0px)) * 1.53));
  }
}
@media (max-width: 640px) and (max-height: 625px) {
  .corner--books { --bk-k: 2.3; }
  .corner--books .bk-art { right: 13px; } /* the smaller art keeps the cedar end >= 16 px in */
}
@media (max-width: 640px) and (max-height: 605px) { .corner--books { --bk-k: 2.4; } }
@media (max-width: 640px) and (max-height: 585px) { .corner--books { --bk-k: 2.6; } }
@media (max-width: 640px) and (max-height: 562px) { .corner--books { --bk-k: 2.9; } }
@media (max-width: 640px) and (max-height: 545px) { .corner--books { --bk-k: 3.25; } }