/* The Constitution, set as a document.

   The page this replaced showed eight cards, each with four positions, a bar
   per position and a count per bar. That is a report about the product. This
   is the product: a title, a preamble, eight numbered Articles, and under each
   one the lines that have been adopted.

   Three rules hold the whole thing together.

   One column, one measure. A document is read, not scanned, so the text runs
   at about 66 characters and nothing sits beside it competing for the eye.

   The numbers are not on the face. Every line came from a question and carries
   a marker to it; the counts live on that marker, where a reader goes when
   they want to argue with a sentence. Spreading them across the document was
   the old page's whole problem.

   What is not written says so. A clause that has not been adopted is shown in
   its place, in lighter ink, saying what it is waiting for. A constitution
   that padded itself out with sentences nobody had voted on would be the one
   dishonest page here. */

.doc {
  --doc-ink: #17181a;
  --doc-soft: #5f6367;
  /* 3.05 against the paper before this, which fails: the numbers, the state
     line and the foot are all set in it. */
  --doc-faint: #686c70;
  --doc-rule: #e2e2de;
  --doc-paper: #fcfcfb;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) 20px clamp(48px, 7vw, 96px);
  background: var(--doc-paper);
  border-block: 1px solid var(--doc-rule);
}

.doc > * { max-width: 66ch; margin-inline: auto; }

/* ---------------------------------------------------------------- the head */

.doc-head { padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--doc-rule); }
.doc-kicker {
  margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--doc-faint);
}
.doc-title {
  margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12;
  letter-spacing: -.02em; font-weight: 500; color: var(--doc-ink); text-wrap: balance;
}
.doc-preamble {
  margin: 22px 0 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: var(--doc-soft);
}

/* ------------------------------------------------------------ the Articles */

.doc-article { padding-top: clamp(34px, 4.5vw, 60px); }
.doc-article + .doc-article { border-top: 1px solid var(--doc-rule); margin-top: clamp(34px, 4.5vw, 60px); padding-top: clamp(34px, 4.5vw, 60px); }
.doc-article-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.doc-article-number {
  margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--doc-faint);
}
.doc-article-title { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; color: var(--doc-ink); }

/* The Article's own sentence. It is the one line that has always been true of
   the Article, so it sets the Article rather than being numbered among the
   clauses people voted for. */
.doc-statement {
  margin: 16px 0 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5;
  letter-spacing: -.005em; color: var(--doc-ink);
}

/* ------------------------------------------------------------- the clauses */

.doc-clauses { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.doc-clause {
  position: relative;
  display: grid; grid-template-columns: 4.5ch minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px;
}
.doc-number { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--doc-faint); letter-spacing: .04em; }
.doc-text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--doc-ink); }
.doc-pending .doc-text { color: var(--doc-soft); }

/* A line the record is pointing at, which nobody has adopted.
   
   It reads in the document's own voice, because it is a real sentence that
   real people chose. What is not settled is whether it stands, and the note
   sits on the line rather than in a legend at the bottom of the page: a
   reader should never have to look somewhere else to find out whether the
   sentence in front of them counts. The rule underneath marks it in the
   margin the way a draft is marked in the margin. */
.doc-proposed { position: relative; }
.doc-proposed > div { grid-column: 2; }
.doc-proposed .doc-text { color: var(--doc-ink); }
.doc-proposed .doc-state {
  margin: 6px 0 0; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--doc-faint);
}
.doc-proposed::before {
  content: ""; position: absolute; left: calc(4.5ch - 14px); top: 2px; bottom: 2px;
  width: 2px; border-radius: 2px; background: #d8d4c4;
}
.doc-pending .doc-text em { font-style: normal; color: var(--doc-faint); }

/* The marker, and the question behind the line.

   It is a button rather than a bare hover target because a hover target does
   not exist on a phone, which is where most readers are. Hover opens it,
   focus opens it, and a tap opens it through public/js/features/document.js. */
.doc-mark {
  align-self: center;
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--doc-rule); border-radius: 50%;
  background: #fff; color: var(--doc-faint); font-size: 12px; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.doc-clause:hover .doc-mark, .doc-mark:focus-visible, .doc-clause.is-open .doc-mark { color: var(--doc-ink); border-color: #b9bcbe; }

.doc-source {
  grid-column: 2 / -1; display: none; margin-top: 10px;
  padding: 14px 16px; border-left: 2px solid #c9ccc7; border-radius: 0 8px 8px 0;
  background: #f4f4f1; font-size: 14px; line-height: 1.6; color: var(--doc-soft);
}
.doc-clause:hover .doc-source, .doc-clause:focus-within .doc-source, .doc-clause.is-open .doc-source { display: block; }
.doc-source b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--doc-faint); }
.doc-source i { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--doc-faint); }
.doc-source a { display: inline-block; margin-top: 10px; color: #2368c2; }

/* Opening a note must not move the line under the reader's pointer, which is
   what a hover that changes the page height does. On a screen with room the
   note is lifted out of the flow; on a phone, where a tap opened it and the
   pointer has already left, it can push the page as any disclosure does. */
@media (min-width: 801px) {
  .doc-source {
    position: absolute; z-index: 2; top: calc(100% + 6px); left: 4.5ch; right: 0;
    margin-top: 0; box-shadow: 0 12px 30px #0000001a; border-radius: 8px; border-left-width: 3px;
  }
}

/* ---------------------------------------------------------------- the foot */

.doc-foot { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--doc-rule); font-size: 13px; line-height: 1.7; color: var(--doc-faint); }
.doc-foot p { margin: 0; }
.doc-foot a { color: #2368c2; }

@media (max-width: 560px) {
  .doc-clause { grid-template-columns: 4ch minmax(0, 1fr) auto; }
  .doc-text { font-size: 15px; }
}

/* ==================================================================
   A page, not a list of eight things
   ==================================================================

   The document was right and everything around it was wrong. Under it sat the
   same eight Articles again as a tabbed workspace, with the word Constitution
   set large over the top, and under that three numbered cards explaining how a
   clause gets adopted: the same eight things, three times over. All of that is
   gone. What is above the document now is a masthead, one big way in to the
   questions, and how it works behind a control for whoever wants it.

   And the document is set on paper. A sheet with margins, a rule under the
   preamble and Article numbers in the margin, because a constitution is a
   thing a reader recognises on sight, and reading like one is most of what
   makes it believable. */

.page-constitution .doc-page { background: #f2f1ec; padding-bottom: clamp(48px, 6vw, 88px); }

.doc-masthead { max-width: 760px; margin: 0 auto; padding: clamp(44px, 6vw, 86px) 20px clamp(30px, 4vw, 46px); }
.doc-masthead-kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #6a6e67; }
.doc-masthead-title { margin: 18px 0 0; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.022em; font-weight: 500; color: #17181a; }
.doc-masthead-lead { margin: 20px 0 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.68; color: #4f5450; max-width: 60ch; }

.doc-masthead-actions { margin: clamp(26px, 3.4vw, 38px) 0 0; display: grid; gap: 16px; justify-items: start; }

/* The way in, at the size of the thing it is asking for.
   
   It used to be a button the same size as "Read the document" sitting beside
   it, on a page whose whole purpose is to make somebody want to answer. It is
   now the largest thing under the masthead, and it is not shown at all to a
   reader who has answered all eight: offering them the questions again is the
   clearest way to tell a returning reader that nothing here remembers them. */
.doc-cta {
  display: grid; gap: 4px; padding: 18px 26px;
  border-radius: 14px; background: #17181a; color: #fff; text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.doc-cta:hover { background: #2a2c2f; transform: translateY(-1px); }
.doc-cta:focus-visible { outline: 2px solid #2368c2; outline-offset: 3px; }
.doc-cta b { font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; }
.doc-cta span { font-size: 14px; line-height: 1.5; color: #c6c8cb; }
.doc-thanks { margin: 0; font-size: 15px; line-height: 1.6; color: #4f5450; }
.doc-thanks a { color: #2368c2; }

.doc-how { width: 100%; max-width: 62ch; }
.doc-how > summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 15px; color: #2368c2; cursor: pointer; list-style: none; }
.doc-how > summary::-webkit-details-marker { display: none; }
.doc-how > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.doc-how[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.doc-how-steps { margin: 6px 0 0; padding: 0 0 0 20px; display: grid; gap: 16px; }
.doc-how-steps b { display: block; font-size: 15px; font-weight: 500; color: #17181a; }
.doc-how-steps p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.62; color: #5f6367; max-width: 62ch; }
.doc-how-foot { margin: 16px 0 0; font-size: 14px; }

.doc-state-line { display: flex; flex-wrap: wrap; gap: 0 32px; margin: clamp(28px, 3.4vw, 40px) 0 0; padding-top: 20px; border-top: 1px solid #dedbd2; }
.doc-state-line div { display: flex; align-items: baseline; gap: 8px; }
.doc-state-line dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6a6e67; }
.doc-state-line dd { margin: 0; font-size: 14px; color: #17181a; font-variant-numeric: tabular-nums; }

/* The sheet. */
.doc-sheet {
  max-width: 820px; margin: 0 auto;
  border: 1px solid #e0ddd3; border-block: 1px solid #e0ddd3; border-radius: 4px;
  box-shadow: 0 1px 2px #00000008, 0 18px 46px #0000000f;
  padding-inline: clamp(24px, 5vw, 76px);
}
.doc-sheet .doc-head { border-bottom-width: 2px; }
.doc-sheet .doc-title { font-size: clamp(26px, 3.2vw, 38px); }

/* The line, as the control. */
.doc-open {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.doc-open:focus-visible { outline: 2px solid #2368c2; outline-offset: 3px; border-radius: 3px; }
.doc-clause .doc-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 8px; vertical-align: 2px;
  border: 1px solid var(--doc-rule); border-radius: 50%; background: #fff;
  color: var(--doc-faint); font-size: 10.5px; line-height: 1;
  transition: color .15s ease, border-color .15s ease;
}
.doc-open:hover .doc-mark, .doc-open:focus-visible .doc-mark, .doc-clause.is-open .doc-mark { color: var(--doc-ink); border-color: #b9bcbe; }
.doc-open:hover, .doc-clause.is-open .doc-open { text-decoration: underline; text-decoration-color: #c9ccc7; text-underline-offset: 4px; }
/* The grid had a third column for the old button. The line runs the full
   measure now. */
.doc-clause { grid-template-columns: 4.5ch minmax(0, 1fr); }
.doc-source { grid-column: 2 / -1; }
@media (max-width: 560px) { .doc-clause { grid-template-columns: 4ch minmax(0, 1fr); } }
@media (min-width: 801px) { .doc-source { left: 4.5ch; } }

@media (max-width: 700px) {
  .doc-cta { padding: 16px 20px; }
  .doc-how > summary { min-height: 44px; }
  .doc-state-line { gap: 0 20px; }
}

/* The rings, set as a seal beside the masthead.

   Sized by what the drawing has to carry, not by what looked balanced. Its
   eight names are links, so each one has to clear the site's 44px tap target
   on a phone and its 13px type floor everywhere, and both of those scale with
   the width the drawing is given.

   Placed beside the text, not above it and not out in the margin. Out in the
   margin it pushed the page sideways at 1440. Moved into the flow above the
   masthead to fix that, it filled the whole first screen at 1440 on the live
   site, and the one button on the page that matters started at 884 pixels,
   below the fold, on the most common laptop in the world. So on anything
   wider than a tablet the masthead is two columns: what it says on the left,
   the drawing on the right, and the button on the first screen. The masthead
   and the paper below it share one width, so their left edges line up. */
.doc-masthead { position: relative; }
.doc-masthead-seal { margin: 0 0 clamp(20px, 2.6vw, 30px); width: 100%; max-width: 420px; }
@media (min-width: 1000px) {
  .doc-masthead {
    max-width: 940px;
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; align-items: start;
  }
  .doc-masthead > * { grid-column: 1; }
  .doc-masthead > .doc-masthead-seal { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; max-width: none; }
  .doc-sheet { max-width: 940px; }
}

/* How far a line has to go, drawn beside the number that says it. */
.doc-meter { display: inline-block; vertical-align: middle; width: 48px; height: 3px; margin: 0 8px 0 2px; border-radius: 3px; background: #e6e5df; overflow: hidden; }
.doc-meter i { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: #8e8a7a; }

/* ------------------------------------------------ after 23 September

   The meeting asked for four things, and each is one rule here.

   Black ink. The body text was a warm grey on a warm grey sheet, and the
   waiting lines were lighter still: readable, but not a document anyone
   would sign. The ink is near black now, and "lighter" means dark grey.

   A lighter page, #FCFCFC, so the sheet is what carries colour.

   Paper you can see: the grain of a real sheet, so it reads as a page and
   not as a white box.

   Margins of about 120 pixels inside the sheet on a wide screen, so the text
   sits in the middle of the page the way a printed constitution does. */
.page-constitution .doc-page { background: #fcfcfc; }
.page-constitution .doc {
  --doc-ink: #0d0d0e;
  --doc-soft: #33363a;
  --doc-faint: #55595d;
  --doc-rule: #e3ded0;
  --doc-paper: #f9f7f2;
}
.page-constitution .doc-sheet {
  /* MC's own sheet of paper (23 September: "make it feel real and analog"),
     photographed, with the light falloff of the photograph taken out so only
     the grain is left, and mirrored into a tile so it repeats without a seam.
     50 kB. The colour under it is the paper's, so the page still reads as
     paper for the moment before the picture arrives. */
  background: #f9f7f2 url("/images/paper.webp") 0 0 / 700px 700px repeat;
  border-color: #e3ded0;
  box-shadow: 0 1px 2px rgba(40, 32, 12, .06), 0 22px 56px rgba(40, 32, 12, .10);
  padding-inline: clamp(24px, 8.4vw, 120px);
}
.page-constitution .doc-masthead-title { color: #0d0d0e; }
.page-constitution .doc-masthead-lead { color: #2f3236; }
.page-constitution .doc-state-line dd { color: #0d0d0e; }
.page-constitution .doc-pending .doc-text em { color: var(--doc-soft); }
/* The margin is the sheet's padding, not a measure centred inside it, so the
   text starts about 120 pixels in from the paper's edge. */
@media (min-width: 1000px) {
  .page-constitution .doc-sheet > * { max-width: none; margin-inline: 0; }
}