/* The palette, the monospace stack and the header are congo's, carried over
   so this site reads as the same hand. What is not carried is the workbench:
   no command bar, no palette overlay, no split panes, no `$ ` before a
   heading. On congo that prompt is load-bearing -- it says "this is the output
   of a command you could have typed". Here it would be costume.

   The one knowing break: congo is monospace everything, because monospace
   preserves the shape of a lyric line. This site is prose somebody reads, so
   mono keeps the chrome and a system sans takes the body copy. System fonts
   only -- no webfont, no CDN, nothing requested from anyone else. */

:root {
  color-scheme: dark;

  --bg:        #0b0e14;
  --bg-raised: #11161f;
  --bg-hover:  #151b26;
  --rule:      #1f2733;

  --fg:        #c5cdd9;
  --dim:       #6b7684;
  --faint:     #3d4653;

  /* Quiet chrome that is still readable: the boot lines and the footer. Not
     --dim (4.19:1) and certainly not --faint (2.02:1), both of which are
     under what small text needs against --bg. This is 6.51:1. */
  --quiet:     #8b97a7;

  --green:     #7ee787;   /* where you are */
  --cyan:      #79c0ff;   /* links */
  --mauve:     #b48ead;   /* the status chip */

  --mono: ui-monospace, "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo,
          Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --measure: 42rem;
}

* { box-sizing: border-box; }

/* Author styles beat the browser's own [hidden] rule regardless of
   specificity, so anything given `display` here would stop hiding. */
[hidden] { display: none !important; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: #24405c; color: #fff; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--dim);
}

main {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
  flex: 1 0 auto;
}

/* --- header -------------------------------------------------------------- */

header.site {
  border-bottom: 1px solid var(--rule);
  background: var(--bg-raised);
  font-family: var(--mono);
}

header.site .bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.wordmark { color: var(--dim); font-weight: 700; }
.wordmark:hover { color: var(--fg); text-decoration: none; }

/* congo's trick, and worth keeping: the marker is drawn beside every item and
   coloured on only the active one. Adding and removing it would shift the
   header sideways every time the section changed. */
header.site .wordmark::before,
header.site nav a::before {
  content: "\258D";
  color: transparent;
  margin-right: 0.35rem;
}
header.site .is-here::before { color: var(--green); }

header.site nav a { color: var(--dim); font-size: 0.9rem; }
header.site nav a:hover { color: var(--fg); text-decoration: none; }
header.site .is-here { color: var(--green); }
header.site .is-here:hover { text-decoration: none; }

/* --- headings ------------------------------------------------------------ */

h1 {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  color: var(--fg);
}

h2 {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 2.75rem 0 1rem;
  color: var(--dim);
}

h3 {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

p { margin: 0 0 1.05rem; }

/* --- home ---------------------------------------------------------------- */

.lede { font-size: 1.05rem; }

.intro p:last-child { margin-bottom: 0; }

.projects { margin-top: 0.5rem; }

.project {
  border-top: 1px solid var(--rule);
  padding: 1.15rem 0.5rem 1.15rem 0;
  margin: 0 -0.5rem 0 0;
}

.project:last-child { border-bottom: 1px solid var(--rule); }

.project .tagline { margin: 0 0 0.5rem; color: var(--fg); }

/* --- project page -------------------------------------------------------- */

.crumbs {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--dim);
  margin: 0 0 1.75rem;
}
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--cyan); }
.crumbs .sep { color: var(--faint); margin: 0 0.35rem; }

.project-page .tagline {
  color: var(--dim);
  margin: 0 0 0.75rem;
}

.project-page .prose { margin-top: 1.75rem; }

/* --- metadata ------------------------------------------------------------ */

.meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dim);
  margin: 0;
}
.meta .sep { color: var(--faint); margin: 0 0.4rem; }

.status {
  color: var(--mauve);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
}
.status.is-planned { color: var(--faint); }

/* --- prose asides -------------------------------------------------------- */

.note {
  color: var(--dim);
  font-size: 0.9rem;
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
  margin-top: 1.75rem;
}

/* --- footer -------------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--rule);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--quiet);
  flex-shrink: 0;
}

footer.site p {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}

/* --- the sign-up honeypot ------------------------------------------------ */

/* Off-screen rather than display:none. A bot that skips hidden inputs will
   still fill this one, and no person ever sees it: it is out of the viewport,
   out of the tab order (tabindex="-1" on the input) and aria-hidden. If this
   rule is ever deleted the field becomes visible and reads as a real question,
   which is why there is a system test asserting it stays invisible. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- the two halves on the front page ------------------------------------ */

.half { margin-top: 2.5rem; }
.half > p:first-of-type { color: var(--dim); }

ul.brief { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.brief li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
ul.brief li:last-child { border-bottom: 0; }

/* --- offerings ----------------------------------------------------------- */

.offering {
  border-top: 1px solid var(--rule);
  padding: 1.15rem 0;
}
.offering:last-child { border-bottom: 1px solid var(--rule); }
.offering .tagline { margin: 0 0 0.5rem; }

/* The kind chip. Two colours only, because there are three kinds and "both"
   should read as belonging to each rather than as a third thing. */
.kind { color: var(--mauve); }
.kind.is-meditation { color: var(--green); }

ul.meetings { list-style: none; padding: 0; margin: 0 0 1.5rem; font-family: var(--mono); font-size: 0.85rem; }
ul.meetings li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
ul.meetings li.is-full { color: var(--dim); }
.meeting .spots { color: var(--dim); }
.meeting.is-full .spots { color: var(--amber, #d9a441); }

/* --- facts, forms, tables ------------------------------------------------ */

dl.facts { margin: 1.25rem 0; font-family: var(--mono); font-size: 0.85rem; }
dl.facts > div { display: flex; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--rule); }
dl.facts dt { color: var(--dim); min-width: 8rem; }
dl.facts dd { margin: 0; }

form.record { margin: 1.5rem 0; max-width: 32rem; }
form.record .field { margin-bottom: 1rem; }
form.record label { display: block; color: var(--dim); font-family: var(--mono); font-size: 0.8rem; margin-bottom: 0.25rem; }
form.record input[type="text"], form.record input[type="email"], form.record input[type="tel"],
form.record input[type="number"], form.record input[type="date"], form.record input[type="time"],
form.record input[type="datetime-local"], form.record select, form.record textarea {
  font: inherit;
  width: 100%;
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.4rem 0.5rem;
}
form.record :focus { outline: none; border-color: var(--green); }
form.record .hint { color: var(--comment, #4f5b6b); font-size: 0.8rem; margin: 0.25rem 0 0; }
form.record .actions { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }

input[type="submit"], button {
  font: inherit;
  font-family: var(--mono);
  color: var(--fg);
  background: var(--bg-hover);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
input[type="submit"].is-primary { border-color: var(--green); color: var(--green); }
.is-danger button, button.is-danger, input.is-danger { border-color: #f2777a; color: #f2777a; }
form.inline { display: inline; }
.linkish button, button.linkish { background: none; border: 0; color: var(--cyan); padding: 0; }

.errors { border: 1px solid #f2777a; color: #f2777a; padding: 0.75rem 1rem; margin-bottom: 1.5rem; }
.errors ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }

.flash { border-left: 2px solid var(--green); padding: 0.5rem 0.9rem; margin-bottom: 1.5rem; color: var(--dim); }
.flash.is-alert { border-left-color: #f2777a; color: #f2777a; }

table.rows { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.82rem; margin: 1rem 0 2rem; }
table.rows th { text-align: left; color: var(--dim); font-weight: 600; border-bottom: 1px solid var(--rule); padding: 0.4rem 0.6rem 0.4rem 0; }
table.rows td { padding: 0.4rem 0.6rem 0.4rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.rows td.empty { color: var(--dim); }

.status { color: var(--dim); }
.status.is-confirmed, .status.is-published, .status.is-active { color: var(--green); }
.status.is-waitlisted, .status.is-draft { color: var(--amber, #d9a441); }
.status.is-cancelled, .status.is-no_show, .status.is-inactive { color: var(--faint); }

main.is-wide { max-width: 68rem; }
body.admin .wordmark { color: var(--amber, #d9a441); }

/* --- the mark bank ------------------------------------------------------- */

/* Not a public page: the route is drawn outside production only. It exists so
   the marks that were drawn and not chosen live somewhere other than a scratch
   directory, and so two sizes can be judged side by side -- 112px, which is
   what the front door uses, and 32px, where a halftone gives out.

   The marks carried a status badge for a while -- in use, reserved, option --
   which was workbench furniture: it told Chad which drawing the site used
   while he was choosing one. Each mark's own prose says the same thing in a
   sentence, and says it better, so the badges went. */

ul.marks { list-style: none; padding: 0; margin: 2rem 0 0; }

.mark-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}

/* One drawing each. There were two for a while -- 112px beside 32px -- back
   when this page was a workbench for choosing a mark and the small copy was
   the test that decided it: watching the halftone dissolve is what proved the
   favicon needed its own simpler drawing rather than a shrunk one. The page
   is a showcase now, and a visitor is not choosing anything. */
.mark-card .shot {
  flex: 0 0 auto;
  background: var(--bg);
  padding: 0.5rem;
}

/* Pixel art, so it is never smoothed at any size. */
.mark-card img { image-rendering: pixelated; display: block; }
.mark-card .big { width: 112px; height: 112px; }

.mark-card .about { flex: 1 1 auto; min-width: 0; }
/* The name in phosphor, so the eye finds it before the prose -- and the
   prose itself in --fg rather than --dim, which measured 4.19:1 against the
   background and is under what small text wants. These are whole sentences
   somebody reads, so they get the same weight as body copy anywhere else. */
.mark-card h2 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--green); letter-spacing: 0; }
.mark-card .about p { margin: 0.4rem 0 0; color: var(--fg); }


@media (max-width: 34rem) {
  .mark-card { flex-direction: column; gap: 0.75rem; }
  .mark-card .big { width: 96px; height: 96px; }
}