/* The site footer (site/partials/footer.html) on every page, and the page layout that keeps it at the
   bottom: on a short page it sits at the foot of the screen, on a long one after the content.
   Its own colours, so it reads the same on the cream home and DAS's parchment. */
[hidden] { display: none !important; }   /* a class that sets display never un-hides */
/* no page ever scrolls sideways; wide things (the example carousel) scroll inside their own box */
html { overflow-x: clip; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > main { flex: 1 0 auto; width: 100%; }

.site-foot {
  --f-ink: #231c26; --f-muted: #6b6258; --f-band: #f1e8d6; --f-card: #fffdf8; --f-line: #e6dccb; --f-bg: #fbf6ec; --f-accent: #7b56a8;
  flex: none;
  width: 100%;
  margin-top: 4rem;
  border-top: 2px solid var(--f-ink);
  background: var(--f-band);
  padding: 2.2rem max(16px, calc((100% - 38rem) / 2 + 16px)) max(2.2rem, env(safe-area-inset-bottom));
  color: var(--f-muted);
  font: .9rem/1.55 Caslon, Georgia, "Times New Roman", serif;
  text-align: left;
}
body:has(#crew) .site-foot { padding-bottom: 110px; }   /* the crew's ground */
.site-foot p { margin: 0; }
.foot-follow { text-align: center; font-size: 1rem; line-height: 1.6; text-wrap: balance; }
.foot-follow a { font-family: Pixelify, system-ui, sans-serif; font-weight: 600; letter-spacing: .02em; color: var(--f-ink);
  text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.foot-follow a:hover { text-decoration-style: solid; }
.foot-follow a:focus-visible { outline: 2px dashed var(--f-accent); outline-offset: 4px; }
.foot-quip { font: .82rem/1.5 Pixelify, system-ui, sans-serif; letter-spacing: .03em; color: var(--f-muted); text-align: center; }
.foot-legal { margin: .2rem 0 0; font: .8rem/1.5 Pixelify, system-ui, sans-serif; letter-spacing: .03em; text-align: center; }
.foot-legal a { color: var(--f-muted); }

/* every agent, under the name, on its own card; the stripe and count wear its mascot's colours (--agent, stats.js) */
.foot-agents { list-style: none; margin: .5rem 0 1rem; padding: 0; width: min(100%, 26rem); display: grid; gap: 1rem; }
.agent-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: .9rem 1.1rem .9rem .9rem;
  background: var(--f-card); border: 2px solid var(--f-ink); border-left: 8px solid var(--agent, var(--f-ink)); box-shadow: 5px 5px 0 var(--f-line); text-align: left; }
.agent-face { width: 64px; height: 56px; image-rendering: pixelated; image-rendering: crisp-edges; }
.agent-card a { font: 600 1.02rem/1.3 Pixelify, system-ui, sans-serif; color: var(--f-ink); text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.agent-card a:hover { text-decoration-style: solid; }
.agent-card a:focus-visible { outline: 2px dashed var(--f-accent); outline-offset: 4px; }
.agent-card p { margin-top: .3rem; font-size: .92rem; line-height: 1.45; color: var(--f-muted); }
.agent-card p.agent-count { margin-top: .45rem; }

/* a live count (stats.js), wherever a page shows one: a pixel soul, still, in the agent's mascot colour
   (--agent, set by stats.js from the mascot's palette; ink until it loads) */
.agent-count { display: inline-flex; align-items: center; gap: .45em; font: 600 .82rem/1.4 Pixelify, system-ui, sans-serif; letter-spacing: .04em; color: var(--agent, #231c26); }
.agent-count::before { content: ""; flex: none; width: 13px; height: 13px; background: var(--agent, #231c26);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='4' y='0' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='7' y='1' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='4' y='3' width='1' height='1'/%3E%3Crect x='5' y='3' width='1' height='1'/%3E%3Crect x='7' y='3' width='1' height='1'/%3E%3Crect x='8' y='3' width='1' height='1'/%3E%3Crect x='0' y='4' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='3' y='4' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='5' y='4' width='1' height='1'/%3E%3Crect x='7' y='4' width='1' height='1'/%3E%3Crect x='8' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='4' y='5' width='1' height='1'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='6' y='5' width='1' height='1'/%3E%3Crect x='7' y='5' width='1' height='1'/%3E%3Crect x='8' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='4' y='6' width='1' height='1'/%3E%3Crect x='5' y='6' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='7' y='6' width='1' height='1'/%3E%3Crect x='8' y='6' width='1' height='1'/%3E%3Crect x='0' y='7' width='1' height='1'/%3E%3Crect x='1' y='7' width='1' height='1'/%3E%3Crect x='2' y='7' width='1' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='5' y='7' width='1' height='1'/%3E%3Crect x='6' y='7' width='1' height='1'/%3E%3Crect x='7' y='7' width='1' height='1'/%3E%3Crect x='8' y='7' width='1' height='1'/%3E%3Crect x='0' y='8' width='1' height='1'/%3E%3Crect x='2' y='8' width='1' height='1'/%3E%3Crect x='3' y='8' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='1'/%3E%3Crect x='6' y='8' width='1' height='1'/%3E%3Crect x='8' y='8' width='1' height='1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='4' y='0' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='3' y='1' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='7' y='1' width='1' height='1'/%3E%3Crect x='1' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3Crect x='7' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='4' y='3' width='1' height='1'/%3E%3Crect x='5' y='3' width='1' height='1'/%3E%3Crect x='7' y='3' width='1' height='1'/%3E%3Crect x='8' y='3' width='1' height='1'/%3E%3Crect x='0' y='4' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='3' y='4' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='5' y='4' width='1' height='1'/%3E%3Crect x='7' y='4' width='1' height='1'/%3E%3Crect x='8' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='4' y='5' width='1' height='1'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='6' y='5' width='1' height='1'/%3E%3Crect x='7' y='5' width='1' height='1'/%3E%3Crect x='8' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='4' y='6' width='1' height='1'/%3E%3Crect x='5' y='6' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='7' y='6' width='1' height='1'/%3E%3Crect x='8' y='6' width='1' height='1'/%3E%3Crect x='0' y='7' width='1' height='1'/%3E%3Crect x='1' y='7' width='1' height='1'/%3E%3Crect x='2' y='7' width='1' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='5' y='7' width='1' height='1'/%3E%3Crect x='6' y='7' width='1' height='1'/%3E%3Crect x='7' y='7' width='1' height='1'/%3E%3Crect x='8' y='7' width='1' height='1'/%3E%3Crect x='0' y='8' width='1' height='1'/%3E%3Crect x='2' y='8' width='1' height='1'/%3E%3Crect x='3' y='8' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='1'/%3E%3Crect x='6' y='8' width='1' height='1'/%3E%3Crect x='8' y='8' width='1' height='1'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the sign-off: the site's name, and everyone huddled under it */
.foot-sign { margin-top: 2.4rem; display: grid; justify-items: center; gap: .7rem; }
.foot-name { font: 700 1.35rem/1.1 Pixelify, system-ui, sans-serif; letter-spacing: .02em; color: var(--f-ink) !important; text-decoration: none; }
.foot-name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot-name:focus-visible { outline: 2px dashed var(--f-accent); outline-offset: 4px; }
.huddle { display: block; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* the survey */
.survey { margin: 0 0 2.2rem; background: var(--f-card); border: 2px solid var(--f-ink); box-shadow: 5px 5px 0 var(--f-line); color: var(--f-ink); }
.survey > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.2rem; padding: .7rem 1.2rem; cursor: pointer; list-style: none; }
.survey > summary::-webkit-details-marker { display: none; }
.survey > summary:hover { background: var(--f-bg); }
.survey > summary:focus-visible { outline: 2px dashed var(--f-accent); outline-offset: 3px; }
.survey h2 { font: 600 .82rem/1.4 Pixelify, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--f-ink); margin: 0; }
.survey-arrow { flex: none; width: 16px; height: 10px; fill: var(--f-ink); shape-rendering: crispEdges; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.survey[open] .survey-arrow { transform: rotate(180deg); }
.survey[open] > summary { padding-bottom: .3rem; }
.survey > :not(summary) { margin-left: 1.2rem; margin-right: 1.2rem; }
.survey > .survey-q { margin-top: .3rem; }
.survey > .survey-meta { margin-bottom: 1rem; }
.survey-q { font-size: 1.1rem; line-height: 1.4; margin: 0 0 .8rem; }
.survey-opts { display: grid; gap: .5rem; }
.survey-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; min-height: 2.75rem;
  padding: .55rem .8rem; border: 2px solid var(--f-ink); background: var(--f-bg); color: var(--f-ink); font: 1rem/1.3 Caslon, Georgia, serif; text-align: left; overflow: hidden; }
button.survey-opt { cursor: pointer; }
button.survey-opt:hover { background: var(--f-line); }
button.survey-opt:focus-visible { outline: 2px dashed var(--f-accent); outline-offset: 3px; }
.survey-opt .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: #e8dcf3; transition: width .7s cubic-bezier(.2, .7, .2, 1); }
.survey-opt.mine .bar { background: #d4c0ea; }
.survey-opt .label, .survey-opt .pct { position: relative; }
.survey-opt .pct { font: 600 .9rem/1 Pixelify, system-ui, sans-serif; white-space: nowrap; }
.survey-opt.mine .label { font-weight: 700; }
.survey.busy .survey-opts { opacity: .6; pointer-events: none; }
.survey-meta { font: .75rem/1.5 Pixelify, system-ui, sans-serif; color: var(--f-muted); letter-spacing: .02em; margin: .7rem 0 0; }
.survey-opt .you { font: 500 .62rem/1 Pixelify, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--f-accent); margin-left: .5em; vertical-align: .15em; white-space: nowrap; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .survey-opt .bar { transition: none; } }