@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/hanken-grotesk.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

html { background:#0b0b0b; }
body { margin:0; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }

#jubal-portfolio {
  color-scheme:dark;
  /* Surfaces */
  --jp-bg: light-dark(#f7f7f5, #0b0b0b);
  --jp-shade: light-dark(rgba(247,247,245,.86), rgba(8,8,8,.72));
  --jp-line: light-dark(rgba(29,29,27,.16), rgba(220,220,220,.16));
  /* Text roles: headings, prose, metadata */
  --jp-ink: light-dark(#1d1d1b, #f0f0ee);
  --jp-body: light-dark(#3b3b38, #d2d2cf);
  --jp-muted: light-dark(#575753, #adada9);
  /* Accent */
  --jp-accent-dark: #bccfb0;
  --jp-accent: light-dark(#47603a, var(--jp-accent-dark));
  --jp-width: 1000px;
  /* Figure surface + chart series (validated: all-pairs CVD and contrast, both modes) */
  /* Figures sit on the page itself: --jp-paper matches the textured page tone (sampled), for fills that must hide lines */
  --jp-paper: light-dark(#d8d8d5, #141414);
  --jp-figure: var(--jp-paper);
  --jp-series-1: light-dark(#4f7a3c, #6a9e55);
  --jp-series-2: light-dark(#3a6fb0, #5a8ae0);
  --jp-series-3: light-dark(#c0508a, #d05e98);
  /* Spacing scale (4px base) */
  --jp-s2: 8px; --jp-s3: 12px; --jp-s4: 16px; --jp-s6: 24px; --jp-s8: 32px; --jp-s12: 48px; --jp-s16: 64px; --jp-s20: 80px;

  background:linear-gradient(var(--jp-shade),var(--jp-shade)),url("assets/background.webp") center / cover no-repeat,var(--jp-bg);
  background-blend-mode:normal,luminosity;
  color:var(--jp-body);
  font:17px/1.65 "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  padding:var(--jp-s8) var(--jp-s12) var(--jp-s8);
  box-sizing:border-box; min-height:100vh;
}
#jubal-portfolio * { box-sizing:border-box; }
#jubal-portfolio [hidden] { display:none !important; }
#jubal-portfolio ::selection { background:color-mix(in srgb, var(--jp-accent) 35%, transparent); color:var(--jp-ink); }
#jubal-portfolio .jp-wrap { max-width:var(--jp-width); margin:0 auto; }
#jubal-portfolio h1, #jubal-portfolio h2, #jubal-portfolio h3, #jubal-portfolio p { margin:0; }
#jubal-portfolio h1, #jubal-portfolio h2, #jubal-portfolio h3 { color:var(--jp-ink); font-weight:500; text-wrap:balance; }
#jubal-portfolio p, #jubal-portfolio li { text-wrap:pretty; }

/* Links and focus */
#jubal-portfolio a { color:inherit; text-decoration:none; }
#jubal-portfolio a:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
#jubal-portfolio a:focus-visible, #jubal-portfolio button:focus-visible { outline:2px solid var(--jp-accent); outline-offset:4px; border-radius:4px; }
#jubal-portfolio button { font:inherit; color:inherit; }

/* Header */
#jubal-portfolio .jp-header { display:flex; align-items:center; justify-content:flex-end; }
#jubal-portfolio .jp-theme { border:1px solid var(--jp-line); background:none; width:40px; height:40px; padding:10px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--jp-muted); transition:color .2s, border-color .2s; }
#jubal-portfolio .jp-theme:hover { color:var(--jp-ink); border-color:var(--jp-muted); }
#jubal-portfolio .jp-theme svg { width:18px; height:18px; }

/* Hero */
#jubal-portfolio .jp-hero { padding:var(--jp-s6) 0 var(--jp-s20); }
#jubal-portfolio h1 { font-size:clamp(36px,5.6vw,56px); line-height:1.1; letter-spacing:-.03em; max-width:30ch; }
#jubal-portfolio .jp-bio { display:grid; grid-template-columns:148px minmax(0,1fr) auto; gap:var(--jp-s8); align-items:start; margin-top:var(--jp-s12); }
#jubal-portfolio .jp-portrait { width:148px; height:178px; object-fit:cover; object-position:50% 50%; border-radius:4px; filter:saturate(.85); }
#jubal-portfolio .jp-intro { max-width:66ch; font-size:18px; line-height:1.65; }
#jubal-portfolio .jp-intro + .jp-intro { margin-top:var(--jp-s4); font-size:17px; color:var(--jp-muted); }
#jubal-portfolio .jp-intro strong { color:var(--jp-ink); font-weight:500; }

#jubal-portfolio .jp-links { display:flex; align-items:center; gap:var(--jp-s4) var(--jp-s6); flex-wrap:wrap; margin-top:var(--jp-s8); font-size:15px; color:var(--jp-ink); }
#jubal-portfolio .jp-links a:not(.jp-primary) { color:var(--jp-body); }
#jubal-portfolio .jp-links a:not(.jp-primary):hover { color:var(--jp-ink); }
#jubal-portfolio .jp-primary { display:inline-flex; align-items:center; height:40px; padding:0 var(--jp-s4); border-radius:999px; background:var(--jp-ink); color:var(--jp-bg); font-weight:500; transition:opacity .2s; }
#jubal-portfolio .jp-primary:hover { text-decoration:none; opacity:.86; }

/* Contact icons in the hero */
#jubal-portfolio .jp-icons { display:flex; align-items:center; gap:var(--jp-s3); margin-top:var(--jp-s8); }
#jubal-portfolio .jp-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--jp-body); transition:color .2s, transform .2s cubic-bezier(.16,1,.3,1); }
#jubal-portfolio .jp-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .jp-icon:hover { text-decoration:none; color:var(--jp-accent); transform:translateY(-1px); }
#jubal-portfolio .jp-icon.is-primary { color:var(--jp-ink); }
#jubal-portfolio .jp-icons { gap:var(--jp-s2); margin-left:-8px; }

/* Sections */
#jubal-portfolio .jp-section { padding:0 0 var(--jp-s16); scroll-margin-top:var(--jp-s6); }
#jubal-portfolio .jp-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:var(--jp-s4); padding-bottom:var(--jp-s3); border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-section-heading h2 { font-size:28px; line-height:1.25; letter-spacing:-.02em; }
#jubal-portfolio .jp-section-heading a { font-size:14px; color:var(--jp-muted); white-space:nowrap; }
#jubal-portfolio .jp-section-heading a:hover { color:var(--jp-ink); }
#jubal-portfolio .jp-section-description { margin-top:var(--jp-s4); color:var(--jp-muted); font-size:15px; }

/* Shared row roles */
#jubal-portfolio .jp-meta { color:var(--jp-muted); font-size:13px; letter-spacing:.01em; margin-top:var(--jp-s3); font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-year { font-size:14px; color:var(--jp-muted); padding-top:3px; font-variant-numeric:tabular-nums; }

/* Project + note rows */
#jubal-portfolio .jp-project, #jubal-portfolio .jp-note { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--jp-s6); padding:var(--jp-s6) 0; border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-project:hover, #jubal-portfolio .jp-note:hover { text-decoration:none; }
#jubal-portfolio .jp-project:hover h3, #jubal-portfolio .jp-note:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
#jubal-portfolio .jp-project h3, #jubal-portfolio .jp-note h3 { font-size:20px; letter-spacing:-.01em; line-height:1.35; }
#jubal-portfolio .jp-project p, #jubal-portfolio .jp-note p { margin-top:var(--jp-s2); font-size:16px; line-height:1.65; max-width:70ch; }
#jubal-portfolio .jp-arrow { color:var(--jp-muted); font-size:20px; line-height:1.35; transition:color .2s, transform .25s cubic-bezier(.16,1,.3,1); }
#jubal-portfolio .jp-project:hover .jp-arrow { color:var(--jp-accent); transform:translate(2px,-2px); }
#jubal-portfolio .jp-note-time { color:var(--jp-muted); font-size:13px; padding-top:5px; white-space:nowrap; }

/* Research + experience rows */
#jubal-portfolio .jp-research-row, #jubal-portfolio .jp-job { display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--jp-s6); padding:var(--jp-s6) 0; }
#jubal-portfolio .jp-research-row { border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-research-row h3, #jubal-portfolio .jp-job h3 { font-size:20px; letter-spacing:-.01em; line-height:1.4; }
#jubal-portfolio .jp-research-row p { font-size:15px; color:var(--jp-muted); margin-top:var(--jp-s2); }
#jubal-portfolio .jp-research-row .jp-meta { color:var(--jp-accent); margin-top:var(--jp-s2); }
#jubal-portfolio .jp-job .jp-job-title { margin:2px 0 var(--jp-s3); font-size:15px; color:var(--jp-accent); }
#jubal-portfolio .jp-job p { font-size:16px; line-height:1.7; max-width:70ch; }

/* Paper entry (research with a summary and a figure) */
#jubal-portfolio .jp-paper { display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--jp-s6); padding:var(--jp-s6) 0; border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-paper h3 { font-size:22px; line-height:1.35; letter-spacing:-.012em; }
#jubal-portfolio .jp-paper h3 a:hover { text-decoration-thickness:1px; text-underline-offset:5px; }
#jubal-portfolio .jp-paper-venue { margin-top:var(--jp-s2); font-size:14px; color:var(--jp-accent); }
#jubal-portfolio .jp-paper-summary { margin-top:var(--jp-s4); font-size:16px; line-height:1.7; max-width:72ch; }
#jubal-portfolio .jp-paper .jp-figure { margin-top:var(--jp-s6); }
#jubal-portfolio .jp-paper .jp-links { margin-top:var(--jp-s4); }

/* Figures */
#jubal-portfolio .jp-figure { margin:var(--jp-s8) 0; }
#jubal-portfolio .jp-figure > :first-child { background:var(--jp-figure); border:1px solid var(--jp-line); border-radius:8px; padding:var(--jp-s6); }
#jubal-portfolio .jp-figure figcaption { margin-top:var(--jp-s3); font-size:14px; line-height:1.6; color:var(--jp-muted); max-width:68ch; text-wrap:pretty; }
#jubal-portfolio .jp-figure figcaption strong { color:var(--jp-ink); font-weight:500; margin-right:6px; }

/* Charts (rendered by charts.js) */
#jubal-portfolio .jp-chart-legend { display:flex; flex-wrap:wrap; gap:var(--jp-s2) var(--jp-s6); list-style:none; margin:0 0 var(--jp-s4); padding:0; font-size:14px; color:var(--jp-body); }
#jubal-portfolio .jp-chart-legend li { display:inline-flex; align-items:center; gap:var(--jp-s2); }
#jubal-portfolio .jp-chart-key { width:16px; height:2px; border-radius:2px; background:var(--key); }
#jubal-portfolio .jp-chart-plot { position:relative; }
#jubal-portfolio .jp-chart-plot:focus-visible { outline:2px solid var(--jp-accent); outline-offset:6px; border-radius:4px; }
#jubal-portfolio .jp-chart-plot svg { display:block; overflow:visible; font-family:inherit; }
#jubal-portfolio .jp-chart-grid line { stroke:var(--jp-line); stroke-width:1; }
#jubal-portfolio .jp-chart-tick { fill:var(--jp-muted); font-size:12px; font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-chart-xlabel { fill:var(--jp-body); font-size:13px; }
#jubal-portfolio .jp-chart-note { fill:var(--jp-muted); font-size:12px; }
#jubal-portfolio .jp-chart-ref { stroke:var(--jp-muted); stroke-width:1; opacity:.6; }
#jubal-portfolio .jp-chart-line { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .jp-chart-dot { stroke:var(--jp-figure); stroke-width:2; }
#jubal-portfolio .jp-chart-endlabel { fill:var(--jp-ink); font-size:13px; }
#jubal-portfolio .jp-chart-cross { stroke:var(--jp-muted); stroke-width:1; }
#jubal-portfolio .jp-chart-bar { fill:light-dark(#7a7a75, #8c8c88); transition:opacity .15s; }
#jubal-portfolio .jp-chart-bar.is-hover { opacity:.78; }
#jubal-portfolio .jp-chart-value { fill:var(--jp-ink); font-size:13px; font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-chart-hit { fill:transparent; outline:none; }
#jubal-portfolio .jp-chart-hit:focus-visible { fill:color-mix(in srgb, var(--jp-ink) 6%, transparent); }
#jubal-portfolio .jp-chart-tip { position:absolute; top:0; left:0; z-index:2; pointer-events:none; min-width:150px; padding:var(--jp-s2) var(--jp-s3); border-radius:6px; background:var(--jp-bg); border:1px solid var(--jp-line); box-shadow:0 6px 20px rgba(0,0,0,.18); font-size:13px; line-height:1.5; }
#jubal-portfolio .jp-chart-tip-title { color:var(--jp-muted); font-size:12px; margin-bottom:4px; }
#jubal-portfolio .jp-chart-tip-row { display:flex; align-items:center; gap:var(--jp-s2); white-space:nowrap; }
#jubal-portfolio .jp-chart-tip-row strong { color:var(--jp-ink); font-weight:600; font-variant-numeric:tabular-nums; min-width:44px; }
#jubal-portfolio .jp-chart-tip-row span:last-child { color:var(--jp-muted); }
#jubal-portfolio .jp-chart-tip-key { width:12px; height:2px; border-radius:2px; background:var(--key); }
#jubal-portfolio .jp-chart-table { margin-top:var(--jp-s4); font-size:13px; color:var(--jp-muted); }
#jubal-portfolio .jp-chart-table summary { cursor:pointer; width:max-content; }
#jubal-portfolio .jp-chart-table summary:hover { color:var(--jp-ink); }
#jubal-portfolio .jp-chart-table table { margin-top:var(--jp-s3); border-collapse:collapse; font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-chart-table :is(th, td) { padding:6px 16px 6px 0; text-align:left; border-bottom:1px solid var(--jp-line); font-weight:400; }
#jubal-portfolio .jp-chart-table thead th { color:var(--jp-muted); }
#jubal-portfolio .jp-chart-table tbody th { color:var(--jp-body); }
#jubal-portfolio .jp-chart-table td { color:var(--jp-ink); }

/* Flow diagram */
#jubal-portfolio .jp-flow { display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr); grid-template-rows:auto auto; grid-template-areas:"img a1 ienc join sim a3 out" "txt a2 tenc join sim a3 out"; gap:var(--jp-s3) 6px; align-items:center; }
#jubal-portfolio .jp-flow-node { display:flex; flex-direction:column; gap:2px; padding:var(--jp-s3); border:1px solid var(--jp-line); border-radius:6px; background:var(--jp-paper); min-height:64px; justify-content:center; }
#jubal-portfolio .jp-flow-title { font-size:14px; font-weight:500; color:var(--jp-ink); line-height:1.3; }
#jubal-portfolio .jp-flow-sub { font-size:12px; color:var(--jp-muted); line-height:1.4; }
#jubal-portfolio .jp-flow-img { grid-area:img; } #jubal-portfolio .jp-flow-ienc { grid-area:ienc; }
#jubal-portfolio .jp-flow-txt { grid-area:txt; } #jubal-portfolio .jp-flow-tenc { grid-area:tenc; }
#jubal-portfolio .jp-flow-sim { grid-area:sim; } #jubal-portfolio .jp-flow-out { grid-area:out; border-color:var(--jp-accent); }
#jubal-portfolio .jp-flow-a1 { grid-area:a1; } #jubal-portfolio .jp-flow-a2 { grid-area:a2; } #jubal-portfolio .jp-flow-a3 { grid-area:a3; }
#jubal-portfolio .jp-flow-arrow { display:flex; justify-content:center; color:var(--jp-muted); }
#jubal-portfolio .jp-flow-arrow svg { width:24px; height:12px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .jp-flow-join { grid-area:join; align-self:stretch; position:relative; }
#jubal-portfolio .jp-flow-join::before { content:""; position:absolute; left:0; right:50%; top:32px; bottom:32px; border:1.25px solid var(--jp-muted); border-left:0; border-radius:0 6px 6px 0; }
#jubal-portfolio .jp-flow-join::after { content:""; position:absolute; left:50%; right:0; top:50%; border-top:1.25px solid var(--jp-muted); }

/* Linear pipeline */
#jubal-portfolio .jp-chain { display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr); align-items:stretch; gap:6px; }
#jubal-portfolio .jp-chain-node { display:flex; flex-direction:column; gap:4px; padding:var(--jp-s3); border:1px solid var(--jp-line); border-radius:6px; background:var(--jp-paper); }
#jubal-portfolio .jp-chain-node:last-child { border-color:var(--jp-accent); }
#jubal-portfolio .jp-chain-arrow { display:flex; align-items:center; justify-content:center; color:var(--jp-muted); }
#jubal-portfolio .jp-chain-arrow svg { width:24px; height:12px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .jp-chart-bar.is-emphasis { fill:var(--jp-series-1); }

/* Tiered attention figure */
#jubal-portfolio .jp-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--jp-s4); }
#jubal-portfolio .jp-tier img { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:4px; }
#jubal-portfolio .jp-detail .jp-tier-name, #jubal-portfolio .jp-tier-name { margin-top:var(--jp-s3); font-size:13px; font-weight:500; color:var(--jp-ink); }
#jubal-portfolio .jp-detail .jp-tier-prompt, #jubal-portfolio .jp-tier-prompt { margin-top:2px; font-size:13px; line-height:1.5; color:var(--jp-muted); }

/* Step diagram (tentative landmark extraction) */
#jubal-portfolio .jp-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--jp-s6); }
#jubal-portfolio .jp-detail .jp-step-name, #jubal-portfolio .jp-step-name { font-size:13px; font-weight:500; color:var(--jp-ink); margin-bottom:var(--jp-s2); }
#jubal-portfolio .jp-step svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
#jubal-portfolio .tl-node circle { fill:var(--jp-paper); stroke:var(--jp-muted); stroke-width:1.25; }
#jubal-portfolio .tl-node text { fill:var(--jp-ink); font-size:14px; font-weight:500; text-anchor:middle; dominant-baseline:central; }
#jubal-portfolio .tl-node.is-end circle { fill:var(--jp-ink); stroke:var(--jp-ink); }
#jubal-portfolio .tl-node.is-end text { fill:var(--jp-figure); }
#jubal-portfolio .tl-node.is-lm circle { fill:var(--jp-series-1); stroke:var(--jp-series-1); }
#jubal-portfolio .tl-node.is-lm text { fill:#fff; }
#jubal-portfolio .tl-node.is-ghost circle { fill:none; stroke-dasharray:3 3; opacity:.55; }
#jubal-portfolio .tl-node.is-ghost text { fill:var(--jp-muted); opacity:.8; }
#jubal-portfolio .tl-edge { stroke:var(--jp-muted); stroke-width:1.25; }
#jubal-portfolio .tl-edge.is-ghost { stroke-dasharray:3 3; opacity:.5; }
#jubal-portfolio .tl-head { fill:none; stroke:var(--jp-muted); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .tl-head.is-ghost { opacity:.5; }
#jubal-portfolio .tl-tag { fill:var(--jp-body); font-size:14px; dominant-baseline:central; }
#jubal-portfolio .tl-tag.is-ghost { fill:var(--jp-muted); }
#jubal-portfolio .tl-note { fill:var(--jp-muted); font-size:13.5px; }
#jubal-portfolio .tl-callout { fill:var(--jp-ink); font-size:13.5px; }

/* Overshoot penalty example */
#jubal-portfolio .jp-pen { display:grid; gap:var(--jp-s3); }
#jubal-portfolio .jp-pen-head, #jubal-portfolio .jp-pen-row { display:grid; grid-template-columns:96px minmax(0,1fr) 52px 52px; gap:var(--jp-s3); align-items:center; }
#jubal-portfolio .jp-pen-head { font-size:12px; color:var(--jp-muted); }
#jubal-portfolio .jp-pen-head span:nth-child(n+3), #jubal-portfolio .jp-pen-score { text-align:right; }
#jubal-portfolio .jp-pen-goal { display:flex; flex-direction:column; font-size:14px; font-weight:500; color:var(--jp-ink); line-height:1.3; }
#jubal-portfolio .jp-pen-goal small { font-size:12px; font-weight:400; color:var(--jp-muted); }
#jubal-portfolio .jp-pen-strip { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; }
#jubal-portfolio .jp-pen-cell { display:block; height:18px; border-radius:3px; }
#jubal-portfolio .jp-pen-cell.is-obs { background:var(--jp-muted); opacity:.7; }
#jubal-portfolio .jp-pen-cell.is-over { background:var(--jp-series-3); }
#jubal-portfolio .jp-pen-cell.is-left { box-shadow:inset 0 0 0 1px var(--jp-muted); opacity:.6; }
#jubal-portfolio .jp-pen-score { white-space:nowrap; font-size:15px; color:var(--jp-body); font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-pen-score.is-down { color:var(--jp-ink); font-weight:600; }
#jubal-portfolio .jp-pen-score.is-win { color:var(--jp-ink); font-weight:600; }
#jubal-portfolio .jp-pen-score.is-win::before, #jubal-portfolio .jp-table td.is-best::after { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--jp-accent); vertical-align:middle; }
#jubal-portfolio .jp-pen-score.is-win::before { margin-right:6px; }
#jubal-portfolio .jp-pen-legend { display:flex; flex-wrap:wrap; gap:var(--jp-s2) var(--jp-s6); list-style:none; margin:var(--jp-s2) 0 0; padding:0; font-size:12px; color:var(--jp-muted); }
#jubal-portfolio .jp-detail .jp-pen-legend li { display:inline-flex; align-items:center; gap:var(--jp-s2); font-size:12px; padding:0; line-height:1.4; }
#jubal-portfolio .jp-pen-legend .jp-pen-cell { width:14px; height:10px; }

/* Data table */
#jubal-portfolio .jp-table-wrap { overflow-x:auto; }
#jubal-portfolio .jp-table { width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-table th, #jubal-portfolio .jp-table td { padding:10px 12px; text-align:right; border-bottom:1px solid var(--jp-line); font-weight:400; white-space:nowrap; }
#jubal-portfolio .jp-table :is(th, td):first-child { text-align:left; padding-left:0; }
#jubal-portfolio .jp-table thead th { font-size:13px; color:var(--jp-muted); vertical-align:bottom; white-space:normal; }
#jubal-portfolio .jp-table tbody th { color:var(--jp-ink); }
#jubal-portfolio .jp-table td { color:var(--jp-body); }
#jubal-portfolio .jp-table td.is-best { color:var(--jp-ink); font-weight:600; }
#jubal-portfolio .jp-table td.is-best::after { margin-left:6px; }
#jubal-portfolio .jp-table tbody tr:last-child :is(th, td) { border-bottom:0; }

/* Hand-drawn figures (sketch.js). Paper: a faint dot grid; ink: wobbly doubled strokes. */
#jubal-portfolio .jp-figure > :first-child { background:radial-gradient(color-mix(in srgb, var(--jp-muted) 32%, transparent) .8px, transparent 1.2px) 0 0 / 18px 18px; }
#jubal-portfolio .sk-stroke { fill:none; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .sk-second { stroke-opacity:.45; }
#jubal-portfolio .sk-hatch { stroke-opacity:.85; }
#jubal-portfolio [data-sketched]:is(line, path, circle, polyline) { stroke-opacity:0; }
#jubal-portfolio .jp-chart-bar[data-sketched] { fill-opacity:.1; }
#jubal-portfolio .jp-chart-bar.is-hover[data-sketched] { fill-opacity:.32; opacity:1; }
#jubal-portfolio [data-sketch]:not([data-sketch="img"]) { position:relative; border-color:transparent !important; box-shadow:none !important; }
#jubal-portfolio .sk-box { position:absolute; left:-3px; top:-3px; overflow:visible; pointer-events:none; }
#jubal-portfolio .jp-pen-cell[data-sketch] > .sk-box, #jubal-portfolio .jp-flow-join > .sk-box { left:-2px; top:-2px; }
#jubal-portfolio [data-sketch="frame"] > .sk-box .sk-stroke { stroke:color-mix(in srgb, var(--jp-muted) 55%, transparent); }
#jubal-portfolio [data-sketch="box"] > .sk-box .sk-stroke, #jubal-portfolio [data-sketch="join"] > .sk-box .sk-stroke { stroke:var(--jp-muted); }
#jubal-portfolio :is(.jp-flow-out, .jp-chain-node:last-child)[data-sketch] > .sk-box .sk-stroke { stroke:var(--jp-accent); }
#jubal-portfolio .jp-flow-join[data-sketch]::before, #jubal-portfolio .jp-flow-join[data-sketch]::after { display:none; }
#jubal-portfolio .jp-pen-cell[data-sketch] { background:none !important; opacity:1; }
#jubal-portfolio .jp-pen-cell.is-obs > .sk-box .sk-stroke { stroke:var(--jp-muted); }
#jubal-portfolio .jp-pen-cell.is-over > .sk-box .sk-stroke { stroke:var(--jp-series-3); }
#jubal-portfolio .jp-pen-cell.is-left > .sk-box .sk-stroke { stroke:var(--jp-muted); stroke-opacity:.7; }
#jubal-portfolio [data-sketch="img"] img { border-radius:3px 7px 4px 6px / 6px 3px 7px 4px; }

/* Note figures (hand-drawn diagrams inside reading notes) */
#jubal-portfolio .jp-note-figure > div > svg:not(.sk-box) { display:block; width:100%; max-width:620px; height:auto; margin:0 auto; overflow:visible; font-family:inherit; }
#jubal-portfolio .nt-box { fill:none; stroke:var(--jp-muted); stroke-width:1.2; }
#jubal-portfolio .nt-edge { fill:none; stroke:var(--jp-muted); stroke-width:1.2; }
#jubal-portfolio .nt-axis { stroke:var(--jp-line); stroke-width:1; }
#jubal-portfolio .nt-curve { fill:none; stroke:var(--jp-series-1); stroke-width:2; }
#jubal-portfolio .nt-flat { fill:none; stroke:var(--jp-series-3); stroke-width:3.5; stroke-opacity:.55; }
#jubal-portfolio .nt-dash { fill:none; stroke:var(--jp-muted); stroke-width:1; stroke-dasharray:3 4; }
#jubal-portfolio .nt-unit { fill:none; stroke:var(--jp-body); stroke-width:1.1; }
#jubal-portfolio .nt-unit.is-hot { fill:var(--jp-series-1); stroke:var(--jp-series-1); }
#jubal-portfolio .nt-unit.is-node { fill:var(--jp-paper); stroke:var(--jp-ink); }
#jubal-portfolio .nt-text, #jubal-portfolio .nt-char { fill:var(--jp-ink); font-size:15px; font-weight:500; }
#jubal-portfolio .nt-note { fill:var(--jp-muted); font-size:12.5px; }
#jubal-portfolio .nt-label { fill:var(--jp-muted); font-size:12px; letter-spacing:.02em; }
#jubal-portfolio .jp-note-photo > div { padding:var(--jp-s4) !important; }
#jubal-portfolio .jp-note-photo img { display:block; width:100%; max-width:560px; height:auto; margin:0 auto; border-radius:3px 7px 4px 6px / 6px 3px 7px 4px; }
#jubal-portfolio .jp-reading-body code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88em; padding:1px 5px; border-radius:4px; background:color-mix(in srgb, var(--jp-muted) 16%, transparent); color:var(--jp-ink); }
#jubal-portfolio .jp-reading-body > :is(p, h2, ul) { max-width:70ch; }

/* Arivu sketches: panels side by side on desktop, stacked on phones; text keeps its size because panels stay near 1:1 */
#jubal-portfolio .ar-grid { display:grid; gap:var(--jp-s4); max-width:620px; margin:0 auto; }
#jubal-portfolio .ar-grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
#jubal-portfolio .ar-grid--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
#jubal-portfolio .ar-grid--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
#jubal-portfolio .ar-grid > svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
#jubal-portfolio .jp-note-figure > div > svg.ar-tall { display:none; max-width:320px; }
#jubal-portfolio .ar-grid .nt-note { font-size:12.5px; }
#jubal-portfolio .ar-grid .nt-label { font-size:12px; }
#jubal-portfolio .ar-grid .nt-text { font-size:15px; }
#jubal-portfolio .ar-grid .nt-text.nt-q { font-size:22px; }
@media (max-width:650px) {
  #jubal-portfolio .ar-grid--2 { grid-template-columns:1fr; gap:var(--jp-s8); max-width:340px; }
  #jubal-portfolio .ar-grid--4 { grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--jp-s6) var(--jp-s4); }
  #jubal-portfolio .ar-grid--3 { grid-template-columns:1fr; gap:var(--jp-s6); max-width:260px; }
  #jubal-portfolio .ar-grid--3 .pi-arrow { display:none; }
  #jubal-portfolio .jp-note-figure > div > svg.ar-wide { display:none; }
  #jubal-portfolio .jp-note-figure > div > svg.ar-tall { display:block; }
  #jubal-portfolio .ar-tall .nt-note { font-size:13px; }
  #jubal-portfolio .ar-tall .nt-label { font-size:12px; }
}

/* Arivu "Built over time" sketch (neural.js), restyled from the Arivu website for this site's themes.
   The WebGL scene reads its colours from the --nm-* properties, so both themes work. */
#jubal-portfolio .net-preview { --nm-ink:var(--jp-ink); --nm-graphite:var(--jp-muted); --nm-paper:var(--jp-paper); --nm-learned:var(--jp-accent); --nm-learn:light-dark(#a8661f, #d39a52); --nm-identity:var(--jp-series-1); --nm-education:var(--jp-series-2); --nm-research:light-dark(#b0682a, #d9924a); --nm-studio:var(--jp-series-3); --nm-mono:ui-monospace, SFMono-Regular, Menlo, monospace; --nm-serif:"STIX Two Text", Georgia, serif; position:relative; }
#jubal-portfolio .net-col { display:flex; flex-direction:column; gap:var(--jp-s3); max-width:760px; margin:0 auto; }
#jubal-portfolio .net-ink-identity { --c:var(--nm-identity); }
#jubal-portfolio .net-ink-education { --c:var(--nm-education); }
#jubal-portfolio .net-ink-research { --c:var(--nm-research); }
#jubal-portfolio .net-ink-studio { --c:var(--nm-studio); }
#jubal-portfolio .net-probe { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
#jubal-portfolio .jp-detail .net-loading { margin:0; padding:var(--jp-s12) 0; text-align:center; color:var(--jp-muted); font-size:14px; }
#jubal-portfolio .net-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--jp-s3); flex-wrap:wrap; }
#jubal-portfolio .net-status { display:flex; align-items:center; gap:8px; min-height:1.5em; color:var(--jp-muted); font:11px/1.4 var(--nm-mono); letter-spacing:.08em; text-transform:uppercase; }
#jubal-portfolio .net-status::before { content:""; flex:0 0 7px; height:7px; border-radius:50%; background:var(--jp-accent); }
#jubal-portfolio .net-status[data-busy="true"]::before { background:var(--nm-learn); }
@keyframes net-pulse { 50% { opacity:.25; } }
#jubal-portfolio .net-tools { display:flex; gap:var(--jp-s2); }
#jubal-portfolio .net-btn { border:1px solid var(--jp-line); background:none; color:var(--jp-body); border-radius:999px; padding:4px 12px; font:12px/1.4 var(--nm-mono); letter-spacing:.04em; transition:color .2s, border-color .2s; }
#jubal-portfolio .net-btn:hover { color:var(--jp-ink); border-color:var(--jp-muted); }
#jubal-portfolio .net-bubble { position:relative; align-self:flex-end; width:min(100%, 82%); min-height:96px; padding:10px 16px 14px; border-radius:16px 16px 4px 16px; background:var(--jp-accent); color:var(--jp-bg); }
#jubal-portfolio .net-bubble small { font:11px var(--nm-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
#jubal-portfolio .jp-detail .net-bubble p { margin:4px 0 0; font:15px/1.55 var(--nm-serif); color:inherit; max-width:none; }
#jubal-portfolio .net-mark { background:linear-gradient(var(--m), var(--m)) no-repeat 0 100% / 0% 2px; color:inherit; padding-bottom:1px; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .9s cubic-bezier(.22,.68,.2,1); }
#jubal-portfolio .net-mark.net-ink-identity { --m:light-dark(#dfe8c4, #3f6b2e); }
#jubal-portfolio .net-mark.net-ink-education { --m:light-dark(#bcd8de, #2f5f9e); }
#jubal-portfolio .net-mark.net-ink-research { --m:light-dark(#f0c995, #9a5a1c); }
#jubal-portfolio .net-mark.net-ink-studio { --m:light-dark(#f3b8a6, #a8436f); }
#jubal-portfolio .net-mark[data-on="true"] { background-size:100% 2px; }
#jubal-portfolio .net-dots { display:inline-flex; gap:5px; padding:6px 0; }
#jubal-portfolio .net-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:net-pulse 1s ease-in-out infinite; }
#jubal-portfolio .net-dots i:nth-child(2) { animation-delay:.15s; }
#jubal-portfolio .net-dots i:nth-child(3) { animation-delay:.3s; }
#jubal-portfolio .net-send { position:absolute; right:12px; bottom:-12px; padding:4px 10px; border:1px solid var(--jp-accent); border-radius:999px; background:var(--jp-paper); color:var(--jp-accent); font:11px var(--nm-mono); letter-spacing:.06em; transition:transform .15s; }
#jubal-portfolio .net-send[data-pressed="true"] { background:var(--jp-accent); color:var(--jp-bg); transform:scale(.88); }
#jubal-portfolio .net-caret { display:inline-block; width:1px; height:1em; margin-left:2px; background:currentColor; vertical-align:-2px; }
#jubal-portfolio .net-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#jubal-portfolio .net-stage { position:relative; aspect-ratio:16 / 11; overflow:hidden; margin-top:var(--jp-s2); cursor:grab; }
#jubal-portfolio .net-stage[data-dragging="true"] { cursor:grabbing; }
#jubal-portfolio .net-stage > * { transition:opacity .5s ease; }
#jubal-portfolio .net-stage[data-fade="true"] > :not(.net-hint) { opacity:0 !important; }
#jubal-portfolio .net-stage canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
#jubal-portfolio .net-counter { position:absolute; z-index:1; left:4px; top:4px; display:grid; gap:2px; pointer-events:none; }
#jubal-portfolio .net-counter small { color:var(--jp-muted); font:11px var(--nm-mono); letter-spacing:.1em; text-transform:uppercase; }
#jubal-portfolio .net-counter b { color:var(--nm-learn); font:400 22px/1 var(--nm-mono); font-variant-numeric:tabular-nums; }
#jubal-portfolio .net-layer { position:absolute; left:0; top:0; color:var(--jp-muted); font:11px var(--nm-mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; pointer-events:none; }
#jubal-portfolio .net-layer[data-memory="true"] { color:var(--jp-accent); }
#jubal-portfolio .net-token { position:absolute; z-index:2; left:0; top:0; padding:3px 9px 2px; border:1.5px solid var(--jp-ink); border-radius:6px 9px 7px 8px; background:var(--jp-paper); color:var(--jp-ink); font:12px var(--nm-mono); white-space:nowrap; box-shadow:2px 2px 0 var(--jp-ink); opacity:0; pointer-events:none; will-change:transform; }
#jubal-portfolio .net-token[data-on="false"] { visibility:hidden; }
#jubal-portfolio .net-leaders { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#jubal-portfolio .net-leaders path { fill:none; stroke:var(--c); stroke-width:1; stroke-opacity:.75; stroke-dasharray:2 3; }
#jubal-portfolio .net-label { position:absolute; z-index:2; left:0; top:0; display:grid; gap:3px; padding:4px 6px; border:0; background:none; color:var(--jp-ink); font:italic 15px/1.1 var(--nm-serif); text-align:left; white-space:nowrap; text-shadow:0 0 4px var(--jp-paper), 0 0 8px var(--jp-paper); opacity:0; transition:opacity .5s; will-change:transform; }
#jubal-portfolio .net-label small { color:var(--c); font:11px/1.2 var(--nm-mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; }
#jubal-portfolio .net-label[data-on="true"] { opacity:1; }
#jubal-portfolio .net-label[data-on="true"][data-front="false"] { opacity:.6; }
#jubal-portfolio .net-label[data-on="false"] { pointer-events:none; }
#jubal-portfolio .net-label:focus-visible { outline:1px solid var(--c); outline-offset:2px; border-radius:6px; }
#jubal-portfolio .net-link { position:absolute; z-index:1; left:0; top:0; padding:2px 8px; border:1px dashed var(--c); border-radius:999px; background:var(--jp-paper); color:var(--c); font:11px var(--nm-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; opacity:0; transition:opacity .6s; pointer-events:none; }
#jubal-portfolio .net-link[data-on="true"] { opacity:1; }
#jubal-portfolio .net-tooltip { position:absolute; z-index:3; right:4px; top:4px; width:min(300px, 62%); padding:11px 14px; border-radius:10px; background:var(--jp-ink); color:var(--jp-bg); box-shadow:0 14px 30px -12px #0008; pointer-events:none; }
#jubal-portfolio .net-tooltip small { font:11px var(--nm-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
#jubal-portfolio .jp-detail .net-tooltip p { margin:5px 0 0; font:italic 14px/1.45 var(--nm-serif); color:inherit; }
#jubal-portfolio .net-hint { position:absolute; right:4px; bottom:4px; display:flex; align-items:center; gap:6px; color:var(--jp-muted); font:11px var(--nm-mono); letter-spacing:.1em; text-transform:uppercase; pointer-events:none; }
#jubal-portfolio .net-hint svg { width:22px; height:11px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .jp-detail .net-fallback { position:absolute; inset:0; display:grid; place-content:center; gap:10px; margin:0; padding:0; list-style:none; color:var(--jp-ink); font:italic 17px var(--nm-serif); text-align:center; }
#jubal-portfolio .jp-detail .net-fallback li { padding:0; }
#jubal-portfolio .net-fallback small { display:block; color:var(--jp-muted); font:11px var(--nm-mono); font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
#jubal-portfolio .jp-detail .net-fallback-note { position:absolute; left:0; right:0; bottom:4px; margin:0 auto; max-width:46ch; text-align:center; color:var(--jp-muted); font-size:13px; line-height:1.5; }
#jubal-portfolio .net-stage[data-failed="true"] { cursor:default; }
#jubal-portfolio .net-stage[data-failed="true"] > :is(.net-layer, .net-counter, .net-hint, .net-label, .net-link, .net-token, .net-leaders, .net-tooltip, canvas) { display:none; }
#jubal-portfolio .net-preview[data-failed="true"] :is(.net-tools, .net-caption) { display:none; }
#jubal-portfolio .jp-detail .net-caption { margin:0; color:var(--jp-muted); font:11px/1.5 var(--nm-mono); letter-spacing:.06em; text-align:center; text-transform:uppercase; }
#jubal-portfolio .net-caption b { color:var(--jp-ink); font-weight:400; }
@media (max-width:650px) {
  #jubal-portfolio .net-bubble { width:100%; min-height:112px; }
  #jubal-portfolio .net-stage { aspect-ratio:4 / 3; }
  #jubal-portfolio .jp-detail .net-bubble p { font-size:14px; }
  #jubal-portfolio .net-label { font-size:13px; padding:2px 7px; border-radius:999px; background:color-mix(in srgb, var(--jp-paper) 90%, transparent); box-shadow:0 0 0 1px var(--jp-line); text-shadow:none; }
  #jubal-portfolio .net-label small, #jubal-portfolio .net-layer:not([data-memory="true"]), #jubal-portfolio .net-link { display:none; }
  #jubal-portfolio .net-token { padding:2px 6px; font-size:11px; }
  #jubal-portfolio .net-counter b { font-size:16px; }
  #jubal-portfolio .net-hint { right:auto; left:4px; }
  #jubal-portfolio .net-leaders path { stroke-opacity:.5; }
}
@media (prefers-reduced-motion:reduce) {
  #jubal-portfolio .net-dots i { animation:none !important; }
}

/* Maths-evaluation sketches */
#jubal-portfolio .me-line { fill:var(--jp-body); font-size:13px; }
#jubal-portfolio .me-line.is-red { fill:var(--jp-muted); }
#jubal-portfolio .me-ans { fill:var(--jp-series-1); font-size:14px; font-weight:600; }
#jubal-portfolio .me-strike { fill:none; stroke:var(--jp-series-3); stroke-width:1.8; }
#jubal-portfolio .nt-box.is-challenge { stroke:var(--jp-series-3); }

/* Batch-norm derivation (sketched graph + typeset maths) */
#jubal-portfolio .jp-bn > div > svg:not(.sk-box) { max-width:600px; }
#jubal-portfolio .bn-node { fill:none; stroke:var(--jp-series-2); stroke-width:1.5; }
#jubal-portfolio .bn-edge { fill:none; stroke:var(--jp-series-2); stroke-width:1.3; }
#jubal-portfolio .jp-bn .tl-head { stroke:var(--jp-series-2); }
#jubal-portfolio .bn-sym { fill:var(--jp-ink); font-size:20px; font-style:italic; font-family:"STIX Two Text", Georgia, serif; text-anchor:middle; dominant-baseline:central; }
#jubal-portfolio .bn-sup { font-size:12px; font-style:normal; }
#jubal-portfolio .bn-param { font-size:18px; }
#jubal-portfolio .bn-badge { fill:none; stroke:var(--jp-series-1); stroke-width:1.3; }
#jubal-portfolio .bn-badge-text { fill:var(--jp-series-1); font-size:11px; font-weight:600; text-anchor:middle; dominant-baseline:central; }
#jubal-portfolio .bn-eqs { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--jp-s6) var(--jp-s8); margin-top:var(--jp-s6); padding-top:var(--jp-s4); border-top:1px dashed color-mix(in srgb, var(--jp-muted) 45%, transparent); }
#jubal-portfolio .jp-detail .bn-head, #jubal-portfolio .bn-head { margin:0 0 var(--jp-s2); font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--jp-muted); }
#jubal-portfolio .bn-row { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:var(--jp-s3); min-height:52px; }
#jubal-portfolio .bn-col:last-child .bn-row { grid-template-columns:22px minmax(0,1fr); }
#jubal-portfolio .bn-tag { font-size:12px; color:var(--jp-series-3); text-align:right; }
#jubal-portfolio .bn-step { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1.3px solid var(--jp-series-1); border-radius:52% 48% 50% 46% / 48% 52% 46% 50%; font-size:11px; font-weight:600; color:var(--jp-series-1); line-height:1; vertical-align:middle; }
#jubal-portfolio .bn-head .bn-step { width:17px; height:17px; font-size:10px; }
#jubal-portfolio .bn-math { overflow-x:auto; overflow-y:hidden; padding:2px 0; }
#jubal-portfolio .bn-math math { margin:0; font-size:18px; color:var(--jp-ink); font-family:"STIX Two Math", "Cambria Math", "Latin Modern Math", math, "STIX Two Text", Georgia, serif; }
#jubal-portfolio .bn-hl { background:linear-gradient(transparent 12%, color-mix(in srgb, #e6d84a 38%, transparent) 12%, color-mix(in srgb, #e6d84a 38%, transparent) 88%, transparent 88%); border-radius:40% 30% 45% 35% / 30% 45% 35% 40%; }

/* Recognition demo (demo.js) */
#jubal-portfolio .jp-demo { display:grid; gap:var(--jp-s4); padding:var(--jp-s6); border:1px solid var(--jp-line); border-radius:8px; outline:none; }
#jubal-portfolio .jp-demo:focus-visible { box-shadow:0 0 0 2px var(--jp-accent) !important; }
#jubal-portfolio .demo-controls { display:flex; align-items:center; gap:var(--jp-s2); flex-wrap:wrap; }
#jubal-portfolio .demo-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1.25px solid var(--jp-muted); border-radius:9px 7px 10px 6px / 6px 10px 7px 9px; background:var(--jp-paper); color:var(--jp-ink); transition:background .15s, transform .15s; }
#jubal-portfolio .demo-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .demo-btn.is-primary { background:var(--jp-ink); color:var(--jp-bg); border-color:var(--jp-ink); }
#jubal-portfolio .demo-btn.is-primary svg { fill:currentColor; }
#jubal-portfolio .demo-btn:not(:disabled):hover { transform:translateY(-1px); }
#jubal-portfolio .demo-btn:disabled { opacity:.35; cursor:default; }
#jubal-portfolio .demo-range { flex:1 1 160px; min-width:120px; accent-color:var(--jp-accent); margin:0 var(--jp-s2); }
#jubal-portfolio .demo-step { font-size:13px; color:var(--jp-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
#jubal-portfolio .demo-body { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:var(--jp-s8); align-items:start; }
#jubal-portfolio .demo-grid svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
#jubal-portfolio .demo-side { display:grid; gap:var(--jp-s2); min-width:0; }
#jubal-portfolio .jp-detail .demo-label, #jubal-portfolio .demo-label { margin:0; font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--jp-muted); }
#jubal-portfolio .demo-side .demo-label + .demo-chart { margin-bottom:var(--jp-s3); }
#jubal-portfolio .demo-chart { min-width:0; }
#jubal-portfolio .demo-chart svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
#jubal-portfolio :is(.demo-stroke, .demo-wall, .demo-faint, .demo-trail, .demo-line, .demo-cursor, .demo-goal-ring, .demo-goal-pred, .demo-agent-ring, .demo-wall-hatch) { fill:none; stroke-linecap:round; stroke-linejoin:round; }
#jubal-portfolio .demo-stroke { stroke:var(--jp-muted); stroke-width:1.3; }
#jubal-portfolio .demo-faint { stroke:var(--jp-line); stroke-width:1; }
#jubal-portfolio .demo-wall { stroke:var(--jp-ink); stroke-width:1.2; stroke-opacity:.75; }
#jubal-portfolio .demo-wall-hatch { stroke:var(--jp-ink); stroke-width:1; stroke-opacity:.45; }
#jubal-portfolio .demo-trail { stroke:var(--jp-series-1); stroke-width:1.6; stroke-dasharray:2 5; opacity:.9; }
#jubal-portfolio .demo-goal-ring { stroke:var(--goal); stroke-width:1.8; }
#jubal-portfolio .demo-goal-pred { stroke:var(--goal); stroke-width:1.2; opacity:0; transition:opacity .3s; }
#jubal-portfolio .demo-goal[data-pred="true"] .demo-goal-pred { opacity:1; }
#jubal-portfolio .demo-goal[data-pred="true"] .demo-goal-ring { fill:color-mix(in srgb, var(--goal) 22%, transparent); }
#jubal-portfolio .demo-goal-text { fill:var(--jp-ink); font-size:10px; font-weight:600; text-anchor:middle; dominant-baseline:central; }
#jubal-portfolio .demo-agent.is-moving { transition:transform .5s cubic-bezier(.16,1,.3,1); }
#jubal-portfolio .demo-agent-dot { fill:var(--jp-ink); }
#jubal-portfolio .demo-agent-ring { stroke:var(--jp-ink); stroke-width:1.3; }
#jubal-portfolio .demo-agent-text { fill:var(--jp-bg); font-size:11px; font-weight:600; text-anchor:middle; dominant-baseline:central; }
#jubal-portfolio .demo-tick { fill:var(--jp-muted); font-size:11px; dominant-baseline:central; font-variant-numeric:tabular-nums; }
#jubal-portfolio .demo-chart .demo-tick[y] { dominant-baseline:auto; }
#jubal-portfolio .demo-line { stroke-width:1.6; }
#jubal-portfolio .demo-line.is-true { stroke-width:2.4; }
#jubal-portfolio .demo-cursor { stroke:var(--jp-muted); stroke-width:1; stroke-dasharray:3 4; }
#jubal-portfolio .demo-dotmark { stroke-width:1; }
#jubal-portfolio .demo-endlabel { fill:var(--jp-ink); font-size:11px; font-weight:500; dominant-baseline:central; }
#jubal-portfolio .demo-why { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
#jubal-portfolio .jp-detail .demo-why-row, #jubal-portfolio .demo-why-row { display:grid; grid-template-columns:118px minmax(0,1fr) 46px 96px; align-items:center; gap:var(--jp-s3); padding:0; font-size:13px; line-height:1.4; }
#jubal-portfolio .demo-why-goal { display:flex; align-items:center; gap:6px; font-weight:600; color:var(--jp-ink); }
#jubal-portfolio .demo-why-goal::before { content:""; width:9px; height:9px; border-radius:50% 45% 55% 50%; background:var(--goal); flex:none; }
#jubal-portfolio .demo-tag { font-size:10px; font-weight:500; padding:1px 5px; border-radius:5px 3px 6px 4px; border:1px solid var(--jp-muted); color:var(--jp-muted); }
#jubal-portfolio .demo-tag.is-pred { border-color:var(--jp-accent); color:var(--jp-accent); }
#jubal-portfolio .demo-why-bar { height:12px; border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .demo-why-bar span { display:block; height:100%; border:1.2px solid var(--goal); border-radius:2px 4px 3px 2px / 3px 2px 4px 3px; background:repeating-linear-gradient(45deg, var(--goal) 0 1px, transparent 1px 5px); transition:width .4s cubic-bezier(.16,1,.3,1); }
#jubal-portfolio .demo-why-score { font-variant-numeric:tabular-nums; color:var(--jp-ink); text-align:right; }
#jubal-portfolio .demo-why-matched { color:var(--jp-muted); font-size:12px; white-space:nowrap; }
#jubal-portfolio .demo-strip { display:grid; gap:6px; }
#jubal-portfolio .demo-row { display:grid; grid-template-columns:118px minmax(0,1fr); align-items:center; gap:var(--jp-s3); }
#jubal-portfolio .demo-row-name { font-size:12px; color:var(--jp-body); }
#jubal-portfolio .demo-cells { display:grid; grid-template-columns:repeat(18,minmax(0,1fr)); gap:3px; }
#jubal-portfolio .demo-cell { display:block; height:14px; border:1.2px solid var(--jp-muted); border-radius:3px 5px 2px 4px / 4px 2px 5px 3px; }
#jubal-portfolio .demo-cell[data-state="right"] { border-color:var(--jp-series-1); background:repeating-linear-gradient(45deg, var(--jp-series-1) 0 1.2px, transparent 1.2px 4px); }
#jubal-portfolio .demo-cell[data-state="wrong"] { border-color:var(--jp-series-3); background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--jp-series-3) 60%, transparent) 0 1px, transparent 1px 6px); }
#jubal-portfolio .demo-cell[data-state="tie"] { border-style:dashed; }
#jubal-portfolio .demo-cells .demo-cell[data-future="true"] { background:none; border-color:var(--jp-line); }
#jubal-portfolio .demo-cells .demo-cell[data-current="true"] { box-shadow:0 0 0 1.5px var(--jp-ink); }
#jubal-portfolio .demo-legend { display:flex; flex-wrap:wrap; gap:var(--jp-s2) var(--jp-s6); list-style:none; margin:var(--jp-s2) 0 0; padding:0; font-size:12px; color:var(--jp-muted); }
#jubal-portfolio .jp-detail .demo-legend li { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:0; line-height:1.4; }
#jubal-portfolio .demo-legend .demo-cell { width:16px; height:10px; }
#jubal-portfolio .demo-legend .demo-cell[data-state="future"] { border-color:var(--jp-line); }
#jubal-portfolio .jp-detail .demo-narration, #jubal-portfolio .demo-narration { margin:0; font-size:14px; line-height:1.6; color:var(--jp-body); min-height:3.2em; }

/* Data tables are plain: no card, paper, sketch or motion */
#jubal-portfolio :is(.jp-figure--table > .jp-table-wrap, .jp-figure--plain > .jp-carousel) { background:none !important; border:0 !important; border-radius:0; padding:0 !important; }
#jubal-portfolio .jp-figure--table .jp-table { border-top:1px solid var(--jp-line); border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-figure > .jp-chart-table { margin:var(--jp-s3) 0 0; }

/* Notebook margins (margins.js): doodles in the left margin. Wide screens only. */
#jubal-portfolio { position:relative; }
#jubal-portfolio .jp-margins { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
#jubal-portfolio .jp-margins[hidden] { display:none !important; }
#jubal-portfolio .mg-doodle { position:absolute; left:0; top:0; opacity:.8; }
#jubal-portfolio .jp-margin-net { position:absolute; left:0; top:0; }
#jubal-portfolio .jp-margin-net[hidden], #jubal-portfolio .jp-margin-net:has([data-failed]) { display:none !important; }
#jubal-portfolio .net-mini .net-stage { aspect-ratio:auto; height:var(--net-h, 260px); margin:0; }
#jubal-portfolio .jp-margin-net .mg-note a { color:var(--jp-body); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
#jubal-portfolio .jp-margin-net .mg-note a:hover { color:var(--jp-ink); }
#jubal-portfolio .mg-doodle svg { display:block; overflow:visible; font-family:inherit; }
#jubal-portfolio .jp-detail .mg-note, #jubal-portfolio .mg-note { margin:6px 0 0; text-align:center; font:italic 13px/1.3 "STIX Two Text", Georgia, serif; color:var(--jp-muted); }
#jubal-portfolio .mg-ink { stroke:var(--jp-muted); stroke-width:1.3; }
#jubal-portfolio .mg-faint { stroke:var(--jp-line); stroke-width:1; }
#jubal-portfolio .mg-hatch { stroke:var(--jp-muted); stroke-width:.9; stroke-opacity:.6; }
#jubal-portfolio .mg-wave { stroke:var(--jp-series-2); stroke-width:1.4; }
#jubal-portfolio .mg-goal { stroke:var(--jp-accent); stroke-width:1.6; }
#jubal-portfolio .mg-trail { stroke:var(--jp-accent); stroke-width:1.4; stroke-dasharray:2 4; }
#jubal-portfolio .mg-agent { stroke:var(--jp-ink); stroke-width:1.6; }
#jubal-portfolio .mg-letter { fill:var(--jp-ink); font:italic 20px "STIX Two Text", Georgia, serif; text-anchor:middle; opacity:.85; }
#jubal-portfolio .mg-label { fill:var(--jp-muted); font-size:10px; font-weight:600; text-anchor:middle; }

/* Brief research entry: one line, no explanation page */
#jubal-portfolio .jp-paper--brief h3 { font-size:18px; }
#jubal-portfolio .jp-paper--brief .jp-paper-summary { margin-top:var(--jp-s2); font-size:15px; color:var(--jp-muted); }

/* Reading notes: quoted hypothesis and in-text links */
#jubal-portfolio .jp-reading-body blockquote { max-width:66ch; margin:var(--jp-s6) 0; padding:var(--jp-s2) 0 var(--jp-s2) var(--jp-s6); border-left:1px solid var(--jp-accent); }
#jubal-portfolio .jp-detail .jp-reading-body blockquote p { color:var(--jp-ink); font-size:19px; line-height:1.6; }
#jubal-portfolio .jp-reading-body p a, #jubal-portfolio .jp-reading-body li a { color:var(--jp-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--jp-accent) 70%, transparent); }
#jubal-portfolio .jp-reading-body p a:hover, #jubal-portfolio .jp-reading-body li a:hover { text-decoration-color:var(--jp-ink); }
#jubal-portfolio .jp-reading-body > ul { max-width:70ch; }

/* Goal-misgeneralization sketches + reference list */
#jubal-portfolio .nt-bay { fill:none; stroke:var(--jp-series-2); stroke-width:1.5; }
#jubal-portfolio .nt-bay-hatch { fill:none; stroke:var(--jp-series-2); stroke-width:1; stroke-opacity:.6; }
#jubal-portfolio .nt-note.is-bay { fill:var(--jp-series-2); }
#jubal-portfolio .nt-edge.is-wrong, #jubal-portfolio .nt-dash.is-wrong { stroke:var(--jp-series-3); }
#jubal-portfolio .nt-note.is-wrong { fill:var(--jp-series-3); }
#jubal-portfolio .nt-edge.is-right, #jubal-portfolio .nt-dash.is-right { stroke:var(--jp-series-1); }
#jubal-portfolio .nt-note.is-right { fill:var(--jp-series-1); }
#jubal-portfolio .is-person { stroke:var(--jp-ink); }
#jubal-portfolio .nt-zone { fill:none; stroke:var(--jp-series-3); stroke-width:1.3; }
#jubal-portfolio .nt-zone-hatch { stroke:var(--jp-series-3); stroke-width:1; stroke-opacity:.55; }
#jubal-portfolio .nt-wall { fill:none; stroke:var(--jp-muted); stroke-width:1.4; stroke-opacity:.8; }
#jubal-portfolio .nt-box.is-crate, #jubal-portfolio .nt-edge.is-crate { stroke:var(--jp-muted); stroke-opacity:.7; }
#jubal-portfolio .nt-box.is-parcel, #jubal-portfolio .nt-edge.is-parcel { stroke:var(--jp-series-1); }
#jubal-portfolio .nt-box.is-bay2 { stroke:var(--jp-body); stroke-dasharray:4 3; }
#jubal-portfolio .nt-edge.is-path { stroke:var(--jp-body); }
#jubal-portfolio .nt-edge.is-mark { stroke-width:2.4; }
#jubal-portfolio .jp-refs { max-width:70ch; margin:var(--jp-s3) 0 0; padding-left:22px; }
#jubal-portfolio .jp-detail .jp-refs li { font-size:14px; line-height:1.6; color:var(--jp-muted); padding:4px 0; }
#jubal-portfolio .jp-refs li::marker { font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-refs a { color:var(--jp-body); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--jp-accent) 70%, transparent); }

/* Experience entries that open a page */
#jubal-portfolio .jp-job--link { color:inherit; border-top:1px solid var(--jp-line); margin-top:var(--jp-s2); }
#jubal-portfolio .jp-job--link:hover { text-decoration:none; }
#jubal-portfolio .jp-job--link h3::after { content:" →"; color:var(--jp-muted); transition:color .2s; }
#jubal-portfolio .jp-job--link:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
#jubal-portfolio .jp-job--link:hover h3::after { color:var(--jp-accent); }
#jubal-portfolio .jp-section-heading + .jp-job--link { border-top:0; margin-top:0; }

/* Thoughts: a compact title list above Contact; on wide screens a quiet rail in the right margin */
#jubal-portfolio .jp-thoughts { padding:0 0 var(--jp-s16); }
#jubal-portfolio .jp-thoughts h2 { font-size:28px; line-height:1.25; letter-spacing:-.02em; padding-bottom:var(--jp-s3); border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-thoughts ul { list-style:none; margin:0; padding:0; }
#jubal-portfolio .jp-thought { display:flex; align-items:baseline; justify-content:space-between; gap:var(--jp-s2) var(--jp-s6); padding:var(--jp-s4) 0; border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-thought:hover { text-decoration:none; }
#jubal-portfolio .jp-thought-title { color:var(--jp-ink); font-size:18px; line-height:1.4; letter-spacing:-.01em; text-wrap:balance; }
#jubal-portfolio .jp-thought:hover .jp-thought-title { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
#jubal-portfolio .jp-thought-meta { color:var(--jp-muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
#jubal-portfolio .jp-thoughts li:last-child .jp-thought { border-bottom:0; }
@media (max-width:650px) {
  #jubal-portfolio .jp-thoughts { padding-bottom:var(--jp-s12); }
  #jubal-portfolio .jp-thoughts h2 { font-size:24px; }
  #jubal-portfolio .jp-thought { flex-direction:column; gap:4px; }
  #jubal-portfolio .jp-thought-title { font-size:17px; }
}
/* Wide screens: fixed beside the content column; quiet at rest, full contrast on hover or keyboard focus */
@media (min-width:1432px) {
  #jubal-portfolio .jp-thoughts { position:fixed; top:50%; left:calc(50vw + var(--jp-width) / 2 + 32px); width:min(220px, calc(50vw - var(--jp-width) / 2 - 56px)); transform:translateY(-50%); padding:var(--jp-s2) 0 var(--jp-s2) var(--jp-s4); border-left:1px solid var(--jp-line); transition:border-color .25s; }
  #jubal-portfolio .jp-thoughts h2 { font-size:12px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--jp-muted); padding:0 0 var(--jp-s2); border:0; }
  #jubal-portfolio .jp-thought { flex-direction:column; gap:4px; padding:var(--jp-s2) 0; border:0; }
  #jubal-portfolio .jp-thought-title { font-size:14px; line-height:1.45; color:var(--jp-muted); transition:color .2s; }
  #jubal-portfolio .jp-thought-meta { font-size:12px; white-space:normal; }
  #jubal-portfolio .jp-thoughts:is(:hover, :focus-within) { border-color:var(--jp-accent); }
  #jubal-portfolio .jp-thoughts:is(:hover, :focus-within) h2 { color:var(--jp-ink); }
  #jubal-portfolio .jp-thoughts:is(:hover, :focus-within) .jp-thought-title { color:var(--jp-body); }
  #jubal-portfolio .jp-thought:is(:hover, :focus-visible) .jp-thought-title { color:var(--jp-ink); }
}

/* Architecture / controller sketches */
#jubal-portfolio .ar-title { fill:var(--jp-ink); font-size:13px; font-weight:500; }
#jubal-portfolio .ar-sub { fill:var(--jp-muted); font-size:11px; }
#jubal-portfolio .ar-act { fill:var(--jp-body); font-size:13px; }
#jubal-portfolio .nt-box.is-bull { stroke:var(--jp-series-1); }
#jubal-portfolio .nt-box.is-bear { stroke:var(--jp-series-3); }
#jubal-portfolio .nt-box.is-out { stroke:var(--jp-accent); }
#jubal-portfolio .nt-box.is-q { stroke-dasharray:none; }

/* Carousel (carousel.js) */
#jubal-portfolio .jp-carousel { display:grid; gap:var(--jp-s3); }
#jubal-portfolio .cr-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:8px; background:var(--jp-paper); outline:none; }
#jubal-portfolio .cr-track::-webkit-scrollbar { display:none; }
#jubal-portfolio .cr-track:focus-visible { box-shadow:0 0 0 2px var(--jp-accent); }
#jubal-portfolio .jp-slide { flex:0 0 100%; scroll-snap-align:start; aspect-ratio:3 / 2; display:flex; align-items:center; justify-content:center; }
#jubal-portfolio .jp-slide :is(img, video) { display:block; width:100%; height:100%; object-fit:contain; }
#jubal-portfolio .cr-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--jp-s4); flex-wrap:wrap; }
#jubal-portfolio .jp-detail .cr-caption, #jubal-portfolio .cr-caption { margin:0; font-size:14px; line-height:1.5; color:var(--jp-muted); flex:1 1 260px; }
#jubal-portfolio .cr-caption:empty { display:none; }
#jubal-portfolio .cr-nav { display:flex; align-items:center; gap:var(--jp-s2); }
#jubal-portfolio .cr-dots { display:flex; gap:6px; padding:0 var(--jp-s2); }
#jubal-portfolio .cr-dot { width:8px; height:8px; padding:0; border:1.2px solid var(--jp-muted); border-radius:50%; background:none; }
#jubal-portfolio .cr-dot[aria-current="true"] { background:var(--jp-ink); border-color:var(--jp-ink); }
#jubal-portfolio .cr-count { font-size:13px; color:var(--jp-muted); font-variant-numeric:tabular-nums; min-width:3ch; }
#jubal-portfolio .jp-detail .jp-credit { font-size:13px; color:var(--jp-muted); margin-top:var(--jp-s3); }
@media (pointer:coarse) { #jubal-portfolio .cr-dot { width:12px; height:12px; } }

/* Paragraph with a small carousel beside it */
#jubal-portfolio .jp-split { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--jp-s8); align-items:start; }
#jubal-portfolio .jp-split > p { max-width:62ch; }
#jubal-portfolio .jp-figure--side { margin:4px 0 0; }
#jubal-portfolio .jp-figure--side .cr-bar { gap:var(--jp-s2); }
#jubal-portfolio .jp-figure--side .demo-btn { width:30px; height:30px; }
#jubal-portfolio .jp-detail .jp-figure--side .cr-caption { font-size:13px; flex-basis:100%; }
@media (max-width:820px) { #jubal-portfolio .jp-split { grid-template-columns:1fr; gap:var(--jp-s4); } }

/* Contact + footer */
#jubal-portfolio .jp-contact { border-top:1px solid var(--jp-line); padding:var(--jp-s12) 0 var(--jp-s4); }
#jubal-portfolio .jp-contact h2 { font-size:36px; letter-spacing:-.02em; line-height:1.2; }
#jubal-portfolio .jp-contact p { margin-top:var(--jp-s3); }
#jubal-portfolio .jp-contact .jp-links { margin-top:var(--jp-s6); }
#jubal-portfolio .jp-contact .jp-links a { color:var(--jp-ink); font-size:17px; }
#jubal-portfolio .jp-footer { padding-top:var(--jp-s8); font-size:14px; color:var(--jp-muted); }
#jubal-portfolio .ft-doodle { height:92px; margin-bottom:var(--jp-s2); }
#jubal-portfolio .ft-doodle svg { display:block; max-width:100%; overflow:visible; }
#jubal-portfolio .ft-note { fill:var(--jp-muted); font:italic 14px "STIX Two Text", Georgia, serif; }
#jubal-portfolio .ft-eye { fill:var(--jp-ink); }
#jubal-portfolio .ft-flag { fill:color-mix(in srgb, var(--jp-accent) 30%, transparent); }
#jubal-portfolio .ft-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--jp-s3) var(--jp-s6); }
#jubal-portfolio .ft-links { display:flex; flex-wrap:wrap; gap:var(--jp-s2) var(--jp-s6); }
#jubal-portfolio .ft-links a { color:var(--jp-body); transition:color .2s; }
#jubal-portfolio .ft-links a:hover { color:var(--jp-ink); }

/* Detail views */
#jubal-portfolio .jp-detail { padding:var(--jp-s12) 0 var(--jp-s6); min-height:760px; }
#jubal-portfolio .jp-back { display:inline-flex; align-items:center; gap:10px; color:var(--jp-muted); border:0; padding:5px 0; background:none; font-size:14px; margin-bottom:var(--jp-s8); }
#jubal-portfolio .jp-back:hover { color:var(--jp-ink); }
#jubal-portfolio .jp-detail article > :is(p, ul, h2, .jp-meta) { max-width:70ch; }
#jubal-portfolio .jp-detail article > p + p { margin-top:var(--jp-s4); }
#jubal-portfolio .jp-detail h1 { font-size:clamp(32px,4.6vw,44px); line-height:1.15; letter-spacing:-.025em; max-width:none; }
#jubal-portfolio .jp-detail-lead { font-size:20px; line-height:1.6; color:var(--jp-muted); margin:var(--jp-s6) 0 var(--jp-s4) !important; }
#jubal-portfolio .jp-detail > div > article > .jp-meta { padding-bottom:var(--jp-s6); border-bottom:1px solid var(--jp-line); }
#jubal-portfolio .jp-detail h2 { font-size:21px; margin:var(--jp-s12) 0 var(--jp-s3); letter-spacing:-.01em; line-height:1.35; }
#jubal-portfolio .jp-detail p, #jubal-portfolio .jp-detail li { font-size:17px; line-height:1.75; }
#jubal-portfolio .jp-detail ul { padding-left:20px; margin:var(--jp-s3) 0; }
#jubal-portfolio .jp-detail li { padding:3px 0; }
#jubal-portfolio .jp-detail li::marker { color:var(--jp-muted); }
#jubal-portfolio .jp-reading-body p + p { margin-top:var(--jp-s4); }
#jubal-portfolio .jp-detail .jp-links a { color:var(--jp-ink); }

#jubal-portfolio .jp-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@media (max-width:650px) {
  #jubal-portfolio { padding:var(--jp-s6) 20px; font-size:16px; }
  #jubal-portfolio .jp-hero { padding:var(--jp-s4) 0 var(--jp-s16); }
  #jubal-portfolio h1 { letter-spacing:-.025em; }
  #jubal-portfolio .jp-bio { grid-template-columns:1fr; gap:var(--jp-s6); margin-top:var(--jp-s8); }
  #jubal-portfolio .jp-portrait { width:112px; height:132px; }
  #jubal-portfolio .jp-intro { font-size:17px; }
  #jubal-portfolio .jp-intro + .jp-intro { font-size:16px; }
  #jubal-portfolio .jp-section { padding-bottom:var(--jp-s12); }
  #jubal-portfolio .jp-section-heading h2 { font-size:24px; }
  #jubal-portfolio .jp-project { gap:var(--jp-s3); }
  #jubal-portfolio .jp-project h3, #jubal-portfolio .jp-note h3 { font-size:19px; }
  #jubal-portfolio .jp-note { grid-template-columns:1fr; gap:0; }
  #jubal-portfolio .jp-note-time { order:-1; padding:0 0 var(--jp-s2); }
  #jubal-portfolio .jp-research-row, #jubal-portfolio .jp-job, #jubal-portfolio .jp-paper { grid-template-columns:1fr; gap:var(--jp-s2); }
  #jubal-portfolio .jp-paper h3 { font-size:20px; }
  #jubal-portfolio .jp-figure > :first-child { padding:var(--jp-s4); }
  #jubal-portfolio .jp-flow { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); grid-template-areas:"img a1 ienc" "txt a2 tenc" "join join join" "sim sim sim" "a3 a3 a3" "out out out"; }
  #jubal-portfolio .jp-flow-join { height:20px; }
  #jubal-portfolio .jp-flow-join::before { left:25%; right:25%; top:0; bottom:50%; border:1.25px solid var(--jp-muted); border-top:0; border-radius:0 0 6px 6px; }
  #jubal-portfolio .jp-flow-join::after { left:50%; right:auto; top:50%; bottom:0; border-top:0; border-left:1.25px solid var(--jp-muted); }
  #jubal-portfolio .jp-flow-a3 svg { transform:rotate(90deg); }
  #jubal-portfolio .jp-flow-node { min-height:0; }
  #jubal-portfolio .jp-tiers { grid-template-columns:1fr; }
  #jubal-portfolio .jp-steps { grid-template-columns:1fr; gap:var(--jp-s8); }
  #jubal-portfolio .bn-eqs { grid-template-columns:1fr; }
  #jubal-portfolio .bn-row { grid-template-columns:76px minmax(0,1fr); }
  #jubal-portfolio .bn-math math { font-size:15px; }
  #jubal-portfolio .jp-note-figure > div { padding:var(--jp-s3) !important; }
  #jubal-portfolio :is(.nt-text, .nt-char) { font-size:20px; }
  #jubal-portfolio .nt-note { font-size:16px; }
  #jubal-portfolio .nt-label { font-size:16px; }
  #jubal-portfolio .jp-demo { padding:var(--jp-s4); }
  #jubal-portfolio .demo-body { grid-template-columns:1fr; gap:var(--jp-s6); }
  #jubal-portfolio .jp-detail .demo-why-row, #jubal-portfolio .demo-why-row { grid-template-columns:96px minmax(0,1fr) 42px; }
  #jubal-portfolio .demo-why-matched { display:none; }
  #jubal-portfolio .demo-row { grid-template-columns:1fr; gap:4px; }
  #jubal-portfolio .demo-range { order:5; flex-basis:100%; margin:var(--jp-s2) 0 0; }
  #jubal-portfolio .jp-chain { grid-template-columns:1fr; }
  #jubal-portfolio .jp-chain-arrow { height:20px; }
  #jubal-portfolio .jp-chain-arrow svg { transform:rotate(90deg); }
  #jubal-portfolio .jp-step svg { max-width:320px; }
  #jubal-portfolio .jp-pen-head, #jubal-portfolio .jp-pen-row { grid-template-columns:64px minmax(0,1fr) 36px 50px; gap:var(--jp-s2); }
  #jubal-portfolio .jp-pen-head span:nth-child(2) { visibility:hidden; }
  #jubal-portfolio .jp-pen-cell { height:14px; }
  #jubal-portfolio .jp-table { font-size:14px; }
  #jubal-portfolio .jp-table :is(th, td) { white-space:normal; padding:8px 6px; }
  #jubal-portfolio .jp-tier { display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--jp-s4); align-items:center; }
  #jubal-portfolio .jp-detail .jp-tier-name, #jubal-portfolio .jp-tier-name { margin-top:0; }
  #jubal-portfolio .jp-contact h2 { font-size:28px; }
  #jubal-portfolio .jp-links { gap:var(--jp-s3) 18px; font-size:15px; }
  #jubal-portfolio .jp-primary { padding:0 14px; }
  #jubal-portfolio .jp-detail { padding-top:var(--jp-s8); min-height:600px; }
  #jubal-portfolio .jp-detail-lead { font-size:18px; }
}
@media (pointer:coarse) {
  #jubal-portfolio .jp-links a, #jubal-portfolio .ft-links a, #jubal-portfolio .jp-back, #jubal-portfolio .jp-section-heading a { min-height:44px; display:inline-flex; align-items:center; }
  #jubal-portfolio .jp-theme { min-width:44px; min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  #jubal-portfolio * { transition:none !important; }
}

/* Photography: the doodled polaroid link beside the intro (gallery.js draws it) */
#jubal-portfolio .jp-photo-link { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:-8px; color:var(--jp-body); transition:color .2s; }
#jubal-portfolio .jp-photo-link:hover { text-decoration:none; color:var(--jp-ink); }
#jubal-portfolio .ph-doodle { display:block; width:128px; height:112px; }
#jubal-portfolio .ph-doodle svg { display:block; overflow:visible; }
#jubal-portfolio .ph-card { fill:var(--jp-bg); }
#jubal-portfolio .ph-ink { stroke:var(--jp-muted); stroke-width:1.3; transition:stroke .2s; }
#jubal-portfolio .ph-sun { stroke:var(--jp-accent); stroke-width:1.5; }
#jubal-portfolio .ph-faint { stroke:var(--jp-line); stroke-width:1.2; }
#jubal-portfolio .jp-photo-link:is(:hover, :focus-visible) .ph-ink { stroke:var(--jp-ink); }
#jubal-portfolio .ph-front { transform-origin:70px 58px; transition:transform .35s cubic-bezier(.16,1,.3,1); }
#jubal-portfolio .jp-photo-link:is(:hover, :focus-visible) .ph-front { transform:translate(5px,-7px) rotate(5deg); }
#jubal-portfolio .ph-label { font:italic 16px/1.3 "STIX Two Text", Georgia, serif; white-space:nowrap; }
#jubal-portfolio .jp-photo-link:hover .ph-label { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }

/* Photography page: masonry columns, click to enlarge */
#jubal-portfolio .ph-grid { columns:3 240px; column-gap:var(--jp-s4); margin-top:var(--jp-s8); }
#jubal-portfolio .ph-item { break-inside:avoid; margin:0 0 var(--jp-s4); }
#jubal-portfolio .ph-open { display:block; width:100%; padding:0; border:0; border-radius:4px; background:var(--jp-paper); overflow:hidden; cursor:zoom-in; }
#jubal-portfolio .ph-open img { display:block; width:100%; height:auto; transition:transform .5s cubic-bezier(.16,1,.3,1); }
#jubal-portfolio .ph-open:hover img { transform:scale(1.025); }
#jubal-portfolio .jp-detail .ph-item figcaption { margin-top:6px; font-size:13px; line-height:1.5; color:var(--jp-muted); }
#jubal-portfolio .ph-lightbox { max-width:min(1400px, 96vw); max-height:96vh; padding:0; border:0; background:none; color:var(--jp-ink); overflow:visible; }
#jubal-portfolio .ph-lightbox::backdrop { background:rgba(5,5,5,.9); }
#jubal-portfolio .ph-lightbox figure { margin:0; }
#jubal-portfolio .ph-lightbox img { display:block; max-width:96vw; max-height:82vh; width:auto; height:auto; margin:0 auto; border-radius:4px; }
#jubal-portfolio .ph-lightbox figcaption { margin-top:var(--jp-s3); text-align:center; font-size:14px; color:var(--jp-muted); }
#jubal-portfolio .ph-lightbox figcaption:empty { display:none; }
#jubal-portfolio .ph-lb-bar { display:flex; align-items:center; justify-content:center; gap:var(--jp-s3); margin-top:var(--jp-s3); }
#jubal-portfolio .ph-lb-count { min-width:5ch; text-align:center; font-size:13px; color:var(--jp-muted); font-variant-numeric:tabular-nums; }
#jubal-portfolio .ph-lb-close { margin-left:var(--jp-s3); padding:6px 14px; border:1px solid var(--jp-line); border-radius:999px; background:none; color:var(--jp-body); font-size:14px; }
#jubal-portfolio .ph-lb-close:hover { color:var(--jp-ink); border-color:var(--jp-muted); }
@media (max-width:650px) {
  #jubal-portfolio .jp-bio { grid-template-columns:auto 1fr; }
  #jubal-portfolio .jp-bio > div { grid-column:1 / -1; grid-row:2; }
  #jubal-portfolio .jp-photo-link { grid-column:2; grid-row:1; align-self:center; justify-self:center; margin:0; }
}

/* 404 page (notfound.js draws the scene) */
#jubal-portfolio .nf-main { padding:var(--jp-s12) 0 var(--jp-s16); }
#jubal-portfolio .nf-scene { max-width:560px; margin-bottom:var(--jp-s8); }
#jubal-portfolio .nf-scene svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
#jubal-portfolio .nf-sign { font-size:24px; }
#jubal-portfolio .nf-q { font-size:30px; fill:var(--jp-accent); opacity:1; }
#jubal-portfolio .nf-main .jp-intro { margin-top:var(--jp-s6); }