/* A shared warm paper surface and ink palette on every route. */
:root {
  --paper: #fdfcf8;
  --gallery: var(--paper);
  --index: var(--paper);
  --info: var(--paper);
  --ink: #493323;
  --muted: #604731;
  --paper-grain: url('/assets/paper-grain-light.svg');
}
html, body.home, body.page, body.detail {
  --page-color: var(--paper);
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: 240px 240px;
  color: var(--ink);
}
.home-header, .page-header, .site-footer, .detail-footer, .close-project,
.type-panel, .catalog-project:nth-child(4n) .type-panel,
.catalog-project:nth-child(3n) .type-panel {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: 240px 240px;
}
/* Large words on the left; one consistent small scale on the right. */
.home .word-set { padding-inline: var(--edge); }
.home .word-row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 4vw, 64px);
}
.home .word-row > span { white-space: normal; min-width: 0; overflow-wrap: break-word; }
.home .keyword-row { padding-block: clamp(14px, 2vw, 32px); }
.home .keyword-row > .keyword-left {
  font-size: clamp(3rem, 9.75vw, 11.25rem);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.home .word-row > .keyword-right,
.home .word-row > .concept-tagline {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 30ch;
  padding: 0;
  text-wrap: pretty;
  color: var(--muted);
}
.home .concept-row { font-size: clamp(4.125rem, 18vw, 19.5rem); }
@media (max-width: 640px) {
  .home .word-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
  .home .keyword-row > .keyword-left { font-size: clamp(2.625rem, 11.7vw, 4.6875rem); }
  .home .word-row > .keyword-right, .home .word-row > .concept-tagline { font-size: 1rem; }
  .home .concept-row { padding-block: 10px 16px; }
}

/* A single bold typographic treatment for the entire left column. */
.home .word-row > span:first-child {
  font-family: var(--font);
  font-weight: 700;
  font-style: normal;
  line-height: 1.18;
  letter-spacing: -.065em;
}

/* A closer rhythm and lowercase lettering throughout the homepage. */
.home { text-transform: lowercase; }
.home .identity { text-transform: uppercase; }
.home .word-row.keyword-row { padding-block: clamp(6px, .8vw, 13px); }
.home .word-row.concept-row { padding-block: 0 .045em; }
.home .word-row > span:first-child { line-height: 1.12; }

/* Plain, monochrome arrows with identical rendering on mobile and desktop. */
.ui-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  flex-shrink: 0;
  overflow: visible;
}