.ten32-project-directory {
  --dir-ink: #14251d;
  --dir-moss: #426127;
  --dir-paper: #f5f0df;
  --dir-rule: #b7c1ad;
  --dir-orange: #e66b3f;
  position: relative;
  isolation: isolate;
  padding: clamp(54px, 7vw, 108px) max(20px, calc((100vw - 1280px) / 2)) clamp(58px, 7vw, 100px);
  border-top: 6px solid var(--dir-orange);
  background:
    radial-gradient(circle at 88% 5%, rgba(230, 107, 63, .14), transparent 26%),
    radial-gradient(circle at 8% 74%, rgba(111, 143, 79, .13), transparent 27%),
    linear-gradient(146deg, #f8f4e9, #e8eddf 62%, #e3e9d8);
  color: var(--dir-ink);
}
.ten32-project-directory,
.ten32-project-directory * { box-sizing: border-box; }
.ten32-project-directory::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  background-image: radial-gradient(rgba(20, 37, 29, .16) .55px, transparent .55px);
  background-size: 6px 6px;
}
.ten32-project-directory__inner { width: min(100%, 1280px); margin-inline: auto; }
.ten32-project-directory__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .38fr);
  gap: clamp(20px, 5vw, 84px);
  align-items: end;
  padding-bottom: clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--dir-rule);
}
.ten32-project-directory__eyebrow,
.ten32-project-directory__group-number,
.ten32-project-directory__feature-number,
.ten32-project-directory__campaign-label {
  margin: 0;
  font: 800 .67rem/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.ten32-project-directory__eyebrow { color: #724e36; }
.ten32-project-directory h2 {
  max-width: 13ch;
  margin: 14px 0 0;
  font: 700 clamp(2.8rem, 6vw, 6rem)/.93 Georgia, 'Times New Roman', serif;
  letter-spacing: -.065em;
  color: var(--dir-ink);
}
.ten32-project-directory h2 em { color: var(--dir-moss); font-style: italic; }
.ten32-project-directory__lead-side p { margin: 0 0 19px; max-width: 31ch; font: 1.06rem/1.5 Arial, Helvetica, sans-serif; }
.ten32-project-directory__all {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid var(--dir-ink);
  background: var(--dir-ink);
  color: #fff8e8;
  font: 800 .78rem/1.35 Arial, Helvetica, sans-serif;
  text-decoration: none;
}
.ten32-project-directory__all:hover { background: #315039; }
.ten32-project-directory__featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(22px, 3vw, 34px) 0 clamp(36px, 4vw, 56px);
}
.ten32-project-directory__feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 354px;
  overflow: hidden;
  border: 1px solid #263628;
  color: #fff8e8;
  text-decoration: none;
  background: #17271e;
  transition: border-color .18s ease, background-color .18s ease;
}
.ten32-project-directory__feature:hover { border-color: var(--dir-orange); }
.ten32-project-directory__feature-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 8.4;
  overflow: hidden;
  background: #1c302a;
}
.ten32-project-directory__feature-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ten32-project-directory__feature--five .ten32-project-directory__feature-visual {
  background: radial-gradient(circle at 84% 13%, #f7c586 0 8%, transparent 8.4%), linear-gradient(150deg, #d3e6a5 0%, #2d8b79 53%, #183a5d 100%);
}
.ten32-project-directory__five-mark { color: #fffbea; font: 900 clamp(4.3rem, 9vw, 8.2rem)/.8 Georgia, serif; letter-spacing: -.09em; text-shadow: 0 10px 0 #142b3466; }
.ten32-project-directory__feature--hse .ten32-project-directory__feature-visual {
  background: #061c42;
}
.ten32-project-directory__feature--hse .ten32-project-directory__feature-visual img { object-fit: contain; }
.ten32-project-directory__feature--bacon .ten32-project-directory__feature-visual { background: #1d3028; }
.ten32-project-directory__feature--bacon .ten32-project-directory__feature-visual img { object-fit: contain; object-position: center; }
.ten32-project-directory__image-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 7px;
  border: 1px solid #fff8e8a8;
  color: #fff8e8;
  background: #102a2bc9;
  font: 800 10px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .03em;
}
.ten32-project-directory__feature-body { display: flex; flex: 1; flex-direction: column; padding: 19px clamp(16px, 2vw, 25px) 18px; }
.ten32-project-directory__feature-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ten32-project-directory__feature-number { color: #efb897; }
.ten32-project-directory__status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 8px; border: 1px solid currentColor; color: #dafba0; font: 800 .66rem/1.25 Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.ten32-project-directory__feature h3 { margin: 14px 0 8px; font: 700 clamp(1.5rem, 2.2vw, 2.2rem)/1.04 Georgia, serif; letter-spacing: -.045em; color: #fff8e8; }
.ten32-project-directory__feature p { margin: 0; color: #d6e4d1; font: .88rem/1.5 Arial, sans-serif; }
.ten32-project-directory__feature-arrow { align-self: flex-end; margin-top: auto; padding-top: 12px; color: #f0b790; font-size: 1.4rem; }
.ten32-project-directory__portals[hidden],
.ten32-project-directory__group[hidden] { display: none !important; }
.ten32-project-directory__groups { columns: 2; column-gap: 14px; }
.ten32-project-directory__group { display: inline-block; width: 100%; min-width: 0; margin: 0 0 14px; padding: clamp(19px, 2.5vw, 29px); border: 1px solid #c7cebb; background: #fdfbf3e8; box-shadow: 0 14px 30px #253e2110; break-inside: avoid; }
.ten32-project-directory__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 2px solid var(--dir-ink); }
.ten32-project-directory__group h3 { margin: 0; font: 700 clamp(1.35rem, 2vw, 1.8rem)/1.12 Georgia, serif; letter-spacing: -.035em; color: var(--dir-ink); }
.ten32-project-directory__group-number { color: #647455; white-space: nowrap; }
.ten32-project-directory__list { list-style: none; margin: 0; padding: 0; }
.ten32-project-directory__list li + li { border-top: 1px solid #d5dbc9; }
.ten32-project-directory__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 62px; padding: 9px 2px; text-decoration: none; }
.ten32-project-directory__list a:hover .ten32-project-directory__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ten32-project-directory__name { min-width: 0; color: var(--dir-ink); font: 800 .91rem/1.25 Arial, sans-serif; }
.ten32-project-directory__list .ten32-project-directory__status { grid-column: 1; width: max-content; min-height: 0; padding: 2px 5px; color: #426127; font-size: .6rem; }
.ten32-project-directory__status--pilot { color: #5e5533 !important; }
.ten32-project-directory__status--demo { color: #36577b !important; }
.ten32-project-directory__status--developing { color: #8b4f38 !important; }
.ten32-project-directory__feature .ten32-project-directory__status--developing { color: #ffd0b5 !important; }
.ten32-project-directory__link-arrow { grid-column: 2; grid-row: 1 / span 2; color: #44662c; font-size: 1.2rem; }
.ten32-project-directory__campaigns { display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 14px; padding: clamp(20px, 2.5vw, 30px); border: 1px solid #1e3529; color: #f7f3e9; background: radial-gradient(circle at 90% 12%, #4560477a, transparent 25%), linear-gradient(115deg, #1c3025, #10241d); }
.ten32-project-directory__campaigns h3 { margin: 6px 0 0; color: #f7f3e9; font: 700 clamp(1.4rem, 2.3vw, 2.15rem)/1.07 Georgia, serif; letter-spacing: -.04em; }
.ten32-project-directory__campaign-label { color: #f4b88f; }
.ten32-project-directory__campaigns p { margin: 8px 0 0; max-width: 42ch; color: #cfdcca; font: .82rem/1.45 Arial, sans-serif; }
.ten32-project-directory__campaign-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.ten32-project-directory__campaign-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 11px 13px; border: 1px solid #8da487; color: #f7f3e9; text-decoration: none; font: 800 .76rem/1.3 Arial, sans-serif; }
.ten32-project-directory__campaign-list a:hover { background: #ffffff19; }
.ten32-project-directory a:focus-visible { outline: 3px solid #e66b3f; outline-offset: 3px; }
@media (max-width: 960px) {
  .ten32-project-directory__featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ten32-project-directory__campaigns { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ten32-project-directory { padding-inline: 20px; }
  .ten32-project-directory__lead { grid-template-columns: 1fr; gap: 16px; }
  .ten32-project-directory__lead-side p { max-width: 55ch; }
  .ten32-project-directory__featured { grid-template-columns: 1fr; }
  .ten32-project-directory__groups { columns: 1; }
  .ten32-project-directory__portals { margin: 0 0 14px; }
  .ten32-project-directory__portals-label {
    margin: 0 0 10px;
    color: #5a694c;
    font: 800 10px/1.35 Arial, Helvetica, sans-serif;
    letter-spacing: .14em;
  }
  .ten32-project-directory__portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .ten32-project-directory__portal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    min-height: 112px;
    padding: 12px;
    border: 2px solid #364f3c;
    border-radius: 0;
    color: #fff8e8;
    background: linear-gradient(135deg, #1a3939, #102b29);
    text-align: left;
    box-shadow: 0 4px 0 #173328;
  }
  .ten32-project-directory__portal:nth-child(2) { background: linear-gradient(135deg, #365323, #1b3528); }
  .ten32-project-directory__portal:nth-child(3) { background: linear-gradient(135deg, #453c2d, #232f2b); }
  .ten32-project-directory__portal:nth-child(4) { background: linear-gradient(135deg, #4d322b, #263329); }
  .ten32-project-directory__portal[aria-pressed="true"] { border-color: #e66b3f; box-shadow: 0 4px 0 #e66b3f; }
  .ten32-project-directory__portal > span { color: #f5c2a0; font: 800 9px/1.2 Arial, Helvetica, sans-serif; letter-spacing: .12em; }
  .ten32-project-directory__portal > strong { max-width: 14ch; font: 700 clamp(16px, 4.4vw, 19px)/1.08 Georgia, serif; letter-spacing: -.03em; }
  .ten32-project-directory__portal > small { display: flex; justify-content: space-between; align-items: center; gap: 5px; width: 100%; color: #dcead8; font: 700 10px/1.25 Arial, Helvetica, sans-serif; }
  .ten32-project-directory__portal b { color: #f5c2a0; font-size: 16px; font-weight: 400; }
  .ten32-project-directory__portal:hover { border-color: #f5c2a0; }
  .ten32-project-directory__portal:focus-visible { outline: 3px solid #e66b3f; outline-offset: 3px; }
  .ten32-project-directory__group:not([hidden]) { animation: ten32-directory-cut .18s ease-out both; }
  .ten32-project-directory__feature { min-height: 0; }
  .ten32-project-directory__feature-visual { aspect-ratio: 16 / 7.5; }
  .ten32-project-directory__feature--hse .ten32-project-directory__feature-visual { aspect-ratio: 4 / 3; }
  .ten32-project-directory__campaign-list { grid-template-columns: 1fr; }
}
@keyframes ten32-directory-cut { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 350px) { .ten32-project-directory { padding-inline: 16px; } .ten32-project-directory__group { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .ten32-project-directory__feature { transition: none; } .ten32-project-directory__group:not([hidden]) { animation: none; } }

/* Four featured destinations form an intentional two-by-two gallery. */
.ten32-project-directory__feature--people .ten32-project-directory__feature-visual { background: #f4f1e8; }
.ten32-project-directory__feature--people .ten32-project-directory__feature-visual img { object-fit: contain; }