/* Written by build.py. Edit the settings there and run
   it again, or stop running it and take this file over
   by hand — but not both, or your edits are overwritten. */

 :root {
   --ink:#0e4c92;                 /* type */
   --grey:#5566c9;            /* numbers, metadata */
   --faint:#8d99dd;           /* footnotes */
   --sel:#0e4c92;              /* the selected bar */
   --hover:rgba(0,0,0,.055);
   --pattern:#0e4c92;         /* the automaton */
   --paper:#e3e3e1;             /* the background */
   --text:"Helvetica Neue",Helvetica,Arial,sans-serif;
   --fs:13.0px;                 /* the one type size */
   --fw:300;                   /* the one weight */
   --mono:calc(var(--fs) * 0.92);
   --m:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
   --shot-max:432px;
 }

 /* letter-spacing:normal everywhere — nothing is tracked out */
 * { box-sizing:border-box; letter-spacing:normal; }
 html,body { background:var(--paper); }
 body { margin:0; color:var(--ink);
        font:var(--fw) var(--fs)/1.2 var(--text);
        -webkit-font-smoothing:antialiased; }
 /* z-index:2 puts the text above the back layer and below the front one */
 /* No padding at the top: the bar is the first thing, and it starts flush
    against the top of the window so that sticking it there moves nothing. */
 /* the top padding clears the fixed bar */
 /* the top padding clears the fixed bar. It is a fixed value, so the page
    never re-lays-out after loading and nothing can shift under the cursor. */
 .wrap { position:relative; z-index:2; max-width:1760px; margin:0 auto;
         padding:4.4rem 1.4rem 3rem; }

 /* the masthead: pre keeps the spaces and line breaks exactly as written */
 /* PYRAMID_PX sets the character size; the line height is 0.8 of it, which
    is what compresses the rows and gives the pyramid its build. */
 pre.mast { font-family:var(--m); font-size:10px;
            line-height:8.0px; margin:0;
            white-space:pre; user-select:none;
            color:var(--pattern); letter-spacing:0; }

 /* The pyramid's column, down the left of the page.

    Holding it in place takes two rules, not one. The column is stretched to
    the full height of the row (align-self:stretch) so that there is somewhere
    for the pyramid to travel; without that the column is only as tall as the
    pyramid itself and sticky has no room to work in. The pyramid inside is
    then pinned, offset by the height of the bar above it. */
 /* min-width:0 lets the column shrink below the figure's natural
    width; without it the pre would push the page wider than the
    screen on a phone. */
 /* The figure's column. It is pinned to the window rather than to the list,
    and given the height of the window below the bar, with the drawing set in
    the middle of it. So it holds the same place however long the list is and
    whether or not a section has been opened. */
 /* The column is stretched to the whole height of the row, and the box
    inside it is what is pinned. That matters: were the column itself pinned
    and given the height of the window, it would have no room to travel
    whenever the list was shorter than the window, and the figure would
    scroll away with the page. Stretched, there is always somewhere to go. */
 /* The figure sits at the top of its column and travels with the page. It
    was fixed to the window for a while and pinned below the bar before that;
    both went wrong in their own way — pinned, it drifted whenever the column
    was a scrolling box or shorter than the page. Plain and in the flow, it
    simply stays where it is put. */
 /* overflow:hidden is a backstop only. The drawing is sized to the column
    above; this makes certain that a rounding error can never put it over the
    edge of a phone screen. */
 .pyr { align-self:start; min-width:0; overflow:hidden; }
 .figbox { }

 /* A line under the figure naming the rule it was drawn with. It is only
    shown on a phone, where the footer sits a long way below everything. */
 .figcap { display:none; font-family:var(--m); font-size:var(--mono);
           color:var(--faint); margin-top:.4rem; }
 /* --barh is the bar's height, measured in the browser. The pyramid starts
    immediately below the bar and pins at exactly that height, so it too
    holds still from the first pixel of scrolling. */

 .panel > *:first-child, #idx > *:first-child { margin-top:0; }

 /* the line with the name and the menu */
 /* The name and the menu, locked to the top of the window.

    It begins at y=0 and sticks at y=0, so nothing shifts when the page first
    moves — the usual jump comes from an element that starts lower than where
    it eventually pins. The spacing above and below is padding rather than
    margin, so it counts as part of the bar's own height; --barh is measured
    from that and used to place the pyramid directly beneath. */
 /* position:fixed rather than sticky: a fixed bar has no starting position
    to fall from, so it cannot shift by the height of whatever sits above it
    when the page first moves. The page is given a top padding equal to the
    bar's height instead, measured in the browser as --barh. */
 .bar { position:fixed; top:0; left:0; right:0; z-index:5;
        height:4.4rem; background:var(--paper); }
 /* Inside the bar, the same three columns as the page below, so that the
    menu begins exactly where the index numbers do. */
 .barin { max-width:1760px; margin:0 auto;
          height:100%; padding:0 1.4rem;
          display:grid; grid-template-columns:38.2% minmax(0,1fr) 440px;
          gap:1.2rem; align-items:center; }
 .nav { margin-left:.35rem; }   /* line the menu up with the row's marker */
 .nm { font-size:17.0px; }
 .nav { font-family:var(--text); font-size:14.0px; }
 .nav a, .nav b { margin-right:.9em; }
 .nav a { color:var(--grey); text-decoration:none; }
 .nav a:hover { color:var(--ink); text-decoration:underline; }
 .nav b { font-weight:var(--fw); color:var(--ink); text-decoration:underline; }

 /* the two columns. COLUMN_SPLIT sets the first number. */
 /* three columns: the pyramid, the index, the panel */
 /* three columns: the figure, the index, the panel.
    The figure takes the golden section; the panel is held at a fixed width;
    the list takes whatever remains. */
 .cols { display:grid;
         grid-template-columns:38.2% minmax(0,1fr) 440px;
         gap:1.2rem; align-items:start; }

 /* one row of the index: toggle, number, title, right-hand column */
 .row { display:grid; grid-template-columns:1.1em 3.7em 1fr auto;
        gap:.3rem .6rem; align-items:baseline; padding:.22rem .35rem;
        cursor:pointer; outline:none; font-size:var(--fs); }
 .row:hover { background:var(--hover); }
 /* the work currently open in the panel */
  .row.on .tt { text-decoration:underline;
               text-underline-offset:.22em;
               text-decoration-thickness:from-font; }
 .row.on .cd { color:var(--ink); }
 .row:focus-visible { box-shadow:inset 0 0 0 1px var(--ink); }
 .row.ph .tt,.row.ph .cd { color:var(--faint); font-style:italic; }
 .row.inactive { cursor:default; }
 .row.inactive:hover { background:none; }

 .cd,.rt,.tg { font-family:var(--m); font-size:var(--mono); color:var(--grey); }
 .tt { font-size:var(--fs); }
 .yin { display:none; }   /* the year inside the title: phone only */
 /* a heading within a section, e.g. Reviews and Texts under 09.0 */
 .subgrp { margin-top:1.1rem; }
 .subgrp .tt { font-style:italic; text-transform:none; }
 .grp { margin-top:1.6rem; }
 .grp.late { margin-top:0.2rem; }
 /* the first section sits flush with the top of the figure beside it */
 /* The first section has no space above it, so that it starts level with the
    figure beside it. Its padding is left alone: taking that away as well made
    the row shorter than every other, and the gap below it correspondingly
    smaller. */
 #idx > .row.grp:first-child { margin-top:0; }          /* the space above each section */
 .grp .cd { color:var(--ink); }
 .grp { cursor:pointer; }
  .grp .tt { text-transform:uppercase; }       /* section numbers sit in full ink */
 .sub .tt { padding-left:0; }  /* sub-works step inward */
 .rt { text-align:right; white-space:nowrap; }
 .kids.hid { display:none; }
 .kids { margin-bottom:0.9rem; }   /* air under an opened section */
 .kids .kids { margin-bottom:0; }          /* but not within one */          /* a folded-shut section */

 /* the panel on the right. position:sticky keeps it in view while the list
    scrolls past it. */
 /* The panel is pinned under the bar and given its own scrollbar. Because it
    is a scrolling box of its own, the wheel moves the panel while the cursor
    is over it and the list while the cursor is over the list — the two
    columns scroll independently. */
 .panel { position:sticky; top:4.4rem; max-width:none;
          max-height:calc(100vh - 4.4rem - 1.2rem);
          overflow-y:auto; overscroll-behavior:contain;
          scrollbar-width:thin; padding-right:.5rem; }
 /* the panel's own pattern is a normal picture in the page, not a floater */
 .panel .pat svg { position:static; }
 .pat { cursor:pointer; display:block; line-height:0; position:relative; }
 .pat svg { width:100%; height:auto; display:block; }
 .pat::after { content:"click to recompute"; position:absolute; right:0;
               bottom:4px; font-family:var(--m); font-size:var(--mono);
               color:var(--paper); background:var(--ink); padding:2px 5px;
               opacity:0; transition:opacity .15s; }
 .pat:hover::after { opacity:1; }
 /* PHOTO_TOP sets the first photograph down from the pattern; PHOTO_GAP is
    the space between them when there are several. */
 .shot { margin-top:2.8rem; }
 /* A landscape picture fills the column; an upright one is held to
    --shot-max and comes out narrower rather than taller. Nothing is cropped. */
 .shot img,.shot video { max-width:100%; max-height:var(--shot-max, none);
                         width:auto; height:auto;
                         display:block; margin:0 0 0.55rem; }
 .shot img { cursor:zoom-in; }
 .shot > :last-child { margin-bottom:0; }

 /* the carousel: one picture at a time, with a pair of arrows under it */
 .car { position:relative; }
 .car img, .car video { display:none; }
 .car img.on, .car video.on { display:block; }
 /* the large view of a photograph */
 .lightbox { position:fixed; inset:0; z-index:20; display:none;
             align-items:center; justify-content:center;
             background:var(--paper); padding:2rem; cursor:zoom-out; }
 .lightbox.on { display:flex; }
 .lightbox img { max-width:1200px; max-height:calc(100vh - 4rem);
                 width:auto; height:auto; display:block; }

 .carnav { display:flex; align-items:center; gap:.8rem;
           margin-bottom:1.1rem;
           font-family:var(--m); font-size:var(--mono); color:var(--grey); }
 .carnav button { background:none; border:0; cursor:pointer; font:inherit;
                  color:var(--ink); padding:.1rem .35rem; }
 .carnav button:hover { text-decoration:underline; }
 .carnav .count { margin-left:auto; }
 .empty { margin-top:.6rem; font-family:var(--m); font-size:var(--mono);
          color:var(--faint); line-height:1.8; }
 .empty b { font-weight:var(--fw); text-decoration:underline; }
 .pt { font-size:var(--fs); margin:.7rem 0 .05rem; line-height:1.4; }
 /* the writing under the photograph */
 .tx { margin:.7rem 0 0; max-width:38em; }
 .tx p { margin:0 0 .7em; }
 .pc,.rl { font-family:var(--m); font-size:var(--mono); color:var(--grey); }
 .rl { margin-top:.4rem; color:var(--faint); }
 dl { margin:.9rem 0 0; }
 dl div { display:grid; grid-template-columns:6em 1fr; gap:.6rem;
          padding:.08rem 0; }
 dt { font-family:var(--m); font-size:var(--mono); color:var(--grey); }
 dd { margin:0; font-size:var(--fs); }

 .info p { max-width:46em; margin:0 0 1em; }
 .info dl div { grid-template-columns:8em 1fr; }

 /* the contact sheet: as many thumbnails per row as will fit */
 .sheet h2 { font-size:var(--fs); font-weight:var(--fw); margin:2.2rem 0 .2rem; }
 /* The contact sheet.

    Six to a row, each photograph the same width and its own height. Within a
    row the pictures stand on a common line: an upright one reaches further up
    rather than pushing its caption down, and every caption in the row begins
    at the same height.

    That is done by giving each picture and each caption its own place in the
    grid — build.py works out the row and column and writes them in. A row
    of pictures takes the height of the tallest among them, and align-self:end
    stands the shorter ones on its floor. */
 .grid { display:grid;
         grid-template-columns:repeat(6, minmax(0,1fr));
         column-gap:8.2%; row-gap:.5rem; margin-top:.8rem; }
 .grid figure { display:contents; }      /* the placement is on its parts */
 .grid .cell { align-self:end; }
 .grid img { width:100%; height:auto; display:block; }
 .grid figcaption { font-family:var(--m); font-size:var(--mono);
                    color:var(--faint); margin-bottom:1.4rem;
                    word-break:break-word; align-self:start; }

 .foot { margin-top:2.4rem; font-family:var(--m); font-size:var(--mono);
         color:var(--faint); display:flex; justify-content:space-between;
         gap:1rem; flex-wrap:wrap; }
 .foot a { color:inherit; }

 /* on a narrow screen the two columns become one, panel on top */
 /* not enough room for three columns: index and panel share the width */
 /* Between these widths the three columns are still there, but the list is
    squeezed: the figure keeps its share and the panel its fixed width, so
    what remains is narrow enough to break titles onto a second line. Giving
    the figure and the panel a little less holds the entries on one line. */
 @media (max-width:1560px) {
   .cols, .barin { grid-template-columns:32% minmax(0,1fr) 360px; }
   :root { --shot-max:352px; }
 }

 /* On a smaller window the figure is not dropped — it simply gets a smaller
    column, and the drawing scales to fit it. Below 1040px there is no room
    for three columns at all, so they stack with the figure on top. */
 @media (max-width:1240px) {
   .cols, .barin { grid-template-columns:minmax(0,30%) minmax(0,1fr); }
   .panel { grid-column:1 / -1; position:static; margin-top:1.6rem; }
 }
 /* ---- the phone ------------------------------------------------------
    One column. The figure runs across the top at its own smaller size, the
    list below it, and the panel below that — it cannot sit beside anything
    on a screen this narrow, and pinning it would eat the whole screen.
    Rows are given more height so they can be tapped rather than clicked. */
 @media (max-width:700px) {
   :root { --fs:14.0px; }
   .wrap { padding-left:1rem; padding-right:1rem; }
   .cols { grid-template-columns:minmax(0,1fr); gap:1.2rem; }
   .barin { padding:0 1rem; }

   /* PHONE_FIGURE_SCALE as a share of the page. Fixing the column here,
      rather than sizing the drawing, is what keeps the figure in proportion
      to the list without the two sizes chasing each other. */
   .pyr { align-self:auto; padding-bottom:0; margin-bottom:.4rem;
          width:100%;  }
   .figbox { position:static; height:auto; display:block;
             left:auto; width:auto; }
      /* nothing pinned on a phone */

   /* On a phone the three columns become one, and their order changes.
      The panel is first, the figure second, the list third — but the panel
      is not shown until a work has been tapped, so the page opens on the
      figure. `order` sets the sequence without moving anything in the file. */
   /* align-items:stretch matters here. The desktop rule above sets it to
      "start", which in a column of flex items governs their width: each
      would then be only as wide as its own contents, so a panel holding a
      short title and no photograph would come out narrower than the screen
      and the pattern above it with it. Stretch holds every one to the full
      width, whatever it contains. */
   .cols { display:flex; flex-direction:column; align-items:stretch; }
   .panel { order:1; display:none;
            position:static; max-width:none; max-height:none;
            overflow:visible; margin:0 0 1.4rem; padding-right:0; }
   .panel.open { display:block; }
   .pyr { order:2; }
   #idx { order:3; }

   /* When a work is tapped the panel becomes a sheet over the page. It is
      its own scrolling box, and the page behind it is held still. */
   .panel.sheet { position:fixed; inset:4.4rem 0 0 0; z-index:6;
                  background:var(--paper); margin:0;
                  padding:1rem 1rem 3rem; overflow-y:auto; }
   /* Its own line at the top right of the sheet, and sticky so it stays
      reachable however far the content is scrolled. Not floated: a float
      would let the pattern below slide up underneath it. */
   /* the button that puts the content away again */
   .panel .close { display:block; margin:0 0 .5rem auto;
                   background:var(--paper); border:0; cursor:pointer;
                   font:inherit; color:var(--ink); padding:.15rem .1rem;
                   text-decoration:underline; }
   .sheet .close { position:sticky; top:0; z-index:3;
                   display:block; margin:0 0 .5rem auto;
                   background:var(--paper); border:0; cursor:pointer;
                   font:inherit; color:var(--ink); padding:.15rem .1rem;
                   text-decoration:underline; }
   body.locked { overflow:hidden; }

   .row { padding-top:0.28rem; padding-bottom:0.28rem;
          grid-template-columns:1.1em 3.4em minmax(0,1fr); }
   .grp { margin-top:1.1rem; }
   .grp.late { margin-top:0rem; }
   /* The year is left off on a phone: a narrow row reads better as a
      number and a title alone. It is still shown on a wider screen. */
   .rt { display:none; }
   .yin { display:inline; }   /* the year moves in after the title instead */
   .figcap { display:block; }
   .foot { flex-direction:column; gap:.3rem; }
   /* the contact sheet stacks: the written-in rows and columns are released */
   .grid { grid-template-columns:minmax(0,1fr); }
   .grid figure { display:block; margin-bottom:1.4rem; }
   .grid .cell, .grid figcaption { grid-column:auto; grid-row:auto; }
   .grid img { width:100%; }
 }

 /* a touch screen: nothing hangs on hover, so the labels that appear on
    hover are simply shown */
 @media (hover:none) {
   .pat::after { opacity:.55; }
 }

 @media (max-width:1040px) {
   .cols, .barin { grid-template-columns:minmax(0,1fr); }
   .barin { display:flex; gap:1.4rem; align-items:baseline; }
   .nav { margin-left:0; }
   .panel { position:static; order:-1; }
   .row { grid-template-columns:1.1em 3.7em 1fr; }
   .rt { grid-column:3; text-align:left; }
 }