@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/alegreya-sans-900.woff') format('woff'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/alegreya-sans-400.woff') format('woff'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/alegreya-sans-500.woff') format('woff'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/alegreya-sans-700.woff') format('woff'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/alegreya-sans-800.woff') format('woff'); }
/* Bold humanist sans lettering with a soft, handmade rhythm. */
:root { --font: 'Alegreya Sans', 'Trebuchet MS', Arial, sans-serif; --ink: #493323; --muted: var(--accent); --accent: #753522; }
body, button { font-family: var(--font); }
.home .word-row > span:first-child { font-family: var(--font); font-weight: 900; letter-spacing: -.02em; line-height: 1.18; }
.home .word-row > .keyword-right, .home .word-row > .concept-tagline { font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.catalog-title, .articles-intro h1, .reading-header h1, .info-name,
.detail-information h2, .catalog-heading h2, .relation-heading h2,
.concept-card h3, .article-body h2, .project-gallery-heading h1 {
  font-family: var(--font); font-weight: 700; letter-spacing: -.02em;
}
.work-title h2, .catalog-projects .grid-project h3, .type-panel h3,
.research-card h3, .article-entry h2, .perspective-list summary,
.contact-section h2 { letter-spacing: -.02em; }
.reading-lead, .detail-description, .info-intro > p { letter-spacing: 0; }
.article-body { line-height: 1.8; }
.main-nav, .detail-tabs { font-size: .9375rem; }
.identity { font-weight: 600; letter-spacing: -.015em; }
a:hover, .main-nav [aria-current=page], .detail-tabs [aria-selected=true] { color: var(--accent); }
::selection { background: #c5a780; color: #493323; }
.work-image img.is-illustration, .grid-image img.is-illustration,
#product-design .grid-image img.is-illustration, .detail-figure img.is-illustration {
  object-fit: contain; filter: none; mix-blend-mode: multiply;
}
.work-link:hover img.is-illustration, .grid-project:hover img.is-illustration { transform: none; filter: none; }
.detail-figure img.is-illustration { object-position: center; }
@media (max-width: 640px) {
  .main-nav { font-size: .875rem; }
  .home .word-row > span:first-child { letter-spacing: -.025em; }
}

/* Two inks: brown for main text, earth red for annotations and navigation. */
.home .word-row > .keyword-right,
.home .word-row > .concept-tagline,
.page-label, .card-category, .entry-category, .reading-category,
.detail-location, .work-title > span, .footer-studio {
  color: var(--accent);
}

/* Small project watercolors stay still behind the unchanged moving type. */
.home { isolation: isolate; }
.home-project-sketches {
  position: fixed; inset: 0 0 var(--bar); z-index: 0;
  pointer-events: none; overflow: hidden;
}
.home-project-sketches img {
  position: absolute; left: var(--x); top: var(--y);
  width: min(var(--size), 230px); height: auto; max-height: 24%;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--turn));
  opacity: .38; filter: saturate(.8); mix-blend-mode: multiply;
}
.home-content { position: relative; z-index: 1; }
.information .info-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 30%);
  align-content: start;
  column-gap: clamp(24px, 5vw, 80px);
}
.information .info-name { grid-column: 1 / -1; }
.information .personal-portrait {
  grid-column: 2; grid-row: 2; align-self: center;
  width: 100%; max-width: 360px; justify-self: center;
}
.personal-portrait img { width: 100%; height: auto; mix-blend-mode: multiply; }
.information .info-intro > p { grid-column: 1; grid-row: 2; align-self: center; }
.information .intro-bottom { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .information .info-intro { display: flex; }
  .information .personal-portrait { width: min(76%, 300px); align-self: center; }
}
@media (max-width: 640px) {
  .home-project-sketches { bottom: 110px; }
  .home-project-sketches img {
    width: calc(var(--size) * 1.6); max-width: 115px; max-height: 18%;
  }
}