/* ==========================================================================
   PUBLIC PROTOCOL — DESIGN SYSTEM  ·  "THE UNREDACTED"
   publicprotocol.org

   THE DERIVATION
   Identities for rights work take their language from the graphic history of
   the fight, not from the subject's technology. The graphic history of this
   fight is the disclosed document: the freedom-of-information release, the
   black bar, the exhibit stamp, the numbered article. A public that cannot see
   how it is governed is handed a redacted page.

   This protocol performs the opposite operation. Everything it asserts is
   stated in the open, numbered, citable and testable. So the black bar — the
   mark of what was withheld — becomes the instrument's spine, and the page is
   the document after the bars come off.

   THE REJECTED PALETTE
   The colour of this subject has been claimed. Trust-blue is the livery of
   every enterprise cloud, and institutional blue is what "sovereign cloud"
   marketing wears while describing a building in your country running a
   control plane that is not yours. A protocol arguing against that cannot
   arrive dressed as it. So: no blue. Black, a cool white with no warmth in it,
   and the vermilion of a public notice.

   THE FIVE RULES

   1. THE BAR IS THE ADVERSARY,   Heavy black bars divide the instrument.
      TURNED INTO STRUCTURE.      Hairlines divide within a division. Weight
                                  carries rank, never attention.

   2. ARTICLES ARE NUMBERED       Each opens with a binding statement set
      AND CITABLE.                large, followed by commentary set small. A
                                  reader can quote the first and argue with
                                  the second.

   3. EVERY ARTICLE CARRIES       A provision nobody can check is a
      ITS TEST.                   preference. The test is set apart, in red.

   4. RED IS OBLIGATION.          The stamp colour of a public notice. It
                                  marks what is required and what decides it,
                                  and is never decoration.

   5. THE ARGUMENT IS SET TO      Serif at reading size for the case. The
      BE READ.                    condensed grotesque of protest signage only
                                  where the protocol speaks in its own voice.
   ========================================================================== */

/* -- Faces ---------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-italic.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

/* -- Palette -------------------------------------------------------------- */

:root {
  --paper:    oklch(0.994 0.001 255);
  --paper-2:  oklch(0.958 0.003 255);
  --ink:      oklch(0.155 0.008 265);
  --ink-2:    oklch(0.380 0.008 265);
  --ink-3:    oklch(0.550 0.006 265);
  --rule:     oklch(0.795 0.005 265);
  --hair:     oklch(0.890 0.004 265);
  --red:      oklch(0.525 0.210 29);
  --red-wash: oklch(0.525 0.210 29 / 0.09);

  --measure: 62ch;
}

/* -- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Nothing may scroll the page sideways. clip, not hidden: it sets no
     scroll container, so sticky and anchor scrolling keep working. */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.56;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 62rem) { body { font-size: 19px; } }

a { color: var(--red); text-decoration: none; box-shadow: inset 0 -1px 0 oklch(0.525 0.210 29 / 0.4); }
a:hover { box-shadow: inset 0 -2px 0 var(--red); }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: var(--paper); }

.instrument { max-width: 86rem; margin: 0 auto; padding: 0 1.3rem; }
@media (min-width: 62rem) { .instrument { padding: 0 3rem; } }

/* -- Type ----------------------------------------------------------------- */

h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }

h1 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 66%; font-weight: 800;
  font-size: clamp(2.7rem, 8.4vw, 6.2rem);
  line-height: 0.93; letter-spacing: -0.022em; text-transform: uppercase;
}
h2 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 70%; font-weight: 750;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.05; letter-spacing: -0.012em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
h3 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 76%; font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
.lede {
  font-size: clamp(1.18rem, 2.2vw, 1.56rem); line-height: 1.38;
  font-variation-settings: 'opsz' 28; color: var(--ink-2); letter-spacing: -0.006em;
}
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
.col { max-width: var(--measure); }

.label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 68%; font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.label.red { color: var(--red); }
.cite {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem; color: var(--ink-3); font-variant-ligatures: none; line-height: 1.5;
}

/* -- The bar (Rule 1) ----------------------------------------------------- */
/* The mark of what was withheld. Used as structure, and once as itself.     */

.redact {
  background: var(--ink); color: var(--paper);
  padding: 0.02em 0.3em; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.redact.open { background: none; color: var(--ink); box-shadow: inset 0 -0.12em 0 var(--red); padding: 0; }

/* -- Masthead ------------------------------------------------------------- */

header.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.1rem; flex-wrap: wrap;
  padding: 1.3rem 0 1.05rem; border-bottom: 7px solid var(--ink);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  box-shadow: none; color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 66%; font-weight: 800;
  font-size: 1.06rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.wordmark span { color: var(--red); }
nav.masthead { display: flex; flex-wrap: wrap; gap: 1.25rem; }
nav.masthead a {
  box-shadow: none; color: var(--ink-3);
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 70%; font-weight: 650;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
nav.masthead a:hover { color: var(--red); }

/* -- Opening -------------------------------------------------------------- */

.opening { padding: 3.6rem 0 2.4rem; }
@media (min-width: 62rem) { .opening { padding: 5.8rem 0 3.4rem; } }
.opening .label { display: block; margin-bottom: 1.4rem; }
.opening .lede { max-width: 50ch; margin-top: 1.7rem; }

/* -- Preamble ------------------------------------------------------------- */

.preamble {
  border-top: 7px solid var(--ink); border-bottom: 1px solid var(--rule);
  margin-top: 2.8rem; padding: 1.6rem 0 1.8rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem 3rem;
}
@media (min-width: 62rem) { .preamble { grid-template-columns: 11rem minmax(0, 1fr); } }
.preamble .label { padding-top: 0.3rem; }
.preamble p { font-size: 1.05rem; max-width: 66ch; }

/* -- Divisions ------------------------------------------------------------ */

section.div { padding: 3rem 0; border-top: 7px solid var(--ink); }
@media (min-width: 62rem) { section.div { padding: 4.4rem 0; } }
section.div.minor { border-top: 1px solid var(--rule); }
.divhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem 3rem; margin-bottom: 1.5rem; }
@media (min-width: 62rem) { .divhead { grid-template-columns: 11rem minmax(0, 1fr); } }
.divbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 3rem; }
@media (min-width: 62rem) { .divbody { grid-template-columns: 11rem minmax(0, 1fr); } }
.divbody > .gutter { display: none; }
@media (min-width: 62rem) { .divbody > .gutter { display: block; } }
.gutter .cite { display: block; }
.gutter .cite + .cite { margin-top: 0.9rem; }

/* -- Articles (Rules 2 and 3) --------------------------------------------- */

article.art {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem 3rem;
  padding: 2.2rem 0; border-bottom: 1px solid var(--hair);
}
@media (min-width: 62rem) { article.art { grid-template-columns: 11rem minmax(0, 1fr); padding: 2.9rem 0; } }
article.art:last-child { border-bottom: 0; }

.art .no {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 64%; font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 0.86;
  color: var(--red); letter-spacing: -0.02em;
}
.art .no small {
  display: block; font-stretch: 70%; font-weight: 700;
  font-size: 0.25em; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 0.4rem;
}
@media (max-width: 61.99rem) {
  .art .no { display: flex; align-items: baseline; gap: 0.65rem; font-size: 1.8rem; }
  .art .no small { margin: 0; font-size: 0.4em; }
}

.art .binds {
  font-size: clamp(1.22rem, 2.4vw, 1.66rem); line-height: 1.28;
  font-variation-settings: 'opsz' 32; color: var(--ink);
  letter-spacing: -0.01em; margin: 0 0 0.95rem; max-width: 42ch;
}
.art .note { font-size: 0.97rem; max-width: var(--measure); }
.art .test {
  margin-top: 1.05rem; padding: 0.7rem 0.9rem 0.75rem 1rem;
  border-left: 4px solid var(--red); background: var(--red-wash);
  max-width: var(--measure);
}
.art .test b {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 70%; font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--red); margin-bottom: 0.12rem;
}
.art .test p { font-size: 0.94rem; margin: 0; color: var(--ink); }

/* -- Stakes --------------------------------------------------------------- */

.stakes { margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.stake {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem 2.4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--hair);
}
@media (min-width: 58rem) { .stake { grid-template-columns: 9rem minmax(0, 1fr); } }
.stake .src { font-family: 'Plex Mono', ui-monospace, monospace; font-size: 0.73rem;
              color: var(--ink-3); line-height: 1.5; }
.stake .src b { display: block; color: var(--red); font-weight: 400; }
.stake h3 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 1.2rem;
  text-transform: none; letter-spacing: -0.008em; font-variation-settings: 'opsz' 22;
  line-height: 1.26; margin-bottom: 0.4rem;
}
.stake p { font-size: 0.96rem; margin: 0; }
.stake .figure {
  display: block; margin-top: 0.6rem; padding-left: 0.95rem;
  border-left: 3px solid var(--ink); color: var(--ink); font-size: 0.94rem;
}

/* -- Lexicon -------------------------------------------------------------- */

.lexicon { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.lexicon .term {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 2.2rem;
  padding: 0.95rem 0; border-bottom: 1px solid var(--hair);
}
@media (min-width: 50rem) { .lexicon .term { grid-template-columns: 12rem minmax(0, 1fr); } }
.lexicon .t {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 76%; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink);
}
.lexicon p { font-size: 0.95rem; margin: 0; }

/* -- Cards ---------------------------------------------------------------- */

.two, .three { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.7rem 3rem; margin-top: 1.7rem; }
@media (min-width: 48rem) { .two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .three { grid-template-columns: repeat(3, 1fr); } }
.card { border-top: 3px solid var(--ink); padding-top: 0.8rem; }
.card p { font-size: 0.95rem; margin: 0; }

/* -- Adoption ------------------------------------------------------------- */

ol.adopt { list-style: none; margin: 1.7rem 0 0; padding: 0; counter-reset: a; border-top: 1px solid var(--rule); }
ol.adopt li {
  counter-increment: a; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.9rem; padding: 1.05rem 0; border-bottom: 1px solid var(--hair);
}
ol.adopt li::before {
  content: counter(a);
  font-family: 'Archivo', system-ui, sans-serif; font-stretch: 66%; font-weight: 800;
  font-size: 1.25rem; color: var(--red); line-height: 1.15;
}
ol.adopt p { font-size: 0.96rem; margin: 0.08rem 0 0; }

/* -- Buttons -------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.2rem; }
.btn {
  display: inline-block; box-shadow: none;
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 72%; font-weight: 750;
  font-size: 0.79rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.72rem 1.35rem; border: 3px solid var(--ink);
  background: var(--ink); color: var(--paper);
}
.btn:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-line { background: none; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* -- Footer --------------------------------------------------------------- */

footer.foot { border-top: 7px solid var(--ink); padding: 2.3rem 0 3.2rem; }
footer.foot .cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 3rem; }
@media (min-width: 48rem) { footer.foot .cols { grid-template-columns: repeat(4, 1fr); } }
footer.foot h4 {
  margin: 0 0 0.6rem; color: var(--ink-3);
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 68%; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase;
}
footer.foot ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
footer.foot li { margin-bottom: 0.34rem; }
footer.foot a { box-shadow: none; color: var(--ink-2); }
footer.foot a:hover { color: var(--red); }
.colophon {
  margin-top: 2.3rem; padding-top: 1.2rem; border-top: 1px solid var(--hair);
  font-size: 0.85rem; color: var(--ink-3); max-width: 74ch; line-height: 1.55;
  font-variation-settings: 'opsz' 14;
}

/* -- Mobile menu -----------------------------------------------------------
   A real menu, not a rail. Below the two-column breakpoint the links stack on
   their own full-width row behind a labelled toggle, so nothing can ever be
   wider than the page. No script: a checkbox holds the state, and the toggle
   disappears entirely at the desktop breakpoint where the links sit inline.  */

.navtoggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.navbtn { display: none; }

@media (max-width: 61.99rem) {
  header.masthead { align-items: center; row-gap: 0; }
  .navbtn {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 70%; font-weight: 650;
    font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--red); padding: 0.35rem 0;
  }
  .navbtn::after { content: "+"; font-size: 1.05em; line-height: 1; }
  .navtoggle:checked ~ .navbtn::after { content: "3"; }
  .navtoggle:focus-visible ~ .navbtn { outline: 2px solid var(--red); outline-offset: 3px; }

  nav.masthead {
    display: none;
    flex-basis: 100%; width: 100%; max-width: 100%;
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    margin: 0 0 0.4rem;
  }
  .navtoggle:checked ~ nav.masthead { display: flex; }
  nav.masthead a {
    display: block; width: 100%; margin: 0;
    padding: 0.72rem 0; border-top: 1px solid var(--hair);
  }
}