/* Public open-data directory — a compact city atlas within «Сигнал Ангары». */

.directory-page {
  --directory-blue: #247891;
  --directory-blue-soft: #e8f3f5;
  --directory-rust: #c95a42;
  --directory-grid-line: rgb(223 243 107 / 10%);
}

.directory-page main {
  min-height: 68vh;
}

.directory-page a {
  text-underline-offset: 3px;
}

.directory-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(8 28 23 / 22%);
  background:
    linear-gradient(var(--directory-grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--directory-grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(circle at 78% 8%, rgb(29 138 107 / 48%), transparent 27rem),
    linear-gradient(145deg, var(--echo-pine-800), var(--echo-pine-950) 75%);
  color: #fff;
}

.directory-hero::after {
  position: absolute;
  right: -9rem;
  bottom: -16rem;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgb(223 243 107 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(223 243 107 / 3%), 0 0 0 8rem rgb(223 243 107 / 2%);
  content: "";
  pointer-events: none;
}

.directory-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 382px;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: clamp(36px, 7vw, 100px);
  padding-top: 58px;
  padding-bottom: 82px;
}

.directory-hero .eyebrow,
.directory-sources-hero .eyebrow {
  color: var(--echo-signal-400) !important;
}

.directory-hero h1 {
  max-width: 850px;
  margin: 12px 0 20px;
  color: #fff;
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 760;
  letter-spacing: -0.052em;
  line-height: 0.96;
}

.directory-hero h1 span {
  color: var(--echo-signal-400);
}

.directory-hero-copy > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #bfd0c8;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
}

.directory-hero-signal {
  position: relative;
  display: grid;
  width: 270px;
  height: 270px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgb(223 243 107 / 24%);
  border-radius: 50%;
}

.directory-hero-signal::before,
.directory-hero-signal::after {
  position: absolute;
  width: 1px;
  height: calc(100% + 34px);
  background: rgb(223 243 107 / 18%);
  content: "";
}

.directory-hero-signal::after {
  transform: rotate(90deg);
}

.directory-hero-signal b {
  position: relative;
  z-index: 3;
  padding: 8px 12px;
  border: 1px solid rgb(223 243 107 / 38%);
  border-radius: 7px 7px 7px 2px;
  background: var(--echo-pine-950);
  color: var(--echo-signal-400);
  font-size: 11px;
  letter-spacing: 0.18em;
}

.directory-signal-dot,
.directory-signal-ring {
  position: absolute;
  border-radius: 50%;
}

.directory-signal-dot {
  z-index: 2;
  width: 13px;
  height: 13px;
  background: var(--echo-signal-400);
  box-shadow: 0 0 0 8px rgb(223 243 107 / 10%);
}

.directory-signal-ring {
  border: 1px solid rgb(223 243 107 / 34%);
}

.directory-signal-ring-one {
  width: 112px;
  height: 112px;
}

.directory-signal-ring-two {
  width: 194px;
  height: 194px;
}

.directory-shell {
  position: relative;
  z-index: 2;
  padding-bottom: 80px;
}

.directory-search {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 280px) auto auto;
  align-items: end;
  gap: 10px;
  margin-top: -38px;
  padding: 18px;
  border: 1px solid var(--echo-line);
  border-radius: 24px 24px 24px 8px;
  background: rgb(255 253 248 / 96%);
  box-shadow: 0 24px 56px rgb(8 28 23 / 15%);
  backdrop-filter: blur(18px);
}

.directory-search-field {
  min-width: 0;
}

.directory-search-field > label {
  display: block;
  margin: 0 0 7px 4px;
  color: #53645c;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.directory-search-control {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #aebdb4;
  border-radius: 14px 14px 14px 5px;
  background: #fff;
}

.directory-search-control > span {
  display: grid;
  align-self: stretch;
  place-items: center;
  border-right: 1px solid #d8e0da;
  background: #edf3ee;
  color: var(--echo-river-600);
  font-size: 25px;
}

.directory-search :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 1px solid #aebdb4;
  border-radius: 14px 14px 14px 5px;
  background: #fff;
  color: var(--echo-ink);
}

.directory-search-control input {
  min-height: 50px;
  border: 0;
  border-radius: 0 14px 14px 0;
  box-shadow: none;
}

.directory-search-control:focus-within,
.directory-search select:focus-visible {
  border-color: var(--focus-ring);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px var(--echo-paper);
}

.directory-search-control input:focus-visible {
  outline: 0;
  box-shadow: none;
}

.directory-search .button {
  min-height: 52px;
  white-space: nowrap;
}

.directory-search .error {
  margin-top: 6px;
  font-size: 12px;
}

.directory-category-strip {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin: 24px 0 0;
  padding: 3px 1px 9px;
  scrollbar-width: thin;
}

.directory-category-strip a {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--echo-line);
  border-radius: 999px 999px 999px 7px;
  background: var(--echo-paper);
  color: var(--echo-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.directory-category-strip a:hover {
  border-color: #99afa3;
  background: #fff;
}

.directory-category-strip small {
  display: grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--echo-ice-100);
  color: var(--echo-river-600);
  font-size: 11px;
}

.directory-results {
  padding-top: 50px;
}

.directory-results-head,
.directory-provenance-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.directory-results-head h2,
.directory-provenance-head h2 {
  margin: 5px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.directory-result-count {
  display: flex;
  min-width: 140px;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 18px;
  border-left: 1px solid var(--echo-line-strong);
}

.directory-result-count strong {
  color: var(--echo-pine-900);
  font-size: 30px;
  line-height: 1;
}

.directory-result-count span {
  margin-top: 4px;
  color: var(--echo-muted);
  font-size: 12px;
}

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

.directory-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--echo-line);
  border-radius: 18px 18px 18px 6px;
  background: var(--echo-paper);
  box-shadow: 0 1px 0 rgb(8 28 23 / 4%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.directory-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38px;
  height: 4px;
  background: var(--echo-signal-400);
  content: "";
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.directory-card:hover,
.directory-card:focus-within {
  border-color: #98b1a4;
  box-shadow: var(--echo-shadow-card);
  transform: translateY(-2px);
}

.directory-card:hover::after,
.directory-card:focus-within::after {
  opacity: 1;
  transform: translateX(0);
}

.directory-card-mark,
.directory-profile-mark {
  display: grid;
  place-items: center;
  border: 1px solid #c8dad0;
  border-radius: 16px 16px 16px 5px;
  background:
    radial-gradient(circle at 75% 20%, rgb(223 243 107 / 60%), transparent 1.5rem),
    var(--echo-ice-100);
  color: var(--echo-pine-800);
  font-family: Bahnschrift, "Segoe UI Variable Display", sans-serif;
  font-size: 24px;
  font-weight: 760;
}

.directory-card-mark {
  width: 58px;
  height: 58px;
}

.directory-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.directory-card-topline {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.directory-category,
.directory-state {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px 999px 999px 4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.directory-category {
  overflow: hidden;
  background: var(--echo-ice-100);
  color: var(--echo-river-600);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

a.directory-category:hover {
  background: #d9ece2;
  color: var(--echo-pine-800);
}

.directory-state-stale {
  background: #fff0ce;
  color: var(--echo-amber-700);
}

.directory-state-claimed {
  background: #e6f3e9;
  color: #0d633d;
}

.directory-card h2 {
  margin: 10px 0 7px;
  font-size: 18px;
  letter-spacing: -0.018em;
  line-height: 1.17;
}

.directory-card h2 a {
  color: var(--echo-ink);
  text-decoration: none;
}

.directory-card h2 a:hover {
  color: var(--echo-river-600);
  text-decoration: underline;
}

.directory-card-address {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 5px;
  margin: 0 0 10px;
  color: #475a51;
  font-size: 13px;
  line-height: 1.4;
}

.directory-card-address > span:first-child {
  color: var(--echo-river-600);
  font-size: 16px;
}

.directory-card-address-empty {
  display: block;
  color: var(--echo-muted);
}

.directory-card-offerings {
  margin: 0 0 9px;
  overflow: hidden;
  color: #40554b;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-card-offerings strong {
  color: var(--echo-pine-800);
  font-weight: 800;
}

.directory-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: auto;
  color: var(--echo-muted);
  font-size: 11px;
}

.directory-card-meta span + span {
  position: relative;
}

.directory-card-meta span + span::before {
  position: absolute;
  left: -7px;
  content: "·";
}

.directory-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #e7ebe7;
}

.directory-card-footer > span {
  color: var(--echo-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.directory-card-footer > a {
  flex: 0 0 auto;
  color: var(--echo-pine-800);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.directory-page .pagination {
  margin-top: 28px;
}

.directory-empty {
  min-height: 300px;
}

.directory-data-note {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 42px;
  padding: 20px;
  border: 1px solid #bacd56;
  border-radius: 22px 22px 22px 7px;
  background:
    radial-gradient(circle at 82% 15%, rgb(255 255 255 / 48%), transparent 12rem),
    var(--echo-signal-400);
}

.directory-data-note > div:first-child {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgb(8 28 23 / 20%);
  border-radius: 16px 16px 16px 5px;
  color: var(--echo-pine-900);
  font-size: 24px;
}

.directory-data-note strong {
  display: block;
  margin-bottom: 3px;
  color: var(--echo-pine-950);
  font-size: 18px;
}

.directory-data-note p {
  margin: 0;
  color: #344027;
  font-size: 13px;
}

/* Detail */

.directory-detail-shell,
.directory-sources-shell {
  padding-top: 30px;
  padding-bottom: 80px;
}

.directory-profile {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.directory-profile-head {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--echo-line);
  border-radius: 30px 30px 30px 9px;
  background:
    radial-gradient(circle at 86% 12%, rgb(223 243 107 / 18%), transparent 16rem),
    var(--echo-paper);
  box-shadow: var(--echo-shadow-card);
}

.directory-profile-mark {
  width: 112px;
  height: 112px;
  font-size: 48px;
}

.directory-profile-title h1 {
  margin: 13px 0 11px;
  font-size: clamp(38px, 6vw, 66px);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.directory-profile-title > p {
  max-width: 770px;
  margin: 0;
  color: var(--echo-muted);
  font-size: 16px;
}

.directory-stale-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 15px 18px;
  border: 1px solid #dbc679;
  border-radius: 15px 15px 15px 5px;
  background: #fff6d9;
  color: #604d0b;
  font-size: 13px;
}

.directory-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 16px;
}

.directory-facts,
.directory-map-card,
.directory-offerings,
.directory-provenance,
.directory-attribution {
  border: 1px solid var(--echo-line);
  border-radius: 24px 24px 24px 8px;
  background: var(--echo-paper);
}

.directory-facts,
.directory-map-card,
.directory-offerings,
.directory-provenance {
  padding: clamp(20px, 3vw, 30px);
}

.directory-facts h2,
.directory-map-card h2,
.directory-offerings h2,
.directory-attribution h2 {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.directory-facts dl,
.directory-provenance-grid,
.directory-source-card dl {
  margin: 0;
}

.directory-facts dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid #e5eae5;
}

.directory-facts dt,
.directory-provenance dt,
.directory-source-card dt {
  color: var(--echo-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.directory-facts dd,
.directory-provenance dd,
.directory-source-card dd {
  margin: 0;
  color: var(--echo-ink);
  font-size: 14px;
  font-weight: 650;
}

.directory-facts dd a {
  color: var(--echo-river-600);
}

.directory-offerings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 24px;
}

.directory-offerings h2 {
  margin-top: 5px;
}

.directory-offerings p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--echo-muted);
  font-size: 13px;
}

.directory-offerings ul {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directory-offerings li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid #cadbd1;
  border-radius: 999px 999px 999px 6px;
  background: var(--echo-ice-100);
  color: var(--echo-pine-900);
  font-size: 12px;
}

.directory-offerings li span {
  color: var(--echo-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.directory-curated-catalog {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid #b9d1c4;
  border-radius: 26px 26px 26px 8px;
  background:
    radial-gradient(circle at 95% 0%, rgb(221 242 105 / 26%), transparent 14rem),
    linear-gradient(145deg, #f7fbf8 0%, #edf5f0 100%);
  box-shadow: 0 18px 45px rgb(25 61 47 / 8%);
}

.directory-curated-catalog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  align-items: start;
  gap: clamp(20px, 4vw, 54px);
}

.directory-curated-catalog-head h2 {
  margin: 6px 0 0;
  font-size: clamp(24px, 3vw, 35px);
  letter-spacing: -0.035em;
}

.directory-curated-catalog-note {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--echo-river-600);
  border-radius: 4px 13px 13px 4px;
  background: rgb(255 255 255 / 72%);
  color: #4b5e55;
  font-size: 12.5px;
  line-height: 1.55;
}

.directory-curated-catalog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 23px 0 0;
  padding: 0;
  list-style: none;
}

.directory-curated-catalog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 13px 18px;
  align-items: end;
  min-width: 0;
  padding: 17px;
  border: 1px solid rgb(164 191 176 / 75%);
  border-radius: 18px 18px 18px 6px;
  background: rgb(255 255 255 / 86%);
}

.directory-curated-catalog-main {
  min-width: 0;
}

.directory-curated-catalog-kind {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: #dcece4;
  color: #19644f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.directory-curated-catalog-item h3 {
  margin: 9px 0 0;
  font-size: 17px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.directory-curated-catalog-item dl {
  display: flex;
  grid-column: 1;
  flex-wrap: wrap;
  gap: 5px 18px;
  margin: 0;
}

.directory-curated-catalog-item dl > div {
  display: flex;
  gap: 5px;
  min-width: 0;
}

.directory-curated-catalog-item dt,
.directory-curated-catalog-item dd {
  margin: 0;
  color: var(--echo-muted);
  font-size: 11px;
}

.directory-curated-catalog-item dd {
  color: #33483f;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.directory-curated-catalog-source {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #176b54;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  text-underline-offset: 3px;
}

.directory-map-card {
  overflow: hidden;
  background: #eef2ec;
}

.directory-map-visual {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -30px -30px 24px;
  overflow: hidden;
  border-bottom: 1px solid #cbd6ce;
  background:
    linear-gradient(rgb(16 44 34 / 8%) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgb(16 44 34 / 8%) 1px, transparent 1px) 0 0 / 30px 30px,
    radial-gradient(circle at center, #dff36b 0 5px, transparent 6px),
    #dfeae3;
  color: var(--echo-pine-800);
}

.directory-map-visual span {
  position: absolute;
  width: 74px;
  height: 74px;
  border: 1px solid rgb(16 44 34 / 24%);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgb(16 44 34 / 4%);
}

.directory-map-visual b,
.directory-map-visual small {
  position: relative;
  z-index: 1;
  padding: 3px 6px;
  background: rgb(223 234 227 / 88%);
}

.directory-map-visual b {
  font-size: 12px;
}

.directory-map-visual small {
  margin-top: 34px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.directory-map-card p {
  color: var(--echo-muted);
  font-size: 12px;
}

.directory-map-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.directory-map-actions .button {
  min-width: 0;
  padding-inline: 10px;
  font-size: 12px;
}

.directory-locations {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--echo-line);
  border-radius: 24px 24px 24px 8px;
  background: var(--echo-paper);
}

.directory-locations h2 {
  margin: 5px 0 18px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.directory-location-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.directory-location-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #dce5df;
  border-radius: 18px 18px 18px 6px;
  background: #fbfcfa;
}

.directory-location-card header > span,
.directory-location-card dt {
  color: var(--echo-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.directory-location-card h3 {
  margin: 5px 0 4px;
  font-size: 17px;
  line-height: 1.25;
}

.directory-location-card header p,
.directory-location-offerings,
.directory-location-warning {
  margin: 5px 0 0;
  color: var(--echo-muted);
  font-size: 12px;
  line-height: 1.45;
}

.directory-location-card > dl,
.directory-location-provenance dl {
  margin: 14px 0 0;
}

.directory-location-card > dl > div,
.directory-location-provenance dl > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e5eae5;
}

.directory-location-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.directory-location-warning {
  color: #755a00;
}

.directory-location-offerings strong {
  color: var(--echo-pine-800);
}

.directory-location-provenance {
  margin-top: 16px;
  color: var(--echo-muted);
  font-size: 12px;
}

.directory-location-provenance summary {
  cursor: pointer;
  color: var(--echo-river-600);
  font-weight: 750;
}

.directory-provenance {
  background:
    linear-gradient(rgb(16 44 34 / 3%) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--echo-paper);
}

.directory-record-id {
  max-width: 260px;
  overflow: hidden;
  color: var(--echo-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-provenance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--echo-line);
  border-radius: 15px 15px 15px 5px;
  background: var(--echo-line);
}

.directory-provenance-grid > div {
  min-width: 0;
  padding: 16px;
  background: rgb(255 253 248 / 96%);
}

.directory-provenance-grid dd {
  margin-top: 7px;
  overflow-wrap: anywhere;
}

.directory-provenance > p {
  margin: 17px 0 0;
  font-size: 13px;
}

.directory-provenance > p a {
  color: var(--echo-river-600);
  font-weight: 750;
}

.directory-attribution {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  background: #ecf4ef;
}

.directory-attribution-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #9bb8a8;
  border-radius: 14px 14px 14px 5px;
  color: var(--echo-river-600);
  font-family: Georgia, serif;
  font-size: 23px;
  font-style: italic;
  font-weight: 700;
}

.directory-attribution h2 {
  margin-bottom: 7px;
  font-size: 17px;
}

.directory-attribution p {
  margin: 0;
  color: #4e6057;
  font-size: 12.5px;
}

.directory-attribution-links,
.directory-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 11px;
}

.directory-attribution-links a,
.directory-source-links a {
  color: var(--echo-pine-800);
  font-size: 12px;
  font-weight: 750;
}

.directory-correction {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid #bdd347;
  border-radius: 28px 28px 28px 8px;
  background:
    radial-gradient(circle at 88% 18%, rgb(255 255 255 / 50%), transparent 14rem),
    var(--echo-signal-400);
}

.directory-correction::after {
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 190px;
  height: 190px;
  border: 1px solid rgb(8 28 23 / 16%);
  border-radius: 50%;
  content: "";
}

.directory-correction > * {
  position: relative;
  z-index: 1;
}

.directory-correction .eyebrow {
  color: var(--echo-pine-800) !important;
}

.directory-correction h2 {
  margin: 6px 0 7px;
  color: var(--echo-pine-950);
  font-size: clamp(25px, 3.5vw, 38px);
  letter-spacing: -0.035em;
}

.directory-correction p:last-child {
  max-width: 700px;
  margin: 0;
  color: #3d492e;
}

.directory-correction-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Sources and export */

.directory-sources-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: end;
  gap: 40px;
  margin-top: 8px;
  padding: clamp(30px, 5vw, 56px);
  border-radius: 30px 30px 30px 9px;
  background:
    linear-gradient(var(--directory-grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--directory-grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(circle at 82% 12%, rgb(29 138 107 / 45%), transparent 19rem),
    var(--echo-pine-950);
  color: #fff;
  box-shadow: var(--echo-shadow-float);
}

.directory-sources-hero h1 {
  margin: 10px 0 16px;
  color: #fff;
  font-size: clamp(42px, 6.5vw, 74px);
  letter-spacing: -0.052em;
  line-height: 0.98;
}

.directory-sources-hero > div:first-child > p:last-child {
  max-width: 730px;
  margin: 0;
  color: #bfd0c8;
  font-size: 17px;
}

.directory-source-stat {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgb(223 243 107 / 24%);
  border-radius: 20px 20px 20px 7px;
  background: rgb(255 255 255 / 7%);
}

.directory-source-stat strong {
  color: var(--echo-signal-400);
  font-size: 50px;
  letter-spacing: -0.05em;
  line-height: 1;
}

.directory-source-stat span {
  margin-top: 6px;
  color: #fff;
  font-weight: 750;
}

.directory-source-stat small {
  margin-top: 12px;
  color: #9eb5aa;
  font-size: 11px;
  line-height: 1.4;
}

.directory-method,
.directory-source-list {
  padding-top: 58px;
}

.directory-method ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directory-method li {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--echo-line);
  border-radius: 18px 18px 18px 6px;
  background: var(--echo-paper);
}

.directory-method li > span {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--echo-river-600);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
}

.directory-method strong {
  display: block;
  margin-bottom: 7px;
  font-size: 16px;
}

.directory-method p {
  margin: 0;
  color: var(--echo-muted);
  font-size: 12.5px;
}

.directory-source-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.directory-source-list .section-heading {
  margin-bottom: 10px;
}

.directory-source-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.2fr);
  gap: 24px 40px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--echo-line);
  border-radius: 22px 22px 22px 7px;
  background: var(--echo-paper);
}

.directory-source-code {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 7px 7px 7px 2px;
  background: var(--echo-ice-100);
  color: var(--echo-river-600);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.directory-source-card h3 {
  margin: 11px 0 7px;
  font-size: 27px;
  letter-spacing: -0.03em;
}

.directory-source-card-main p {
  margin: 0;
  color: var(--echo-muted);
  font-size: 13px;
}

.directory-source-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--echo-line);
  border-radius: 14px 14px 14px 5px;
}

.directory-source-card dl > div {
  min-width: 0;
  padding: 14px;
}

.directory-source-card dl > div + div {
  border-left: 1px solid var(--echo-line);
}

.directory-source-card dd {
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.directory-source-links {
  grid-column: 1 / -1;
  margin-top: -7px;
  padding-top: 16px;
  border-top: 1px solid #e8ece8;
}

.directory-source-versions {
  grid-column: 1 / -1;
  padding: 15px 16px;
  border: 1px solid var(--echo-line);
  border-radius: 14px 14px 14px 5px;
  background: #f7faf8;
}

.directory-source-versions > strong {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
}

.directory-source-versions ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directory-source-versions li {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 13px;
  color: var(--echo-muted);
  font-size: 11px;
}

.directory-export {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  margin-top: 58px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid #b8ccc0;
  border-radius: 28px 28px 28px 8px;
  background:
    radial-gradient(circle at 90% 5%, rgb(223 243 107 / 28%), transparent 14rem),
    #e7f0ea;
}

.directory-export h2 {
  margin: 7px 0 10px;
  font-size: clamp(29px, 4vw, 43px);
  letter-spacing: -0.04em;
}

.directory-export p {
  max-width: 790px;
  color: #4d5f56;
}

.directory-export-license {
  margin-bottom: 0;
  font-size: 12px;
}

.directory-export .button {
  min-width: 170px;
}

.directory-export-pending {
  max-width: 220px;
  padding: 13px 16px;
  border: 1px dashed #8ca197;
  border-radius: 13px 13px 13px 5px;
  color: #53645c;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.directory-legal-note {
  margin-top: 16px;
  padding: 18px 20px;
  border-left: 4px solid var(--echo-river-600);
  border-radius: 4px 14px 14px 4px;
  background: var(--echo-paper);
}

.directory-legal-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.directory-legal-note p {
  margin: 0;
  color: var(--echo-muted);
  font-size: 12.5px;
}

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

  .directory-search {
    grid-template-columns: minmax(260px, 1fr) minmax(190px, 250px) auto;
  }

  .directory-search-reset {
    grid-column: 3;
  }

  .directory-method ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-provenance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .directory-hero-inner {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 24px;
    padding-top: 48px;
    padding-bottom: 72px;
  }

  .directory-hero-signal {
    width: 150px;
    height: 150px;
  }

  .directory-signal-ring-one {
    width: 72px;
    height: 72px;
  }

  .directory-signal-ring-two {
    width: 120px;
    height: 120px;
  }

  .directory-search {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
  }

  .directory-search .button {
    width: 100%;
  }

  .directory-search-reset {
    grid-column: auto;
  }

  .directory-detail-layout,
  .directory-location-list,
  .directory-offerings,
  .directory-curated-catalog-head,
  .directory-sources-hero,
  .directory-source-card,
  .directory-export,
  .directory-correction {
    grid-template-columns: 1fr;
  }

  .directory-map-card {
    min-height: 0;
  }

  .directory-curated-catalog-list {
    grid-template-columns: 1fr;
  }

  .directory-correction-actions {
    justify-content: flex-start;
  }

  .directory-source-stat {
    max-width: 340px;
  }

  .directory-source-card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .directory-page .container {
    width: min(100% - 24px, 1320px);
  }

  .directory-hero-inner {
    display: block;
    padding-top: 40px;
    padding-bottom: 66px;
  }

  .directory-hero h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .directory-hero h1 br {
    display: none;
  }

  .directory-hero-signal {
    display: none;
  }

  .directory-search {
    grid-template-columns: 1fr;
    margin-top: -28px;
    padding: 13px;
    border-radius: 19px 19px 19px 7px;
  }

  .directory-search-reset {
    grid-column: auto;
  }

  .directory-results {
    padding-top: 38px;
  }

  .directory-results-head,
  .directory-provenance-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .directory-result-count {
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
    padding-left: 0;
    border-left: 0;
  }

  .directory-result-count strong {
    font-size: 23px;
  }

  .directory-grid {
    grid-template-columns: 1fr;
  }

  .directory-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
  }

  .directory-card-mark {
    width: 48px;
    height: 48px;
    border-radius: 13px 13px 13px 4px;
    font-size: 21px;
  }

  .directory-card h2 {
    margin-top: 8px;
    font-size: 17px;
  }

  .directory-card-footer {
    align-items: center;
  }

  .directory-data-note {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 15px;
  }

  .directory-data-note > div:first-child {
    width: 44px;
    height: 44px;
  }

  .directory-data-note .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .directory-profile-head {
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    padding: 20px;
    border-radius: 22px 22px 22px 7px;
  }

  .directory-profile-mark {
    width: 68px;
    height: 68px;
    border-radius: 17px 17px 17px 5px;
    font-size: 31px;
  }

  .directory-profile-title h1 {
    margin-top: 9px;
    font-size: 34px;
  }

  .directory-profile-title > p {
    grid-column: 1 / -1;
    font-size: 13px;
  }

  .directory-facts dl > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .directory-location-card > dl > div,
  .directory-location-provenance dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .directory-curated-catalog {
    padding: 18px;
    border-radius: 21px 21px 21px 7px;
  }

  .directory-curated-catalog-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .directory-curated-catalog-source {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .directory-map-actions,
  .directory-provenance-grid,
  .directory-method ol,
  .directory-source-card dl {
    grid-template-columns: 1fr;
  }

  .directory-source-card dl > div + div {
    border-top: 1px solid var(--echo-line);
    border-left: 0;
  }

  .directory-attribution {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .directory-attribution-icon {
    width: 38px;
    height: 38px;
  }

  .directory-correction-actions,
  .directory-correction-actions .button,
  .directory-export .button {
    width: 100%;
  }

  .directory-sources-hero {
    gap: 25px;
    padding: 26px 20px;
  }

  .directory-sources-hero h1 {
    font-size: 40px;
  }

  .directory-source-stat {
    max-width: none;
  }

  .directory-method,
  .directory-source-list {
    padding-top: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directory-card {
    transition: none;
  }

  .directory-card:hover,
  .directory-card:focus-within {
    transform: none;
  }
}

@media print {
  .directory-search,
  .directory-category-strip,
  .directory-data-note,
  .directory-map-actions,
  .directory-correction,
  .directory-page .site-header,
  .directory-page .site-footer {
    display: none;
  }

  .directory-page main,
  .directory-card,
  .directory-profile-head,
  .directory-facts,
  .directory-provenance,
  .directory-offerings,
  .directory-attribution {
    background: #fff;
    box-shadow: none;
  }
}