/* Sheet 07.1, the sketchbook: her drawings bound as a book (scripts/sketchbook.js).
   The turn is pitch.dog's tactile sketchbook, ported to plain DOM: one leaf at a time, cut into
   nested strips that each bend a little. The book keeps its paper and cloth in both themes;
   only the shadows change, warm brown on cartridge, black on the cyanotype. */

.sk{--sk-page:#F6F2EA;--sk-ink:#24201C;--sk-ink-2:#5E574E;--sk-cloth:#9A3A37;--sk-cloth-2:#7E2D2B;--sk-ribbon:#6F8C69;
  --sk-shade:38,27,16;--sk-cast:.58;
  position:relative;padding-block:var(--s4) var(--s7);overflow-x:clip}
:root[data-theme="blueprint"] .sk{--sk-page:#F3EFE6;--sk-shade:0,0,0;--sk-cast:.8}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .sk{--sk-page:#F3EFE6;--sk-shade:0,0,0;--sk-cast:.8}}

.sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- without the script: the pages as a list ---- */
.sk-stage,.sk-bar,.sk-index{display:none}
.sk-pages{list-style:none;margin:0 auto;padding-block:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s6) var(--gutter);align-items:end}
.sk-pages>li{margin:0}
.sk-pages .sk-fig{margin:0}
.sk-pages .sk-fig img{display:block;width:100%;height:auto;box-shadow:0 1px 1px rgba(36,32,28,.08),0 18px 36px -24px rgba(36,32,28,.55)}
.sk-pages figcaption{display:flex;justify-content:space-between;gap:1em;margin-top:10px}
.sk-pages figcaption .t{font:italic 300 var(--t-small)/1.3 var(--serif)}
.sk-pages figcaption .d{font:400 var(--t-label)/1.4 var(--mono);color:var(--ink-2)}
.sk-pages>li[data-k="cover"] .sk-face,.sk-pages>li[data-k="back"] .sk-face{aspect-ratio:8 / 9;background:var(--sk-cloth);display:grid;place-items:center;border-radius:4px}
.sk-pages>li[data-k="title"] .sk-face,.sk-pages>li[data-k="colophon"] .sk-face{aspect-ratio:8 / 9;background:var(--sk-page);color:var(--sk-ink);display:grid;place-content:center;padding:12%;text-align:center}

/* ---- with it: the book ---- */
.sk.is-book .sk-pages{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.sk.is-book .sk-stage{display:block}
.sk.is-book .sk-bar{display:flex}
.sk.is-book .sk-index{display:flex}

.sk-stage{position:relative;height:var(--sk-h,620px);perspective:var(--sk-persp,2100px);perspective-origin:50% 42%;
  touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.sk-pres{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;transform-origin:50% 60%;
  transition:opacity .9s var(--paper-ease),transform 1.5s var(--paper-ease)}
.sk:not(.is-in) .sk-pres{opacity:0;transform:translate3d(0,56px,0) rotateX(16deg) scale(.95)}
.sk-pos{position:relative;flex:none;width:var(--bw);height:var(--ph);transform-style:preserve-3d}
.sk-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.sk-book{position:absolute;inset:0;transform-style:flat;cursor:grab}
.sk-stage.is-turning .sk-book{transform-style:preserve-3d}
.sk-stage.is-turning .sk-pos,.sk-stage.is-turning .sk-tilt{will-change:transform}
.sk-stage.is-grabbing .sk-book{cursor:grabbing}

/* the book's shadow on the table: it stays put while the leaf moves. It rides in the tilt a few pixels under the
   book, parallel to it, so a tilted book never cuts through it (an untilted shadow sliced the cover and pages) */
.sk-cast{position:absolute;left:50%;top:58%;height:34%;border-radius:50%;opacity:var(--sk-cast);pointer-events:none;transform:translate3d(-50%,0,-4px);
  background:radial-gradient(48% 38% at 50% 45%,rgba(var(--sk-shade),.37),rgba(var(--sk-shade),.16) 48%,rgba(var(--sk-shade),0) 82%),
    radial-gradient(ellipse at center,rgba(var(--sk-shade),.34),rgba(var(--sk-shade),.17) 43%,rgba(var(--sk-shade),0) 78%);filter:blur(14px)}

/* paper slabs under each half, their edges drawn as three sheets and a contact shadow */
.sk-base{position:absolute;top:0;bottom:0;width:50%;background:var(--sk-page);transform:translateZ(-2px) translateY(1px);pointer-events:none;
  box-shadow:0 1px 0 rgba(255,255,255,.72),0 2px 0 rgba(82,65,43,.14),0 3px 0 rgba(255,255,255,.44),0 4px 0 rgba(82,65,43,.1),0 7px 16px rgba(var(--sk-shade),.18)}
.sk-base.l{left:0;border-radius:4px 0 0 4px}
.sk-base.r{left:50%;border-radius:0 4px 4px 0}
/* the closed book's page block and spine */
.sk-block{position:absolute;top:1.1%;bottom:1.1%;width:49.1%;overflow:hidden;pointer-events:none;opacity:calc((1 - var(--open,0)) * .66);transform:translate3d(0,3.2px,-3px);
  background:repeating-linear-gradient(180deg,rgba(54,42,28,.13) 0,rgba(54,42,28,.13) .55px,rgba(255,255,255,.1) .8px,rgba(255,255,255,.1) 1.35px,transparent 1.7px,transparent 3.1px),var(--sk-page);
  box-shadow:0 1px 0 rgba(255,255,255,.74),0 2px 0 rgba(80,62,40,.15),0 3px 0 rgba(255,255,255,.42),0 5px 12px rgba(var(--sk-shade),.17)}
.sk-block.front{left:50.45%;border-radius:1px 4px 4px 1px}
.sk-block.back{left:.45%;border-radius:4px 1px 1px 4px}
.sk-spine{position:absolute;left:50%;top:.4%;bottom:.3%;width:clamp(4px,1.35%,12px);pointer-events:none;opacity:calc(1 - var(--open,0));
  background:linear-gradient(90deg,rgba(28,20,13,.38),rgba(255,255,255,.18) 18%,rgba(35,24,15,.22) 52%,rgba(255,255,255,.08) 76%,rgba(28,20,13,.28));box-shadow:-2px 1px 4px rgba(var(--sk-shade),.16)}
.sk-spine.front{transform:translate3d(-32%,3.2px,-1px);border-radius:4px 0 0 4px;background-color:var(--sk-cloth-2)}
.sk-spine.back{transform:translate3d(-68%,3.2px,-1px);border-radius:0 4px 4px 0;background-color:var(--sk-cloth-2)}

/* the two pages at rest, and under the moving leaf */
.sk-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sk-half.l{left:0;border-radius:4px 0 0 4px}
.sk-half.r{left:50%;border-radius:0 4px 4px 0}
.sk-half>.sk-pg{position:absolute;top:0;left:0}
.sk-half.fade>.sk-pg{animation:sk-fade .28s ease-out}
@keyframes sk-fade{from{opacity:.25}}
.sk-gutter{position:absolute;z-index:3;top:0;bottom:0;left:50%;width:6.6%;transform:translateX(-50%);pointer-events:none;opacity:calc(var(--open,0) * .7);
  background:linear-gradient(90deg,rgba(48,34,20,0),rgba(48,34,20,.04) 24%,rgba(36,25,14,.16) 47%,rgba(255,255,255,.18) 52%,rgba(48,34,20,.04) 76%,rgba(48,34,20,0))}
.sk-stage.is-pad .sk-gutter,.sk-stage.is-pad .sk-half.l{display:none}

/* one soft shadow under the leaf, sliding with it: the moving faces themselves stay unlit */
.sk-bed{position:absolute;z-index:10;top:1.8%;bottom:1.8%;left:50%;width:18%;transform:translateX(-50%);opacity:0;pointer-events:none;filter:blur(12px);
  background:radial-gradient(ellipse at center,rgba(var(--sk-shade),.3),rgba(var(--sk-shade),.14) 38%,rgba(var(--sk-shade),0) 78%)}

/* the leaf: nested strips, each turned a little further than the one before */
.sk-curl{position:absolute;z-index:12;top:0;height:100%;width:50%;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.sk-curl.next{left:50%;transform-origin:0 50%;transform:rotateY(calc(-1 * var(--ta,0deg)))}
.sk-curl.prev{right:50%;transform-origin:100% 50%;transform:rotateY(var(--ta,0deg))}
.sk-strip{position:absolute;top:0;height:100%;width:var(--sw,1px);transform-style:preserve-3d}
.sk-curl.next>.sk-strip{left:0;transform-origin:0 50%}
.sk-curl.prev>.sk-strip{right:0;transform-origin:100% 50%}
.sk-curl.next .sk-strip>.sk-strip{left:100%;transform-origin:0 50%;transform:rotateY(var(--sa,0deg))}
.sk-curl.prev .sk-strip>.sk-strip{right:100%;transform-origin:100% 50%;transform:rotateY(calc(-1 * var(--sa,0deg)))}
.sk-sf{position:absolute;top:0;bottom:0;left:-1.15px;right:-1.15px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--sk-page)}
.sk-sf.back{transform:rotateY(180deg)}
.sk-sf>.sk-pg{position:absolute;top:0}
.sk-strip.edge>.sk-sf::after{content:"";position:absolute;z-index:4;top:0;bottom:0;right:0;width:.7px;background:rgba(50,36,22,.22)}
.sk-curl.prev .sk-strip.edge>.sk-sf::after{left:0;right:auto}

/* ---- a page ---- */
.sk-pg{position:relative;width:var(--pw);height:var(--ph);overflow:hidden;background:var(--sk-page);color:var(--sk-ink);font-size:calc(var(--pw) * .032)}
/* the paper stays plain: a printed grain and light washes beat into rings (moiré) behind the type, so only the cloth
   carries a texture, and it travels with the cover so it does not blink off when the cover lifts */
.sk-pg::after{content:"";position:absolute;z-index:6;inset:0;pointer-events:none}
.sk-pg.l::after{background:linear-gradient(270deg,rgba(var(--sk-shade),.11),rgba(var(--sk-shade),0) 9%),linear-gradient(180deg,rgba(255,255,255,.16),transparent 14%,transparent 86%,rgba(53,39,24,.05))}
.sk-pg.r::after{background:linear-gradient(90deg,rgba(var(--sk-shade),.11),rgba(var(--sk-shade),0) 9%),linear-gradient(180deg,rgba(255,255,255,.16),transparent 14%,transparent 86%,rgba(53,39,24,.05))}
.sk-pg picture{display:block;width:100%;height:100%}
.sk-pg img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none;pointer-events:none}

/* a drawing tipped in: the photographed sheet, a little crooked, taped at the corners */
.sk-tip{position:absolute;transform:rotate(var(--rot,0deg));background:#fff;
  box-shadow:0 0 0 .5px rgba(60,44,28,.12),0 .12em .2em rgba(var(--sk-shade),.12),0 .5em 1.1em -.5em rgba(var(--sk-shade),.42)}
.sk-tip img{object-fit:cover}
.sk-tape{position:absolute;z-index:2;width:3.4em;height:1.05em;background:var(--tape,#E8D9A8);opacity:.74;transform:translate(-50%,-50%) rotate(var(--tr,0deg));
  clip-path:polygon(0 8%,4% 0,9% 10%,14% 0,20% 9%,26% 0,32% 8%,38% 0,44% 9%,50% 0,56% 8%,62% 0,68% 9%,74% 0,80% 8%,86% 0,92% 9%,97% 0,100% 8%,100% 92%,96% 100%,91% 90%,86% 100%,80% 91%,74% 100%,68% 92%,62% 100%,56% 91%,50% 100%,44% 92%,38% 100%,32% 91%,26% 100%,20% 92%,14% 100%,8% 91%,3% 100%,0 92%);
  box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.12)}
.sk-cap{position:absolute;left:9%;right:9%;bottom:4.6%;display:flex;justify-content:center;align-items:baseline;gap:.9em;text-align:center}
.sk-cap .t{font:italic 300 1em/1.2 var(--serif)}
.sk-cap .d{font:400 .52em/1 var(--mono);letter-spacing:.04em;color:var(--sk-ink-2);white-space:nowrap}
.sk-folio{position:absolute;top:4.4%;font:400 .5em/1 var(--mono);letter-spacing:.06em;color:var(--sk-ink-2)}
.sk-pg.l .sk-folio{left:7%}
.sk-pg.r .sk-folio{right:7%}
.sk-span{position:absolute;top:0;width:200%;height:100%}

/* endpapers: her blue water study, edge to edge */
.sk-pg.end img{object-fit:cover;filter:saturate(.92)}

/* title page and colophon */
.sk-pg .sk-face{position:absolute;inset:0}
.sk-pg.title .sk-face{display:grid;align-content:center;justify-items:center;text-align:center;padding:0 12%}
.sk-t-name{font:300 2.1em/1 var(--serif);letter-spacing:-.01em;margin:0}
.sk-t-book{font:italic 300 3.4em/1 var(--serif);color:#9A3A37;margin:.12em 0 .5em}
.sk-t-meta{font:400 .56em/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-ink-2);margin:0;padding-top:1.2em;border-top:1px solid rgba(36,32,28,.25)}
.sk-pg.colophon .sk-face{display:grid;align-content:end;padding:0 12% 14%}
.sk-colo{font:400 .56em/1.9 var(--mono);letter-spacing:.03em;color:var(--sk-ink-2);margin:0;max-width:26em}
.sk-pages>li[data-k="title"] .sk-t-name{font-size:var(--t-h3)}
.sk-pages>li[data-k="title"] .sk-t-book{font-size:var(--t-h2)}
.sk-pages>li[data-k="title"] .sk-t-meta,.sk-pages .sk-colo{font-size:var(--t-label)}

/* the cloth: a deep sofa red with a weave, the board's edge catching the light */
.sk-pg.cover,.sk-pg.back{background:var(--sk-cloth);color:#F4EEE2;border-radius:4px}
.sk-pg.cover::before,.sk-pg.back::before{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background-image:repeating-linear-gradient(88deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px),repeating-linear-gradient(2deg,rgba(0,0,0,.07) 0 1px,transparent 1px 5px),
  radial-gradient(90% 70% at 30% 20%,rgba(255,255,255,.1),transparent 70%);background-size:auto;background-position:0 0;mix-blend-mode:soft-light}
.sk-pg.cover::after{background:linear-gradient(90deg,rgba(20,8,6,.42),rgba(20,8,6,.12) 4%,rgba(255,255,255,.06) 7%,transparent 12%),linear-gradient(180deg,rgba(255,255,255,.1),transparent 10%,transparent 90%,rgba(0,0,0,.14));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset -2px 0 0 rgba(0,0,0,.12)}
.sk-pg.back::after{background:linear-gradient(270deg,rgba(20,8,6,.42),rgba(20,8,6,.12) 4%,rgba(255,255,255,.06) 7%,transparent 12%),linear-gradient(180deg,rgba(255,255,255,.1),transparent 10%,transparent 90%,rgba(0,0,0,.14));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 2px 0 0 rgba(0,0,0,.12)}
/* the label and the blind stamp sit on the weave, not under it */
.sk-label{position:absolute;z-index:7;left:21%;right:15%;top:15%;padding:1.1em 1em 1.2em;background:#F4EEE2;color:var(--sk-ink);text-align:center;
  box-shadow:0 0 0 .35em #F4EEE2,0 0 0 calc(.35em + 1px) rgba(36,32,28,.35),0 .3em .8em -.2em rgba(0,0,0,.45)}
.sk-label picture{width:58%;height:auto;margin:0 auto .5em;aspect-ratio:510 / 546}
.sk-label img{object-fit:contain;mix-blend-mode:multiply}
.sk-label-name{font:300 1.12em/1.1 var(--serif);margin:0}
.sk-label-t{font:italic 300 1.9em/1 var(--serif);color:#9A3A37;margin:.12em 0 0}
.sk-blind{position:absolute;z-index:7;left:0;right:0;bottom:9%;text-align:center;font:500 .62em/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(0,0,0,.36);
  text-shadow:0 1px 0 rgba(255,255,255,.2);margin:0}
.sk-pages .sk-label{position:static;width:62%;font-size:clamp(12px,1.4vw,16px)}
.sk-pages .sk-blind{position:static;color:rgba(255,255,255,.5)}

/* the ribbon: it hangs from the head of the spine and out under the foot */
.sk-ribbon{position:absolute;left:50%;top:calc(100% - 6px);width:max(9px,1.05%);height:max(46px,7.5%);transform-origin:50% 0;transform:translate3d(-30%,0,-1px) rotate(var(--rr,3deg));pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,rgba(255,255,255,.18) 55%,rgba(0,0,0,.14)),var(--sk-ribbon);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);transition:transform 1.4s var(--settle)}
.sk-ribbon.sway{animation:sk-sway 1.6s var(--paper-ease)}
@keyframes sk-sway{20%{transform:translate3d(-30%,0,-1px) rotate(calc(var(--rr,3deg) * -2.4))}55%{transform:translate3d(-30%,0,-1px) rotate(calc(var(--rr,3deg) * 1.6))}}

/* section tabs on the fore-edge: they cross to the left as the book passes them */
.sk-ftabs{position:absolute;inset:0;pointer-events:none;transform:translateZ(-2.5px)}
.sk-ftab{all:unset;position:absolute;box-sizing:border-box;height:9.2%;width:calc(var(--pw) * .052);display:grid;place-items:center;cursor:pointer;pointer-events:auto;
  background:var(--tab);color:rgba(36,32,28,.78);font:500 calc(var(--pw) * .0135)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  writing-mode:vertical-rl;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 5px rgba(var(--sk-shade),.18);
  transition:left .7s var(--paper-ease),right .7s var(--paper-ease),transform .5s var(--settle),filter .3s}
.sk-ftab.r{left:calc(100% - 2px);border-radius:0 3px 3px 0}
.sk-ftab.l{left:calc(var(--pw) * -.052 + 2px);border-radius:3px 0 0 3px;transform:rotate(180deg)}
.sk-ftab:hover{filter:brightness(1.06)}
/* hover only where a pointer can hover: on touch it sticks to the last tap */
@media (hover:hover){.sk-ftab.r:hover{transform:translateX(3px)}.sk-ftab.l:hover{transform:rotate(180deg) translateX(3px)}}
.sk-ftab:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
.sk-stage.is-pad .sk-ftabs{display:none}
.sk-stage.is-closed-back .sk-ftab.r,.sk-stage.is-closed-front .sk-ftab.l{visibility:hidden}

/* the focus ring hugs the book, and shows for the keyboard only: a click or a drag never lights it */
.sk-focus{position:absolute;top:-4px;bottom:-4px;border:2px solid var(--accent);border-radius:7px;opacity:0;pointer-events:none;transition:opacity .16s;transform:translateZ(1px)}
.sk-stage:focus-visible:not(.is-pointer) .sk-focus{opacity:1}

/* ---- under the book: where you are, and the sections ---- */
.sk-bar{align-items:center;justify-content:center;gap:var(--s5);margin-top:var(--s5)}
.sk-btn{all:unset;box-sizing:border-box;flex:none;width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--rule-2);border-radius:50%;cursor:pointer;color:var(--ink);
  transition:border-color .3s,background .3s,opacity .3s,transform .5s var(--settle)}
.sk-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sk-btn:hover{border-color:var(--accent);color:var(--accent)}
.sk-btn:active{transform:scale(.94)}
.sk-btn:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
.sk-btn[disabled]{opacity:.28;cursor:default;pointer-events:none}
.sk-where{display:grid;justify-items:center;gap:6px;min-width:min(30em,60vw);margin:0;text-align:center}
.sk-n{font-size:var(--t-label);letter-spacing:.08em;color:var(--accent)}
.sk-what{font:italic 300 var(--t-h3)/1.15 var(--serif);min-height:1.15em}
.sk-index{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:var(--s4)}
.sk-index button{all:unset;box-sizing:border-box;padding:7px 12px 6px;border-radius:999px;border:1px solid var(--rule);cursor:pointer;font:400 var(--t-label)/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  transition:border-color .3s,color .3s,background .3s}
.sk-index button:hover{border-color:var(--rule-2);color:var(--ink)}
.sk-index button[aria-current="true"]{border-color:var(--accent);color:var(--accent)}
.sk-index button:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
.sk-index button i{display:inline-block;width:.7em;height:.7em;border-radius:2px;background:var(--tab);margin-right:.6em;vertical-align:-.04em;font-style:normal}

@media (max-width:759px){
  .sk-bar{gap:var(--s3)}
  .sk-btn{width:46px;height:46px}
  .sk-where{min-width:0;flex:1}
  .sk-what{font-size:1.15rem}
  .sk-index{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .sk-index::-webkit-scrollbar{display:none}
  .sk-index button{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .sk-pres,.sk-ftab,.sk-ribbon{transition:none}
  .sk:not(.is-in) .sk-pres{opacity:1;transform:none}
  .sk-ribbon.sway,.sk-half.fade>.sk-pg{animation:none}
}