/* =====================================================================
   GRAPH-PAPER OBSERVATORY — notebook layer for interests + about.
   Loaded AFTER logtheme.css; the imagery page keeps logtheme alone.
   Adds: an inset dot-grid "paper" with real margins, ephemeral hand-
   sketched margin doodles, hollow ghost words behind section titles,
   fig. captions, and ONE red pen used four ways — text selection,
   link-hover marker underline, a single filled highlight per page,
   and a draw-anywhere marker whose strokes evaporate.
   Techniques studied from raphaelameaume.com (half-dot SVG tile with
   paper margins, jittered strokes, constant pen speed) and antfu.me
   (outline headings, opacity-only hierarchy) — rebuilt, not copied,
   for this site's black paper + red pen.
   ===================================================================== */
:root{
  --cell:24px;                          /* one notebook cell — dots + doodles share it */
  --sketch:rgba(255,255,255,.13);       /* pencil for margin doodles */
  --sketch-text:rgba(255,255,255,.20);  /* scribbled formulas need a touch more ink */
  --marker:rgba(255,66,66,.30);         /* the red marker, always this one pen */
}
::selection{ background:rgba(255,66,66,.32); color:#fff; }
html,body{ overflow-x:hidden; }               /* kill a 2px range-input overflow wiggle on phones */

/* ---------- 0 · the paper ---------- */
/* dot grid inset from the page edge like a notebook margin; two half-dots
   on the tile's vertical edges fuse into crisp 2px dots when tiled */
#stars{ display:none; }                 /* the paper replaces the starfield */
.nb-paper{ position:fixed; z-index:0; pointer-events:none;
  top:18px; left:18px; right:18px; bottom:88px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M 24 13 A 1 1 90 0 1 24 11' fill='%232b2b33'/%3E%3Cpath d='M 0 11 A 1 1 270 0 1 0 13' fill='%232b2b33'/%3E%3C/svg%3E");
  background-position:center top; }
.r-hero,.module,.r-foot,.ab-wrap,.ab-foot,.r-nav,.ab-nav,.sci-nav{ position:relative; z-index:1; }

/* ---------- 1 · margin sketches (seeded by notebook.js) ---------- */
#nb-doodles{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.nb-doodle{ position:absolute; opacity:1; transition:opacity .7s ease; }
.nb-doodle path{ stroke:var(--sketch); fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nb-doodle.nb-f path{ stroke:var(--sketch-text); }   /* handwritten formulas get a touch more ink */
.nb-doodle.nb-dg path{ stroke:rgba(255,255,255,.16); }  /* chalkboard diagrams: readable chalk */
.nb-doodle .nb-lb path{ stroke:var(--sketch-text); } /* their handwritten labels, brighter still */
.nb-doodle.out{ opacity:0; }

/* ---------- 2 · hollow ghost words behind section titles ---------- */
.module{ position:relative; }
.nb-ghost{ position:absolute; top:-26px; left:-8px; z-index:0;
  pointer-events:none; user-select:none;
  font-family:var(--disp); font-weight:700; white-space:nowrap; line-height:1;
  font-size:clamp(58px,8.2vw,116px); letter-spacing:.01em;
  color:rgba(255,255,255,.05); }
@supports (-webkit-text-stroke:1px #fff){
  .nb-ghost{ color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13); }
}
.module>*:not(.nb-ghost){ position:relative; z-index:1; }
/* research.css draws a hairline border-top on every .module; it cut straight
   through the big hollow ghost word. Drop it — the generous spacing + the
   watermark already mark each section, the way the reference sites do. */
.module{ border-top:0; }
.gallery{ position:relative; }                          /* imagery page: ghost sits behind the plate grid */
.gallery>*:not(.nb-ghost){ position:relative; z-index:1; }
@media(max-width:880px){ .nb-ghost{ display:none; } }

/* ---------- 3 · fig. captions under the demos ---------- */
.nb-fig{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--faint); margin:12px 0 0; }
.nb-fig b{ color:var(--accent); font-weight:400; }

/* ---------- 4 · the red pen ---------- */
/* hover marker underline (svg injected by notebook.js; draw speed ∝ length) */
.nb-rel{ position:relative; }
.nb-ul{ position:absolute; left:-3px; bottom:-5px; height:12px; overflow:visible; pointer-events:none; }
.nb-ul path{ stroke:var(--marker); stroke-width:7; fill:none; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
@media (prefers-reduced-motion:no-preference){
  .nb-ul path{ transition:stroke-dashoffset var(--d,.3s) cubic-bezier(.25,.46,.45,.94); }
}
a:hover>.nb-ul path, a:focus-visible>.nb-ul path{ stroke-dashoffset:0; }

/* one filled highlight per page — a marker swipe behind the phrase */
.nb-mark{ position:relative; white-space:nowrap; }
.nb-mark>svg{ position:absolute; left:-.2em; top:50%; height:1.1em; z-index:-1;
  transform:translateY(-48%) rotate(-.6deg); overflow:visible; pointer-events:none; }
.nb-mark>svg path{ stroke:rgba(255,66,66,.24); fill:none; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.nb-mark.lit>svg path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  .nb-mark>svg path{ transition:stroke-dashoffset .5s cubic-bezier(.25,.46,.45,.94) .15s; }
}

/* hand-drawn underline beneath the page title (drawn once on load) */
.nb-hand{ display:block; overflow:visible; margin:12px 0 0; }
.nb-hand path{ stroke:#ff4242; stroke-width:2.4; fill:none; stroke-linecap:round; opacity:.85; }
/* the about h1 carries 24px bottom margin — pull the underline back up under the name */
.about .nb-hand{ margin:-18px 0 16px; }

/* ---------- 5 · portfolio blocks (interests + talks) ---------- */
/* featured work: text beside a framed figure */
.pf-feat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:20px 44px; align-items:start; margin-top:26px; }
.pf-txt p{ max-width:58ch; color:rgba(255,255,255,.74); font-size:15.5px; line-height:1.85; margin:0 0 18px; }
.pf-txt p b{ color:#fff; font-weight:600; }
.pf-fig{ margin:0; }
.pf-fig img{ display:block; width:100%; border:1px solid var(--line); background:#04060c; }
/* the zoom figure: cluster plate + taped-on candidate cutout + red pen annotation */
.pf-zwrap{ position:relative; }
/* the candidate cutout hangs slightly off the plate's right side, a little up from the bottom */
.pf-zwrap .pf-inset{ position:absolute; right:-26px; bottom:12%; width:28%;
  border:1px solid #ff4242; }
@media(max-width:960px){ .pf-zwrap .pf-inset{ right:-10px; } }
.pf-overlay{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; }
.pf-overlay path{ stroke:#ff4242; stroke-width:1.5; fill:none; opacity:.8; stroke-linecap:round; }
/* mono metadata ledger (echoes the about-page observer record) */
.pf-meta{ font-family:var(--mono); font-size:12.5px; line-height:1.85; color:var(--muted);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0; margin:24px 0 0; max-width:52ch; }
.pf-meta .row{ display:grid; grid-template-columns:7em 1fr; gap:2px 1.2ch; }
.pf-meta .k{ color:var(--faint); } .pf-meta .v{ color:#fff; }
.pf-meta .v.red{ color:var(--accent); }
@media(max-width:960px){ .pf-feat{ grid-template-columns:1fr; } .pf-fig{ max-width:560px; } }
/* research-log rows: hairline ledger of projects (□ typed glyph, year right) */
.pf-rows{ margin-top:14px; border-bottom:1px solid var(--line); }
.pf-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 28px;
  padding:20px 0 18px; border-top:1px solid var(--line); text-decoration:none; }
.pf-row h3{ font-family:var(--disp); font-weight:700; font-size:18.5px; letter-spacing:.2px;
  color:#fff; margin:0; }
.pf-row h3::before{ content:"\25A1  "; font-family:var(--mono); font-weight:400;
  font-size:12px; color:var(--faint); vertical-align:2px; }
.pf-row .yr{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--faint);
  white-space:nowrap; padding-top:4px; }
.pf-row p{ grid-column:1 / -1; margin:6px 0 0; max-width:66ch;
  color:var(--muted); font-size:14.5px; line-height:1.75; }
.pf-row .go{ font-family:var(--mono); font-size:12px; color:var(--faint); }
a.pf-row.link:hover h3::before{ color:var(--accent); }
a.pf-row.link:hover .go{ color:var(--accent); }
/* imagery page: the publications/proposals section heading */
#pubs h2{ font-family:var(--disp); font-weight:700; font-size:clamp(24px,2.6vw,34px);
  letter-spacing:.2px; margin:4px 0 6px; }

/* slides download: flat mono link on a hairline */
.pf-dl{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:#fff;
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; white-space:nowrap; }
.pf-dl:hover{ border-color:var(--accent); }

/* draw-anywhere marker — visitor strokes, evaporate after 1.5s */
#nb-draw{ position:fixed; inset:0; z-index:64; pointer-events:none; }
#nb-draw path{ stroke:var(--marker); stroke-width:13; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
body.nb-drawing{ cursor:crosshair; }
body.nb-drawing *{ user-select:none!important; }
body.nb-drawing a,body.nb-drawing button{ pointer-events:none; }