/* reader.css — the notebook overlay: the index, the essay page, the corners you turn,
 * the held paragraph, and the slam. Extracted verbatim from the prototype.
 */
#reader{
  position:fixed;inset:0;z-index:40;display:none;overflow-y:auto;
  background:
    radial-gradient(ellipse 70vmax 55vmax at 50% 20%, rgba(244,223,192,.10), transparent 60%),
    rgba(12,6,10,.92);
  /* the sheet starts below the top chrome band and ends above the bottom one */
  padding:calc(var(--chrome-top) + 16px) 14px calc(var(--chrome-bottom) + 30px);
}
#reader.on{display:block;animation:mfade .35s ease;}

/* index page */
.idx-kicker{font-family:'VT323',monospace;letter-spacing:.24em;font-size:.95rem;color:var(--pink);margin-bottom:4px;}
.idx-title{font-family:'Gochi Hand',cursive;font-size:2.1rem;color:var(--pen);text-decoration:underline wavy rgba(210,86,143,.6) 3px;text-underline-offset:8px;transform:rotate(-.6deg);margin-bottom:6px;}
.idx-sub{font-family:'Reenie Beanie',cursive;font-size:1.3rem;color:var(--pencil);margin-bottom:22px;transform:rotate(-.8deg);}
.idx-list{list-style:none;position:relative;z-index:2;}
.idx-list li{line-height:30px;position:relative;}
.idx-entry{
  width:100%;text-align:left;display:flex;gap:12px;align-items:baseline;padding:0 6px;border-radius:4px;
  font-family:'Reenie Beanie',cursive;font-size:1.55rem;color:var(--pen);
  transition:background .15s;
}
.idx-entry:hover{background:rgba(245,226,122,.35);}
.idx-entry .n{font-family:'VT323',monospace;font-size:1.1rem;color:var(--pink);min-width:40px;position:relative;}
.idx-entry .n.circled::after{
  content:"";position:absolute;inset:-6px -8px;border:2.5px solid var(--pen-soft);border-radius:50%;
  transform:rotate(-6deg);opacity:.8;
}
.idx-entry .read-check{font-family:'Gochi Hand',cursive;color:var(--pink);font-size:1.1rem;margin-left:auto;}
.amend{font-family:'Reenie Beanie',cursive;font-size:1.15rem;color:var(--pink);margin-left:6px;}
.amend.pencil{color:var(--pencil);font-family:'Shadows Into Light',cursive;font-size:1.05rem;}
.amend.sharpie{color:var(--sharpie);font-family:'Gochi Hand',cursive;font-size:1rem;}
/* PHASE 4 — a name gone over in Sharpie until it stopped being a name.
 * The word is still there under the ink, and it still reads to a screen reader, because that is
 * what a marker actually achieves: it hides the word from the eye and from nobody else. The
 * block is a stack of strokes at different angles, none of them level, with one hard sharp edge
 * where the nib caught and a soft one where the ink bled into the paper. */
.amend.blacked{
  position:relative;color:transparent;font-family:'Reenie Beanie',cursive;font-size:1.2rem;
  padding:0 6px;margin-left:8px;
  text-shadow:0 0 2px rgba(36,28,34,.35);   /* the word, barely, through the ink */
}
.amend.blacked::before,.amend.blacked::after{
  content:"";position:absolute;pointer-events:none;
  background:#241C22;
}
.amend.blacked::before{
  left:-3px;right:-5px;top:-2px;bottom:0;
  transform:rotate(-1.8deg);
  border-radius:2px 6px 3px 7px/5px 2px 6px 3px;
  opacity:.93;
}
.amend.blacked::after{
  left:-1px;right:-9px;top:3px;bottom:-3px;
  transform:rotate(1.4deg);
  border-radius:7px 3px 8px 2px/3px 6px 2px 5px;
  opacity:.86;filter:blur(.4px);
}
/* the row she added later: squeezed in at the head of the list, in a different hand from the
 * rest, at a slightly different angle because it was written at a different time */
.idx-late .idx-entry{transform:rotate(-.5deg);}
.idx-late .idx-entry > span:nth-child(2){font-family:'Shadows Into Light',cursive;font-size:1.32rem;}
.idx-late .n{color:var(--pencil);}
.idx-late .amend.pencil{font-size:.98rem;}
/* the inscription, when the late row sends you back up to it */
.flyleaf.noticed{animation:noticed 1.6s ease;}
@keyframes noticed{
  0%{background:transparent;}
  25%{background:rgba(245,226,122,.45);}
  100%{background:transparent;}
}
.idx-final{margin-top:26px;font-family:'Gochi Hand',cursive;font-size:1.35rem;color:var(--sharpie);transform:rotate(-1.2deg);display:none;}
.idx-final.on{display:block;animation:mfade .8s ease;}
/* The exit button owns the bottom chrome band. It used to sit at the end of the scrolling
 * content, which meant two things went wrong: the toast printed on top of it when you reached
 * the foot of a page, and the floor's own footer showed through the reader's 92%-opaque
 * background directly behind it. It is now fixed in its own band with an opaque backing, so
 * nothing is behind it and nothing can reach it. */
.reader-exit{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:var(--chrome-bottom);
  display:flex;align-items:center;justify-content:center;
  margin:0;font-family:'Reenie Beanie',cursive;font-size:1.35rem;color:#E4C9B2;
  text-shadow:0 2px 5px rgba(0,0,0,.6);
  background:linear-gradient(to top, rgba(11,5,9,1) 0%, rgba(11,5,9,.98) 48%, rgba(11,5,9,0) 100%);
}
#reader:not(.on) ~ .reader-exit,
#reader:not(.on) .reader-exit{display:none;}
.reader-exit:hover{text-decoration:underline wavy;}


/* essay page */
.es-kicker{font-family:'VT323',monospace;letter-spacing:.2em;font-size:.9rem;color:var(--pink);margin-bottom:6px;position:relative;z-index:2;}
.es-title{font-family:'Gochi Hand',cursive;font-size:clamp(1.55rem,4vw,2.3rem);line-height:1.15;color:var(--pen);margin-bottom:26px;transform:rotate(-.4deg);position:relative;z-index:2;}
/* PASS 2 — the body is written, not typeset.
 * The prototype set the essays in Nunito at #31322C, which is why the page read as a website
 * with a paper background. Design law: blue Bic is the body ink. line-height is locked to
 * RULE_STEP (30px) so the writing sits on the ruling instead of floating between it. */
.es-body{
  position:relative;z-index:2;
  font-family:'Shadows Into Light',cursive;
  font-size:1.42rem;line-height:30px;font-weight:400;
  color:var(--pen);
  max-width:590px;
  letter-spacing:.004em;
}
/* CUT: per-paragraph ink-pressure gradients.
 *
 * These were `background-clip: text` gradients running light-to-dark across each paragraph.
 * Two reasons they are gone. First, they were not visible — over a 590px column the falloff is
 * too gradual to register, which was already flagged at the end of Phase 3. Second, they were
 * actively broken: a paragraph clipping a gradient to its own text, containing a span with its
 * own colour (a beat subhead, the closing `so.`), paints those glyphs twice — and once the
 * paragraph picked up a fraction of a degree of rotation the two paints no longer coincided,
 * so beats rendered doubled: "thhee uunniiffoorrmm."
 *
 * What replaces it is what actually varies in a notebook: which pen was in her hand. Solid ink,
 * shifting a little from paragraph to paragraph, and nothing clipped to text. */
.es-body p{
  margin-bottom:30px;
  color:#243B8F;
}
.es-body p:nth-of-type(6n+2){ color:#28409A; }
.es-body p:nth-of-type(6n+3){ color:#1F3480; }
.es-body p:nth-of-type(6n+4){ color:#2C4494; }
.es-body p:nth-of-type(6n+5){ color:#213781; }
.es-body p:nth-of-type(6n)  { color:#2A3F8D; }
.es-body .beat{
  font-family:'Reenie Beanie',cursive;font-size:1.7rem;font-weight:400;color:var(--pen);
  display:inline-block;transform:rotate(-.6deg);position:relative;
  /* the rule underneath is drawn, not decorated — see .beat::after */
  text-decoration:none;
}
/* PASS 14 — the beat underline is hand-drawn.
 *
 * It was `text-decoration: underline solid 3px`, which is a machined line of constant weight
 * that begins and ends exactly at the glyphs. A line drawn under a phrase with a gel pen does
 * none of those things: it starts a little before the first letter, OVERSHOOTS the last one,
 * wanders above and below true, and carries more ink in the middle of the stroke than at
 * either end where the pen was landing and lifting. There is a second, fainter pass under part
 * of it, because she went over it again. */
.es-body .beat::after{
  content:"";position:absolute;
  left:-6px;right:-13px;      /* start early, overshoot the end */
  bottom:-9px;height:14px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2014%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%27p%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23D2568F%27%20stop-opacity%3D%27.25%27%2F%3E%20%3Cstop%20offset%3D%279%25%27%20stop-color%3D%27%23D2568F%27%20stop-opacity%3D%27.85%27%2F%3E%20%3Cstop%20offset%3D%2738%25%27%20stop-color%3D%27%23C2417C%27%20stop-opacity%3D%271%27%2F%3E%20%3Cstop%20offset%3D%2772%25%27%20stop-color%3D%27%23D2568F%27%20stop-opacity%3D%27.9%27%2F%3E%20%3Cstop%20offset%3D%2793%25%27%20stop-color%3D%27%23D2568F%27%20stop-opacity%3D%27.55%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23D2568F%27%20stop-opacity%3D%27.12%27%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Cpath%20d%3D%27M2%208.4%20C%2034%206.2%2C%2061%209.6%2C%2096%207.4%20C%20132%205.1%2C%20158%209.9%2C%20194%207.6%20C%20226%205.6%2C%20252%209.2%2C%20286%206.8%20L%20297%206.2%27%20fill%3D%27none%27%20stroke%3D%27url%28%23p%29%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M9%2010.4%20C%2044%208.6%2C%2070%2011.4%2C%20104%209.6%20C%20140%207.7%2C%20166%2011.6%2C%20200%209.6%20C%20230%207.9%2C%20256%2010.8%2C%20288%208.9%27%20fill%3D%27none%27%20stroke%3D%27%23D2568F%27%20stroke-opacity%3D%27.34%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%2F%3E%20%3C%2Fsvg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
  transform:rotate(.35deg);   /* not parallel to the words */
  pointer-events:none;
}
.es-body .so{font-family:'Gochi Hand',cursive;font-size:1.85rem;font-weight:400;color:var(--pink);display:inline-block;transform:rotate(-1.4deg);}
/* embedded artifact thumb */

/* held paragraph */
.held{position:relative;cursor:pointer;display:block;width:100%;text-align:left;color:inherit;line-height:inherit;}
.held .held-text{filter:blur(5px);transition:filter .25s;user-select:none;}
.held .held-cue{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Reenie Beanie',cursive;font-size:1.4rem;color:var(--pink);pointer-events:none;
  text-shadow:0 1px 0 var(--paper);transition:opacity .25s;
}
.held.holding .held-text,.held.done .held-text{filter:none;}
.held.holding .held-cue,.held.done .held-cue{opacity:0;}
/* page-corner nav */
.corner{
  position:absolute;bottom:0;z-index:5;
  /* the corner is DRAGGED, so its size is the state: 78px lying flat, up to 328 fully lifted.
   * pan-y leaves the reader's vertical scroll alone and keeps the horizontal pull for us. */
  width:var(--c-size,78px);height:var(--c-size,78px);
  cursor:grab;touch-action:pan-y;
  transition:transform .15s;
}
/* The corner is a lifted page, not a wedge of carpet. What you see is the underside of the
 * sheet turning over — paper, slightly darker than the front because it's in its own shadow —
 * and a soft cast onto the page beneath it.
 *
 * PHASE 4 — the fold is built out of two clipped triangles instead of one diagonal gradient
 * band. The band was fine at 78px and wrong the moment the corner could be DRAGGED: pulled out
 * to 328px it stopped reading as a folded flap and became a stripe of light across the writing,
 * with the page's own ruling showing through on both sides of it. A fold is opaque, it has a
 * definite edge, and it lies on top of the page it came off.
 *
 *   ::before  the flap — the back of the page, brightest right at the crease where the paper
 *             bends into the lamp, dirtier and darker out at the tip.
 *   ::after   the shadow the flap throws onto the page still lying flat underneath it.
 *
 * The crease carries a kink at its midpoint. Paper does not fold on a drawn line, and design
 * law here is that nothing sits at exactly 0deg — a perfectly straight hypotenuse is the same
 * tell as a perfect repeat. */
.corner-next{ right:0; }
.corner-prev{ left:0; }
/* The drop-shadow belongs to the FLAP, not to the corner element. On the element it also
 * shadowed ::after — the cast shadow — and printed that triangle's two straight box edges onto
 * the page as a visible seam. */
.corner-next::before{ filter:drop-shadow(-4px -4px 7px rgba(10,4,8,.44)); }
.corner-prev::before{ filter:drop-shadow(4px -4px 7px rgba(10,4,8,.44)); }
.corner::before,.corner::after{content:"";position:absolute;inset:0;pointer-events:none;}
/* the flap */
.corner-next::before{
  clip-path:polygon(100% 0, 100% 100%, 0 100%, 52% 47%);
  background:linear-gradient(135deg,
    rgba(0,0,0,0) 0 49%,
    #6B563A 49.4%, #F6EFDA 50%,        /* the crease itself, then the paper bending into the lamp */
    #EDE3C8 60%, #DBCCA7 78%, #C3B187 92%, #B5A278 100%);
}
.corner-prev::before{
  clip-path:polygon(0 0, 0 100%, 100% 100%, 48% 47%);
  background:linear-gradient(225deg,
    rgba(0,0,0,0) 0 49%,
    #6B563A 49.4%, #F6EFDA 50%,
    #EDE3C8 60%, #DBCCA7 78%, #C3B187 92%, #B5A278 100%);
}
/* what the flap casts on the page underneath it */
.corner-next::after{
  clip-path:polygon(0 0, 100% 0, 52% 47%, 0 100%);
  background:linear-gradient(315deg,
    rgba(0,0,0,0) 0 44%,
    rgba(48,28,12,.40) 49.6%, rgba(48,28,12,.20) 55%,
    rgba(48,28,12,.07) 63%, rgba(0,0,0,0) 74%);
}
.corner-prev::after{
  clip-path:polygon(100% 0, 0 0, 48% 47%, 100% 100%);
  background:linear-gradient(45deg,
    rgba(0,0,0,0) 0 44%,
    rgba(48,28,12,.40) 49.6%, rgba(48,28,12,.20) 55%,
    rgba(48,28,12,.07) 63%, rgba(0,0,0,0) 74%);
}
.corner:hover{transform:scale(1.12);}
.corner:focus-visible{outline:3px dashed var(--pen);outline-offset:-10px;}
/* under the finger it does not do the hover trick — it is being held, and the size is the
 * feedback. `snapping` is the drop back down when you let go short of committing. */
.corner.dragging{transform:none;cursor:grabbing;}
.corner.snapping{transition:width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1),transform .15s;}
/* pulled far enough that letting go turns the page. the lifted sheet throws a longer shadow. */
.corner-next.ready::before{filter:drop-shadow(-11px -10px 17px rgba(10,4,8,.62));}
.corner-prev.ready::before{filter:drop-shadow(11px -10px 17px rgba(10,4,8,.62));}
.corner.ready .c-hint{opacity:1;}
.corner .c-hint{
  position:absolute;z-index:2;font-family:'Reenie Beanie',cursive;font-size:1rem;color:var(--pencil);white-space:nowrap;
  opacity:0;transition:opacity .2s;
}
.corner-next .c-hint{bottom:26px;right:66px;}
.corner-prev .c-hint{bottom:26px;left:66px;}
.corner:hover .c-hint{opacity:1;}
.corner.dead{display:none;}
/* page turn anim */
.sheet.turning-f{animation:turnf .45s ease forwards;}
.sheet.turning-b{animation:turnb .45s ease forwards;}
@keyframes turnf{to{transform:rotate(-.35deg) translateX(-30px) rotateY(28deg);opacity:0;}}
@keyframes turnb{to{transform:rotate(-.35deg) translateX(30px) rotateY(-28deg);opacity:0;}}
.sheet.arriving{animation:arrive .4s ease;}
@keyframes arrive{from{opacity:0;transform:rotate(-.35deg) translateY(10px);}to{opacity:1;transform:rotate(-.35deg);}}


/* NO overlay slam */
#no-slam{
  position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(14,6,10,.9);
}
#no-slam.on{display:flex;animation:mfade .12s ease;}
#no-slam span{font-family:'Gochi Hand',cursive;font-size:clamp(5rem,20vw,11rem);color:#E86A9E;transform:rotate(-6deg);
  text-shadow:0 4px 0 rgba(0,0,0,.6);}


@media (max-width:700px){
  .es-body{max-width:none;}
  .corner{--c-size:88px;}
}

/* the flyleaf — written on the inside cover, before the index proper.
 * smaller hand, tighter, tilted the other way from the index. she wrote it first
 * and she wrote it fast. */
.flyleaf{
  position:relative;z-index:2;margin:0 0 34px;padding:0 8px 22px 0;
  font-family:'Shadows Into Light',cursive;font-size:1.26rem;line-height:30px;color:#33499C;
  transform:rotate(.5deg);opacity:.88;
  border-bottom:1px solid rgba(157,182,204,.5);
}
.flyleaf p{margin-bottom:12px;}
.flyleaf p:last-child{margin-bottom:0;}

/* PASS 9 — the left edge wanders, and baselines slope.
 *
 * Two separate things, both of which the prototype got wrong by being perfect:
 *
 * 1. LEFT EDGE. Every line used to begin at exactly the same x. A shaped float (see
 *    src/paper.js raggedShape) steps in and out every rule, and the text reflows around it,
 *    so each line starts somewhere different — 2 to 6px of wander, occasionally wider.
 *    Genuinely per line, and it needs no per-line markup.
 *
 * 2. BASELINE SLOPE. Her hand drifts as it crosses the page, so a paragraph does not end level
 *    with where it started. A fraction of a degree per paragraph, alternating, is enough — at
 *    this size a tenth of a degree is a visible pixel by the end of a long line.
 */
.es-body .ragged{
  float:left;width:8px;height:4200px;
  shape-outside:var(--ragged, none);
  pointer-events:none;
}
.es-body p{ transform-origin:left center; }
.es-body p:nth-of-type(5n+1){ transform:rotate(.16deg); }
.es-body p:nth-of-type(5n+2){ transform:rotate(-.12deg); }
.es-body p:nth-of-type(5n+3){ transform:rotate(.25deg); }
.es-body p:nth-of-type(5n+4){ transform:rotate(-.2deg); }
.es-body p:nth-of-type(5n+5){ transform:rotate(.09deg); }