@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --radius: .75rem;
  --background: oklch(97% .018 205);
  --foreground: oklch(22% .035 255);
  --card: oklch(100% 0 0/.72);
  --card-foreground: oklch(22% .035 255);
  --primary: oklch(39% .096 159);
  --primary-hover: oklch(32% .08 159);
  --primary-foreground: oklch(99% .005 100);
  --secondary: oklch(93% .035 205);
  --secondary-foreground: oklch(30% .07 160);
  --muted: oklch(94% .018 205);
  --muted-foreground: oklch(50% .035 245);
  --accent: oklch(59% .19 25);
  --accent-foreground: oklch(99% .005 100);
  --border: oklch(100% 0 0/.65);
  --input: oklch(87% .025 205);
  --ring: oklch(55% .13 160);
  --heritage: oklch(68% .12 80);
  --heritage-foreground: oklch(31% .06 75);
  --glass: oklch(100% 0 0/.58);
  --glass-strong: oklch(100% 0 0/.82);
  --button-shadow: oklch(32% .08 159/.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--foreground);
  background-color: var(--background);
  min-height: 100vh;
  line-height: 1.5;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.58), oklch(1 0 0 / 0.58)),
    url("assets/heritage-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

footer.site { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }

.font-display { font-family: 'Fraunces', Georgia, serif; }

.demo-banner {
  background: var(--accent);
  color: var(--accent-foreground);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
}

/* header */
header.site {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
}
.nav-wrap {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
}
.nav-wrap img.logo { height: 56px; width: auto; }
nav.links { display: flex; align-items: center; gap: 20px; }
nav.links a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: oklch(22% .035 255 / .7);
  transition: color .15s;
}
nav.links a:hover { color: var(--primary); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
}

main {
  position: relative;
  z-index: 10;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.glass-panel {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

/* hero */
.hero-panel {
  margin-bottom: 32px;
  border: 1px solid var(--border);
  padding: 32px;
  box-shadow: 0 20px 50px -20px oklch(39% .096 159 / 0.15);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
}
.hero-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--accent);
}
.hero-title {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  color: var(--foreground);
}
.hero-desc {
  margin: 12px 0 0;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.search-label {
  display: block;
  width: 100%;
}
.search-label .lbl {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: oklch(22% .035 255 / .55);
}
.search-box {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  box-shadow: 0 1px 2px oklch(0 0 0 / .05);
}
.search-box svg { color: var(--primary); flex-shrink: 0; }
.search-box input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  color: var(--foreground);
}
.search-box input::placeholder { color: var(--muted-foreground); }

.list-meta {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid oklch(22% .035 255 / .15);
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: oklch(22% .035 255 / .55);
}

/* member grid */
.member-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 860px) { .member-grid { grid-template-columns: 1fr; } }

.member-card {
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 15px 40px -15px oklch(39% .096 159 / 0.1);
  transition: transform .3s, box-shadow .3s;
  display: grid;
}
.member-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -15px oklch(39% .096 159 / 0.18); }
.member-card-inner { display: grid; grid-template-columns: 35% 65%; }
@media (max-width: 560px) { .member-card-inner { grid-template-columns: 1fr; } }

.member-photo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 20px;
  background: linear-gradient(to bottom right, oklch(100% 0 0 / .55), oklch(93% .035 205 / .35));
}
.member-photo-frame { position: relative; height: 100%; width: 100%; max-width: 230px; }
.member-photo-frame .ring1 { position: absolute; inset: -6px; border: 1px solid oklch(59% .19 25 / .35); pointer-events: none; }
.member-photo-frame .ring2 { position: absolute; inset: 0; border: 1px solid oklch(59% .19 25 / .55); pointer-events: none; }
.member-photo-frame .photo-box {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: oklch(93% .035 205 / .2);
  box-shadow: 0 14px 32px -14px oklch(28% .07 159 / .55);
}
.member-photo-frame img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}
.member-photo-frame.no-photo .photo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 40px;
  font-weight: 600;
  color: var(--primary);
  background: var(--secondary);
}

.member-info { padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.member-tag {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent);
}
.member-name {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
}
.member-org { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--primary); }
.member-contacts {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid oklch(22% .035 255 / .1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: oklch(22% .035 255 / .7);
}
.member-contacts a, .member-contacts .row {
  display: flex;
  align-items: center;
  gap: 10px;
  word-break: break-all;
}
.member-contacts a:hover { color: var(--primary); }
.member-contacts svg { color: var(--accent); flex-shrink: 0; }

.btn-details {
  margin-top: auto;
  padding-top: 28px;
}
.btn-details a, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  box-shadow: 0 12px 30px var(--button-shadow);
  transition: background-color .15s;
}
.btn-details a:hover, .btn-primary:hover { background: var(--primary-hover); }

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted-foreground);
  font-size: 14px;
}

/* detail page */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}
.back-link:hover { color: var(--primary-hover); }

.detail-panel {
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 25px 60px -20px oklch(39% .096 159 / 0.2);
}
.detail-grid { display: grid; grid-template-columns: 38% 62%; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-side {
  position: relative;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 40px 28px;
}
.detail-side .accent-bar { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.detail-side .eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: oklch(99% .005 100 / .7);
}
.detail-photo { position: relative; margin: 0 auto; width: 100%; max-width: 300px; padding: 12px; }
.detail-photo .ring1 { position: absolute; inset: 0; border: 1px solid oklch(59% .19 25 / .65); pointer-events: none; }
.detail-photo .ring2 { position: absolute; inset: 8px; border: 1px solid oklch(99% .005 100 / .25); pointer-events: none; }
.detail-photo .photo-box {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: oklch(93% .035 205 / .2);
  box-shadow: 0 25px 50px -12px oklch(0 0 0 / .4);
}
.detail-photo img { height: 100%; width: 100%; object-fit: contain; object-position: center; }

.detail-side-info { margin-top: 32px; text-align: center; }
.detail-side-info .role { font-size: 14px; color: oklch(99% .005 100 / .7); margin: 0; }
.detail-side-info h1 { margin: 8px 0 0; font-size: 32px; font-weight: 600; line-height: 1.2; }
.detail-side-info .org {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: oklch(99% .005 100 / .85);
}
.detail-side-info .org svg { color: var(--accent); }

.detail-badge {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid oklch(99% .005 100 / .2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}
.detail-badge svg { color: var(--accent); }

.detail-body { padding: 28px 32px 40px; }
.detail-body-head { padding-bottom: 24px; border-bottom: 1px solid oklch(22% .035 255 / .1); }
.detail-body-head .eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent);
}
.detail-body-head h2 {
  margin: 12px 0 0;
  font-size: 28px;
  font-weight: 600;
}
.detail-body-head p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted-foreground);
  max-width: 640px;
}

.detail-dl {
  margin-top: 24px;
  display: grid;
  gap: 0 32px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { .detail-dl { grid-template-columns: 1fr; } }
.detail-dl .item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  border-bottom: 1px solid oklch(22% .035 255 / .1);
  padding: 14px 0;
}
.detail-dl .icon {
  display: grid;
  place-items: center;
  height: 36px;
  width: 36px;
  background: var(--secondary);
  color: var(--primary);
}
.detail-dl dt {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted-foreground);
}
.detail-dl dd {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.detail-notes {
  margin-top: 28px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  border-left: 2px solid var(--accent);
  background: oklch(93% .035 205 / .55);
  padding: 20px;
}
@media (max-width: 600px) { .detail-notes { grid-template-columns: 1fr; } }
.detail-notes .label { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--primary); }
.detail-notes p.text { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: oklch(22% .035 255 / .75); }

.detail-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--input);
  background: var(--background);
  font-size: 14px;
  font-weight: 500;
}
.btn-outline:hover { background: var(--secondary); }
.detail-actions .btn-primary { height: 44px; padding: 0 24px; text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 14px; }

.detail-location {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.detail-location svg { color: var(--accent); }

footer.site {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: var(--muted-foreground);
}

@media (max-width: 900px) {
  nav.links { display: none; }
  .nav-toggle { display: flex; }
  .hero-title { font-size: 26px; }
}