.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(42px, 7vw, 90px);
  align-items: end;
  padding-top: 72px;
  padding-bottom: 82px;
}

.portal-hero h1 {
  max-width: 850px;
  margin-bottom: 24px;
  font-size: clamp(3rem, 7vw, 6rem);
}

.portal-lead {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
}

.portal-note {
  padding: 28px;
  border-radius: 24px;
  background: var(--forest);
  color: white;
}

.portal-note strong { display: block; margin-bottom: 8px; font-size: 1.15rem; }
.portal-note p { margin: 0; color: #c5d8d0; }

.directory-band {
  padding-top: 88px;
  padding-bottom: 100px;
  background: var(--cream);
}

.directory-heading {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 44px;
}

.directory-heading p { color: var(--ink-soft); }

.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.directory-card {
  min-height: 275px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.directory-card:hover,
.directory-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--sage-deep);
  box-shadow: var(--shadow);
}

.directory-card h2,
.directory-card h3 { margin: 22px 0 12px; font-size: 1.65rem; }
.directory-card p { color: var(--ink-soft); }
.directory-card .card-link { margin-top: auto; color: var(--terracotta-dark); font-weight: 800; }

.directory-card.published { border-color: #a9c7b2; background: #f7fbf8; }

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecebe7;
  color: #606965;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.status-badge.published { background: var(--sage); color: var(--forest); }
.status-badge.planned { background: #f4e4da; color: var(--terracotta-dark); }

.pathway-section { padding-top: 96px; padding-bottom: 104px; }
.pathway-section + .pathway-section { border-top: 1px solid var(--line); }

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.pathway-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
}

.pathway-card h2,
.pathway-card h3 { margin-bottom: 12px; font-size: 1.55rem; }
.pathway-card p { color: var(--ink-soft); }
.pathway-card a { color: var(--terracotta-dark); font-weight: 800; text-decoration: none; }

.structure-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.structure-slot {
  min-height: 190px;
  padding: 26px;
  border: 1px dashed #b7c4bc;
  border-radius: 20px;
  background: #fbfaf6;
}

.structure-slot span {
  display: block;
  margin-bottom: 12px;
  color: var(--terracotta-dark);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.structure-slot h2,
.structure-slot h3 { margin-bottom: 10px; font-size: 1.45rem; }
.structure-slot p { margin-bottom: 0; color: var(--ink-soft); }

.build-state {
  margin: 38px 0;
  padding: 26px 28px;
  border-left: 5px solid var(--terracotta);
  border-radius: 4px 18px 18px 4px;
  background: #fff6ee;
}

.build-state p { margin: 5px 0 0; color: var(--ink-soft); }

.crossroads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 100px;
}

.crossroad-card {
  padding: 34px;
  border-radius: 24px;
  background: var(--sage);
}

.crossroad-card:nth-child(2) { background: var(--forest); color: white; }
.crossroad-card:nth-child(2) p { color: #c4d7cf; }
.crossroad-card h2 { font-size: 2rem; }
.crossroad-card p { color: var(--ink-soft); }
.crossroad-card a { font-weight: 850; text-decoration: none; border-bottom: 1px solid currentColor; }

.material-directory {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 70px;
  padding-bottom: 110px;
}

.material-facets { display: grid; gap: 16px; align-content: start; }
.facet-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.facet-card strong { display: block; margin-bottom: 8px; }
.facet-card p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

@media (max-width: 900px) {
  .portal-hero,
  .directory-heading,
  .material-directory { grid-template-columns: 1fr; }
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .portal-hero { padding-top: 48px; padding-bottom: 60px; }
  .portal-hero h1 { font-size: clamp(2.75rem, 13vw, 4.3rem); }
  .directory-grid,
  .pathway-grid,
  .structure-slots,
  .crossroads { grid-template-columns: 1fr; }
  .directory-card { min-height: 240px; }
}