:root {
  --seo-bg: #08090b;
  --seo-panel: rgba(255, 255, 255, 0.045);
  --seo-border: rgba(255, 255, 255, 0.13);
  --seo-text: #f5f6f7;
  --seo-muted: #a9adb7;
  --seo-soft: #d8dae0;
  --seo-max: 1180px;
}

.seo-noscript {
  position: relative;
  z-index: 10000;
  display: grid;
  gap: 0.45rem;
  padding: 1.25rem 5vw;
  color: var(--seo-text);
  background: var(--seo-bg);
  border-bottom: 1px solid var(--seo-border);
}

.seo-noscript strong { font-size: 1.25rem; }
.seo-noscript span { color: var(--seo-muted); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
.seo-noscript p { max-width: 760px; margin: 0; color: var(--seo-soft); line-height: 1.65; }

.site-intro-monogram {
  max-width: 78px;
  text-align: center;
  font-size: 0.66rem !important;
  line-height: 1.08;
  letter-spacing: 0.04em !important;
  white-space: normal;
}

.brand #monogram {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  letter-spacing: 0.04em;
}

.seo-profile-directory {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  color: var(--seo-text);
  background: linear-gradient(180deg, #0b0d11, #08090b);
  border-top: 1px solid var(--seo-border);
  border-bottom: 1px solid var(--seo-border);
}

.seo-directory-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.seo-directory-head .eyebrow { grid-column: 1 / -1; margin: 0; }
.seo-directory-head h2 { margin: 0; max-width: 760px; font-size: clamp(2.3rem, 5vw, 5.5rem); line-height: 0.96; letter-spacing: -0.055em; }
.seo-directory-head > p:last-child { margin: 0; color: var(--seo-muted); line-height: 1.75; }

.seo-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--seo-border);
}

.seo-directory-grid a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.5rem 1.25rem;
  min-height: 150px;
  padding: 1.7rem;
  color: var(--seo-text);
  text-decoration: none;
  border-right: 1px solid var(--seo-border);
  border-bottom: 1px solid var(--seo-border);
  transition: background 180ms ease, transform 180ms ease;
}

.seo-directory-grid a:nth-child(2n) { border-right: 0; }
.seo-directory-grid a:hover, .seo-directory-grid a:focus-visible { background: rgba(255, 255, 255, 0.06); }
.seo-directory-grid span { grid-row: 1 / 3; color: var(--seo-muted); font-size: 0.72rem; letter-spacing: 0.12em; }
.seo-directory-grid strong { align-self: end; font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 520; letter-spacing: -0.025em; }
.seo-directory-grid small { color: var(--seo-muted); line-height: 1.5; }

.seo-footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.seo-footer-links a { color: inherit; text-decoration: none; opacity: 0.68; font-size: 0.78rem; }
.seo-footer-links a:hover, .seo-footer-links a:focus-visible { opacity: 1; }

/* Rank SEO-related settings by practical influence. These are guidance tiers, not a ranking guarantee. */
.admin-body #seoPanel::before {
  content: "SEO priority guide · 1 strongest/direct · 2 strong supporting · 3 indirect or technical";
  display: block;
  padding: 0.8rem 1rem;
  color: #4c566a;
  background: #f7f9ff;
  border: 1px solid #dfe6fb;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.admin-body #seoPanel label:has([data-field="name"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="heroTitle"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="eyebrow"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="heroSubtitle"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="role"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="location"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="seoTitle"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="seoDescription"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="canonicalUrl"]) > span:first-child::after,
.admin-body #seoPanel .seo-sync:has(#seoSyncHeading) b::after,
.admin-body #seoPanel .seo-sync:has(#seoSyncTitle) b::after,
.admin-body #seoPanel .seo-sync:has(#seoSyncDescription) b::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  margin-left: 0.45rem;
  padding: 0.16rem 0.4rem;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
  vertical-align: middle;
}

/* Priority 1: strongest direct controls over page topic and title presentation. */
.admin-body #seoPanel label:has([data-field="heroTitle"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="seoTitle"]) > span:first-child::after,
.admin-body #seoPanel .seo-sync:has(#seoSyncHeading) b::after,
.admin-body #seoPanel .seo-sync:has(#seoSyncTitle) b::after {
  content: "SEO 1";
  color: #1746bb;
  background: #e8efff;
  border: 1px solid rgba(23, 70, 187, 0.3);
}

/* Priority 2: strong supporting identity, visible content and canonicalization controls. */
.admin-body #seoPanel label:has([data-field="name"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="eyebrow"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="heroSubtitle"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="canonicalUrl"]) > span:first-child::after {
  content: "SEO 2";
  color: #315bd8;
  background: #eef3ff;
  border: 1px solid rgba(49, 91, 216, 0.24);
}

/* Priority 3: indirect context, snippet presentation and technical synchronization. */
.admin-body #seoPanel label:has([data-field="role"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="location"]) > span:first-child::after,
.admin-body #seoPanel label:has([data-field="seoDescription"]) > span:first-child::after,
.admin-body #seoPanel .seo-sync:has(#seoSyncDescription) b::after {
  content: "SEO 3";
  color: #5f6776;
  background: #f2f3f6;
  border: 1px solid rgba(95, 103, 118, 0.22);
}

html { color-scheme: dark; background: var(--seo-bg); }
body { margin: 0; color: var(--seo-text); background: var(--seo-bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
img { max-width: 100%; }

.profile-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 72px;
  padding: 0 4vw;
  background: rgba(8, 9, 11, 0.86);
  border-bottom: 1px solid var(--seo-border);
  backdrop-filter: blur(20px);
}

.profile-brand { color: var(--seo-text); text-decoration: none; font-weight: 650; letter-spacing: -0.025em; white-space: nowrap; }
.profile-header nav, .profile-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem 1.1rem; }
.profile-header nav a, .profile-footer nav a { color: var(--seo-muted); text-decoration: none; font-size: 0.78rem; }
.profile-header nav a:hover, .profile-header nav a:focus-visible, .profile-footer nav a:hover, .profile-footer nav a:focus-visible, .profile-header nav a[aria-current="page"] { color: var(--seo-text); }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 99999;
  padding: 0.75rem 1rem;
  color: #08090b;
  background: #fff;
  text-decoration: none;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.profile-hero {
  width: min(var(--seo-max), 92vw);
  margin: 0 auto;
  padding: clamp(7rem, 16vw, 13rem) 0 clamp(4rem, 9vw, 8rem);
  border-bottom: 1px solid var(--seo-border);
}
.profile-hero > p { margin: 0 0 1.25rem; color: var(--seo-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.19em; }
.profile-hero h1 { max-width: 980px; margin: 0; font-size: clamp(3.6rem, 10vw, 9.5rem); line-height: 0.88; letter-spacing: -0.075em; font-weight: 520; }
.profile-lead { max-width: 760px; margin-top: clamp(2rem, 5vw, 4rem); color: var(--seo-soft); font-size: clamp(1.15rem, 2.2vw, 1.65rem); line-height: 1.55; }

.profile-content { width: min(var(--seo-max), 92vw); margin: 0 auto; }
.profile-section { display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr); gap: 2rem 6vw; padding: clamp(3.5rem, 7vw, 6.5rem) 0; border-bottom: 1px solid var(--seo-border); content-visibility: auto; contain-intrinsic-size: 420px; }
.profile-section h2 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -0.045em; font-weight: 520; }
.profile-section p { max-width: 760px; margin: 0; color: var(--seo-muted); font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.85; }

.profile-cta { width: min(var(--seo-max), 92vw); margin: clamp(4rem, 8vw, 8rem) auto; padding: clamp(2rem, 5vw, 4rem); background: var(--seo-panel); border: 1px solid var(--seo-border); }
.profile-cta p { margin: 0 0 1.5rem; color: var(--seo-muted); }
.profile-cta a { color: var(--seo-text); text-decoration: none; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -0.035em; }

.profile-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 2rem 4vw; border-top: 1px solid var(--seo-border); }
.profile-footer small { color: var(--seo-muted); white-space: nowrap; }

@media (max-width: 900px) {
  .seo-directory-head, .profile-section { grid-template-columns: 1fr; }
  .seo-directory-grid { grid-template-columns: 1fr; }
  .seo-directory-grid a { border-right: 0; }
  .profile-header { position: relative; align-items: flex-start; flex-direction: column; padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .profile-header nav { justify-content: flex-start; }
  .profile-footer { grid-template-columns: 1fr; }
  .profile-footer nav { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .seo-directory-grid a { min-height: 125px; padding: 1.25rem 0.5rem; }
  .profile-header nav a:nth-child(n+6) { display: none; }
  .profile-hero { padding-top: 5rem; }
  .profile-section { gap: 1.25rem; }
  .seo-footer-links { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}