/* ============================================================================
   Voices and highlights. Every page except the home page.

   Two things live here, and both are about telling a reader where to look.

   VOICES are quotations from people who argued for free argument, each one
   placed beside the part of the site it speaks to. They are typewritten, in
   Courier Prime, and nothing else on the site is, so a voice from 1644 never
   reads as Freepol talking: it reads as something somebody set down on paper
   and you are being shown. Upright, because typewriters had no italic. The
   big opening mark stays in the serif on purpose; in Courier it is two thin
   ticks that look like a mistake at that size, and a serif ornament over
   typed text is the pairing editors have always used. On a wide screen they
   move out into the empty margin
   beside the text, the way a scholar's notes sit beside a page; on anything
   narrower they fold back into the column with a rule down their side.

   HIGHLIGHTS mark the one clause in a passage that carries it. They are
   rationed: one per principle, a couple per page. A highlighter used on
   everything is a highlighter used on nothing.

   The accent is ochre in daylight, an old-ink colour that suits words from
   other centuries, and violet at night to sit inside the indigo theme. It is
   only ever decoration: the opening mark and a rule. Every word of text is
   set in the page's own ink tokens, which are already contrast-checked.
   ========================================================================= */

:root{
  --voice:      #8A6A2E;
  --hl:         rgba(229, 182, 58, .42);
  /* loaded with the page's other fonts; the fallbacks are typewriter faces
     every system already has, so a slow connection still looks right */
  --type:       "Courier Prime", "Courier New", Courier, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --voice:  #A9A6FF;
    --hl:     rgba(142, 139, 255, .30);
  }
}
:root[data-theme="dark"]{
  --voice:  #A9A6FF;
  --hl:     rgba(142, 139, 255, .30);
}


/* ---- a voice ---------------------------------------------------------------- */

.voice{
  margin: 30px 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--voice);
  max-width: 58ch;
}
.voice blockquote{ margin: 0; }
.voice blockquote::before{
  /* the second declaration gives the mark empty alt text, so a screen
     reader does not announce "left double quotation mark" before every
     voice; a browser that does not know that syntax keeps the first */
  content: "\201C";
  content: "\201C" / "";
  display: block;
  height: .42em;
  margin: 0 0 .1em -.04em;
  font-family: var(--display, "Instrument Serif", Georgia, serif);
  font-size: 64px;
  line-height: .9;
  color: var(--voice);
}
.voice blockquote p{
  margin: 0;
  font-family: var(--type);
  font-style: normal;
  font-weight: 400;
  /* smaller than the serif was: a monospace letter is far wider, and Courier
     Prime's tall x-height reads larger at the same size */
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink);
}
.voice figcaption{
  margin-top: 13px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--ink-3);
}
.voice figcaption b{
  display: block;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .12em;
}
/* The original, where the voice is a translation. Printed rather than
   hidden: a translation without its original is a claim nobody can check. */
.voice .orig{
  display: block;
  margin-top: 9px;
  font-family: var(--type);
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.voice .orig:lang(hi){ font-style: normal; font-family: "Noto Serif Devanagari", "Mangal", "Kokila", serif; }
.voice .note{
  display: block;
  margin-top: 10px;
  font-family: var(--body, system-ui, sans-serif);
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.voice-k{
  margin: 0 0 10px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ---- in the margin -----------------------------------------------------------
   Only where there is a margin to put it in. Below this width the voice stays
   in the column, because a quotation squeezed into a strip of gutter beside
   the text is worse than one sitting under it.

   Float right with a negative right margin larger than the voice is wide: the
   voice takes no width from the column, so nothing in the text reflows around
   it, and it sits wholly in the gutter. clear:right stops two of them landing
   on top of each other when principles are short. */
@media (min-width: 1340px){
  .voice.margin{
    float: right;
    clear: right;
    width: 248px;
    margin: 6px -306px 22px 0;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 2px solid var(--voice);
  }
  .voice.margin blockquote::before{ font-size: 54px; }
  .voice.margin blockquote p{ font-size: 14px; line-height: 1.6; }
}


/* ---- boxed: a voice that stands in a sidebar of its own ----------------------
   Not called .card. discuss.html already uses .card for thread rows, styled as
   a 46px vote column beside the content, and theme.css and night-indigo.css
   both style it too. Named that, a voice in the sidebar inherited the grid and
   squeezed its own caption into the vote column. */

.voice.boxed{
  margin: 0;
  max-width: none;
  padding: 16px 17px 15px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--voice);
  border-radius: var(--r, 0);
  background: var(--panel);
}
.voice.boxed blockquote::before{ font-size: 50px; }
.voice.boxed blockquote p{ font-size: 14px; line-height: 1.6; }


/* ---- an epigraph: the line said before you start ---------------------------- */

.voice.epi{ margin: 4px 0 26px; }
.voice.epi.foot{ margin: 30px 0 4px; }


/* ---- a feature: the one voice a page is built around ------------------------- */

.voice.feature{ margin: 34px 0 8px; max-width: 46ch; }
.voice.feature blockquote p{ font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.55; }


/* ---- the highlighter ---------------------------------------------------------
   A band through the lower half of the letters rather than a block behind
   them, so it reads as somebody having gone over the line with a pen. clone
   keeps the band whole on every line when a highlight wraps. */
mark.hl{
  color: inherit;
  background: linear-gradient(transparent 52%, var(--hl) 52%, var(--hl) 92%, transparent 92%);
  padding: 0 .1em;
  margin: 0 -.05em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@media (forced-colors: active){
  mark.hl{ background: Mark; color: MarkText; }
}


/* ---- CommonGround's masthead ---------------------------------------------------
   The feed had no heading at all: it opened on a stack of panels of equal
   weight, so nothing told a newcomer where they were or what the room was for.
   Kept short on purpose, because starting something is still the first thing
   this page is for and the box that does it sits directly underneath. */
.cg-head{
  position: relative;
  padding: clamp(22px, 3.4vw, 40px) 0 clamp(16px, 2.2vw, 24px);
  margin: 0 0 6px;
}
.cg-head h1{
  margin: 10px 0 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
  max-width: 18ch;
}
.cg-head .cg-sub{
  margin: 12px 0 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
}
/* the brand's speech bubble, drawn large and faint in the empty right of the
   masthead: the one visual the site already owns */
.cg-head .cg-mark{
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  width: 150px;
  height: 120px;
  transform: translateY(-46%);
  pointer-events: none;
}
.cg-head .cg-mark path{
  fill: none;
  stroke: var(--voice);
  /* the path is drawn in a 25-unit box and shown at 150px, so an ordinary
     stroke would scale six times over into a heavy outline. This keeps it a
     hairline at any size. */
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  opacity: .55;
}
@media (min-width: 900px){ .cg-head .cg-mark{ display: block; } }