:root{
  --u: clamp(15px, 1.34vw, 18.9px);
  --linen:#eae3d3;
  --paper:#fcf9f2; --paper2:#f1ebdd;
  --kraft:#c8a674;
  --graphite:#3e3b35; --soft:#7a756a; --faint:#a49d8f;
  --ink:#33537c;
  --red:#b5452c;
  --paperC:#fcf9f2; --ruleC:rgba(96,116,150,.15); --rule2C:rgba(96,116,150,.30);
  --inkC:#33537c; --jsize:21px; --jweight:400;
  --bgR1:linear-gradient(to right,var(--ruleC) 1px,transparent 1px);
  --bgR2:linear-gradient(to bottom,var(--ruleC) 1px,transparent 1px);
  --bgS1:var(--u) var(--u); --bgS2:var(--u) var(--u);
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Instrument Sans', 'Helvetica Neue', sans-serif;
  --hand:'La Belle Aurore', cursive;
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  --kraftfiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.14 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E");
  --speckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 8 -3.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23m)'/%3E%3C/svg%3E");
}
body[data-paper="white"]{--paperC:#fdfdfa; --ruleC:rgba(112,122,142,.13); --rule2C:rgba(112,122,142,.26)}
body[data-paper="kraft"]{--paperC:#eddcb4; --ruleC:rgba(124,94,44,.22); --rule2C:rgba(124,94,44,.36)}
body[data-ruling="ruled"]{--bgR1:linear-gradient(to bottom,var(--ruleC) 1px,transparent 1px); --bgR2:none; --bgS1:100% calc(var(--u)*2); --bgS2:0 0}
body[data-ruling="dots"]{--bgR1:radial-gradient(circle,var(--rule2C) 1.1px,transparent 1.5px); --bgR2:none; --bgS1:var(--u) var(--u); --bgS2:0 0}
body[data-ruling="plain"]{--bgR1:none; --bgR2:none; --bgS1:0 0; --bgS2:0 0}
body[data-ink="gall"]{--inkC:#4e463a}
body[data-ink="sepia"]{--inkC:#7c4a24}
body[data-ink="violet"]{--inkC:#4a3f7a}
body[data-ink="moss"]{--inkC:#3f5a34}
body[data-ink="rust"]{--inkC:#8a3d1e}
body[data-nib="fine"]{--jsize:19px}
body[data-nib="broad"]{--jsize:23px; --jweight:500}
body[data-nib="stub"]{--jsize:22px; --jweight:700}
/* three more papers. Each is a full --paperC/--ruleC/--rule2C set, so the ruled and dotted
   rulings inherit the tint the way the original three do. */
body[data-paper="rose"]{--paperC:#f8ece6; --ruleC:rgba(154,96,112,.14); --rule2C:rgba(154,96,112,.28)}
body[data-paper="sage"]{--paperC:#eef2e5; --ruleC:rgba(94,124,86,.15); --rule2C:rgba(94,124,86,.30)}
body[data-paper="slate"]{--paperC:#e9ecf0; --ruleC:rgba(78,94,116,.16); --rule2C:rgba(78,94,116,.32)}
/* isometric: one axis of the grid tilted to 60deg, so it reads as a drafting pad rather than
   a square grid. staves: four rules in a group with a wider gap between groups. */
body[data-ruling="isometric"]{--bgR1:linear-gradient(to bottom,var(--ruleC) 1px,transparent 1px);
  --bgR2:linear-gradient(60deg,var(--ruleC) 1px,transparent 1px);
  --bgS1:100% calc(var(--u)*1.732); --bgS2:calc(var(--u)*2) calc(var(--u)*3.464)}
body[data-ruling="staves"]{
  --bgR1:repeating-linear-gradient(to bottom,transparent 0 4px,var(--ruleC) 4px 5px,transparent 5px 7px,
    var(--ruleC) 7px 8px,transparent 8px 9px,var(--ruleC) 9px 10px,transparent 10px 11px,var(--ruleC) 11px 12px,
    transparent 12px calc(var(--u)*2.6));
  --bgR2:none; --bgS1:100% calc(var(--u)*2.6); --bgS2:0 0}
/* the margin rule — a fourth stationery dimension, drawn on the page itself so it sits under
   the writing and prints with it */
.page::before{content:''; position:absolute; top:calc(var(--u)*1.2); bottom:calc(var(--u)*1.2);
  left:calc(var(--u)*2.5); width:var(--marginW,0); pointer-events:none; background:var(--marginImg,transparent)}
body[data-margin="line"]{--marginW:1px; --marginImg:rgba(181,69,44,.32)}
body[data-margin="double"]{--marginW:5px;
  --marginImg:linear-gradient(to right,rgba(181,69,44,.30) 0 1px,transparent 1px 4px,rgba(181,69,44,.30) 4px 5px)}

*{box-sizing:border-box}
[hidden]{display:none!important}
h1,h2,p{margin:0}
button{font-family:inherit}
::selection{background:rgba(51,83,124,.16)}
:focus-visible{outline:1.5px dashed var(--inkC); outline-offset:2px}

html,body{min-height:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background-color:var(--linen);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,70,.045) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.40 0 0 0 0 0.30 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23b)'/%3E%3C/svg%3E");
  color:var(--graphite); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
body::after{content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 95% at 50% 38%, transparent 55%, rgba(90,70,40,.15))}
body:not([data-mode="book"]) main{display:none}
body:not([data-mode="library"]) #home{display:none}
body:not([data-mode="landing"]) #landing{display:none}
body:not([data-mode="book"]) #searchbtn, body:not([data-mode="book"]) #traybtn{display:none}
#shelfbtn{display:none}
body[data-mode="book"] #shelfbtn{display:inline-block}

.chrome{position:relative; z-index:20; width:min(1180px, 100%); margin:0 auto;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 10px 0; transition:opacity .65s ease}
.wm{background:none;border:0;cursor:pointer; font:600 13px var(--serif);
  letter-spacing:.34em; text-transform:uppercase; color:rgba(62,59,53,.55); padding:4px 2px; transition:color .25s}
.wm:hover{color:var(--graphite)}
.chrome-r{display:flex; gap:18px; align-items:baseline; flex-wrap:wrap}
.cbtn,#sndbtn{background:none;border:0;cursor:pointer; font:700 10.5px var(--sans);
  letter-spacing:.2em; text-transform:uppercase; color:rgba(62,59,53,.5); padding:4px 2px; transition:color .25s}
.cbtn:hover,#sndbtn:hover{color:var(--graphite)}
#chromedate{font:italic 13px var(--serif); color:rgba(62,59,53,.5)}
#sndbtn [data-state],.cbtn [data-state]{border-bottom:1px solid rgba(62,59,53,.35); padding-bottom:1px}
#flybtn.signed{color:var(--inkC)}
.livedot{display:inline-flex; align-items:center; gap:6px;
  font:700 9.5px var(--sans); letter-spacing:.2em; text-transform:uppercase; color:#5c7a52}
.livedot i{width:7px; height:7px; border-radius:50%; background:#5c7a52; animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

#landing{flex:1; width:100%; position:relative; z-index:5}
.landwrap{max-width:1080px; margin:0 auto; padding:clamp(30px,6vh,70px) 26px 80px}
.landgrid{display:flex; gap:60px; align-items:center; flex-wrap:wrap}
.landcopy{flex:1; min-width:300px}
.landkick{font:700 11px var(--sans); letter-spacing:.4em; text-transform:uppercase; color:var(--faint); margin-bottom:18px}
.landcopy h1{font:600 clamp(40px,6vw,64px)/1.08 var(--serif); color:var(--graphite); letter-spacing:-.01em}
.landcopy h1 em{font-style:italic; color:var(--ink)}
.landsub{font:italic 17px/1.7 var(--serif); color:var(--soft); margin:20px 0 30px; max-width:46ch}
.landbtns{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.landcta{display:inline-flex; align-items:center; gap:10px;
  background:var(--graphite); border:0; color:var(--paper);
  font:600 15px var(--serif); letter-spacing:.08em; padding:15px 28px; border-radius:3px;
  cursor:pointer; box-shadow:0 6px 16px rgba(60,48,30,.25); transition:.25s}
.landcta:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(60,48,30,.3)}
.landlink{background:none; border:0; cursor:pointer; font:600 14.5px var(--serif); color:var(--soft);
  border-bottom:1px solid rgba(62,59,53,.3); padding:2px; transition:color .2s}
.landlink:hover{color:var(--ink)}
.landcover{flex:none; transform:rotate(2.5deg)}
.landfeats{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:64px}
.lfeat{background:var(--paper); border-radius:4px; padding:24px 22px; box-shadow:0 4px 14px rgba(70,55,30,.1)}
.lfeat .fk{font:700 9.5px var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--red); margin-bottom:9px}
.lfeat h3{font:italic 600 19px var(--serif); color:var(--graphite); margin-bottom:8px}
.lfeat p{font:14px/1.7 var(--sans); color:#5b564c}
.landfoot{margin-top:64px; text-align:center; font:italic 13.5px/1.8 var(--serif); color:var(--faint)}

#home{flex:1; width:100%; position:relative; z-index:5; padding:30px 22px 90px}
.homewrap{max-width:1180px; margin:0 auto}
.homehead{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid rgba(62,59,53,.14)}
.homehead h1{font:600 36px/1.1 var(--serif); color:var(--graphite); letter-spacing:.01em}
.hsub{font:italic 15px/1.6 var(--serif); color:var(--soft); margin-top:6px; max-width:52ch}
.homekicker{font:700 10.5px var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.seclabel{font:700 10.5px var(--sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--faint); margin:38px 0 4px}
.seclabel .cnt{color:rgba(62,59,53,.35); letter-spacing:.14em}
.shelfgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:52px 38px; margin-top:26px}
.shelfgrid>*{animation:cardin .55s cubic-bezier(.3,.8,.3,1) both}
.shelfgrid>*:nth-child(1){animation-delay:.02s}.shelfgrid>*:nth-child(2){animation-delay:.07s}
.shelfgrid>*:nth-child(3){animation-delay:.12s}.shelfgrid>*:nth-child(4){animation-delay:.17s}
.shelfgrid>*:nth-child(n+5){animation-delay:.22s}
@keyframes cardin{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.ncard{cursor:pointer; text-align:center; background:none; border:0; padding:0; position:relative}
.ncard .cov{display:inline-block; transition:transform .25s; filter:drop-shadow(0 12px 20px rgba(70,55,30,.24))}
.ncard:hover .cov{transform:translateY(-7px) rotate(-.7deg)}
.ncard .yours{position:absolute; top:-11px; right:calc(50% - 118px); z-index:6; pointer-events:none;
  transform:rotate(6deg); font:700 9px var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:#faf1e2; background:var(--red); padding:5px 10px; border-radius:2px; box-shadow:0 2px 6px rgba(60,30,10,.35)}
.ncard .nname{font:600 19px var(--serif); color:var(--graphite); margin-top:16px}
.ncard .nhandle{font:700 10px var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:4px}
.ncard .nmotto{font:italic 13.5px/1.55 var(--serif); color:var(--soft); margin:7px auto 0; max-width:30ch; min-height:21px}
.ncard .nmeta{font:500 11px var(--sans); letter-spacing:.06em; color:var(--faint); margin-top:7px}
.ncard .npeek{font:italic 12.5px/1.5 var(--serif); color:#6d675a; margin-top:8px; padding:7px 10px;
  background:rgba(230,220,194,.55); border-radius:2px; display:inline-block; max-width:26ch}
.ncardmine{display:flex; flex-direction:column; align-items:center}
.ncardmine .tools{display:flex; gap:14px; margin-top:8px}
.ghostcard{width:225px; height:300px; border-radius:4px;
  background:linear-gradient(100deg, rgba(62,59,53,.06) 40%, rgba(62,59,53,.13) 50%, rgba(62,59,53,.06) 60%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-80% 0}}
.ghostline{width:70%; height:12px; margin:14px auto 0; border-radius:6px;
  background:linear-gradient(100deg, rgba(62,59,53,.06) 40%, rgba(62,59,53,.13) 50%, rgba(62,59,53,.06) 60%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite}
.ghostwrap{display:flex; flex-direction:column; align-items:center}
.homeempty{font:italic 15px var(--serif); color:var(--faint); margin-top:22px}
.homefoot{margin-top:70px; text-align:center; font:italic 13px/1.8 var(--serif); color:var(--faint)}
.loansrow{display:flex; gap:34px; flex-wrap:wrap; margin-top:22px}
.loancard{cursor:pointer; background:none; border:0; text-align:center; padding:0}
.loancard .cov{display:inline-block; transition:transform .2s; filter:drop-shadow(0 8px 14px rgba(70,55,30,.2))}
.loancard:hover .cov{transform:translateY(-4px)}
.loancard .lname{font:600 14.5px var(--serif); color:var(--graphite); margin-top:10px}
.loancard .ldue{font:italic 11.5px var(--serif); color:var(--soft); margin-top:2px}
.slips{margin-top:26px; display:flex; flex-direction:column; gap:12px}
.slip{background:#f8f3e6; border-radius:2px; padding:14px 17px; position:relative; max-width:640px;
  box-shadow:0 3px 9px rgba(60,45,25,.16), inset 0 0 0 1px rgba(62,59,53,.07);
  background-image:repeating-linear-gradient(to bottom, transparent 0 24px, rgba(96,116,150,.2) 24px 25px)}
.slip .who{font:italic 600 15.5px var(--serif); color:var(--graphite)}
.slip .snote{font:italic 13px/1.5 var(--serif); color:var(--soft); margin:3px 0 9px}
.sliprow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.slip select{background:var(--paper); border:1px solid var(--rule2C); border-radius:3px;
  font:500 11.5px var(--sans); color:var(--graphite); padding:4px 6px}
.pendlist{margin-top:14px; display:flex; flex-direction:column; gap:6px; max-width:640px}
.pendrow{display:flex; align-items:baseline; gap:10px; font:italic 14px var(--serif); color:var(--soft);
  border-bottom:1px dotted rgba(62,59,53,.16); padding:7px 2px}
.pendrow b{font:600 15px var(--serif); color:var(--graphite); font-style:normal}
.bib{font:italic 13.5px/1.7 var(--serif); color:var(--soft); margin:4px 0 10px}
.rcard{background:#f8f3e6; border-radius:3px; padding:16px; box-shadow:0 4px 12px rgba(60,45,25,.16);
  background-image:repeating-linear-gradient(to bottom, transparent 0 25px, rgba(96,116,150,.2) 25px 26px)}
.rcard .rline{display:flex; align-items:baseline; gap:8px; margin-bottom:10px}
.rcard .rline span{font:italic 600 13px var(--serif); color:#8d8778; white-space:nowrap}
.rcard .rline input{flex:1; background:transparent; border:0; outline:0; border-bottom:1px solid rgba(62,59,53,.3);
  font:italic 400 15px var(--serif); color:var(--graphite); padding:2px}
.borrowslip{border:1.5px dashed rgba(62,59,53,.4); border-radius:4px; padding:10px 14px;
  display:inline-block; transform:rotate(-2deg); margin-bottom:12px}
.borrowslip b{font:700 10px var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--soft); display:block}
.borrowslip i{font:italic 14px var(--serif); color:var(--graphite)}
.carerow{display:flex; flex-direction:column; gap:12px; margin-top:14px; align-items:flex-start}

.studioPrev{display:grid; place-items:center; padding:10px 0 6px}
/* A patched layer is animated on its own group, so the origin has to be that group's box rather
   than the SVG's. Without this every layer would scale about the top-left of the viewBox, and a
   stamp would fly in from off the cover instead of being pressed onto it. */
#studioPrev svg [data-l]{transform-box:fill-box; transform-origin:center}
#studioPrev svg [data-l="foil"]{transform-origin:0% 50%}
#studioPrev svg [data-l="tape"]{transform-origin:0% 50%}
#studioPrev svg [data-l="flower"]{transform-origin:50% 100%}
#studioPrev svg [data-l="handle"]{transform-origin:50% 100%}
/* Two real columns: the cover on the left, everything you can change on the right.
   `.studiocol` used to be a wrapping flex row with no flex bases, and the left column's
   paragraph has an unbounded max-content width — so the two "columns" wrapped and stacked, and
   the whole studio read as one long page. The explicit bases are what make it two columns. */
.studiocol{display:flex; gap:clamp(24px,4vw,56px); margin-top:24px; align-items:flex-start}
.studiocol>.studioleft{flex:0 0 auto; width:min(300px,100%)}
.studiocol>.studioright{flex:1 1 420px; min-width:0}
@media (max-width:860px){
  .studiocol{flex-direction:column}
  .studiocol>.studioleft{width:100%}
  .studiocol>.studioright{flex:1 1 auto; width:100%}
}
/* one labelled row per field. The inputs are inline-block by default; with `width:100%` and a
   460px max-width, four of them fitted two-to-a-line on a wide screen. */
.studiofield{display:flex; align-items:baseline; gap:14px; max-width:560px; padding:7px 0;
  border-bottom:1px dashed rgba(62,59,53,.3); margin-bottom:12px}
.studiofield>span{flex:0 0 124px; font:700 10px var(--sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--soft)}
.studioinput{display:block; flex:1; min-width:0; width:auto; max-width:none; background:transparent;
  border:0; outline:0; font:italic 600 17px var(--serif); color:var(--graphite); padding:2px 0; margin:0}
.studioinput::placeholder{color:var(--faint)}
/* at phone width a 124px label column leaves the input too little room, so the label goes above */
@media (max-width:520px){
  .studiofield{display:block}
  .studiofield>span{display:block; margin-bottom:3px}
}
.shopwrap{margin-top:22px; border-top:1px solid rgba(62,59,53,.18); padding-top:12px}
.shophead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:2px}
.shophead .kicker{margin-bottom:0}
.shopnote{font:italic 12.5px var(--serif); color:var(--faint)}
.shopscroll{max-height:min(560px,62vh); overflow-y:auto; padding-right:6px}
.shopgrp{margin-top:16px}
.shopgrp:first-child{margin-top:6px}
.shopgrp .kicker{margin-bottom:4px}
.shoprow{display:flex; align-items:center; gap:10px; padding:6px 2px; border-bottom:1px dotted rgba(62,59,53,.14)}
.shopname{font:400 14px var(--sans); color:var(--graphite); flex:1}
.shopprice{font:italic 12.5px var(--serif); color:var(--faint); white-space:nowrap}
.shopbtn{font:italic 500 12.5px var(--serif); background:none; border:1px dotted rgba(62,59,53,.3);
  border-radius:12px; padding:3px 12px; cursor:pointer; color:var(--soft); white-space:nowrap; transition:.2s}
.shopbtn:hover{color:var(--inkC); border-color:var(--inkC)}
.shopbtn.on{background:var(--inkC); color:var(--paper); border:1px solid var(--inkC)}
.shopbtn:disabled{opacity:.45; cursor:not-allowed}
/* A purchase flips the row's label from `buy` to `equip` on a node that is being re-used, not
   replaced — so the flip has to be drawn on the button itself. Deliberately no overshoot: it
   settles the way a stamp does, it does not bounce. The background change comes free from the
   existing transition on .shopbtn. */
.shopbtn.justflipped{animation:btnflip .38s cubic-bezier(.2,.85,.3,1)}
@keyframes btnflip{from{transform:scale(.88); opacity:.25}to{transform:scale(1); opacity:1}}
.swatch{width:18px; height:18px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(62,59,53,.2)}

main{flex:1; display:flex; flex-direction:column; align-items:center;
  padding:clamp(12px,2.4vh,24px) 16px 46px; position:relative; z-index:5}
.bookwrap{position:relative; margin-top:calc(var(--u)*1.2); perspective:2400px;
  opacity:0; transform:translateY(12px) scale(.988);
  transition:opacity .55s ease, transform .6s cubic-bezier(.3,.7,.3,1)}
.bookwrap.revealed{opacity:1; transform:none}
.book{position:relative; display:flex;
  height:min(calc(var(--u)*35), calc(100vh - 150px)); min-height:540px}
.page{width:calc(var(--u)*30); display:flex; position:relative;
  background-color:var(--paperC);
  background-image:var(--bgR1), var(--bgR2), var(--fiber);
  background-size:var(--bgS1), var(--bgS2), 260px 260px;
  background-position:-1px -1px, 0 0, 0 0}
.page.left{border-radius:4px 1px 1px 4px;
  box-shadow: inset -20px 0 24px -18px rgba(70,58,38,.35), inset 1px 0 0 rgba(255,255,255,.7),
   -2px 8px 20px -6px rgba(70,55,30,.16), -2px 30px 60px -18px rgba(70,55,30,.30)}
.page.right{border-radius:1px 4px 4px 1px;
  box-shadow: inset 20px 0 24px -18px rgba(70,58,38,.35), inset -1px 0 0 rgba(255,255,255,.7),
   2px 8px 20px -6px rgba(70,55,30,.16), 2px 30px 60px -18px rgba(70,55,30,.30)}
.page.right::after{content:''; position:absolute; top:8px; bottom:8px; right:-6px; width:6px; z-index:-1;
  border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.85) 0 1.5px, rgba(150,135,105,.4) 1.5px 3px)}
.pad{position:relative; flex:1; display:flex; flex-direction:column; min-width:0; min-height:0;
  padding:calc(var(--u)*1.9) calc(var(--u)*2.9)}
.padj{position:relative}
.scrolly{overflow-y:auto}

.tabs{position:absolute; top:calc(var(--u)*4); right:-26px; z-index:9;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end; transition:opacity .65s ease}
.tab{width:36px; min-height:100px; border:0; cursor:pointer; position:relative; overflow:hidden;
  border-radius:3px 2px 2px 3px; transform:rotate(var(--tr,0deg));
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s, box-shadow .3s; box-shadow:0 2px 5px rgba(60,48,30,.22)}
.tab:hover{transform:rotate(var(--tr,0deg)) translateX(-4px)}
.tab.active{transform:rotate(var(--tr,0deg)) translateX(-8px); box-shadow:0 3px 9px rgba(60,48,30,.3)}
.tab .tlabel{display:block; transform:rotate(90deg); white-space:nowrap;
  font:700 10px var(--sans); letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:rgba(45,40,32,.68); user-select:none}
.tab.ttoday{background:var(--red)} .tab.ttoday .tlabel{color:#faf1e2}
.tab.tweek{background:#9fb08f}.tab.tindex{background:#c9b087}.tab.treview{background:#93a8b6}
.readingTag{position:absolute; right:-26px; top:calc(var(--u)*1); z-index:9;
  background:#e6dcc2; padding:7px 12px; transform:rotate(1deg); box-shadow:0 2px 5px rgba(60,48,30,.18);
  font:italic 600 11px var(--serif); color:#5b564c; max-width:150px; text-align:right}

#flip{position:absolute; top:0; width:50%; height:100%; z-index:8; display:none;
  transform-style:preserve-3d; pointer-events:none}
#flip .face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background-color:var(--paperC);
  background-image:var(--bgR1), var(--bgR2), var(--fiber);
  background-size:var(--bgS1), var(--bgS2), 260px 260px;
  box-shadow:0 10px 30px rgba(60,45,25,.35)}
#flip .face.front{border-radius:1px 4px 4px 1px}
#flip .face.back{transform:rotateY(180deg); background-color:var(--paper2); border-radius:4px 1px 1px 4px}

.kicker{font:700 10.5px var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--soft); margin-bottom:6px}
.dateline{font:600 calc(var(--u)*1.55)/1.15 var(--serif); letter-spacing:.01em; color:var(--graphite)}
.dateline .yr{font:italic 400 .55em var(--serif); color:var(--faint); letter-spacing:.05em}
.dayhead{display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  padding-bottom:calc(var(--u)*0.9); margin-bottom:calc(var(--u)*0.3)}
.daynav{display:flex; align-items:center; gap:2px}
.dnav{background:none;border:0;cursor:pointer; font:400 22px/1 var(--serif); color:var(--faint); padding:2px 7px}
.dnav:hover{color:var(--graphite)}
.totoday{background:none;border:0;cursor:pointer; font:500 11.5px var(--sans); color:var(--inkC);
  letter-spacing:.04em; border-bottom:1px dotted rgba(51,83,124,.5); padding:2px; margin-left:8px}
.linky{background:none;border:0;cursor:pointer; font:600 13.5px var(--serif); letter-spacing:.04em;
  color:var(--soft); display:inline-flex; gap:7px; align-items:center; padding:5px 2px;
  border-bottom:1px solid transparent; transition:.25s}
.linky:hover{color:var(--graphite); border-bottom-color:rgba(62,59,53,.4)}
.linky.danger:hover{color:var(--red); border-bottom-color:rgba(181,69,44,.4)}
.linky svg{flex:none}
.tempty{font:italic 15px var(--serif); color:var(--faint); padding:calc(var(--u)*1.2) 2px}
.taskscroll,.qscroll,.idxlist,.dscroll,#jrnl,.bkscroll{scrollbar-width:thin; scrollbar-color:rgba(90,85,72,.25) transparent}
.taskscroll::-webkit-scrollbar,.qscroll::-webkit-scrollbar,.idxlist::-webkit-scrollbar,.dscroll::-webkit-scrollbar,.bkscroll::-webkit-scrollbar{width:8px}
.taskscroll::-webkit-scrollbar-thumb,.qscroll::-webkit-scrollbar-thumb,.idxlist::-webkit-scrollbar-thumb,.dscroll::-webkit-scrollbar-thumb,.bkscroll::-webkit-scrollbar-thumb{background:rgba(90,85,72,.22); border-radius:4px}

.tasklist{margin:calc(var(--u)*0.4) 0 calc(var(--u)*0.4) calc(var(--u)*2.7);
  border-left:1px solid var(--rule2C); padding-left:calc(var(--u)*0.8)}
.task{position:relative; display:flex; align-items:center; min-height:calc(var(--u)*2)}
.flagbox{position:absolute; left:calc(var(--u)*-2.7 + 8px); top:50%; transform:translateY(-50%);
  background:none;border:0;padding:2px;cursor:pointer; color:#8d8778; line-height:0; transition:color .2s}
.task:hover .flagbox{color:var(--graphite)}
.flagbox .flag{display:block}
.task .txt{position:relative; display:inline-block; font:400 15.5px/1.5 var(--sans);
  color:var(--graphite); letter-spacing:.1px; padding:2px 4px 2px 2px; max-width:100%}
.task.done .txt{color:rgba(62,59,53,.48)}
.task.heavy .txt{text-decoration:underline wavy rgba(62,59,53,.32); text-decoration-thickness:1px; text-underline-offset:5px}
.carryarrow{margin-right:7px; flex:none}
.carrynote{font:italic 11px var(--serif); color:var(--faint); margin-left:9px; white-space:nowrap}
.erase{margin-left:auto; opacity:0; background:none;border:0;cursor:pointer;
  color:#a49d8f; padding:4px; line-height:0; transition:opacity .2s, color .2s}
.task:hover .erase{opacity:.55} .erase:hover{color:var(--red)}
.strike{position:absolute; overflow:visible; pointer-events:none; z-index:2}
.ch{opacity:0; filter:blur(2.5px); transition:opacity .18s linear, filter .24s ease-out}
.inkon .ch{opacity:1; filter:blur(0)}
.taskfoot{margin-top:calc(var(--u)*0.4)}
#addtask input{width:100%; background:transparent; border:0; outline:0;
  border-bottom:1px dashed rgba(96,116,150,.35);
  font:400 15.5px var(--sans); color:var(--graphite); height:calc(var(--u)*2); padding:0 2px}
#addtask input::placeholder{color:rgba(90,85,72,.42)}
.footrow{display:flex; justify-content:space-between; align-items:center; margin-top:calc(var(--u)*0.6); gap:12px}
.footleft{display:flex; align-items:center; gap:16px; min-width:0}
#count{font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}

.notesrow{display:flex; gap:14px; flex-wrap:wrap; margin:2px 0 4px}
.snote{position:relative; width:116px; height:116px; border-radius:1px; flex:none;
  box-shadow:0 4px 10px rgba(60,45,25,.22), inset 0 0 0 1px rgba(62,59,53,.07);
  transform:rotate(var(--nr,0deg)); transition:transform .2s}
.snote:hover{transform:rotate(var(--nr,0deg)) translateY(-2px)}
.snote textarea{position:absolute; inset:14px 8px 8px; width:calc(100% - 16px); height:calc(100% - 22px);
  background:transparent; border:0; outline:0; resize:none;
  font:400 12.5px/1.45 var(--sans); color:#4a463e}
.snote .nclip{position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-4deg); z-index:2;
  filter:drop-shadow(0 1px 1px rgba(80,50,10,.3))}
.snote .ndel{position:absolute; top:2px; right:2px; opacity:0; background:none;border:0;cursor:pointer;
  color:rgba(74,70,62,.55); line-height:0; padding:3px; transition:opacity .15s}
.snote:hover .ndel{opacity:.7} .ndel:hover{color:var(--red)}

.linewrap{margin:4px 0 10px; padding:4px 0 10px; border-bottom:1px solid var(--rule2C);
  min-height:36px; display:flex; align-items:center; gap:10px}
.linewrap .flagbox{position:static; transform:none; color:#8d8778}
.linelink{background:none;border:0;cursor:pointer; font:italic 400 15px var(--serif);
  color:var(--faint); padding:2px; transition:color .2s; text-align:left}
.linelink:hover{color:var(--inkC)}
.lineinput{flex:1; background:transparent; border:0; outline:0;
  border-bottom:1px dashed rgba(62,59,53,.35);
  font:italic 600 19px var(--serif); color:var(--graphite); padding:2px}
.linetext{position:relative; display:inline-block; font:italic 600 19px/1.4 var(--serif);
  color:var(--graphite); cursor:text; flex:1}
.linewrap.isdone .linetext{color:rgba(62,59,53,.45)}
.linerem{opacity:0; background:none;border:0;cursor:pointer; color:#a49d8f; line-height:0; padding:3px; transition:opacity .15s}
.linewrap:hover .linerem{opacity:.6} .linerem:hover{color:var(--red)}

.ritsub{font:italic 14.5px var(--serif); color:var(--soft); margin:2px 0 8px}
.ritlist{flex:1; min-height:0; overflow-y:auto; padding-right:6px}
.ritrow{display:flex; flex-direction:column; gap:7px; padding:13px 2px; border-bottom:1px dotted rgba(62,59,53,.16)}
.rtxt{font:400 15.5px/1.5 var(--sans); position:relative; display:inline-block}
.rbtns{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.rbtn{font:italic 500 13px var(--serif); color:var(--soft); background:none;
  border:1px dotted rgba(62,59,53,.3); border-radius:12px; padding:3px 12px; cursor:pointer; transition:.2s}
.rbtn:hover{color:var(--inkC); border-color:var(--inkC)}
.rbtn.sel{background:var(--graphite); color:var(--paper); border-color:var(--graphite)}
.rarrow{opacity:0; transition:opacity .4s} .rarrow.on{opacity:1}
.ritfoot{display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:10px; flex-wrap:wrap}
.padj.dimrit{opacity:.55; filter:saturate(.85); transition:opacity .4s}

.jhead{display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:calc(var(--u)*0.5); transition:opacity .65s; gap:10px}
.jbtns{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.jdate{font:italic 14px var(--serif); color:var(--soft)}
.ghostbtn{display:inline-flex; align-items:center; gap:7px; background:none;
  border:1px solid rgba(62,59,53,.22); color:var(--soft); font:600 11.5px var(--sans);
  letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:2px;
  cursor:pointer; transition:.25s}
.ghostbtn:hover{color:var(--inkC); border-color:rgba(51,83,124,.45)}
.ghostbtn:disabled{opacity:.5; cursor:wait}
.jbody{flex:1; min-height:0; position:relative; display:flex}
#jrnl{flex:1; background:transparent; border:0; outline:0; resize:none;
  font:var(--jweight) var(--jsize)/2 var(--hand); letter-spacing:.4px; color:var(--inkC);
  padding:calc(var(--u)*0.5) 2px; overflow-y:auto; caret-color:var(--inkC)}
body.focus #jrnl{caret-color:transparent}
#jrnl::placeholder{color:rgba(51,83,124,.32)}
.jmirror{position:absolute; top:0; left:0; visibility:hidden; pointer-events:none; z-index:-1;
  white-space:pre-wrap; word-wrap:break-word; box-sizing:border-box;
  font-family:var(--hand); color:transparent}
.nibcaret{position:absolute; top:0; left:0; width:19px; height:44px; opacity:0;
  pointer-events:none; z-index:3; transition:opacity .25s;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)); will-change:transform}
.nibcaret.on{opacity:1}
body.focus .nibcaret.on{animation:blink 1.15s infinite}
body.focus .nibcaret.on.typing{animation:none}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.jfoot{display:flex; justify-content:space-between; align-items:center; padding-top:calc(var(--u)*0.5);
  font:700 10px var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); transition:opacity .65s; gap:10px}
.fhint{opacity:0; transition:opacity .5s}
#jstatus{white-space:nowrap; transition:color .3s; cursor:pointer}
#jstatus[data-state="saving"]{color:var(--soft)}
#jstatus[data-state="saved"]{color:rgba(90,110,80,.85)}
#jstatus[data-state="local"]{color:var(--faint)}
#jstatus[data-state="error"]{color:var(--red)}
body.focus .page.left{opacity:.06; filter:blur(3px) grayscale(.6); pointer-events:none}
body.focus .tabs{opacity:.08; pointer-events:none}
body.focus .chrome{opacity:.35}
body.focus .jhead, body.focus .jfoot{opacity:.3}
body.focus .fhint{opacity:.6}
body.focus .incense{opacity:.9}
body.focus .page.right{box-shadow: inset 16px 0 22px -16px rgba(70,58,38,.35),
  inset -2px 0 8px -4px rgba(70,58,38,.12), 0 34px 80px -28px rgba(60,48,30,.55)}

.incense{position:absolute; top:70px; right:8px; width:56px; text-align:center; cursor:pointer; z-index:5; transition:opacity .4s}
.incense svg{overflow:visible}
.istick{stroke:#7b6247; stroke-width:3; stroke-linecap:round}
.iember{fill:#c96a2f; animation:ember 2.4s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:.6}50%{opacity:1}}
.ismoke path{fill:none; stroke:rgba(96,90,80,.45); stroke-width:1.4; stroke-linecap:round;
  transform-box:fill-box; transform-origin:50% 100%}
.ismoke .s1{animation:sway 4.2s ease-in-out infinite alternate}
.ismoke .s2{opacity:.65; animation:sway 3.4s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.idish{stroke:#8d8778; stroke-width:1.6; fill:none; stroke-linecap:round}
.incmin{font:italic 11px var(--serif); color:var(--faint); margin-top:2px; min-height:15px}

.weekpad{overflow:visible}
.weeknote{font:italic 14px var(--serif); color:var(--soft); padding-top:6px}
.wgrid{flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); margin-top:calc(var(--u)*0.6)}
.wgrid.r{grid-template-columns:repeat(3,1fr)}
.daycol{position:relative; display:flex; flex-direction:column; cursor:pointer; min-height:0;
  padding:calc(var(--u)*1.1) calc(var(--u)*0.7) calc(var(--u)*0.4); transition:background .2s}
.daycol+.daycol{border-left:1px solid var(--ruleC)}
.daycol:hover{background:rgba(255,252,244,.55)}
.dtab{position:absolute; top:calc(var(--u)*-1.05); left:calc(var(--u)*0.35);
  width:24px; height:34px; border-radius:2px; transform:rotate(var(--tr,0deg));
  opacity:.92; box-shadow:0 1px 3px rgba(60,48,30,.18); z-index:2;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px}
.dtab span{font:700 10px var(--sans); color:rgba(55,48,36,.6)}
.dtab.red{background:var(--red)!important; opacity:1} .dtab.red span{color:#fbf3e6}
.w1{background:#adb99e}.w2{background:#dbc79c}.w3{background:#a4b6c3}.w4{background:#cfae9e}
.w5{background:#b9c0a4}.w6{background:#c6b9a4}.w7{background:#b4ab97}
.dname{font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--soft); margin-bottom:calc(var(--u)*0.55); display:flex; align-items:center; gap:6px}
.daycol.is-today .dname{color:var(--graphite)}
.wstamp{display:inline-flex; color:var(--inkC); -webkit-mask-image:var(--speckle); mask-image:var(--speckle);
  -webkit-mask-size:130px; mask-size:130px; mix-blend-mode:multiply; opacity:.85}
.dscroll{flex:1; min-height:0; overflow-y:auto; padding-right:2px}
.wtask{position:relative; display:inline-block; font:400 16px/1.45 var(--hand);
  letter-spacing:.3px; color:#41556e; padding:1px 3px 7px 1px}
.daycol.past .wtask{color:rgba(65,85,110,.55)}
.wtask.done{color:rgba(65,85,110,.45)}
.wempty{font:italic 13px var(--serif); color:var(--faint)}
.pline{border-bottom:1.5px dashed rgba(96,116,150,.28); margin:calc(var(--u)*0.85) 4px; transform:rotate(-.4deg)}

.idxlist{margin-top:calc(var(--u)*0.8); flex:1; min-height:0; overflow-y:auto; padding-right:6px}
.idxrow{display:flex; align-items:baseline; gap:10px; padding:calc(var(--u)*0.62) 6px;
  cursor:pointer; border-radius:2px; transition:background .15s}
.idxrow:hover{background:rgba(255,252,244,.75)}
.idxrow:hover .idxdate{color:var(--inkC)}
.idxrow.active{background:rgba(51,83,124,.06)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--red); align-self:center; flex:none}
.idxno{font:italic 12px var(--serif); color:var(--faint); width:20px; flex:none}
.idxdate{font:600 16.5px var(--serif); color:var(--graphite); transition:color .15s}
.idxv{font:italic 12.5px var(--serif); color:var(--faint)}
.leader{flex:1; min-width:20px; border-bottom:2px dotted rgba(96,90,76,.28); transform:translateY(-4px)}
.idxmeta{font:500 11.5px var(--sans); letter-spacing:.06em; color:var(--soft); white-space:nowrap}
.idxpage{font:italic 13px var(--serif); color:var(--faint); width:46px; text-align:right; flex:none}
.idxempty{font:italic 16px var(--serif); color:var(--faint); padding:calc(var(--u)*2) 2px}
.ghostrow{display:flex; align-items:center; gap:10px; padding:calc(var(--u)*0.62) 6px}
.ghostrow i{display:block; height:14px; border-radius:7px;
  background:linear-gradient(100deg, rgba(62,59,53,.06) 40%, rgba(62,59,53,.13) 50%, rgba(62,59,53,.06) 60%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite}
.colo{margin-top:calc(var(--u)*1); max-width:42ch; display:flex; flex-direction:column;
  gap:calc(var(--u)*0.9); flex:1}
.colo p{font:15px/1.75 var(--sans); color:#5b564c}
.colo em{font:italic 1em var(--serif)}
.colorow{display:flex; gap:20px; flex-wrap:wrap}
.colofine{font:italic 13px var(--serif); color:var(--faint); margin-top:auto}
.confirm{font:italic 14px var(--serif); color:#5b564c}
.confirm .linky{font-size:13px}
.sep{color:var(--faint)}

.stampwrap{position:relative; display:inline-flex; align-items:center}
.dstamp{background:none; border:0; padding:2px; cursor:pointer; color:var(--inkC); line-height:0;
  -webkit-mask-image:var(--speckle); mask-image:var(--speckle); -webkit-mask-size:150px; mask-size:150px;
  mix-blend-mode:multiply; filter:url(#rough); transform:rotate(var(--rot,0deg)); opacity:.85; transition:opacity .2s}
.dstamp:hover{opacity:1}
.stampslot{width:40px; height:40px; border-radius:50%; border:1.5px dashed rgba(62,59,53,.3);
  background:none; cursor:pointer; color:rgba(62,59,53,.32); display:grid; place-items:center; transition:.2s}
.stampslot:hover{border-color:var(--inkC); color:var(--inkC)}
.stampop{position:absolute; top:calc(100% + 8px); right:0; z-index:40; background:var(--paper);
  border:1px solid var(--rule2C); border-radius:4px; box-shadow:0 10px 26px rgba(60,45,25,.22);
  padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.orow{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.olabel{font:700 9px var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); width:100%}
.wbtn{width:30px; height:30px; border:1px solid transparent; border-radius:4px; background:none;
  cursor:pointer; color:var(--soft); display:grid; place-items:center}
.wbtn:hover{border-color:var(--rule2C); color:var(--inkC)}
.wbtn.sel{border-color:var(--inkC); color:var(--inkC); background:rgba(51,83,124,.07)}
.vbtn{font:italic 600 12.5px var(--serif); color:var(--soft); background:none;
  border:1px dotted rgba(62,59,53,.3); border-radius:10px; padding:2px 9px; cursor:pointer}
.vbtn:hover{color:var(--inkC); border-color:var(--inkC)}
.vbtn.sel{color:var(--paper); background:var(--inkC); border:1px solid var(--inkC)}
.stamprem{font:italic 11.5px var(--serif); color:var(--faint); background:none; border:0; cursor:pointer; padding:0}
.stamprem:hover{color:var(--red)}

.qblock{margin-top:calc(var(--u)*1.1)}
.q{font:italic 600 calc(var(--u)*1.12)/1.35 var(--serif); color:var(--graphite); margin-bottom:4px}
.qa{display:block; width:100%; resize:none; border:0; outline:0; overflow:hidden;
  background:transparent; background-image:linear-gradient(var(--rule2C) 1px, transparent 1px);
  background-size:100% calc(var(--u)*1.9); background-position:0 calc(var(--u)*1.9 - 6px);
  background-attachment:local;
  font:var(--jweight) var(--jsize)/calc(var(--u)*1.9) var(--hand); letter-spacing:.3px; color:var(--inkC);
  padding:0 2px calc(var(--u)*0.2)}
.qhint{padding-top:calc(var(--u)*1.2); font:italic 13.5px var(--serif); color:var(--faint)}
.tallybox{margin-top:calc(var(--u)*1.2)}
.tally{display:block; max-width:100%; margin-bottom:calc(var(--u)*0.8)}
.tlines{display:flex; flex-direction:column; gap:8px; font:500 13px var(--sans); letter-spacing:.05em; color:#5b564c}
.tlines div::before{content:'·'; margin-right:10px; color:var(--faint)}
.stamp{align-self:flex-start; margin-top:calc(var(--u)*1.7); transform:rotate(-7deg);
  color:var(--red); border:2.5px solid currentColor; border-radius:5px; padding:10px 18px 9px;
  opacity:0; pointer-events:none; position:relative; mix-blend-mode:multiply; filter:url(#rough);
  -webkit-mask-image:var(--speckle); mask-image:var(--speckle); -webkit-mask-size:160px; mask-size:160px}
.stamp::before{content:''; position:absolute; inset:3px; border:1px solid currentColor; border-radius:3px; opacity:.8}
.stamp .s1{display:block; font:700 16px var(--serif); letter-spacing:.34em; text-indent:.34em}
.stamp .s2{display:block; font:700 8.5px var(--sans); letter-spacing:.22em; text-align:center;
  margin-top:4px; border-top:1px solid currentColor; padding-top:4px}
.stamp.show{opacity:.8}
.stamp.animate{animation:stampin .55s cubic-bezier(.2,1.4,.45,1)}
@keyframes stampin{0%{transform:rotate(-16deg) scale(1.8); opacity:0}55%{opacity:.85}100%{transform:rotate(-7deg) scale(1); opacity:.8}}

.wall{margin-top:calc(var(--u)*1.4); border-top:1px solid var(--rule2C); padding-top:10px}
.wallhead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px}
.wtitle{font:italic 600 15px var(--serif); color:var(--graphite)}
.whint{font:italic 12px var(--serif); color:var(--faint)}
.habit{display:flex; align-items:center; gap:8px; padding:3px 0}
.hdel{opacity:0; background:none; border:0; cursor:pointer; color:#a49d8f; line-height:0; padding:2px; transition:.15s}
.habit:hover .hdel{opacity:.6} .hdel:hover{color:var(--red)}
.hname{flex:1; min-width:0; background:transparent; border:0; outline:0; border-bottom:1px dashed transparent;
  font:400 14px var(--sans); color:var(--graphite); padding:2px 0}
.hname:focus{border-bottom-color:rgba(62,59,53,.3)}
.hadd{display:flex; align-items:center; gap:8px; margin-top:8px}
.hadd input{flex:1; background:transparent; border:0; outline:0;
  font:italic 14px var(--serif); color:var(--graphite); height:28px}
.hadd input::placeholder{color:var(--faint)}

.ownline{background:transparent; border:0; outline:0; border-bottom:1.5px dotted rgba(62,59,53,.45);
  font:italic 600 24px var(--serif); color:var(--graphite); width:100%; padding:4px 2px; margin:10px 0 16px}
.belongs{font:italic 15px var(--serif); color:var(--soft)}
.insfine{font:italic 13px/1.8 var(--serif); color:var(--faint); margin-top:auto}
.ritsec{margin-top:calc(var(--u)*1.1); counter-reset:rit}
.ritsec h2{font:italic 600 17px var(--serif); color:var(--graphite); margin-bottom:6px}
.ritsteps{display:flex; flex-direction:column; gap:7px}
.ritsteps div{font:15px/1.6 var(--sans); color:#5b564c; padding-left:22px; position:relative}
.ritsteps div::before{content:counter(rit,lower-roman) '.'; counter-increment:rit;
  position:absolute; left:0; font:italic 600 13px var(--serif); color:var(--faint)}
.keys{margin-top:calc(var(--u)*1.2); display:grid; grid-template-columns:auto 1fr; gap:8px 16px; align-items:center}
.keys kbd{font:700 10.5px var(--sans); letter-spacing:.06em; color:var(--graphite);
  border:1px solid var(--rule2C); border-bottom-width:2px; border-radius:3px; padding:2px 7px;
  background:var(--paper2); justify-self:start; white-space:nowrap}
.keys span{font:13.5px var(--sans); color:#5b564c}

.idxcard{position:relative; background:#f8f3e6; border-radius:2px;
  box-shadow:0 4px 12px rgba(60,45,25,.18), inset 0 0 0 1px rgba(62,59,53,.06);
  padding:18px 14px 12px; transform:rotate(.6deg); margin-top:16px;
  background-image:repeating-linear-gradient(to bottom, transparent 0 25px, rgba(96,116,150,.22) 25px 26px)}
.cardclip{position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg);
  filter:drop-shadow(0 1px 1px rgba(80,50,10,.3))}
.cardhead{font:italic 600 14px var(--serif); color:#8d8778; margin-bottom:2px}
.srow{display:flex; align-items:center; gap:8px; height:26px}
.srow input{flex:1; min-width:0; background:transparent; border:0; outline:0;
  font:400 14px var(--sans); color:var(--graphite); height:26px}
.srow.done input{text-decoration:line-through; color:var(--faint)}
.sflag{background:none; border:0; padding:1px; cursor:pointer; color:#8d8778; line-height:0; flex:none}
.sdel{opacity:0; background:none; border:0; cursor:pointer; color:#a49d8f; line-height:0; padding:2px; transition:opacity .15s; flex:none}
.srow:hover .sdel{opacity:.6} .sdel:hover{color:var(--red)}
.archhead{margin-top:calc(var(--u)*1.2)}
.archlist{margin-top:6px}
.archrow{display:flex; align-items:center; gap:10px; padding:9px 4px; cursor:pointer;
  border-bottom:1px dotted rgba(62,59,53,.14)}
.archrow:hover{background:rgba(255,252,244,.6)}
.archlabel{font:600 14px var(--serif)}
.archmeta{margin-left:auto; font:500 11px var(--sans); letter-spacing:.05em; color:var(--soft); white-space:nowrap}
.archdays{padding:6px 4px 12px 32px; display:flex; flex-direction:column; gap:5px}
.archday{display:flex; gap:10px; align-items:baseline; font:13px var(--sans); color:var(--soft); cursor:pointer; background:none; border:0; padding:1px 2px; text-align:left}
.archday:hover{color:var(--inkC)}
.archday b{font-weight:600; color:var(--graphite)}

.rjtext{flex:1; font:var(--jweight) var(--jsize)/2 var(--hand); letter-spacing:.4px; color:var(--inkC);
  padding:calc(var(--u)*0.5) 2px; overflow-y:auto; white-space:pre-wrap}
.bookmark{position:absolute; right:26px; top:-4px; width:16px; height:44px; background:var(--red); z-index:4;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); opacity:.9}

.modalOv{position:fixed; inset:0; z-index:55; background:rgba(70,58,38,.35);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:grid; place-items:center; padding:20px}
.flycard{width:min(470px,94vw); max-height:88vh; overflow-y:auto; background:var(--paperC);
  background-image:var(--bgR1), var(--bgR2), var(--fiber);
  background-size:var(--bgS1), var(--bgS2), 260px 260px;
  border-radius:4px; box-shadow:0 24px 60px -18px rgba(60,45,25,.5); padding:26px 28px}
.flycard h2{font:italic 600 24px var(--serif); color:var(--graphite); margin:2px 0 6px}
.flysub{font:14px/1.7 var(--sans); color:#5b564c; margin-bottom:14px}
.flybtns{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px}
.flytabs{display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--rule2C)}
.flytab{background:none; border:0; cursor:pointer; font:600 13px var(--serif); letter-spacing:.04em;
  color:var(--soft); padding:8px 12px 9px; border-bottom:2px solid transparent; margin-bottom:-1px}
.flytab.sel{color:var(--graphite); border-bottom-color:var(--inkC)}
#flypass{margin-top:2px}
.flyerr{width:100%; font:500 13px/1.6 var(--sans); color:var(--red); margin-top:10px;
  background:rgba(181,69,44,.07); border:1px dotted rgba(181,69,44,.4); border-radius:3px; padding:8px 10px}
.diagrow{display:flex; gap:10px; padding:8px 0; border-bottom:1px dotted rgba(62,59,53,.16); font:13.5px/1.5 var(--sans); color:var(--graphite)}
.diagrow>span:last-child{flex:1; min-width:0}
.diagok{color:#4c7a4c; font-weight:700; flex:none}
.diagbad{color:var(--red); font-weight:700; flex:none}
.diagdetail{font:12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--soft); margin-top:3px; word-break:break-word}
.diagsum{width:100%; font:600 13.5px var(--sans)}
.dcardgrid{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap}
.dcardinfo{flex:1; min-width:220px}
.dcardinfo .dn{font:600 24px var(--serif); color:var(--graphite)}
.dcardinfo .dh{font:700 10.5px var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin:5px 0 10px}
.dcardinfo .dm{font:italic 15px/1.6 var(--serif); color:var(--soft); margin-bottom:8px}
.dcardinfo .dp{font:italic 13.5px/1.6 var(--serif); color:#6d675a; padding:9px 12px; background:rgba(230,220,194,.55); border-radius:2px; display:inline-block}

#cover{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px}
.coverbook{width:min(470px,88vw); height:min(640px,84vh); min-height:520px;
  background-color:var(--kraft); background-image:var(--kraftfiber);
  border-radius:6px 10px 10px 6px; position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(28px,5vh,48px) 40px 64px;
  box-shadow: inset 0 0 0 1px rgba(120,90,45,.25), inset 3px 0 10px -4px rgba(90,60,20,.4),
   inset -2px 0 6px -3px rgba(255,255,255,.25),
   0 30px 70px -25px rgba(60,45,25,.55), 0 8px 22px rgba(60,45,25,.22);
  transition:transform .6s cubic-bezier(.5,0,.4,1), opacity .55s ease .05s}
.coverbook::after{content:''; position:absolute; right:-7px; top:10px; bottom:10px; width:7px; z-index:-1;
  border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.9) 0 1.5px, rgba(140,120,80,.4) 1.5px 3px)}
#cover.opening .coverbook{transform:perspective(1500px) rotateY(-22deg) translateX(-10%); opacity:0}
#cover.settle .coverbook{animation:coverin .6s cubic-bezier(.3,1.2,.4,1)}
@keyframes coverin{from{transform:perspective(1500px) rotateY(-16deg) translateX(-6%); opacity:0}to{transform:none; opacity:1}}
.c-brand{font:600 12px var(--serif); letter-spacing:.42em; text-indent:.42em;
  color:rgba(80,55,22,.62); text-shadow:0 1px 0 rgba(255,244,220,.5), 0 -1px 1px rgba(90,60,20,.35)}
.c-sub{font:italic 13px var(--serif); color:rgba(90,64,30,.5); margin-top:8px; text-shadow:0 1px 0 rgba(255,244,220,.4)}
.c-rule{width:120px; height:2px; margin:22px auto; border-radius:1px;
  background:rgba(90,60,20,.28); box-shadow:0 1px 0 rgba(255,244,220,.45)}
.c-weekday{font:700 13px var(--sans); letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:rgba(80,55,22,.55); text-shadow:0 1px 0 rgba(255,244,220,.45)}
.c-day{font:600 128px/1 var(--serif); margin:8px 0 4px; color:rgba(88,60,25,.52);
  text-shadow:0 1px 1px rgba(255,244,215,.55), 0 -1.5px 2px rgba(90,60,20,.5)}
.c-month{font:400 16px var(--serif); letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:rgba(88,60,25,.5); text-shadow:0 1px 0 rgba(255,244,220,.4)}
.c-no{position:absolute; bottom:18px; left:26px; font:700 10px var(--sans); letter-spacing:.28em; color:rgba(80,55,22,.45)}
.ribbon{position:absolute; bottom:-30px; left:calc(50% - 8px); width:16px; height:46px; background:var(--red); z-index:0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%); box-shadow:0 2px 5px rgba(60,30,10,.3)}
.cliptag{position:absolute; top:-14px; right:34px; background:none; border:0; cursor:pointer;
  padding:0; transform:rotate(2deg); z-index:3}
.cliptag .clip{position:absolute; top:-8px; left:50%; transform:translateX(-50%); z-index:2;
  filter:drop-shadow(0 1px 1px rgba(80,50,10,.35))}
.tagcard{display:block; background:#f7f2e6; color:#6b675c; padding:16px 12px 9px; border-radius:2px;
  box-shadow:0 3px 8px rgba(60,45,25,.25); font:700 9px var(--sans); letter-spacing:.22em;
  text-transform:uppercase; text-align:center; min-width:66px; transition:transform .2s}
.cliptag:hover .tagcard{transform:translateY(-2px)}
.tagcard b{display:block; color:#4a463e; margin-bottom:3px}
.tagcard i{font:italic 12px var(--serif); letter-spacing:.1em; text-transform:lowercase; color:#8d8778}

#tray{position:fixed; left:50%; bottom:0; transform:translate(-50%,112%); width:min(780px,96vw); z-index:46;
  background:var(--paper2); border:1px solid rgba(62,59,53,.16); border-bottom:0; border-radius:10px 10px 0 0;
  box-shadow:0 -14px 40px rgba(60,45,25,.25); padding:16px 24px 14px; transition:transform .45s cubic-bezier(.3,.9,.3,1)}
#tray.open{transform:translate(-50%,0)}
.trayhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.ttitle{font:italic 600 16px var(--serif); color:var(--graphite)}
.tgroup{display:flex; align-items:center; gap:16px; padding:9px 0; border-top:1px dotted rgba(62,59,53,.18); flex-wrap:wrap}
.tlabel{font:700 10px var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--soft); width:70px; flex:none}
.trow{display:flex; gap:8px; flex-wrap:wrap}
.sw{border:0; background:none; cursor:pointer; padding:4px; border-radius:4px; display:flex;
  flex-direction:column; align-items:center; gap:4px; font:500 10px var(--sans); letter-spacing:.06em; color:var(--soft)}
.sw:hover{color:var(--graphite)}
.sw.sel{color:var(--graphite)}
.sw.sel .chip{outline:1.5px dashed var(--inkC); outline-offset:2px}
.chip{width:32px; height:40px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(62,59,53,.14)}
.chip.round{width:32px; height:32px; border-radius:50%}
.chip.aa{display:grid; place-items:center; font-family:var(--hand); color:var(--graphite); box-shadow:inset 0 0 0 1px rgba(62,59,53,.14)}

#searchOv{position:fixed; inset:0; z-index:45; background:rgba(236,229,214,.92);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:grid; justify-items:center; align-content:start; padding:11vh 18px 30px; overflow-y:auto}
.leafwrap{height:118px; display:grid; place-items:center; margin-bottom:14px; opacity:0; transition:opacity .25s}
#searchOv.searching .leafwrap{opacity:1}
#searchOv.searching .results{opacity:.3}
.leafbook{position:relative; width:78px; height:104px; perspective:700px}
.leafbook i{position:absolute; inset:0; background:var(--paperC); border-radius:2px;
  box-shadow:0 3px 10px rgba(60,45,25,.25); background-image:var(--bgR1); background-size:var(--bgS1);
  transform-origin:left center; animation:flick .6s cubic-bezier(.5,0,.5,1) infinite}
.leafbook i:nth-child(2){animation-delay:.2s}
.leafbook i:nth-child(3){animation-delay:.4s}
@keyframes flick{0%{transform:rotateY(0)} 55%{transform:rotateY(-150deg); opacity:1} 100%{transform:rotateY(-160deg); opacity:0}}
#searchinput{width:min(600px,92vw); font:italic 400 24px var(--serif); color:var(--graphite);
  background:transparent; border:0; outline:0; border-bottom:2px solid var(--rule2C); padding:8px 4px}
#searchinput::placeholder{color:var(--faint)}
.results{width:min(600px,92vw); margin-top:10px; transition:opacity .25s; min-height:60px}
.rsnip{font:13px var(--sans); color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44%}
.rsnip mark{background:linear-gradient(transparent 42%, rgba(240,207,100,.6) 42% 88%, transparent 88%); color:inherit; padding:0 1px}
.rmeta{font:700 9.5px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
.searchhint{width:min(600px,92vw); text-align:right; font:italic 12px var(--serif); color:var(--faint); margin-top:14px}
.swipefx{position:fixed; z-index:44; pointer-events:none; mix-blend-mode:multiply}

#note{position:fixed; bottom:26px; left:50%; transform:translate(-50%,8px); z-index:60;
  font:italic 14px var(--serif); color:var(--soft); background:rgba(252,249,242,.94);
  padding:9px 20px; border-radius:3px; box-shadow:0 4px 14px rgba(60,48,30,.18);
  opacity:0; transition:.35s; pointer-events:none; max-width:80vw; text-align:center}
#note.on{opacity:1; transform:translate(-50%,0)}

/* ---------------- mobile polish ---------------- */
@media (max-width:920px){
  :root{--u:16px}
  html{-webkit-text-size-adjust:100%}
  button,.tab,.linky,.flagbox,.erase,.dnav,.ndel,.sdel,.hdel,.linerem{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
  .book{flex-direction:column; height:auto; width:min(92vw,560px)}
  .page{width:100%}
  .page.left{border-radius:4px 4px 0 0; height:min(80vh,680px)}
  .page.right{border-radius:0 0 4px 4px; height:min(80vh,680px)}
  .page.right::after{display:none}
  .tabs{position:static; order:-1; flex-direction:row; justify-content:center; gap:8px; margin-bottom:14px; flex-wrap:wrap}
  .tab{width:auto; min-height:44px; padding:10px 16px; transform:none!important}
  .tab .tlabel{transform:none}
  .tab.active{box-shadow:0 3px 9px rgba(60,48,30,.3)}
  .readingTag{position:static; margin-bottom:10px; transform:rotate(-1deg)}
  #flip{width:100%; height:50%}
  .dateline{font-size:22px}
  .c-day{font-size:96px}
  .incense{display:none}
  .landgrid{gap:34px}
  .landcover{margin:0 auto}
  /* touch targets */
  .flagbox{padding:10px}
  .task{min-height:44px}
  .erase{padding:10px; opacity:.5}
  .dnav{font-size:26px; padding:4px 12px}
  .totoday{padding:8px 2px}
  .linelink{padding:10px 2px; font-size:16px}
  .linerem{padding:10px}
  /* journal writing surface: big, thumb-friendly, no iOS zoom */
  #jrnl{font-size:19px; line-height:2; min-height:46vh}
  .ghostbtn{padding:10px 14px; min-height:40px}
  .jbtns{gap:8px}
  /* sticky add-task bar with safe area */
  .taskfoot{position:sticky; bottom:0; background:var(--paperC);
    padding:8px 0 calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 0 var(--ruleC); margin-top:auto}
  #addtask input{height:44px; font-size:16px}
  .footrow{margin-top:6px; flex-wrap:wrap}
  /* sticky notes reflow to a grid */
  .notesrow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .snote{width:100%; height:124px}
  /* momentum scroll everywhere */
  .taskscroll,.dscroll,#jrnl,.idxlist,.bkscroll,.qscroll,.rcard,.flycard{-webkit-overflow-scrolling:touch}
  /* save status + word count wrap neatly */
  .jfoot{flex-wrap:wrap; gap:4px 14px}
  .fhint{display:none}
  /* nib scaled down */
  .nibcaret{width:15px; height:36px}
  /* focus mode: chrome fully out of the way */
  body.focus .chrome{opacity:0; pointer-events:none}
  /* sheets: modals slide from the bottom */
  .modalOv{align-items:end; padding:0}
  .flycard{width:100%; max-height:86vh; border-radius:14px 14px 0 0;
    padding:22px 20px calc(26px + env(safe-area-inset-bottom));
    animation:sheetup .35s cubic-bezier(.3,.9,.3,1)}
  @keyframes sheetup{from{transform:translateY(48px); opacity:.6}to{transform:none; opacity:1}}
  /* toasts + tray above the home bar */
  #note{bottom:calc(16px + env(safe-area-inset-bottom)); max-width:92vw}
  #tray{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  /* lighter shadows for mobile GPUs */
  .page.left{box-shadow: inset -12px 0 16px -14px rgba(70,58,38,.3), 0 8px 22px -10px rgba(70,55,30,.25)}
  .page.right{box-shadow: inset 12px 0 16px -14px rgba(70,58,38,.3), 0 8px 22px -10px rgba(70,55,30,.25)}
  .ncard .cov{filter:drop-shadow(0 6px 10px rgba(70,55,30,.2))}
  .shelfgrid{gap:36px 20px}
  .ncard .nname{font-size:16px}
  .homehead h1{font-size:26px}
  .hsub{font-size:14px}
  .daycol{padding:calc(var(--u)*0.9) calc(var(--u)*0.5)}
  .wtask{font-size:15px}
}
@media (max-width:560px){
  #chromedate{display:none}
  .pad{padding:14px 14px}
  .dateline{font-size:20px}
  #jrnl{font-size:18px}
  .c-day{font-size:80px}
  .coverbook{min-height:480px}
  /* four day-columns at phone width leaves ~90px each — two up, and let the rows share the
     page height so the spread still fits inside the sheet instead of spilling off it */
  .wgrid, .wgrid.r{grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(0,1fr)}
}
/* Two surfaces blur what is behind them. With transparency reduced, drop the blur and
   raise the fill opacity instead so the panels keep their contrast. */
@media (prefers-reduced-transparency: reduce){
  .modalOv{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(70,58,38,.62) }
  #searchOv{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(236,229,214,.99) }
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
/* ============ keywords — the index in the back ============ */
.kwrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:calc(var(--u)*0.5) 0 0}
.kwlabel{font:700 10.5px var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); flex:none}
.kwtags{display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0}
.kwempty{font:italic 14px var(--serif); color:var(--faint)}
/* The border keeps its width and loses its colour; the stroke is drawn on ::after so the
   displacement filter never touches the glyphs. A filtered host wobbles the word itself,
   which reads as a font fault rather than as ink. */
.kwtag{position:relative; display:inline-flex; align-items:center; gap:4px;
  border:1.5px solid transparent; border-radius:3px; padding:2px 4px 2px 7px;
  transform:rotate(var(--kt,0deg)); background:rgba(255,252,244,.6)}
.kwtag::after{content:''; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--kc); border-radius:inherit;
  filter:url(#rough); opacity:.74}
.kwtag.kwbleed::after{filter:url(#inkbleed); opacity:.62}
.kwt{font:600 12.5px var(--sans); letter-spacing:.03em; color:var(--kc); line-height:1.4}
.kwdel{background:none; border:0; cursor:pointer; color:var(--kc); opacity:0; line-height:0;
  padding:2px 1px; transition:opacity .15s}
.kwtag:hover .kwdel,.kwtag:focus-within .kwdel{opacity:.6}
.kwdel:hover{opacity:1; color:var(--red)}
.kwadd{background:none; border:0; cursor:pointer; font:600 13.5px var(--serif);
  letter-spacing:.04em; color:var(--soft); padding:4px 2px;
  border-bottom:1px solid transparent; transition:.25s}
.kwadd:hover{color:var(--graphite); border-bottom-color:rgba(62,59,53,.4)}
.kwinput{flex:1; min-width:118px; background:transparent; border:0; outline:0;
  border-bottom:1px dashed rgba(96,116,150,.35);
  font:400 14px var(--sans); color:var(--graphite); height:22px; padding:0 2px}
.kwinput::placeholder{color:rgba(90,85,72,.42)}

.kwshelf{display:flex; flex-direction:column; margin:calc(var(--u)*0.4) 0 calc(var(--u)*0.6)}
.kwitem{display:flex; align-items:baseline; gap:10px; width:100%; background:none; border:0;
  cursor:pointer; padding:calc(var(--u)*0.46) 6px; border-radius:2px; text-align:left;
  transition:background .15s}
.kwitem:hover{background:rgba(255,252,244,.75)}
.kwitem .kwt{font:600 16px var(--serif); letter-spacing:0}
.kwcount{font:500 11.5px var(--sans); letter-spacing:.06em; color:var(--soft); white-space:nowrap}
/* ============ the morning prompt ============ */
/* [hidden] must be re-asserted: the UA rule is `display:none`, but an author `display:flex`
   wins, so without this the "hidden" prompt would still be laid out and visible. */
.jprompt{display:flex; align-items:baseline; gap:10px; margin:0 0 calc(var(--u)*0.4);
  padding-bottom:calc(var(--u)*0.32); border-bottom:1px dotted rgba(96,116,150,.26)}
.jprompt[hidden]{display:none}
.jprompt .ptext{font:italic 400 15.5px var(--serif); color:var(--soft); flex:1; min-width:0}
.jprompt .pdismiss{background:none; border:0; cursor:pointer; color:var(--faint); opacity:0;
  line-height:0; padding:2px; flex:none; transition:opacity .15s, color .15s}
.jprompt:hover .pdismiss,.jprompt:focus-within .pdismiss{opacity:.7}
.jprompt .pdismiss:hover{opacity:1; color:var(--red)}
/* the tray switch: an empty page when off, one inked line when on. Self-contained rather
   than extending `.sw`, because `.sw` means "a swatch of a pref value" and the boot gate
   counts them — adding one there would silently break a baseline assertion. */
.tglsw{border:0; background:none; cursor:pointer; padding:5px 8px; border-radius:4px;
  display:flex; flex-direction:row; align-items:center; gap:9px; text-align:left;
  font:500 11px var(--sans); letter-spacing:.06em; color:var(--soft)}
.tglsw:hover{color:var(--graphite)}
.tglsw.sel{color:var(--graphite)}
.tglsw .chip.tgl{width:26px; height:32px; flex:none; border-radius:2px; background-color:var(--paperC);
  box-shadow:inset 0 0 0 1px rgba(62,59,53,.14);
  background-image:linear-gradient(to bottom,transparent 11px,rgba(51,83,124,.3) 11px,rgba(51,83,124,.3) 12px,transparent 12px)}
.tglsw.sel .chip.tgl{background-image:linear-gradient(to bottom,transparent 11px,var(--inkC) 11px,var(--inkC) 13px,transparent 13px)}
.tglsw.sel .chip{outline:1.5px dashed var(--inkC); outline-offset:2px}
@media print{ .jprompt,.kwadd,.kwdel,.kwinput{display:none!important} }
@media print{
  body{background:#fff}
  body::after,.chrome,#home,#landing,#cover,#note,#tray,#searchOv,.stampop,.incense,#fly,#dcard,.readingTag{display:none!important}
  main{padding:0}
  .bookwrap{opacity:1!important; transform:none!important}
  .book{flex-direction:column; height:auto; width:100%}
  .page{width:100%; height:auto; min-height:0; box-shadow:none!important; border-radius:0}
  .page.right::after{display:none}
  .taskscroll,.dscroll,.qscroll,.bkscroll,.idxlist,.ritlist,.jbody,#jrnl,.qa{overflow:visible!important}
  .dayhead .daynav,.totoday,.ghostbtn,.linky,#addtask,.ndel,.linerem,.erase,.hdel{display:none!important}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  @page{size:A5 portrait; margin:12mm}
}