/* type.css: typography and layout of the text on the walls.
   Every wall is a 600 x 600 px box (the engine scales and warps it), so all
   sizes here are in px of that box. cqw units are % of the box width. */

@font-face { font-family: 'STIX Two Text'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(../fonts/stix-two-text-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'STIX Two Text'; font-weight: 400 700; font-style: italic; font-display: swap; src: url(../fonts/stix-two-text-latin-wght-italic.woff2) format('woff2'); }

/* ------------------------------------------------------------------
   One system for every pane.

   Grid     6 columns, 28px margins, 12px gutters. Labels take the first
            two columns, content the other four. Unlabelled lists span all six.
   Voices   STIX Two Text: Regular for small text, Medium for the big names,
            Bold for pane titles and the name on the first pane; italic for
            emphasis and footnotes.
   Scale    19 (labels, notes) / 22 (pane title) / then one large size per
            pane, chosen by how many rows it holds: 24, 28, 32, 34, 40, 44.
            The steps are deliberately close: the largest type is a little over twice the smallest.
   Rows     Every list fills the pane top to bottom in equal rows, ruled
            edge to edge, with text hanging from the rule.
   ------------------------------------------------------------------ */

.wall {
  --mx: 28px;                                   /* side margin */
  --gut: 12px;                                  /* gutter */
  --col: calc((100cqw - 2 * var(--mx) - 5 * var(--gut)) / 6);
  --label: calc(2 * var(--col) + 2 * var(--gut));   /* width of the label column, gutter included */
  --s: 19px;                                    /* small text */
  /* rule weight. The tesseract's edges are 1.25px on screen, but this box is scaled down to fit,
     so a 1px rule in here lands thinner. --vpx is px per vmin; the wall is ~53vmin tall on a laptop,
     so 1.25 * 600 / 53 = 14.2. Portrait and short landscape screens size the wall differently (below). */
  --rule: calc(14.2px / var(--vpx, 8));

  /* typeface knobs: swap these to change the whole site's voice */
  --text: 'STIX Two Text', Georgia, serif;         /* labels, notes, pane titles */
  --display: var(--text);                       /* the big names and the name on the first pane */
  --w-name: 500;                                /* weight of the big names */
  --w-h1: 700;                                  /* weight of the first-pane name */
  --track: -.02em;                              /* letter-spacing of the big names */
  --display-style: normal;                      /* normal or italic */
  --stretch: 100%;                              /* width, for families that have a width axis */
  --fvs: normal;                                /* extra font-variation-settings for display type */
  --name-scale: 1;                              /* multiplies every big-name size (wide faces need less) */
  --h1-fit: 3.49;                               /* width of "Zak Hap" in ems, used to fit it to the pane */
  container-type: inline-size;
  padding: 0; display: flex; flex-direction: column;
  color: var(--ink);
  font: 400 var(--s)/1.3 var(--text);
  font-kerning: normal; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--bg); }
/* links: no underline at rest; a small drawn arrow follows the text. The arrow is a
   mask, not a glyph, so it looks the same in every typeface and takes the ink colour. */
.wall a { color: inherit; text-decoration: none; }
.wall a::after {
  content: ""; display: inline-block; width: .62em; height: .46em; margin-left: .26em; vertical-align: .06em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M0 6h14.5M9.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M0 6h14.5M9.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wall a:hover, .wall a:focus-visible { text-decoration: underline wavy; text-decoration-thickness: .05em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.wall a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.wall em { font-style: italic; }
/* links inside running text (descriptions) take a hairline underline instead of the arrow,
   so the arrow doesn't break a sentence ("Charlie Freiberg, since") */
.wall small a { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .18em; }
.wall small a::after { content: none; }

/* pane title: small, top left, same place on every pane, ruled off from the rest edge to edge like the rows */
.wall h2 { flex: none; height: 58px; margin: 0; padding: 20px var(--mx) 0; font: 700 22px/1 var(--text); letter-spacing: -.01em; white-space: nowrap; border-bottom: var(--rule) solid var(--ink); }

/* rows */
.wall ul { list-style: none; margin: 0; padding: 0; }
.wall .rows { flex: 1; display: flex; flex-direction: column; }
.wall .rows li {
  flex: 1; display: grid; grid-template-columns: var(--label) 1fr; align-content: start; align-items: baseline;
  padding: 13px var(--mx) 0;
  border-top: var(--rule) solid var(--ink); box-shadow: inset 0 1px 0 #fff;    /* ink rule with the white under-edge */
}
.wall .rows li:first-child { border-top: 0; box-shadow: none; }   /* no rule directly under the title */
.wall .rows.full li { grid-template-columns: 1fr; }
.wall .k { font-size: var(--s); line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wall .v {
  font-family: var(--display); font-size: calc(var(--name) * var(--name-scale)); line-height: 1;
  font-weight: var(--w-name); font-style: var(--display-style); font-stretch: var(--stretch); font-variation-settings: var(--fvs);
  letter-spacing: var(--track); text-wrap: balance;
}
.wall .v small { display: block; margin-top: 8px; max-width: 34ch; font: 400 var(--s)/1.3 var(--text); font-stretch: 100%; font-variation-settings: normal; letter-spacing: 0; text-wrap: pretty; }
.wall .n-s   { --name: 24px; }
.wall .n-m   { --name: 28px; }
.wall .n-l   { --name: 32px; }
.wall .n-lx  { --name: 34px; }
.wall .n-xl  { --name: 40px; }
.wall .n-xxl { --name: 44px; }
.wall .n-s .v { letter-spacing: -.02em; }
.wall .n-s .v small { margin-top: 6px; }

/* footnote: bottom of the pane, in the content columns */
.wall .foot { flex: none; margin: 0; padding: 0 var(--mx) 24px calc(var(--mx) + var(--label)); font-size: var(--s); line-height: 1.3; display: flex; justify-content: space-between; gap: 16px; }

/* first pane: the name across the full width; contents and intro hang from the bottom on the same two columns */
.wall h1 {
  margin: 0; padding: 18px var(--mx) 0; white-space: nowrap; line-height: 1;
  font-family: var(--display); font-weight: var(--w-h1); font-style: var(--display-style); font-stretch: var(--stretch); font-variation-settings: var(--fvs);
  letter-spacing: -.04em; text-indent: -.04em;
  font-size: min(84px, calc((100cqw - 2 * var(--mx)) / var(--h1-fit)));    /* fitted to the pane's width */
}
.wall .masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px var(--mx) 0; }
.wall .masthead h1 { padding: 0; }
/* social icons, far right of the name: white marks, no arrow, dim a little on hover */
.wall .social { list-style: none; margin: 0; padding: 6px 0 0; display: grid; grid-template-columns: repeat(2, 26px); grid-auto-rows: 26px; gap: 14px; }   /* a 2 x 2 square; 6px down to the top of the k and h */
.wall .social a { display: flex; align-items: center; width: 26px; height: 26px; transition: opacity .15s ease; }   /* every mark is 26px wide, centred in its square; each viewBox is trimmed to its shape */
.wall .social a::after { content: none; }
.wall .social a:hover { opacity: .65; text-decoration: none; }
.wall .social svg { display: block; width: 100%; height: auto; }
/* the "recent" box on the first pane: an old-school dashed box on the grid, label | one or two items, each a link + one line.
   The "new!" before each link blinks like the old <blink> tag (hard on/off), and holds still for reduced motion. */
.wall .new {
  margin: 24px var(--mx) 0; padding: 14px var(--mx) 16px;
  display: grid; grid-template-columns: calc(var(--label) - var(--mx)) 1fr; align-items: baseline;
  border: var(--rule) dashed var(--ink);
}
.wall .new p { margin: 0; }
.wall .new ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wall .new .k { font-weight: 700; }
.wall .new li { position: relative; }
/* small "new!" hanging in the label column, just left of each item's name, so the names stay aligned */
.wall .blink { position: absolute; right: 100%; top: .16em; margin-right: 12px; font: 700 var(--s)/1 var(--text); letter-spacing: 0; white-space: nowrap; animation: blink 1.2s steps(1, end) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .wall .blink { animation: none; } }
.wall .split { margin-top: auto; padding: 0 var(--mx) 26px; display: grid; grid-template-columns: var(--label) 1fr; align-items: end; }
.wall .toc li { font-size: 18px; line-height: 1.45; font-weight: 700; }
.wall .lede { margin: 0; font-size: 22px; line-height: 1.25; text-wrap: pretty; }
.wall .lede b { font-weight: 700; }

/* ---- essay pages: running text on the walls ----
   Same grid: prose starts one column in and runs to the right margin. About 140 words fit on a pane. */
.wall.essay h1 { white-space: normal; text-wrap: balance; font-size: 60px; line-height: 1.02; letter-spacing: -.025em; text-indent: 0; padding-top: 6px; }
.wall .crumb { margin: 0; padding: 26px var(--mx) 0; font-weight: 700; font-size: 22px; line-height: 1; }
.wall .prose { flex: 1; padding: 18px var(--mx) 24px calc(var(--mx) + var(--col) + var(--gut)); font-size: 21px; line-height: 1.38; hyphens: manual; }
.wall .prose p { margin: 0; text-wrap: pretty; }
.wall .prose p + p { text-indent: 1.4em; }                 /* paragraphs are marked by an indent, not a gap */
.wall .epigraph { margin: auto 0 0; padding: 0 var(--mx) 26px calc(var(--mx) + var(--label)); font-size: 21px; line-height: 1.35; font-style: italic; }   /* hangs from the bottom, in the content columns */
.wall .epigraph p { margin: 0; }
.wall .epigraph cite { display: block; margin-top: 8px; font-size: var(--s); font-style: normal; }

.wall .crumb { display: flex; justify-content: space-between; align-items: baseline; }
.wall .crumb time { font-weight: 400; font-size: var(--s); font-variant-numeric: tabular-nums; }


.wall .prose strong { font-weight: 700; }
.wall .prose .quote { margin: 0 0 14px; font-style: italic; }
.wall .prose .quote p { margin: 0; text-indent: 0; }
.wall .prose .quote cite { display: block; margin-top: 6px; font-size: var(--s); font-style: normal; }
.wall .prose .note { font-size: var(--s); line-height: 1.35; text-indent: 0; }
.wall .prose.lead { flex: none; padding-bottom: 14px; }
.wall p.epigraph { font-style: normal; }

/* the sho photo: appears over the label column when "sho" is hovered, tapped or focused */
.wall .peek { cursor: help; text-decoration: underline dotted; text-decoration-thickness: .06em; text-underline-offset: .18em; }
.wall .peek img {
  position: absolute; left: var(--mx); bottom: 24px; height: 460px; width: auto; z-index: 1;
  opacity: 0; transition: opacity .18s ease; pointer-events: none; outline: 1px solid var(--ink);
}
.wall .peek:hover img, .wall .peek:focus img { opacity: 1; }


/* ---- phones (portrait, or landscape and short): the wall fills more of the screen, so small text is larger ---- */
@media (orientation: portrait), (max-height: 500px) {
  .wall { --s: 21px; --mx: 24px; --rule: calc(9px / var(--vpx, 4)); }   /* wall is ~83vmin wide here */
  .wall h2 { font-size: 25px; }
  .wall .v small { max-width: none; margin-top: 8px; line-height: 1.25; }
  .wall .toc li { font-size: 21px; }
  .wall .lede { font-size: 24px; line-height: 1.22; }
  .wall .prose, .wall .epigraph { font-size: 23px; line-height: 1.32; padding-left: var(--mx); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .wall { --rule: calc(8.3px / var(--vpx, 4)); }    /* short landscape: wall is ~90vmin tall */
}

/* ---- colour scheme: white lines and text on cobalt. Delete this block to go back to black on grey. ---- */
:root { --bg: #4a5fa5; --ink: #fff; }
.lines > i, .wall .rows li { box-shadow: none; }                 /* no white under-edge: the lines are already white */

/* ---- everything lower case, except running prose, which keeps its capitals ("LLMs", "I", "McLuhan").
        Delete the first rule to undo all of it; delete the second to lower-case the essays too. ---- */
.wall { text-transform: lowercase; }
.wall .prose, .wall .epigraph:not(p) { text-transform: none; }

/* moving between pages of the site cross-fades instead of flashing, where the browser supports it */
@view-transition { navigation: auto; }