/* Light and Shade: the record of works (templates/works.html). Loaded after main.css, on the works page only.

   Leans on main.css for the tokens (--col-year is the year column, --gap-year the gap after it, --hang where the
   second column starts; --mark and the two marks drawn in it), the head of the page (.head), the chapter
   (.period, .period-head, .shelf-title), the type roles (.sentence, .sentence-small, .numeral; the year and the
   title of a row, .row-year, .row-title), the fold and its text (.fold, .prose), the count (.views-n) and the
   link that opens a photograph large (.zoom).

   In the order of the page: the filter, a chapter's heading, a row, an opened row. */

/* ---------- the filter: all the works, or only those with Ingo Maurer ---------- */

/* Two words in a row, each a full target (--tap). The air that makes it one is taken back above and below, so the
   head of the page sees a line of type: the row stands --s3 under the title on a phone and on the title's baseline
   from 720px, and the head ends as far under it as under a title alone. */
.views { display: flex; flex-wrap: wrap; column-gap: var(--s5); margin-block: calc((var(--size-small) * var(--lh-list) - var(--tap)) / 2); }
.views button { display: inline-block; min-height: var(--tap); padding: 0; border: 0; background: none; font: 500 var(--size-small)/var(--tap) var(--sans); color: var(--quiet); cursor: pointer; }
/* the view that is on: in ink, its word underlined as the bar underlines the page one is on (the word only, the
   span the t macro writes: the line ends where the word ends, before the space and the count) */
.views button[aria-pressed="true"] { color: var(--fg); }
.views button[aria-pressed="true"] > [data-l] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .55em; }

/* ---------- a chapter's heading: its years, and a sentence about them ---------- */

.period-sentence { font: 400 var(--size-small)/var(--lh-read) var(--sans); color: var(--quiet); max-width: 21em; text-wrap: pretty; }
.period-sentence [lang="ko"] { line-height: var(--lh-read-ko); }
@media (min-width: 720px) {
  .period-head .numeral { font-size: var(--size-sub); white-space: nowrap; }
  /* beside its rows the heading stands on the baseline of the first row's title, which starts 17px under its
     rule and is smaller: 2px more than the --s3 a heading has under its rule elsewhere. Nothing follows under
     it, so it has no air below: where it is the taller of the two (the Ingo Maurer view of a chapter with one
     work) the chapter ends under its sentence as under its rows. */
  .period-head { padding-block: calc(var(--s3) + 2px) 0; }
  /* beside its rows the sentence stops short of the years: where its four columns are narrower than its measure
     it would fill them, and only the 16px between two columns would part it from the year column */
  .period-head:not(:only-child) .period-sentence { margin-right: var(--s4); }
  /* the chapter without rows: its sentence is read from column 5 on, at the measure of reading text */
  .period-head:only-child .period-sentence { max-width: var(--measure); }
}

/* ---------- a row: year, title and place, and a thumbnail (it has a page) or a mark (it opens here) ---------- */

/* The ruled row of the site (main.css, type roles): 17px above and 18px below, which with the title's line makes
   22px over its cap line and under its baseline; the year column and the gap after it are the page's.
   A pale rule stands between two rows and nowhere else: over every row that follows one that shows (in the
   Ingo Maurer view the rows left out are hidden, not gone). Under the last row there is no rule, and the air
   under its last line is taken back: the chapter ends as far under its rows as under a sentence alone. */
.rows { --row-top: 17px; --row-foot: 18px; margin-bottom: calc(var(--row-foot) * -1); border-top: 1px solid var(--rule); }
.row:not([hidden]) ~ .row { border-top: 1px solid var(--rule); }
.row-line { display: grid; grid-template-columns: var(--col-year) minmax(0, 1fr) auto; column-gap: var(--gap-year); align-items: baseline; padding-block: var(--row-top) var(--row-foot); text-decoration: none; cursor: pointer; list-style: none; }
.row-line::-webkit-details-marker { display: none; }
.row-body { display: grid; row-gap: var(--s1); min-width: 0; }
/* a second line under a title: the place of a work, its scope, the sentence of a luminaire */
.row-place { font: 400 var(--size-meta)/var(--lh-list) var(--sans); color: var(--quiet); text-wrap: balance; }
/* Everything in a row hangs from its first line: the thumbnail's top edge sits on the cap line of the title (5px
   under the top of its line, and as far over the rule below as under the rule above) and the mark in the middle of
   that line, so both stay at one distance from the rule above however many lines the title runs to. */
.row-thumb { align-self: start; width: 52px; height: 65px; margin-block: 5px var(--s1); overflow: hidden; background: var(--up); }   /* the cover crop is 4:5; show all of it */
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* the last row that shows (no row after it does): its picture is the lowest thing of the chapter, and the chapter
   ends as far under the picture as under a last line */
.row:not(:has(~ .row:not([hidden]))) .row-thumb { margin-bottom: 0; }
/* the mark of a fold, at the right edge where a row with a page has its picture; its column is no wider than the
   mark, so a title that opens has the room the picture would take */
.row-mark { align-self: start; width: var(--mark); height: var(--mark); margin-top: calc((var(--size-list) * 1.4 - var(--mark)) / 2); background: var(--mark-plus); color: var(--quiet); }
details[open] > .row-line .row-mark { background: var(--mark-minus); }

@media (max-width: 339px) {
  /* too narrow for year, title and thumbnail side by side: the year goes above the title */
  .row-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; }
  .row-line .row-year { grid-area: 1 / 1; }
  .row-line .row-body { grid-area: 2 / 1; }
  .row-line .row-thumb, .row-line .row-mark { grid-area: 1 / 2 / 3 / 3; }
}
/* a row that leads to a page, or opens: its title answers to the mouse */
@media (hover: hover) {
  .row-line:hover .row-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--under); }
}
@media (min-width: 720px) {
  .rows { border-top: 1px solid var(--fg); }
  .row-thumb { width: 64px; height: 80px; }
}

/* ---------- an opened row: its scope and sentence, small pictures (tap one to see it large), the firm's text ----------
   All of it hangs under the title, on the row's second edge; only the year of a member of a series stands in the
   year column. One gap inside (--s3), and no rule: the pale rule is the rows'. What opens stands as far under
   the title's lines as over the rule that ends the row (the row's own foot, both times). */

/* the scope of the work is the third line under its title, after the place, once the row is open */
.row-scope { display: none; }
details[open] > .row-line .row-scope { display: block; }
.row-open, .row-work { display: grid; row-gap: var(--s3); }
.row-open { padding: 0 0 var(--row-foot) var(--hang); }
/* a sentence or two in a narrow column: lines of even length, so none ends on a word or two (as on the home page) */
.row-open .sentence { text-wrap: balance; }
/* a member of a series: a small row of its own, --s5 from what stands above it (its --s4 and the gap) */
.row-member { margin-top: var(--s4); }
.row-member-line { display: grid; grid-template-columns: var(--col-year) minmax(0, 1fr); column-gap: var(--gap-year); align-items: baseline; margin-left: calc(var(--hang) * -1); }
.row-member-name { font: 500 var(--size-small)/var(--lh-list) var(--sans); }
/* three photographs at most, from the text's edge to the end of the rule */
.row-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.row-photos .zoom { aspect-ratio: 1; overflow: hidden; background: var(--up); }
.row-photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 339px) {
  .row-member-line { grid-template-columns: minmax(0, 1fr); }   /* its year above its name, as in the row */
}