/* Light and Shade: the page of one work (templates/entry.html). Loaded after main.css, on project pages only.

   The page is a sheet in two grounds. Photographs stand on shade, words on light.
   Wide screens share one grid of twelve columns with a 16px gutter inside the 1120px page. One axis, a third
   of the way across (the start of column 5), runs down the whole sheet: the colophon stands left of it and
   the sentence right of it; so do a member's title and its sentence; the firm's own text starts on it; so do
   the titles of the next and previous work.
   The photographs use the same columns: 12, 9, 8 + 4, 6, 5. Every photograph starts or ends on the page's edge.
   Phone first: the phone layout is the plain rules and the block "phones only".

   The words stand on the steps of the scale (main.css). On the paper: --s5 from the photographs' edge to the
   first line under it (the title; the fold of the firm's text); a section's step (--s6, from 720px --s7) above
   every ink rule and at the end of a section. Leans on main.css for the fold (.fold, .views-n), the type of a
   ruled row (.work-turn-word, .work-turn-title), the heading of a member (.work-member-title), the sentence
   and the arrow link (.go). */

.work {
  --gap: 4px;                                    /* between photographs */
  --axis: calc((100% + 16px) / 3);               /* where column 5 starts */
}

/* ---------- lead photograph ----------
   --w is its pixel width, --r its proportion, --at its focus point. A landscape lead runs from edge to edge on
   a phone, whole. An upright one stands inside the margin, on the title's left edge, and stops at about two
   thirds of the screen, so the title is on the first screen too; where the whole measure costs it only a little
   more height (up to 72 % of the screen) it takes the measure, so its right edge is on the margin or clearly
   short of it (the max() is the switch: 72 % of the screen less the measure, times a large number).
   The dark frame lies over the lit one and lifts away by itself. The fade is the 2.4 s it always was; it starts
   the moment both frames are there (no waiting time) and it moves from its first instant. */

.work-top { background: var(--shade); }
.work-lead { display: flex; flex-direction: column; align-items: center; }
.work-lead-frame { position: relative; width: min(100%, var(--w)); overflow: hidden; background: var(--up); }
.work-lead-frame > a { display: block; }
.work-lead-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--at); }
.work-top-upright .work-lead { padding: var(--gutter); align-items: flex-start; }
.work-top-upright .work-lead-frame { width: min(100%, var(--w), max(64vh * var(--r), (72vh * var(--r) - 100%) * 999)); }
@supports (height: 1svh) {
  .work-top-upright .work-lead-frame { width: min(100%, var(--w), max(64svh * var(--r), (72svh * var(--r) - 100%) * 999)); }
}

.work-lead-frame .lights-off {
  position: absolute; inset: 0; pointer-events: none; will-change: opacity;
  animation: lights-on 2.4s cubic-bezier(.3, .2, .2, 1) forwards;
}
@keyframes lights-on { to { opacity: 0; } }
/* with script: the lit photograph waits for the dark frame, and the fade waits for the lit photograph
   (the images say so themselves, in entry.html; site.js lets go of both when the page has loaded) */
.js .lights:not(.lit) .lights-off, .js .lights:not(.dim) .lights-off { animation-play-state: paused; }
.js .lights:not(.dim) .work-lead-frame > a img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lights-off { display: none; }                         /* without motion there is no fade: the dark frame is taken away */
  .js .lights .work-lead-frame > a img { opacity: 1; }   /* and the lit photograph does not wait for it */
}


/* ---------- title block ----------
   The title over an ink rule; under the rule the colophon, then the sentence. Its spaces are steps of the scale,
   and each relation has one value wherever it occurs on the page: --s4 from a title to its rule, --s3 from an
   ink rule to the first line under it, --s3 from a heading to its colophon, --s4 from a colophon to the sentence. */

.work-head { padding-block: var(--s5) var(--s6); }
.work-title { padding-bottom: var(--s4); border-bottom: 1px solid var(--fg); }

/* The colophon, one form at every width: the year in the year column of the record (a label, in ink), place and
   scope hanging beside it one under another (second lines: regular, quiet). A line that runs on stays with its
   own: the lines of one fact are closer than two facts. */
.work-facts {
  display: grid;
  grid-template-columns: var(--col-year) minmax(0, 1fr);
  column-gap: var(--gap-year);
  padding-top: var(--s3);
  font: 400 var(--size-meta)/var(--lh-list) var(--sans);
  font-variant-numeric: lining-nums;
  color: var(--quiet);
}
.work-when { grid-column: 1; font-weight: 500; color: var(--fg); white-space: nowrap; }
.work-what { grid-column: 2; display: grid; row-gap: var(--s1); }
.work-what p { text-wrap: balance; }
.work-sentence { padding-top: var(--s4); }
/* a work with nothing under its title: no rule of its own. The ink rule of its first member stands where the
   title's would, at the same distance, and is the one line. */
.work-top-bare .work-head { padding-bottom: var(--s4); }
.work-top-bare .work-title { padding-bottom: 0; border-bottom: 0; }

/* ---------- a member of a series: an ink rule, then its own small title block ----------
   On a phone, one under another: the title, its colophon, its sentence, the firm's text folded. The block stands
   close over its photographs (--s4), a section's distance under the ones before it. */

.work-member { padding-block: var(--s6) var(--s4); }
.work-top + .work-member { padding-top: 0; }
.work-member .work-grid { padding-top: var(--s3); border-top: 1px solid var(--fg); }
/* the first member stands on the same paper as the title block: the title's ink rule has opened the page, and
   this one only separates (where the title has no rule of its own, it stays the ink rule) */
.work-top:not(.work-top-bare) + .work-member .work-grid { border-top-color: var(--rule); }
.work-member-title { text-wrap: balance; overflow-wrap: anywhere; }   /* its type is the heading inside a page (main.css) */
/* the sentence and, a label's distance under it, the fold. The sentence is one short statement beside or under
   a heading: its two lines are evened out, so none ends on two words ("… / for depth.") */
.work-member-text { display: grid; row-gap: var(--s3); padding-top: var(--s4); }
.work-member-text .sentence { text-wrap: balance; }

/* The firm's text is the site's fold (main.css), in ink once open. Only its words open it, not the line's whole
   width. */
.work .fold > summary { width: fit-content; }
.work .fold > .prose { color: var(--fg); }

/* ---------- photographs ----------
   A row (.set) is one photograph, two or three. --w is a photograph's pixel width and --r its proportion; --nat
   is the width at which the photographs of a row, at one height, are all at their own size, and --seams the
   gaps between them. On a phone a photograph stops at two thirds of its pixels; on wider screens it may grow a
   twelfth past them (960 px fill the 1040 px page) and no further. The widths are in the blocks below. */

.work-photos .wrap { padding-inline: 0; }
.shot { display: flex; flex-direction: column; }
.shot .zoom { overflow: hidden; background: var(--up); }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* two or three that stay side by side on a phone; the proportion is the share of the width, so the heights agree */
.set-keep { display: flex; align-items: flex-start; gap: var(--gap); }
.set-keep > .shot { flex: var(--r) 1 0px; min-width: 0; }
.set-duo { --seams: var(--gap); }
.set-trio { --seams: calc(2 * var(--gap)); }

/* "more photographs 12": the site's fold (main.css), a line on the shade --s4 under the last photograph shown,
   on the photographs' left edge. It keeps none of the fold's own margin above: the photographs' margins are
   reckoned without it, shut or open. */
.work-more { margin-top: 0; }
.work-more:not([open]) { margin-top: calc(var(--s4) - var(--fold-pad)); }
.work-more > summary { margin-left: var(--gutter); }
/* once open the line is out of sight, but it keeps the keyboard's place (the next Tab is the first new photograph) */
.work-more[open] > summary { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
.work-note { padding: var(--s3) var(--gutter); font-size: var(--size-meta); color: var(--quiet); }

/* ---------- the firm's own description (a page of one work: after the photographs) ----------
   One line on the paper, --s5 under the photographs' edge as the title is under the lead. The section ends as
   a section does, with padding of its own, so the fold's lower tap air lies inside it. */

.work-text { padding-block: var(--s5) var(--s6); }

/* ---------- next, previous, back to the record ----------
   Two rows as in the record (main.css sets the type of a ruled row; works.css has the same measures): the word in
   the year column, the title over its year, the cover hung from the title's cap line. An ink rule opens them,
   always a section's distance under what is above it. */

.work-pager { padding-block: var(--s6) calc(var(--s6) - var(--s3)); }   /* the link's own tap air counts into the end */
.work-text + .work-pager { padding-top: 0; }
.work-turn {
  display: grid;
  grid-template-columns: var(--col-year) minmax(0, 1fr) 52px;
  column-gap: var(--gap-year);
  align-items: baseline;
  padding-block: 17px 18px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.work-turn:first-child { border-top: 1px solid var(--fg); }
.work-turn-word { color: var(--quiet); }
.work-turn-text { display: grid; row-gap: var(--s1); min-width: 0; }
.work-turn-year { font: 500 var(--size-meta)/var(--lh-list) var(--sans); font-variant-numeric: lining-nums; color: var(--quiet); }
.work-turn-thumb { align-self: start; width: 52px; height: 65px; margin-block: 5px var(--s1); overflow: hidden; background: var(--up); }   /* the cover crop is 4:5 */
.work-turn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-pager .go { margin-left: var(--hang); }   /* under the titles */
@media (max-width: 339px) {
  /* too narrow for word, title and cover side by side: the word goes above the title, as the year does in the record */
  .work-turn { grid-template-columns: minmax(0, 1fr) 52px; grid-template-rows: auto 1fr; align-items: start; }
  .work-turn-word { grid-area: 1 / 1; }
  .work-turn-text { grid-area: 2 / 1; }
  .work-turn-thumb { grid-area: 1 / 2 / 3 / 3; }
}

@media (hover: hover) {
  .work-turn:hover .work-turn-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--under); }
}

/* ---------- phones only ----------
   The shade shows above and below every block of photographs, so a white interior never runs into the paper.
   A phone has two device pixels to one: a photograph stops at two thirds of its own pixels (--fit).

   A photograph, or a row that stays side by side, runs from edge to edge. One that cannot reach both edges at
   that size and a twelfth, the allowance of the wide screens, stands inside the margin instead, from its left
   edge: --air is that margin, the page's or nothing (the clamp is the switch: it falls from the one to the other
   as soon as the photograph reaches past the edges). Inset has no other meaning on a phone.
   Inside the margin it takes the measure (--room) or its own size; one that would stop within a twelfth of
   the measure takes the measure, so no edge stops just short of the margin or of the screen.
   The seam and the air are margins of the photographs themselves, and a row that stacks is a plain block, so
   the margins of neighbours fall into one: 4 px between two that run to the edges, the margin's 20 px above
   and below one that does not. */

@media (max-width: 719px) {
  .work-photos { padding-block: var(--gutter); }
  .shot, .set-keep {
    --air: clamp(0px, (100% - var(--fit) * 13 / 12) * 999 + var(--gutter), var(--gutter));
    --room: calc(100% - 2 * var(--air));
    width: min(var(--room), max(var(--fit), (var(--fit) * 13 / 12 - var(--room)) * 999));
    margin: max(var(--gap), var(--air)) var(--air);
  }
  .shot { --fit: calc(var(--w) / 1.5); }
  .set-keep { --fit: calc(var(--nat) / 1.5 + var(--seams)); }
  .set-keep > .shot { width: auto; margin: 0; }

  /* An upright alone on its line is too tall for the screen at full width. It always stands inside the margin
     and stops at about two thirds of the screen, as an upright lead does, with the same allowance (72 %)
     for taking the whole measure. */
  .shot-up {
    --air: var(--gutter);
    --room: min(100% - 2 * var(--gutter), var(--fit));
    width: min(var(--room), max(64vh * var(--r), (72vh * var(--r) - var(--room)) * 999));
  }
  @supports (height: 1svh) {
    .shot-up { width: min(var(--room), max(64svh * var(--r), (72svh * var(--r) - var(--room)) * 999)); }
  }

  /* the block's own padding is the air above its first photograph and below its last */
  .work-photos .set:first-child, .work-photos .set:first-child > .shot:first-child { margin-top: 0; }
  .work-photos .set:last-child, .work-photos .set:last-child > .shot:last-child { margin-bottom: 0; }
  /* and the closed fold stands the same distance under the photograph before it, whatever that one is */
  .work-photos .set:has(+ details:not([open])), .work-photos .set:has(+ details:not([open])) > .shot:last-child { margin-bottom: 0; }
}

/* ---------- tablets and wider: the photographs come into the page and take their columns ---------- */

@media (min-width: 720px) {
  .work {
    --gap: 16px;
    --step: calc((100% + var(--gap)) / 4);       /* three columns and a gutter: the step between the widths 12, 9, 6, 3 */
  }

  /* The lead stands on the page's left edge and leaves room under it (--room) for the title to show on the
     first screen. Where the browser cannot round it is whole, as wide as that room lets it be. */
  .work-lead { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); align-items: flex-start; }
  .work-lead-frame { --room: calc(100vh - var(--bar) - 104px); width: min(100%, var(--w), calc(var(--room) * var(--r))); }
  /* Where it can: the lead takes 12, 9 or 6 columns, never 10 or 11. It takes the widest of the three that the
     room lets stand whole or all but a tenth of its height; then that tenth, or less, is trimmed about the
     focus point. Six columns are half the picture: before it steps down to them it keeps nine and gives up
     to 16 % of its height (.84: a 4:3 photograph then holds nine columns in a 1366 x 657 window). Like every
     photograph here it may grow a twelfth past its pixels (--most) to reach its line. */
  @supports (width: round(down, 100px, 10px)) and (height: 1svh) {
    .work-lead-frame {
      --room: calc(100svh - var(--bar) - 104px);
      --most: calc(var(--w) * 13 / 12);
      width: min(100%, max(var(--step),
        round(down, min(var(--most), var(--room) * var(--r) / .9) + var(--gap), var(--step)),
        min(3 * var(--step), round(down, min(var(--most), var(--room) * var(--r) / .84) + var(--gap), var(--step)))) - var(--gap));
    }
    .work-lead-frame > a { width: 100%; max-height: var(--room); }   /* the width is stated, so the limit trims the height and does not narrow the photograph */
  }
  .work-top-upright .work-lead { padding-block: 0; }

  .work-photos { padding-block: var(--s6); }
  .work-photos .wrap { padding-inline: var(--gutter); }

  /* A row lies on the page's twelve columns and starts on its left edge. --own is what a photograph's pixels
     allow (and a twelfth); where the browser can round, it is brought down to a column line three columns apart,
     so a photograph too small for its place is 9, 6 or 3 columns wide and its free edge is on the grid. */
  .set { display: flex; align-items: flex-start; gap: var(--gap); }
  .set + .set, .work-photos details > .set, .set + details { margin-top: var(--gap); }
  .shot { --own: calc(var(--w) * 13 / 12); width: min(100%, var(--own)); }
  .set-duo { --own: calc((var(--nat) + var(--seams)) * 13 / 12); width: min(100%, var(--own)); }
  @supports (width: round(down, 100px, 10px)) {
    .shot { --own: max(min(var(--w), var(--step) - var(--gap)), calc(round(down, var(--w) * 13 / 12 + var(--gap), var(--step)) - var(--gap))); }
    .set-duo { --own: max(min(var(--nat), var(--step) - var(--gap)), calc(round(down, (var(--nat) + var(--seams)) * 13 / 12 + var(--gap), var(--step)) - var(--gap))); }
  }
  .set-inset > .shot { width: min(75% - 4px, var(--own)); }             /* 9 columns: the two steps of the rhythm */
  .set-half > .shot { width: min(50% - 8px, var(--own)); }              /* 6: a square alone */
  .set-tall { --step: calc((100% + var(--gap)) / 12); }                 /* an upright alone, or a photograph too small for 6: */
  .set-tall > .shot { width: min(41.667% - 9.33px, var(--own)); }       /* 5 columns, or one fewer at a time */
  .set-end { justify-content: flex-end; }                               /* the second 9-column step */
  .set-duo > .shot { flex: var(--r) 1 0px; width: auto; min-width: 0; }
  /* 8 + 4, exactly on the columns: two thirds of the measure and a gutter, less the gutter */
  .set-uneven { display: grid; grid-template-columns: calc((100% + var(--gap)) * 2 / 3 - var(--gap)) minmax(0, 1fr); align-items: end; }
  .set-uneven.set-flip { grid-template-columns: minmax(0, 1fr) calc((100% + var(--gap)) * 2 / 3 - var(--gap)); align-items: start; }
  .set-uneven > .shot { width: 100%; }
  /* the second 9-column step under a small + large row takes the large one's eight columns: the two share a left
     edge and the small photograph stands alone in its four (the row may be the first one behind the fold) */
  .set-uneven.set-flip + .set-end > .shot,
  .set-uneven.set-flip + details > .set-end:first-of-type > .shot { width: min((100% + var(--gap)) * 2 / 3 - var(--gap), var(--own)); }

  .work-more > summary { margin-left: 0; }

  /* the words: a section ends with the larger step; the covers of the two rows as in the record */
  .work-head, .work-text { padding-bottom: var(--s7); }
  .work-member { padding-block: var(--s7) var(--s5); }
  .work-pager { padding-block: var(--s7) calc(var(--s7) - var(--s3)); }
  .work-turn { grid-template-columns: var(--col-year) minmax(0, 1fr) 64px; }
  .work-turn-thumb { width: 64px; height: 80px; }
}

/* ---------- wide screens: the twelve columns ---------- */

@media (min-width: 900px) {
  /* Left of the axis what names: the colophon, a member's title with its colophon, the word of a row. From the
     axis what is read: the sentence, the firm's text, the titles of the rows. Both start on one baseline, the
     taller of the two lines --s3 under the rule. */
  .work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: baseline; }
  .work-title { grid-column: 1 / -1; }
  .work-facts, .work-member-head { grid-column: 1 / span 4; }
  .work-sentence { grid-column: 5 / -1; padding-top: var(--s3); }

  .work-member-text { grid-column: 5 / -1; padding-top: 0; }

  .work-text .fold { margin-left: var(--axis); }

  .work-turn { grid-template-columns: calc(var(--axis) - 16px) minmax(0, 1fr) 64px; }
  .work-pager .go { margin-left: var(--axis); }

  /* An upright lead. The top is laid on the page's own twelve columns: the photograph stands on the shade in
     columns 1 to 5, as tall as the screen allows, and the title block sits at the foot of the paper from
     column 7, the same place on every such page whatever the photograph's width. */
  .work-top-upright {
    display: grid;
    grid-template-columns: minmax(calc(var(--gutter) - 16px), 1fr) repeat(12, minmax(0, 72px)) minmax(calc(var(--gutter) - 16px), 1fr);
    column-gap: 16px;
    background: var(--light);
  }
  .work-top-upright::before { content: ""; grid-column: 1 / 7; grid-row: 1; background: var(--shade); }
  .work-top-upright .work-lead { grid-column: 2 / 7; grid-row: 1; max-width: none; margin: 0; padding: 0; align-items: flex-start; background: none; }
  .work-top-upright .work-lead-frame { --room: calc(100vh - var(--bar)); width: min(100%, var(--w), calc(var(--room) * var(--r))); }
  /* where the browser can round: a landscape lead's rule of the tenth, on the five columns of its field. It fills
     them where the screen shows all but a tenth of its height, and gives up one column at a time where not
     (a step is one column here, so there is no larger allowance to save one). */
  @supports (width: round(down, 100px, 10px)) and (height: 1svh) {
    .work-top-upright .work-lead-frame {
      --room: calc(100svh - var(--bar));
      --step: calc((100% + var(--gap)) / 5);
      width: min(100%, max(var(--step) - var(--gap), calc(round(down, min(var(--w) * 13 / 12, var(--room) * var(--r) / .9) + var(--gap), var(--step)) - var(--gap))));
    }
  }
  .work-top-upright .work-head { grid-column: 8 / 14; grid-row: 1; align-self: end; padding-block: var(--s6); background: none; }
  .work-top-upright .work-head .wrap { max-width: none; margin: 0; padding-inline: 0; }
  /* its title block is the phone's, one under another: the colophon's year in column 7, place and scope from column 8 */
  .work-top-upright .work-grid { display: block; }
  .work-top-upright .work-sentence { padding-top: var(--s4); text-wrap: balance; }
  /* a member under such a top starts a section of its own, under an ink rule as every later member does */
  .work-top-upright + .work-member { padding-top: var(--s7); }
  .work-top-upright:not(.work-top-bare) + .work-member .work-grid { border-top-color: var(--fg); }
}