/* ESS-INSTITUTION-SHELL-001: the observed live homepage's navy/blue glass,
   gold instrument and type, adapted to each page's task. Shared on ALL surfaces.
   The locked homepage itself is never rewritten by this stylesheet. */
* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100dvh;
  color: var(--glass-copy);
  background-color: var(--ess-ink);
  background-image: none;
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

a { color: var(--text-brand); }
a:hover { color: var(--glass-copy); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-xl);
  color: var(--glass-copy);
}

.skip {
  position: absolute;
  width: var(--space-px);
  height: var(--space-px);
  overflow: hidden;
  clip-path: inset(50%);
}

.skip:focus {
  width: auto;
  height: auto;
  clip-path: none;
  z-index: var(--z-dropdown);
  padding: var(--space-2) var(--space-3);
  background-color: var(--glass-lift);
  color: var(--glass-copy);
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--glass-edge);
}

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--nav-height);
  padding-block: var(--space-3);
  padding-inline: var(--gutter);
  background-color: var(--glass-field);
  border-bottom: var(--hairline) solid var(--edge-soft);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-3);
  isolation: isolate;
  text-decoration: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.brand-name {
  font-family: var(--font-display);
  font-size: var(--brand-name-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--brand-name-track);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--text);
}

/* The homepage's own footer brand block sizes its name up from the header
   default (13px vs 12.5px) -- assets/web/home/index.html .f-brand .brand-name. */
.footer-brand .brand-name { font-size: var(--text-sm); }

.brand-tag {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-family: var(--font-display);
  font-size: var(--brand-tag-size);
  letter-spacing: var(--brand-tag-track);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--text-2);
}

.brand-tag::before,
.brand-tag::after {
  content: "";
  height: 1px;
  flex: 1;
  min-width: 16px;
  background-image: var(--brand-tag-line-gradient);
}

.brand-tag::after { transform: scaleX(-1); }

.wordmark img {
  display: block;
  width: var(--mark-size);
  height: auto;
  aspect-ratio: 1036 / 829;
  background-color: var(--ess-ink);
}

.institution-name {
  color: var(--glass-muted);
  font-size: var(--text-sm);
}

.nav nav {
  margin-inline-start: auto;
  display: flex;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-1);
  border: var(--hairline) solid var(--edge);
  border-radius: var(--radius-full);
  background-color: var(--ink-1);
  background-image: var(--nav-gradient);
  box-shadow: var(--nav-shadow);
}

.nav nav a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background-color: transparent;
  border: 0;
  color: var(--glass-copy);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.nav nav a:hover {
  color: var(--glass-copy);
  background-color: var(--ink-2);
}

.nav nav a[aria-current="page"] {
  color: var(--btn-fg);
  background: var(--gold-gradient);
  box-shadow: var(--gold-shadow);
}

/* Blur is only on navigation chrome, never on a scrolling record list.
   Solid navy above remains the no-filter and reduced-transparency fallback. */
@supports (backdrop-filter: blur(1px)) {
  .nav nav { backdrop-filter: blur(var(--glass-blur)); }
}

.session {
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) solid var(--glass-edge);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  background-color: var(--glass-slab);
  color: var(--glass-muted);
}

/* Icon buttons (search link + menu button) and the working drawer they open,
   ported from the homepage's own menu-btn/drawer so links stay reachable
   below 1120px instead of wrapping into a multi-row bar. */
.icon-btn {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: var(--hairline) solid var(--edge);
  background-image: var(--icon-btn-gradient);
  box-shadow: var(--icon-btn-shadow);
  color: var(--glass-copy);
  transition: border-color 0.25s, transform 0.25s var(--ease-out);
}

.icon-btn svg { width: 20px; height: 20px; }

.icon-btn:hover {
  border-color: var(--icon-btn-hover-border);
  box-shadow: var(--icon-btn-hover-shadow);
}

.icon-btn:active { transform: scale(0.96); }

.menu-btn { width: 48px; height: 48px; }

dialog {
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--glass-copy);
  max-width: none;
  max-height: none;
  overflow: visible;
}

dialog::backdrop { background-color: var(--backdrop-color); }

@supports (backdrop-filter: blur(1px)) {
  dialog::backdrop { backdrop-filter: blur(8px); }
}

.panel {
  position: relative;
  background-image: var(--panel-gradient);
  border: var(--hairline) solid var(--edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--panel-shadow);
}

.drawer {
  margin-inline-start: auto;
  margin-inline-end: 0;
  height: 100%;
  max-height: 100dvh;
  width: min(420px, 100vw);
}

.drawer-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: auto;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  border-right: 0;
  padding-block: var(--drawer-pad-block);
  padding-inline: var(--space-6);
}

.drawer-panel > * { flex-shrink: 0; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.drawer-primary {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-primary a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--track-2xs);
  color: var(--glass-copy);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--edge-soft);
  transition: color 0.2s, padding 0.3s var(--ease-out);
}

.drawer-primary a svg { width: 18px; height: 18px; color: var(--gold); opacity: 0.7; }

.drawer-primary a:hover { color: var(--gold-hi); padding-inline-start: var(--space-2); }

.drawer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.drawer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-cols h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-3);
  margin: 0 0 var(--space-1-5);
}

.drawer-cols a {
  display: inline-block;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-2);
  text-decoration: none;
}

.drawer-cols a:hover { color: var(--gold-hi); }

.drawer-cta { margin-block-start: auto; width: 100%; text-align: center; }

.identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1-5) var(--gutter);
  font-size: var(--text-sm);
  color: var(--glass-muted);
  background-color: var(--glass-field);
  border-bottom: var(--hairline) solid var(--edge-soft);
}

body[data-shell] main, .main-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-min), var(--sidebar-max));
  gap: var(--space-8);
  width: min(var(--width-content), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: var(--space-12) 0 var(--space-24);
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

body[data-shell] main.with-hero {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.directory-hero {
  /* :root reserves scrollbar-gutter: stable both-edges (design/tokens.css), which
     insets body's own box on both sides even when no scrollbar is showing. The
     100vw/negative-margin pair bleeds this landing hero past that reservation to
     the true viewport edge, matching the homepage's full-bleed composition. */
  width: 100vw;
  margin-inline: var(--bleed-inline);
  background-color: var(--ink-1);
  background-image: var(--card-gradient);
  border-bottom: var(--hairline) solid var(--edge);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
  width: min(var(--width-content), calc(100% - 2 * var(--gutter)));
  min-height: var(--ess-hero-min-height);
  margin: 0 auto;
  padding-block: var(--space-16);
}

.hero-copy .brand-signal {
  color: var(--gold-hi);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--track-caps);
}

.hero-copy h1 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-6);
}

.hero-copy .cta-group { margin-block-start: var(--space-8); }
.hero-emblem img { display: block; width: 100%; height: auto; }
.product-directory { display: grid; gap: var(--space-6); }
.product-directory h3 { font-size: var(--text-2xl); margin: 0; }
.product-directory .product-owner { color: var(--gold-hi); }
.product-name { font-size: var(--text-xl); }
.product-directory .product-cta { margin-block-start: var(--space-4); }

[data-region="region.header"] { grid-column: 1 / -1; }
[data-region="region.primary"] { grid-column: 1; min-width: 0; }
[data-region="region.secondary"] { grid-column: 2; min-width: 0; }
[data-region="region.feedback"] { grid-column: 1 / -1; }

.page-title {
  margin: 0;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
}

.audience-context,
.breadcrumb,
.audience,
.purpose,
.lede,
.meta {
  color: var(--glass-muted);
}

.glass-slab,
.place-card,
.institution,
.module,
.record,
.repo,
.search,
.page-header,
[data-region="region.secondary"] > section,
.feedback {
  isolation: isolate;
  background-color: var(--glass-slab);
  color: var(--glass-copy);
  border: var(--hairline) solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  background-image: var(--card-gradient);
}

.institution,
.module,
.record,
.repo {
  position: relative;
  padding: var(--space-5) var(--space-5);
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-height) + var(--space-5));
  transition: transform var(--dur-fast) var(--ease-out);
}

.institution h3,
.module h3,
.record h2,
.repo h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.institution p,
.module p,
.record p,
.repo p {
  margin: 0;
}

.state {
  margin-top: var(--space-2);
  color: var(--glass-muted);
  font-size: var(--text-sm);
}

.institution:hover,
.module:hover,
.record:hover,
.repo:hover {
  border-color: var(--border-strong);
}

.institution:focus-within,
.institution:target,
.module:focus-within,
.module:target,
.record:focus-within,
.repo:focus-within,
.search:focus-within {
  z-index: var(--z-raised);
  background-color: var(--glass-lift);
  transform: translateY(-2px);
  box-shadow: var(--elev-select);
}

.network-map,
.modules,
.institution-links,
.related-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.network-map { grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); }
.institution-links {
  grid-template-columns: repeat(auto-fit, minmax(var(--link-min), 1fr));
  margin-bottom: var(--space-4);
}

.search {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.search input,
.search button,
button[type="submit"] {
  font: inherit;
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--glass-edge);
  border-radius: var(--radius-md);
  background-color: var(--ess-ink);
  color: var(--glass-copy);
  min-height: var(--control-height);
  min-width: 0;
}

.search button,
button[type="submit"] {
  width: fit-content;
  background-color: var(--btn-bg);
  background-image: var(--gold-gradient);
  color: var(--btn-fg);
  border-radius: var(--radius-full);
  border: 0;
  box-shadow: var(--gold-shadow);
  cursor: pointer;
}

.search button:hover,
button[type="submit"]:hover {
  background-color: var(--btn-bg-hover);
}

dl {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

dl div {
  display: grid;
  grid-template-columns: var(--dt-width) 1fr;
  gap: var(--space-2);
}

dt {
  font-weight: var(--weight-semibold);
  color: var(--glass-muted);
}

dd { margin: 0; }

[data-region="region.secondary"] > section,
.page-header,
.feedback {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.pagination {
  color: var(--glass-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

/* Ported from the locked homepage's own footer (assets/web/home/index.html
   #contact .footer-grid and its stylesheet, ~L195-215/321-350), not a
   from-scratch lookalike. Raw values there are routed through design tokens
   here per the shared-token rule; structure, class roles and breakpoints
   (1000px/640px) match the source 1:1. */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-12) var(--footer-pad-block-end);
  padding-inline: var(--gutter);
  background-color: var(--glass-field);
  background-image: var(--footer-gradient);
  font-size: var(--text-sm);
  color: var(--glass-muted);
}

.footer-edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: var(--z-raised);
  pointer-events: none;
  background-image: var(--footer-edge-gradient);
  box-shadow: var(--footer-edge-shadow);
}

.footer-edge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: 70px;
  background-image: var(--footer-edge-glow);
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.45fr) minmax(0, 0.58fr) minmax(0, 0.6fr);
  grid-template-areas: "brand links legal social" "brand links copy copy";
  row-gap: var(--space-6);
}

.footer-brand {
  grid-area: brand;
  padding-right: clamp(20px, 3vw, 40px);
  margin: 0;
}

.footer-brand .wordmark img { width: clamp(56px, 7.2vw, 64px); }

.footer-about {
  margin-block: var(--space-5) 0;
  font-size: var(--text-base);
  color: var(--text);
  max-width: 26ch;
}

.footer-brand .rule {
  display: block;
  width: 46px;
  height: 2px;
  margin-block-start: var(--space-6);
  border-radius: var(--radius-xs);
  background-color: var(--gold);
  box-shadow: var(--rule-shadow);
}

.footer-motto {
  margin-block: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold);
}

.footer-links {
  grid-area: links;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-inline: var(--footer-col-pad-inline);
  border-left: var(--hairline) solid var(--edge-soft);
}

.footer-links h3 {
  margin: 0 0 var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.footer-links ul,
.footer-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a,
.footer-legal a {
  display: inline-block;
  padding-block: var(--space-0-5);
  font-size: var(--text-sm);
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover,
.footer-legal a:hover {
  color: var(--gold-hi);
}

.footer-legal {
  grid-area: legal;
  padding-inline: var(--footer-col-pad-inline);
  border-left: var(--hairline) solid var(--edge-soft);
}

.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.footer-social {
  grid-area: social;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--footer-social-gap);
  padding-block-start: var(--space-8);
  border-left: var(--hairline) solid var(--edge-soft);
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--text);
  transition: color 0.2s, transform 0.25s var(--ease-out);
}

.footer-social a:hover {
  color: var(--gold-hi);
  transform: translateY(-2px);
}

.footer-social svg { width: 26px; height: 26px; }

.footer-copy {
  grid-area: copy;
  align-self: end;
  padding-inline-start: clamp(20px, 2.6vw, 36px);
  font-size: var(--text-xs);
  color: var(--text-2);
  margin: 0;
}

.footer-meta {
  position: relative;
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-top: var(--hairline) solid var(--glass-edge);
}

@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand brand" "links legal" "social copy";
    row-gap: var(--space-8);
  }
  .footer-brand { padding-right: 0; }
  .footer-links { border-left: 0; padding-inline-start: 0; }
  .footer-social { justify-content: flex-start; padding-inline-start: 0; border-left: 0; }
  .footer-copy { padding-inline-start: clamp(20px, 2.6vw, 36px); }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "links" "legal" "social" "copy";
  }
  .footer-legal, .footer-links { padding-inline: 0; border-left: 0; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
  .footer-legal ul { gap: var(--space-1) var(--space-5); }
  .footer-copy { padding-inline-start: 0; }
}

.lockup {
  display: block;
  width: min(var(--lockup-max), 72vw);
  height: auto;
  border-radius: var(--radius-lg);
  background-color: var(--ess-ink);
  isolation: isolate;
}

.cta-group { margin: var(--space-2) 0 0; }

.cta {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background-color: var(--btn-bg);
  background-image: var(--gold-gradient);
  color: var(--btn-fg);
  text-decoration: none;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  min-height: var(--control-height);
  box-shadow: var(--gold-shadow);
}

button:active, .cta:active { transform: translateY(1px); }

button:focus-visible, .cta:focus-visible, .nav a[aria-current="page"]:focus-visible {
  outline-offset: calc(var(--focus-offset) + var(--space-px));
}

.cta:hover,
.cta:focus-visible {
  color: var(--btn-fg);
  background-color: var(--btn-bg-hover);
}

.product-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-5);
  color: var(--text);
  border: var(--hairline) solid var(--edge);
  border-radius: var(--radius-full);
  background-color: var(--ink-1);
  background-image: var(--nav-gradient);
  box-shadow: var(--nav-shadow);
  text-decoration: none;
}

.product-cta:hover { color: var(--text); border-color: var(--gold-hi); }

code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Below this width the homepage itself hides its plain nav-track behind a
   working menu button + drawer (assets/web/home/index.html "Menu drawer"),
   rather than wrapping links into a multi-row bar. Ported the same way: the
   pill track hides, .menu-btn/.search-btn stay visible at every width (as
   they do on the homepage), and #shell-menu below provides the same links. */
@media (max-width: 72rem) {
  .nav nav[aria-label="Primary"] { display: none; }
}

/* Matches the homepage's own @media(max-width:640px) step: wordmark text and
   icon buttons shrink so the header keeps fitting one row down to 380px. */
@media (max-width: 40rem) {
  .nav .brand-name { font-size: var(--brand-name-size-narrow); letter-spacing: var(--brand-name-track-narrow); }
  .nav .brand-tag { font-size: var(--brand-tag-size-narrow); }
  .nav .icon-btn { width: 40px; height: 40px; }
  .nav .menu-btn { width: 42px; height: 42px; }
}

/* Matches the homepage's own @media(max-width:380px){.brand-text{display:none}}:
   wordmark + two icon buttons no longer fit one row below ~380px even
   shrunk, so the name+tag collapse to just the mark. Scoped to the header
   only -- the footer's own wordmark reuse has a full-width column, not a
   cramped flex row. */
@media (max-width: 23.75rem) {
  .nav .brand-text { display: none; }
}

@media (max-width: 48rem) {
  body[data-shell] main, .main-content {
    grid-template-columns: 1fr;
    width: calc(100% - 2 * var(--gutter));
  }

  .hero-inner { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-12); }
  .hero-emblem { width: min(100%, var(--width-form)); margin: 0 auto; }

  [data-region="region.primary"],
  [data-region="region.secondary"],
  [data-region="region.header"],
  [data-region="region.feedback"] {
    grid-column: 1;
  }

  .page-title { font-size: var(--text-3xl); }
  .identity { align-items: start; }
  dl div { grid-template-columns: 1fr; }
  .network-map, .institution-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .nav nav { backdrop-filter: none; background-image: none; }
  .glass-slab, .place-card, .record, .search { background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .institution,
  .module,
  .record,
  .repo {
    transition: none;
  }

  .institution:focus-within,
  .institution:target,
  .module:focus-within,
  .module:target,
  .record:focus-within,
  .repo:focus-within,
  .search:focus-within,
  button:active,
  .cta:active {
    transform: none;
  }
}