/* Matches the blog's navy and ochre theme, using the reader's system fonts. */
:root{
  --paper:#ffffff;
  --ink:#243447;
  --muted:#526276;
  --navy:#193653;
  --link:#234f78;
  --visited:#526782;
  --tag-ink:#745020;
  --tag-paper:#f6efdf;
  --tag-line:#b69a70;
  --serif:"Times New Roman",Times,"Liberation Serif",serif;
  --mono:"Courier New",Courier,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;padding:0 0 32px;
  background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:20px;line-height:1.55;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
main{max-width:1040px;margin:0 auto;padding:0 24px}
.eyebrow{font:15px var(--mono);letter-spacing:.02em;color:var(--muted);margin-bottom:4px}
h1{font:bold clamp(38px,6vw,60px)/1.05 var(--serif);color:var(--navy);
  margin:4px 0 18px;letter-spacing:-.01em}
.tags{margin-bottom:14px}
.tag{display:inline-block;font:12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.03em;
  color:var(--tag-ink);border:1px solid var(--tag-line);padding:0 5px;
  margin:0 4px 4px 0;background:var(--tag-paper)}
.bio{max-width:30em;font-size:23px;line-height:1.45;margin:0 0 28px}
.resource-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;
  border-top:2px solid var(--navy);padding-top:24px;font-size:19px}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;padding:6px 0}
a:visited{color:var(--visited)}
a:hover{background:var(--navy);color:var(--paper);text-decoration:none}
a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
footer{max-width:992px;width:calc(100% - 48px);margin:48px auto 0;padding-top:14px;border-top:1px solid var(--navy);
  color:var(--muted);font-size:16px}
@media(max-width:640px){
  body{font-size:18px}
  main{padding:0 16px}
  footer{width:calc(100% - 32px)}
  .bio{font-size:20px}
  .resource-links{gap:12px 20px}
}

/* Research illustrations sit beside the introduction, with equal visual weight. */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:32px;
  align-items:center;margin-bottom:28px}
.research-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.intro .bio{margin-bottom:0}
.reactor{width:100%;margin:0;color:var(--navy)}
.reactor-stage{aspect-ratio:16/11;image-rendering:pixelated}
.matrix-stage{image-rendering:auto}
.reactor img{display:block;width:100%;height:auto;image-rendering:pixelated}
.matrix img{image-rendering:auto}
.resource-links a{display:inline-flex;align-items:center;gap:8px}
.resource-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.book-link{display:inline-flex;align-items:center;gap:8px;padding:6px 0;
  font:19px/1.55 var(--serif);color:var(--link);text-decoration:underline;text-underline-offset:2px}
.book-link:visited{color:var(--visited)}
.book-link:hover{background:var(--navy);color:var(--paper);text-decoration:none}
.book-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:960px){
  .intro{grid-template-columns:minmax(0,1fr);gap:24px}
  .research-pair{width:min(100%,480px);margin:0 auto}
}

/* The visitor is decorative: the canvas never captures links or text selection. */
#sidebar-cat{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.cat-rest{position:fixed;right:14px;bottom:14px;width:34px;height:34px;z-index:6;
  border:1px solid #d2d8de;background:var(--paper);color:var(--muted);padding:7px;cursor:pointer}
.cat-rest[hidden]{display:none}
.cat-rest svg{width:18px;height:18px;fill:currentColor}
.cat-rest:hover,.cat-rest[aria-pressed="true"]{color:var(--navy);background:var(--tag-paper)}
.cat-rest:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.cat-curious{filter:drop-shadow(0 0 5px #b69a7070)}
@media(max-width:1160px){body>footer{margin-top:112px}}
@media(prefers-reduced-motion:reduce){.cat-curious{filter:none}}

.cat-pet{position:fixed;left:0;top:0;width:84px;height:80px;z-index:6;
  padding:0;border:0;background:transparent;pointer-events:none;contain:strict}
.cat-pet[hidden]{display:none}
.cat-pet:focus-visible{outline:2px dashed var(--tag-line);outline-offset:-4px;border-radius:50%}