/* paper.css — anything made of paper: the sheet, its ruling and margin, grain, bleed-through,
 * tape, the deterioration layer, torn stubs. Extracted verbatim from the prototype.
 * Phase 3 rewrites almost all of this — drifting rules, per-sheet grain, real torn edges.
 */
/* the little paper objects on the floor */
.obj .paperette{
  background:var(--paper);color:var(--sharpie);
  box-shadow:inset 0 0 24px rgba(120,95,50,.18);
}

.sheet{
  position:relative;max-width:780px;margin:0 auto;
  /* the paper is not one colour: warm at the top, cooler and dirtier at the foot */
  background:
    linear-gradient(174deg, #F8F2E2 0%, #F4EEDC 46%, #EDE4CC 100%);
  padding:58px 54px 66px 74px;min-height:70vh;
  /* PASS 11 — this is a page IN something, not a loose leaf.
   *
   * The stack is built from hard-edged box-shadows: each one is the cut edge of another sheet
   * underneath, offset a little differently in x and y and a shade dirtier as it goes down, so
   * the pile is uneven the way a used notebook is. Then the soft shadows underneath that put
   * the whole block on the floor. The top sheet also gets a thin bright edge along its foot,
   * which is the paper's own thickness catching the lamp. */
  box-shadow:
    /* the paper's own thickness */
    0 1px 0 0 rgba(255,250,232,.5),
    /* sheets underneath, none of them square to the one above */
    2px 4px 0 -1px #EDE4CB,
    -1px 7px 0 -2px #E6DCC0,
    3px 10px 0 -3px #DFD3B4,
    -2px 13px 0 -4px #D6C9A8,
    4px 16px 0 -5px #CDBF9B,
    -1px 19px 0 -6px #C3B48D,
    /* and the block sits on the floor */
    26px 40px 44px -18px rgba(6,2,5,.66),
    -4px 16px 30px -12px rgba(6,2,5,.44),
    inset 14px 0 26px -18px rgba(90,60,30,.55);
  transform:rotate(var(--sheet-tilt, -.35deg));
}
/* PASS 5 — the page turns down into the binding on the left. This is the strongest single
 * cue that you are looking at a bound object photographed rather than a div with a cream
 * background, so it is drawn here in CSS where it can sit above the surface and below the ink.
 *
 * It lives on its own element rather than ::after because .sheet used to carry the shared
 * `grained` class, whose ::after is the prototype's ONE tiled noise PNG — the same grain on
 * every sheet, which is precisely what this phase exists to remove. The sheet now carries only
 * its own generated surface.
 *
 * TRIED AND REVERTED (pass 4): a clip-path with a few tenths of a percent of edge wobble.
 * Invisible at any zoom a reader will ever use, and clip-path clips the box-shadow, so the
 * sheet lost its drop shadow and read as pasted-on. Net loss. Removed.
 * ALSO REVERTED: a highlight along the gutter ridge, which cancelled the shadow it sat on. */
.sheet .gutter{
  position:absolute;left:0;top:0;bottom:0;width:104px;pointer-events:none;z-index:1;
  /* the page turns down into the binding: a hard crease at the very edge, then the curve out */
  background:
    linear-gradient(90deg,
      rgba(14,8,4,.66) 0px, rgba(26,16,8,.5) 3px,
      rgba(46,32,16,.3) 9px, rgba(70,50,26,.17) 20px,
      rgba(96,72,42,.09) 40px, rgba(120,94,58,.03) 70px,
      rgba(120,94,58,0) 100%),
    /* the ridge where it comes back up catches a little light */
    linear-gradient(90deg,
      rgba(255,248,228,0) 12px, rgba(255,248,228,.14) 26px, rgba(255,248,228,0) 52px);
}
/* drifting ruling: two layers slightly skewed */
/* PASS 1 — the surface is one generated SVG per sheet (src/paper.js): ruling drawn as
 * individual drifting lines, margin printed in a second pass so it never agrees with them,
 * grain seeded per sheet, and an uneven lamp. No repeats anywhere. */
.sheet::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--sheet-surface);
  background-size:100% 100%;background-repeat:no-repeat;
}
.sheet .marginline{display:none;} /* drawn into the sheet surface now */
.sheet .holes{position:absolute;top:0;bottom:0;left:14px;width:16px;display:flex;flex-direction:column;justify-content:space-around;}
.sheet .holes i{width:14px;height:14px;border-radius:50%;background:#31222B;box-shadow:inset 0 2px 3px rgba(0,0,0,.6);}
/* bleed-through ghost */
/* ink from the reverse side — her hand, mirrored, in the same size she writes at, so the ghost
 * lines up with the ruling the way real bleed-through does. ~5% per design law. */
.bleed{
  position:absolute;inset:58px 46px 40px 74px;pointer-events:none;overflow:hidden;
  font-family:'Shadows Into Light',cursive;font-size:1.42rem;line-height:30px;color:#2A3E86;
  opacity:.05;transform:scaleX(-1) rotate(.35deg);
  filter:blur(.35px);
  word-spacing:.06em;
}
/* permanent damage layer */
/* PASS 7 — deterioration.
 * Every mark is something that happened TO the page while it sat there: a mug set down, a pen
 * bled, someone's mouth, a corner turned over. None of them are centred and none are square.
 */
.damage{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3;}

/* a mug was set down here. the rim is where the liquid dried darkest, the middle is barely
 * touched, and the ring is not a circle because the page was not flat. */
/* PASS 10 — damage now happens TO the ink, not over it.
 *
 * A mug ring is not a circle and it is not continuous: the liquid pools at the rim, dries
 * darkest there, and breaks wherever the cup lifted or the paper was not flat. And ink that
 * has been wet FEATHERS — the line spreads and softens where the liquid crossed it. That
 * feathering is the thing that makes a stain read as having happened to the page rather than
 * having been drawn on top of it. (The first attempt did that with backdrop-filter and had to be
 * withdrawn — see the note on .stain-ring below.) */
.stain-ring{
  position:absolute;width:120px;height:104px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20104%27%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%27wet%27%20cx%3D%2747%25%27%20cy%3D%2752%25%27%20r%3D%2752%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%238A5C24%27%20stop-opacity%3D%27.05%27%2F%3E%20%3Cstop%20offset%3D%2762%25%27%20stop-color%3D%27%238A5C24%27%20stop-opacity%3D%27.10%27%2F%3E%20%3Cstop%20offset%3D%2788%25%27%20stop-color%3D%27%236E4415%27%20stop-opacity%3D%27.26%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%236E4415%27%20stop-opacity%3D%270%27%2F%3E%20%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%27sm%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.1%27%2F%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sm2%27%3E%3CfeGaussianBlur%20stdDeviation%3D%27.5%27%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Cg%20transform%3D%27rotate%28-9%2060%2052%29%27%3E%20%3Cellipse%20cx%3D%2760%27%20cy%3D%2752%27%20rx%3D%2747%27%20ry%3D%2740%27%20fill%3D%27url%28%23wet%29%27%20filter%3D%27url%28%23sm%29%27%2F%3E%20%3Cellipse%20cx%3D%2760%27%20cy%3D%2752%27%20rx%3D%2747%27%20ry%3D%2740%27%20fill%3D%27none%27%20stroke%3D%27%235E3A11%27%20stroke-opacity%3D%27.42%27%20stroke-width%3D%275%27%20stroke-dasharray%3D%2762%209%20108%2014%2046%207%2096%2011%27%20stroke-linecap%3D%27round%27%20filter%3D%27url%28%23sm2%29%27%2F%3E%20%3Cellipse%20cx%3D%2760%27%20cy%3D%2752%27%20rx%3D%2744.5%27%20ry%3D%2737.6%27%20fill%3D%27none%27%20stroke%3D%27%237A5220%27%20stroke-opacity%3D%27.2%27%20stroke-width%3D%272.4%27%20stroke-dasharray%3D%2740%2022%20130%209%2070%2016%27%20filter%3D%27url%28%23sm2%29%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}
/* SHIP BLOCKER, fixed: this used to be `backdrop-filter: blur(.75px)`, which really did feather
 * the writing underneath — and at 390 it also painted a second, offset copy of the glyphs. The
 * backdrop snapshot and the live text disagree inside the reader's scrolling container, so the
 * blurred backdrop composited over the original instead of replacing it: doubled, unreadable
 * text in the first paragraph. Correct rendering of her writing outranks a texture effect, so
 * no wet mark touches the backdrop any more.
 *
 * What replaces it reads the same at a glance and cannot corrupt anything: ink that has been wet
 * gives its colour up into the water, so the inside of the ring carries a dilute wash of the
 * blue she writes in, strongest just inside the rim where the liquid stood longest. */
.stain-ring::after{
  content:"";position:absolute;inset:9%;border-radius:52% 48% 46% 54%;
  background:
    radial-gradient(ellipse at 46% 50%, rgba(46,66,150,.11) 0 44%, rgba(40,58,138,.17) 72%, rgba(40,58,138,.05) 90%, transparent 100%);
  filter:blur(2.4px);
  mix-blend-mode:multiply;
}
/* the pen sat on the page and kept writing without her */
.stain-blot{
  position:absolute;width:46px;height:34px;border-radius:56% 44% 62% 38%;
  background:
    radial-gradient(ellipse at 40% 42%, rgba(24,42,120,.5) 0 26%, rgba(36,59,143,.26) 54%, transparent 74%),
    radial-gradient(ellipse at 66% 62%, rgba(30,50,128,.3) 0 18%, transparent 52%);
  /* a pen that sat here soaked through — the halo is the ink wicking out along the fibres */
  filter:blur(1.1px);
}
.stain-blot::after{
  content:"";position:absolute;inset:-32%;border-radius:58% 42% 64% 36%;
  background:radial-gradient(ellipse at 44% 46%, rgba(36,59,143,.16) 0 34%, rgba(36,59,143,.06) 62%, transparent 82%);
  filter:blur(3px);mix-blend-mode:multiply;
}
.stain-lip{
  position:absolute;width:54px;height:32px;opacity:.42;
  background:
    radial-gradient(ellipse 27px 15px at 30% 48%, rgba(176,58,96,.9) 0 52%, rgba(176,58,96,.35) 62%, transparent 66%),
    radial-gradient(ellipse 27px 16px at 70% 54%, rgba(168,52,90,.85) 0 50%, rgba(168,52,90,.3) 60%, transparent 65%);
  filter:blur(.7px);transform:rotate(-13deg);
}
/* a corner turned over: the back of the page is lighter, and it casts onto the sheet */
.stain-fold{
  position:absolute;top:-1px;right:-1px;width:84px;height:84px;
  background:linear-gradient(226deg,
    rgba(20,12,16,.9) 0 47%,
    #EFE7CF 48% 62%,
    rgba(120,92,52,.28) 63% 70%,
    transparent 78%);
  filter:blur(.4px);
}
/* someone who is not her wrote on the page.
 * three hands, and none of them are hers: the default pink pen, Kayla in pencil (she corrects,
 * she does not shout), and whoever got hold of the notebook with a Sharpie. */
.scrawl{
  position:absolute;font-family:'Reenie Beanie',cursive;color:#C2417C;font-size:1.32rem;
  transform:rotate(-4deg);pointer-events:none;max-width:96px;line-height:1.05;
  text-shadow:0 0 1px rgba(194,65,124,.35);
}
.scrawl.pencil{
  font-family:'Shadows Into Light',cursive;color:#6A6A63;font-size:1.12rem;
  opacity:.82;text-shadow:none;
}
.scrawl.sharpie{
  font-family:'Gochi Hand',cursive;color:#241C22;font-size:1.18rem;
  opacity:.86;text-shadow:0 0 2px rgba(36,28,34,.5);
}


/* torn stub in the index */
.idx-torn{display:flex;gap:12px;align-items:center;padding:0 6px;font-family:'Reenie Beanie',cursive;font-size:1.3rem;color:var(--pencil);}
.idx-torn .n{font-family:'VT323',monospace;font-size:1rem;color:#A98;min-width:40px;}
.torn-stub{flex:1;height:15px;background:linear-gradient(90deg,#E5DCC2,#EFE8D2);opacity:.95;
  clip-path:polygon(0 45%,5% 12%,10% 58%,16% 18%,22% 62%,28% 15%,34% 60%,40% 20%,46% 66%,52% 12%,58% 58%,64% 22%,70% 64%,76% 14%,82% 58%,88% 24%,94% 62%,100% 40%,100% 100%,0 100%);}

/* an artifact taped into a page */
.taped-in{
  position:relative;display:block;margin:6px 0 30px;max-width:260px;padding:14px 14px 12px;
  background:var(--paper-dark);box-shadow:0 6px 12px rgba(60,30,10,.3);transform:rotate(-2deg);
  cursor:pointer;transition:transform .15s;text-align:left;
}
.taped-in:hover{transform:rotate(-1deg) translateY(-2px);}
/* PASS 3 — tape is torn off a roll, so the short ends are ragged and the long edges are clean.
 * The prototype used two rounded rectangles, which is the most CSS thing on the page. */
.taped-in::before,.taped-in::after{
  content:"";position:absolute;width:76px;height:24px;top:-11px;
  background:linear-gradient(178deg,rgba(252,248,232,.62),rgba(238,231,205,.44) 40%,rgba(250,245,226,.58));
  box-shadow:0 1px 3px rgba(90,70,34,.34), inset 0 0 8px rgba(255,255,255,.45);
}
.taped-in::before{
  left:-18px;transform:rotate(-30deg);
  clip-path:polygon(6% 0,0 26%,5% 48%,0 74%,7% 100%,93% 100%,100% 78%,95% 52%,100% 24%,94% 0);
}
.taped-in::after{
  right:-18px;transform:rotate(28deg);
  clip-path:polygon(4% 0,0 30%,6% 55%,0 80%,5% 100%,96% 100%,100% 72%,94% 47%,100% 21%,95% 0);
}
.taped-in .ti-label{font-family:'Special Elite',monospace;font-size:.7rem;color:#5A5344;display:block;}
.taped-in .ti-sub{font-family:'Reenie Beanie',cursive;font-size:1.15rem;color:var(--pen);}

@media (max-width:700px){
  .sheet{padding:46px 22px 60px 50px;}
  /* 22px of fore-edge is not enough to write ACROSS, so the scrawl turns and runs up the edge
   * of the page instead of landing on her sentences. This is what the margin does to you. */
  .scrawl{writing-mode:vertical-rl;max-width:none;max-height:200px;font-size:1.02rem;}
  .scrawl.pencil{font-size:.92rem;}
  .scrawl.sharpie{font-size:.96rem;}
}

/* ============================================================
   THE IPOD
   Some pages carry a recording of her reading. It is not a media player in the web sense —
   there is no scrubber, no volume, no timeline, because none of those exist on a page. It is her
   iPod, taped to the inside cover. See src/audio.js.
   ============================================================ */
/* It was a cassette. Now it is her iPod — hot pink, click wheel, and the creature from the
 * keychain toy on its screen, because it is her creature and it lives on more than one of her
 * screens. Progress is the creature walking across the floor of the LCD. */
.pod{
  --p:0;
  position:relative;display:block;
  width:138px;margin:4px 0 36px 10px;padding:0;
  background:none;border:none;color:inherit;font:inherit;
  transform:rotate(-2.2deg);cursor:pointer;text-align:left;
}
.pod:hover{transform:rotate(-2.2deg) translateY(-1px);}

/* the strips of tape holding it to the inside cover — torn ends, same as an artifact */
.pod::before,.pod::after{
  content:"";position:absolute;z-index:2;width:56px;height:19px;
  background:linear-gradient(178deg,rgba(252,248,232,.6),rgba(238,231,205,.42) 40%,rgba(250,245,226,.56));
  box-shadow:0 1px 3px rgba(90,70,34,.32);
}
.pod::before{left:-18px;top:-8px;transform:rotate(-27deg);
  clip-path:polygon(6% 0,0 26%,5% 48%,0 74%,7% 100%,93% 100%,100% 78%,95% 52%,100% 24%,94% 0);}
.pod::after{right:-17px;bottom:-7px;transform:rotate(-24deg);
  clip-path:polygon(4% 0,0 30%,6% 55%,0 80%,5% 100%,96% 100%,100% 72%,94% 47%,100% 21%,95% 0);}

/* the body: moulded pink plastic, a hard highlight along the top edge, dirtier at the foot */
.pod-body{
  display:block;position:relative;height:228px;border-radius:17px;
  background:
    radial-gradient(ellipse 72% 30% at 32% 6%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(165deg, #FF62C0 0%, #F72FA6 42%, #DE1C8C 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.32),
    inset 0 2px 4px rgba(255,255,255,.7),
    inset 0 -10px 18px rgba(120,0,70,.45),
    7px 15px 18px -6px rgba(8,3,6,.62);
}

/* the screen */
.pod-screen{
  position:absolute;left:12px;right:12px;top:12px;height:94px;border-radius:5px;
  --lcd-bg:#C9C3CF; --lcd-ink:#2A2530;
  background:linear-gradient(178deg,#D3CDD8,var(--lcd-bg) 45%,#B8B1BF);
  box-shadow:inset 0 0 0 2px #221C28, inset 0 3px 6px rgba(0,0,0,.35);
  overflow:hidden;
}
/* the lcd grid */
.pod-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(42,37,48,.14) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(42,37,48,.14) 0 1px, transparent 1px 2px);
}
/* the track name, across the top. too long for the screen, so it scrolls while it plays —
 * which is what they did */
.pod-top{
  position:absolute;left:5px;right:5px;top:5px;height:13px;overflow:hidden;white-space:nowrap;
  font-family:'VT323',monospace;font-size:.74rem;line-height:1;color:var(--lcd-ink);
  border-bottom:1px solid var(--lcd-ink);
}
.pod-top b{display:inline-block;font-weight:400;}
.pod.playing .pod-top b{animation:podscroll 7s linear infinite;}
@keyframes podscroll{to{transform:translateX(-50%);}}
/* the creature, walking from one side of the screen to the other as the track runs */
.pod-pet{
  position:absolute;top:24px;width:34px;height:26px;
  left:calc(6% + 64% * var(--p));
  transition:left .4s linear;
}
/* the floor it walks on */
.pod-floor{
  position:absolute;left:5px;right:5px;top:48px;height:7px;opacity:.55;
  background:repeating-conic-gradient(var(--lcd-ink) 0 25%, transparent 0 50%) 0 0/7px 7px;
}
.pod-time{
  position:absolute;right:6px;top:60px;
  font-family:'VT323',monospace;font-size:.68rem;line-height:1;color:var(--lcd-ink);
}
/* the row of little icons along the bottom, which do nothing, as on the real thing */
.pod-icons{
  position:absolute;left:5px;right:5px;bottom:4px;display:flex;
  border-top:1px solid var(--lcd-ink);padding-top:2px;
  font-family:'VT323',monospace;font-size:.78rem;line-height:1;color:var(--lcd-ink);
}
.pod-icons i{flex:1;text-align:center;font-style:normal;}
.pod-icons i + i{border-left:1px solid var(--lcd-ink);}

/* the wheel */
.pod-wheel{
  position:absolute;left:50%;top:120px;width:98px;height:98px;margin-left:-49px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%, #FFF6FB, #FBDDEC 68%, #F3C4DE 100%);
  box-shadow:
    inset 0 -2px 4px rgba(120,10,70,.22),
    inset 0 1px 0 #fff,
    0 1px 3px rgba(120,10,70,.35);
}
.pod-wheel b{
  position:absolute;font-family:'Nunito',sans-serif;font-weight:800;font-size:.62rem;line-height:1;
  color:#E4399F;letter-spacing:.02em;
}
.w-menu{left:50%;top:12px;transform:translateX(-50%);}
.w-prev{left:11px;top:50%;transform:translateY(-50%);font-size:.5rem;}
.w-next{right:11px;top:50%;transform:translateY(-50%);font-size:.5rem;}
.w-play{left:50%;bottom:11px;transform:translateX(-50%);font-size:.52rem;}
.pod-center{
  position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%, #FF74C8, #F23BA7 58%, #D51C88 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6), 0 1px 2px rgba(120,10,70,.4);
}
.pod:active .pod-center{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(120,10,70,.5);}
.pod.playing .pod-center{box-shadow:inset 0 1px 2px rgba(255,255,255,.6), 0 0 0 2px rgba(255,255,255,.5), 0 1px 2px rgba(120,10,70,.4);}
/* the battery went */
.pod.dead .pod-screen{--lcd-ink:#7A7482;}
.pod.dead .pod-pet{opacity:.35;}

@media (max-width:700px){
  .pod{margin-left:0;transform:rotate(-2.2deg) scale(.92);transform-origin:left top;margin-bottom:24px;}
  .pod:hover{transform:rotate(-2.2deg) scale(.92) translateY(-1px);}
}