/* whimsy.css — the paint desk. '98 bones, our skin. Only content is shared. */

/* the whimsy desk exists on home; hidden unless the mode is on */
.wdesk{display:none}
html[data-mode="whimsy"] .wdesk{display:block;position:relative;z-index:2;max-width:min(96rem,calc(100vw - 2.5rem));margin:0 auto}
html[data-mode="whimsy"] body.has-whimsy .desk{padding:1.1rem 1rem .5rem}
html[data-mode="whimsy"] body.has-whimsy .bookwrap,
html[data-mode="whimsy"] body.has-whimsy .crumb,
html[data-mode="whimsy"] body.has-whimsy .tabs,
html[data-mode="whimsy"] body.has-whimsy .tab-home,
html[data-mode="whimsy"] body.has-whimsy .m,
html[data-mode="whimsy"] body.has-whimsy .sky{display:none!important}
html[data-mode="whimsy"] .mode button[aria-pressed="true"]{background:#111b36;color:#FFBF00}
html[data-mode="whimsy"] body.pg-home .bookwrap{visibility:hidden}

/* ---- the paint area: bevelled cream chrome ---- */
.wpaint{background:#F7EED9;border:1.5px solid var(--ink,#1D1615);border-radius:10px;overflow:hidden;
 box-shadow:6px 8px 0 rgba(31,9,84,.12);
 display:flex;flex-direction:column;
 height:calc(100dvh - 3.75rem - 7.1rem)}
.wmenu,.wbar{flex:none}
.wmain{display:grid;grid-template-columns:60px 1fr 230px;flex:1;min-height:0}
.wtools{padding:7px 6px;display:grid;grid-template-columns:1fr 1fr;gap:3px;align-content:start;overflow-y:auto;min-height:0}
.wtool{height:26px;background:linear-gradient(180deg,#fffdf6,#f0e6c9 55%,#e6d9b8);
 border:1px solid;border-color:#fffdf6 #b9ac8f #b9ac8f #fffdf6;border-radius:2px;
 box-shadow:1px 1px 0 rgba(29,22,21,.22),inset 0 1px 0 #fffdf6;
 display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;user-select:none}
.wtool.sel{background:linear-gradient(180deg,#e2d5b2,#efe4c8);
 border-color:#b9ac8f #fffdf6 #fffdf6 #b9ac8f;box-shadow:inset 1px 1px 2px rgba(29,22,21,.25)}
.wstage{position:relative;margin:7px 0 7px 2px;min-width:0;min-height:0}
.wcanvhold{height:100%;padding:7px;background:#E5D8B8;border:1px solid;border-color:#b9ac8f #fffdf6 #fffdf6 #b9ac8f;margin:0;position:relative}
/* the paper UNDER the drawing: crayon motifs on FRESH paper only — they
   vanish the moment drawing starts (Div's whimsy V1 spec); the white backing
   stays. Strokes and stickers ride on top */
.wghost{position:absolute;inset:7px;background:#fff;overflow:hidden;pointer-events:none}
.wghost span{position:absolute;opacity:.32}
.wghost svg{display:block}
/* ---- the window menu row: the site lives inside the program ---- */
.wmenu{display:flex;gap:3px;align-items:center;padding:6px 10px;border-bottom:1.5px solid #d8cdb2;
 background:linear-gradient(180deg,#FBF3E0,#F3E9CF)}
.wmitem{font-family:'Fraunces',Georgia,serif;font-size:.85rem;color:#1D1615;cursor:pointer;
 padding:3px 12px;background:transparent;border:1px solid transparent;border-radius:3px}
.wmitem:hover{background:#fffdf6;border-color:#fffdf6 #b9ac8f #b9ac8f #fffdf6}
.wmitem.on{background:#efe4c8;border-color:#b9ac8f #fffdf6 #fffdf6 #b9ac8f;box-shadow:inset 1px 1px 2px rgba(29,22,21,.2)}
.wback{margin-left:auto;font-family:'Satisfy',Georgia,serif;font-size:.85rem;color:#1D1615;cursor:pointer;
 background:#FFF9EE;border:1.5px solid #1D1615;border-radius:999px;padding:.15rem .8rem;
 box-shadow:2px 2px 0 rgba(29,22,21,.25)}
.wback:hover{background:#FFF3DC}
/* ---- the view: sections and pages open inside the canvas frame ---- */
.wview{position:absolute;inset:0;display:none;flex-direction:column;padding:7px;overflow:hidden;
 background:#E5D8B8;border:1px solid;border-color:#b9ac8f #fffdf6 #fffdf6 #b9ac8f}
.wvload{margin:auto;font-size:1.05rem}
.wsecview{display:flex;gap:18px;flex:1;min-height:0;background:#FFFDF7;border:1px solid #d8d3c4;
 padding:16px 18px;overflow:auto}
.wsectxt{flex:1;min-width:0}
.wsectxt h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.35rem;color:#1D1615;margin:0 0 .3rem}
.wsectxt p{font-size:.9rem;line-height:1.7;color:#3a352b;margin:0 0 .6rem}
.wsectxt p.whand{margin:0 0 .8rem}
.wcons{flex:1.1;position:relative;min-height:15rem}
.wconlines{position:absolute;inset:0;width:100%;height:100%}
.wconlines path{fill:none;stroke:rgba(26,36,33,.38);stroke-width:1.2;stroke-dasharray:3 5}
.wstar{position:absolute;display:flex;align-items:center;gap:7px;max-width:46%;
 background:none;border:0;padding:2px;cursor:pointer;text-align:left;
 font-family:'Fraunces',Georgia,serif;font-size:.85rem;color:#1D1615}
.wstar svg{flex:none;transition:transform .18s ease}
.wstar:hover svg,.wstar:focus-visible svg{transform:rotate(-9deg) scale(1.15)}
.wstar:hover span,.wstar:focus-visible span{color:#B72025;text-decoration:underline;text-underline-offset:3px}
.wstar.flip{transform:translateX(-100%);flex-direction:row-reverse;text-align:right}
.wpaperview{display:flex;flex-direction:column;flex:1;min-height:0;gap:5px}
.wviewhd{margin:0 2px}
.wpaper{position:relative;flex:1;min-height:0;background:#FFFDF7;border:1px solid #d8d3c4;
 box-shadow:2px 3px 0 rgba(29,22,21,.08);padding:16px 18px 46px;overflow:hidden}
.wpinner{height:100%;column-gap:32px;transition:transform .28s ease}
.wpnav{position:absolute;left:0;right:0;bottom:8px;display:flex;align-items:center;
 justify-content:space-between;padding:0 12px}
.wparr{width:32px;height:26px;font-size:16px;line-height:1;cursor:pointer;color:#1D1615;
 background:linear-gradient(180deg,#fffdf6,#eadfc2);border:1px solid;
 border-color:#fffdf6 #b9ac8f #b9ac8f #fffdf6;border-radius:2px;
 box-shadow:1px 1px 0 rgba(29,22,21,.22)}
.wparr[disabled]{opacity:.35;cursor:default}
.wpglbl{font-family:'Satisfy',Georgia,serif;font-size:.85rem;color:#6f6a5c}
/* tools sleep while reading */
.wdesk.reading .wtools,.wdesk.reading .wbar{opacity:.45;pointer-events:none}
.wdesk.reading .wtray,.wdesk.reading .wpeel,.wdesk.reading .whandtray{display:none}
.wcanvhold canvas{background:transparent;position:relative;z-index:1;display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.wintro{padding:12px 14px;display:flex;flex-direction:column;gap:9px;min-height:0;overflow-y:auto}
.wid{display:flex;flex-direction:column;gap:10px}
.whand{font-family:'Satisfy',Georgia,serif;font-size:.95rem;color:#6f6a5c;margin:0}
.windex{display:flex;flex-direction:column}
.wix{display:flex;align-items:baseline;gap:8px;background:none;border:0;cursor:pointer;text-align:left;
 border-bottom:1px solid rgba(29,22,21,.18);padding:.4rem .1rem}
.wix b{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:.95rem;color:#1D1615}
.wix small{margin-left:auto;font-size:.72rem;color:#6f6a5c}
.wix:hover b,.wix:focus-visible b{color:#B72025}
.wnote{background:#fff;border:1.5px solid #1D1615;padding:7px;transform:rotate(1.6deg);
 box-shadow:3px 3px 0 rgba(29,22,21,.15);position:relative}
.wnote::before{content:"";position:absolute;top:-9px;left:28%;width:56px;height:14px;
 background:rgba(135,174,115,.55);transform:rotate(-3deg)}
.wnote img{width:100%;display:block;border:1px solid #1D1615;max-height:11rem;object-fit:cover}
.wid p{font-family:'Fraunces',Georgia,serif;font-size:.8rem;line-height:1.55;color:#1D1615;margin:0}
.wbar{display:flex;align-items:center;gap:10px;padding:7px 12px;border-top:1px solid #d8cdb2}
.wfgbg{position:relative;width:30px;height:30px;flex:none}
.wfgbg i{position:absolute;width:19px;height:19px;border:1px solid;border-color:#b9ac8f #fffdf6 #fffdf6 #b9ac8f}
.wfgbg .fg{top:0;left:0;z-index:2}
.wfgbg .bg{bottom:0;right:0;background:#fff}
.wchips{display:grid;grid-template-columns:repeat(14,17px);grid-template-rows:17px 17px;gap:1px}
.wchip{border:1px solid;border-color:#b9ac8f #fffdf6 #fffdf6 #b9ac8f;cursor:pointer}
.wacts{margin-left:auto;display:flex;gap:7px;position:relative}
.wact{width:28px;height:26px;background:linear-gradient(180deg,#fffdf6,#eadfc2);
 border:1px solid;border-color:#fffdf6 #b9ac8f #b9ac8f #fffdf6;border-radius:2px;
 box-shadow:1px 1px 0 rgba(29,22,21,.22);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.wact svg{width:14px;height:14px}
.wtip{position:absolute;right:0;top:-30px;background:#1D1615;color:#FFF9EE;
 font-family:'Satisfy',Georgia,serif;font-size:.8rem;padding:2px 10px;border-radius:8px;white-space:nowrap;display:none;z-index:3}

/* ---- content typography inside the opened paper ---- */
.wview .wcontent h1,.wview .wcontent h2,.wview .wcontent h3{font-family:'Fraunces',Georgia,serif;color:#1D1615}
.wview .wcontent h1{font-size:1.3rem;margin:0 0 .6rem}
.wview .wcontent h2{font-size:1.02rem;margin:.9rem 0 .4rem}
.wview .wcontent p{font-size:.88rem;line-height:1.65;color:#3a352b;margin:0 0 .6rem;
 max-width:none!important}
.wview .wcontent img{max-width:100%;height:auto;border:1px solid #1D1615}
/* the about photo rides the right edge and the text WRAPS around it — no more
   half-empty page with the copy cut mid-sentence (Div, Jul 11) */
.wview .wcontent .photo{float:right;margin:0 0 14px 26px!important;
 transform:rotate(1.5deg)}
.wview .wcontent table,.wview .wcontent h2{clear:both}
.wview .wcontent table{font-size:.78rem}
.wview .wcontent .endmotif,.wview .wcontent .pagenav{display:none}
.wtray{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wtray .wstick{cursor:grab;display:inline-flex;touch-action:pan-x}
.wtray .wstick svg{width:auto;height:26px}
.wplaced{position:absolute;z-index:5;display:inline-flex;cursor:pointer}
.wplaced.dragging{pointer-events:none}
.wplaced:hover{filter:drop-shadow(0 0 4px rgba(183,32,37,.5))}
.wplaced svg{height:38px;width:auto}
.wpeel{font-family:'Satisfy',Georgia,serif;font-size:.85rem;margin-top:.75rem;padding:.3rem .9rem;
 background:#fff;border:1.5px solid #1D1615;border-radius:999px;cursor:pointer;color:#1D1615;
 box-shadow:2px 2px 0 rgba(29,22,21,.25)}
.wpeel:hover{background:#FFF3DC}
.wsizes{grid-column:1/-1;margin-top:6px;padding:4px 2px;border:1px solid;
 border-color:#b9ac8f #fffdf6 #fffdf6 #b9ac8f;display:flex;flex-direction:column;gap:3px;background:#F2E8CE}
.wsizeopt{height:14px;display:flex;align-items:center;padding:0 5px;cursor:pointer;border-radius:2px}
.wsizeopt i{display:block;width:100%;background:#1D1615;border-radius:2px}
.wsizeopt.sel{background:#111b36}
.wsizeopt.sel i{background:#FFBF00}
.wselbox{position:absolute;pointer-events:none;z-index:6;
 border:1.5px dashed #1D1615;background:rgba(159,192,255,.08);
 animation:wants 1s linear infinite}
@keyframes wants{0%{border-color:#1D1615}50%{border-color:#B72025}100%{border-color:#1D1615}}
.wtextinp{position:absolute;z-index:7;font-family:'Satisfy',Georgia,serif;font-size:1rem;
 background:rgba(255,255,255,.92);border:1.5px dashed #B72025;border-radius:4px;padding:2px 6px;
 outline:none;min-width:9rem}
.wclear{margin-right:8px}

/* whimsy corner motifs, empty spaces only */
.wcorner{position:absolute;pointer-events:none;opacity:.5}

/* mobile: a real paint app. canvas up top, one compact tool strip, palette,
   then a tight intro. the index list is gone (the menu row IS the index).
   sections and pages open as FULL-SCREEN sheets, not boxes inside scrolls. */
@media(max-width:940px),(max-height:520px) and (pointer:coarse){
 .wpaint{display:flex;flex-direction:column;height:auto}
 .wmenu{order:0;overflow-x:auto;flex:none}
 .wmitem{flex:none}
 .wback{flex:none}
 .wmain{display:contents}
 .wstage{margin:7px 7px 0;order:1}
 .wcanvhold{height:min(26rem,48vh)}
 .wtools{order:2;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:7px;align-items:center}
 .wtool{width:34px;height:30px;flex:none}
 .wsizes{display:flex;flex:none;flex-direction:row;gap:4px;padding:3px 4px;margin:0 0 0 4px}
 .wsizeopt{width:26px;height:18px;flex:none}
 .wbar{order:3;flex-wrap:wrap;row-gap:7px;padding:6px 10px}
 .wchips{order:1;flex:1 1 100%;grid-template-columns:repeat(14,minmax(12px,1fr));grid-template-rows:14px 14px;width:100%}
 .wfgbg{order:2}
 .wacts{order:3}
 .wintro{order:4;border-top:1px solid #d8cdb2;overflow:visible;padding:10px 12px}
 .wid{flex-direction:row;align-items:center;gap:10px}
 .wnote{width:96px;flex:none;transform:rotate(1deg)}
 .wnote img{max-height:none}
 .windex,.windexhand{display:none}
 .wtray{flex-wrap:nowrap;overflow-x:auto;gap:12px;padding-bottom:4px}
 .wtray .wstick svg{height:24px}
 /* reading = a full-screen sheet under the nav, one honest scroll.
    the menu row rides pinned above it, so every section (and home) stays
    one tap away while reading */
 .wdesk.reading .wcanvhold{display:none}
 .wdesk.reading .wmenu{position:fixed;top:3.75rem;left:0;right:0;z-index:72;
  border-bottom:1.5px solid #1D1615}
 .wdesk.reading .wview{position:fixed;top:calc(3.75rem + 2.55rem);left:0;right:0;bottom:0;
  z-index:70;height:auto;display:flex;padding:9px}
 body.wreading{overflow:hidden}
 html[data-mode="whimsy"] body.wreading .wtrailtog{display:none}
 .wsecview{flex-direction:column;overflow-y:auto}
 .wcons{min-height:17rem;flex:none}
 .wstar{max-width:72%}
 .wpaper{padding:12px 12px 46px}
 /* the way home floats top right, clear of the page-turn arrows */
 html[data-mode="whimsy"] .wdesk.reading .wback{position:fixed;right:10px;bottom:auto;
  top:calc(3.75rem + 2.55rem + 8px);z-index:75}
}
/* trail on/off, floats under the nav on the right, whimsy only */
.wtrailtog{display:none}
html[data-mode="whimsy"] .wtrailtog{display:inline-flex;position:fixed;right:14px;top:64px;z-index:55;
 font-family:'Satisfy',Georgia,serif;font-size:.85rem;color:#1D1615;background:#FFF9EE;
 border:1.5px solid #1D1615;border-radius:999px;padding:.2rem .8rem;cursor:pointer;
 box-shadow:2px 2px 0 rgba(29,22,21,.25);user-select:none}
.wtrailtog:hover{background:#FFF3DC}
/* the eraser shows its own footprint */
.wering{position:absolute;pointer-events:none;z-index:6;border:1.5px solid #1D1615;border-radius:50%;
 background:rgba(255,255,255,.65);display:none;transform:translate(-50%,-50%)}
/* the magnifier lens: a round window on a 2.2x page */
.wlens{position:fixed;width:180px;height:180px;border-radius:50%;overflow:hidden;z-index:80;
 pointer-events:none;display:none;background:#fff;border:3px solid #1D1615;
 box-shadow:4px 6px 0 rgba(31,9,84,.18),inset 0 0 0 2px #FFF9EE}
.wlenswrap{position:absolute;left:0;top:0;transform-origin:0 0}
/* hover name for tools */
.wtoolname{position:absolute;left:calc(100% + 6px);z-index:8;white-space:nowrap;display:none;
 font-family:'Satisfy',Georgia,serif;font-size:.85rem;background:#1D1615;color:#FFF9EE;
 padding:1px 9px;border-radius:8px}
.wtools{position:relative}
@media(max-width:940px),(max-height:520px) and (pointer:coarse){
 .wtoolname{left:auto;top:calc(100% + 4px)}
 html[data-mode="whimsy"] .wtrailtog{top:auto;bottom:12px;right:12px}
}

/* the paint controls are real buttons now: strip the browser suit, keep the bevels */
button.wtool,button.wchip,button.wsizeopt{appearance:none;-webkit-appearance:none;padding:0;font:inherit}
button.wtool{font-size:13px}
.wtool:focus-visible,.wchip:focus-visible,.wsizeopt:focus-visible,.wmitem:focus-visible,
.wix:focus-visible,.wstar:focus-visible,.wback:focus-visible,.wparr:focus-visible,
.wpeel:focus-visible,.wact:focus-visible,.wtrailtog:focus-visible{outline:2px dashed #B72025;outline-offset:2px}

/* views arrive with a breath, not a blink */
.wsecview,.wpaperview{animation:wvin .18s ease-out}
@keyframes wvin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}