/* Homepage: introduction, category filters, and a shared project grid. */
/* One centered column aligns the header, introduction, artwork, and cards. */
.topbar, .intro, .project-browser, .contact-section, body > footer {
  width: calc(100% - 2 * clamp(22px, 5vw, 88px));
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.category-circles { width: 100%; }
.topbar { border: 0; }
.wordmark { font-size: 20px; font-weight: 400; }
.intro { padding: 54px 0 16px; }
.intro h1 { font-size: clamp(30px, 3.2vw, 48px); font-weight: var(--weight-bold); line-height: 1.25; letter-spacing: .12em; margin: 0 0 22px; }
.intro-belief { color: #595959; font-size: clamp(18px, 1.6vw, 24px); font-weight: var(--weight-bold); line-height: 1.5; max-width: 760px; margin: 0; }
.education { color: #737373; font-size: 14px; font-weight: var(--weight-regular); line-height: 1.6; margin: 24px 0 0; }
.hands-decoration { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hands-decoration img { position: absolute; display: block; width: 100%; height: auto; left: 50%; top: 115px; transform: translate(-50%, -50%); }
.project-browser { padding-bottom: 80px; }
.contact-section { border-top: 1px solid var(--line); padding: 42px 0 64px; display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.contact-section h2 { margin: 0; font-size: 24px; font-weight: var(--weight-bold); }
.contact-section p { margin: 0 0 16px; font-size: 18px; }
.contact-section a { font-size: 16px; font-weight: var(--weight-regular); text-decoration: underline; text-underline-offset: 5px; }
button { font: inherit; color: inherit; }
.category-circles { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1060px; margin: 30px auto 64px; }
.category-filter { position: relative; z-index: 1; --category-color: #dab699; border: 0; padding: 0; background: transparent; cursor: pointer; font-weight: 400; }
.empower { --category-color: #b5c2d3; }
.engage { --category-color: #becab0; }
.circle { display: flex; align-items: center; justify-content: center; width: min(100%, 230px); aspect-ratio: 1; border: 1px solid #222; border-radius: 50%; margin: 0 auto 18px; background: rgb(255 255 255 / 72%); transition: background-color .25s ease, border-color .25s ease; }
.circle-copy { display: flex; flex-direction: column; gap: 9px; max-width: 80%; opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
.circle-copy strong { font-size: 23px; line-height: 1.2; font-weight: 400; letter-spacing: .06em; }
.circle-copy > span { font-size: 15px; line-height: 1.4; font-style: italic; font-variation-settings: "wdth" 75, "slnt" -12; }
.category-subtitle { display: block; font-size: 16px; font-style: italic; font-variation-settings: "wdth" 75, "slnt" -12; }
.category-filter:hover .circle, .category-filter:focus-visible .circle, .category-filter[aria-pressed="true"] .circle { background: color-mix(in srgb, var(--category-color) 50%, transparent); border-color: var(--category-color); }
.category-filter:hover .circle-copy, .category-filter:focus-visible .circle-copy, .category-filter[aria-pressed="true"] .circle-copy { opacity: 1; transform: none; }
.category-filter[aria-pressed="true"] .category-subtitle { text-decoration: underline; text-underline-offset: 6px; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 3px; }
.projects-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 28px; font-weight: 400; }
#show-all { cursor: pointer; background: none; border: 0; padding: 4px 0; font-size: 18px; }
#show-all[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 6px; }
#project-status { margin: 0; color: var(--muted); font-size: 16px; }
.project-card[hidden] { display: none; }
.project-card { min-width: 0; }
.card-caption h3 { overflow-wrap: anywhere; font-size: 16px; font-weight: 400; letter-spacing: 0; }
@media (hover: none) { .circle-copy { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .intro { padding-top: 42px; }
  .intro h1 { font-size: clamp(28px, 5vw, 38px); }
  .intro-belief { font-size: 18px; }
  .education { font-size: 14px; }
  .hands-decoration img { top: 100px; }
  .category-circles { gap: 18px; margin-top: 16px; margin-bottom: 44px; }
  .circle-copy strong { font-size: 19px; }
  .circle-copy > span { font-size: 14px; }
  .category-subtitle { font-size: 16px; }
}
@media (max-width: 520px) {
  .contact-section { grid-template-columns: 1fr; }
  .category-circles { grid-template-columns: 1fr; gap: 28px; }
  .hands-decoration img { width: 500px; max-width: none; left: 72.5px; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
  .topbar { gap: 18px; flex-wrap: wrap; height: auto; min-height: 90px; padding: 14px 0; }
  .category-filter { display: grid; grid-template-columns: 145px 1fr; gap: 24px; align-items: center; text-align: left; }
  .circle { margin: 0; text-align: center; }
  .category-subtitle { font-size: 16px; }
}

/* Show the complete Renovate application collage, including on hover. */
.project-card[href="projects/renovate-it-yourself.html"] .image-wrap { background:#1c1c1c; }
.project-card[href="projects/renovate-it-yourself.html"] img { object-fit:contain; transform:none; }

/* Center the Unhoused America interactive map cover. */
.project-card[href="projects/unhoused-america.html"] .image-wrap { background: #252356; filter: grayscale(1); transition: filter .35s ease; }
.project-card[href="projects/unhoused-america.html"] img { object-fit: cover; object-position: left center; transform: none; }

.project-card[href="projects/unhoused-america.html"]:hover .image-wrap, .project-card[href="projects/unhoused-america.html"]:focus-visible .image-wrap { filter: grayscale(0); }

.card-status { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); font-weight: 400; }
.project-card[href="projects/ami-brochure.html"] .image-wrap { background: #fff; }
.project-card[href="projects/ami-brochure.html"] img { object-fit: contain; object-position: center; transform: none; }