.directory {
    --directory-gutter: clamp(24px, 4.5vw, 76px);
    background-color: var(--bg);
    background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1.15px);
    background-size: 24px 24px;
    background-position: -1px -1px;
}
.directory .page { width: min(100%, 1600px); max-width: 1600px; margin-inline: auto; padding-inline: var(--directory-gutter); }
.directory main { width: 100%; max-width: none; }

.directory-hero {
    min-height: min(520px, calc(100vh - 96px));
    padding: clamp(58px, 7vw, 96px) 0 clamp(50px, 6vw, 76px);
    padding-inline: max(0px, calc((100% - 1500px) / 2));
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    align-items: end;
    gap: clamp(42px, 8vw, 120px);
    border-bottom: 1px solid var(--line);
}

.directory-title {
    max-width: 10ch;
    margin: 28px 0 0;
    font-size: clamp(58px, 8.2vw, 118px);
    font-weight: 500;
    line-height: .88;
}

.directory-title span {
    color: var(--text-2);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.065em;
}

.directory-lead {
    max-width: 38ch;
    padding-bottom: 7px;
    color: var(--text-2);
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.6;
}

.directory-lead strong {
    display: block;
    margin-top: 28px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.directory-index { padding: clamp(58px, 6.5vw, 96px) 0; }
.directory-section-head {
    width: min(100%, 1500px);
    margin-inline: auto;
    margin-bottom: clamp(46px, 6vw, 76px);
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 36px;
}
.directory-section-head h2 {
    margin: 0;
    color: var(--text);
    font-family: var(--display);
    font-size: clamp(44px, 5.3vw, 76px);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .94;
    text-transform: none;
}
.directory-section-head p { max-width: 34ch; color: var(--text-2); font-size: 13px; }

.directory-grid { width: min(100%, 1500px); margin-inline: auto; grid-template-columns: repeat(2, 1fr); }
.directory-grid .project-card { min-height: 310px; }
.directory-grid .project-card:nth-child(2n) { border-right: 0; }
.directory-grid .project-card:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
.directory-grid .project-card h3 { font-size: clamp(34px, 3.7vw, 54px); }
.directory-card-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.directory-status { display: inline-flex; align-items: center; gap: 8px; }
.directory-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.directory-card-foot {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.directory-card-foot span:last-child { color: var(--accent); font-weight: 700; }

@media (max-width: 780px) {
    .directory { --directory-gutter: 20px; }
    .directory-hero { min-height: auto; grid-template-columns: 1fr; gap: 34px; padding: 48px 0; }
    .directory-title { max-width: none; font-size: clamp(52px, 15vw, 82px); }
    .directory-section-head { align-items: flex-start; flex-direction: column; }
    .directory-index { padding: 48px 0; }
    .directory-grid { grid-template-columns: 1fr; }
    .directory-grid .project-card { min-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
    .directory-grid .project-card:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
    .directory-card-foot { align-items: flex-start; flex-direction: column; gap: 8px; }
}