/* ═══════════════════════════════════════════════════ latex-sketch.css — LaTeX-academic × pencil-sketch Moofin pattern: one DOM, CSS-only attribute switch. → raw academic paper (default) → wired-elements pencil-sketch overlay → orthogonal paper/mode toggle No DOM-swap on toggle — JS only flips the attribute, swaps the #theme-chip text, and propagates inert/aria-hidden on data-pair siblings so the a11y tree follows the visual flip. ═══════════════════════════════════════════════════ */ /* ── sketch-theme handwriting font (Gloria Hallelujah) ── Applied to all prose + headings + captions when in sketch mode. Exceptions (keep Courier New in BOTH themes): .latex-chip, .taskbar-right (clock), .gpg-key, .logo-caption, code, pre. Chrome is constant across moofin — chips stay monospace so the reader's muscle memory transfers between themes. */ [data-theme="sketch"] body, [data-theme="sketch"] .masthead-meta, [data-theme="sketch"] .masthead-niche, [data-theme="sketch"] .display-name, [data-theme="sketch"] section > h2, [data-theme="sketch"] .card > h3, [data-theme="sketch"] article.exp > h3, [data-theme="sketch"] .post-row > h3, [data-theme="sketch"] .skill-list > li, [data-theme="sketch"] .skill-list > li > b, [data-theme="sketch"] .proj-meta, [data-theme="sketch"] .post-meta, [data-theme="sketch"] .post-excerpt, [data-theme="sketch"] .contact-line, [data-theme="sketch"] .latex-taskbar, [data-theme="sketch"] .taskbar-center { font-family: "Gloria Hallelujah", "Crimson Text", cursive !important; text-align: left; hyphens: manual; } [data-theme="sketch"] body { text-align: left; hyphens: manual; } [data-theme="sketch"] p { text-align: left; } [data-theme="sketch"] .masthead-meta { text-align: left; } /* ── shared body (both themes) ── */ body { background: #fafafa !important; color: #1a1a1a !important; font-family: "Crimson Text", Georgia, "Times New Roman", serif !important; text-align: justify; line-height: 1.65; hyphens: auto; margin: 0; scroll-behavior: smooth; transition: background-color 0.3s ease, color 0.3s ease; } body a, body a:visited { color: #1a1a1a !important; text-decoration: underline; text-decoration-color: #aaa; text-underline-offset: 2px; } body a:hover { color: #000 !important; text-decoration-color: #333; } /* ── paper column ── */ .paper { max-width: 680px; margin: 0 auto; padding: 80px 32px 80px; box-sizing: border-box; } /* ── masthead ── */ .masthead { margin-bottom: 32px; } .display-name { font-family: "Crimson Text", Georgia, serif; font-size: 32px; font-weight: 700; letter-spacing: 0.4px; margin: 0 0 6px; text-align: left; display: inline-block; } .masthead-meta { font-size: 14px; color: #666; margin: 0 0 4px; font-style: italic; text-align: left; } .masthead-niche { font-variant: small-caps; letter-spacing: 1px; font-size: 13px; color: #444; margin: 0 0 12px; text-align: left; } /* ── sections:

with CSS-rule fallback under sketchy underline ── */ section { margin: 32px 0 24px; padding-top: 4px; } section > h2 { font-family: "Crimson Text", Georgia, serif; font-size: 17px; font-variant: small-caps; letter-spacing: 1px; font-weight: 600; margin: 0 0 16px; text-align: left; display: inline-block; } [data-theme="latex"] section > h2 { border-bottom: 1px solid #333; padding-bottom: 6px; } [data-theme="sketch"] section > h2 { border-bottom: none; padding-bottom: 0; } /* wired-divider replaces the latex
under section title in sketch mode */ [data-theme="latex"] .divider-sketch { display: none; } [data-theme="sketch"] .divider-latex { display: block; } /* ── inline stays as small-caps citation label ── */ b { font-variant: small-caps; letter-spacing: 1px; font-weight: 600; } /* ── misc typography ── */ small { font-size: 12px; color: #666; } p { margin: 8px 0; } ul { padding-left: 20px; } li { margin: 4px 0; } hr { border: none; border-top: 1px solid #333; margin: 24px 0; } code, pre { font-family: "Courier New", Courier, monospace; } /* ═══════════════════════════════════════════════════ MOOFIN VISIBILITY MATRIX ═══════════════════════════════════════════════════ */ /* default — every paired element: latex-card visible, sketch-card hidden */ [data-theme="latex"] .sketch-only { display: none !important; } [data-theme="sketch"] .latex-only { display: none !important; } /* paired project card containers */ [data-theme="latex"] .latex-card { display: block; } [data-theme="sketch"] .latex-card { display: none; } [data-theme="latex"] sketch-card, [data-theme="latex"] .sketch-card { display: none; } [data-theme="sketch"] .sketch-card { display: inline-block; } /* ═══════════════════════════════════════════════════ PROJECT CARD PAIRS Outer
holds:
— raw latex rendering — pencil-sketch rendering Same content twice, a11y tree handled via inert on the inactive one. ═══════════════════════════════════════════════════ */ .project { margin: 24px 0; position: relative; break-inside: avoid; } /* ── the latex-card variant styling ── */ [data-theme="latex"] .latex-card { border: 1px solid #ccc; padding: 14px 18px 18px; box-sizing: border-box; } /* ── the sketch-card (wired-card) wrapper touches ── */ [data-theme="sketch"] wired-card.sketch-card { display: block; padding: 14px 18px 18px; width: 100%; box-sizing: border-box; } /* shared project-card internals — visible in whichever of the pair is active */ .card > h3 { font-family: "Crimson Text", Georgia, serif; font-size: 16px; font-variant: small-caps; letter-spacing: 1px; font-weight: 600; margin: 0 0 4px; text-align: left; } .proj-meta { font-size: 12px; color: #666; font-style: italic; margin: 0 0 8px; text-align: left; } .proj-link { display: inline-block; margin-top: 6px; font-family: "Courier New", Courier, monospace; font-size: 13px; } /* ── skill list (label-then-colon) ── */ .skill-list { list-style: none; padding-left: 0; margin: 8px 0; } .skill-list > li { margin: 8px 0; padding-left: 0; text-align: left; } .skill-list > li > b { display: inline-block; width: 132px; font-size: 13px; color: #444; vertical-align: baseline; } /* ── experience entry ── */ article.exp { margin: 16px 0; padding: 4px 0 4px 14px; } article.exp > h3 { font-family: "Crimson Text", Georgia, serif; font-size: 15px; font-weight: 600; font-variant: small-caps; letter-spacing: 1px; margin: 0; text-align: left; } article.exp > ul { margin-top: 8px; } /* ── résumé / GPG blocks ── */ .resume-link { margin-top: 8px; font-size: 15px; } /* gpg block: single 
, no wrappers */
.gpg-key {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  background: transparent;
  color: #1a1a1a;
  padding: 12px 16px;
  margin: 8px 0;
  letter-spacing: 1px;
  word-break: break-all;
  text-align: left;
  display: inline-block;
  white-space: pre-wrap;
}
/* placeholder flag (dashed outline, monochrome) — visual edit-me hint */
.placeholder { outline: 1px dashed #999; outline-offset: 4px; }
a.placeholder { outline: 1px dashed #999; outline-offset: 4px; }
.placeholder-note {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: #999;
  margin-top: 2px;
}

/* ── correspondence row ── */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 32px;
  margin: 18px 0 8px;
  align-items: flex-start;
}
.logo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 8px;
  min-height: 36px;
}
.logo > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  text-decoration: none !important;
  border: none !important;
  color: #1a1a1a;
}
.logo-mark {
  fill: currentColor;
  stroke: none;
  color: #1a1a1a;
}
.logo > a:hover .logo-mark { color: #000; }
.logo-caption {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  color: #999;
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.logo.placeholder .logo-caption { color: #777; font-style: italic; }

/* logos row: 5 plain