@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/SourceSerif4-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/SourceSerif4-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/SourceSerif4-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/SourceSerif4-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/SourceSerif4-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/SourceSerif4-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/JetBrainsMono-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/JetBrainsMono-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

  :root{
    /* White, and the cards flush with it. A white card on a tinted ground is
       what made the ground read dirty: the eye takes the whitest thing in view
       as white and judges everything else against it. And the secondary grey,
       which paints twenty-three things on this site including the whole opening
       block, comes off a mid tone at 5.55 onto a dark one at 8.86. Most of what
       anyone reads here was set in the colour of a caption. */
    /* One accent, the brass of the mark's edge, sampled from the rendering.
       On ivory it has to be read at two sizes, and no one value serves both:
       the brass itself, 3.6 to 1, for a word in a display line, a rule, a
       line under a nav word; and a darker cut of it, 4.9 to 1, wherever it
       is text, links and labels and the small caps of an eyebrow. */
    --ink:#16202B;--paper:#F7F7F4;--band:#F7F7F4;--accent:#8A653A;--acc:#A47A46;
    --muted:#3A3A38;--line:#DCDCD8;--card:#F7F7F4;--on-accent:#ffffff;
    /* The faintest text the site sets, and still 4.6 to 1 on the paper. */
    --faint:#6E6E6B;
    /* Ivory, not white: white is a screen, ivory is a sheet. The bar and the
       foot are the same sheet, with a hairline where they meet the page, so
       the chrome no longer sits on the page as a second material. */
    --nav-bg:#F7F7F4;--nav-ink:#3A4553;--nav-ink-on:#16202B;--figbg:#0C1C2E;
    /* One kind, two colours, because no single one can serve both grounds. To
       clear 4.5 on white a colour has to sit below 0.183 of luminance; to clear
       it on a card that has turned into the bar it has to sit above 0.264. The
       two ranges do not touch. So each kind keeps a deep colour for the card at
       rest and a bright one of the same hue for the card in hand. Ochre looked
       like the exception because it parts from navy by hue, but it measured
       2.20 there, which is seen and not read.

       Notes has moved from 192 degrees to 162, away from the 215 of articles.
       At twenty-three degrees apart the two edges along the top of a card were
       telling nobody anything. */
    /* One colour on the site, and the three kinds share it: the word
       beside the date says which kind it is, and a colour said it again. */
    --k-article:#8A653A;--k-note:#8A653A;--k-diagram:#8A653A;
    --k-article-on:#8A653A;--k-note-on:#8A653A;--k-diagram-on:#8A653A;
    /* The measure, said once. A line of running prose is capped in
       characters and never in pixels, because ch is relative to the type
       size of the element that carries it: the same token holds at 15.5px
       and at 24px, where a pixel cap is only ever right at one size. The
       second is for subordinate text, which is shorter and set smaller,
       and reads as subordinate partly by being narrower. */
    --measure:64ch;--measure-sub:60ch;--measure-lead:72ch;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:"Source Serif 4",Georgia,serif;font-size:19px;line-height:1.65;
    -webkit-font-smoothing:antialiased}
  a{color:var(--accent)}

  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
    color:var(--on-accent);padding:12px 20px;text-decoration:none;
    font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.1em;
    text-transform:uppercase}
  .skip:focus{left:0}
  a:focus-visible,button:focus-visible,video:focus-visible{
    outline:3px solid var(--accent);outline-offset:3px;border-radius:1px}
  nav.secs a:focus-visible{outline-color:var(--nav-ink-on);outline-offset:4px}

  /* One bar instead of two bands. Mark and name are a single block on the left,
     the sections on the right, and the bar is generous enough that the block
     floats in it rather than filling it. Forscie's logo is 24px tall in an 80px
     bar; this one is 44 in 96, because a set name carries less weight than a
     drawn logotype and has to be helped. */
  /* How much of a piece is left, on the pieces long enough for the question to
     arise. Pure CSS: where scroll-driven animation is not supported the rule is
     not drawn at all, rather than drawn wrong. */
  .readrule{display:none}
  @supports (animation-timeline: scroll()){
    body:has(article) .readrule{display:block;position:fixed;inset:0 0 auto 0;
      height:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
      z-index:20;animation:readfill linear both;animation-timeline:scroll(root block)}
  }
  @keyframes readfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media (prefers-reduced-motion:reduce){.readrule{display:none !important}}

  /* The same sheet as the page, with a hairline under it. The navy ramp
     that stood here was the one thing on the site that read as a product
     rather than a publication, and on paper a masthead is a line, not a
     band. */
  .bar{background:var(--nav-bg);position:sticky;top:0;z-index:10;
    border-bottom:1px solid var(--line)}
  /* Eighty four, and the mark sixty: the rendering has faces and an edge
     to show, and at forty eight in seventy two it showed a silhouette. */
  .bar .wrap{display:flex;align-items:center;gap:30px;height:84px}
  .lock{display:flex;align-items:center;gap:14px;flex:0 0 auto;text-decoration:none}
  /* The mark is narrower than it is tall, so in its square box its leftmost
     ink sits a tenth in: left as it is, it reads as indented against the
     column the page below keeps. Pulled back by that much, its outer edge
     lines up with the text, which is what the eye measures. */
  .lock picture{display:contents}
  .lock .mark{width:60px;height:60px;display:block;flex:0 0 auto;margin-left:-6px;
    object-fit:contain}
  /* The name is set to the width of the line under it, measured in ink:
     at 23 it ran a third past the sub line and the pair read as a title
     with a caption, not as one mark. */
  .lockname{font-family:"Source Serif 4",Georgia,serif;font-size:16.5px;font-weight:600;
    color:var(--nav-ink-on);line-height:1.05;letter-spacing:-0.008em;margin:0}
  /* The two lines are made equal by a rule and not by a tuned number. The
     block is a flex item, so it is as wide as its widest line, which is the
     name; the sub line is tracked loose enough to read and short enough to
     always fall inside that, and then justified out to meet it. Every screen
     renders the serif at its own width, and a ratio tuned on one of them
     overhangs on the next. This cannot.

     The trailing letter-space after the last character is space the box
     carries and the ink does not, so it is taken back. */
  .lockdisc{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:0.6em;
    font-weight:600;letter-spacing:0.14em;margin-right:-0.14em;
    text-align:justify;text-align-last:justify;
    text-transform:uppercase;color:var(--nav-ink);margin-top:5px}
  .lock:hover .lockdisc{color:var(--nav-ink-on)}
  /* Auto on both sides, so the sections take the free space between the name
     and the languages and the bar reads as three zones. Pushed to one end they
     clustered against the right with the whole middle empty. */
  nav.secs{margin-left:auto;margin-right:auto;display:flex;gap:26px;align-items:center}
  /* Small capitals in the serif, as the eyebrows are: the mono is kept for
     what can be counted, and a section name cannot. */
  nav.secs a{color:var(--nav-ink);text-decoration:none;font-family:"Source Serif 4",Georgia,serif;
    font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
    white-space:nowrap;
    padding:7px 0;border-bottom:2px solid transparent;
    transition:color .18s ease,border-color .18s ease}
  /* Under the pointer the rule appears in the grey of the page's lines;
     on the section you are in it is ink. A word that only darkened said
     nothing a reader could feel. */
  nav.secs a:hover{color:var(--nav-ink-on);border-bottom-color:var(--acc)}
  nav.secs a.on,nav.secs a.on:hover{color:var(--nav-ink-on);border-bottom-color:var(--nav-ink-on)}

  /* One word, three destinations. Native disclosure, so it works from the
     keyboard and survives with scripting off, where it simply stays a list. */
  /* No positioning of its own, so the panel below resolves against the bar and
     can be as wide as it is. */
  .dd{position:static}
  .dd > summary{list-style:none;cursor:pointer;position:relative;z-index:21;
    color:var(--nav-ink);font-family:"Source Serif 4",Georgia,serif;font-size:12px;
    font-weight:600;letter-spacing:0.16em;text-transform:uppercase;white-space:nowrap;
    padding:7px 0;border-bottom:2px solid transparent;
    transition:color .18s ease,border-color .18s ease}
  .dd > summary::-webkit-details-marker{display:none}
  .dd > summary::after{content:"";display:inline-block;width:5px;height:5px;
    margin:0 0 2px 9px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg);
    transition:transform .18s ease}
  .dd[open] > summary::after{transform:rotate(-135deg);margin-bottom:-2px}
  .dd > summary:hover{color:var(--nav-ink-on);border-bottom-color:var(--acc)}
  .dd > summary.on,.dd > summary.on:hover{color:var(--nav-ink-on);border-bottom-color:var(--nav-ink-on)}
  /* The panel hangs from the bar under its own word: the bar's paper, the
     bar's hairline carried down its two sides and along its foot, and no
     shadow, because it is not above the page but part of the bar. A shelf
     the width of the window was here before, and for three lines it covered
     the top of every page; a floating card with a shadow was here before
     that, and read as a thing over the page. The word's x is measured by
     the script that opens it, so the panel's text stands where the word
     stands; with scripting off it opens at the left of the bar, which is
     still a list. The search keeps the width it needs. */
  .ddm{position:absolute;top:100%;left:var(--ddx,0);right:auto;z-index:20;
    min-width:250px;background:var(--paper);border:1px solid var(--line);border-top:0}
  .srch .ddm{left:0;right:0;min-width:0;border-left:0;border-right:0}
  .ddin{padding:8px 22px 14px}
  .srch .ddin{max-width:1080px;margin:0 auto;padding:6px 32px 16px}
  .ddm a{display:block;padding:9px 0;white-space:nowrap;
    font-size:12.5px;letter-spacing:0.13em;width:max-content;
    border-bottom:2px solid transparent;transition:border-color .18s ease}
  .ddm a:hover{border-bottom-color:var(--acc)}
  .ddm a.on,.ddm a.on:hover{color:var(--nav-ink-on);border-bottom-color:var(--nav-ink-on)}
  @media (max-width:620px){
    .ddm{left:0;right:0;min-width:0;border-left:0;border-right:0}
    .ddin{padding:4px 22px 14px}}
  /* The languages hold the far right, where the contact glyphs used to be. Those
     went down to the footer: two ways of reaching a person are worth one line at
     the bottom of every page, and the bar had no room for both them and this. */
  .srch{flex:0 0 auto;margin-left:26px}
  .srch summary{display:flex;align-items:center;gap:8px}
  .srch summary svg{width:16px;height:16px;flex:0 0 auto}
  .srch summary::after{display:none}
  /* The glyph is the word. Spelled out beside it, it was the loudest item
     in the bar and said nothing the glyph does not. */
  .srch summary b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sbox{padding-bottom:6px}
  .sq{width:100%;box-sizing:border-box;background:transparent;color:var(--nav-ink-on);
    border:0;border-bottom:1px solid var(--line);padding:10px 0 13px;
    font-family:inherit;font-size:20px;letter-spacing:-0.01em;outline:0}
  .sq::placeholder{color:#646E7B}
  /* A size down on a phone, so the placeholder is read whole. */
  @media (max-width:620px){.sq{font-size:17px}}
  .sq:focus{border-bottom-color:var(--nav-ink-on)}
  .sq::-webkit-search-cancel-button{display:none}
  .sres{display:flex;flex-direction:column}
  /* Written against .sbox, because the panel already rules that every link in
     it is a one line block of spaced small capitals. That rule is right for a
     menu of three words and wrong for a row with three parts, and it carries
     one more class than a bare .sr does.

     The kind is set in the column a reader scans down, because the first
     question a result has to answer is what sort of thing it is. */
  .sbox .sr{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1px 16px;
    align-items:baseline;padding:12px 0;width:auto;white-space:normal;
    text-decoration:none;letter-spacing:0;font-size:inherit;
    border-bottom:1px solid var(--line);color:var(--nav-ink)}
  .sbox .sr:last-child{border-bottom:0}
  .sbox .sr.on{padding-bottom:12px}
  .sbox .sk{font-family:"JetBrains Mono",monospace;font-size:9.5px;
    font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
    color:#6B7280;white-space:nowrap}
  .sbox .st{grid-column:2;font-size:16px;color:var(--nav-ink-on);
    letter-spacing:-0.008em}
  .sbox .sc{grid-column:2;font-size:13.5px;color:#6B7280;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sbox .sr:hover,.sbox .sr:focus-visible,.sbox .sr.on{outline:0;
    border-bottom-color:var(--ink)}
  .sbox .sr:hover .st,.sbox .sr:focus-visible .st,.sbox .sr.on .st{
    text-decoration:underline}
  .sbox .sr:hover .sk,.sbox .sr:focus-visible .sk,.sbox .sr.on .sk{
    color:var(--nav-ink-on)}
  /* The way out of a glance and into the whole list. */
  .sbox .sall{display:block;padding:14px 0 4px;text-align:center;
    font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;
    letter-spacing:0.13em;text-transform:uppercase;color:#6B7280;
    text-decoration:none;width:auto;white-space:nowrap;border:0}
  .sbox .sall:hover,.sbox .sall:focus-visible{color:var(--nav-ink-on);
    text-decoration:underline}

  /* The same rows, on paper instead of on the shelf. */
  .sfull{padding:8px 0 40px}
  .sfull .sq{width:100%;box-sizing:border-box;background:transparent;
    color:var(--ink);border:0;border-bottom:1px solid var(--line);
    padding:8px 0 14px;font-family:inherit;font-size:26px;
    letter-spacing:-0.012em;outline:0}
  .sfull .sq::placeholder{color:#646E7B}
  .sfull .sq:focus{border-bottom-color:var(--accent)}
  .sfull .sq::-webkit-search-cancel-button{display:none}
  .sfull .snone{font-family:"JetBrains Mono",monospace;font-size:10px;
    font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
    color:var(--muted);margin:20px 0 6px}
  .sfull .sres{display:flex;flex-direction:column}
  .sfull .sr{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1px 16px;
    align-items:baseline;padding:14px 0;text-decoration:none;color:var(--ink);
    border-bottom:1px solid var(--line)}
  .sfull .sr:last-child{border-bottom:0}
  .sfull .sk{font-family:"JetBrains Mono",monospace;font-size:9.5px;
    font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
    color:var(--muted);white-space:nowrap}
  .sfull .st{grid-column:2;font-size:17px;color:var(--ink)}
  .sfull .sc{grid-column:2;font-size:14px;color:var(--muted);min-width:0;
    max-width:var(--measure)}
  .sfull .sr:hover .st,.sfull .sr:focus-visible .st{color:var(--accent);
    text-decoration:underline}
  @media (max-width:560px){
    .sfull .sr{grid-template-columns:minmax(0,1fr);gap:4px}
    .sfull .st,.sfull .sc{grid-column:1}
  }
  /* On a narrow window a fixed column for the kind takes a third of the line
     and every title wraps to three. Stacked, the kind is a label over the row
     instead of a column beside it. */
  @media (max-width:560px){
    .sbox .sr{grid-template-columns:minmax(0,1fr);gap:4px}
    .sbox .st,.sbox .sc{grid-column:1}
  }
  .snone{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;
    letter-spacing:0.13em;text-transform:uppercase;color:#6E86A1;
    margin:14px 0 4px}

  .langs{flex:0 0 auto;margin-left:28px}
  /* Dim, not hidden. A language that is there and unlit says it is coming; one
     that is absent from the list says nothing at all. */
  .lgm{display:flex;flex-direction:column;gap:0}
  .lg{display:flex;align-items:baseline;gap:14px;padding:11px 0;
    text-decoration:none;color:var(--nav-ink);white-space:nowrap;width:max-content}
  .lg em{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:700;
    letter-spacing:0.13em;font-style:normal;min-width:34px}
  .lg span{font-size:15px}
  .lg:hover,.lg.on{color:var(--nav-ink-on)}
  .lg.off{color:#4C6076;cursor:not-allowed}

  /* The front page needs an h1 for its structure, but the bar already carries
     the name and setting it twice was noise. It stays in the document and out
     of the way. */
  .plate h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

  .wrap{max-width:1080px;margin:0 auto;padding:0 32px}
  .narrow{max-width:700px}
  /* The foot closes the page, on a short page as on a long one. On the navy
     ground a page that ended early was filled by the field; on paper it was
     a foot floating a third of the way up, with the watermark showing under
     it. The column takes the height and the foot is pushed to the end. */
  body{min-height:100svh;display:flex;flex-direction:column}
  /* Full width, said outright: a flex item with auto side margins is sized
     to its content, and the column on The Work came out nine hundred wide
     with its text ninety pixels off the axis every other page keeps. */
  main{flex:1 0 auto;width:100%}
  footer.band{margin-top:auto}
  /* A screen inside the main column carries no gutter of its own: with one
     it stood thirty-two pixels in from the axis the front, which bleeds,
     sets its screens on. */
  main.wrap .screen>.wrap{padding-left:0;padding-right:0}

  /* A list, as a publication lists its pieces: the date and the kind in a
     narrow column, the title and the deck beside them, a rule between one
     piece and the next. The frames and the coloured bar along the top were
     the two things on the page that looked like every other site. */
  .grid{display:grid;grid-template-columns:1fr;gap:0;padding:36px 0 24px;
    border-top:1px solid var(--line)}
  .card{border:0;border-bottom:1px solid var(--line);
    background:none;padding:28px 0 30px;
    text-decoration:none;color:var(--ink);display:grid;
    grid-template-columns:200px minmax(0,1fr);column-gap:32px;align-items:start;
    transition:background .24s ease,border-color .24s ease,color .24s ease}
  /* Touched, a card becomes the bar: the same ramp, the same light edge, the
     same greys. It is the one gesture on the site that says a card is the way
     in and the bar is the way back, and it costs no new colour to say it. The
     coloured edge along the top is the one thing that stays, because it is what
     tells a diagram from a note. */
  .card:hover,.card:focus-visible{
    background:none;border-bottom-color:var(--ink);color:var(--ink);outline:0}
  /* Touched, a row darkens its rule and its title to ink, and nothing else
     moves: what is touched is marked, not lifted. */
  .card:hover h3,.card:focus-visible h3{color:var(--nav-ink-on)}
  .card:hover .desc,.card:focus-visible .desc{color:var(--nav-ink)}
  .card:hover .meta,.card:focus-visible .meta{color:#6B7280}
  /* The kind keeps its own colour under the pointer: the bright halves were
     tuned for a card that turned navy, and on paper they read as faded. */
  .card:hover .kind,.card:focus-visible .kind{color:var(--k-article)}
  .card.note:hover .kind,.card.note:focus-visible .kind{color:var(--k-note)}
  .card.diagram:hover .kind,.card.diagram:focus-visible .kind{color:var(--k-diagram)}
  .card:hover,.card:focus-visible{border-top-color:var(--k-article)}
  .card.note:hover,.card.note:focus-visible{border-top-color:var(--k-note)}
  .card.diagram:hover,.card.diagram:focus-visible{border-top-color:var(--k-diagram)}
  .card.note{border-top-color:var(--k-note)}
  .card.diagram{border-top-color:var(--k-diagram)}
  /* contain, not cover: a diagram cropped to fit a box is a diagram with a
     piece missing, and the two here are different shapes */
  .card .thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;
    object-fit:contain;background:var(--figbg);border:1px solid var(--line);
    margin:0;grid-column:1;grid-row:1 / span 3}
  .card .meta{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.08em;
    color:var(--muted);margin:7px 0 0;display:flex;flex-direction:column;gap:4px;
    align-items:flex-start;grid-column:1;grid-row:1 / span 2}
  .card.diagram .meta{grid-column:2;grid-row:1;margin:0 0 10px;flex-direction:row;gap:10px}
  .card .title{grid-column:2;grid-row:1}
  .card .desc{grid-column:2;grid-row:2}
  .card.diagram .title{grid-row:2}
  .card.diagram .desc{grid-row:3}
  .card .kind{font-weight:700;color:var(--k-article)}
  /* On an index of one kind the kind is the page's title; on every row it
     was a word repeated seven times. */
  .grid .card .kind{display:none}
  .card.note .kind{color:var(--k-note)}
  .card.diagram .kind{color:var(--k-diagram)}
  .card .title{font-size:28px;font-weight:600;line-height:1.12;margin:0 0 10px;
    letter-spacing:-0.014em;font-family:"Source Serif 4",Georgia,serif;text-wrap:balance}
  .card .desc{color:var(--muted);font-size:16.5px;line-height:1.5;margin:0}


  /* The home says what this is before it says what is new. Set large on
     purpose: it runs the full column so it ends where the grid ends, and the
     larger size keeps the line near 73 characters instead of 107. */
  /* One size throughout. The passages that carry the argument are marked in
     home.md and simply darken: emphasis by ink rather than by size, so nothing
     is enlarged on the stylesheet's judgement of what matters. */
  /* The home is four screens: three that state the argument and one that opens
     the ways in. It is not a feed and it is no longer an index either. What is
     new lives in the sections, which is the price of a front page that takes a
     position instead of listing what it holds.

     Everything below degrades to a plain stack. With effects off, or with less
     motion asked for in the system, the blocks are simply visible; on a short
     viewport they are simply tall. Nothing here is hidden behind an effect. */
  .screen{min-height:100svh;display:grid;align-content:center;
    padding:calc(96px + clamp(12px,3vh,44px)) 0 clamp(20px,4.5vh,72px)}
  .screen .wrap{width:100%}
  /* The opening sentence at display, the rest at body. The site had no display
     size at all before this: the largest type on the front page was a 22px
     paragraph, and a site with no display size has no scale. */
  .lead{font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-0.018em;
    color:var(--ink);margin:0 0 .46em;max-width:var(--measure-lead);text-wrap:balance}
  .tail{font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--muted);
    margin:0;max-width:var(--measure)}
  /* The opening names the thing that gets in, the close names the person who
     has to hold the line, and they sit at the two ends of the page. This is the
     only colour in running text anywhere on the site, which is what lets two
     words carry it. Both are opened out of the marks they come from, because a
     colour tuned to sit on the dark bar does not carry as text on white: the
     red goes from E8503F, which is 3.72 there, to C4342A at 5.42, and the blue
     from the accent 1F3A5F, which against the ink these blocks are set in makes
     1.43 and would simply not be seen, to 245C9E at 2.43. */
  .screen b.warm,.screen b.cool,.screen b.gilt{color:var(--acc);font-weight:600}
  .doors .lead{margin-bottom:clamp(20px,3vh,32px)}
  .doors .tail{margin-bottom:clamp(26px,4vh,44px)}
  .doors .rule{border:0;border-top:1px solid var(--line);
    margin:0 0 clamp(24px,3.6vh,38px);max-width:var(--measure-lead)}

  /* Six columns, so five doors of two columns each fall as three below and two
     above, every one the same width. The three sit on the left edge, where every
     line of text above them sits; the two centre over them, on columns two to
     five. A three column grid cannot do this, because two cards cannot be
     centred over three cells without splitting one. */
  /* An index, not a rack of cards: two columns, a name in serif, a line
     under it, and a rule between one door and the next. The counts at the
     foot went with the frames; they are on the pages they count. */
  /* The same list the section indexes are: a narrow column in the mono that
     says what the page is or how much it holds, the name and its line beside
     it, a rule between one door and the next. */
  .cards{display:grid;grid-template-columns:1fr;
    gap:0;max-width:1016px;border-top:1px solid var(--line)}
  /* The list is written out rather than given as one shorthand, because the
     stagger below has to reach the reveal and nothing else. A single
     transition-delay applies to every property on the element, so a card that
     waited .44s to appear also waited .44s to light under the cursor, and the
     last door in the row felt broken. Delay is positional against this list. */
  .card5{grid-column:auto;display:grid;grid-template-columns:200px minmax(0,1fr);
    column-gap:32px;align-items:start;
    border:0;border-bottom:1px solid var(--line);padding:26px 0 28px;text-decoration:none;
    color:var(--ink);background:none;
    transition-property:opacity,transform,background,border-color,color;
    transition-duration:.58s,.58s,.24s,.24s,.24s;
    transition-timing-function:cubic-bezier(.2,.6,.2,1),
      cubic-bezier(.2,.6,.2,1),ease,ease,ease}
  .card5.a1{grid-column:auto}
  .card5.a2{grid-column:auto}
  .c-n{font-size:28px;font-weight:600;letter-spacing:-0.014em;line-height:1.12;
    margin:0 0 8px;transition:color .24s ease;grid-column:2;grid-row:1}
  .c-b{color:var(--muted);font-size:16.5px;line-height:1.5;
    margin:0;transition:color .24s ease;grid-column:2;grid-row:2}
  .c-f{font-family:"Source Serif 4",Georgia,serif;font-size:11px;font-weight:600;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--muted);line-height:1.6;
    grid-column:1;grid-row:1 / span 2;margin-top:8px;transition:color .24s ease;
    display:flex;flex-direction:column;gap:3px;align-items:flex-start}
  .c-a{display:none}
  /* Touched, a door becomes the bar, exactly as a card does on a section index:
     the same ramp, the same light edge, the same greys. It says the doors are
     the way in and the bar is the way back, and it costs no new colour. */
  .card5:hover,.card5:focus-visible{
    background:none;border-bottom-color:var(--nav-ink-on);color:var(--ink);outline:0}
  .card5:hover .c-n,.card5:focus-visible .c-n{color:var(--nav-ink-on)}
  .card5:hover .c-b,.card5:focus-visible .c-b{color:var(--nav-ink)}
  .card5:hover .c-f,.card5:focus-visible .c-f{color:var(--ink)}
  .card5:hover .c-a,.card5:focus-visible .c-a{color:var(--nav-ink-on);transform:translateX(4px)}
  /* Two half doors in one cell, the height of the door beside them. Each
     keeps the name and the blurb and gives up the mono foot: the arrow moves
     up beside the name, so the door still says it opens. */
  .stack{display:contents}
  @media (max-width:620px){
    .card5{grid-template-columns:1fr;row-gap:6px}
    .c-f,.c-n,.c-b{grid-column:1;grid-row:auto}
    /* The figures above the name, where the date stands on a section index. */
    .c-f{margin:0;flex-direction:row;flex-wrap:wrap;gap:2px 12px;order:-1}
  }

  /* Where you are, in as many marks as there are screens. A page that scrolls
     in screens has to say how many, or a reader cannot tell whether to go on. */
  /* While a panel is open the reader is choosing, not reading, so the index of
     screens gets out of the way. It sits at the same depth as the panel and is
     drawn later, so on a short window it was painting over it; raising one above
     the other would only have settled which of them covered which. Where :has
     is not understood the index simply stays, which is where it was. */
  html:has(.dd[open]) .rail{opacity:0;pointer-events:none}
  .rail{transition:opacity .2s ease;
    position:fixed;left:clamp(12px,2.4vw,30px);top:50%;transform:translateY(-50%);
    z-index:20;display:flex;flex-direction:column;gap:26px}
  .rail a{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:0.16em;
    color:var(--line);text-decoration:none;display:flex;align-items:center;gap:10px;
    transition:color .22s ease}
  .rail a::before{content:"";width:12px;height:1px;background:currentColor;
    flex:0 0 auto;transition:width .26s ease}
  .rail a.on{color:var(--ink)}
  .rail a.on::before{width:24px}
  .rail a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:1.5px;text-underline-offset:.2em}
  @media (max-width:900px){.rail{display:none}}

  /* The reveal fires on arrival, not on entry: a screen this tall crosses the
     edge of the window long before it is the thing being read, so an entry
     driven animation is spent by the time the reader gets to it. A screen that
     has arrived once stays revealed, so nothing flickers on the way back up. */
  @media (prefers-reduced-motion:no-preference){
    .screen .lead,.screen .tail,.screen .rule,.screen .card5{
      opacity:0;transform:translateY(24px)}
    .screen .lead,.screen .tail,.screen .rule{
      transition:opacity .58s cubic-bezier(.2,.6,.2,1),
                 transform .58s cubic-bezier(.2,.6,.2,1)}
    .screen.seen .lead{opacity:1;transform:none}
    .screen.seen .tail{opacity:1;transform:none;transition-delay:.11s}
    .screen.seen .rule{opacity:1;transform:none;transition-delay:.16s}
    .screen.seen .card5{opacity:1;transform:none}
    .screen.seen .card5:nth-child(1){transition-delay:.20s,.20s,0s,0s,0s}
    .screen.seen .card5:nth-child(2){transition-delay:.26s,.26s,0s,0s,0s}
    .screen.seen .card5:nth-child(3){transition-delay:.32s,.32s,0s,0s,0s}
    .screen.seen .card5:nth-child(4){transition-delay:.38s,.38s,0s,0s,0s}
    .screen.seen .card5:nth-child(5){transition-delay:.44s,.44s,0s,0s,0s}
  }
  /* No snapping. The screens used to snap, and it asked for an exception every
     time something had to sit at the bottom of the page: the footer was pushed
     under the fold, the last screen did not fit what a short window left it,
     and nothing down there could be reached long enough to be read. An effect
     that keeps asking for exceptions does not belong. The screens are a window
     tall on their own, and that was always the part doing the work. */
  /* the library cannot appear in a chronology, so it is named here instead */
  .libcall{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px 28px;flex-wrap:wrap;margin:40px 0 0;padding:24px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .libcall .lc-text{flex:1 1 320px;min-width:0}
  .libcall .lc-kind{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--k-note);margin:0 0 9px}
  .libcall h2{font-size:22px;font-weight:600;line-height:1.25;margin:0 0 7px;
    font-family:"Source Serif 4",Georgia,serif;text-wrap:balance}
  .libcall h2 a{color:var(--ink);text-decoration:none}
  .libcall h2 a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:2px;text-underline-offset:.16em}
  .libcall p{margin:0;color:var(--muted);font-size:16px}
  .libcall .lc-count{font-family:"JetBrains Mono",monospace;font-size:11px;
    letter-spacing:0.08em;color:var(--muted);flex:0 0 auto;white-space:nowrap}

  /* The section heads and their counts lived on the home, which no longer lists
     anything, so they are gone with it. The comparison table stays: the library
     still uses it. */
  .tablewrap{overflow-x:auto;margin:26px 0 34px;border:1px solid var(--line)}
  table.compare{border-collapse:collapse;width:100%;min-width:680px;font-size:16px}
  table.compare th,table.compare td{text-align:left;vertical-align:top;padding:12px 16px;
    border-bottom:1px solid var(--line)}
  table.compare thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);font-weight:600}
  table.compare tbody th{white-space:nowrap;font-weight:600}
  table.compare tbody th a{color:inherit;text-decoration:none;
    border-bottom:1px solid var(--line)}
  table.compare tbody th a:hover{color:var(--ink);border-bottom-color:var(--acc)}
  table.compare td.num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
    color:var(--muted);white-space:nowrap}
  table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{border-bottom:0}

  .lede{padding:52px 0 0}
  .lede h1{font-size:clamp(30px,4vw,42px);font-weight:600;margin:0 0 15px;line-height:1.05;
    letter-spacing:-0.021em;text-wrap:balance}
  .lede p{color:var(--muted);margin:0;font-size:18.5px;max-width:var(--measure-sub)}
  /* On the two pages that spend the whole column, a standfirst held to sixty
     characters sat narrower than the line above it and read as an indent. */
  .lede.wide p{max-width:none}

  article{padding:16px 0 0}
  article header{padding:48px 0 34px;border-bottom:1px solid var(--line);margin-bottom:40px}
  /* Bigger, tighter, and set closer than body copy. A heading that sits at the
     same optical weight as the text below it declares nothing about where to
     look first. Leading closes as the size grows, which is how type behaves. */
  article h1{font-size:clamp(34px,4.8vw,52px);font-weight:600;line-height:1.05;
    margin:0 0 18px;letter-spacing:-0.021em;text-wrap:balance}
  article .sub{color:var(--muted);font-size:20.5px;line-height:1.45;margin:0 0 22px;
    text-wrap:pretty;max-width:var(--measure-sub)}
  article .date{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;
    color:var(--accent);margin:0}
  article .inrecord{margin:44px 0 0;padding-top:18px;border-top:1px solid var(--line);
    font-size:15px;line-height:1.7;color:var(--muted);max-width:var(--measure)}
  article .inrecord .lbl{display:block;margin:0 0 6px;font-family:"Source Serif 4",Georgia,serif;
    font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  article .inrecord a b{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:400;
    letter-spacing:.04em;color:var(--accent);margin-right:4px}
  /* The record's definition, set as prose: two sentences in small caps
     were a wall. */
  .ddin .ddd{margin:0 0 8px;padding:0 0 10px;border-bottom:1px solid var(--line);
    font-family:"Source Serif 4",Georgia,serif;font-size:13px;font-weight:400;letter-spacing:0;
    text-transform:none;line-height:1.45;color:var(--muted);white-space:normal;max-width:34ch}
  article .inrecord a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
  article .inrecord a:hover{color:var(--ink)}
  article p{margin:0 0 26px;max-width:var(--measure)}
  article h2{font-family:"Source Serif 4",Georgia,serif;font-size:13.5px;font-weight:600;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);
    margin:52px 0 20px;padding-top:14px;border-top:1px solid var(--line)}
  /* a section is citable, so it says so quietly rather than only on hover,
     which would put it out of reach of anyone using a touch screen */
  article h2 .anchor{margin-left:10px;color:var(--muted);text-decoration:none;
    font-weight:400;opacity:.5;transition:opacity .2s ease,color .2s ease}
  article h2 .anchor:hover,article h2 .anchor:focus-visible{opacity:1;color:var(--ink)}
  figure.fig{margin:42px 0;padding:0}
  figure.fig img,figure.fig video{width:100%;height:auto;display:block;
    border:1px solid var(--line);background:var(--figbg)}
  /* A drawing dense enough to need a closer look says so, and opens. */
  figure.fig a{display:block;border:0;text-decoration:none}
  figure.fig a img{transition:border-color .2s ease}
  figure.fig a:hover img,figure.fig a:focus-visible img{border-color:var(--acc)}
  figure.fig figcaption{font-family:"JetBrains Mono",monospace;font-size:11px;
    letter-spacing:0.09em;color:var(--muted);margin-top:11px}
  /* About is three screens, and its heading is the page's own name, which the
     three screens then answer: who, why, what is here. Setting it a second time
     at the top would be a label above three labels, so it stays in the document
     for structure and out of the way of the reader. */
  h1.voice{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  h2.lead{font-weight:inherit}
  .screen .more{margin-top:0}
  .screen .more p{font-size:clamp(18px,1.5vw,20px);line-height:1.5;
    color:var(--muted);margin:0 0 1em;max-width:var(--measure)}
  .screen .more p:last-child{margin-bottom:0}
  /* The portrait sits beside the person, to the right: the prose keeps the
     axis every other screen keeps, and the picture takes the side the
     watermark and the doors take. */
  .withshot .wrap{display:flex;flex-direction:row-reverse;justify-content:flex-end;
    align-items:center;gap:clamp(28px,5vw,64px)}
  .withshot .stext{flex:1 1 auto;min-width:0}
  /* No object-position here, and not by omission: the derivative is square and
     so is the circle, so the image fills it exactly and there is nothing to
     slide. The framing lives in the crop, which is the one place it can. */
  .portrait{width:clamp(150px,17vw,232px);height:clamp(150px,17vw,232px);
    border-radius:50%;object-fit:cover;display:block;
    flex:0 0 auto;border:1px solid var(--line)}
  @media (max-width:820px){
    .withshot .wrap{flex-direction:column;align-items:flex-start;
      gap:clamp(20px,4vh,30px)}
    .portrait{width:120px;height:120px}
  }
  .disclaimer{color:var(--muted);font-style:italic;font-size:17px;
    padding-top:32px;border-top:1px solid var(--line);margin-top:48px}
  .empty{color:var(--muted);font-style:italic;padding:56px 0}

  .keepreading{margin:64px 0 0;padding-top:26px;border-top:1px solid var(--line)}
  .keepreading h2{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
    margin:0 0 20px;padding:0;border:0}
  .kr{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .kr a{border:1px solid var(--line);border-top:3px solid var(--k-article);
    background:var(--card);padding:20px 22px;text-decoration:none;color:var(--ink);
    display:block;transition:border-color .2s ease}
  .kr a:hover{border-color:var(--acc)}
  .kr a:only-child{grid-column:1/-1}
  .kr a.note{border-top-color:var(--k-note)}
  .kr a.diagram{border-top-color:var(--k-diagram)}
  .kr .dir{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--muted);margin:0 0 10px}
  .kr .t{font-size:18px;font-weight:600;line-height:1.3;margin:0;text-wrap:balance}
  @media (max-width:620px){.kr{grid-template-columns:1fr}}

  /* library: a reference page, so it is built to be linked into, not read through */
  /* An anchor has to clear everything stuck above it, and on the library two
     things are: the bar at 96 and the section index at 58 under it. At 76 a
     link landed 78 short, which is exactly the title and the source line, so
     you arrived in the middle of an annotation with no idea whose it was.
     The fallbacks in the var() are the static sums; the script on the library
     replaces them with what it measures, since the index wraps to two rows on
     a narrow window and no constant can know that. The subtraction on each is
     its own top padding, so what lands under the stack is the heading and not
     the box around it. */
  :target{scroll-margin-top:calc(var(--stick,96px) + 16px)}
  .entry{scroll-margin-top:calc(var(--stick,154px) + 16px - 26px)}
  .libsec{scroll-margin-top:calc(var(--stick,154px) + 16px - 54px)}
  .reviewed{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--muted);margin:0 0 30px}
  .reviewed a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .reviewed a:hover{color:var(--ink);border-bottom-color:var(--acc)}
  .dataline{margin:10px 0 0}
  .libintro p{margin:0 0 22px;max-width:var(--measure)}

  /* The framework is a register that you walk, not a grid that you decode. Its
     shape is set by what the data is: two axes and cells of prose, which no
     grid renders legibly past a screenful. So one axis is the address of the
     page and the other is its table, and the whole thing stays a document. */
  .statline{display:block;margin:0 0 34px;padding:12px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .statline b{color:var(--ink)}

  /* The path is the line above the title, and the only one. */
  /* A pillar is a heading with its own table, not a spanning row inside one
     table: a spanning cell inherits the column widths around it. */
  /* The width of the column, which is the width the intro above it runs:
     held narrower and centred it was the one block on the site off the left
     edge, and held narrower on the axis it stopped short of its own intro.
     The leader between the name and its count is what keeps the two read
     together across the width. */
  .pillreg{margin:clamp(26px,3.6vh,44px) 0 clamp(44px,7vh,84px)}
  details.ipil{border-top:1px solid var(--line);margin:0}
  details.ipil:first-child{border-top-color:var(--ink)}
  details.ipil:last-child{border-bottom:1px solid var(--ink)}
  details.ipil > summary{display:grid;
    grid-template-columns:auto minmax(0,auto) minmax(24px,1fr) auto auto;
    align-items:baseline;gap:0 14px;
    padding:15px 0;cursor:pointer;list-style:none}
  details.ipil > summary::-webkit-details-marker{display:none}
  details.ipil[open] > summary{padding-bottom:11px}
  details.ipil > summary:hover{background:rgba(22,32,43,.03)}
  /* The leader. It is what a register uses to carry an eye from a name to its
     number, and it costs one element and no colour. */
  .ipdots{align-self:center;height:1px;
    background-image:linear-gradient(90deg,currentColor 1px,transparent 1px);
    background-size:5px 1px;color:rgba(22,32,43,.22)}
  /* On a phone the row folds: code and name on one line, the figures under
     the name on the next, and no leader, since there is nothing to lead to. */
  @media (max-width:620px){
    details.ipil > summary{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px}
    details.ipil > summary .ipdots{display:none}
    details.ipil > summary h2{grid-column:2;grid-row:1}
    details.ipil > summary .ipcount{grid-column:2;grid-row:2;white-space:normal}
    details.ipil > summary::after{grid-column:3;grid-row:1}}
  .ipil h2{margin:0;border:0;padding:0;font-size:19px;font-weight:600;
    letter-spacing:-0.008em;transition:color .16s ease}
  details.ipil > summary:hover h2{color:var(--ink)}
  details.ipil .gridwrap{margin-bottom:22px}
  .ipcode{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
    letter-spacing:0.12em;color:var(--accent);
    border:1px solid var(--line);padding:3px 7px;align-self:center}
  details.ipil > summary:hover .ipcode{border-color:var(--acc)}
  .pillnote{max-width:var(--measure);color:var(--muted);margin:0 0 30px}
  /* The contributors, set in the same register as the pillars, because a
     person who moved the record is part of its structure and not a note
     stapled to the end of it. The entry stays open: with one name a
     disclosure would hide the only thing on the page. */
  .conreg{max-width:800px;margin:clamp(26px,3.6vh,44px) 0 clamp(20px,3vh,40px)}
  .conend{max-width:800px;margin:0 0 clamp(44px,7vh,84px)}
  .conend .panel{margin-top:0}
  .conx{border-top:1px solid var(--line);padding:18px 0 20px}
  .conx:first-child{border-top-color:var(--ink)}
  .conx:last-child{border-bottom:1px solid var(--ink)}
  .conhead{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;
    align-items:baseline;gap:0 14px}
  .conx h2{margin:0;border:0;padding:0;font-family:"Source Serif 4",Georgia,serif;
    font-size:20px;font-weight:600;letter-spacing:-0.008em;
    text-transform:none;color:inherit}
  .conx h2 a{color:inherit;text-decoration:none;transition:color .16s ease}
  .conx h2 a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:2px;text-underline-offset:.16em}
  /* Who the person is, said once and plainly. It identifies rather than
     credentials them: a row stands on its source and not on who sent it. */
  /* A byline is not running text, so the reading measure does not apply.
     Left to inherit it, a smaller font gets a proportionally shorter one. */
  .conrole{margin:5px 0 0;font-size:15px;color:var(--muted);max-width:none}
  /* A contribution belongs to a record, and the page holds two. The record
     leads the group, so a name that moved both reads as two contributions and
     not as one list of identifiers from nowhere. */
  .congrp{margin:16px 0 0;padding-left:15px;border-left:1px solid var(--line)}
  .congrp + .congrp{margin-top:18px}
  .conwho{margin:0;display:flex;align-items:baseline;gap:10px;max-width:none;
    font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.13em;
    text-transform:uppercase}
  .conrec{color:var(--accent);font-weight:700}
  .concount{color:var(--muted)}
  .congrp .consay{margin-top:7px}

  .consay{max-width:var(--measure);margin:10px 0 0;color:var(--muted)}
  .conwhat{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
  .conm{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
    letter-spacing:0.1em;color:var(--muted);border:1px solid var(--line);
    padding:3px 7px;text-decoration:none;transition:color .16s,border-color .16s}
  .conm:hover{color:var(--ink);border-color:var(--acc)}
  /* Two panels closing the page, in the shape the note above used to have.
     One says where the thing stands, the other how to move it. */
  .panel{margin:34px 0 0;padding:20px 22px;border:1px solid var(--k-diagram)}
  .panel h2{margin:0 0 10px;border:0;padding:0;font-family:"JetBrains Mono",monospace;
    font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--k-diagram)}
  .panel p{margin:0 0 10px;font-size:16px}
  .panel p:last-child{margin:0}
  .panel b{color:var(--ink);font-weight:600}
  .panel a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .panel a:hover{color:var(--ink);border-bottom-color:var(--acc)}
  .pmeta,.pmark{font-size:14.5px;color:var(--muted)}}
  /* The title belongs to the screen that opens the argument, at the size the
     screens are set in, not stacked above them as a second beginning. */
  /* The page keeps one h1 for its structure and does not set it, since the
     bar already carries the name and the first line says what the thing is. */
  h1.voice{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .screen .ipil h2{font-size:21px}
  .ipcount{margin:0;font-family:"JetBrains Mono",monospace;font-size:10px;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .ipcount b{font-size:13px;font-weight:700;color:var(--ink);
    letter-spacing:0.02em;margin-right:5px}
  /* The mark closes the row rather than trailing the name, so the four cells
     read left to right as one line and the state sits where a state belongs. */
  details.ipil > summary::after{content:"";display:block;width:6px;height:6px;
    align-self:center;border-right:1.5px solid var(--line);
    border-bottom:1.5px solid var(--line);transform:rotate(45deg)
    translateY(-2px);transition:transform .18s ease,border-color .16s ease}
  details.ipil[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
  details.ipil > summary:hover::after{border-color:var(--acc)}
  .secsum{max-width:var(--measure);color:var(--muted);margin:0 0 20px}
  /* Inside a pillar the line runs the register's width, as the intro above
     the register does. */
  .ipil .secsum{max-width:none}

  /* A table wider than the window scrolls, and says so: a shade at the
     edge there is more past, drawn by the scroll itself, gone at the end. */
  .gridwrap{overflow-x:auto;margin:0 0 8px;background:linear-gradient(90deg,var(--paper) 40%,rgba(247,247,244,0)) left/48px 100% no-repeat local,linear-gradient(270deg,var(--paper) 40%,rgba(247,247,244,0)) right/48px 100% no-repeat local,linear-gradient(90deg,rgba(22,32,43,.10),rgba(22,32,43,0)) left/16px 100% no-repeat scroll,linear-gradient(270deg,rgba(22,32,43,.10),rgba(22,32,43,0)) right/16px 100% no-repeat scroll}
  table.idx,table.cellt{border-collapse:collapse;width:100%;font-size:15px}
  table.cellt{min-width:760px}
  table.idx th,table.cellt th{font-family:"Source Serif 4",Georgia,serif;font-size:11px;font-weight:600;
    font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);
    text-align:left;padding:0 22px 9px 0;border-bottom:1px solid var(--line)}
  table.idx td,table.cellt td{padding:11px 22px 11px 0;vertical-align:top;
    border-top:0;border-bottom:1px solid var(--line)}
  table.idx tr:last-child td,table.cellt tr:last-child td{border-bottom:0}
  .c-id{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
    letter-spacing:0.06em;white-space:nowrap;width:1%}
  .c-id a{color:var(--accent);text-decoration:none}
  .c-id a:hover{text-decoration:underline}
  /* The identifier is the permalink. A note telling a reader how to build one
     is a note; this is the thing itself. */
  .perma::after{content:"§";margin-left:7px;color:var(--line)}
  .perma:hover::after{color:var(--ink)}
  .c-nm a{color:var(--ink);text-decoration:none}
  .c-nm a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:1.5px;text-underline-offset:.2em}
  .wsub{display:block;color:var(--muted);font-size:14px;margin-top:4px;
    max-width:var(--measure)}
  .c-cv{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
    white-space:nowrap;width:1%}
  .cov{display:inline-block;width:52px;height:6px;background:var(--line);
    margin-right:10px;vertical-align:1px}
  .cov i{display:block;height:6px;background:var(--accent)}

  /* On a lede the heading is 30 to 42 and four tenths of it lands where this
     wants to be. An article heading reaches 46, where the same fraction sets a
     line of small capitals at eighteen pixels and stops being an eyebrow. */
  article > header .h1id{font-size:12.5px}
  .h1id{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:0.3em;
    font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;
    line-height:1.5}
  .h1id a{color:var(--muted);text-decoration:none;
    border-bottom:1px solid var(--line)}
  .h1id a:hover{color:var(--ink);border-bottom-color:var(--acc)}
  .h1id b{color:var(--accent);font-weight:700}
  .h1id i{font-style:normal;color:var(--line);margin:0 9px}
  /* Fitted to what is in it. Declared at five and filled with four, the empty
     column showed the sheet the grid is ruled with and read as a box nobody had
     put there. */
  dl.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:1px;margin:26px 0 30px;background:var(--line);border:1px solid var(--line)}
  dl.meta > div{background:var(--paper);padding:12px 15px}
  dl.meta dt{font-family:"Source Serif 4",Georgia,serif;font-size:11px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
  dl.meta dd{margin:5px 0 0;font-size:14px;color:var(--ink)}
  dl.meta dd a{color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--line)}
  dl.meta dd a:hover{color:var(--ink);border-bottom-color:var(--acc)}

  /* Two destinations, kept apart: the title opens the annotation, the arrow
     opens the document. One reader wants the reading, the other wants the law. */
  .c-j{width:110px;color:var(--ink);font-size:14.5px}
  .c-src{width:240px}
  .c-src .stitle ~ .stitle{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
  .stitle{display:block;font-weight:600;font-size:14px;color:var(--ink);
    text-decoration:none;border-bottom:1px solid var(--line)}
  .stitle:hover{color:var(--ink);border-bottom-color:var(--acc)}
  /* A source opens in its own tab, because a row is read against the document
     it cites and not instead of it. The mark says so, since a tab that opens
     itself is otherwise announced to nobody. */
  /* Drawn, not set. The arrow that means this is U+2197 and neither face
     here carries it; U+2192 turned did not survive either. Two strokes in an
     SVG depend on no font at all, which is how the labels on the front page
     already carry their mark. */
  .stitle .ext{width:9px;height:9px;display:inline-block;margin-left:6px;
    vertical-align:0;fill:none;stroke:var(--muted);stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .stitle:hover .ext{stroke:var(--accent)}
  .c-src span{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
    letter-spacing:0.06em;color:var(--muted);margin-top:4px}
  .ext{color:var(--muted);text-decoration:none;font-size:12px;margin-left:4px}
  .ext:hover{color:var(--ink)}
  /* Read along the other axis, the first cell keys the row: the control's
     code, the measure's name under it in the text face, and the standing.
     The name had a column of its own, and the prose paid for it. */
  .jurt .c-key{white-space:normal;width:210px;min-width:210px}
  .jurt .mname{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:15px;
    font-weight:400;letter-spacing:0;line-height:1.35;color:var(--ink);
    text-decoration:none;margin:5px 0 9px}
  .jurt .mname span{display:block;font-family:"JetBrains Mono",monospace;
    font-size:10px;font-weight:700;letter-spacing:0.09em;color:var(--muted);
    margin-bottom:4px}
  .jurt .mname:hover{text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:1.5px;text-underline-offset:.2em}
  .jurt tr.grp th{padding:26px 0 9px;border-bottom:1px solid var(--line);
    border-top:0}
  .jurt tr:first-child.grp th{padding-top:14px}
  .jurt tr.grp a{color:var(--ink);text-decoration:none;font-size:13px;
    letter-spacing:0;text-transform:none;font-family:inherit;font-weight:600}
  .jurt tr.grp a span{font-family:"JetBrains Mono",monospace;font-size:10px;
    font-weight:700;letter-spacing:0.13em;color:var(--accent);margin-right:11px}
  /* The pillar header was a link and took its type from the anchor rules.
     A standing band is not a link, and without a class of its own it fell
     through to the bare cell, where the count and the word ran together in
     the table head's own uppercase. */
  .jurt tr.grp .band{color:var(--ink);font-size:13px;letter-spacing:0;
    text-transform:none;font-family:inherit;font-weight:600}
  .jurt tr.grp .band span{font-family:"JetBrains Mono",monospace;
    font-size:10px;font-weight:700;letter-spacing:0.13em;
    color:var(--accent);margin-right:11px}
  .jurt tr.grp a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:1.5px;text-underline-offset:.2em}

  /* The drawing carries no gradient, so the sheet has three fills and not a
     ramp. They are the chip's three weights: filled binds, outlined advises,
     pale means nobody has looked. */
  /* One column until there is room for two. The side is not a sidebar, it is
     the key and the two orders standing where the drawing leaves the page
     empty. */
  .mapgrid{display:grid;gap:24px 36px;margin:0 0 30px}
  @media (min-width:1040px){
    .mapgrid{grid-template-columns:minmax(0,1fr) 272px;align-items:start}
  }
  .mapfig{margin:0;padding:0}
  .mapside{align-self:center}
  .key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
    gap:10px}
  .key li{display:flex;align-items:center;gap:11px;
    font-family:"Source Serif 4",Georgia,serif;font-size:11.5px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
  /* The width of its column and no more, and the same width the other
     record's map takes. It was held to what was left of the window under
     the head, and on a laptop that drew it at five hundred pixels, where
     the smaller states were specks; a map is the page's content and the
     page scrolls, so it is sized to be read, not to fit above the fold. */
  .euro{display:block;width:100%;height:auto;margin:0 auto;max-width:680px}
  .euro path{vector-effect:non-scaling-stroke}
  .e-out path{fill:#F1F2F3;stroke:#E7E8E9;stroke-width:0.7}
  .euro a{cursor:pointer}
  .euro a path,.euro a circle{stroke:var(--paper);stroke-width:1.1;
    transition:fill .18s ease}
  .e-bind path,.e-bind circle{fill:#1F3A5F}
  .e-soft path,.e-soft circle{fill:#A3B8CE}
  .e-none path,.e-none circle{fill:#DBE4EE}
  .euro a:hover path,.euro a:focus-visible path,
  .euro a:hover circle,.euro a:focus-visible circle{fill:var(--acc)}
  .euro a:focus-visible{outline:0}
  .e-mark circle{stroke:#1F3A5F;stroke-width:2}
  /* The edge was white, so the two pale keys were a colour with no shape on a
     white page. A hairline gives all four an outline without altering a fill,
     which has to keep matching the drawing. */
  .mk{width:15px;height:15px;flex:0 0 auto;
    border:1px solid rgba(22,32,43,0.28)}
  .mk.bind{background:#1F3A5F}
  .mk.soft{background:#A3B8CE}
  .mk.none{background:#DBE4EE}
  .mk.out{background:#F1F2F3}

  /* The two that are orders and not places. They sit above the drawing because
     what they establish reaches every state under it. */
  .orders{margin:0 0 26px;display:flex;flex-wrap:wrap;gap:10px}
  .ord{flex:1 1 auto}
  .orders p{flex:1 1 100%;margin:12px 0 0;color:var(--muted);font-size:14px;
    max-width:40ch}
  .ord{display:flex;align-items:baseline;gap:9px;text-decoration:none;
    border:1px solid var(--line);padding:11px 15px;color:var(--muted)}
  .ord span{font-family:"JetBrains Mono",monospace;font-size:10.5px;
    font-weight:700;letter-spacing:0.11em}
  .ord em{font-style:normal;font-size:14px}
  .ord i{font-style:normal;font-family:"JetBrains Mono",monospace;
    font-size:10.5px;color:var(--line)}
  .ord.on{color:var(--ink);border-color:var(--accent)}
  .ord.on span{color:var(--accent)}
  .ord.on i{color:var(--muted)}
  .ord:hover{border-color:var(--acc);color:var(--ink)}
  .jhead{font-family:"Source Serif 4",Georgia,serif;font-size:12px;font-weight:600;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
    margin:0 0 14px;padding-top:8px;border-top:1px solid var(--line)}

  /* Thirty four of them, and twenty five unlit. The unlit ones are the point
     as much as the others, so they are dimmed and not dropped. */
  /* Thirty four cells never fill the last row, and drawn as a sheet showing
     through one pixel gaps the leftover slot became a solid block sitting where
     a country should be. The lines belong to the cells, so a slot with no cell
     in it has none. */
  .jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:0 36px;border-top:1px solid var(--line);margin:0 0 30px}
  .jgrid .j{display:flex;align-items:baseline;gap:9px;background:none;
    padding:11px 0;text-decoration:none;color:var(--muted);
    border-bottom:1px solid var(--line)}
  .jgrid .j span{font-family:"JetBrains Mono",monospace;font-size:10.5px;
    font-weight:700;letter-spacing:0.11em;color:var(--muted);min-width:26px}
  .jgrid .j em{font-style:normal;font-size:13.5px;flex:1 1 auto}
  .jgrid .j i{font-style:normal;font-family:"JetBrains Mono",monospace;
    font-size:10.5px;color:var(--line)}
  .jgrid .j:hover{color:var(--ink)}
  .jgrid .j i b{font-weight:400;color:var(--accent);margin-left:6px}
  .jkey{margin:0 0 12px;font-family:"Source Serif 4",Georgia,serif;font-size:11.5px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .jkey b{font-weight:400;color:var(--accent);margin-left:8px}
  .jgrid .j:hover span{color:var(--ink)}
  .jgrid .j.on{color:var(--ink)}
  .jgrid .j.on span{color:var(--accent)}
  .jgrid .j.on i{color:var(--muted)}

  .c-est{width:250px;color:var(--muted);font-size:14px}
  .c-req{font-size:14.5px}
  /* The chip is what keeps a British guidance note from reading as British law,
     so it is set to be seen rather than to be tidy. */
  /* In a table it sits under the identifier and takes the column's width. In
     a sentence it sits in the line. Same chip either way. */
  /* In a sentence they carry the line rather than a column, so they are set
     larger than in a table. The alphabet is the same; the size is not. */

  .tail .stand,.lead .stand,.defs .stand{display:inline-block;margin:0 2px 0 0;
    padding:3px 9px;
    font-size:11.5px;letter-spacing:0.09em;vertical-align:1px;min-width:0}
  /* A qualification, not a state: outlined, in the serif, never filled. A
     filled chip is a button, and a button in a table of law is the wrong
     kind of thing. */
  .stand{display:block;margin-top:7px;font-family:"Source Serif 4",Georgia,serif;
    font-size:10.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
    padding:3px 7px;text-align:center;border:1px solid transparent}
  /* One hue, three weights. They were drawn in the line grey, which is the
     colour of a rule on white and so of nothing at all on white: reported could
     not be read. */
  .stand.mandatory{border-color:var(--accent);color:var(--accent);font-weight:700}
  .stand.recommended{border-color:var(--muted);color:var(--muted)}
  .stand.reported{border-style:dashed;border-color:var(--muted);color:var(--muted)}
  .whence{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:10.5px;font-weight:600;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  tr.unread td,tr.not-covered td,tr.open td{color:var(--muted)}
  tr:target td{background:linear-gradient(90deg,rgba(31,58,95,.08),transparent 70%)}
  /* Named, and nothing more. Out of the cells, out of the counts, and visibly
     not part of the record until somebody opens it. */
  .pending{max-width:var(--measure);color:var(--muted);font-size:15px;
    margin:20px 0 0;padding-left:14px;border-left:2px solid var(--line)}
  .pending b{color:var(--ink);font-weight:600}
  .readnote{max-width:var(--measure);color:var(--muted);font-size:15px;margin:0 0 14px}
  ul.reading{list-style:none;margin:0 0 26px;padding:0;
    border-top:1px solid var(--line)}
  ul.reading li{padding:11px 0;border-bottom:1px solid var(--line)}
  ul.reading a{display:block;font-size:15px;color:var(--ink);text-decoration:none}
  ul.reading a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:1.5px;text-underline-offset:.2em}
  ul.reading span{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
    letter-spacing:0.06em;color:var(--muted);margin-top:4px}

  @media (max-width:820px){dl.meta{grid-template-columns:1fr 1fr}
    dl.meta > div:last-child:nth-child(odd){grid-column:1 / -1}}
  @media (max-width:620px){
    .ipil h2{font-size:20px}
    .mnav .steps{margin-left:0;width:100%;margin-top:8px}
  }
  }
  /* The index sticks under the bar and marks where you are. On a page of forty
     entries the question is not what the sections are, it is which one you are
     reading, and that is the one thing a static list cannot say. */
  .libindex{margin:36px 0 0;padding:16px 0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 32px;
    position:sticky;top:96px;z-index:5;background:var(--paper)}
  .libindex a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.12em;
    text-transform:uppercase;text-decoration:none;color:var(--muted);
    padding-bottom:4px;border-bottom:2px solid transparent;
    transition:color .18s ease,border-color .18s ease}
  .libindex a:hover{color:var(--ink)}
  .libindex a span{opacity:.7}
  .libindex a.on{color:var(--accent);border-bottom-color:var(--accent)}
  @media (max-width:620px){.libindex{position:static}}
  .libsec{padding:54px 0 0}
  .libsec h2{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);
    margin:0 0 8px;padding-top:14px;border-top:1px solid var(--line)}
  .libsec .order{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:0.07em;
    text-transform:uppercase;color:var(--muted);margin:0 0 26px}
  .entry{padding:26px 0;border-top:1px solid var(--line)}
  .entry h3{font-size:20px;font-weight:600;line-height:1.3;margin:0 0 9px;text-wrap:balance}
  .entry h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .entry h3 a:hover{color:var(--ink);border-bottom-color:var(--acc)}
  .entry .src{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.05em;
    color:var(--muted);margin:0 0 15px;line-height:1.75;max-width:var(--measure)}
  .entry .ann{margin:0 0 12px;font-size:17.5px;max-width:var(--measure)}
  .entry .status{font-size:15.5px;font-style:italic;color:var(--muted);margin:0 0 12px;
    max-width:var(--measure-sub)}
  .entry .perma{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:0.05em;
    margin:0}
  .entry .perma a{color:var(--muted);text-decoration:none}
  .entry .perma a:hover{color:var(--ink)}
  /* An entry says two different things, and once the annotation is held to a
     measure there is room to stop making them queue. What the source
     establishes goes left, at reading width. Where to find it, who issued it
     and when, and whether it has been read yet, go right, where they can be
     scanned down a column instead of stepped over on the way to the next
     annotation.

     Placed by row rather than by flow, so the markup does not change and the
     order in the document stays the one a screen reader wants: title, then
     provenance, then what it establishes. Below the width where a second
     column would squeeze the first, the rule simply does not apply and the
     entry falls back to the single column it has always been. */
  @media (min-width:920px){
    .entry{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(170px,1fr);
      column-gap:44px;align-content:start}
    .entry > *{grid-column:1}
    .entry h3{grid-column:1 / -1;grid-row:1}
    .entry .ann{grid-row:2 / span 3;margin:0}
    .entry .src{grid-column:2;grid-row:2;margin:0 0 12px}
    .entry .status{grid-column:2;grid-row:3;margin:0 0 12px}
    .entry .perma{grid-column:2;grid-row:4;margin:0}
  }

  .pending{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--k-diagram);margin:0 0 12px}
  .libprose p{margin:0 0 22px;max-width:var(--measure)}
  .measured{max-width:var(--measure)}
  /* The panels close the framework's index and there is nothing beside them,
     so they sit in the middle of the column rather than against its left edge
     with two thirds of the page empty to their right. */
  .screen.doors .measured{margin-left:auto;margin-right:auto}
  .measured .draftnote{margin-bottom:0}
  .draftnote{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.08em;
    color:var(--k-diagram);border:1px solid var(--k-diagram);padding:12px 16px;
    margin:0 0 24px;line-height:1.6}


  /* The bar seen in a mirror: the same navy, the ramp turned over, and the line
     of light along the bottom edge instead of the top. Ninety six tall, which is
     the height of the bar, so the page closes on the shape it opened with. The
     name is not repeated here, because the mark at the top already carries it
     and the way back is the mark, not a line of text at the far end.

     A white strip used to sit here and read as the place the page ran out. */
  footer.band{background:var(--paper);border-top:1px solid var(--line);color:#4F4F4C}
  /* Seventy two, as the bar above it. The tallest thing in here is the forty
     four pixel hit area of a glyph, which stays: the standard asks for it, and
     the foot was never tall because of it. */
  footer.band .wrap{height:72px;display:flex;align-items:center;
    justify-content:space-between;gap:24px}
  footer.band p{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:11.5px;
    font-weight:600;letter-spacing:0.14em;text-transform:uppercase;line-height:1.7}
  /* Written as footer.band a this scored 0-1-2 and beat the 0-1-1 of .fsoc a, so
     the glyphs kept a line under them that no override could reach. Underlining
     is for the one link inside a sentence, which is the licence. */
  footer.band a{color:#4F4F4C;text-decoration:none}
  footer.band p a{border-bottom:1px solid #C8C8C4}
  footer.band p a:hover{color:var(--nav-ink-on);border-bottom-color:var(--nav-ink-on)}
  .fleft{display:flex;align-items:center;gap:20px;min-width:0}
  .fright{text-align:right;flex:0 0 auto}
  /* 44x44 hit areas: WCAG 2.2 asks 24 minimum, this clears the enhanced target too */
  .fsoc{display:flex;align-items:center;gap:4px;flex:0 0 auto}
  .fsoc a{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;color:#6B7280;border:1px solid transparent;
    transition:color .2s ease,border-color .2s ease}
  .fsoc a:hover{color:var(--nav-ink-on);border-color:var(--line)}
  /* Three facts a reader can check in their own browser in ten seconds, which
     is the only kind of claim worth making about privacy. It says what this
     site does and stops there: the host answers the request and sees it, and
     nothing here pretends otherwise. */

  @media (max-width:900px){
    .grid{grid-template-columns:1fr}
  }
  /* The bar has to stack long before the phone. On one row it needs about 870
     of column: the lock runs to 260, the five sections to 405, the two social
     glyphs to 152, and the gap between them to 30. Below roughly 935 of viewport
     that stops fitting, and flex does not announce it, it just squeezes the
     words. The nav is monospaced, so that part of the sum is exact rather than
     estimated; the name is the one term that is not, so the threshold is set at
     1000 rather than at the 935 the sum gives. That covers Georgia, the
     fallback, which is wider than Source Serif and is what gets drawn on the
     first paint or when the font never arrives.

     Two rows, not three. The name block alone runs to about two hundred, so the
     lock is given the first row outright instead of being left to fit beside
     what follows it. The languages go at the end of the row: an order left
     unset counts as zero and sorts before anything numbered, which is what sent
     them in front of the sections the first time. The row reads sections first,
     then the language they are read in. */
  @media (max-width:1000px){
    .bar .wrap{height:auto;padding-top:16px;padding-bottom:16px;
      flex-wrap:wrap;gap:14px 20px}
    .lock{flex:0 0 100%}
    /* Basis zero, not auto. Flex decides where a line breaks from the items'
       basis, before it shrinks anything, so a navigation asking for its natural
       380 pixels threw the social link onto a third row of its own on a narrow
       screen. At zero it asks for nothing, takes what is left, and scrolls
       inside that, which pins the count at two rows however narrow it gets. */
    /* Two rows and never three: the sections scroll sideways in their row
       instead of wrapping, and the search glyph keeps its place beside them. */
    nav.secs{margin-left:0;margin-right:0;order:3;flex:1 1 0;min-width:0;
      gap:20px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
    nav.secs::-webkit-scrollbar{display:none}
    /* Same order as the navigation it follows, so the source order decides
       between the two. Left at the default it sorted ahead of everything. */
    .srch{order:3;margin-left:0}
    .langs{order:4;margin-left:24px}
  }

  @media (max-width:620px){
    body{font-size:18px}
    .wrap{padding:0 22px}
    .lock .mark{width:48px;height:48px;margin-left:-4px}
    .lockname{font-size:15px}
    /* The serif small capitals are wider than the mono they replaced, and at
       full size the last section ran under the search glyph. */
    nav.secs{gap:14px}
    nav.secs a,.dd > summary{font-size:10.5px;letter-spacing:.1em}
    .plate{padding:40px 0 4px}
    .grid{grid-template-columns:1fr;gap:0;padding:36px 0 12px}
    .card{grid-template-columns:1fr;row-gap:8px}
    .card .meta,.card .title,.card .desc,.card .thumb,
    .card.diagram .meta,.card.diagram .title,.card.diagram .desc{grid-column:1;grid-row:auto}
    .card .meta{flex-direction:row;gap:10px;margin:0}
    article .sub{font-size:17.5px}
  }

  @media (max-width:760px){
    footer.band .wrap{height:auto;padding-top:18px;padding-bottom:18px;
      flex-direction:column;align-items:flex-start;gap:12px}
    .fright{text-align:left}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important}
    .card:hover{transform:none}
  }

  @media print{
    .bar,footer,.keepreading,.skip{display:none !important}
    body{background:#fff;color:#000;font-size:11.5pt;line-height:1.5}
    .wrap{max-width:none;padding:0}
    article header{padding-top:0;border-color:#999}
    article h1{font-size:21pt}
    article h2{color:#000;border-color:#999}
    article .sub{color:#333}
    a{color:#000;text-decoration:underline}
    article a[href^="http"]::after,article a[href^="/"]::after{
      content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
    figure.fig img,figure.fig video{border-color:#999;background:none}
    .disclaimer{color:#333;border-color:#999}
  }

.screen b.fresh{color:var(--acc);font-weight:600}
.imx .defs + .tail{margin-top:1.15em}
/* the screen that opens the record has no door beside it; its column keeps
   the axis every screen keeps, at the left edge */
.imx .blk.mid{max-width:var(--measure,66ch);margin:0}
.imx .blk.mid .lead{max-width:none}
/* Five rows with a rule between them, the drawing at the left, the count at
   the right. Five framed cards of five different heights left two holes in a
   second row and said the same thing five times at the foot. */
.tcards{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.tcard{flex:none;border:0;border-bottom:1px solid var(--line);
  background:none;padding:24px 0;
  text-decoration:none;color:var(--ink);display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;column-gap:24px;align-items:start;
  transition:border-color .24s ease}
@media (max-width:900px){.tcard{grid-template-columns:36px minmax(0,1fr)}
  .tcard .foot{grid-column:2;grid-row:3;padding-top:10px}}
a.tcard:hover,a.tcard:focus-visible{background:none;border-bottom-color:var(--ink);outline:0}
.tcard.empty{opacity:.62}
.tcard .title{font-size:26px;font-weight:600;line-height:1.14;margin:0 0 8px;
  letter-spacing:-.014em;text-wrap:balance;grid-column:2;grid-row:1}
.tcard .desc{color:var(--muted);font-size:16px;line-height:1.5;margin:0;flex:none;
  grid-column:2;grid-row:2;max-width:62ch}
.tcard .foot{font-family:"Source Serif 4",Georgia,serif;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);display:flex;gap:12px;
  align-items:baseline;padding:6px 0 0;border:0;grid-column:3;grid-row:1;white-space:nowrap}
.tcard.empty .foot{color:var(--faint)}
.tcard .ico{display:block;width:32px;height:32px;margin:4px 0 0;color:var(--accent);flex:none;
  grid-column:1;grid-row:1 / span 3}
a.tcard:hover .ico,a.tcard:focus-visible .ico{color:var(--ink)}
.tcard.empty .ico{color:var(--faint)}
.tcard .ico svg{display:block;width:100%;height:100%}
.iterfw .lede{margin-bottom:clamp(30px,5vh,52px)}
.iterfw section{padding:0 0 clamp(44px,8vh,84px)}
.iterfw section > h2{font-family:"Source Serif 4",Georgia,serif;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 24px}
.iterfw .note{color:var(--muted);font-size:17px;max-width:66ch}
.iterfw .defs{list-style:none;margin:0;padding:0;font-size:clamp(17px,1.42vw,19.5px);line-height:1.64;color:var(--muted)}
.iterfw .defs li{position:relative;padding-left:24px;margin:0 0 .7em}
.iterfw .defs li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.iterfw .defs b{color:var(--ink);font-weight:600}
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:0 48px;margin:0;
  border-top:1px solid var(--line)}
.gloss .g{display:grid;grid-template-columns:124px minmax(0,1fr);gap:0 18px;padding:15px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.gloss .t{margin:0;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);line-height:1.5}
.gloss p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.gloss b{color:var(--ink);font-weight:600}
@media (max-width:620px){.gloss .g{grid-template-columns:minmax(0,1fr);gap:6px 0}}
.reas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,2.6vw,34px);margin:0}
.rea{border-top:2px solid var(--k-diagram,#C0A570);padding:18px 0 0}
.rea .inf{margin-top:12px;padding-left:13px;border-left:2px solid var(--line)}
.rea .inf b{color:var(--muted)}
.rea.inf{border-top-color:var(--faint)}
.rea h3{margin:0 0 10px;font-size:20px;line-height:1.24}
.rea p{margin:0;color:var(--muted);font-size:16px;line-height:1.52}
.rea .cite{display:block;margin:12px 0 0;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.04em;color:var(--faint)}
.rea .cite a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--line)}
.rea .cite a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.iterfw .measured.panel{margin-left:0}