/* Only the small project sites use this, on top of the main site's site.css. */

/* Header: the site's name in place of a logo; the menu takes a second row when it needs one */
.project .site-header .wrap { height: auto; min-height: 68px; flex-wrap: wrap; row-gap: 0; padding-top: 8px; padding-bottom: 8px; }
.brand-text { flex: none; color: #fff; text-decoration: none; font: 700 21px/1.1 var(--display); font-stretch: 108%; letter-spacing: -.01em; max-width: 340px; }
.brand-text:hover { color: var(--foam); }
.project .site-nav { flex-wrap: wrap; row-gap: 2px; }
.project .site-nav .item > a { padding: 9px 11px; font-size: 14.5px; }
.parent-mark { display: block; line-height: 0; padding: 3px 7px; background: #e9f4f4; border-radius: 8px; margin-right: 6px; }
.parent-mark img { width: 84px; height: auto; }
.runeasy .parent-mark { background: none; padding: 0; }
.runeasy .parent-mark img { width: 92px; }
@media (min-width: 1061px) {
  /* a long menu goes under the name, across the whole width */
  .project .site-nav.long { order: 3; flex: 1 1 100%; margin: 6px -11px 0; }
}
@media (max-width: 1060px) {
  .project .site-nav .item > a { font-size: 15px; }
}

/* Pictures from the old pages keep their own size and float beside the text */
.content img { border-radius: 6px; }
.content img.fr { float: right; margin: 4px 0 16px 24px; max-width: 45%; }
.content img.fl { float: left; margin: 4px 24px 16px 0; max-width: 45%; }
.content::after { content: ""; display: table; clear: both; }
.content > p, .content > ul, .content > ol, .content > h2, .content > h3, .content > h4 { max-width: 760px; margin-inline: auto; }
.content h4 { margin: 22px 0 6px; font: 700 17px/1.3 var(--display); }
.content .banner { display: block; width: 100%; max-width: 860px; margin: 0 auto 32px; }
.content .center { text-align: center; }

/* Tables from the old pages (people, demos, data sources) */
.content table { max-width: 900px; margin: 0 auto 24px; border-collapse: collapse; }
.content td, .content th { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--line); }
.content td img { max-width: 100%; }

/* People: photo beside name and text */
.people { max-width: 860px; margin: 0 auto; display: grid; gap: 22px; }
.people .person { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.people .person img { width: 120px; height: auto; float: none; margin: 0; max-width: none; }
.people .person h2, .people .person h3 { margin: 0 0 6px; }
.people .person p { margin: 0 0 10px; }

/* Demos: picture links in a grid */
.demo-grid { max-width: 980px; margin: 0 auto 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.demo-grid figure { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.demo-grid img { display: block; width: 100%; height: auto; }
.content video { display: block; max-width: 100%; margin: 0 auto 24px; border-radius: 8px; background: #000; }

/* Footer: funders' logos, the funding note, copyright */
.project .site-footer .funder { line-height: 0; }
.project .site-footer .funder img { width: auto; height: 56px; padding: 4px; background: #fff; border-radius: 8px; }
.project .site-footer .funding { flex: 1 1 320px; color: #c9dadd; }
.project .site-footer .funding a { margin: 0; color: #fff; text-decoration: underline; }

@media (max-width: 640px) {
  .content img.fr, .content img.fl { float: none; display: block; margin: 0 auto 16px; max-width: 100%; }
  .people .person { grid-template-columns: 1fr; }
}

/* Each person on the Contributors and Team pages starts below the one before */
.content p:has(> strong:first-child) { clear: both; padding-top: 6px; }
.content td img.fl, .content td img.fr { float: none; max-width: none; margin: 0; }
.content iframe { display: block; max-width: 100%; margin: 0 auto 24px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 760px) {
  /* wide tables scroll sideways on phones instead of widening the page */
  .content table { display: block; overflow-x: auto; }
}

/* Demo pages: a picture and a line pointing to the main site's Examples page */
.examples-callout { max-width: 760px; margin: 0 auto 36px; display: flex; gap: 24px; align-items: center; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.examples-callout img { display: block; width: 320px; max-width: 100%; height: auto; }
.examples-callout p { margin: 0; font-size: 19px; }
@media (max-width: 640px) { .examples-callout { flex-direction: column; align-items: stretch; } }