/* Under the home page's first screen (assets/js/home-below.js): selected work, now, hello,
   and the colophon that closes the page. */

.names-wall { will-change: filter, transform; }

.below { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.below em, .hb-colophon em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.below a { color: inherit; }
.hb-sec { padding: var(--s-8) 0 var(--s-6); }
.hb-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.hb-head .label { width: 100%; }
.hb-head h2 { margin: 0; font-size: clamp(1.8rem, 1rem + 2.6vw, 3.2rem); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.05; }
.hb-more { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2); }
.hb-more:hover { color: var(--ink); }

/* Pictures in print, as on /work/; they come up in colour under the pointer. */
.hb-print { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper); }
.hb-print img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.35) brightness(1.06); mix-blend-mode: multiply; transition: filter 420ms var(--ease), transform 600ms var(--ease); }
.hb-print::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(22, 23, 27, 0.5) 0.85px, transparent 1.15px); background-size: 3.5px 3.5px; mix-blend-mode: multiply; opacity: 0.6; transition: opacity 420ms var(--ease); }
a:hover > .hb-print img, a:focus-visible > .hb-print img { filter: none; mix-blend-mode: normal; transform: scale(1.03); }
a:hover > .hb-print::after, a:focus-visible > .hb-print::after { opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hb-print img { filter: grayscale(1) contrast(1.15) brightness(0.85); mix-blend-mode: normal; }
  :root:not([data-theme="light"]) .hb-print::after { background-image: radial-gradient(rgba(236, 238, 243, 0.4) 0.85px, transparent 1.15px); mix-blend-mode: normal; opacity: 0.35; }
}
:root[data-theme="dark"] .hb-print img { filter: grayscale(1) contrast(1.15) brightness(0.85); mix-blend-mode: normal; }
:root[data-theme="dark"] .hb-print::after { background-image: radial-gradient(rgba(236, 238, 243, 0.4) 0.85px, transparent 1.15px); mix-blend-mode: normal; opacity: 0.35; }
.hb-type { display: flex; align-items: flex-end; height: 100%; padding: var(--s-4); font-size: 1.4rem; font-weight: var(--weight-light); }

/* Selected: four rows, picture and words trading sides. */
.hb-mag { display: grid; gap: var(--s-7); }
.hb-mag-i { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--s-6); align-items: center; }
.hb-mag-i.is-flip { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.hb-mag-i.is-flip .hb-print { order: 2; }
.hb-mag-t { display: grid; gap: 10px; }
.hb-mag-t b { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.05; }
.hb-mag-i:hover .hb-mag-t b, .hb-mag-i:focus-visible .hb-mag-t b { font-family: var(--font-serif); font-style: italic; }
.hb-mag-t > span:nth-child(3) { max-width: 44ch; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2); }
.hb-mag-t .mono { font-size: 0.6875rem; color: var(--ink-3); }

/* Now */
.hb-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.hb-now-i { display: grid; align-content: start; gap: 8px; padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: 1px solid var(--line); }
.hb-now-i + .hb-now-i { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.hb-now-i b { font-size: var(--text-md); font-weight: var(--weight-regular); line-height: 1.25; }
.hb-now-i > span:last-child { font-size: var(--text-xs); line-height: 1.5; color: var(--ink-3); }
.hb-now-i:hover b, .hb-now-i:focus-visible b { font-family: var(--font-serif); font-style: italic; }

/* Hello */
.hb-hello { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.hb-face { width: 120px; height: 120px; margin: 0; border-radius: 50%; overflow: hidden; }
.hb-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transform: scale(2.4); transform-origin: 50% 26%; filter: grayscale(1); }
.hb-hello-lead { margin: 0 0 var(--s-3); max-width: 34ch; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: var(--weight-light); line-height: 1.25; }
.hb-hello-links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; font-size: var(--text-sm); }
.hb-hello-links a:first-child { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* The colophon that closes the page */
.hb-colophon { display: grid; gap: var(--s-5); max-width: 1240px; margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-5); }
.hb-col-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-6); border-top: 1px solid var(--line); }
.hb-col-top nav { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--text-sm); color: var(--ink-2); }
.hb-col-top nav a:hover { color: var(--ink); }
.hb-col-bottom { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: 0.6875rem; color: var(--ink-3); }
.hb-col-bottom a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .hb-now { grid-template-columns: 1fr; }
  .hb-now-i + .hb-now-i { padding-left: 0; border-left: 0; }
  .hb-mag-i, .hb-mag-i.is-flip { grid-template-columns: 1fr; gap: var(--s-4); }
  .hb-mag-i.is-flip .hb-print { order: 0; }
  .hb-hello { grid-template-columns: 72px minmax(0, 1fr); }
  .hb-face { width: 72px; height: 72px; }
}