/* Light and Shade: the person, and the firm below him (templates/shin.html, templates/parts/firm.html).
   Loaded after main.css, on that page only.

   Leans on main.css for the tokens, the head of the page (.head), the type roles (.meta, .title, .page-title,
   .sentence, .dates-year, .go; the heading of the CV, .cv h2.meta), the portrait, the plate (.plate-top,
   .plate-photo, .plate-head), the lists (.list, .list-dated, .list-date), the parts (.part), the fold (.folds,
   .fold, .views-n) and the link that opens a photograph large (.zoom).

   In the order of the page: the head with his portrait, his life in dated paragraphs, the plate with
   Ingo Maurer, the CV, the firm; then what a wide screen changes, the plate last.

   A paper block ends with --s6 on a phone and --s7 from 720px, counted from its last line of words.

   On a wide screen the paper parts of the page are set on the page's twelve columns (16px apart): a year or a
   heading stands in the first four, and what is read starts at column 5, the line the page of a work also reads
   from (entry.css). In the CV and the firm column 5 holds the labels and the dates, and what is read hangs one
   year column further in (--hang), on column 6. */

/* ---------- the head: his portrait, his name ---------- */

.page-person .head { padding-top: 0; }           /* the portrait starts at the top of the page, edge to edge */
.head .person-head { gap: var(--s4); }
.person-head > div { display: grid; }
.person-head .page-title { order: -1; }          /* the name first, what he is under it */
/* the line that says what he is, and that he holds a doctorate: read at text size, in ink */
.person-head .meta { padding-top: var(--s1); font-size: var(--size-small); color: var(--fg); }
/* his name in the other script, small, under the name */
.title-other {
  display: block;
  padding-top: var(--s1);
  font-size: var(--size-small);
  font-weight: 400;
  line-height: var(--lh-list);
  letter-spacing: 0;
  color: var(--quiet);
}

/* ---------- his life: a year, then a paragraph ---------- */

/* The year is a label over its paragraph (.dates-year: the year of the dated lines of the home page, its figures
   in a column). A pale rule separates two rows; the last row has none, and the section ends under its text. */
.life { padding-bottom: var(--s6); }
.life-rows { border-top: 1px solid var(--fg); }
.life-rows li { display: grid; row-gap: var(--s1); padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
.life-rows li:last-child { padding-bottom: 0; border-bottom: 0; }

/* ---------- the plate with Ingo Maurer: under the photograph and the dedication, three small pictures and a link ---------- */

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin-top: var(--s5); }
.strip figure { aspect-ratio: 3 / 4; overflow: hidden; background: var(--up); }
.strip .zoom, .strip img { width: 100%; height: 100%; object-fit: cover; }
/* The words of the link stand --s4 under the pictures, and the foot of the plate (the padding main.css gives
   .plate-top) is counted from them: the air that makes the link a target (--s3 above and below, main.css) is
   part of the first gap and taken back from the second. */
.plate-link { padding-top: var(--s2); margin-bottom: calc(var(--s3) * -1); }

/* ---------- the CV: a heading, then its parts set open ---------- */

.cv { padding-block: var(--s6); }
.cv .wrap { display: grid; row-gap: var(--s3); }                           /* the heading starts --s3 under the line */
.cv .wrap::before { content: ""; border-top: 1px solid var(--fg); }       /* the line the CV opens with, as wide as the page (the firm opens the same way) */
.cv-body { display: grid; row-gap: var(--s5); margin-top: var(--s2); }    /* the first part stands --s4 under the heading */
/* The link that closes a block (here and under the firm) is set by its words: --s5 under the last line, the end
   of the section under them. The air that makes it a target (--s3 above and below) is not counted. */
.cv .go-row, .firm .go-row { margin-block: calc(var(--s3) * -1); }

/* ---------- the firm ----------
   Its name under an ink line; then its statement, three facts as label and value, its history and what it does
   as open lists, and the long lists behind a word each. */

.firm { padding-bottom: var(--s6); }
.firm .wrap { display: grid; row-gap: var(--s3); }                         /* its first line starts --s3 under the line */
.firm .wrap::before { content: ""; border-top: 1px solid var(--fg); }     /* the line the firm opens with, as wide as the page */
.firm-head { display: grid; gap: var(--s2); }
.firm-body { display: grid; row-gap: var(--s5); min-width: 0; margin-top: var(--s2); }   /* the statement stands --s4 under the name */
/* Label and value, set as a line of a list with its date beside it: the label quiet in the year column (one
   line, also where an English label is a pixel wider than the column), the value on the second edge. */
.facts { display: grid; row-gap: var(--s2); margin: 0; }
.facts > div { display: grid; grid-template-columns: var(--col-year) minmax(0, 1fr); column-gap: var(--gap-year); align-items: baseline; }
.facts dt { font: 500 var(--size-meta)/var(--lh-list) var(--sans); white-space: nowrap; color: var(--quiet); }
.facts dd { margin: 0; font: 400 var(--size-small)/var(--lh-list-ko) var(--sans); }
:root[data-lang="en"] .facts dd { line-height: var(--lh-list); }

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

@media (min-width: 720px) {
  .head .person-head, .life-rows li, .cv .wrap, .firm .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }

  .page-person .head { padding-top: var(--s7); }
  .life, .firm { padding-bottom: var(--s7); }
  .cv { padding-block: var(--s7); }
  /* his name beside the portrait, at its foot: the last line stands on the foot by its baseline, so the 6px of
     its line that reach under the baseline hang below */
  .head .person-head { align-items: end; }
  .person-head .portrait { grid-column: 1 / span 4; }
  .person-head > div { grid-column: 5 / -1; margin-bottom: -6px; }

  .life-rows li { align-items: baseline; }
  .life-rows .dates-year { grid-column: 1 / span 4; }
  .life-rows .sentence { grid-column: 5 / -1; }

  /* The CV and the firm. The heading in the first four columns and, beside it, on one baseline with its first
     line, what it heads. The heading of the CV stays in sight while the CV passes, as the heading of a chapter
     does on the works page (it stops as far under the bar as it stands under its line). The firm's head leaves
     with its first lines: stuck, it would set the firm's name a second time under the one in the bar. Its name is
     one line, also where the four columns are narrower than it (up to 860px): it ends short of the statement. */
  .cv .wrap::before, .firm .wrap::before { grid-column: 1 / -1; }
  .cv .wrap > .meta, .firm-head { grid-column: 1 / span 4; align-self: baseline; }
  .cv .wrap > .meta { position: sticky; top: calc(var(--bar) + var(--s3)); }
  .firm-head .title { white-space: nowrap; }
  .cv-body, .firm-body { grid-column: 5 / -1; align-self: baseline; margin-top: 0; }
  /* There column 5 holds what names (a label, a date) and what is read hangs a year column further in, on the
     edge the text of a dated list has: the statement, the lines of a list, the words that open one, the link. */
  .firm-body > .sentence, .part > .list:not(.list-dated), .part > .folds, .cv-body > .go-row, .firm-body > .go-row { margin-left: var(--hang); }
  /* a line under the date of the line above: no date of its own, the text on its edge */
  .list-dated li > :only-child { grid-column: 2; }
}

/* ---------- the plate on wide screens ----------
   main.css sets a plate in one column below 900px and in two halves from there: the photograph on the left, its
   label at its foot on the right. This plate holds more than a label.
   In one column the three pictures run from edge to edge on a phone. From 720px they no longer grow with the
   screen: they are small pictures, 16px apart, and start on the left edge of the dedication.
   From 900px the photograph fills the left half from the top of the plate to the line of the link; beside it
   the dedication, under that the three small pictures on columns 7 to 12 (two columns each), then the link.
   Where the photograph alone is taller than those three, the room is left over the dedication. */

@media (min-width: 720px) {
  /* the three pictures together never wider than half the page, less the gutter: 160px each where there is room */
  .plate-top .strip { gap: 16px; max-width: calc(var(--page) / 2 - 8px); }
}
@media (min-width: 720px) and (max-width: 899px) {
  .plate-top .strip { padding-left: var(--gutter); }   /* in one column: from the left edge of the dedication */
}
@media (min-width: 900px) {
  .plate-top { grid-template-rows: 1fr auto auto; align-items: stretch; }
  .plate-top .plate-photo { grid-row: 1 / span 3; }
  .plate-top .plate-photo img { height: 100%; }
  .plate-top .plate-head { align-self: end; }
  .plate-top .strip { grid-column: 2; padding-right: var(--gutter); }   /* in halves: on the right one, to the edge of the page */
  .plate-top .plate-link { grid-column: 2; margin-inline: 0; padding-inline: 0; }
}