/* AISLING's site, the part every page shares: the fonts, the wall, the bar along the top, the bench and its parts, the
   print rule. Written once here and in tools/site_brand.py, in the manner of the gnomes' sites (bit-art down the margins,
   one bar, a hairline box with a header strip, lowercase mono controls, square corners) in AISLING's own colours: vellum,
   iron-gall ink, the card's green, rust for what is on. Text reads at 4.5:1 or more. The visualiser has its own copy of
   all this, because it fetches nothing. */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap;
             src: url(fonts/BarlowSemiCondensed-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
             src: url(fonts/IBMPlexMono-Regular.woff2) format("woff2"); }
:root { --brand-ground: #f3ead7; --brand-strip: #ece2cb; --brand-ink: #2b2219; --brand-muted: #5b4a3a; --brand-rule: #d9ccb1;
        --brand-soft: #e4d8c0; --brand-green: #146c41; --brand-rust: #8c3510; --brand-bench: 1148px;
        --brand-display: "Barlow Semi Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
        --brand-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; color-scheme: light; }
body { margin: 0; padding: 0 16px 48px; background: var(--brand-ground); color: var(--brand-ink);
       font: 400 13.5px/1.6 var(--brand-mono); }
a { color: var(--brand-ink); text-decoration-color: var(--brand-rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-green); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, pre:focus-visible {
  outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* the wall: the page's own bit-art (wall.js), fixed behind everything and masked out of the middle, so it shows only in
   the margins either side of the bench. A page with a narrower bench sets --brand-bench on its body */
.wall { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s;
        background-position: center top; background-size: 224px; image-rendering: pixelated;
        --m: linear-gradient(to right, #000 calc(50% - var(--brand-bench) / 2 - 70px), transparent calc(50% - var(--brand-bench) / 2 - 10px),
             transparent calc(50% + var(--brand-bench) / 2 + 10px), #000 calc(50% + var(--brand-bench) / 2 + 70px));
        -webkit-mask-image: var(--m); mask-image: var(--m); }
.wall.on { opacity: .18; }
@media (prefers-reduced-motion: reduce) { .wall { transition: none; } }

/* the bar. Its negative margin cancels the body's gutter, so the rule runs edge to edge */
.sitebar { background: var(--brand-ground); border-bottom: 1px solid var(--brand-rule); margin: 0 -16px; }
.sitebar-in { box-sizing: border-box; max-width: calc(var(--brand-bench) + 32px); margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap;
              align-items: center; gap: 2px 20px; }
.sitebar a { color: var(--brand-ink); }
.sitebar-home { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; text-decoration: none; }
.sitebar-mark { display: block; flex: none; box-sizing: content-box; border: 1px solid var(--brand-rule);
                image-rendering: pixelated; }
.sitebar-name { font: 600 1.3rem/1 var(--brand-display); letter-spacing: .14em; }
.sitebar-by { font: 400 .78rem/1 var(--brand-mono); color: var(--brand-green); white-space: nowrap; }
.sitebar-home:hover .sitebar-name { color: var(--brand-green); }
.sitebar-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 14px; font: 400 .8rem/1 var(--brand-mono); }
.sitebar-nav a { display: inline-block; padding: 8px 0; text-decoration: underline; text-decoration-thickness: 1px;
                 text-decoration-color: var(--brand-rule); text-underline-offset: 3px; white-space: nowrap; }
.sitebar-nav a:hover { text-decoration-color: currentColor; color: var(--brand-green); }
.sitebar-nav a[aria-current] { color: var(--brand-green); text-decoration: none; }
@media (max-width: 47.99rem) { .sitebar-nav { margin-left: 0; width: 100%; } }
/* one row from here up, so it can stay at the top, and a jump to a heading stops clear of it */
@media (min-width: 48rem) and (min-height: 32rem) {
  html { scroll-padding-top: 4.5rem; }
  .sitebar { position: sticky; top: 0; z-index: 20; }
}

/* the bench: a hairline box, its header strip, then rows with a hairline between them */
.bench { box-sizing: border-box; max-width: var(--brand-bench); margin: 20px auto 0; border: 1px solid var(--brand-rule);
         background: var(--brand-ground); }
.bench > * + * { border-top: 1px solid var(--brand-rule); }
.strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
         padding: 8px 14px; background: var(--brand-strip); }
.lab { margin: 0; font: 400 12.5px/1.55 var(--brand-mono); letter-spacing: .045em; color: var(--brand-muted); }
.lab b { font-weight: 400; color: var(--brand-ink); }
/* headings stand clear of the mono text in the display face: a section's, and the one a paragraph or a list item opens on */
.bh { margin: 0 0 8px; font: 600 17px/1.3 var(--brand-display); letter-spacing: .02em; color: var(--brand-ink); }
.lead { font: 600 1.18em/1 var(--brand-display); letter-spacing: .01em; color: var(--brand-ink); }
.pane { min-width: 0; padding: 14px 16px 16px; }
/* a narrow column and a wide one, or two the same */
.cols { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.side { min-width: 0; border-right: 1px solid var(--brand-rule); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two > * + * { border-left: 1px solid var(--brand-rule); }
/* the controls: lowercase mono, square, hairline; the one to start with filled green. (Only on links and buttons: the
   emulator's FM-1 has SVG text of this class) */
a.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 32px;
       padding: 5px 10px; font: 400 12.5px/1.4 var(--brand-mono); letter-spacing: .02em; text-transform: lowercase; color: var(--brand-ink);
       background: var(--brand-ground); border: 1px solid var(--brand-rule); border-radius: 0; text-decoration: none; cursor: pointer; }
a.btn:hover, button.btn:hover { color: var(--brand-ink); border-color: var(--brand-ink); }
a.btn.go, button.btn.go { background: var(--brand-green); border-color: var(--brand-green); color: var(--brand-ground); }
a.btn.go:hover, button.btn.go:hover { background: #0f5332; border-color: #0f5332; color: var(--brand-ground); }
button.btn:disabled, button.btn.go:disabled { opacity: .45; cursor: default; }
@media (max-width: 47.99rem) {
  .cols, .two { grid-template-columns: minmax(0, 1fr); }
  .side { border-right: 0; border-bottom: 1px solid var(--brand-rule); }
  .two > * + * { border-left: 0; border-top: 1px solid var(--brand-rule); }
}

@media print {
  :root { --brand-ground: #fff; --brand-strip: #fff; --brand-ink: #000; --brand-muted: #333; --brand-rule: #bbb; --brand-green: #000; }
  .sitebar, .wall, .side { display: none; }
  body { padding: 0; }
  .bench { max-width: none; margin: 0; border: 0; }
  .cols { display: block; }
  .strip { padding: 0 0 4px; }
}