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

   Leans on main.css for the tokens (the steps of space --s1 to --s7; --col-year and --gap-year, the year column
   and the gap after it), the grounds, the type roles (.meta, .page-title, .sentence, .sentence-large, .go; the
   title of a plate, .plate-title; the year and the title of a ruled row, .also-year and .also-title; the year
   of a dated line, .dates-year) and for the parts it shares with the person page: the plate (.plate-top,
   .plate-photo, .plate-head; its two formats and where each photograph is cut) and the portrait.
   The first screen is a module of its own (static/first/light/light.css, linked after this file by
   templates/first/light.html): it sets where things stand on the wall; the type of the words on it is here.

   Up to 899px a chapter is one column: its photograph across the screen, then its label, its sentence, its list.
   From 900px the page is cut down its middle: every photograph ends where the sixth of the page's twelve
   columns does and every sentence stands in the first six; a label, a link, a list and the words about the man
   start on column 7, the title of a row and what a date says one column further in. (The man in brief is cut
   so from 720px already.)

   In the order of the page: the words of the first screen, the sentence under it, the plates, the person in
   brief. */

/* ---------- first screen: the type of his name and his trade ---------- */

.first { position: relative; overflow: hidden; }
.first-text { display: grid; }
.first-name {
  order: -1;                   /* the name first, his trade under it */
  font: 500 var(--size-name)/1.12 var(--sans);
  letter-spacing: -.02em;
  margin-left: -.03em;
}
.first-name [lang="ko"] { letter-spacing: -.04em; line-height: 1.16; }
/* 10px under the name is the first screen's own measure (its composition is settled; light.css places the rest) */
.first-role { font: 500 var(--size-small)/1.5 var(--sans); padding-top: 10px; }

/* ---------- the sentence under the first screen ---------- */

.opening { padding-block: var(--s6); }
/* at the size of a heading inside a page, across the page's width (it is the page's .wrap as well) */
.opening .sentence-large { max-width: var(--page); }
@media (min-width: 720px) {
  .opening { padding-block: var(--s7); }
}

/* ---------- the plates: one chapter per screen, cut in two ----------
   The photograph and its word on shade (main.css), the sentence and its works on paper. The paper opens with
   the space the shade closed with (--s5 on a phone, --s6 from 720px) and ends as every section does. */

.plate-title { order: -1; }   /* the title first, its years under it */

.plate-read { padding-block: var(--s5) var(--s6); }
.plate-read .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }   /* one column on a phone: the sentence, then the link or the list */
/* a few sentences in a narrow column: lines of even length, so none ends on a word or two */
.plate-read .sentence { text-wrap: balance; }
/* The link to the photographs of a chapter that is one work: its words stand --s4 under the sentence (--s2 and
   the link's own --s3 of tap padding). The padding below is taken back, so the paper ends from the words. */
.plate-read .go { justify-self: start; margin-block: var(--s2) calc(var(--s3) * -1); }

/* The works of a chapter: an ink rule, then ruled rows of year, title and arrow. The row is the one of the
   record of works (17px above the title's line and 18px below; main.css sets its year and its title), and the
   list ends as that record does: a pale rule stands between two rows and nowhere else, and the 18px under the
   last line are taken back, so the paper ends as far under a list as under a sentence or a link. */
.also { margin-block: var(--s5) -18px; border-top: 1px solid var(--fg); }
.also a { display: grid; grid-template-columns: var(--col-year) 1fr auto; column-gap: var(--gap-year); align-items: baseline; padding-block: 17px 18px; text-decoration: none; }
.also li + li a { border-top: 1px solid var(--rule); }
.also a::after { content: "→"; font: 400 var(--size-small)/1.5 var(--sans); color: var(--quiet); }
@media (hover: hover) {
  .also a:hover .also-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--under); }
}

@media (min-width: 720px) {
  .plate-read { padding-block: var(--s6) var(--s7); }
}
/* From 900px, where main.css sets the photograph and its label side by side, the paper under them is cut the
   same way. Below that a chapter is one column, as on a phone: the photograph across the screen, its label, the
   sentence, the list. */
@media (min-width: 900px) {
  /* the years under a title stand on the foot line of the photograph beside them: a 13px figure has 5px of its
     line below it */
  .plate-head { margin-bottom: -5px; }
  /* Two halves of the page's twelve columns: the sentence in the first six, the works from column 7. The two
     share a line: the first line of the sentence is on the baseline of the first title of the list, or of the
     link. */
  .plate-read .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: baseline; }
  /* The sentence starts where that baseline puts it beside a list (the list's rule and the 17px over its first
     title, less what the sentence's taller line adds over its words), written out so that it starts at the
     same height in a chapter that has a link instead. */
  .plate-read .sentence { margin-top: calc(1px + 17px - (var(--lh-read-ko) - 1.4) * var(--size-sentence) / 2); padding-right: var(--s5); }
  :root[data-lang="en"] .plate-read .sentence { margin-top: calc(1px + 17px - (var(--lh-read) - 1.4) * var(--size-sentence) / 2); }
  .plate-read .also { margin-top: 0; }
  /* beside the sentence the link gives back its padding above as well: it takes the line the sentence starts on */
  .plate-read .go { margin-top: calc(var(--s3) * -1); }
}

/* ---------- the man, briefly ---------- */

.person-brief { padding-block: 0 var(--s6); }
.person-brief .wrap { display: grid; gap: var(--s4); }
.person-brief-text { display: grid; justify-items: start; }
.person-brief-text .page-title { order: -1; }
/* the line that says what he is, and that he holds a doctorate: read at text size, in ink */
.person-brief-text .meta { padding-top: var(--s1); font-size: var(--size-small); color: var(--fg); }
.person-brief-text .sentence { padding-top: var(--s4); }
/* Four dated lines under an ink rule, set as the lines of a list. (The first screen sets the same list small
   and without its rule: light.css. It keeps the --s4 above its lines from here.) */
.dates { display: grid; row-gap: var(--s2); width: 100%; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--fg); }
.person-brief .dates { padding-top: var(--s3); }   /* under the rule that opens it, the first line starts --s3 down */
.dates li { display: grid; grid-template-columns: var(--col-year) 1fr; column-gap: var(--gap-year); align-items: baseline; font: 400 var(--size-small)/var(--lh-list-ko) var(--sans); }
:root[data-lang="en"] .person-brief .dates li { line-height: var(--lh-list); }
.dates li > span:last-child { text-wrap: balance; }
/* the year of a line of a list is quiet, as the date of a paper or of a line of the CV is */
.person-brief .dates-year { color: var(--quiet); }
/* The two links stand --s4 under the last line (--s2 and their own --s3 of tap padding); the padding below is
   taken back, so the block ends with their line: on a phone the section's end is measured from it, and beside
   the portrait their underline lies on the portrait's foot. */
.person-brief-text .go-row { margin-bottom: calc(var(--s3) * -1); padding-top: var(--s2); }
@media (min-width: 720px) {
  .person-brief { padding-bottom: var(--s7); }
  /* The portrait in the first half, the words from column 7, their last line on its foot. His portrait stands
     beside his name from 720px, as on his own page; a chapter's photograph does so from 900px, and the portrait
     then ends on the line those photographs end on. */
  .person-brief .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; column-gap: 16px; }
  /* Where the words are the taller of the two (the English lines in a half of a small tablet), the portrait
     takes their height and gives at its sides: the two start on one line as they end on one. Everywhere else
     it keeps its own height. */
  .person-brief .portrait { align-self: stretch; }
  .person-brief .portrait img { width: 100%; height: 100%; object-fit: cover; }
}