/* ------------------------------------------------------- the sheet pages

     A page scanned for ten seconds and a page read for ten minutes were once
     set on opposite grounds. They are one sheet now: the front, the work, the
     about, the records' indexes and the map are runs of screens on the same
     paper as the prose, with the mark in filigree fixed behind them. Nothing
     below reaches a page that does not ask for it: every rule is under
     body.sheet. */
  body.sheet{
    position:relative;overflow-x:hidden}
  /* The screens run to the edge of the window, so on these pages the main
     column stops constraining and each screen carries its own gutter. */
  body.sheet main.bleed{max-width:none;padding:0;width:100%}
  body.sheet main{position:relative;z-index:1}
  /* The foot too, or the watermark lies over its lines. */
  body.sheet footer.band{position:relative;z-index:2}
  /* The watermark: fixed, larger than the window and cut by its edge, to the
     right of the middle where the columns leave room. Whole, it read as an
     icon enlarged; cut, it reads as a watermark. */
  /* What a watermark costs the text is not contrast: ink on the darkest of
     its greys still clears twelve to one. It is the edges. A chamfer's line
     sits in the band of spatial frequencies a letter's strokes occupy, and
     the eye resolves the two together. On the desk the column and the
     watermark overlap by the end of a few lines, and the watermark stays
     behind them, whole and sharp: a fade across the column and a placement
     past it were both tried, and each made it a thing beside the text
     instead of under it. On the phone, where every line passes over it, a
     softened copy stands in for it, blurred past the strokes' band so what
     remains is the volume, and lighter. */
  .field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  /* Under the text, not beside it: the column's last third sits on the
     outer face of the left bracket, and the right bracket is cut by the
     edge. Further right it stood next to the column as a figure would; the
     lighter register is what lets it sit under the lines. */
  .wmark{position:absolute;top:52%;left:70%;transform:translate(-50%,-50%);
    height:110vh;width:auto}
  @media (max-width:1050px){
    .wmark{left:64%;top:50%;height:92vh;width:auto;opacity:.5}}

  body.sheet .screen{position:relative;overflow:hidden;
    padding:calc(84px + clamp(12px,3vh,44px)) 0 clamp(20px,4.5vh,72px)}
  body.sheet .screen>.wrap{position:relative;z-index:1}
  .blk{max-width:56ch}
  /* The text column has to clear the drawing beside it at every width, and a
     cap in ch alone does not: the drawing is sized off the height of the
     screen, so on a wide short window it grows while the column does not move.
     Measured at 1440 the two overlapped by 49 pixels. The second term is what
     holds the clearance down the range; below the breakpoint the drawing goes
     behind the text instead and neither cap matters. */
  /* Fifty two, not forty six. The opening paragraph runs long enough that at
     forty six it made a column tall enough to push its own last line under
     the fold on a short window, and the room to the right was going spare. */
  /* 52ch was inside the readable band but at its narrow end, and it cost
     a line of wrap the screen did not have room for. 58 is nearer the
     middle of the band and buys the height back. */
  /* One axis. Every column of prose on every screen starts at the left edge
     of the page's column, which is the edge the mark in the bar stands on and
     the edge a list, a register or a door starts on. Nothing is centred and
     nothing is indented: a page has one margin, as a book does, and what is
     not text, the watermark, a door, a portrait, takes the right. Three
     screens once walked, left, right, centre, and the walk was the one thing
     on the page a reader had to learn. */
  .s1 .blk,.s2 .blk,.s3 .blk{max-width:60ch;margin:0}
  .s1 .tail,.s2 .tail,.s3 .tail{max-width:58ch}
  .s3 .cards{margin-top:clamp(34px,6vh,60px)}
  /* Book weight, not semibold: on paper the display line carries by size
     and the words in colour carry by colour, so nothing needs to be bold. */
  body.sheet .lead{font-size:clamp(30px,3.3vw,46px);font-weight:400;line-height:1.1;
    letter-spacing:-0.014em;max-width:24ch}
  /* Twenty six characters is the right measure beside the profile on the
     home, where the opening line is one sentence. The framework's own page
     opens on a definition three times that long, and at twenty six it came
     down the column in five short lines with the room beside it going
     spare. */
  body.sheet .imx .lead{max-width:34ch}
  body.sheet .tail{font-size:clamp(17px,1.25vw,18px);line-height:1.6;color:#2A2F36}
  body.sheet .screen b.warm,body.sheet .screen b.cool,
  body.sheet .screen b.gilt,body.sheet .screen b.fresh{
    color:var(--acc);font-weight:400}
  /* The front has no index of screens: it is fixed to the left margin, which
     is where the profile is drawn, and it would sit on the face. The framework
     pages keep theirs, and only need the marks lifted off the ground, since the
     line colour they borrow is almost invisible here. */
  body.sheet .rail a{color:rgba(22,32,43,.30)}
  body.sheet .rail a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
    text-decoration-thickness:1.5px;text-underline-offset:.2em}
  /* A door is a door on either page. It began as the quieter of the two,
     because five in a row are carried by the set and a reader is choosing
     among equals; the one that stands alone had to be given weight, and once
     the two were side by side the quiet one read as the unfinished one. The
     shape, the type and the structure are what make them the same object, so
     what carries the weight is the edge, the ground, and the line that says
     what is behind. */
  /* On the sheet pages the door is a row like the others: no fill, no frame,
     a rule that darkens under the pointer. */
  body.sheet .card5{background:none;border-color:var(--line)}
  .card5.d2{padding:18px 0 20px}
  .card5.d2 .c-n{font-size:22px}
  .card5.d2 .c-b{font-size:15.5px}
  /* The figures of a record, under the sentence that says what it is: the
     numbers large in ink, the labels small, no box. They are content, and
     were said only at the foot of the page. */
  .figs{display:flex;flex-wrap:wrap;gap:22px 36px;margin:28px 0 8px;padding:0}
  .figs div{display:flex;flex-direction:column-reverse;margin:0}
  .figs dd{margin:0;font-size:32px;font-weight:400;line-height:1;color:var(--ink);
    font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .figs dt{margin:8px 0 0;font-family:"Source Serif 4",Georgia,serif;font-size:11px;
    font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6B6B68}
  body.sheet .card5 .c-f,body.sheet .card5 .c-a{color:#6B7280}
  body.sheet .card5:hover,body.sheet .card5:focus-visible{
    background:none;border-bottom-color:var(--ink);box-shadow:none;color:var(--ink)}
  body.sheet .card5:hover .c-n,body.sheet .card5:focus-visible .c-n{color:var(--ink)}
  body.sheet .card5:hover .c-b,body.sheet .card5:focus-visible .c-b{color:var(--ink)}
  body.sheet .card5:hover .c-f,body.sheet .card5:focus-visible .c-f{color:var(--ink)}
  body.sheet .card5:hover .c-a,body.sheet .card5:focus-visible .c-a{color:var(--ink)}

  /* The drawing's four fills, inverted for the ground. On paper the ramp runs
     from the accent down to almost white, so the emptiest state is the quietest
     thing on the page. Carried onto navy unchanged it turned over: the
     jurisdictions nobody has worked in became the brightest shapes on the map,
     and the record read as full. Here the order is restored against the new
     ground, brightest for what binds and nearest the ground for what is out of
     scope, with the same four steps and the same meanings. */

  /* The close of the page is centred and wide, the way the close of the front
     is: it stops being a column beside a picture and becomes a statement.

     These four went out with the portrait. Putting the circle back was written
     as a cut between two landmarks in the sheet, and what sat between them was
     not only the rules being removed. A slice takes what it is given. */
  body.sheet .about2 .stext{max-width:64ch}
  body.sheet .about2 .more p{max-width:62ch}
  body.sheet .about2 .disclaimer{max-width:56ch}

  /* The framework's index, and only it. Written as body.sheet .screen the
     same rule reached the front page, centred the two screens that are set
     against a drawing, and undid the thing they were built for.

     Each of the first two screens now stands beside the door it argues for:
     the definition of a pillar next to the way into the pillars, the scope of
     the record next to the map of it. The closing screen has no door and is
     centred, which is the shape the front page closes in.

     What is not centred anywhere is the text inside a block: a centred
     paragraph gives every line a different starting point, and that price is
     worth paying for a closing statement of two lines and not for ten of
     definition. */
  .imx .blk{max-width:none}
  /* The argument on the axis, the door to its right, on every screen: the
     sides used to alternate, and the alternation was a walk the reader had
     to follow. */
  .ipair,.ipair.rev{display:grid;gap:clamp(26px,3.4vw,56px);align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .ipair .icd{order:2}
  /* A door here is one cell of a two cell row, not two of six. It borrows the
     look of the front page's doors and with it their span, which put it across
     the whole width and left the argument in a three hundred pixel gutter. */
  .icd{grid-column:auto;display:flex;flex-direction:column;align-self:center}
  /* Two paragraphs in one block are two paragraphs. The screens used to hold
     one each, so the class carried no space under it and the join between the
     two that are now one screen closed up. */
  .imx .tail + .tail{margin-top:1.05em}
  /* Three terms defined in a row are three things, and a paragraph that holds
     them makes the reader find the seams. The mark is a rotated square rather
     than a character, for the same reason the arrow beside a source is drawn:
     the diamond that would say this is not in either face the site loads. */
  .defs{list-style:none;margin:1.05em 0 0;padding:0;
    font-size:clamp(17px,1.42vw,19.5px);line-height:1.64;color:#2A2F36}
  .defs li{position:relative;padding-left:24px;margin:0 0 .7em}
  .defs li:last-child{margin-bottom:0}
  .defs li::before{content:"";position:absolute;left:2px;top:.62em;
    width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
  .defs b{color:var(--ink);font-weight:600}
  /* An area of the work is a plate in a register: its number in the margin,
     its name, what it covers, and under a small label what it leaves behind.
     No frame and no drawing. Two columns of framed cards read as a matrix
     that had to be read to be told apart; one column of plates with air
     between them reads as ten things, and the number says which. */
  .wcards{max-width:820px;margin:clamp(36px,5vh,56px) 0 0;
    border-top:1px solid var(--line)}
  .wplate{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:28px;
    padding:clamp(36px,4.6vh,56px) 0 clamp(40px,5vh,60px);border-bottom:1px solid var(--line)}
  /* Large and pale: the one thing on the plate that is structure and not
     content, so it takes the colour the structure takes. */
  .wnum{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:44px;font-weight:400;
    line-height:.9;letter-spacing:-.02em;color:#C6C6C1;font-variant-numeric:tabular-nums}
  .wbody{min-width:0}
  .wn{margin:0 0 12px;font-size:26px;font-weight:600;letter-spacing:-.014em;
    color:#111417;line-height:1.18}
  /* Content reads in ink. The grey the site gives to a caption was carrying
     the description of every area, which is what made the plates a haze. */
  .wd{margin:0 0 24px;font-size:17.5px;line-height:1.6;color:#2A2F36;max-width:58ch}
  .wmk{margin:0}
  .wml{margin:0 0 10px;font-family:"Source Serif 4",Georgia,serif;font-size:11px;
    font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#6B6B68}
  .wma{list-style:none;margin:0;padding:0;
    font-size:15.5px;line-height:1.6;color:#2A2F36}
  .wma li{position:relative;padding-left:14px;margin:0 0 4px}
  .wma li:last-child{margin-bottom:0}
  .wmr{margin:18px 0 0;font-family:"Source Serif 4",Georgia,serif;font-size:11px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;color:#6B6B68}
  .wmr a{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:400;
    letter-spacing:.04em;color:#6B6B68;text-decoration:none;margin-right:6px;
    border-bottom:1px solid var(--line)}
  .wmr a:hover{color:var(--ink)}
  .wma li::before{content:"";position:absolute;left:1px;top:.6em;width:4px;height:4px;
    background:currentColor;transform:rotate(45deg);opacity:.7}
  @media (max-width:700px){
    .wplate{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:30px 0 34px}
    .wnum{font-size:34px}}

  /* The same axis as the front: the column at the left edge on every
     screen, and the register under the second starting on the same edge. */
  .wk1 .stext,.wk2 .stext,.wk3 .stext{max-width:60ch;margin:0}
  body.sheet .screen.wk3 .lead{max-width:24ch}
  @media (max-width:900px){
    .wk1 .stext,.wk2 .stext,.wk3 .stext{max-width:none;margin:0}
  }
  .defs.bare li{padding-left:0;margin-bottom:.5em}
  .defs.bare li::before{display:none}
  .defs + .tail{margin-top:1.05em}
  @media (max-width:1050px){
    .ipair,.ipair.rev{grid-template-columns:minmax(0,1fr)}
    .ipair .icd,.ipair.rev .icd{order:2;min-height:0}}

  /* A rule and the words, and no frame around them: a frame made the
     label a control, and a label that looks like a control gets pressed. */
  /* The words in the darker cut, because at eleven and a half pixels they
     are text; the rule in the brass itself, because it is a line. The
     eyebrow and the word set in colour on a screen are the one accent. */
  .tag{display:inline-flex;align-items:center;gap:10px;
    margin:0 0 30px;font-family:"Source Serif 4",Georgia,serif;font-size:11.5px;
    font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--accent)}
  .tag .core{display:block;width:18px;height:1.5px;flex:0 0 auto;
    background:currentColor;color:var(--acc)}

  @media (max-width:1050px){
    .blk,.s1 .blk,.s2 .blk{margin-left:0;max-width:none}
    .s1 .tail,.s2 .tail{max-width:none}
}
  @media (max-width:430px){
    body.sheet .lead{font-size:25px;max-width:none}
    body.sheet .tail{font-size:16.5px}}