/* Stochastic Parrot Inu: one sheet of a preprint.
   The palette, the two faces and the world come from the brief's design section; the proportions,
   the band rhythm, the double frame with corner brackets, the 4.8 : 1 scale ratio and the dot
   screen come from the picture in the project folder, measured in tools/refmeasure.mjs and
   tools/refboxes.mjs and written up in NOTE.md. Nothing here is a card panel: a preprint's rules,
   plates and type are its objects. */

@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url("/font/source-serif-4-latin.woff2") format("woff2");}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 700;font-display:swap;src:url("/font/source-serif-4-latin-italic.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("/font/jetbrains-mono-latin.woff2") format("woff2");}

:root{
  --paper:#F6F4EE;
  --ink:#151515;
  --muted:#585349;          /* 7.1 : 1 on the paper */
  --rule:#D9D4C7;
  --green:#1E9E5A;          /* graphics and large figures only: 3.2 : 1 */
  --green-ink:#14703F;      /* the same green dark enough to set text in: 5.4 : 1 */
  --red:#D2402F;            /* the pencil's own colour, for marks and underlines */
  --red-ink:#B3351F;        /* the pencil, dark enough to read as text: 5.5 : 1 */
  --page:1120px;
  --gutter:42px;            /* 3.7% of the column, his margin */
  --band:34px;              /* air between the bands of the sheet */
  --t-display:clamp(42px,6.2vw,72px);
  --t-section:28px;
  --t-sub:20px;
  --t-body:17px;
  --t-label:16px;
  --t-value:22px;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --serif:"Source Serif 4",Georgia,serif;
  font-synthesis:none;
}

*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--t-body)/1.55 var(--serif);
  -webkit-font-smoothing:antialiased;
}
body::before{            /* one dimmed layer of paper grain, never repeated inside a block */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(21,21,21,.085) .6px,transparent .7px);
  background-size:7px 7px;
}
.sheet{position:relative;z-index:1;max-width:var(--page);margin:0 auto;padding:0 var(--gutter) 72px}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol,dl,dd,dt{margin:0}
::selection{background:#1E9E5A33}

/* ---- the running head, one line, with its rule ------------------------- */
.runhead{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font:500 var(--t-label)/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:22px 0 10px;position:relative;
}
.runhead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.runhead b{font-weight:700;color:var(--ink)}

/* ---- masthead: the title block and the side column -------------------- */
.masthead{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:38px;padding:30px 0 0;align-items:start}
.title{
  font:700 var(--t-display)/0.99 var(--serif);letter-spacing:-.018em;
  text-wrap:balance;margin-bottom:14px;
}
.authors{font:var(--t-sub)/1.45 var(--serif);color:var(--ink);margin-bottom:6px}
.authors i{font-style:italic}
.fn{
  font:700 var(--t-label)/1 var(--mono);vertical-align:super;text-decoration:none;
  margin-left:3px;padding:0 2px;color:var(--green-ink);
}
.fn:hover,.fn:focus-visible{text-decoration:underline}
.fn[aria-disabled="true"]{color:var(--muted);cursor:default}
.affil{font:var(--t-label)/1.5 var(--mono);color:var(--muted);margin-top:8px}
.affil>span{display:block;margin-top:2px}
.affil .mk{display:inline;margin-right:4px}
.affil .mk{font-weight:700;color:var(--green-ink)}
.abstract{font:var(--t-body)/1.62 var(--serif);max-width:78ch;margin-top:18px}
.abstract b{font-weight:600}

/* ---- the article identifier plate (the links and the mint) ------------- */
.doi{border:1.5px solid var(--ink);margin-top:24px;background:transparent}
.doi__strip{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 20px;border-bottom:1.5px solid var(--ink);
  font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;
}
.doi__strip em{font:500 var(--t-label)/1.3 var(--mono);font-style:normal;color:var(--muted);text-transform:none;letter-spacing:.02em}
.doi__body{padding:18px 20px 20px}
.doi__addr{
  font:var(--t-label)/1.5 var(--mono);word-break:break-all;overflow-wrap:anywhere;min-width:0;
  background:#EFECE2;padding:13px 18px;user-select:all;
}
.doi__addr[data-empty]{color:var(--muted);user-select:none;word-break:normal;font-family:var(--serif);font-size:var(--t-body)}
.doi__keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.key{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:12px 18px;border:1.5px solid var(--ink);background:transparent;
  font:700 var(--t-label)/1.2 var(--mono);letter-spacing:.04em;
  color:var(--ink);text-decoration:none;cursor:pointer;
  transition:background .12s,color .12s,transform .08s;
}
.key:hover,.key:focus-visible{background:var(--ink);color:var(--paper)}
.key:active{transform:translateY(1px)}
/* A disabled control is the muted ink on a dashed edge, never the browser's own grey on grey:
   Chrome paints button:disabled at rgba(16,16,16,.3), which is 2 : 1 on this paper. */
.key[aria-disabled="true"],.key:disabled{color:var(--muted);cursor:default;border-style:dashed;border-color:var(--muted)}
.key[aria-disabled="true"]:hover,.key:disabled:hover{background:transparent;color:var(--muted)}
.key--wide{grid-column:span 4}

/* ---- the side column: contents, meter, plate -------------------------- */
.side{display:flex;flex-direction:column;gap:26px}
.plate{margin:0}
.plate__frame{position:relative;padding:18px;max-width:352px;margin:0 auto}
.plate__frame::before,.plate__frame::after{
  content:"";position:absolute;width:34px;height:34px;border:2px solid var(--ink);
}
.plate__frame::before{left:0;top:0;border-right:0;border-bottom:0}
.plate__frame::after{right:0;bottom:0;border-left:0;border-top:0}
.plate__inner{position:relative}
.plate__inner::before,.plate__inner::after{
  content:"";position:absolute;width:34px;height:34px;border:2px solid var(--ink);
}
.plate__inner::before{right:-18px;top:-18px;border-left:0;border-bottom:0}
.plate__inner::after{left:-18px;bottom:-18px;border-right:0;border-top:0}
/* The plate is pixel art: nearest neighbour, never smoothed. It fills the frame, so the inner
   padding reads the same on all four sides at every width. */
.plate img{display:block;width:100%;height:auto;image-rendering:pixelated}
.plate figcaption{
  font:500 var(--t-label)/1.45 var(--mono);color:var(--muted);margin-top:12px;
}
.plate figcaption b{color:var(--ink);font-weight:700}

.contents{position:relative;padding-top:2px}
.contents::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--ink)}
.contents a{
  position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;text-decoration:none;font:var(--t-body)/1.3 var(--serif);
}
.contents a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.contents a:hover .contents__v,.contents a:focus-visible .contents__v{color:var(--ink)}
.contents a:hover span:first-child,.contents a:focus-visible span:first-child{text-decoration:underline}
.contents a[aria-current="page"]{font-weight:700}
.contents a[aria-current="page"] .contents__n::after{content:"";display:inline-block;width:8px;height:8px;background:var(--ink);margin-left:8px}
.contents__n{font:700 var(--t-label)/1.3 var(--mono);color:var(--muted);margin-right:10px}
.contents a[aria-current="page"] .contents__n{color:var(--ink)}
.contents__v{font:500 var(--t-label)/1.3 var(--mono);color:var(--muted);white-space:nowrap}

.meter{margin-top:24px}
.meter__label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.meter__label em{font-style:normal;color:var(--muted);font-weight:500;letter-spacing:.02em;text-transform:none}
.meter__bar{display:flex;gap:3px;margin-top:10px;height:26px;border:1.5px solid var(--ink);padding:3px}
.meter__cell{flex:1 1 0;background:transparent}
.meter__cell[data-on]{background:var(--green)}
.meter__foot{font:500 var(--t-label)/1.45 var(--mono);color:var(--muted);margin-top:9px}
.meter__foot b{color:var(--ink);font-weight:700}

/* ---- a band, its heading and its rule ---------------------------------- */
.band{margin-top:var(--band)}
.band__head{
  position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:9px;margin-bottom:18px;
}
.band__head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink)}
.band__head h2{font:700 var(--t-section)/1.15 var(--serif);letter-spacing:-.01em}
.band__head h2 .n{font-family:var(--mono);font-size:.76em;letter-spacing:.04em;color:var(--muted);margin-right:.5em}
.band__head p{font:500 var(--t-label)/1.4 var(--mono);color:var(--muted);text-align:right;max-width:46ch}
.lede{font:var(--t-body)/1.6 var(--serif);max-width:76ch;margin-bottom:18px}

/* ---- figures: the double frame, the brackets, the caption -------------- */
.fig{position:relative;border:1.5px solid var(--ink);padding:10px}
.fig__in{position:relative;border:1px solid var(--rule);padding:16px 18px 10px}
.fig canvas{display:block;width:100%;height:auto}
.figcap{font:var(--t-label)/1.5 var(--serif);color:var(--muted);margin-top:11px;max-width:92ch}
.figcap b{font-family:var(--mono);font-weight:700;color:var(--ink);letter-spacing:.03em}
.pencil{color:var(--red-ink);font-style:italic}

/* ---- tables: rows separated by printed rules, never bordered cells ------ */
.tbl{width:100%;border-collapse:collapse;font:var(--t-body)/1.4 var(--serif)}
.tbl caption{text-align:left;font:500 var(--t-label)/1.5 var(--mono);color:var(--muted);padding-bottom:10px}
.tbl th,.tbl td{position:relative}
.tbl th{
  text-align:left;font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:9px 14px 9px 0;white-space:nowrap;
}
.tbl th::after,.tbl td::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.tbl th::after{height:1.5px;background:var(--ink);right:-0px}
.tbl td{padding:11px 14px 11px 0;vertical-align:middle}
.tbl tr:last-child td::after{height:1.5px;background:var(--ink)}
.tbl .num{font:500 var(--t-label)/1.3 var(--mono);color:var(--muted);width:3ch}
.tbl .name{font:600 var(--t-sub)/1.25 var(--serif)}
.tbl .tick{font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.04em;white-space:nowrap}
.tbl .val{font:500 var(--t-label)/1.3 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.tbl .act{text-align:right;width:1%}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl--names td{padding-top:13px;padding-bottom:13px}

.minikey{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 16px;
  border:1.5px solid var(--ink);background:transparent;cursor:pointer;
  font:700 var(--t-label)/1.2 var(--mono);letter-spacing:.04em;white-space:nowrap;
}
.minikey:hover,.minikey:focus-visible{background:var(--ink);color:var(--paper)}
.minikey:disabled,.minikey[aria-disabled="true"]{color:var(--muted);cursor:default;border-style:dashed;border-color:var(--muted)}
.minikey:disabled:hover{background:transparent;color:var(--muted)}

/* ---- the readout blocks that close the sheet (his bottom band) --------- */
.readouts{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-top:2px}
.readouts::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--ink)}
.readout{position:relative;padding:16px 20px 18px}
.readout::after{content:"";position:absolute;right:0;top:14px;bottom:14px;width:1px;background:var(--rule)}
.readout:last-child::after{display:none}
.readout h3{font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.readout dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font:500 var(--t-label)/1.5 var(--mono)}
.readout dt{color:var(--muted)}
.readout dd{text-align:right;font-variant-numeric:tabular-nums;word-break:break-all;overflow-wrap:anywhere;min-width:0}
.readout .hash{font-size:var(--t-label);user-select:all;text-align:left;grid-column:1 / -1;color:var(--ink);margin-top:4px}

/* ---- the generator ------------------------------------------------------ */
.gen__row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:16px}
.gen__state{font:500 var(--t-label)/1.4 var(--mono);color:var(--muted)}
.gen__out{position:relative;padding-top:2px}
.gen__out::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--ink)}
.gen__line{
  position:relative;display:flex;align-items:baseline;gap:14px;padding:11px 0;
  font:600 var(--t-sub)/1.3 var(--serif);
}
.gen__line::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.gen__line .num{font:500 var(--t-label)/1.3 var(--mono);color:var(--muted);min-width:3ch}
.gen__line .tick{font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.04em;color:var(--green-ink)}
.gen__chars{font:600 var(--t-sub)/1.3 var(--mono);letter-spacing:.02em;min-height:1.3em}
.gen__chars .settled{color:var(--ink)}
.gen__chars .trying{color:var(--muted);opacity:.85}
.gen__wait{font:500 var(--t-label)/1.3 var(--mono);color:var(--muted)}

/* ---- phone: one column of the article ---------------------------------- */
@media (max-width:980px){
  :root{--gutter:22px;--band:28px;--t-section:24px}
  .masthead{grid-template-columns:minmax(0,1fr);gap:26px}
  .side{order:2}
  .readouts{grid-template-columns:minmax(0,1fr)}
  .readout::after{right:0;left:0;top:auto;bottom:0;width:auto;height:1px}
  .readout:last-child::after{display:none}
  .doi__keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .key--wide{grid-column:span 2}
  .tbl .val{text-align:left}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .band__head{flex-direction:column;align-items:flex-start;gap:6px}
  .band__head p{text-align:left}
  .plate__frame{padding:12px}
  .plate__frame::before,.plate__frame::after,.plate__inner::before,.plate__inner::after{width:22px;height:22px}
  .plate__inner::before{right:-12px;top:-12px}
  .plate__inner::after{left:-12px;bottom:-12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}

/* the numbered steps of the method, printed as a run of paragraphs, not as cards */
.steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:step}
.steps li{position:relative;padding:14px 0;font:var(--t-body)/1.6 var(--serif);max-width:76ch}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.steps li:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.steps b{font-weight:700}
.steps .tick,.abstract .tick{font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.02em}

/* On a phone the names table is set as cards, which is what the brief asks for: a row of five
   cells squeezes the name into two lines and the key into a column of its own. */
@media (max-width:560px){
  .tbl--names thead{display:none}
  .tbl--names,.tbl--names tbody,.tbl--names tr,.tbl--names td{display:block;width:auto}
  .tbl--names tr{position:relative;padding:14px 0 16px}
  .tbl--names tr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
  .tbl--names tr:last-child::after{height:1.5px;background:var(--ink)}
  .tbl--names td{padding:2px 0}
  .tbl--names td::after{display:none}
  .tbl--names .num{position:absolute;right:0;top:14px;width:auto;color:var(--muted)}
  .tbl--names .name{font-size:var(--t-sub);padding-right:3ch}
  .tbl--names .tick{display:inline-block;margin-right:14px}
  .tbl--names .val{display:inline-block;text-align:left}
  .tbl--names .val::before{content:"votes ";color:var(--muted)}
  .tbl--names .act{text-align:left;padding-top:10px;width:auto}
  .tbl--names .minikey{width:100%;min-height:44px}
}

/* A row that does not fit its column is not a table on a phone: app.mjs measures every table and
   sets .tbl--stacked on the ones that would push the page sideways, and the same cells are then
   printed as label and value, one under the other. The head is carried onto each cell by the
   helper as data-label, so nothing is dropped and no column has to be hidden. */
.tbl--stacked thead{display:none}
.tbl--stacked,.tbl--stacked tbody,.tbl--stacked tr,.tbl--stacked td{display:block;width:auto}
.tbl--stacked tr{position:relative;padding:14px 0 17px}
.tbl--stacked tr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.tbl--stacked tr:last-child::after{height:1.5px;background:var(--ink)}
.tbl--stacked td{display:flex;gap:18px;align-items:baseline;justify-content:space-between;padding:4px 0;text-align:left;overflow-wrap:anywhere}
.tbl--stacked td::after{display:none}
.tbl--stacked td::before{content:attr(data-label);flex:0 0 auto;color:var(--muted);font:500 var(--t-label)/1.5 var(--mono)}
.tbl--stacked td[colspan]::before{display:none}
.tbl--stacked .val{text-align:left}
.tbl--stacked .tick{white-space:normal}
.tbl--stacked .num{width:auto}

/* Keyboard focus is drawn in the page's own ink, offset onto the paper, so it reads the same on a
   key that inverts on focus as on a line of the contents. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.doi__addr:focus-visible{outline-offset:1px}