/* 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:        #e4e9ef;   /* 15.8:1 on --bg. not pure white: on a dark
                             ground that haloes, which is the thing being
                             fixed here rather than added to */
  --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 */

  /* The same hue lifted for small text. --mauve is 6.82:1 against --bg, which
     clears the bar and still reads faint at 0.7rem on a monitor that is not
     the one this was designed on. This is 10.04:1, a step below --green's
     12.32 so the mark's name still leads. */
  --mauve-lit: #d0b2cb;

  /* congo's --faint, which is turquoise rather than grey: the quiet colour on
     its listing pages, and the one its glossary filters use for the label and
     the separators between names. Carried here so the mark bank's filter row
     is the same row of controls congo's /transcriptions has. 7.4:1. */
  --teal:      #6aa8a8;

  --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 contact form ---------------------------------------------------- */

/* Radios and checkboxes, which no other form on this site has. A fieldset is
   the markup that says "these belong together" to a screen reader, and the
   browser's own focus and checked states are left alone: restyling a control
   somebody's operating system already draws is how a form stops behaving the
   way its owner expects. */
.record fieldset.choices {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1.25rem;
}

.record fieldset.choices legend {
  padding: 0 0.4rem;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.record .choice { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.35rem 0; }
.record .choice input { accent-color: var(--green); }
.record .choice label { display: inline; margin: 0; color: var(--fg); font-family: var(--sans); font-size: inherit; }

/* The page says what it does with what it is given, which is the only honest
   version of a privacy policy this site is going to have. */
.contact-form .note { color: var(--quiet); font-size: 0.85rem; margin-top: 1.5rem; }

/* The site already has a .flash, and it is --dim on a bordered left edge,
   which is right in the admin and too quiet on a CRT. This is the same
   element brighter, scoped to the pages that wear the landing layout rather
   than restyled globally -- the admin's flash is not this page's to change. */
.page .flash {
  margin: 1.5rem 0 0;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.page .flash.is-alert { color: #f2777a; }

/* The form hints and labels, brighter on the CRT than in the admin. --comment
   is 2.7:1 and --dim is 4.19, both of which are under what small text needs,
   and this is the one form on the site a stranger fills in. Scoped rather
   than global: the same pass is owed to the yoga forms and the admin, and
   TODO.md carries it as its own job rather than a side effect of this one. */
.page .record .hint { color: var(--quiet); }
.page .record label { color: var(--quiet); }
.page .record fieldset.choices legend { color: var(--quiet); }

/* --- 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. */

/* --- searching and filtering the bank ------------------------------------ */

/* A plain GET form and a row of links, which is the whole feature. No
   javascript: the bank is eighteen entries in a frozen array, so the server
   answers in a line of `select`, and what comes back is a url that can be
   sent to somebody else -- which a page filtering itself in the browser
   cannot offer. */

.sift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.sift label { color: var(--quiet); }

.sift input[type="search"] {
  font: inherit;
  flex: 1 1 15rem;
  max-width: 24rem;
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.35rem 0.5rem;
}

.sift input[type="search"]::placeholder { color: var(--dim); }
.sift input[type="search"]:focus { outline: none; border-color: var(--green); }
.sift input[type="submit"] { font-size: 0.8rem; padding: 0.35rem 0.9rem; }
.sift .clear { color: var(--quiet); }

/* The filters, wearing congo's /transcriptions colours: the names in mauve,
   which is what a glossary term wears throughout congo and what a tradition
   wears on the cards below, the one in force in green, which is how every
   filter in congo marks its current choice, and the label and separators in
   the turquoise congo keeps for quiet chrome.

   The row is one control, so it reads as one: a word, then names, then the
   tally each name is worth. */
ul.traditions {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 0;
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

ul.traditions a { color: var(--mauve-lit); text-decoration: none; }
ul.traditions a:hover { color: var(--fg); }
ul.traditions .is-on a { color: var(--green); }

/* The label and the separators, which are chrome rather than controls. The
   separators are drawn between items rather than written into the markup --
   they are punctuation, and a screen reader reading eight interpunct
   characters is being told nothing. */
.filter-label { color: var(--teal); }
ul.traditions li + li::before { content: "·"; color: var(--teal); margin-right: 1rem; }

/* How many marks are behind a word, so nobody spends a click to find out that
   greek is one drawing. */
ul.traditions .tally { color: var(--teal); }
ul.traditions .is-on .tally { color: var(--green); }

.count {
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--quiet);
}

/* The only dead end on the page, so it carries the way out of itself. */
.empty { margin: 2rem 0 0; color: var(--fg); }

ul.marks { list-style: none; padding: 0; margin: 1rem 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. */
/* The tradition each mark is filed under, set in the bottom right corner of
   the card rather than as a heading over a group of them. congo's glossary
   uses these names, and two here are not among them: tarot is a deck rather
   than a tradition, and digital pilgrim is the site itself -- the marks drawn
   for this place rather than carried in from somewhere older.

   Mono and letterspaced, which is this site's rule for metadata, and a mauve,
   which the palette already keeps for a chip. Not --cyan, which is what a
   link looks like here, and not --green, which the name above it already
   takes. --mauve-lit rather than --mauve: 10.04:1 against the background
   instead of 6.82, because two brightening passes have now established that
   what looks quiet here looks unreadable on Chad's other monitors. */
.mark-card .filed {
  margin: 0.85rem 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--mauve-lit);
}

/* The tag itself. A hairline and a wash of the same colour rather than a
   filled pill: on a ground this dark a solid chip reads as a button, and
   eighteen buttons down the page would pull the eye off the drawings. */
.mark-card .filed span {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(208, 178, 203, 0.4);
  border-radius: 2px;
  background: rgba(208, 178, 203, 0.09);
}

.mark-card h2 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--green); letter-spacing: 0; }
/* `gloss` rather than `note`, which is already a callout box elsewhere in this
   stylesheet -- the first attempt gave every mark a left rule and an indent it
   was never meant to have. */
.mark-card .gloss { 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; }
}