/* Shared by C1 and C3. Every length is a whole number of world pixels times --s, so type and frames stay on the grid. */
@font-face { font-family: Trellis; src: url(fonts/trellis.woff) format("woff"); font-display: block; }
:root { --s: 3; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--text); }
body { font-family: Trellis, monospace; font-size: calc(8px * var(--s)); line-height: calc(10px * var(--s)); -webkit-font-smoothing: none; font-synthesis: none; font-kerning: none; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul, figure { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
img { image-rendering: pixelated; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: calc(1px * var(--s)) solid var(--tabon); outline-offset: calc(1px * var(--s)); }

/* bar: tabs and icons, the same with or without JS */
.bar { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: calc(2px * var(--s)); padding: calc(3px * var(--s)) calc(6px * var(--s)); }
.tabs { display: flex; gap: calc(1px * var(--s)); align-items: flex-start; }
.tabs a { display: inline-flex; align-items: center; gap: calc(3px * var(--s)); height: calc(13px * var(--s)); padding: 0 calc(6px * var(--s)); background: var(--tab); color: var(--tabtext); border: calc(1px * var(--s)) solid var(--line); white-space: nowrap; }
.tabs a[aria-current] { height: calc(15px * var(--s)); background: var(--tabon); color: var(--tabontext); }
.lit { width: calc(5px * var(--s)); height: calc(6px * var(--s)); flex: none; display: none; }
.tabs a[aria-current] .lit { display: block; }
.side { display: flex; gap: calc(1px * var(--s)); align-items: center; }
.who { display: inline-flex; align-items: center; height: calc(13px * var(--s)); padding: 0 calc(5px * var(--s)); background: var(--tab); color: var(--tabtext); border: calc(1px * var(--s)) solid var(--line); white-space: nowrap; }
.icon { display: inline-flex; width: calc(13px * var(--s)); height: calc(13px * var(--s)); align-items: center; justify-content: center; background: var(--tab); border: calc(1px * var(--s)) solid var(--line); }
.icon img { width: calc(9px * var(--s)); height: calc(9px * var(--s)); display: block; }

/* windows */
.win, main { background: var(--win); color: var(--wintext); border: calc(1px * var(--s)) solid var(--line); box-shadow: inset 0 0 0 calc(1px * var(--s)) var(--win), inset 0 0 0 calc(2px * var(--s)) var(--winline); padding: calc(6px * var(--s)) calc(8px * var(--s)); }
.meta { color: var(--meta); }
.title, main a.link { color: var(--link); }
.sum { margin-top: calc(4px * var(--s)); }

/* page with JS off: a plain readable column under a picture of the world */
.still { display: block; width: 100%; height: auto; }
html:not(.js) main { margin: calc(4px * var(--s)) calc(6px * var(--s)); }
html:not(.js) .paper { margin-bottom: calc(10px * var(--s)); }
html:not(.js) .paper img { width: calc(120px * var(--s)); height: calc(96px * var(--s)); display: block; margin-bottom: calc(4px * var(--s)); }
.list li { margin-bottom: calc(5px * var(--s)); }
@media (max-width: 700px) { :root { --s: 2; } }

/* with JS: the world fills the window; pages become windows on top of it */
html.js, html.js body { height: 100%; overflow: hidden; background: var(--page); }
html.js #world { position: fixed; left: 0; top: 0; image-rendering: pixelated; touch-action: none; }
html.js.card #world { filter: brightness(0.5); }
html.js .bar { position: fixed; left: 0; right: 0; top: 0; pointer-events: none; }
html.js .bar a { pointer-events: auto; }
html.js main { position: fixed; z-index: 4; display: none; }
html.js.card main { display: block; left: 50%; top: calc(24px * var(--s)); width: calc(var(--cw) * var(--s) * 1px); margin-left: calc(var(--cw) * var(--s) * -0.5px); max-height: calc(100vh - calc(30px * var(--s))); overflow: auto; }
html.js main { --cw: 300; }
html.js main[data-station="people"] { --cw: 352; }
html.js main[data-station="projects"] { --cw: 402; }
html.js main h1 { color: var(--meta); margin-bottom: calc(4px * var(--s)); }
html.js main[data-station="science"] > h1 { display: none; }
#scopex { position: fixed; right: auto; min-width: calc(22px * var(--s)); min-height: calc(22px * var(--s)); background: none; border: 0; font: inherit; cursor: pointer; }
#scopex[hidden] { display: none; }
.close { position: absolute; right: calc(4px * var(--s)); top: calc(3px * var(--s)); color: var(--link); padding: 0 calc(3px * var(--s)); z-index: 2; }
html.js .paper { display: none; }
html.js .paper.on { display: grid; grid-template-columns: calc(122px * var(--s)) 1fr; column-gap: calc(9px * var(--s)); }
html.js .paper .plate-fig { width: calc(122px * var(--s)); height: calc(98px * var(--s)); border: calc(1px * var(--s)) solid var(--winline); }
html.js .paper img { display: block; width: calc(120px * var(--s)); height: calc(96px * var(--s)); }
.pager { display: flex; align-items: center; gap: calc(4px * var(--s)); margin-top: calc(6px * var(--s)); }
.pager > button { color: var(--link); padding: 0 calc(4px * var(--s)); border: calc(1px * var(--s)) solid var(--winline); }
.pager .count { color: var(--meta); margin-left: auto; }
.cells2 { display: flex; flex-wrap: nowrap; gap: calc(1px * var(--s)); }
.cell { width: calc(4px * var(--s)); height: calc(6px * var(--s)); background: var(--cell); }
.cell.sel { background: var(--cellsel); }
.cell.on { background: var(--tabon); }
#box { position: fixed; z-index: 4; display: none; left: 50%; bottom: calc(6px * var(--s)); width: calc(220px * var(--s)); margin-left: calc(-110px * var(--s)); min-height: calc(32px * var(--s)); }
html.js.box #box { display: block; }
#box.top { bottom: auto; top: calc(28px * var(--s)); }
#boxlink { display: block; margin-bottom: calc(3px * var(--s)); }
#boxlink[hidden] { display: none; }
.boxfig { display: block; width: calc(120px * var(--s)); height: calc(96px * var(--s)); image-rendering: pixelated; }
.boxfig[hidden] { display: none; }
#box.withfig { width: calc(300px * var(--s)); margin-left: calc(-150px * var(--s)); padding-left: calc(130px * var(--s)); min-height: calc(104px * var(--s)); }
#box.withfig .boxfig { position: absolute; left: calc(4px * var(--s)); top: calc(4px * var(--s)); }
.more { position: absolute; right: calc(6px * var(--s)); bottom: calc(5px * var(--s)); width: calc(5px * var(--s)); height: calc(6px * var(--s)); }
.plate { position: absolute; left: calc(5px * var(--s)); top: calc(-9px * var(--s)); padding: 0 calc(4px * var(--s)); height: calc(11px * var(--s)); line-height: calc(10px * var(--s)); background: var(--plate); color: var(--platetext); border: calc(1px * var(--s)) solid var(--line); white-space: nowrap; }
.plate[hidden], .more[hidden] { display: none; }
@media (max-width: 380px) { html.js .tabs a, html.js .tabs a[aria-current] { padding: 0 calc(2px * var(--s)) !important; } }
@media (max-width: 700px) {
  html.js .bar { top: auto; bottom: 0; padding: 0; display: block; }
  html.js .tabs { gap: 0; background: var(--tab); border-top: calc(1px * var(--s)) solid var(--line); width: 100%; }
  html.js .tabs a, html.js .tabs a[aria-current] { flex: none; height: calc(22px * var(--s)); padding: 0 calc(3px * var(--s)); border: 0; gap: calc(1px * var(--s)); }
  html.js .tabs a:last-child { justify-content: center; }
  html.js .side { position: fixed; top: calc(3px * var(--s)); right: calc(3px * var(--s)); left: calc(3px * var(--s)); justify-content: space-between; }
  html.js .icons { display: flex; gap: calc(1px * var(--s)); }
  html.js.card main { top: calc(26px * var(--s)); left: calc(4px * var(--s)); right: calc(4px * var(--s)); width: auto; margin: 0; max-height: calc(100vh - calc(51px * var(--s))); }
  html.js .paper.on { grid-template-columns: 1fr; }
  html.js .paper .plate-fig { margin: 0 auto calc(5px * var(--s)); }
  #box { left: calc(6px * var(--s)); right: calc(6px * var(--s)); width: auto; margin: 0; bottom: calc(29px * var(--s)); }
  #box.withfig { width: auto; margin: 0; padding-left: calc(6px * var(--s)); }
  #box.top { top: calc(34px * var(--s)); }
  #box.withfig .boxfig { position: static; margin: 0 auto calc(3px * var(--s)); }
  .cell { width: calc(3px * var(--s)); height: calc(8px * var(--s)); }
  .pager > button { min-width: 44px; min-height: 44px; }
  .pager { gap: calc(3px * var(--s)); }
  html.js .side .icon { width: calc(20px * var(--s)); height: calc(20px * var(--s)); }
  html.js .icons { gap: calc(3px * var(--s)); }
}

/* Project plates: a strip of frames played by steps, still with reduced motion or no animation support. */
.strip { display: block; width: calc(120px * var(--s)); height: calc(96px * var(--s)); background-size: calc(1440px * var(--s)) calc(96px * var(--s)); background-repeat: no-repeat; image-rendering: pixelated; margin-bottom: calc(4px * var(--s)); animation: strip 3s steps(12) infinite; }
@keyframes strip { to { background-position-x: calc(-1440px * var(--s)); } }
@media (prefers-reduced-motion: reduce) { .strip { animation: none; } }
.projects { display: grid; grid-template-columns: repeat(auto-fit, calc(122px * var(--s))); column-gap: calc(8px * var(--s)); row-gap: calc(6px * var(--s)); justify-content: center; }
.projects li { margin: 0; }

html:not(.js) .tabs { flex-wrap: wrap; }
.intro { margin-bottom: calc(5px * var(--s)); color: var(--meta); }
.training { margin-top: calc(3px * var(--s)); }
.count { background: none; border: 0; font: inherit; cursor: pointer; padding: 0 calc(2px * var(--s)); }
.paperlist { list-style: none; margin: 0; padding: 0; }
.paperlist li { display: grid; grid-template-columns: calc(26px * var(--s)) 1fr; column-gap: calc(4px * var(--s)); margin-bottom: calc(2px * var(--s)); }
.paperlist .yr { background: none; border: 0; font: inherit; color: var(--meta); text-align: left; cursor: pointer; padding: 0; }
main.listing article.paper { display: none !important; }
.cells2 { touch-action: none; }
@media (max-width: 699px) {
  .close { min-width: 44px; min-height: 44px; }
  .projects a.link { display: inline-block; padding: calc(3px * var(--s)) 0; }
  html.js .tabs { padding-bottom: env(safe-area-inset-bottom); }
  html.js .side { top: calc(3px * var(--s) + env(safe-area-inset-top)); }
}

/* People: the same friends as on the ledge, one to a column. Point at one and they kick. */
.people { display: grid; grid-template-columns: repeat(auto-fill, calc(46px * var(--s))); justify-content: center; column-gap: 0; row-gap: calc(6px * var(--s)); }
.people li { margin: 0; text-align: center; }
.person { display: block; margin: 0 auto calc(2px * var(--s)); width: calc(var(--fw) * 2px * var(--s)); height: calc(var(--fh) * 2px * var(--s)); background-size: calc(var(--fw) * var(--n) * 2px * var(--s)) calc(var(--fh) * 2px * var(--s)); background-repeat: no-repeat; image-rendering: pixelated; }
.people li:hover .person, .people li:active .person { animation: kick 0.9s steps(var(--n)) infinite; }
@keyframes kick { to { background-position-x: calc(var(--fw) * var(--n) * -2px * var(--s)); } }
@media (prefers-reduced-motion: reduce) { .people li:hover .person { animation: none; } }
.pname { display: block; }
.nameplate { position: fixed; z-index: 3; pointer-events: none; }
.nameplate[hidden] { display: none; }
@media (min-width: 700px) {
  html:not(.js) .paper { display: grid; grid-template-columns: calc(122px * var(--s)) 1fr; column-gap: calc(9px * var(--s)); }
  html:not(.js) .paper img { margin: 0; }
}

main.post .sum { margin-bottom: calc(5px * var(--s)); }
html.js main.post { --cw: 300; }

/* the pointer belongs to the world */
html.js, html.js canvas { cursor: url(assets/cursor-arrow.png) 0 0, default; }
html.js canvas[data-cur="hand"], html.js a, html.js button { cursor: url(assets/cursor-hand.png) 9 0, pointer; }
html.js canvas[data-cur="aim"] { cursor: crosshair; }
a:focus-visible, button:focus-visible { outline: calc(1px * var(--s)) solid var(--tabon); outline-offset: calc(1px * var(--s)); }
main:focus { outline: none; }
@media (hover: hover) {
  a.title:hover, a.link:hover, .yr:hover { color: var(--wintext); }
  .tabs a:not([aria-current]):hover { color: var(--tabon); }
  .cell:hover { background: var(--tabon); }
}

/* first paint before the world is ready: the night colour, not a jump from the page colour */
html.js:not(.ready), html.js:not(.ready) body { background: #0A1420; }

html.js .paper.on { min-height: var(--paperh, 0); }
.intro { padding-right: calc(14px * var(--s)); }
.plate a { color: inherit; }
/* large upright phones run at 3x: the intro line would push the pager out of the card */
@media (min-width: 600px) and (max-width: 699px) {
  html.js .intro { display: none; }
}
/* short windows: the card stays inside the screen */
@media (max-height: 420px) {
  html.js .paper.on { grid-template-columns: calc(122px * var(--s)) 1fr; column-gap: calc(6px * var(--s)); }
  html.js .paper .plate-fig { margin: 0; }
  html.js .intro { display: none; }
  html.js.card main { max-height: calc(100vh - calc(30px * var(--s))); }
}

:root { --page: #12304A; --text: #FFF8E0; --win: #12304A; --wintext: #FFF8E0; --winline: #A87E58; --line: #101820; --plate: #F2C879; --platetext: #1F2A33; --tab: #12304A; --tabtext: #DCE4E0; --tabon: #F2C879; --tabontext: #1F2A33; --link: #F2C879; --meta: #A8C8D0; --cell: #24506C; --cellsel: #6A96A6; }