/* Light and Shade: what every page shares.

   The page is built from two grounds, as the name says. SHADE is black and holds photographs.
   LIGHT is paper and holds anything to be read. Sections cut from one to the other with a hard edge.
   There is no accent colour: colour comes from the photographs only.

   The voice is quiet: every word is set at the size of a wall label in a gallery, in one grotesque at normal
   width, and the photographs are the largest things on every screen. Hierarchy comes from position (a label
   sits directly under its photograph, its title first), from space, and from two hairlines: an ink line opens
   a list, a grey line separates rows.

   One family: Instrument Sans for Latin, Pretendard for Hangul (both loaded by templates/base.html).
   Three weights, by size: anything set at 20px or more is medium (500), because size already carries it;
   a heading at text size (a title in a list, a year that heads a paragraph) is semibold (600), because there
   weight has to; text is 400 and labels 500.
   On a phone the text sizes are 13 (labels, years, the words of the bar), 15 (small: a list, a fold, a link,
   the firm's name in the bar) and 17 (reading, a title in a list); the display sizes are 20 (a heading inside
   a page), 22 (the two lead sentences), 28 (the title of a page, a chapter, a work) and 40 (his name, once, on
   the first screen).
   Where a label reads title first and date second, that is done with `order`, so the source order (date, then
   title) differs from what is seen.

   The stylesheets, and the template that loads each:
     static/css/main.css               templates/base.html      every page: tokens, base, the two grounds, the type
                                                                roles and the parts more than one kind of page uses,
                                                                the bar, the foot, the photograph viewer
     static/css/home.css               templates/home.html      the home page under its first screen
     static/first/light/light.css      templates/first/light.html   the home page's first screen (a module of its own)
     static/css/works.css              templates/works.html     the record of works
     static/css/entry.css              templates/entry.html     the page of one work
     static/css/shin.css               templates/shin.html      the person, and the firm below (templates/parts/firm.html)
     static/css/writing.css            templates/writing.html   the papers
   templates/404.html needs this file only. A page's own file is linked after this one (the "head" block of
   base.html), so it may lean on everything here and its rules win over these where both speak equally.
   A type role that more than one kind of page uses is set once, here ("type roles"), also where the pages
   name it differently (.row-year and .also-year, .shelf-title and .work-member-title): the page's own file
   then says only where the thing stands.

   Phone first: in every section the plain rules are the phone layout and the section's media queries follow them.
   The breakpoints: up to 339 and 389px for the narrowest phones; from 375px a long quoted name in a title goes
   down whole; from 720px wider screens; from 900px the two halves of a plate; from 1000px the foot on the
   page's twelve columns. Three more belong to one file each: entry.css has 900px for its twelve columns and
   "up to 719px" for what only a phone does; light.css has "up to 660px high" for a short screen.
   One thing depends on the hand, not on the width: a wide screen with a mouse gets no 44px targets where a
   line of type will do (the folds, the lines of the foot). */

/* ---------- tokens ---------- */

:root {
  color-scheme: dark;

  /* grounds */
  --shade: #0a0a0a;
  --shade-up: #1a1a19;        /* a photograph that has not loaded yet */
  --on-shade: #f4f3ef;
  --on-shade-quiet: #a9a8a2;
  --rule-shade: #30302e;

  --light: #f3f3f0;
  --light-up: #e3e3df;
  --on-light: #0b0b0b;
  --on-light-quiet: #55544f;
  --rule-light: #c4c3bd;

  /* type: one family, Latin from Instrument Sans, Hangul from Pretendard */
  --sans: "Instrument Sans", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --size-meta: 13px;
  --size-small: 15px;
  --size-list: 17px;           /* a title in a list: the size of what is read */
  --size-body: 17px;
  --size-sentence: 17px;
  --size-sub: 20px;            /* a heading inside a page */
  --size-numeral: 20px;        /* a span of years that heads a chapter or a row */
  --size-title: 28px;          /* the title of a page, a chapter, a work */
  --size-name: 40px;           /* used once: his name on the first screen */

  /* line height: one for each kind of text. Hangul fills its em and needs more air between lines than Latin,
     whose lower case leaves half the em empty */
  --lh-tight: 1.3;             /* 20px and up: a title, a heading */
  --lh-list: 1.5;              /* a line of a list, a label */
  --lh-list-ko: 1.6;           /* a line of a list in the Korean view */
  --lh-read: 1.55;             /* text to be read, in Latin */
  --lh-read-ko: 1.75;          /* text to be read, in Hangul */

  /* tracking. Hangul is set a little tight, and tighter as it grows; Latin only from the size of a heading up */
  --track-ko: -.005em;         /* Hangul at text sizes (Pretendard is drawn close already) */
  --track-ko-strong: -.012em;  /* Hangul semibold at text size: a title in a list */
  --track-ko-head: -.018em;    /* Hangul in a heading inside a page */
  --track-ko-title: -.024em;   /* Hangul at 22px and up */
  --track-la-strong: -.005em;
  --track-la-head: -.008em;
  --track-la-title: -.012em;

  --under: .28em;              /* how far an underline sits below its words, everywhere */

  /* space: one scale, each step about 1.6 times the last (from the third on, each is the sum of the two before).
     A section ends with --s6 on a phone and with --s7 from 720px; under an ink rule that opens something, the
     first line starts --s3 below it. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 20px;
  --s5: 32px;
  --s6: 52px;
  --s7: 84px;

  --gutter: 20px;
  --page: 1120px;
  --measure: 31em;
  /* The year column, the same wherever a row starts with a year or a label, and the gap after it.
     On a phone: 1998–2006 at 13px is 68.4px wide; kept narrow so a title has 174px beside a thumbnail at 360.
     From 720px: one of the page's twelve columns and the 16px between two of them, so what follows the year
     starts on a column line. */
  --col-year: 70px;
  --gap-year: var(--s3);
  --hang: calc(var(--col-year) + var(--gap-year));   /* where the second column starts */
  --tap: 44px;
  --bar: 52px;

  /* The mark that says something opens (a plus) and that it is open (a minus): a cross of two 1px strokes.
     Used as the background of an empty box of --mark by --mark, in the colour that box is given (--quiet). */
  --mark: 11px;
  --mark-plus: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  --mark-minus: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  /* The air above and below the word of a fold that makes it a target: a thumb needs 44px, a mouse on a wide
     screen does not. It is taken back by the fold itself, so it never counts into the spacing around it. */
  --fold-pad: var(--s3);
}
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  :root { --fold-pad: var(--s1); }
}
@media (max-width: 339px) {
  :root { --gutter: 16px; --size-name: 34px; --hang: 0px; }
}
@media (min-width: 720px) {
  :root {
    --gutter: 40px;
    --col-year: 72px;
    --gap-year: 16px;
    --size-list: 18px;
    --size-sentence: 18px;
    --size-sub: 22px;
    --size-title: 34px;
    --size-name: 48px;
  }
}

/* a section declares its ground; everything inside reads these */
.shade { --bg: var(--shade); --fg: var(--on-shade); --quiet: var(--on-shade-quiet); --rule: var(--rule-shade); --up: var(--shade-up); }
.light { --bg: var(--light); --fg: var(--on-light); --quiet: var(--on-light-quiet); --rule: var(--rule-light); --up: var(--light-up); }
.shade, .light { background: var(--bg); color: var(--fg); }
.light { color-scheme: light; }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + var(--s3)); background: var(--shade); }

body {
  margin: 0;
  background: var(--shade);
  color: var(--on-shade);
  font: 400 var(--size-body)/var(--lh-read) var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: var(--under); }
button { font: inherit; color: inherit; border-radius: 0; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* selected text takes the colours of the other ground */
::selection { background: var(--on-shade); color: var(--shade); }
.light ::selection { background: var(--on-light); color: var(--light); }
.shade ::selection { background: var(--on-shade); color: var(--shade); }

.skip { position: absolute; left: -999px; top: 0; z-index: 60; padding: var(--s3) var(--s4); background: var(--on-shade); color: var(--shade); }
.skip:focus { left: 0; }

/* two languages live in every page; only the chosen one shows */
:root[data-lang="ko"] [data-l="en"],
:root[data-lang="en"] [data-l="ko"],
:root:not([data-lang]) [data-l="en"] { display: none; }
/* Tracking and leading for Hangul are set on [lang="ko"], which the templates put only on text that contains
   Hangul, so a Latin name shown in the Korean view keeps the Latin setting. */
[lang="ko"] { word-break: keep-all; }
body [lang="ko"] { letter-spacing: var(--track-ko); }   /* not html[lang]: Latin names in the Korean view keep Latin tracking */

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* A page is at least as tall as its screen. Where what it holds is shorter (the page that says a page was not
   found; the papers on a tall screen), its last section grows: the page's ground runs down to the foot, and the
   foot closes the screen. */
.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page > main { display: flex; flex-direction: column; flex: 1 0 auto; }
.page > main > :last-child { flex: 1 0 auto; }

/* ---------- type roles ---------- */

/* 13px has two settings, both on the line of a label (--lh-list):
     a label or a year               medium (500)    .meta, .list-date, the year of a row
     a second line under a title     regular (400)   a place, a scope, a note (.list .meta, and the pages' own)
   Figures are proportional. Tabular ones are kept for where years stand under one another in a column (the year
   of a row, the date of a list): elsewhere their 1 with a foot reads as another typeface. */

/* a label: a role, a span of years, a count */
.meta {
  font: 500 var(--size-meta)/var(--lh-list) var(--sans);
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
  word-spacing: .08em;         /* parts are joined by a middle dot and the face's word space is narrow: open it a little */
  color: var(--quiet);
}
.meta [lang="ko"] { letter-spacing: var(--track-ko); }

/* the title of a page (.page-title), of something inside one (.title), of a chapter of the home page (.plate-title) */
.title, .page-title, .plate-title {
  font: 500 var(--size-title)/var(--lh-tight) var(--sans);   /* one line height in both scripts: the rule under a title stands at one height on every page */
  letter-spacing: var(--track-la-title);
  text-wrap: balance;
}
.title { overflow-wrap: anywhere; }
.title [lang="ko"], .page-title [lang="ko"], .plate-title [lang="ko"] { letter-spacing: var(--track-ko-title); }

/* a heading inside a page: a shelf of papers (works, writing), a member of a series (the page of one work),
   and the heading of the CV (person) */
.shelf-title, .work-member-title, .cv h2.meta {
  font: 500 var(--size-sub)/var(--lh-tight) var(--sans);
  letter-spacing: var(--track-la-head);
}
.shelf-title [lang="ko"], .work-member-title [lang="ko"], .cv h2.meta [lang="ko"] { letter-spacing: var(--track-ko-head); }
.cv h2.meta { word-spacing: 0; color: var(--fg); }   /* it is marked up as a label: in ink, without the label's word space */

/* text to be read */
.sentence {
  font: 400 var(--size-sentence)/var(--lh-read) var(--sans);
  letter-spacing: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}
.sentence [lang="ko"] { line-height: var(--lh-read-ko); }
/* the two lead sentences: the one under the first screen, and the dedication on the person page */
.sentence-large {
  font-size: var(--size-sub);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-la-title);
  max-width: 17em;
  text-wrap: balance;
}
.sentence-large [lang="ko"] { line-height: var(--lh-list); letter-spacing: var(--track-ko-title); }
/* the sentence of a part under the page's own: a member of a series under the sentence of the series */
.sentence-small { font-size: var(--size-small); }

/* a span of years set as a heading */
.numeral {
  display: block;
  font: 500 var(--size-numeral)/var(--lh-tight) var(--sans);
  font-variant-numeric: lining-nums;
  letter-spacing: var(--track-la-head);
}

/* A ruled row: a row of the record of works, a work of a chapter on the home page, the next and the previous
   work on the page of one. What stands in its year column (a year; "next", "previous") and the title beside it
   are set here; the row itself is the page's (padding 17px above and 18px below, the cover hung from the cap
   line). The year's line is taller than a label's so that it stands on the title's first baseline. */
.also-year, .row-year, .work-turn-word {
  font: 500 var(--size-meta)/1.7 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.also-title, .row-title, .work-turn-title { font: 500 var(--size-list)/1.4 var(--sans); letter-spacing: var(--track-la-strong); overflow-wrap: anywhere; text-wrap: balance; }
.also-title [lang="ko"], .row-title [lang="ko"], .work-turn-title [lang="ko"] { letter-spacing: var(--track-ko-strong); }
/* A long quoted name in a title stands in a span of its own (templates/_macros.html, hold). In the title of a page
   and in a row of the home page it is a box from 375px: it goes down whole where a line can hold it, and breaks
   inside itself only where none can. On narrower phones, and in the rows of the record and of next and
   previous, it stays part of its line and breaks with it. */
@media (min-width: 375px) {
  .title .name, .also-title .name { display: inline-block; }
}
@media (min-width: 375px) and (hover: hover) {
  /* a box takes no underline from the line it stands in: the name gets the one its row gets under the mouse (home.css) */
  .also a:hover .also-title .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--under); }
}
/* the year of a dated line (the man in brief, on the home page): a label, its figures in a column */
.dates-year { font: 500 var(--size-meta)/var(--lh-list) var(--sans); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* a link that leads somewhere: the words underlined, then an arrow */
.go {
  display: inline-block;       /* so the arrow is not underlined */
  padding-block: var(--s3);    /* the air that makes the line a target: 12 + 20 + 12 = 44px */
  font: 500 var(--size-small)/20px var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--under);
}
.go::after { content: "→"; display: inline-block; margin-left: var(--s2); text-decoration: none; }
.go-row { display: flex; flex-wrap: wrap; column-gap: var(--s5); }

/* ---------- top bar ---------- */

.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--bar);
  padding-inline: var(--gutter);
  background: var(--light);
  color: var(--on-light);
  border-bottom: 1px solid var(--rule-light);
  font: 500 var(--size-meta)/1 var(--sans);
  --bar-quiet: var(--on-light-quiet);
  --bar-pad: var(--s3);        /* half the gap between two of its words */
}
/* The bar takes the ground of the top of its page: pages that open on a photograph or in the dark get the shade
   bar, the others the paper one. (Decided with the firm; not to be changed.) */
.page-home .bar, .page-entry .bar { background: var(--shade); color: var(--on-shade); border-bottom-color: var(--rule-shade); --bar-quiet: var(--on-shade-quiet); }
/* Two sizes at every width: the firm's name at 15px, the three words and the language at the size of a label. */
.bar a { text-decoration: none; }
.bar-name { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; font-size: var(--size-small); letter-spacing: -.005em; white-space: nowrap; }
/* The words stand at even gaps (each has --bar-pad on both sides); the last thing in the row ends exactly on the
   page's right edge. */
.bar-nav { display: flex; align-items: center; }
.bar-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--bar-pad); color: var(--bar-quiet); }
.bar-nav a[aria-current] { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .55em; }
/* a word of one syllable (글) is narrower than a thumb: its target is 44px wide all the same, without moving the words */
.bar-nav a::before, .bar-lang::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: var(--tap); transform: translateX(-50%); }
/* the Korean words are one or two syllables and stand well apart; the English ones are longer and stand closer */
:root[data-lang="en"] .bar { --bar-pad: var(--s2); }
/* The other language: its code as one more quiet word, no box. It stands half as far again from the three words as
   they stand from each other, so it reads as something apart from the pages; capitals get a little air. */
.bar-lang { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); margin-left: calc(var(--bar-pad) * 2); padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: .03em; color: var(--bar-quiet); }
@media (hover: hover) {
  /* under the mouse a word of the bar goes to ink; the underline stays the mark of the page one is on */
  .bar-nav a:hover, .bar-lang:hover { color: inherit; }
}

/* phones narrower than 375px: the bar's name, its three words and the language must all stay on one row */
@media (max-width: 374px) {
  .bar { gap: var(--s1); }
  :root[data-lang="en"] .bar { --bar-pad: var(--s1); }   /* the three English words closer; the Korean ones keep their air */
}
@media (max-width: 339px) {
  /* three English words, the name and the language on a 320px screen: every gap gives a little. Narrower still, the
     words drop to a second row rather than leave the screen */
  .bar { flex-wrap: wrap; gap: 0; --bar-pad: var(--s2); }
  :root[data-lang="en"] .bar { --bar-pad: 3px; }
}
@media (min-width: 720px) {
  /* the bar's name sits on the same left edge as the page below it */
  .bar { padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))); }
}

/* ---------- the head of a page: its title and a sentence (works, person, writing, not found) ---------- */

.head { padding-block: var(--s6) var(--s5); }
.head .wrap { display: grid; gap: var(--s3); }
/* the page that says a page was not found has a link under its title: as wide as its words, not as the page, and
   its words --s5 under the title (the gap, --s2 and the link's own --s3 of air) */
.page-404 .head .go { justify-self: start; margin-top: var(--s2); }
@media (min-width: 720px) {
  .head { padding-block: var(--s7) var(--s6); }
}

/* ---------- a plate: a photograph on shade and, under it, its label (home, person) ----------
   Two formats, whatever the photograph's own: 16 to 9 for one that lies, a square for one that stands (the
   section then has the class plate-short). The square is never taller than the screen under the bar. What a
   format cuts off is chosen plate by plate, by the section's id: where the middle of the photograph would lose
   part of the work, the cut is moved. */

.plate-top { padding-bottom: var(--s5); }
.plate-photo { display: block; }
.plate-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.plate-short .plate-photo img { aspect-ratio: 1; max-height: calc(100vh - var(--bar)); max-height: calc(100svh - var(--bar)); }
#haesley .plate-photo img { object-position: 100% 50%; }   /* the roof to its right tip; the trees on the left give */
#seamarq .plate-photo img { object-position: 50% 0; }      /* the ribbon to its upper end; the floor gives */
#now .plate-photo img { object-position: 50% 55%; }        /* the ring whole, the same sky above it as ground below */
#homes .plate-photo img { object-position: 50% 70%; }      /* both tables whole at the foot; the head of the window gives */
.plate-head { display: grid; gap: var(--s1); padding-top: var(--s4); }
@media (min-width: 720px) {
  .plate-top { padding-bottom: var(--s6); }   /* the shade closes with a step more from 720px, as the paper under it opens (home.css) */
}
@media (min-width: 900px) {
  /* Two halves, the photograph on the left, its label at its foot on the right. Not below 900px: half a screen
     there shows a photograph smaller than a phone does. */
  /* the photograph runs from the edge of the screen to the middle of the page; its label starts where column 7
     of the page's twelve does (the middle, plus half a 16px gap), as the list under it does (home.css) */
  .plate-top { display: grid; grid-template-columns: calc(50% - 8px) minmax(0, 1fr); align-items: end; column-gap: 16px; }
  .plate-head { justify-self: start; max-width: none; margin-inline: 0; padding-left: 0; }
}

/* ---------- his portrait (home, person) ---------- */

.portrait { margin-inline: calc(var(--gutter) * -1); background: var(--up); }   /* the portrait runs edge to edge, like every other photograph */
@media (min-width: 720px) {
  .portrait { margin-inline: 0; }
}

/* ---------- a chapter of a list: a heading under an ink rule, then its rows (works, writing) ---------- */

.period { padding-bottom: var(--s6); }
.period-head { display: grid; row-gap: var(--s2); padding-block: var(--s3) var(--s4); border-top: 1px solid var(--fg); }
.period-head:only-child { padding-bottom: 0; }   /* a chapter without rows: nothing follows for the heading to stand off from */
@media (min-width: 720px) {
  /* on the page's twelve columns: the heading in the first four, staying in sight while its rows pass from
     column 5 on (the line the person page and the page of a work read from) */
  .period { padding-bottom: var(--s7); }
  .period .wrap, .head .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
  .period .wrap { align-items: start; }
  /* The ink rule over the heading is drawn by the chapter, not by the heading, so it leaves with the rule over
     the rows. The heading keeps the rule's place (a border without colour) and stops where that place meets
     the bar's hairline: stuck, it hangs from the bar as it hung from its own rule. */
  .period .wrap::before { content: ""; grid-column: 1 / span 4; grid-row: 1; border-top: 1px solid var(--fg); }
  .period-head { grid-column: 1 / span 4; grid-row: 1; position: sticky; top: calc(var(--bar) - 1px); border-top-color: transparent; }
  .period .wrap > :not(.period-head) { grid-column: 5 / -1; }
  /* a chapter without rows: one rule across the page, the years on the left, the sentence on the line the rows
     of the other chapters read from; nothing passes, so nothing sticks */
  .period-head:only-child { position: static; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; border-top-color: var(--fg); }
  .period-head:only-child > * { grid-column: 5 / -1; }
  .period-head:only-child > :first-child { grid-column: 1 / span 4; }
  /* the head of a page the same way: its title on the left, what is read from column 5, both on one baseline */
  .head .wrap { align-items: baseline; }
  .head .wrap > * { grid-column: 5 / -1; }
  .head .wrap > .page-title { grid-column: 1 / span 4; }
  .page-404 .head .wrap > * { grid-column: 1 / -1; }      /* the one page with nothing to set beside its title */
}

/* ---------- a plain list: a CV, the firm's facts and history, the papers (person, writing) ----------
   Lines at the small text size with air between them and no rule: a list is held together by its own left edge.
   A dated line has its date over it on a phone and in a column of its own from 720px. */

.list { display: grid; row-gap: var(--s2); font-feature-settings: "palt"; }
.list li { display: grid; font: 400 var(--size-small)/var(--lh-list-ko) var(--sans); }
:root[data-lang="en"] .list li { line-height: var(--lh-list); }   /* by the view, not by the line: a Latin line in the Korean view keeps the pitch of its neighbours */
/* a line that runs on fills its first line and never ends on one word. The papers of a chapter are two parts
   each, a title and where it appeared: there the two lines are evened out, and the break falls between the parts */
.list li > span:last-child { text-wrap: pretty; }
.period .list li > span:last-child { text-wrap: balance; }
.list-date { font: 500 var(--size-meta)/var(--lh-list) var(--sans); font-variant-numeric: tabular-nums lining-nums; color: var(--quiet); }
/* a note under a line: the second setting of 13px */
.list .meta { display: inline-block; font-weight: 400; }
@media (min-width: 720px) {
  .list-dated li { grid-template-columns: var(--col-year) 1fr; column-gap: var(--gap-year); align-items: baseline; }
}

/* a part of a long page: a small label in ink, then what it names (the parts of the CV and of the firm) */
.part { display: grid; gap: var(--s3); }
.part > .meta { color: var(--fg); }

/* ---------- a fold: a word that opens what it names ----------
   The one fold of the site:  <details class="fold"><summary>words <span class="views-n">count</span></summary> … </details>
   Set as a line of a list in medium, with no bar and no rule: the words, their count if there is one, and the
   mark right after them, also where the words run to a second line.
   The word has --fold-pad of air above and below: a target of 48px to touch; with a mouse on a wide screen,
   the pitch of a list. The fold takes that air back with its margins, so what the layout sees is the line of
   words: a label stands as close over a fold as over a list, and several folds (.folds) pitch by that air
   alone. A section that ends on a fold needs padding of its own below it. */

.fold { margin-top: calc(var(--fold-pad) * -1); }
.fold:not([open]) { margin-bottom: calc(var(--fold-pad) * -1); }
.fold > summary {
  display: block;
  padding-block: var(--fold-pad);
  padding-right: calc(var(--s2) + var(--mark));   /* room for the mark: it never drops to a line of its own */
  cursor: pointer;
  font: 500 var(--size-small)/var(--lh-list-ko) var(--sans);
  list-style: none;
  text-wrap: balance;
}
:root[data-lang="en"] .fold > summary { line-height: var(--lh-list); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: "";
  display: inline-block;
  width: var(--mark);
  height: var(--mark);
  margin-inline: var(--s2) calc((var(--s2) + var(--mark)) * -1);   /* it takes no room on the line, so nothing can push it off */
  background: var(--mark-plus);
  color: var(--quiet);
}
.fold[open] > summary::after { background: var(--mark-minus); }
/* Inside an open fold: a text, a list, or lists under a small label each. What it holds starts --s3 under the
   word, as a list starts under its label; a group stands --s4 from the one before; the fold ends with what it
   holds. Among several folds it ends --s5 before the word of the next, and the last ends with the part. */
.fold[open] > summary { margin-bottom: calc(var(--s3) - var(--fold-pad)); }
.fold > .list, .fold > .prose { padding-bottom: var(--s3); }
.fold > .meta { display: block; padding: var(--s2) 0 var(--s1); color: var(--quiet); }
.fold > summary + .meta { padding-top: 0; }   /* the first label stands --s3 under the word, as a list does in a fold without groups */
.fold > :last-child { padding-bottom: 0; }
.folds { display: grid; justify-items: start; row-gap: calc(var(--fold-pad) * 2); }
.folds > .fold:not(:last-child) > :last-child { padding-bottom: calc(var(--s5) - var(--fold-pad) * 2); }
/* a count after its word: a word space and --s1 on, in a box of its own so that an underline stays under the word */
.views-n { display: inline-block; margin-left: var(--s1); font-weight: 400; font-size: var(--size-meta); line-height: var(--lh-list); font-variant-numeric: lining-nums; color: var(--quiet); }   /* a label's own line, not the taller one of the word it follows */
@media (hover: hover) {
  /* the words answer to the mouse (the spans the t macro writes), not the space after them */
  .fold > summary:hover > [data-l] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--under); }
}

.prose { max-width: var(--measure); font-size: var(--size-small); line-height: var(--lh-read); color: var(--quiet); text-wrap: pretty; }
.prose p + p { margin-top: var(--s3); }

/* something said only to a reader that reads aloud */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- photographs that open large: the link, and the full-screen viewer that static/js/site.js builds ---------- */

.zoom { position: relative; display: block; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: #000; }
.lightbox-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lightbox-track::-webkit-scrollbar { display: none; }
/* One photograph to a screen, whole. The figure's one cell is as large as the screen less a target's height above
   and below (minmax(0, 1fr): a cell that is left to size itself grows to the photograph, and then nothing limits
   it), so a photograph taller than the screen is fitted by its height, clear of the close tab and of the count. */
.lightbox figure {
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding-block: calc(var(--tap) + env(safe-area-inset-top, 0px)) calc(var(--tap) + env(safe-area-inset-bottom, 0px));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.lightbox img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* the close button: a tab of paper in the top right corner, the one light thing on the black
   (the script also gives it the class "switch", which has no rule) */
.lightbox-close {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s4);
  border: 0;
  background: var(--light);
  color: var(--on-light);
  font: 500 var(--size-meta)/1 var(--sans);
  cursor: pointer;
}
.lightbox-count { position: absolute; left: 0; right: 0; bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--on-shade); font: 500 var(--size-meta)/1 var(--sans); font-variant-numeric: lining-nums; pointer-events: none; }

/* ---------- foot: the firm and how to reach it, set small ---------- */

/* On a phone: the mark and address, then phone, mail and Instagram one under another (each a full tap high),
   then a hairline and the copyright line, --s4 between each of them. From 720px the first two stand side by
   side. From 1000px the foot is on the page's twelve columns: the mark in the first four, the lines that reach
   the firm from column 5 (the line the paper pages read from), the copyright ending on the page's right edge. */
.foot { padding-block: var(--s6) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); font-size: var(--size-small); line-height: var(--lh-list); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
.foot-name { font-weight: 600; letter-spacing: -.005em; }   /* the firm's name in type, where the build has no mark to show */
.foot-logo { display: block; width: 112px; height: auto; }
.foot-logo + .foot-address { margin-top: var(--s3); }
.foot-address { margin-top: var(--s1); font-size: var(--size-meta); color: var(--quiet); }
/* each line is a full tap high; the air that makes it one is taken back above the first and below the last,
   so the gaps around the three lines are the gaps between lines of type */
.foot-reach { display: grid; margin-block: calc((var(--size-small) * var(--lh-list) - var(--tap)) / 2); }
.foot-reach li { display: flex; align-items: baseline; column-gap: var(--s3); }
.foot-reach a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.foot-reach a:hover, .foot-reach a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--under); }
.foot-phone, .foot-hours { white-space: nowrap; }
.foot-hours { font-size: var(--size-meta); color: var(--quiet); }
.foot-copy { padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: var(--size-meta); color: var(--quiet); }
/* a mouse on a wide screen needs no 44px: the three lines close up into one block */
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  .foot-reach { margin-block: 0; row-gap: var(--s1); }
  .foot-reach a { min-height: 0; }
}

@media (min-width: 720px) {
  .foot .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  /* beside the lines of type, the mark starts on their cap line: a 15px capital stands 5px under the top of its line */
  .foot-logo { margin-top: 5px; }
  .foot-copy { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .foot .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .foot-firm { grid-column: 1 / span 4; }
  .foot-reach { grid-column: 5 / span 4; }
  /* the copyright on the baseline of the first of those lines */
  .foot-reach, .foot-copy { align-self: baseline; }
  .foot-copy { grid-column: 9 / -1; padding: 0; border: 0; text-align: right; white-space: nowrap; }
}

/* ---------- less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}