/* Document surfaces: the questions page and the about page.
 *
 * These are not the app and not the pitch. A visitor is here to understand one
 * thing and leave, which makes every decision below a reading decision.
 *
 * The column, first. Body copy on these pages had no cap, so a line ran the width
 * of the window: 152 characters at 1440px and 197 at 1850, against the 62-70 the
 * system holds everywhere else. A reader loses the start of the next line at that
 * length, on the page whose whole job is being read once and understood.
 *
 * The cap is in `ch` rather than rem because `ch` is the width of a "0" in
 * whatever face and size the column ends up carrying, so the measure follows the
 * type instead of having to be re-derived every time the type changes. It is not
 * one character wide, though: a digit is one of the widest glyphs a text face
 * cuts, and measured on this page's own copy the average character comes out at
 * 0.81 of it in the prose face. 65ch is therefore about 80 real characters.
 *
 * That is a long line by the book, and it is deliberate: a document page is read
 * once, at a desk, with an index beside it, not scanned in a band between two
 * others. The leading pays for it. 1.6 rather than the system's 1.55, because the
 * longer the line the more the eye needs a rail to come back down to.
 *
 * The rhythm, second. A question and its answer are one thing; the next question
 * is another. That has to be said with space rather than with rules or boxes, so
 * the intervals run 8 / 16 / 48: eight pixels from a question to its own answer,
 * sixteen between paragraphs inside it, forty-eight between one unit and the
 * next. The generous interval is what turns ten headings into ten groups.
 */

/* The steps this surface uses, named where they are read rather than inherited
   from the homepage's wrapper. Display and body are the system's own; the lede
   borrows the title step, since a lede is a title's second sentence rather than
   a size of its own. --t-heading is the one addition: a document needs a section
   step between the page title and the body, and the ramp had nothing between
   2.5rem and 1.15rem to put ten questions on. */
.prose-page {
  --t-display: clamp(1.65rem, 3.4vw, 2.5rem);
  /* Expressed against the body step rather than as its own number, so the one
     ratio that matters here — a question against the answers under it — survives
     the body growing on a wide monitor. */
  --t-heading: calc(var(--t-body) * 1.5);
  --t-lede: 1.15rem;
  --t-body: 1rem;

  max-width: 65ch;
  margin-inline: auto;
  /* main already reserves the footer's height, so this is not clearance: it is
     the end of a document reading as an end. In em, like the interval between
     sections, and a little wider than one. */
  padding-bottom: 4em;
  /* Prose takes the prose face. The body default is the interface face because
     the app is mostly controls, so a page that is entirely an argument has to say
     so; these pages were set in Inter and read like a settings screen with
     serif headings. The filter keeps Inter, being a control rather than an
     argument. */
  font-family: var(--font-prose);
  font-size: var(--t-body);
  line-height: 1.6;
}

/* The title carries the page on its own, so it takes the space above the fold
   rather than a rule under it, and the lede sits close enough to read as its
   second line. */
.prose-title {
  margin: 0 0 .5rem;
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.prose-lede {
  margin: 0 0 1rem;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--gp-muted-ink);
  text-wrap: pretty;
}

/* The terms' version identifier. A technical readout inside a sentence of prose,
   so it takes the mono step DESIGN.md licenses for one and drops a size, and it
   stays on one line: seven hex digits broken across two is unquotable. */
.prose-version {
  white-space: nowrap;
  font-size: 0.86em;
}

.prose-version code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.94em;
  color: inherit;
}

/* Every block, not every block after the first: the opening gap belongs to the
   filter above it as much as to the section below, and the about page opens with
   an untitled block that needs the same air.

   In em, not rem: this is the interval that separates one question from the next,
   so it is measured in the type it is separating and holds its proportion when
   the body grows on a wide monitor. The tight intervals below stay on the pixel
   scale, being the space inside one unit rather than between two. */
.prose-block {
  margin-top: 3em;
}
.prose-block > :first-child {
  margin-top: 0;
}
/* A question is the index of the page as much as it is a heading, so it takes
   size and weight rather than a rule or a colour: ten of them are meant to be
   scannable in one pass down the column, with the answers reading as the quieter
   thing under each. */
.prose-block h2 {
  position: relative;      /* the anchor below hangs off it */
  margin-bottom: .5rem;
  font-size: var(--t-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
  /* The bar is fixed and 68px tall, so a heading jumped to from a link would
     otherwise arrive underneath it. */
  scroll-margin-top: 5.5rem;
}
.prose-block p {
  text-wrap: pretty;       /* no one-word last line at the foot of an answer */
}
.prose-block p:last-child {
  margin-bottom: 0;
}

/* ── The anchor on a heading ──────────────────────────────────
   Support answers a question by mail and the answer ends up here, so a person has
   to be able to be sent to the answer rather than to the page. The link is the
   heading's own id made reachable: it appears when the heading is hovered or
   anything in it takes focus, and it is a real link the rest of the time, just
   invisible. Drawn in the margin where the column has room for it, so revealing
   it never reflows the heading. */
.prose-anchor {
  position: absolute;
  right: 100%;
  padding-right: .3em;
  /* Off the heading's step: at 1.5rem and 700 the mark reads as punctuation the
     question was written with. */
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--gp-walnut);
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s;
}
.prose-anchor::before {
  content: "#";
}
.prose-block h2:hover .prose-anchor,
.prose-anchor:focus-visible {
  opacity: 1;
}
.prose-anchor:focus-visible {
  outline: 2px solid var(--gp-gold);
  outline-offset: 2px;
}
/* Under ~64rem the margin the anchor hangs in is gutter, not page, so it comes
   inside and follows the heading text instead of overlapping it. Relative, not
   static: the hit area below is drawn against the anchor, and a static one would
   hand it the whole heading to be a link. */
@media (max-width: 64rem) {
  .prose-anchor {
    position: relative;
    right: auto;
    padding: 0 0 0 .3em;
  }
}

/* ── A monitor that is genuinely wide ─────────────────────────
   Past ~1440px a column pinned in rem sits in a stripe down the middle of the
   window with two thirds of the glass as wall. The answer is not a longer line:
   the type grows and the column grows with it, which is why the cap is in ch.
   One character count, at every width. Same two steps the homepage takes. */
@media (min-width: 90em) {
  .prose-page {
    --t-body: 1.25rem;
    --t-lede: 1.4rem;

    grid-column: 2;
    margin-inline: 0;      /* the grid centres the pair; the column no longer centres itself */
  }

  /* The index and the column travel as one block, centred together. Centring the
     reading column alone and hanging the index off its left leaves the page
     weighted to one side: what a reader sees is the pair, not the column. */
  .prose-shell {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: start;
    column-gap: 4rem;
  }
  .q-index {
    grid-column: 1;
    position: sticky;
    top: 6rem;
    width: 16rem;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ── The index in the margin ──────────────────────────────────
   Built by prose-index.js from the questions themselves, and shown only where
   there is margin to hold it. It is interface rather than argument, so it takes
   the interface face and the label step the system already uses for a rule over
   a list.

   Nothing here is a heading the reader is meant to weigh: the entries sit at the
   weight of secondary prose, and the one being read comes forward to the page's
   own ink. That is the whole state; a bar or a fill would put a second index of
   attention on a page that already has one. */
.q-index {
  display: none;
  font-family: var(--font-ui);
  font-size: .82rem;
  line-height: 1.45;
}
.q-index h2 {
  margin: 0 0 .75rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gp-walnut);
}
.q-index ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.q-index a {
  display: block;
  padding: .3rem 0;
  color: var(--gp-muted-ink);
  text-decoration: none;
  text-wrap: pretty;
}
.q-index a:hover,
.q-index a.is-current {
  color: var(--gp-black);
}
@media (min-width: 90em) {
  .q-index {
    display: block;
  }
}

/* ── Where there is no hover ──────────────────────────────────
   The anchor reveals itself on hover, and a tablet on the music desk has none,
   so on a touch screen it stays faintly visible instead of never appearing.
   Its glyph is small on purpose; the target it carries is not, which is the
   same pad-and-cancel the player's small controls use. */
@media (hover: none) {
  .prose-anchor {
    opacity: .45;
  }
}
@media (pointer: coarse) {
  .prose-anchor::after {
    content: "";
    position: absolute;
    inset: -.7rem;
  }
}

/* Every link on these pages takes the same ring the anchors do, rather than
   falling through to whichever one the browser draws. */
.prose-page a:focus-visible {
  outline: 2px solid var(--gp-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── The questions page's filter ──────────────────────────────
   The navbar's search bar is a light shape cut into a dark bar. This one sits on
   the ivory page, so it is the inverse: a hairline box on paper, the way a form
   is ruled on a printed sheet rather than raised off it. */
.faq-filter {
  position: relative;
  display: flex;
  align-items: center;
  /* Edge to edge with the answers under it: at 26rem it stopped an inch short of
     the text it filters, which is close enough to the measure to read as a miss
     rather than as a decision. */
  margin: 1.5rem 0 2.25rem;
}
.faq-filter-icon {
  position: absolute;
  left: .95rem;
  font-size: 1rem;
  /* The magnifier is what says "this filters" before the placeholder is read, so
     it takes the same ink as the tally rather than the weight a decoration would
     take. A fresh alpha would clear the 3:1 too; the token is already the value
     for secondary marks on paper. */
  color: var(--gp-muted-ink);
  pointer-events: none;
  transition: color .15s;
}
.faq-filter:focus-within .faq-filter-icon { color: var(--gp-walnut); }
.faq-filter-input {
  width: 100%;
  /* 44px, the floor for anything a hand aims at on the music desk. The padding
     alone left it at 41. */
  min-height: 2.75rem;
  padding: .5rem 1rem .5rem 2.4rem;
  /* A hairline at the card's 18% walnut is invisible on ivory (1.4:1), and the
     boundary is the only thing that says a control is here. Solid walnut carries
     4.9:1 and is the hand's own colour, which is the line a form is ruled with on
     a printed sheet. */
  border: 1px solid var(--gp-walnut);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--gp-black);
  /* The prose pages set their column in the prose face and inputs inherit it, so
     the control says out loud that it is a control and not a sentence. */
  font-family: var(--font-ui);
  /* Not .95rem: iOS Safari zooms the whole page in on a focused field under
     16px, and the reader lands on a page they now have to pinch back out of. */
  font-size: 1rem;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.faq-filter-input::placeholder { color: var(--gp-muted-ink); }
/* Two rings, the same construction the navbar's controls use inverted for paper:
   brass is the mark, and the walnut behind it is what carries the 3:1 against the
   page, since brass on ivory is 2:1 and cannot carry a focus state alone. */
.faq-filter-input:focus {
  background: #fff;
  border-color: var(--gp-gold);
  box-shadow: 0 0 0 2px var(--gp-gold), 0 0 0 4px var(--gp-walnut-deep);
}
/* Chrome's own clear "×" is blue. Same replacement as the navbar's field, in the
   page's ink instead of the bar's. */
.faq-filter-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%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 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq-filter-input::-webkit-search-cancel-button:hover { opacity: .9; }

/* The tally rides at the end of the field rather than under it, so the sections
   below do not step down the page every time a letter is typed. It is absolutely
   positioned for the same reason: an empty count must take no room at all. */
.faq-filter-count {
  position: absolute;
  right: 1rem;
  margin: 0;
  font-family: var(--font-ui);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--gp-muted-ink);
  pointer-events: none;
}
.faq-filter.is-filtering .faq-filter-input { padding-right: 8rem; }
/* On a phone the field is barely wider than the tally, and the query is what has
   to stay readable. The noun goes; the number, which is the whole message, stays,
   and so does the full string the live region announces. */
@media (max-width: 30rem) {
  /* Clipped rather than display:none — the noun leaves the page, not the
     accessibility tree, so the live region still says "2 of 10 questions". */
  .faq-filter-unit {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .faq-filter.is-filtering .faq-filter-input { padding-right: 5rem; }
}

/* The same voice as the lede, because it is the same thing: the page speaking to
   the reader rather than answering them. */
.faq-empty {
  margin: 0 0 2rem;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--gp-muted-ink);
  text-wrap: pretty;
}

/* The hit: the brand's highlighter, one pass instead of two and paler, because a
   long answer can hold six of them and the swash on the headline is meant to be
   the loudest gold on any page. */
.faq-hit {
  padding: 0 .1em;
  margin: 0 -.06em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 46' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C34 6 68 10 106 7.5 C146 5 184 9.5 217 6 L215 34 C184 39 148 34 110 37 C72 40 32 35.5 5 38.5 Z' fill='%23C8A96B' fill-opacity='.42'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 1.05em;
  background-position: 0 .04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The step out of the page, at the end of the about page's last answer. A link
   that hands the reader on takes the lede's size, so it reads as the page
   addressing them again rather than as one more sentence. It keeps the underline
   every other link on the surface wears: a second link treatment would be a
   second thing to learn for one link. */
.prose-more {
  margin-top: 1.5rem;
  font-size: var(--t-lede);
}

/* ── A phrase that opens, on the terms page ───────────────────
   The terms are a page of short sentences, and the clause behind each of them
   opens from the phrase it belongs to, in place, in the middle of the sentence
   (issue #36). Two consequences follow from "in place", and they are what the
   rest of this is.

   The first is that the trigger is a phrase in a paragraph rather than a control
   beside one, so it cannot be furniture. It takes the ink every link on this
   surface takes and a dotted underline instead of a solid one: dotted is the
   mark a reader already reads as "this word has more behind it", and keeping it
   in the same ink says the two are the same kind of promise while the two
   different underlines say one leaves the page and one does not.

   The second is that a clause opening pushes the rest of the paragraph down, and
   text that appears where a reader was not looking is text they will not notice
   they were given. So the clause arrives on a wash of gold that fades out over
   about a second: long enough to catch the eye at the place the sentence grew,
   gone by the time it is being read, and leaving no permanent mark to say the
   clause is an aside. It is not an aside — it is the term. */
.gloss-switch {
  /* Off the page but not out of the tree: the checkbox is what makes this work
     with no script and what the keyboard reaches, so it can be invisible and
     cannot be `display: none`. No offsets, so it stays at its static position
     and focus scrolls to the phrase it belongs to. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  /* It sits under the paragraph's own text; without this it would take clicks
     meant for the words on top of it. */
  pointer-events: none;
}
.gloss-key {
  cursor: pointer;
  color: var(--gp-walnut);
  text-decoration: underline dotted;
  text-decoration-thickness: from-font;
  text-underline-offset: .18em;
  /* Vertical only, and on an inline box, so it grows the tap target without
     moving a single line of the paragraph: a word in body copy is 20-odd pixels
     tall, and this page is read off a tablet propped on the music desk. */
  padding-block: .3em;
}
.gloss-key:hover {
  color: var(--gp-walnut-deep);
}
/* The mark that says the phrase opens. A "+" rather than a caret: a caret is the
   mark for a section that unfolds downwards, and this one lets a sentence grow
   sideways. Small and raised, like a footnote's, because that is the closest
   thing in print to what it does. */
.gloss-key::after {
  content: "+";
  font-size: .72em;
  vertical-align: .35em;
  margin-left: .1em;
  text-decoration: none;
  /* The pair has to occupy the same width open and closed, or every clause a
     reader opens nudges the line it sits on. A tabular figure would not help —
     these are not figures — so the box is fixed and the glyph centred in it. */
  display: inline-block;
  width: .6em;
  text-align: center;
  transition: transform .18s ease;
}
/* Turned 45 degrees, the same glyph is a cross, which is the mark for closing
   the thing it opened. One character, two states, and the box does not change
   width as it turns, so nothing on the line moves. */
.gloss-switch:checked + .gloss-key::after {
  transform: rotate(45deg);
}
/* The same ring the anchors and the links take, drawn on the phrase rather than
   on the checkbox, which is a pixel somewhere under it. */
.gloss-switch:focus-visible + .gloss-key {
  outline: 2px solid var(--gp-gold);
  outline-offset: 2px;
  border-radius: 3px;
}
/* The clause. Inline, in the page's own ink at the page's own size: the sentence
   a reader ends up with has to read as one sentence, not as a sentence with a
   note glued to it. */
.gloss-body {
  display: none;
}
.gloss-switch:checked ~ .gloss-body,
#g-all:checked ~ .prose-block .gloss-body {
  display: inline;
}
/* With every clause open the page is the document rather than a document with
   controls in it, and a phrase whose clause is already showing has nothing left
   to offer: it goes back to being the words it is. That is also the honest
   reading of what the page can do — the rule above wins on specificity, so
   pressing one of these could not close anything, and a control that cannot do
   what it says should not look like one. */
#g-all:checked ~ .prose-block .gloss-key {
  color: inherit;
  text-decoration: none;
  cursor: auto;
  pointer-events: none;
}
#g-all:checked ~ .prose-block .gloss-key::after {
  content: none;
}
/* Only on the one a reader opened. Opening every clause at once is a different
   act — it is asking for the document — and two dozen simultaneous washes would
   be a page flashing rather than a place to look. */
.gloss-switch:checked ~ .gloss-body {
  animation: gloss-arrive 1.1s ease-out;
}
@keyframes gloss-arrive {
  from {
    background-color: color-mix(in srgb, var(--gp-gold) 45%, transparent);
  }
  to {
    background-color: transparent;
  }
}
/* The wash goes; the cross does not. A mark that says what state a control is in
   has to be in that state whether or not it was allowed to travel there. */
@media (prefers-reduced-motion: reduce) {
  .gloss-switch:checked ~ .gloss-body {
    animation: none;
  }
  .gloss-key::after {
    transition: none;
  }
}

/* ── The whole text at once ───────────────────────────────────
   One clause at a time is how the page is meant to be read. The whole text at
   once is what a reader printing it, searching it with find-in-page, or checking
   it against a version they were sent needs, and none of those survive being
   opened one clause at a time. It is interface rather than argument, so it takes
   the interface face and sits at the size of the index in the margin, under the
   lede where a reader deciding how to read the page is looking. */
.gloss-all-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.gloss-all {
  display: inline-block;
  margin-bottom: .5rem;
  padding-block: .2rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--gp-walnut);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .2em;
}
.gloss-all:hover {
  color: var(--gp-walnut-deep);
}
.gloss-all-switch:focus-visible + .gloss-all {
  outline: 2px solid var(--gp-gold);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Two labels in one, so the control says what it will do rather than what it
   did. Written out rather than set in `content`, which a translation and a
   selection both pass straight over. */
.gloss-all-open {
  display: none;
}
.gloss-all-switch:checked + .gloss-all .gloss-all-shut {
  display: none;
}
.gloss-all-switch:checked + .gloss-all .gloss-all-open {
  display: inline;
}

/* ── The terms on paper ───────────────────────────────────────
   A printed legal document is the full text or it is nothing: a sheet carrying
   the short sentences and their plus signs is worse than no printout, because
   it looks complete. So every clause prints, the marks that say a phrase opens
   do not, and the phrases print as the words they are. */
@media print {
  .gloss-body {
    display: inline;
  }
  .gloss-key {
    color: inherit;
    text-decoration: none;
    padding-block: 0;
  }
  .gloss-key::after {
    content: none;
  }
  .gloss-all,
  .gloss-switch,
  .gloss-all-switch {
    display: none;
  }
}