/* ================================================================
   Sketchbook refinements, loaded after app.css.
   Additions only (texture, motion, small drawn details), kept in one
   file so they can be judged, tuned or removed together. Rules of the
   house still hold: ink colour only, the three type sizes, turbulence
   filters never on live text. Motion is off under reduced-motion.
   ================================================================ */

/* ---------- paper: a faint grain on the wall, behind everything ---------- */
/* z-index -1 on a fixed layer paints above the page background but below all content,
   so the grain never sits over saved images. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="dark"] body::before{opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- tiles: laid onto the page, lifted when you reach for them ---------- */
/* body.intro is set for the first second after the library opens (see markIntro in app.js),
   so re-renders never replay this. backwards fill: no lingering transform afterwards. */
@keyframes hm-place{from{opacity:0;transform:translateY(16px) rotate(var(--tilt,-1.4deg)) scale(.98)}to{opacity:1;transform:none}}
body.intro .grid .tile{animation:hm-place .6s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:calc(var(--r,0s) + var(--c,0s))}
.wcol:nth-child(2){--c:.05s}.wcol:nth-child(3){--c:.1s}.wcol:nth-child(4){--c:.15s}.wcol:nth-child(5){--c:.2s}
.wcol>.tile:nth-child(2){--r:.08s;--tilt:1.2deg}.wcol>.tile:nth-child(3){--r:.16s}.wcol>.tile:nth-child(4){--r:.24s;--tilt:.9deg}
.wcol>.tile:nth-child(5){--r:.32s}.wcol>.tile:nth-child(6){--r:.4s;--tilt:1.1deg}.wcol>.tile:nth-child(n+7){--r:.46s}

@media (hover:hover){
  .grid .tile{transition:transform .28s cubic-bezier(.2,.75,.25,1)}
  .grid .tile:hover{transform:translateY(-3px) rotate(-.45deg)}
  .grid .wcol:nth-child(even) .tile:hover,.grid.salon .tile:nth-child(even):hover{transform:translateY(-3px) rotate(.45deg)}
  /* a pencil frame, drawn slightly off-register behind the picture */
  .tile.haspic .pw{isolation:isolate}
  .tile.haspic .pw::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:1.6px solid var(--ink);border-radius:5px 9px 4px 8px;filter:url(#wobble-sm);opacity:0;transform:translate(3px,3px);transition:opacity .22s,transform .28s cubic-bezier(.2,.75,.25,1)}
  .tile.haspic:hover .pw::before{opacity:.6;transform:translate(7px,8px)}
}
.tile .tbtn:focus-visible{outline:none}
.tile .tbtn:focus-visible .pw::before{opacity:.8;transform:translate(7px,8px)}

/* ---------- pressing things feels like pressing things ---------- */
.btn,.iconbtn,.tab,.mb,.mfab,.capbtn,.pa,.skbtn{transition:transform .12s ease}
.btn:active,.iconbtn:active,.mb:active,.capbtn:active,.pa:active,.skbtn:active{transform:translateY(1px) scale(.97)}
.mfab:active{transform:scale(.93) rotate(-4deg)}

/* ---------- switching sections turns the page ---------- */
@keyframes hm-turn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#main.turn{animation:hm-turn .34s cubic-bezier(.2,.75,.25,1) backwards}

/* ---------- Today: a folio line, like the top of a journal page ---------- */
.folio{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 auto 4px;padding:0 2px 6px;font-size:var(--ts);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);position:relative}
.folio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.6px;background:var(--ink);opacity:.55;filter:url(#wobble-sm)}
.folio b{font-weight:400}

/* ---------- Today: the week, read back (a note pinned into the sketchbook) ---------- */
.weekread{position:relative;max-width:760px;padding:22px 26px 18px;margin:4px auto 8px}
.weekread::before{content:"";position:absolute;inset:0;border:1.8px solid var(--ink);border-radius:9px 5px 10px 6px;filter:url(#wobble);pointer-events:none;opacity:.85}
.weekread p{margin:0 0 12px}
.weekread .wread{font-size:var(--tm);line-height:1.25;text-transform:uppercase}
.weekread .tags{margin:4px 0 14px}
.weekread .wtry{font-size:var(--ts);text-transform:uppercase}
.weekread .wtry b{font-weight:400;text-decoration:underline;text-underline-offset:3px}

/* ---------- viewer: details ringed on the picture ---------- */
/* White ring with a black edge, so it reads on any picture; still only black and white. */
.viewer .marks{position:absolute;pointer-events:none;z-index:2}
.viewer .marks.marking{pointer-events:auto;cursor:crosshair;touch-action:none}
.viewer .marks svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:url(#wobble-sm)}
.viewer .marks ellipse{fill:none;stroke:#fff;stroke-width:2.6;vector-effect:non-scaling-stroke;paint-order:stroke;filter:drop-shadow(0 0 1.2px #000) drop-shadow(0 0 .6px #000)}
.viewer .marks ellipse.on{stroke-width:4}
.viewer .marks ellipse.draft{stroke-dasharray:6 5}
.viewer .mnum{position:absolute;transform:translate(-40%,-60%);pointer-events:auto;min-width:26px;height:26px;padding:0 6px;border-radius:13px 11px 14px 12px;background:#fff;color:#000;border:1.6px solid #000;font-size:var(--ts);line-height:1;display:grid;place-items:center;cursor:pointer}
.viewer .mnum.on{background:#000;color:#fff;border-color:#fff}
.dlist{margin:0 0 10px;padding:0 0 0 22px}
.dlist li{margin:0 0 6px}
.dlist li.on .dtext{text-decoration:underline;text-underline-offset:3px}
.dlist .dtext{text-align:left;text-transform:uppercase;font-size:var(--ts);padding:0}
.dlist .dx{opacity:.5;margin-left:6px;vertical-align:middle}.dlist .dx:hover{opacity:1}.dlist .dx svg{width:14px;height:14px}
.ddraft input{width:100%;background:transparent;border:0;border-bottom:1.6px solid var(--ink);color:var(--ink);font:inherit;font-size:var(--ts);text-transform:uppercase;padding:6px 0;outline:none}
.ddraft .drow{display:flex;gap:8px;margin-top:10px}
.dhint{margin:0}

/* ---------- present: full screen, one thing at a time ---------- */
/* the project button row gained Present: let it wrap rather than widen the page on phones */
.phead{flex-wrap:wrap;row-gap:8px}
/* Phones: a long project tagline or button label never widens the page (both were nowrap),
   and nothing can make the whole page scroll sideways. */
@media (max-width:640px){.phead .spacer{display:none}.hero .tagline u{white-space:normal}#main .btn.sm{white-space:normal;max-width:100%;text-align:left}}
html,body{overflow-x:clip}
.present{position:fixed;inset:0;z-index:60;background:var(--wall);color:var(--ink);display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);padding:max(14px,env(safe-area-inset-top,0px)) clamp(16px,4vw,48px) max(18px,env(safe-area-inset-bottom,0px))}
.present .phdr{display:flex;align-items:center;gap:18px;font-size:var(--ts);text-transform:uppercase;letter-spacing:.06em;padding-bottom:10px;position:relative}
.present .phdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.6px;background:var(--ink);opacity:.5;filter:url(#wobble-sm)}
.present .pcount{margin-left:auto}
.present .pstage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px 0}
.present .pstage img{min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;animation:hm-turn .35s cubic-bezier(.2,.75,.25,1) backwards}
.present .ptext{max-width:900px;text-transform:uppercase;animation:hm-turn .35s cubic-bezier(.2,.75,.25,1) backwards}
.present .ptext .pbig{font-size:var(--tl);line-height:1.02;margin:0 0 18px}
.present .ptext p{font-size:var(--tm);margin:0}
.present .phalf{position:absolute;top:0;bottom:0;width:50%;background:none;border:0;cursor:pointer}
.present .phalf.l{left:0;cursor:w-resize}.present .phalf.r{right:0;cursor:e-resize}.present .phalf:disabled{cursor:default}
.present .pcap{text-align:center;text-transform:uppercase}
.present .pcap p{margin:0;font-size:var(--tm)}.present .pcap i{font-style:normal;opacity:.5;margin:0 .3em}
.present .pcap .pnote{font-size:var(--ts);margin-top:6px}

/* ---------- touch screens: a clean wall ---------- */
/* With no hover, every tile's tape and table icons showed at once and sat on the captions.
   Tape and Put on the table are at the top of the viewer when a tile is opened; an icon that
   is switched on (taped, on the table) still shows. */
@media (hover:none){.tile .tapebtn:not([aria-pressed="true"]),.tile .traybtn:not([aria-pressed="true"]){display:none}}

@media (prefers-reduced-motion:reduce){
  body.intro .grid .tile,#main.turn{animation:none!important}
  .grid .tile:hover{transform:none!important}
}